Home > Vibe Coding
Slide 1 / 20
🎵

Vibe Coding

Code with AI, Feel the Flow

📅 3 Minggu - 15 Hari - Complete Guide

Pelajari cara menulis kode dengan bantuan AI - fokus pada "vibe" dan intent, bukan syntax perfection.

Overview

Apa itu Vibe Coding?

Definisi: Vibe Coding adalah menulis kode dengan AI assistant dimana kamu fokus pada "feeling" dari apa yang ingin kamu bangun, bukan detail syntax.

Traditional vs Vibe Coding

TraditionalVibe Coding
Tulis syntax manualDescribe apa yang wanted
Hafal semua APIAI tolong cari API
Debugging manualAI help debug
Start from scratchStart from AI scaffold
Overview

Tujuan Pembelajaran

Keunggulan Vibe Coding

Minggu 1

Dasar-Dasar Vibe Coding

HariTopikPraktik
1Konsep & FilosofiApa itu Vibe Coding
2AI Tools SetupCursor, Windsurf, ChatGPT
3Prompt EngineeringMenulis prompt efektif
4Basic ScaffoldingGenerate code dari deskripsi
5Iterative RefinementIterasi dan improvement
Target Minggu 1: Bisa setup AI tools dan menulis prompt efektif untuk generate code.
Minggu 1 - Hari 2

AI Coding Tools

ToolTypeBest For
CursorAI-first IDEFull-stack dev, refactor
WindsurfAI-first IDEFlow state, agentic
GitHub CopilotInline AICode completion
ChatGPT/ClaudeChat AIDebug, explain, plan
v0/ bolt.newWeb-firstQuick prototypes

Setup Cursor

# Download dari cursor.sh
# Install dan open
# Key: Cmd+K = generate, Cmd+L = chat
Minggu 1 - Hari 3

Prompt Engineering

Struktur Prompt Efektif

[Role] Kamu senior full-stack developer
[Task] Buat API untuk user authentication
[Tech Stack] Python FastAPI + SQLite
[Requirements] Register, Login JWT, Password bcrypt

Tips Prompting

Minggu 1 - Hari 4

Basic Scaffolding

Generate Project dari Nol

"Buatin todo app dengan: - React + Vite - TailwindCSS - Fitur: add, edit, delete - Simpan ke localStorage - Functional components + hooks"

AI akan generate structure:

src/
├── components/
│   ├── TodoList.jsx
│   ├── TodoItem.jsx
│   └── TodoForm.jsx
├── hooks/
│   └── useTodos.js
├── App.jsx
└── main.jsx
Praktik: Coba generate project sederhana!
Minggu 1 - Hari 5

Iterative Refinement

Cara Iterasi dengan AI

Step 1: "Buatin basic structure dulu"
Step 2: "Tambahin authentication"
Step 3: "Sekarang tambahin error handling"
Step 4: "Refactor jadi lebih clean"

Contoh Dialog

User: Tambahkan dark mode
AI: *generate dark mode*
User: Tapi button kurang kontras
AI: *improve button*
User: Great! Tambahin toggle di header
AI: *add toggle*
Kunci: Beri feedback spesifik agar AI bisa refine dengan tepat.
Minggu 2

Intermediate Vibe Coding

HariTopikPraktik
1Debugging dengan AIError analysis
2RefactoringClean code
3TestingWrite tests
4Code ReviewAI reviewer
5DocumentationAuto docs
Minggu 2 - Hari 1

Debugging dengan AI

Cara Efektif Debug

"Error di React: Error: Cannot read properties of undefined (reading 'map') Di TodoList.jsx line 15 Code: const todos = this.props.todos; return todos.map(todo => ...) Kenapa error dan fixnya?"

Tips Debugging

  • Share error message lengkap
  • Berikan context (framework, version)
  • Tunjukkan code yang relevan
  • Apa yang sudah dicoba
Caution: Dont blindly trust AI fix. Always understand sebelum apply!
Minggu 2 - Hari 2

Refactoring dengan AI

Contoh Refactor Request

"Refactor function ini: 1. Use modern async/await 2. Extract ke smaller functions 3. Add proper error handling 4. Use TypeScript types"

Refactor Patterns

  • Extract repeated code → utility functions
  • Long functions → smaller functions
  • Callback hell → async/await
  • Magic numbers → constants
Minggu 2 - Hari 3

Testing dengan AI

Generate Tests

"Bikin unit tests: - Use Jest - Test happy path - Test edge cases - Test error cases Function: function calculateTotal(items) { return items.reduce((sum, item) => sum + item.price, 0); }"

Testing Types

TypeTool
UnitJest/Vitest
IntegrationSupertest
E2EPlaywright
Minggu 2 - Hari 4

AI sebagai Code Reviewer

Prompt untuk Code Review

"Lakukan code review: 1. Security issues 2. Performance problems 3. Code smells 4. Best practices 5. Suggestions Format: [Issue] - [Severity] - [Suggestion]"

Yang Perlu Dicek

  • Security: SQL injection, XSS, secrets
  • Performance: N+1 queries
  • Readability: Variable names
Minggu 3

Advanced Vibe Coding

HariTopikPraktik
1Multi-file ProjectsOrchestrate besar project
2AI + Git WorkflowAI dalam git
3Production ReadyDeploy
4Custom AI AgentsSetup agent
5Full ProjectBuild lengkap
Minggu 3 - Hari 1

Multi-file Projects

Orchestrating Besar Project

"Buatin full-stack e-commerce: - Frontend: Next.js + Tailwind - Backend: Express.js + PostgreSQL - Features: Product listing, cart, checkout - Auth: JWT Generate semua files."

Best Practices

  • Start dengan architecture/planning
  • Generate file structure dulu
  • Implement per feature
  • Use git tracking
Minggu 3 - Hari 2

AI dalam Git Workflow

AI untuk Git

"Generate commit message: - Added user authentication - Fixed login redirect bug - Added password hashing Use conventional commits format"

Git Commands dengan AI

git status - explain changes
git diff - explain changes
git branch - suggest names
git rebase - plan strategy
Minggu 3 - Hari 3

Production Ready

Prompt untuk Production

"Buatin production-ready Express: - Add rate limiting - Add helmet security headers - Add compression - Add logging (morgan) - Add error handling - Environment variables - Dockerfile"

Production Checklist

  • Security: HTTPS, headers, rate limiting
  • Logging: Application logs
  • Monitoring: Health checks
  • Deployment: Docker, CI/CD
Minggu 3 - Hari 4

Custom AI Agents

Setup dengan Custom Instructions

# .cursorrules
---
You are a [role]
- Always [behavior 1]
- Never [behavior 2]
- Follow [coding standards]
- Use [preferred libraries]
---

# Contoh
You are a React expert
- Use functional components + hooks
- Prefer TypeScript
- Use TailwindCSS

Agent Use Cases

  • Code review agent
  • Documentation generator
  • Test writer
  • Bug fixer
Minggu 3

Best Practices & Gotchas

Do's

  • Always review AI-generated code
  • Understand what the code does
  • Test thoroughly sebelum deploy
  • Use version control
  • Break down complex requests

Don'ts

  • Blindly copy-paste tanpa understand
  • Share secrets/passwords ke AI
  • Rely 100% on AI tanpa learning
  • Skip code review
Remember: AI adalah assistant, bukan replacement. Tetap harus belajar fundamentals!
Final

Selamat!

Anda telah menyelesaikan Vibe Coding Learning Curriculum!

Next Steps

  • Praktekkan di project nyata
  • Explore Cursor, Windsurf
  • Join r/vibecoding
  • Build portfolio
  • Terus iterate dan learn!
Referensi:
- Andrej Karpathy: Intro to Vibe Coding
- cursor.sh
- windsurf.ai

Kuis: Vibe Coding

Apa itu vibe coding?

Apa fokus utama vibe coding?

Tool AI apa yang sering dipakai vibe coding?