Setup Vibe 101
Apa ini
Setup ialah langkah pertama dalam Vibe 101.
Jangan mula bina selagi device, internet, akaun AI, IDE, Node.js, Git, dan terminal belum sedia.
Kenapa penting
Setup yang rosak buat step lain rasa lebih susah daripada yang sebenar.
Kalau localhost tidak berjalan nanti, kelas akan jadi sesi meneka, bukan sesi membina. Page ini fokus pada tools asas. Check localhost dibuat selepas project files sudah wujud.
Apa nak buat
Tools asas
Empat tools yang setiap sesi Vibe Coding perlukan:
| Tool | Apa ia buat |
|---|---|
| Node.js | Jalankan JavaScript kat komputer kamu supaya project berfungsi secara local |
| Git | Jejak setiap perubahan pada code kamu — sistem save kamu |
| IDE | Tempat kamu tulis code, run terminal, dan guna AI assistant |
| GitHub | Simpan code online; Vercel baca dari sini untuk deploy site kamu |
Setiap tool ada page setup sendiri dengan penjelasan lebih mendalam. Page ni ialah checklist ringkas — guna ia untuk confirm semua sedia sebelum sesi mula.
Sebelum kelas, pastikan:
- Laptop atau desktop. Jangan guna phone.
- Internet stabil.
- Akaun ChatGPT atau Perplexity, sudah login.
- Cursor atau Antigravity sudah install dan buka tanpa error.
- Node.js LTS dari nodejs.org.
- Git dari git-scm.com.
- Terminal boleh run
node -vdangit --version.
Windows setup
Install:
- Node.js LTS dari nodejs.org.
- Git for Windows dari git-scm.com/download/win.
- Cursor dari cursor.com/download atau Antigravity dari antigravity.google.
Selepas install, tutup dan buka semula IDE dan terminal.
Semak:
node -v
git --versionKalau PowerShell block command, cuba terminal dalam IDE dulu sebelum ubah system setting.
Mac setup
Install:
- Node.js LTS dari nodejs.org.
- Cursor dari cursor.com/download atau Antigravity dari antigravity.google.
Selepas itu, buka Terminal:
xcode-select --installOptional AI coding tool:
npm i -g opencode-aiSemak folder dan terminal
Sebelum paste prompt pertama dalam IDE, buat satu project folder dan buka folder yang tepat dalam Cursor atau Antigravity.
Kalau kelas guna Antigravity atau VS Code extensions, ikut nama extension yang tutor beri. Untuk kelas pertama, kekalkan setup ringkas: satu editor, satu project folder, satu terminal.
Buka integrated terminal. Kalau terminal bukan dalam project folder, guna cd untuk masuk folder yang betul:
cd path/to/project-folderSemak folder sebelum teruskan:
dirDi Mac, guna:
lsSenarai files patut sepadan dengan folder yang pelajar mahu guna. Check package.json datang kemudian, selepas project sudah dibuat atau clone.
Command asas
cd maksudnya change directory. Guna bila terminal buka dekat folder yang salah.
Project command seperti npm install dan npm run dev datang kemudian, selepas project files wujud.
Check setup terakhir
node -v
git --versionCheckpoint tools:
Node.js dan Git kedua-duanya tunjuk nombor versi.Kalau salah satu command tidak berjalan, tugas seterusnya bukan coding. Tugas seterusnya ialah betulkan setup.
Mistake biasa
- Join kelas dengan phone sahaja.
- Belum login AI tools.
- Install Node.js tapi tak restart terminal.
- Install Git tapi tak restart IDE.
- Guna terminal yang salah.
- Terus bina walaupun localhost belum berjalan.
Vibe 101 / Checkpoint sekarang
Setup
Sedia untuk stamp - Disimpan dalam browser ini sahaja.
0 daripada 20 checkpoints complete.