Bagian II

Bab 5

AI sebagai Coding Partner

Prompt Engineering untuk Developer

Tujuan Pembelajaran

Kompetensi Inti (1-3)

Menulis prompt presisi dengan struktur yang jelas.
Mengenali komponen kritis prompt: konteks, instruksi, batasan, format output.
Mengevaluasi output AI memakai Checklist 7 Dimensi.

Tujuan Pembelajaran

Kompetensi Inti (4-5)

Mengenali kegagalan umum AI: halusinasi, bias, overconfidence, dan blind spot keamanan.
Menerapkan siklus GEEM: Generate, Evaluate, Explain, Modify.
Berpindah dari sekadar pengguna AI menjadi evaluator kualitas kode.

Peta Posisi

AI adalah Tool, Bukan Fondasi

Fondasi

HTTP, DOM, JavaScript, CSS dari Bab 1-4 tetap menjadi basis engineering.

Kode Aplikasi

HTML, CSS, dan JavaScript yang Anda tulis adalah produk utama yang diuji.

Developer Tools

Code editor, DevTools, dan AI assistant bekerja sebagai akselerator workflow.

Koneksi Antar Bab

Dari Fondasi Manual ke Audit AI

Dari Bab 1-4

Anda sudah punya mental model browser, DOM, CSS, dan JavaScript untuk menilai kode AI.

Menuju Bab 6

Fokus berikutnya: membaca, men-debug, dan mengaudit kode yang tidak Anda tulis sendiri.

ATWS Level 2

AI Boleh Membantu Jika Terbatas

Snippet Kecil

Maksimal 15 baris per request.

Debug Assistance

Menjelaskan error dan memberi arah perbaikan.

Alternatif

Memberi beberapa pilihan implementasi.

Syntax Helper

Membantu area yang belum familiar.

ATWS Level 2

Batasan Wajib dan Mekanisme Kontrol

AI Dilarang

Menulis fitur mayor, mengambil keputusan arsitektur tanpa pemahaman Anda, dan menggantikan debugging manual.

GEEM Wajib

Jika Anda tidak bisa Explain dan Modify output AI, kode belum layak dipakai.

Standar profesional: kode harus dipahami sebelum di-deploy.

Konteks Konseptual

Prompt Engineering = Komunikasi Presisi

Tujuan bukan sekadar dapat jawaban, tetapi menghasilkan solusi yang bisa diverifikasi.
Prompt bagus mengarahkan kode agar benar, aman, efisien, maintainable, dan idiomatik.
Prompt buruk memaksa AI membuat asumsi dan meningkatkan risiko output salah.

Mental Model

Anatomi Prompt Teknis (4 Layer)

01Konteks

Stack, use case, dan lingkungan kerja.

02Instruksi

Requirement spesifik, terukur, tidak ambigu.

03Batasan

Apa yang tidak boleh dilakukan AI.

04Format Output

Struktur hasil yang Anda butuhkan.

Komponen 1: Konteks

Konteks Buruk

bikin komponen

Konteks Kuat

Saya membangun card landing page. Stack: HTML, CSS, vanilla JS. Target: desktop + mobile. Harus accessible untuk keyboard.

Semakin jelas konteks, semakin sedikit asumsi liar dari AI.

Komponen 2: Instruksi

Specific: sebut field, validasi, dan perilaku submit dengan jelas.
Measurable: min 8 karakter lebih jelas daripada "password kuat".
Testable: output harus bisa diuji apakah memenuhi requirement.
Relevant: hindari meminta hal yang tidak perlu untuk scope saat ini.

Komponen 3: Batasan

Teknologi

Tanpa library eksternal.

Kompleksitas

Maksimal 15-20 baris untuk snippet awal.

Best Practice

Gunakan const/let, hindari var.

Keamanan

Jangan eval(), jangan plaintext password.

Batasan mencegah over-engineering dan technical debt.

Komponen 4: Format Output

Contoh Format

1) kode fungsi, 2) tiga test case, 3) satu edge case, 4) alasan singkat pilihan pendekatan.

Template Reusable

Konteks - Instruksi - Batasan - Format Output.

Empat blok ini adalah kerangka default untuk setiap prompt teknis.

Vibe Coding

Eksplorasi Prompt Patterns

Kasus tetap: fungsi validasi email.
Bandingkan prompt minimal vs prompt terstruktur.
Ukur hasil berdasarkan panjang kode, readability, dan kelengkapan.
Tujuan utama: melihat dampak specificity secara nyata.

Eksperimen 1: Minimal vs Terstruktur

Prompt A

buat fungsi validasi email

Hasil sering generic dan minim guard.

Prompt B

Konteks + instruksi detail + batasan + format output.

Hasil biasanya lebih siap pakai dan mudah di-maintain.

Eksperimen 2 dan 3

Security Specificity

Prompt yang menyebut validasi, sanitasi, dan error handling menghasilkan kode lebih aman.

Iterative Prompting

Round 2 efektif untuk menyempurnakan detail seperti transisi, state, dan class-based styling.

Catatan Risiko

Di percakapan panjang AI bisa lupa konteks; lakukan restate requirement penting.

Deep Understanding Zone

Kegagalan AI (1-2)

Halusinasi

AI bisa menyebut API yang tidak ada, misalnya fungsi built-in palsu.

Verifikasi dengan dokumentasi resmi dan eksekusi langsung.

Outdated Bias

AI bisa mendorong pattern lama karena cutoff data.

Bandingkan dengan best practice terbaru dan tanggal rilis API.

Kegagalan AI (3-5)

Context Window

AI dapat lupa requirement awal pada chat panjang.

Overconfidence

Nada yakin tidak berarti jawaban benar.

Security Blindness

AI tidak otomatis berpikir seperti attacker.

Prinsip aman: verifikasi, uji kecil, dan selalu lakukan review manual.

Tantangan No-AI

Tulis prompt presisi untuk validasi token login + redirect saat expired.
Klasifikasikan 5 output AI: halusinasi, security issue, anti-pattern, atau bad practice.
Target minimal: identifikasi benar 4 dari 5 kasus.

AI Integration

Siklus GEEM dalam Praktik

GGenerate

Buat prompt dengan 4 komponen.

EEvaluate

Audit output dengan 7 dimensi.

EExplain

Jelaskan ulang kode tanpa melihat hasil AI.

MModify

Ubah kasus untuk membuktikan pemahaman.

Contoh GEEM: Filter Tasks

Generate: minta fungsi filterTasks dengan batasan baris dan output contoh.
Evaluate: cek correctness, performance O(n), dan maintainability.
Explain: uraikan logika tanpa copy prompt.
Modify: tambah category filter, case-insensitive priority, dan logging.

AI Usage Log

Catat setiap interaksi penting sebagai rekam jejak pembelajaran dan audit.

Bagian

Isi Wajib

Prompt

Prompt lengkap yang digunakan.

Output AI

Kode/solusi hasil generate.

Evaluasi

Checklist 7 dimensi + catatan.

Decision

Diterima, dimodifikasi, atau ditolak.

Checklist 7 Dimensi

1. Correctness

Output benar untuk input wajar dan edge case.

2. Security

Tidak membuka celah XSS, SQL injection, CSRF.

3. Performance

Kompleksitas dan operasi efisien.

4. Maintainability

Mudah dibaca, diubah, dan dijelaskan.

5. Accessibility

UI dapat diakses keyboard dan screen reader.

6. Scalability

Tetap stabil saat data dan user bertambah.

7. Idiomatic Quality

Selaras dengan praktik modern ekosistem.

Engineering Mindset Checkpoint

Keamanan

Apakah security requirement selalu ditulis di prompt?

Keterbacaan

Apakah kode masih mudah dipahami 3 bulan lagi?

Performa

Apakah ada analisis kompleksitas pada area kritis?

Skalabilitas

Apakah solusi tetap oke saat data naik 10x?

Pemeliharaan

Apakah perubahan requirement kecil bisa ditangani cepat?

Proyek Mini

Prompt Portfolio

Buat file prompt-portfolio.md dengan minimal 5 pattern reusable.
Pattern wajib: utility, debugging, refactor, optimasi, security review.
Setiap pattern harus punya evaluasi 7 dimensi dan lessons learned.
Dokumentasikan juga failure case, bukan hanya output yang sukses.

Refleksi

Empat Pertanyaan Journal

Konsep apa yang kini bisa Anda jelaskan ke pemula?
Bagian mana yang masih terasa black box?
Apa yang tetap bisa Anda kerjakan tanpa AI?
Keputusan desain terpenting apa yang Anda buat, dan mengapa?

Penutup

Dari User AI menjadi AI Auditor

Dalam era AI, skill paling berharga bukan menulis kode tercepat, tetapi mengevaluasi kode paling akurat.

Lanjut ke Bab 6: membaca, men-debug, dan mengaudit kode secara lebih dalam.

Referensi utama: OpenAI prompt guide, Anthropic docs, GitHub Copilot docs, OWASP LLM Top 10, MDN.