Bina Client Dashboard Real-Time dengan Hostinger Horizons | Alpha | PandaiTech

Bina Client Dashboard Real-Time dengan Hostinger Horizons

Tutorial menghasilkan sistem pengurusan klien untuk track status projek dan pembayaran invois secara real-time tanpa perlu bayar langganan software mahal.

Learning Timeline
Key Insights

Kelebihan Real-Time Data

Berbeza dengan website statik, dashboard yang dibina dengan Horizons mempunyai fungsi database. Setiap perubahan status atau penambahan klien akan terus disimpan (sticks) tanpa perlu klik 'Save' secara manual setiap kali.

Penjimatan Kos Langganan

Membina tool sendiri melalui AI boleh menjimatkan kos antara $15 hingga $30 sebulan berbanding melanggan perisian pengurusan projek (SaaS) pihak ketiga.

Fleksibiliti Skalabiliti

Jika perniagaan anda berkembang, anda hanya perlu memberitahu AI untuk menambah 'field' atau fungsi baru (seperti tarikh deadline atau lampiran fail) tanpa perlu tahu coding yang kompleks.
Prompts

Dashboard Generation Prompt

Target: Hostinger Horizons
Build a full client dashboard tool where I can track active projects and payments. Include a table showing: client name, project title, current status, and invoice payment status. The payment column must be color-coded: overdue in red, pending in yellow, and paid in green. Add a button to add new clients and make project statuses clickable to update them. Ensure all data saves and updates in real-time.
Step by Step

Membina Client Dashboard dengan Hostinger Horizons

  1. Buka interface Hostinger Horizons AI builder.
  2. Masukkan prompt terperinci yang menerangkan struktur sistem pengurusan klien yang anda inginkan (rujuk Prompt Card).
  3. Tunggu AI menjana dashboard yang mengandungi komponen jadual (table) utama.
  4. Semak kolum jadual untuk memastikan terdapat medan: Nama Klien, Tajuk Projek, Status Projek, dan Status Pembayaran.
  5. Konfigurasikan sistem warna automatik (Color-coding) pada kolum Payment: Merah untuk 'Overdue', Kuning untuk 'Pending', dan Hijau untuk 'Paid'.
  6. Gunakan fungsi 'Add New Client' untuk menguji kemasukan data baru ke dalam database.
  7. Klik pada mana-mana baris projek untuk mengemaskini (update) status dan pastikan perubahan tersebut disimpan secara real-time.
  8. Berikan arahan tambahan melalui chat AI jika anda ingin menambah kolum atau fungsi baru pada dashboard tersebut.

More from Coding & Pembangunan Aplikasi AI

View All