Pelajaran 2: Bisa Ngomong = Bisa Coding

Sudut Pandang UnikQuick Perspective

Membangun game klasik seperti Snake adalah uji coba paling ideal untuk membuktikan kekuatan AI koding: dalam hitungan menit, logika grid, deteksi tabrakan, dan rendering skor dapat diwujudkan hanya melalui deskripsi instruksi yang terstruktur. 🧋 Building a classic Snake game is the perfect benchmark to demonstrate AI programming power: in minutes, grid mechanics, collision detection, and score rendering come alive purely through structured natural prompts. 🧋

1. Persiapan: Pilih "Dapur"-mu 🍳1. Prep: Pick Your "Kitchen" 🍳

Untuk bikin program pertamamu, kamu butuh AI yang bisa langsung menjalankan kode di browser (jadi kamu nggak perlu install apa pun — santai kayak di pantai 🏖️). Pilih salah satu: For your first program, you need an AI that can run code right in the browser (so no installs — chill like you're at the beach 🏖️). Pick one:

AlatTool	Kenapa Cocok buat PemulaWhy It's Great for Beginners
Trae (trae.ai)	Dipakai di kursus asli Easy-Vibe. Mode "Builder"-nya bikin website dari obrolan.Used in the original Easy-Vibe course. Its "Builder" mode turns chat into websites.
ChatGPT / Gemini / Claude	Minta saja: "Buatkan kode HTML lengkap dalam satu file." Lalu simpan sebagai file `.html` dan buka di browser.Just ask: "Give me the complete HTML code in one file." Then save it as a `.html` file and open in your browser.
Bolt.new / Lovable / v0	Langsung menampilkan preview aplikasimu di layar. Magic banget. Instantly show a live preview of your app. Pure magic.

💡 Aturan Emas Pelajaran IniThe Golden Rule of This Lesson

Selesai lebih penting daripada sempurna. 🏁 Jangan terjebak bikin game yang sempurna. Yang penting: game-nya jalan, kamu ngerti alurnya, dan kamu seneng. Nanti kita poles bareng-bareng. Done beats perfect. 🏁 Don't get stuck chasing a perfect game. What matters: it runs, you understand the flow, and you have fun. We'll polish it together later.

2. Langkah 1: Satu Kalimat Ajaib 2. Step 1: One Magic Sentence

Ketik prompt pertamamu ke AI. Ini versinya (tiru, modif, atau bikin sendiri): Type your first prompt to the AI. Here's the version (copy it, tweak it, or write your own):

💬 PROMPT #1 — Panggil Sang Ular💬 PROMPT #1 — Summon the Snake

Buatkan game ular (snake) dalam SATU file HTML.
Aturannya:
- Ular bergerak pakai tombol panah keyboard
- Ada makanan yang muncul acak
- Kalau makan, ular bertambah panjang dan skor +10
- Kalau nabrak dinding atau badan sendiri, game over
- Tampilkan skor di atas layar
Desainnya modern dan keren, warna gelap dengan aksen hijau neon.Create a snake game in ONE HTML file.
Rules:
- The snake moves using arrow keys
- Food appears randomly
- Eating food makes the snake grow and adds 10 points
- Hitting walls or its own body = game over
- Show the score at the top of the screen
Modern, cool design: dark background with neon green accents.

Tekan enter. Tarik napas. Dan lihat: AI bakal nulis ratusan baris kode dalam hitungan detik — kode yang bahkan programmer butuh waktu buat nulis manual. Kamu baru aja "memprogram" tanpa mengetik satu baris kode pun. 🤯 Press enter. Take a breath. And watch: AI writes hundreds of lines of code in seconds — code that would take a programmer real time to type by hand. You just "programmed" without typing a single line. 🤯

3. Langkah 2: Mainkan! (Iya, Wajib) 🎮3. Step 2: Play It! (Yes, Mandatory) 🎮

Jalankan hasilnya. Kalau pakai Bolt/Lovable/Trae, preview-nya langsung muncul. Kalau pakai ChatGPT dkk: Run the result. With Bolt/Lovable/Trae the preview appears instantly. With ChatGPT and friends:

Salin semua kode yang dikasih AI. 📋Copy all the code AI gives you. 📋
Buka Notepad (Windows) atau TextEdit (Mac), tempel kodenya. 📝Open Notepad (Windows) or TextEdit (Mac), paste it. 📝
Simpan sebagai snake.html (pastikan akhirannya .html, bukan .txt — ini jebakan klasik! 🕳️)Save as snake.html (make sure it ends in .html, not .txt — a classic trap! 🕳️)
Klik dua kali file-nya → terbuka di browser → mainkan! 🐍Double-click the file → it opens in your browser → play! 🐍

🚨 Kalau Game-nya Error / Nggak JalanIf the Game Errors / Doesn't Work

Selamat! Kamu baru aja bertemu "bug" pertama dalam kariermu. 🐛 Ini NORMAL. Semua programmer di dunia ini ngalamin ini setiap hari (serius). Solusinya gampang: copy pesan error-nya, tempel balik ke AI, bilang: "Ini error yang muncul: [tempel error]. Tolong perbaiki." AI bakal jadi detektifnya. 🕵️ Congratulations! You just met your first "bug". 🐛 This is NORMAL. Every programmer on Earth hits this daily (seriously). The fix is simple: copy the error message, paste it back to AI, and say: "Here's the error: [paste it]. Please fix it." AI plays detective. 🕵️

4. Langkah 3: Jadikan PUNYAMU 🎨4. Step 3: Make It YOURS 🎨

Nah, ini bagian paling seru: modifikasi. Pilih 2-3 ide di bawah dan minta ke AI satu per satu: Now the most fun part: modifications. Pick 2-3 ideas below and ask AI one at a time:

💬 PROMPT #2-5 — Menu Modifikasi (Pilih Sesukamu)💬 PROMPTS #2-5 — Modification Menu (Pick Your Favorites)

1. "Tambahkan tombol main lagi (restart) setelah game over."
2. "Tambahkan level kecepatan: makin lama, ular makin ngebut."
3. "Ganti makanannya jadi emoji 🍎, dan ularnya bisa bunyi 'nyam' pas makan."
4. "Tambahkan high score yang tersimpan walau browser ditutup."
5. "Buat bisa dimainin di HP pakai tombol panah di layar."
6. "Kasih mode gelap/terang dengan tombol toggle."
7. "Tambahkan musik latar 8-bit yang ceria."
8. "Bikin tema game-nya jadi [tema favoritmu: luar angkasa / laut / sekolah]."1. "Add a restart button after game over."
2. "Add speed levels: the snake gets faster over time."
3. "Replace food with emoji 🍎 and play a 'nom' sound when eaten."
4. "Add a high score that persists after the browser closes."
5. "Make it playable on phones with on-screen arrow buttons."
6. "Add a dark/light mode toggle."
7. "Add cheerful 8-bit background music."
8. "Reskin the game to a [your favorite theme: space / ocean / school] theme."

Lihat apa yang terjadi? Setiap kali kamu minta perubahan, AI mengubah kodenya. Kamu nggak mengubah satu baris pun sendiri, tapi game-nya terus berevolusi. Itulah vibe coding: kamu sutradaranya, AI aktornya. 🎬 See what's happening? Every time you ask for a change, AI rewrites the code. You didn't touch a single line yourself, yet the game keeps evolving. That's vibe coding: you're the director, AI is the actor. 🎬

5. Rahasia Dapur: Cara Ngobrol yang Efektif 🗝️5. Kitchen Secrets: How to Chat Effectively 🗝️

Setelah main-main, kamu bakal sadar: kadang hasil AI nggak sesuai harapan. Ini bukan salahmu atau salah AI — ini soal cara komunikasi. Ini rumus ajaibnya: After playing around, you'll notice: sometimes AI's result misses the mark. It's not your fault or AI's fault — it's about communication style. Here's the magic formula:

🧪 Rumus Prompt Juara: G-K-H-SThe Champion Prompt Formula: G-C-R-N

Goal (Tujuan): Aku mau bikin apa? → "Game ular…"
Konteks: Kondisiku gimana? → "…desain responsif, nyaman diakses di smartphone…"
Hasil yang udah ada: Sekarang sampai mana? → "…ularnya udah jalan tapi…"
Spesifik: Maunya persis kayak gimana? → "…tolong tambahkan tombol restart berwarna hijau di tengah layar." Goal: What do I want to make? → "A snake game…"
Context: What's my situation? → "…responsive design, optimized for mobile…"
Result so far: Where am I now? → "…the snake works but…"
Nice and specific: What exactly do I want? → "…please add a green restart button in the center."

6. Misi Rahasiamu 🕵️6. Your Secret Mission 🕵️

🎯 MISI LEVEL 1-B: Kreasi BebasMISSION LEVEL 1-B: Free Creation

Setelah game ularmu jadi, pilih SALAH SATU tantangan ini (atau bikin sendiri): Once your snake game works, pick ONE of these challenges (or invent your own):

🎲 Bikin game suit batu-gunting-kertas melawan komputer.🎲 Build a rock-paper-scissors game against the computer.
🧮 Bikin kalkulator anggaran harian mingguan dengan grafik.🧮 Build a weekly budget tracker calculator with a chart.
📝 Bikin generator alasan telat ke sekolah yang absurd dan lucu (kreatif boleh!).📝 Build an absurd, funny excuse generator for being late to school (creativity welcome!).

Ingat: satu prompt besar → jalankan → perbaiki → ulangi. Loop ini bakal jadi sahabatmu selamanya. 🔁 Remember: one big prompt → run → fix → repeat. This loop will be your best friend forever. 🔁

7. Uji Pemahaman 🧪7. Knowledge Check 🧪

❓ Apa yang harus kamu lakukan kalau AI ngasih hasil yang salah?❓ What should you do if AI gives you a wrong result?▶

Jangan diem aja atau nyerah! 😅 Jelaskan ke AI: (1) kamu minta apa, (2) hasilnya sekarang gimana, (3) bedanya di mana. Makin jelas infomu, makin cepet beresnya. Error message lengkap = emas. 🏆 Don't stay silent or give up! 😅 Explain to AI: (1) what you asked for, (2) what you got, (3) where the gap is. The clearer your info, the faster the fix. Complete error messages = gold. 🏆

❓ Kenapa kita mulai dari SATU file HTML, bukan project besar?❓ Why start with ONE HTML file instead of a big project?▶

Karena tujuannya menang cepat (quick win)! 🏁 Kamu butuh bukti dulu bahwa "oh, ternyata aku BISA bikin program". Kepercayaan diri itu bahan bakarnya. Urusan struktur project yang proper — nanti di Level 2. 😉 Because the goal is a quick win! 🏁 You first need proof that "oh, I actually CAN build a program". Confidence is the fuel. Proper project structure — that's Level 2. 😉

❓ Apa 4 elemen rumus prompt juara?❓ What are the 4 elements of the champion prompt formula?▶

Goal (tujuan) + Konteks (situasimu) + Hasil saat ini (udah sampai mana) + Spesifik (mau persis kayak gimana). Lengkap = AI langsung paham. Goal (what you want) + Context (your situation) + Result so far (current state) + Specifics (exactly how you want it). Complete = AI instantly understands.

✅ Game pertamaku udah jalan! Aku resmi programmer (versi santai). ✅ My first game runs! I'm officially a programmer (relaxed edition).

💡 Jokes PenutupClosing Joke

Ular di game kamu makan terus tapi nggak pernah gemuk.
Sama kayak kamu belajar vibe coding: makin banyak kamu "makan" ilmu, nggak bakal bikin kamu kekenyangan — malah makin laper buat bikin lebih banyak! 🐍📚

Sampai jumpa di pelajaran berikutnya, di mana kita bakal pindah ke markas developer sungguhan. 🏢 The snake in your game eats forever but never gets fat.
Just like you learning vibe coding: the more knowledge you "eat", you never get full — you just get hungrier to build more! 🐍📚

See you next lesson, where we move into a real developer's headquarters. 🏢