Learning Timeline
Key Insights
Kelebihan Google AI Studio Preview
Berbeza dengan ChatGPT, Google AI Studio membolehkan anda melihat 'Live Preview' yang interaktif. Anda boleh terus klik butang dan test function hantar data tanpa perlu copy kod ke dalam VS Code terlebih dahulu.
Tips Debugging Webhook
Jika data tidak sampai ke n8n, semak bahagian 'Network' di browser Inspect Element. Pastikan tiada error CORS dan pastikan URL Webhook yang digunakan adalah 'Test URL' (bukan Production URL) semasa fasa pembangunan.
Prompts
Frontend Generation with Webhook Integration
Target:
Google AI Studio
Create a modern, mobile-responsive fitness tracker UI using Tailwind CSS and React-style logic. The app should have fields for 'Exercise Name', 'Duration (minutes)', and 'Calories Burned'. Include a 'Log Workout' button.
CRITICAL: When the button is clicked, send the form data as a JSON object using the Fetch API (method: POST) to this exact Webhook URL: [MASUKKAN_URL_WEBHOOK_ANDA_DI_SINI]. Show a success message if the data is sent correctly.
Step by Step
Penyediaan Webhook di n8n
- Buka dashboard n8n dan cipta workflow baru.
- Tambah node 'Webhook' ke dalam kanvas.
- Setkan 'HTTP Method' kepada 'POST'.
- Salin (Copy) 'Test URL' yang diberikan oleh node Webhook tersebut.
- Klik 'Listen for Test Event' untuk memulakan mod menunggu data.
Membina Interface di Google AI Studio
- Layari Google AI Studio dan pilih model 'Gemini 1.5 Pro' atau 'Flash'.
- Masukkan prompt spesifik untuk membina UI fitness app (rujuk Prompt Card).
- Pastikan anda memasukkan Webhook URL dari n8n ke dalam arahan prompt tersebut.
- Klik butang 'Run' untuk menjana kod dan preview interface.
- Gunakan tab 'Preview' di sebelah kanan untuk melihat hasil visual app secara langsung.
Menyambung Frontend ke Backend
- Isi data dummy ke dalam input field pada interface app yang baru dijana (cth: Nama Senaman, Kalori).
- Klik butang 'Submit' atau 'Hantar' pada preview app tersebut.
- Kembali ke tab n8n untuk memastikan status bertukar kepada 'Success' dan data dipaparkan dalam format JSON.
- Jika berjaya, sambungkan node Webhook tadi ke node seterusnya (cth: Google Sheets atau Database) untuk menyimpan data.
