Vibe coden: zelf een kleine app maken

Bij vibe coden beschrijf je in gewone woorden wat je wilt maken. De assistent schrijft de code, laat het resultaat zien en past het aan op basis van je feedback. Je hoeft zelf niet te kunnen programmeren. Zo maak je bijvoorbeeld een oefenquiz, een klein spel of een handig hulpmiddel voor je klas.

Je hebt alleen de desktop applicatie nodig. Node.js en git hoef je niet te installeren: de app heeft ze zelf aan boord.

1. Kies een werkmap

Maak een lege map op je computer, bijvoorbeeld Rekenquiz, en kies die als werkmap van je chat. Hoe dat werkt, lees je bij Lokale bestandstoegang. De assistent werkt alleen in deze map.

2. Beschrijf wat je wilt

Vertel zo concreet mogelijk wat je wilt maken. Bijvoorbeeld:

Maak een rekenquiz voor groep 6 als één HTML-pagina. Tien vragen over tafels tot en met 10, met grote knoppen, een score aan het eind en een knop om opnieuw te beginnen.

Een eenvoudige pagina zoals deze toont de assistent met de ingebouwde webserver van de app. Het resultaat verschijnt in de ingebouwde browser: de knop Browser (het wereldbolpictogram) rechts in de bovenbalk. Meer daarover lees je bij Lokale servers en de ingebouwde browser.

Niet tevreden? Zeg gewoon wat er anders moet:

Maak de knoppen groen en laat bij een fout antwoord het goede antwoord zien.

Eigen foto’s en meekijken

Voeg een foto toe aan je bericht en vraag:

Zet deze foto op de webpagina.

De assistent zet de foto in je projectmap, bijvoorbeeld in img/, en plaatst hem op de pagina. Dat kan ook met een afbeelding die de assistent net voor je heeft gemaakt.

Klopt er iets niet op de pagina in de ingebouwde browser? Vraag:

Kijk mee wat er mis is op de pagina.

De assistent bekijkt dan de tekst, een schermafbeelding en de foutmeldingen van de pagina. Zie De assistent laten meekijken.

Opent de assistent zelf een pagina in de ingebouwde browser, dan wacht hij tot die geladen is en krijgt hij de foutmeldingen ervan te zien, zoals een fout in het script of een bestand dat niet laadt. Die lost hij op voordat hij zegt dat het werkt. Daarna probeert hij de pagina uit zoals een gebruiker: hij klikt op knoppen, vult velden in en drukt toetsen in, en lost de fouten op die daarbij ontstaan. Of alles werkt zoals jij het bedoelt, controleer je zelf.

3. Grotere apps

Wil je iets groters, zoals een app met meerdere schermen, dan kan de assistent een project maken met bijvoorbeeld Vite en React:

Maak in deze map een React-app met Vite voor een woordjesquiz. Installeer alles, start de app en laat het resultaat zien.

Het starten van zo’n project (bijvoorbeeld met npm create vite@latest) keur je goed op de commandokaart. Daarna installeert de assistent pakketten. Ook dat keur je goed, of je zet Pakketinstallaties toestaan zonder te vragen aan. Zie Pakketten installeren. Wil je niet bij elk commando een kaart? Kies op de eerste kaart Dit project vertrouwen.

4. Bewaar versies

Een versie is een momentopname van je project. Bevalt een wijziging niet, dan kun je terug naar een eerdere versie. Vraag de assistent op een goed moment:

Sla een versie op.

De eerste keer start de assistent een versiegeschiedenis voor de map. Bestanden die op geheimen lijken, zoals wachtwoorden of sleutels (ook Google API-sleutels), komen nooit in een versie. De assistent meldt het als hij iets overslaat.

5. Zet je project op GitHub

Op GitHub bewaar je je project online. Zo heb je een reservekopie en kun je er op een andere computer verder aan werken.

GitHub koppelen

Iedereen koppelt zijn eigen GitHub-account. Heb je nog geen account? Maak dan eerst gratis een account aan op github.com/signup.

1. Ga naar Instellingen en zoek bij Desktop status het paneel GitHub.
2. Klik op GitHub koppelen. De app toont een code en opent github.com/login/device in je browser.
3. Vul de code in op GitHub (met Code kopiëren neem je hem over) en geef toestemming. Is de pagina niet geopend, klik dan op GitHub openen.
4. Het paneel toont nu Gekoppeld als @jouw-naam.

Wat GitHub vraagt. GitHub toont de app AI-School Desktop van HandiHow-B-V en vraagt toegang tot je opslagplaatsen (repo): lezen en schrijven, ook in privé-opslagplaatsen. Die toegang is nodig om je project te maken en bij te werken. Geef alleen toestemming als de pagina op github.com staat.

Code verlopen? De code is ongeveer 15 minuten geldig. Is hij verlopen, klik dan opnieuw op GitHub koppelen.

Opslagplaatsen van een organisatie, zoals de GitHub-organisatie van je school:

• Beperkt de organisatie apps van derden, klik dan op het toestemmingsscherm naast de organisatie op Request (toegang aanvragen). Dat kan ook later via github.com/settings/applications > AI-School Desktop.
• Een eigenaar van de organisatie keurt het goed bij Settings > Third-party access > OAuth application policy van de organisatie.
• Zonder die goedkeuring werken je eigen opslagplaatsen wel, maar die van de organisatie niet.

Ander account gebruiken? Klik op Ontkoppelen en log op github.com in je browser uit (of gebruik een privévenster) voordat je opnieuw koppelt. Anders gebruikt GitHub het account waarmee je al bent ingelogd.

notitie

Oudere versies van de app tonen "Inloggen met GitHub is in deze versie van de app nog niet beschikbaar." Werk de app dan bij.

Online zetten en bijwerken

Vraag daarna bijvoorbeeld:

Zet dit project op GitHub.

De assistent toont een kaart met het exacte adres en de labels Ingebouwd in de app en Netwerk aan. Klik op Uitvoeren om door te gaan of op Weigeren om te stoppen. Een nieuwe opslagplaats is privé, tenzij je om een openbare vraagt. Is het adres niet github.com of wordt de opslagplaats openbaar, dan waarschuwt de kaart. Bij online zetten zie je welke bestanden worden verstuurd.

Later gebruik je bijvoorbeeld:

• "Zet de nieuwe versie online." De assistent stuurt je nieuwe versies naar GitHub.
• "Haal de nieuwste versie op." De assistent haalt wijzigingen van GitHub op.
• "Download het project https://github.com/naam/project naar deze map." De assistent downloadt een bestaand project.

Een openbaar project kun je ook zonder koppeling downloaden. Voor online zetten en een nieuwe opslagplaats maken is de koppeling nodig.

6. Veiligheidstips

• Nieuwe opslagplaatsen zijn privé. Maak er alleen een openbare van als iedereen de code mag zien.
• Zet nooit wachtwoorden, sleutels of andere geheimen in je app.
• Gebruik je een Google API-sleutel (begint met AIza, zoals de websleutel van een Firebase-app)? Zet die dan in een bestand dat de assistent buiten de versies houdt, zoals .env. Staat de sleutel in je code, dan komt dat bestand niet online.
• Controleer op de kaart altijd het adres voordat je op Uitvoeren klikt.
• De koppeling wordt versleuteld opgeslagen bij je gebruikersaccount op deze computer. De assistent ziet je GitHub-sleutel nooit. Werk je op een gedeelde computer, klik dan na afloop op Ontkoppelen.
• Ontkoppelen verwijdert de koppeling alleen van deze computer. Wil je de toegang helemaal intrekken, doe dat dan op GitHub bij Settings > Applications.