VibeKoding / Level 1Level 1 / Pelajaran 3Lesson 3
VK

Pindah ke Markas Developer: AI IDE 🏒 Moving to Developer HQ: The AI IDE 🏒

⏱️ ~2 jam~2 hours πŸ’» Alat: Trae / Cursor / VS Code + AITools: Trae / Cursor / VS Code + AI 🎯 Skill: Loop belajar AI-nativeSkill: AI-native learning loop
Progres pelajaranmuYour lesson progress: 0%
Sudut Pandang UnikQuick Perspective

Kemarin kamu masak di dapur browser β€” praktis, tapi dapurnya minjem. 🍳 Hari ini kita pindah ke dapur milik sendiri: namanya IDE (Integrated Development Environment). Nama boleh serem, tapi isinya cuma: layar buat nulis, tombol buat jalanin, dan AI yang selalu standby di sebelahmu kayak sahabat kepo. πŸ‘€ Yesterday you cooked in the browser's kitchen β€” convenient, but it was a borrowed kitchen. 🍳 Today we move to your own kitchen: it's called an IDE (Integrated Development Environment). Scary name, but it's just: a screen for writing, a button to run, and AI always standing by like a nosy best friend. πŸ‘€

1. IDE vs AI IDE: Apa Bedanya? πŸ€”1. IDE vs AI IDE: What's the Difference? πŸ€”

IDE biasa (kayak VS Code) itu kayak meja belajar lengkap: ada lampu, laci, tempat pensil β€” semua alat buat kerja. AI IDE (Trae, Cursor, Windsurf) itu meja belajar yang sama, tapi ada guru les privat yang duduk di sebelahmu 24/7. Kamu ngetik setengah kalimat, dia nebak lanjutannya. Kamu bingung, tinggal tanya. πŸŽ“ A regular IDE (like VS Code) is like a complete study desk: lamp, drawers, pencil holder β€” all the tools for work. An AI IDE (Trae, Cursor, Windsurf) is the same desk, but with a private tutor sitting next to you 24/7. You type half a sentence, it guesses the rest. You're confused, just ask. πŸŽ“

AI IDEAI IDECocok UntukGreat ForHargaPrice
TraePemula total β€” dipakai di kursus asli Easy-Vibe. Gratis dengan kuota.Total beginners β€” used in the original Easy-Vibe course. Free with quota.Gratis πŸ†“Free πŸ†“
CursorYang mau AI paling canggih. Banyak dipakai profesional.Those who want the smartest AI. Widely used by pros.Ada free tierFree tier available
VS Code + Copilot/ContinueYang mau fleksibel dan gratis total.Those who want flexibility and totally free.Gratis πŸ†“Free πŸ†“
πŸ“₯ Langkah Install (Santai Aja)Install Steps (Take It Easy)

1. Download dari situs resminya (contoh: trae.ai).
2. Install kayak aplikasi biasa (Next β†’ Next β†’ Finish πŸ–±οΈ).
3. Buka, bikin akun gratis.
4. Kalau ada yang bingung, tanya aja ke AI: "Aku baru install Trae di Windows, langkah selanjutnya apa?" β€” ya, bahkan cara pakainya bisa kamu vibe-code-in. πŸŒ€
1. Download from the official site (e.g. trae.ai).
2. Install like any app (Next β†’ Next β†’ Finish πŸ–±οΈ).
3. Open it, make a free account.
4. If confused, just ask AI: "I just installed Trae on Windows, what's next?" β€” yes, you can even vibe-code the setup. πŸŒ€

2. Aturan Emas: Bertanya ke AI DULU πŸ₯‡2. The Golden Rule: Ask AI FIRST πŸ₯‡

Mulai sekarang, AI adalah tempat bertanya pertamamu. Konsep nggak paham? Tanya AI. Tool nggak bisa keinstall? Tanya AI. Error misterius? Tanya AI. Nggak tahu harus ngapain? YA TANYA AI. 😀 Ini bukan nyontek β€” ini cara belajar di era AI. Guru dan temanmu tetap penting, tapi AI nggak pernah capek ditanya ulang 47 kali. πŸ˜… From now on, AI is your first place to ask. Concept unclear? Ask AI. Tool won't install? Ask AI. Mysterious error? Ask AI. Don't know what to do? ASK AI. 😀 This isn't cheating β€” this is how you learn in the AI era. Teachers and friends still matter, but AI never gets tired of being asked the same thing 47 times. πŸ˜…

πŸ” Loop Belajar AI-Native (Hafalkan Siklusnya!)The AI-Native Learning Loop (Memorize the Cycle!)

1. 😡 Ketemu masalah β†’ jelaskan tujuan & apa yang terjadi
2. πŸ™‹ Tanya AI β†’ sertakan konteks (OS-mu, versi tool, pesan error lengkap)
3. πŸ§ͺ Coba sendiri β†’ ikuti sarannya
4. πŸ€” Berhasil nggak?
   β€’ Kalau gagal: kasih tahu AI hasilnya/error-nya β†’ balik ke langkah 2 πŸ”
   β€’ Kalau berhasil: jelaskan ke diri sendiri kenapa itu berhasil β†’ jadi skill permanen! 🧠
1. 😡 Hit a problem β†’ state the goal & what happened
2. πŸ™‹ Ask AI β†’ include context (your OS, tool version, full error)
3. πŸ§ͺ Try it yourself β†’ follow the suggestion
4. πŸ€” Did it work?
   β€’ If no: give AI the result/error β†’ back to step 2 πŸ”
   β€’ If yes: explain to yourself why it worked β†’ becomes a permanent skill! 🧠

3. contekan Pertanyaan Anti-Buntu πŸ“‹3. The Anti-Stuck Question Cheat Sheet πŸ“‹

πŸ’¬ TEMPLATE PERTANYAAN SUPERπŸ’¬ SUPER QUESTION TEMPLATES
1. KONSEP: "Aku nggak punya latar belakang programming. Jelaskan [konsep] pakai analogi kehidupan sehari-hari, lalu kasih contoh paling kecil." 2. INSTALL: "Aku pakai [Windows/Mac]. Aku mau menjalankan [project]. Cek dulu apa yang aku butuhkan, lalu pandu aku langkah demi langkah dan jelaskan fungsi tiap langkah." 3. ERROR: "Ini perintahnya dan error lengkapnya: [tempel]. Tebak penyebab paling mungkin dulu, lalu kasih perbaikan paling kecil. Kalau butuh info tambahan, bilang saja." 4. MENTOK: "Tujuanku bikin [X], dan sekarang udah sampai [Y]. Kasih tahu langkah terkecil selanjutnya dan gimana aku tahu langkah itu udah selesai." 5. KODE MEMBINGUNGKAN: "Jangan ubah kode dulu. Jelaskan perubahan terakhir per bagian: masing-masing menyelesaikan masalah apa." 6. PILIHAN SULIT: "Aku pemula dan mau versi yang jalan cepat. Bandingkan opsi A dan B dengan kondisi itu, lalu rekomendasikan satu dengan jelas."1. CONCEPT: "I have no programming background. Explain [concept] with an everyday analogy, then give me the smallest example." 2. INSTALL: "I'm on [Windows/Mac]. I want to run [project]. First check what I need, then guide me step by step and explain what each step does." 3. ERROR: "Here's the command and the full error: [paste]. Guess the most likely cause first, then give me the smallest fix. If you need more info, just say so." 4. STUCK: "My goal is [X], and I've reached [Y]. Tell me the smallest next step and how I'll know it's done." 5. CONFUSING CODE: "Don't change code yet. Explain the last change piece by piece: what problem does each part solve." 6. HARD CHOICE: "I'm a beginner and want a version that runs fast. Compare options A and B under that condition and clearly recommend one."

πŸ’Ύ Template paling sakti: "Tujuanku adalah ___; aku udah selesai ___; aku udah coba ___; hasil/error-nya ___; tolong jelaskan penyebabnya dulu, terus kasih langkah terkecil berikutnya." β€” makin lengkap infomu, makin berguna jawabannya. πŸ’Ύ The most powerful template: "My goal is ___; I've done ___; I tried ___; the result/error is ___; please explain the cause first, then give me the smallest next action." β€” the more complete your info, the more useful the answer.

4. Praktik: Bikin Ular di IDE 🐍➑️🏒4. Practice: Snake in the IDE 🐍➑️🏒

Ambil game ular dari Pelajaran 2, lalu "pindahkan" ke IDE-mu: Take your snake game from Lesson 2 and "move" it into your IDE:

  1. Di AI IDE, buka folder baru (misal vibekoding-project). πŸ“In your AI IDE, open a new folder (e.g. vibekoding-project). πŸ“
  2. Bikin file index.html, tempel kode game ularmu. πŸ“‹Create index.html, paste your snake game code. πŸ“‹
  3. Buka panel chat AI-nya, dan coba minta 3 modifikasi langsung dari sana (misal: "ubah warna latar jadi biru laut"). Perhatikan bedanya: di IDE, AI langsung mengubah file-nya di depan matamu. πŸ‘οΈOpen its AI chat panel, and ask for 3 modifications right from there (e.g. "change the background to ocean blue"). Notice the difference: in an IDE, AI edits your file directly before your eyes. πŸ‘οΈ
  4. Kalau ada error, pakai template ERROR di atas. Kamu lagi latihan jadi detektif. πŸ•΅οΈIf an error appears, use the ERROR template above. You're training to be a detective. πŸ•΅οΈ

5. Misi Rahasiamu πŸ•΅οΈ5. Your Secret Mission πŸ•΅οΈ

🎯 MISI LEVEL 1-C: Tur MarkasMISSION LEVEL 1-C: HQ Tour
  1. Tanya AI IDE-mu: "Jelaskan bagian-bagian layar ini ke aku yang masih pemula, satu per satu." Kenali wilayah barumu kayak kenalin lorong sekolah. 🏫Ask your AI IDE: "Explain the parts of this screen to me as a beginner, one by one." Learn your new territory like learning the school hallways. 🏫
  2. Lakukan minimal 3 ronde loop belajar (tanya β†’ coba β†’ lapor hasil). Catat di notes: masalahnya apa, solusinya apa.Complete at least 3 rounds of the learning loop (ask β†’ try β†’ report result). Note it down: what was the problem, what was the solution.
  3. Bonus 🌟: minta AI menjelaskan isi kode game ularmu baris demi baris (versi santai). Kamu bakal kaget betapa banyak yang ternyata kamu ngerti!Bonus 🌟: ask AI to explain your snake game code line by line (relaxed version). You'll be surprised how much you actually understand!

6. Uji Pemahaman πŸ§ͺ6. Knowledge Check πŸ§ͺ

❓ Apa bedanya IDE biasa dan AI IDE?❓ What's the difference between a regular IDE and an AI IDE?β–Ά
IDE biasa = meja kerja lengkap untuk nulis & menjalankan kode. AI IDE = meja kerja yang sama + asisten AI terintegrasi yang bisa nulis, mengubah, dan menjelaskan kode lewat chat. Contoh AI IDE: Trae, Cursor, Windsurf. Regular IDE = a complete workbench for writing & running code. AI IDE = the same workbench + an integrated AI assistant that can write, edit, and explain code via chat. AI IDE examples: Trae, Cursor, Windsurf.
❓ Sebutkan 4 langkah loop belajar AI-native!❓ Name the 4 steps of the AI-native learning loop!β–Ά
1️⃣ Ketemu masalah β†’ 2️⃣ Tanya AI dengan konteks β†’ 3️⃣ Coba sendiri β†’ 4️⃣ Gagal? Lapor hasilnya & ulang. Berhasil? Jelaskan kenapa berhasilnya biar jadi skill permanen. πŸ”πŸ§  1️⃣ Hit a problem β†’ 2️⃣ Ask AI with context β†’ 3️⃣ Try it yourself β†’ 4️⃣ Failed? Report the result & repeat. Succeeded? Explain why it worked so it becomes a permanent skill. πŸ”πŸ§ 
❓ Kenapa harus nyertain konteks lengkap saat bertanya ke AI?❓ Why include full context when asking AI?β–Ά
Karena AI nggak bisa baca pikiran (belum πŸ˜…). Tanpa konteks, jawabannya tebak-tebakan umum. Dengan konteks lengkap (OS, error message penuh, tujuanmu), jawabannya langsung tepat sasaran β€” kayak kasih Google Maps alamat lengkap, bukan cuma bilang "ke rumah temen". πŸ—ΊοΈ Because AI can't read minds (not yet πŸ˜…). Without context, answers are generic guesses. With complete context (OS, full error message, your goal), answers hit the mark β€” like giving Google Maps a full address instead of just saying "my friend's house". πŸ—ΊοΈ
πŸ’‘ Jokes PenutupClosing Joke

Kenapa AI IDE nggak pernah kesepian?

Karena dia selalu punya teman chat... yaitu kamu! πŸ‘― Dan mulai sekarang, kamu juga nggak akan pernah kesepian lagi β€” ada AI yang siap nemenin debugging jam 2 pagi. (Tapi tidur tetap lebih baik ya, jangan kayak programmer senior. 😴)
Why is an AI IDE never lonely?

Because it always has a chat buddy... you! πŸ‘― And from now on, you'll never be lonely either β€” AI is ready to join your 2 AM debugging sessions. (But sleep is still better β€” don't be like senior programmers. 😴)