Mulai AI Coding dari Nol

AI coding adalah cara membangun software dengan bantuan model AI yang dapat membaca requirement, memahami sebagian codebase, mengusulkan perubahan, menulis code, menjalankan command, membaca error, dan membantu review. AI coding bukan tombol “buat aplikasi sempurna”. Hasilnya tetap ditentukan oleh kualitas requirement, repository, context, design direction, asset, model, permission, testing, dan review manusia.

Peta Perjalanan dari Nol sampai Online

Gunakan halaman ini sebagai pintu masuk, lalu ikuti jalur linear berikut. Berhenti pada milestone yang belum lulus sebelum melanjutkan.

Pahami istilah dan model
        ↓
Siapkan IDE, Git, Node.js, dan tool
        ↓
Buat repository dan checkpoint recovery
        ↓
Tulis PRD, context, dan prompt yang dapat diuji
        ↓
Pilih stack, UI, database, auth, dan API
        ↓
Implementasikan Project ZIP dengan workflow aman
        ↓
Deploy preview, production, domain, dan maintenance

Golden path latihan memakai VS Code, Git, GitHub, Node.js LTS, package manager dari lockfile, Docker Desktop, PostgreSQL, satu coding agent, dan Vercel. Ini contoh belajar, bukan stack wajib. Technical Foundation serta instruction repository selalu lebih berwenang daripada contoh generik.

1. Kenali Empat Lapisan yang Sering Tertukar

Tidak semuanya adalah “IDE bawaan provider”. Claude Code, Gemini CLI, Codex CLI, OpenCode, dan Kimi Code terutama adalah coding agents/coding surfaces. Mereka dapat dipakai berdampingan dengan editor favorit Anda.

Catatan nama: jika yang dimaksud “Z code” adalah produk Z.AI, nama yang relevan adalah ZCode dan keluarga model GLM. Jika yang dimaksud Zed, Zed adalah editor code yang dapat memakai beberapa model/agent, bukan model AI itu sendiri.

2. Apa Itu LLM?

LLM (Large Language Model) adalah model yang dilatih untuk memprediksi dan menghasilkan urutan token. Untuk coding, LLM dapat memproses natural language, source code, error log, diff, dokumentasi, dan-pada model tertentu-gambar/screenshot.

LLM tidak “mengerti project” secara otomatis. Ia hanya bekerja berdasarkan apa yang tersedia dalam context pada saat itu ditambah kemampuan yang dipelajari selama training.

3. Token, Tokenizer, Context, dan Context Window

Tokenizer adalah mekanisme yang memecah teks menjadi unit yang disebut token. Satu token tidak selalu sama dengan satu kata. Potongan kata, tanda baca, source code, whitespace, dan karakter tertentu dapat dihitung berbeda oleh tokenizer yang berbeda.

Context adalah seluruh informasi yang dapat dipakai model untuk satu pekerjaan: prompt, system/tool instructions, file yang dibaca, hasil search, error log, diff, conversation history, image reference, dan output tool.

Context window adalah batas maksimum context yang dapat diproses model dalam satu waktu. Context window besar membantu, tetapi bukan alasan untuk selalu mengirim seluruh repository. Context yang terlalu banyak dapat menambah biaya, latency, dan noise.

Mental model sederhana:

repository besar
→ pilih file yang relevan
→ tambahkan requirement + rules + evidence
→ model bekerja di context terbatas
→ verifikasi hasil

4. Apa Itu Markdown dan Mengapa Penting untuk AI Coding?

Markdown adalah format plain text yang menggunakan simbol sederhana untuk heading, list, table, link, quote, dan code block. File-nya biasanya berakhiran .md.

Contoh:

# Project Rules

## Commands
- Install: `npm install`
- Test: `npm test`

## Rules
- Jangan commit `.env.local`.
- Gunakan component existing sebelum menambah dependency baru.

Markdown penting untuk AI coding karena:

• plain text dan mudah dibaca manusia maupun model;
• mudah di-diff dan di-version-control dengan Git;
• struktur heading/list membantu agent menemukan aturan penting;
• portable antar-editor dan platform;
• cocok untuk PRD, plan, design rules, runbook, dan repository instructions;
• tidak memerlukan format proprietary agar dapat diproses agent.

File Markdown yang umum dalam workflow AI coding:

Jangan berasumsi semua agent otomatis membaca semua nama file di atas. Perilaku auto-discovery berbeda antar-tool. Pastikan file penting disebutkan dalam prompt awal atau mengikuti aturan resmi tool.

Jika Anda belum nyaman membaca syntax Markdown mentah, buka file .md di FileMira Markdown Viewer. Anda dapat melihat tampilan Original dan Rendered berdampingan langsung di browser. FileMira menyatakan pemrosesan dilakukan lokal di browser, tetapi tetap periksa dan hapus secret sebelum membuka file dengan tool apa pun.

5. Setup Minimum Sebelum Mengizinkan Agent Mengedit

Untuk project lokal, siapkan:

1. Git.
2. Runtime project, misalnya Node.js bila stack membutuhkannya.
3. Editor/IDE.
4. Satu coding agent.
5. Repository atau folder project yang sudah diekstrak.
6. Secret handling yang benar.
7. Command untuk lint, typecheck, test, dan build bila tersedia.

Baseline Git yang aman:

git status
git add .
git commit -m "chore: baseline before AI coding"

Jika project belum menjadi Git repository:

git init
git add .
git commit -m "chore: initial project baseline"

Jangan jalankan git init lagi bila folder tersebut sudah merupakan repository.

6. Workflow AI Coding untuk Pemula

Gunakan satu loop kecil yang berulang:

BACA
→ PLAN
→ IMPLEMENT
→ CHECK
→ REVIEW DIFF
→ COMMIT

BACA

Minta agent membaca PRD, project rules, schema, relevant files, dan error/evidence. Hindari memulai dengan “buat semuanya”.

PLAN

Untuk perubahan non-trivial, minta plan sebelum edit. Plan minimal menjawab:

• apa scope;
• apa yang tidak termasuk scope;
• file mana yang kemungkinan berubah;
• dependency apa yang diperlukan;
• risiko apa yang perlu dijaga;
• acceptance criteria;
• command verifikasi.

IMPLEMENT

Implement satu vertical slice atau satu stage, bukan seluruh roadmap sekaligus.

CHECK

Jalankan command yang tersedia, misalnya:

npm run lint
npm run typecheck
npm test
npm run build

Nama command berbeda per project. Gunakan package.json, README, atau implementation guide sebagai source of truth.

REVIEW DIFF

Selalu lihat apa yang benar-benar berubah:

git status
git diff

Periksa perubahan dependency, config, migration, auth, permission, env, dan file yang seharusnya tidak disentuh.

COMMIT

Buat checkpoint kecil yang mudah dipulihkan:

git add .
git commit -m "feat: implement profile settings form"

7. Permission: Mulai dari Minimum

Coding agent dapat memiliki akses untuk membaca file, menulis file, menjalankan shell, mengakses network, atau memakai tools eksternal. Berikan izin sekecil yang diperlukan.

Untuk pemula:

• izinkan read/search repository;
• izinkan edit di working tree;
• review command berisiko;
• jangan berikan production secret;
• jangan memberi akses production database untuk latihan;
• jangan otomatis menerima destructive migration;
• jangan membiarkan agent push/deploy tanpa Anda mengerti targetnya.

8. Jangan Mengejar UI “Fancy” pada Prompt Pertama

PRD menjelaskan apa yang harus bekerja. PRD bukan otomatis art direction yang matang.

Coding agent bisa sangat baik membuat struktur React, form, data flow, atau component. Tetapi kemampuan coding, design taste, image generation, brand direction, photography, illustration, dan web asset generation adalah kemampuan yang berbeda.

Karena itu, hasil prompt pertama sering tampak:

• terlalu generic;
• banyak card putih;
• gradient berlebihan;
• semua corner terlalu bulat;
• hierarchy lemah;
• hero image tidak sesuai brand;
• icon/illustration hanya placeholder;
• layout mirip template AI yang umum.

Solusinya bukan hanya “pakai model lebih mahal”. Berikan 2-3 visual references, tulis DESIGN.md, siapkan asset, lalu lakukan human visual review.

9. Checklist “Siap Mulai Coding”

Sebelum agent mulai membuat feature pertama:

• Requirement/PRD tersedia.
• Repository sudah menjadi baseline Git.
• Secret tidak ikut commit.
• Agent tahu source of truth.
• Scope task cukup kecil.
• Acceptance criteria jelas.
• Command verifikasi diketahui.
• Untuk frontend: 2-3 mockup/reference sudah tersedia atau akan dibuat.
• Untuk frontend: DESIGN.md dan asset policy sudah ditetapkan.
• Model dipilih sesuai tingkat kesulitan, bukan selalu model tertinggi.

10. Lanjutkan ke Tutorial Berikutnya

Urutan yang direkomendasikan:

1. Tools dan IDE, lalu Model dan Limits.
2. Git, GitHub, dan Recovery.
3. Prompt, Context, dan PRD, lalu Markdown dan Worktree.
4. Technology Stack, Anatomi Website, dan Frontend Design.
5. Database, Auth, dan API.
6. Free Tier, Revisi AI Assistant, dan Project ZIP.
7. Project ZIP ke Code.
8. Deployment, Domain, dan Maintenance.
9. Gunakan Training 8 Modul untuk latihan terstruktur.