Tutorial 2 How the Code Works nl

Tutorial 2 · Hoe de code werkt

🌎 Taal: Nederlands — bekijk alle 33 talen

Doel: begrijp de paar ontwerpkeuzes die dit project makkelijk — en veilig — maken om te veranderen met een AI-agent. Je hoeft de code niet uit je hoofd te leren; je hebt het mentale model nodig, zodat je de agent precies kunt sturen.

← Vorige: Tutorial 1 Oriëntatie · Volgende: Tutorial 3 Je eerste agenttaak

---

Het overzicht

lockedin-cli/
├── bin/lockedin.js      # entrypoint — het ENIGE deel dat input/output doet
├── src/lockedin.js      # de kern — pure functies die strings teruggeven
├── test/
│   ├── unit.test.js     # test de kernfuncties direct
│   └── cli.test.js      # start het echte binair en controleert de uitvoer
├── tools/screenshot.js  # rendert de SVG's die je in docs/ ziet
└── package.json         # metadata + het `npm test`-script

Vier ideeën laten dit draaien. Leer ze en je kunt de agent met vertrouwen om bijna elke wijziging vragen.

Idee 1 — Een pure kern die strings teruggeeft

Open src/lockedin.js. Merk op dat de renderfuncties niet printen — ze geven strings terug:

function renderConnect() {
  const names = shuffle(NAMES).slice(0, 6);
  // ...bouwt een array met regels op...
  return out.join('\n');   // geeft tekst terug; print niets
}

Al het echte printen (en het lezen van je toetsaanslagen) gebeurt in bin/lockedin.js. Die scheiding — "de kern geeft data terug, de rand doet I/O" — is hier het allerbelangrijkst, omdat een functie die alleen een string teruggeeft triviaal te testen is:

const out = app.renderConnect();
assert.ok(out.includes("“Ik voeg je graag toe aan mijn professionele netwerk.” — gestuurd naar "));

Geen terminal mocken, geen stdout afvangen. Wanneer je de agent vraagt om een feature toe te voegen, is dit waarom die er ook snel en betrouwbaar een test bij kan schrijven.

Idee 2 — Contentpools

De grappen zitten in gewone arrays boven in src/lockedin.js:

const HOOKS = [ 'Onpopulaire mening:', 'Laat dat even binnenkomen.', /* ...~25 total... */ ];
const LESSONS = [ '→ Je netwerk is je net worth.', /* ... */ ];

Generatoren kiezen uit deze pools. In v1.2.0 groeide elke pool naar ~25 variaties, en kwam er een tweede laag templatepools bij (zaken als POST_REVEALS en REFLECT_TAGSETS) zodat de structuur van elke uitvoer varieert, niet alleen de woorden. Content toevoegen is vaak zo simpel als strings aan een array toevoegen — een perfecte eerste taak om aan een agent te geven.

Idee 3 — Willekeur met seed = deterministische tests

Willekeurige uitvoer en geautomatiseerde tests klinken alsof ze botsen. Dit project lost dat op met een seedbare random number generator:

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

Elke willekeurige keuze loopt via de gedeelde helpers pick() / shuffle(), die uit die generator met seed trekken. Zet LOCKEDIN_SEED=42 en de CLI is volledig reproduceerbaar. De gouden regel voor elke wijziging: nieuwe willekeur moet pick / shuffle gebruiken, nooit direct Math.random — anders gaan determinisme (en de tests) kapot. Stop dit in je achterhoofd; in hoofdstuk 3 herinner je de agent eraan.

Idee 4 — Twee lagen tests

• test/unit.test.js roept kernfuncties aan en doet assertions op de strings die ze teruggeven (snel, precies).
• test/cli.test.js start echt bin/lockedin.js en controleert de echte stdout en exitcode (bewijst dat het geheel end-to-end werkt).

Samen vormen ze de barrière. Ze leggen ook invarianten vast — beloften die de app doet. Een post opent bijvoorbeeld altijd met een bekende hook en bevat altijd minstens drie →-lessen; het "connect"-scherm zegt altijd incalculable. Wanneer een agent code verandert, vangen deze tests alles op wat stilletjes een belofte brak.

---

Waarom dit belangrijk is bij werken met een agent

Zet de vier ideeën bij elkaar en je krijgt een codebase waarin een agent:

1. Een feature kan toevoegen als pure functie die een string teruggeeft,
2. Er een test voor kan toevoegen zonder I/O-acrobatiek,
3. Uitvoer reproduceerbaar kan houden via de RNG met seed, en
4. Kan bewijzen dat er niets stuk is gegaan door de bestaande barrière te draaien.

Dat is de lus die je in het volgende hoofdstuk gaat draaien.

✅ Probeer het met je agent

Vraag je agent om te controleren of je het snapt — lezend, niet bewerkend:

1. "Noem elke contentpool in src/lockedin.js en hoeveel items er in elk zitten."
2. "Laat me één invariant zien die test/unit.test.js afdwingt voor generatePost, en leg uit wat die zou breken."
3. "Waar staat de RNG met seed gedefinieerd, en welke functies moeten die gebruiken in plaats van Math.random? Verander niets — leg het alleen uit."

Wanneer de antwoorden van de agent overeenkomen met dit hoofdstuk, ben je klaar om te bouwen.

Volgende: Tutorial 3 Je eerste agenttaak