Bina prototaip web app pantas dengan Hostinger Horizons | Alpha | PandaiTech

Bina prototaip web app pantas dengan Hostinger Horizons

Tutorial menukar idea kepada aplikasi web yang berfungsi sepenuhnya menggunakan prompt yang dijana oleh NotebookLM dan platform Hostinger Horizons. Anda akan belajar cara 'iterate' features seperti checklist dan timer tanpa perlu menulis sebarang kod.

Learning Timeline
Key Insights

Fitur Auto-Fix Error

Anda tidak perlu tahu coding untuk membaiki pepijat (bugs). Jika aplikasi tidak berjalan lancar, cukup sekadar klik pada notifikasi error dan AI akan cuba menjana semula kod yang betul secara automatik.

Kelebihan All-in-One

Menggunakan Hostinger Horizons memudahkan proses pelancaran kerana anda boleh melakukan prototyping, membeli domain, dan melanggan hosting di dalam satu ekosistem yang sama tanpa perlu 'extract' kod secara manual ke platform lain.
Prompts

Prompt Penjanaan Prototaip Microtasks

Target: Gemini / NotebookLM
Help me craft a prompt that turns text instructions into a working app. Create a prototype app called 'Microtasks'. I want it to break down tasks step by step. Include features for a YouTube video creation workflow: 5 minutes brainstorming, 5 minutes outline, 5 minutes setup, and 5 minutes research. Ensure it is interactive and clean.

Prompt Penambahbaikan Fitur (Iteration)

Target: Hostinger Horizons Sidebar
Add a checklist feature where tasks get a strikethrough when completed. Also, add a working countdown timer for each task that I can start and reset.
Step by Step

Membina Prototaip Web App dengan Hostinger Horizons

  1. Layari platform Hostinger Horizons melalui pelayar web anda.
  2. Sediakan prompt yang telah diperhalusi (refined) daripada tool AI seperti NotebookLM atau Gemini yang menerangkan fungsi aplikasi (cth: Microtasks app).
  3. Tampal (Paste) prompt tersebut ke dalam kotak input teks utama di tengah skrin.
  4. Klik butang 'Send' atau ikon anak panah untuk memulakan proses penjanaan kod.
  5. Tunggu sehingga AI selesai menulis kod dan memaparkan draf pertama aplikasi anda di ruang 'Preview'.
  6. Gunakan ruangan input di bar sisi (sidebar) sebelah kiri untuk memasukkan follow-up prompt bagi menambah fitur spesifik (cth: 'Add a checklist feature with strikethrough' atau 'Add a countdown timer').
  7. Klik butang hantar pada sidebar tersebut untuk mengemas kini kod aplikasi secara real-time.
  8. Uji fungsi aplikasi secara interaktif dalam paparan 'Preview' (cth: Klik checkbox atau jalankan timer).
  9. Jika muncul sebarang error, klik pada mesej error tersebut untuk membolehkan AI membaiki kod secara automatik (self-fixing).
  10. Klik butang 'Export' untuk memuat turun kod, atau klik 'Publish' untuk terus menghubungkan aplikasi dengan domain dan hosting daripada Hostinger.

More from Coding & Pembangunan Aplikasi AI

View All