Selamat datang ke Vibe Coding! Dalam fasa ini, anda akan belajar apa itu AI-assisted development, pasang alatan yang diperlukan, dan jalankan prompt pertama anda.
Vibe Coding adalah cara baru untuk menulis kod — anda cakap apa yang anda nak, dan AI akan menulis kod untuk anda.
Daripada menaip kod baris demi baris, anda terangkan dalam bahasa natural apa yang anda nak bina. AI akan menterjemahkan penerangan anda kepada kod yang berfungsi.
Anda fokus pada apa yang nak dibina (logik, reka bentuk, pengalaman pengguna). AI uruskan bagaimana nak tuliskannya dalam kod. Macam ada seorang programmer di sisi anda.
Bayangkan anda nak bina sebuah rumah. Biasanya, anda kena belajar jadi tukang batu — campur simen, susun bata, pasang atap. Dengan Vibe Coding, anda cukup lukis pelan rumah dan terangkan apa yang anda nak. AI akan jadi kontraktor yang bina rumah tu untuk anda. Anda masih perlu tahu nak rumah macam mana — tapi tak perlu jadi tukang batu.
AI-assisted development mengubah cara kita membina perisian. Berikut adalah sebab kenapa ia penting, terutamanya untuk beginners.
Apa yang ambil masa berjam-jam untuk tulis manual, AI boleh hasilkan dalam minit. Anda boleh cuba pelbagai idea dan iterasi dengan cepat tanpa risau "susah nak ubah nanti".
Tak perlu hafal syntax atau faham compiler errors yang rumit. Anda cukup tahu konsep asas dan apa yang nak dibina. AI akan handle penulisan kod dan terangkan error dalam bahasa yang anda faham.
AI bukan saja tulis kod — ia boleh terangkan apa yang ia buat, kenapa pilih approach tertentu, dan cadangkan cara lebih baik. Anda belajar secara semula jadi sambil membina projek sebenar.
"Kenapa kod saya tak jalan?" Tanya AI. Ia akan scan kod, cari bug, dan cadangkan fix. Anda bukan saja dapat penyelesaian — anda faham kenapa ia terjadi dan boleh elak di masa depan.
Dalam kursus ini, kita akan guna dua alat utama dari Anthropic. Kedua-duanya ada kekuatan masing-masing.
| Aspek | Claude Code CLI | Claude Codex EDITOR |
|---|---|---|
| Platform | Terminal / Command Line | VS Code Extension |
| Cara Guna | Taip arahan dalam terminal. Bagus untuk task besar: bina app, urus fail, Git, deployment. | Guna dalam editor VS Code. Bagus untuk edit kod, refactor, auto-complete, inline suggestions. |
| Kekuatan Utama | Build app dari awal, full-stack development, file manipulation, multi-file projects, Git integration | Edit kod sedia ada, refactoring cepat, auto-complete, inline chat, integration rapat dengan editor |
| Terbaik Untuk | Mencipta projek baru, build app lengkap, deployment, task yang perlukan akses sistem fail | Bekerja dalam projek sedia ada, quick edits, code navigation, pair programming dalam editor |
| Cara Install | npm install -g @anthropic-ai/claude-code |
VS Code Marketplace — cari "Claude Codex" |
| Authentication | API key dari console.anthropic.com | Login dengan akaun Anthropic dalam VS Code |
| Kelebihan | Lebih power, akses penuh ke sistem, bagus untuk projek dari 0 | Lebih ringan, integrasi rapat dengan editor, mudah untuk quick task |
| Kekurangan | Perlu biasa dengan terminal, learning curve untuk non-developer | Terhad kepada VS Code, tak boleh buat task yang perlukan akses sistem penuh |
GitHub Copilot adalah alternatif popular dari Microsoft/GitHub. Ia berfungsi sebagai auto-complete dalam editor — semasa anda taip, ia cadangkan kod. Tapi untuk Vibe Coding (arahan bahasa natural untuk hasilkan kod dari penerangan), Claude Code dan Codex lebih sesuai kerana ia direka untuk interaksi conversational dan task-level.
Kursus ini terbahagi kepada 8 fasa. Setiap fasa membina kemahiran dari asas hingga ke aplikasi production. Berikut adalah apa yang akan anda pelajari.
Pasang alatan, setup persekitaran, jalankan prompt pertama. Fasa ini adalah asas untuk segala-galanya.
Teknik menulis prompt yang berkesan — dari prompt ringkas ke prompt berstruktur dengan konteks, contoh, dan constraints.
Bina landing page peribadi dengan HTML, CSS, dan reka bentuk web menggunakan AI. Deploy ke GitHub Pages atau Netlify.
Terokai MCP Servers, Superpowers Skills, plugin, dan cara memanfaatkan ekosistem Claude Code untuk pembangunan efisien.
Bina portfolio multi-page dengan navigasi, komponen UI, dan JavaScript interaktiviti. Fokus pada penggunaan AI untuk mempercepat pembangunan komponen.
Pengenalan kepada Supabase — database, CRUD operations, authentication, API integration dengan bantuan AI.
Projek puncak: dashboard full-stack dengan data dari Supabase, visualisasi, dan UI interaktif. Integrasi semua kemahiran dari fasa sebelumnya.
Deploy ke production, CI/CD, domain setup, monitoring, dan operational best practices. Aplikasi anda akan live!
Pastikan anda telah melakukan persediaan berikut SEBELUM menghadiri kelas Fasa 1. Ini akan menjimatkan masa dan memastikan sesi berjalan lancar.
node --version berfungsigit --version berfungsiSelepas membaca modul ini, anda sudah bersedia untuk sesi hands-on. Buka latihan di bawah untuk memulakan pemasangan dan mencuba prompt pertama anda.