Learning Timeline
Key Insights
Thinking Mode vs Fast Mode
GPT-5 dalam 'Thinking Mode' menjana kod yang jauh lebih berkualiti (sehingga 800+ baris) berbanding 'Fast Mode' atau GPT-4o yang hanya menjana sekitar 80-170 baris. Ini mengurangkan risiko pepijat pada butang dan visual UI.
Tips Paparan Visual
Secara default, AI mungkin menjana UI yang kurang berwarna. Anda boleh menambah kualiti visual dengan meminta penambahan CSS khusus atau tema warna tertentu dalam follow-up prompt.
Kelebihan React dalam Canvas
Gunakan framework React apabila meminta AI membina aplikasi di dalam Canvas kerana sistem Canvas dioptimumkan untuk memaparkan komponen React dengan sangat baik secara real-time.
Prompts
Membina Goal Tracking App
Target:
ChatGPT (Canvas Mode)
Build a goal tracking app using React.
Membina Simulasi Business Tycoon
Target:
ChatGPT (Canvas Mode)
Build a business tycoon game where I'm making decisions as time goes on. Business name: Tech. Location: Chicago. Strategy: Balanced.
Step by Step
Membina Aplikasi React Menggunakan Canvas & Thinking Mode
- Klik ikon '+' (tambah) yang terletak di bahagian tepi ruang input ChatGPT.
- Pilih dan aktifkan 'Canvas' daripada menu pilihan model untuk membuka ruang kerja interaktif.
- Pastikan anda memilih model 'GPT-5' (atau versi terkini) dan aktifkan fungsi 'Thinking Mode' sebelum menghantar arahan.
- Taip prompt spesifik untuk membina aplikasi, contohnya: 'Build a goal tracking app using React'.
- Klik butang 'Send' dan tunggu AI melakukan proses 'reasoning'. Proses ini mungkin memakan masa (sehingga 10 minit) kerana AI sedang merancang logik yang kompleks.
- Setelah kod dijana, tetingkap Canvas akan memaparkan kod di sebelah kiri dan 'Preview' aplikasi di sebelah kanan.
- Uji fungsi aplikasi secara interaktif di dalam Canvas (contoh: klik butang 'Add Goal', cuba toggle 'Dark Mode', atau lihat 'Weekly Trend').
- Jika terdapat sebarang pepijat (bugs) atau elemen visual yang kurang memuaskan, berikan follow-up prompt untuk penambahbaikan spesifik.
