Tutorial 2 How the Code Works id

Tutorial 2 · Cara Kerja Kode

🌎 Bahasa: Bahasa Indonesia (id) — lihat semua 33 bahasa

Tujuan: memahami beberapa pilihan desain yang membuat proyek mudah dan aman diubah bersama agen AI. Kamu tidak perlu menghafal kode; pahami model mentalnya agar dapat memberi arahan yang presisi.

← Sebelumnya: Tutorial 1 Orientasi · Berikutnya: Tutorial 3 Tugas Agen Pertamamu

---

Peta proyek

lockedin-cli/
├── bin/lockedin.js      # titik masuk — SATU-SATUNYA bagian yang melakukan input/output
├── src/lockedin.js      # inti — fungsi murni yang mengembalikan string
├── test/
│   ├── unit.test.js     # menguji fungsi inti secara langsung
│   └── cli.test.js      # menjalankan binary asli dan memeriksa outputnya
├── tools/screenshot.js  # merender SVG yang ada di docs/
└── package.json         # metadata + skrip `npm test`

Empat gagasan membuat semuanya bekerja. Pahami ini dan kamu dapat meminta agen melakukan hampir semua perubahan dengan yakin.

Gagasan 1 — Core murni yang mengembalikan string

Buka src/lockedin.js. Fungsi render tidak mencetak; fungsi itu mengembalikan string:

function renderConnect() {
  const names = shuffle(NAMES).slice(0, 6);
  // ...menyusun array berisi baris...
  return out.join('\n');   // mengembalikan teks; tidak mencetak apa pun
}

Pencetakan dan pembacaan tombol terjadi di bin/lockedin.js. Pemisahan “core mengembalikan data, edge melakukan I/O” adalah ide terpenting karena fungsi yang hanya mengembalikan string sangat mudah diuji:

const out = app.renderConnect();
assert.ok(out.includes("“Aku ingin sekali menambahkanmu ke jaringan profesionalku.” — dikirim ke "));

Tidak perlu mock terminal atau menangkap stdout. Karena itu, saat agen menambah fitur, ia juga dapat menambah tes cepat dan andal.

Gagasan 2 — Pool konten

Lelucon disimpan dalam array biasa di bagian atas src/lockedin.js:

const HOOKS = [ 'Opini tidak populer:', 'Resapi itu baik-baik.', /* ...~25 total... */ ];
const LESSONS = [ '→ Jaringanmu adalah kekayaan bersihmu.', /* ... */ ];

Generator memilih dari pool tersebut. Pada v1.2.0, setiap pool berkembang menjadi ~25 variasi dan ditambah lapisan pool template, seperti POST_REVEALS dan REFLECT_TAGSETS, agar struktur output ikut berubah, bukan hanya kata-katanya. Menambah konten sering sesederhana menambah string ke array, sehingga cocok sebagai tugas pertama agen.

Gagasan 3 — Randomness dengan seed = tes deterministik

Output acak dan tes otomatis tampak bertentangan. Proyek ini menyatukannya lewat pseudorandom generator yang dapat diberi seed:

setSeed(42);
const a = generatePost();
setSeed(42);
const b = generatePost();
// a === b  → seed sama, post sama

Semua pilihan acak melewati helper pick() / shuffle() yang memakai generator tersebut. Dengan LOCKEDIN_SEED=42, output CLI dapat direproduksi sepenuhnya. Aturan emas: randomness baru harus memakai pick / shuffle, jangan Math.random langsung, atau determinisme dan tes akan rusak.

Gagasan 4 — Dua lapisan tes

• test/unit.test.js memanggil fungsi core dan memeriksa string hasilnya; cepat dan presisi.
• test/cli.test.js menjalankan bin/lockedin.js lalu memeriksa stdout dan exit code nyata; ini membuktikan alur end-to-end.

Keduanya membentuk gerbang dan menyimpan invariant, yaitu janji aplikasi. Contohnya, post selalu dimulai dengan hook yang dikenal dan mengandung setidaknya tiga pelajaran →; layar connect selalu menyebut incalculable. Tes menangkap janji yang tanpa sengaja dilanggar agen.

---

Mengapa ini penting saat bekerja dengan agen?

Gabungkan empat gagasan tadi dan agen dapat:

1. Menambah fitur sebagai fungsi murni yang mengembalikan string.
2. Menambah tes tanpa kerumitan I/O.
3. Menjaga output dapat direproduksi dengan seeded RNG.
4. Membuktikan tidak ada yang rusak lewat gerbang yang ada.

Itulah loop yang akan dijalankan pada bab berikutnya.

✅ Coba bersama agenmu

Minta agen memverifikasi pemahamanmu dengan membaca, bukan mengedit:

1. “Daftarkan semua pool konten di src/lockedin.js dan jumlah entri masing-masing.”
2. “Tunjukkan satu invariant tentang generatePost yang diterapkan test/unit.test.js, lalu jelaskan apa yang dapat merusaknya.”
3. “Di mana seeded RNG didefinisikan dan fungsi mana yang harus memakainya daripada Math.random? Jangan ubah apa pun.”

Jika jawabannya sesuai bab ini, kamu siap membangun.

Berikutnya: Tutorial 3 Tugas Agen Pertamamu