BAB 01
Estimasi Waktu: 40-50 menit Prasyarat: Pemahaman dasar programming, ai-fluency/01-09
Materi ini membahas bagaimana menggunakan AI secara efektif dalam proses coding - dari menulis kode baru, memahami kode yang sudah ada, hingga mengonversi antar bahasa pemrograman. Ini BUKAN tentang menyerahkan semua coding ke AI, tapi tentang bagaimana berkolaborasi dengan AI untuk menjadi developer yang lebih produktif.
Setelah mempelajari materi ini, kamu akan mampu:
┌────────────────────────────────────────────────────────────┐
│ SPEKTRUM BANTUAN AI DALAM CODING │
│ │
│ Autocomplete ←→ Inline Suggestion ←→ Chat ←→ Agent │
│ │
│ Kecil, sering Kode lebih panjang Diskusi Otonom│
│ Ngerjain 1 baris Beberapa baris tentang Multi-│
│ Contoh: copilot Contoh: Cursor tab masalah file │
│ kode edit │
│ │
│ Manusia kontrol ←─────────────────────────────────► AI │
│ sepenuhnya otonom │
└────────────────────────────────────────────────────────────┘Selalu berikan konteks sebelum meminta kode:
Konteks:
- Project: E-commerce web app menggunakan Next.js 14 dan TypeScript
- Database: PostgreSQL dengan Prisma ORM
- Auth: NextAuth.js
- Styling: Tailwind CSS
Tugas:
Buat API route handler di Next.js App Router untuk menambahkan
produk ke wishlist user. Harus handle:
- Authentication check
- Duplicate prevention
- Proper error responses
Buat juga TypeScript types yang diperlukan.BURUK: "Buat function untuk sort data"
BAGUS: "Buat function sortProducts yang:
- Menerima array of Product objects
- Dapat sort berdasarkan: price (asc/desc), name (A-Z/Z-A), date (newest/oldest)
- Return new array (tidak mutasi original)
- TypeScript types yang lengkap
- Pure function (no side effects)"Berikan contoh input-output yang diharapkan:
Buat fungsi transformUserData yang mengubah format data user.
Input:
{
"firstName": "Budi",
"lastName": "Santoso",
"email": "budi@example.com",
"signupDate": "2024-01-15T10:30:00Z"
}
Output:
{
"fullName": "Budi Santoso",
"email": "budi@example.com",
"memberSince": "15 Januari 2024",
"isActive": true
}Jangan minta semua sekaligus. Bangun secara bertahap:
Prompt 1: "Buat TypeScript interface untuk Product model dengan field:
id, name, price, description, category, stock, createdAt"
Prompt 2: "Berdasarkan interface Product, buat fungsi validateProduct
yang memvalidasi semua field required dan format yang benar"
Prompt 3: "Sekarang buat fungsi formatProductDisplay yang menerima
Product dan mengembalikan string yang siap ditampilkan di UI"Saya menemukan kode berikut di codebase. Jelaskan:
1. Apa yang dilakukan kode ini secara keseluruhan?
2. Apa yang dilakukan setiap baris penting?
3. Apa edge cases yang ditangani?
4. Apa potensi bug atau improvement?
5. Bagaimana cara menguji kode ini?
```[paste kode]```Konversikan kode Python berikut ke TypeScript:
Persyaratan:
- Pertahankan logic yang sama persis
- Gunakan TypeScript types yang proper
- Ikuti convention JavaScript/TypeScript (camelCase, dll)
- Tambahkan JSDoc comments
```[kode Python]```Buat setup lengkap untuk Express.js REST API dengan:
- TypeScript
- Middleware: cors, helmet, rate-limit
- Error handling middleware
- Health check endpoint
- Contoh CRUD endpoint untuk resource "Task"
- Proper folder structure
- .env support dengan dotenv
Jangan buat file terpisah, tulis semuanya dalam satu file dulu
dengan comment yang menandakan bagian mana yang seharusnya
di file terpisah.Dengan schema Prisma berikut:
```prisma
model User {
id Int @id @default(autoincrement())
email String @unique
name String
posts Post[]
createdAt DateTime @default(now())
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
tags Tag[]
createdAt DateTime @default(now())
}
model Tag {
id Int @id @default(autoincrement())
name String @unique
posts Post[]
}Buat query Prisma untuk: “Temukan 10 post yang published, yang ditulis oleh user dengan email tertentu, yang memiliki tag ‘tutorial’, diurutkan dari yang terbaru, serta include data author dan tags.”
---
## 4. Anti-Pattern: Kesalahan Umum
### Anti-Pattern 1: Blind Copy-Paste
MASALAH: Copy kode dari AI → Paste ke project → Lanjut
BAIK: Copy kode dari AI → Baca dan pahami → Sesuaikan dengan codebase → Test → Commit
### Anti-Pattern 2: Terlalu Spesifik, Terlalu Cepat
MASALAH: “Buat microservice e-commerce lengkap dengan payment gateway, inventory management, order processing, dan notification system”
BAIK: Mulai dari satu endpoint sederhana, test, lalu tambah fitur secara bertahap. AI lebih akurat untuk tugas kecil dan fokus.
### Anti-Pattern 3: Tidak Pahami Kode Sendiri
MASALAH: AI menulis kode → Kamu tidak pahami → Ada bug → Kamu tidak bisa fix
BAIK: AI menulis kode → Kamu baca dan pahami setiap baris → Jika tidak pahami, minta AI jelaskan → Commit dengan pemahaman penuh
### Anti-Pattern 4: Mengabaikan Security
MASALAH: AI bisa menulis kode yang vulnerable (SQL injection, XSS, dll) karena AI tidak tahu konteks security aplikasimu
BAIK: Selalu review kode AI untuk:
---
## 5. Best Practices Checklist
### Sebelum Meminta AI
- [ ] Apakah aku sudah pahami masalahnya?
- [ ] Apakah aku bisa jelaskan masalahnya dengan jelas?
- [ ] Apakah aku punya konteks yang cukup (tech stack, constraints)?
- [ ] Apakah aku sudah coba sendiri dulu?
### Saat Menerima Kode dari AI
- [ ] Apakah aku pahami setiap baris kode?
- [ ] Apakah kode sesuai dengan convention project?
- [ ] Apakah ada security issue?
- [ ] Apakah ada edge case yang belum ditangani?
- [ ] Apakah perlu ditulis test?
### Setelah Menggunakan Kode AI
- [ ] Test kode secara manual
- [ ] Jalankan existing test suite
- [ ] Review diff sebelum commit
- [ ] Dokumentasikan jika perlu
---
## 6. Hubungan dengan Framework 4D
### Delegation
- Tugas mana yang cocok untuk AI vs dikerjakan sendiri?
- AI bagus untuk: boilerplate, repetitive patterns, documentation, testing
- Kamu bagus untuk: arsitektur, business logic kompleks, security decisions
### Description
- Semakin jelas deskripsi masalah, semakin baik kode yang dihasilkan
- Sertakan selalu: tech stack, constraints, contoh, edge cases
### Discernment
- SELALU review kode AI - jangan trust begitu saja
- Periksa: correctness, security, performance, maintainability
- Pahami kode sebelum menggunakannya
### Diligence
- Kamu bertanggung jawab atas kode yang di-commit
- Verifikasi bahwa AI tidak mengenali kode proprietary orang lain
- Attribute AI usage jika required oleh kebijakan tim
---
## Latihan (~20 menit)
### Pilihan A: Fix dan Improve
Ambil kode yang sudah ada di projectmu (atau buat sederhana), lalu minta AI untuk:
1. Jelaskan kode tersebut
2. Identifikasi improvement
3. Implement perbaikan
4. Review hasilnya
### Pilihan B: TDD dengan AI
1. Tentukan fungsi yang ingin dibuat
2. Minta AI buat test cases dulu
3. Review test cases
4. Minta AI implement fungsi yang pass semua test
5. Verifikasi
### Pilihan C: Cross-Language
1. Pilih kode dalam satu bahasa
2. Minta AI konversi ke bahasa lain
3. Bandingkan dan analisis hasilnya
4. Identifikasi apa yang hilang atau berubah
---
## Poin-Poin Utama
1. **Konteks adalah raja** - semakin banyak konteks, semakin baik output
2. **Incremental approach** lebih baik daripada one-shot request
3. **Selalu pahami kode** yang AI hasilkan
4. **Security review wajib** - AI bisa menulis kode yang vulnerable
5. **AI adalah pair programmer**, bukan pengganti developer
6. **Test kode AI** seperti kamu test kode siapa pun
7. **Framework 4D** tetap berlaku: delegate dengan bijak, describe dengan jelas, discern dengan kritis, bertanggung jawab
---
## Informasi Materi
- **Lisensi:** CC BY-NC-SA 4.0