Vibe coding: lag en liten app selv

Med vibe coding beskriver du med vanlige ord hva du vil lage. Assistenten skriver koden, viser resultatet og tilpasser det ut fra tilbakemeldingene dine. Du trenger ikke kunne programmere selv. Slik kan du for eksempel lage en øvingsquiz, et lite spill eller et nyttig hjelpemiddel for klassen din.

Du trenger bare skrivebordsapplikasjonen. Node.js og git trenger du ikke installere: appen har dem innebygd.

1. Velg en arbeidsmappe

Lag en tom mappe på datamaskinen din, for eksempel Mattequiz, og velg den som arbeidsmappe for chatten. Hvordan det fungerer, leser du i Lokal filtilgang. Assistenten jobber bare i denne mappen.

2. Beskriv hva du vil ha

Fortell så konkret som mulig hva du vil lage. For eksempel:

Lag en mattequiz for 4. trinn som én HTML-side. Ti spørsmål om gangetabellen opp til 10, med store knapper, en poengsum til slutt og en knapp for å begynne på nytt.

En enkel side som denne viser assistenten med appens innebygde webserver. Resultatet vises i den innebygde nettleseren: knappen Nettleser (globusikonet) til høyre i topplinjen. Mer om dette leser du i Lokale servere og den innebygde nettleseren.

Ikke fornøyd? Bare si hva som skal endres:

Gjør knappene grønne, og vis riktig svar når svaret er feil.

Egne bilder og la assistenten se

Legg ved et bilde i meldingen og spør:

Sett dette bildet på nettsiden.

Assistenten lagrer bildet i prosjektmappen, for eksempel i img/, og setter det på siden. Det fungerer også med et bilde assistenten nettopp har laget for deg.

Er noe galt med siden i den innebygde nettleseren? Spør:

Se hva som er galt på siden.

Assistenten ser da på teksten, et skjermbilde og feilmeldingene på siden. Se La assistenten se.

Når assistenten selv åpner en side i den innebygde nettleseren, venter den til siden er lastet, og ser feilmeldingene, for eksempel en skriptfeil eller en fil som ikke lastes. Disse retter den før den sier at det virker. Deretter prøver den siden som en bruker: den klikker på knapper, fyller ut felt, trykker på taster og retter feilene som oppstår. Om alt virker slik du har tenkt, sjekker du selv.

3. Større apper

Vil du lage noe større, som en app med flere skjermbilder, kan assistenten lage et prosjekt med for eksempel Vite og React:

Lag en React-app med Vite for en glosequiz i denne mappen. Installer alt, start appen og vis resultatet.

Å starte et slikt prosjekt (for eksempel med npm create vite@latest) godkjenner du på kommandokortet. Deretter installerer assistenten pakker. Det godkjenner du også, eller du slår på Tillat pakkeinstallasjoner uten å spørre. Se Installere pakker. Vil du ikke ha et kort for hver kommando? Velg Stol på dette prosjektet på det første kortet.

4. Lagre versjoner

En versjon er et øyeblikksbilde av prosjektet ditt. Liker du ikke en endring, kan du gå tilbake til en tidligere versjon. Be assistenten på et passende tidspunkt:

Lagre en versjon.

Første gang starter assistenten en versjonshistorikk for mappen. Filer som ser ut som hemmeligheter, som passord eller nøkler (også Google API-nøkler), kommer aldri med i en versjon. Assistenten sier fra hvis den hopper over noe.

5. Legg prosjektet ditt på GitHub

På GitHub lagrer du prosjektet ditt på nett. Da har du en sikkerhetskopi og kan jobbe videre med det på en annen datamaskin.

Koble til GitHub

Alle kobler til sin egen GitHub-konto. Har du ingen konto ennå? Opprett først en gratis konto på github.com/signup.

1. Gå til Innstillinger, og finn panelet GitHub under Skrivebordsstatus.
2. Klikk på Koble til GitHub. Appen viser en kode og åpner github.com/login/device i nettleseren din.
3. Skriv inn koden på GitHub (med Kopier kode kopierer du den), og gi tillatelse. Ble ikke siden åpnet, klikker du på Åpne GitHub.
4. Panelet viser nå Koblet til som @ditt-navn.

Hva GitHub ber om. GitHub viser appen AI-School Desktop fra HandiHow-B-V og ber om tilgang til repositoriene dine (repo): lese og skrive, også i private repositorier. Tilgangen trengs for å opprette og oppdatere prosjektet ditt. Gi bare tillatelse hvis siden er på github.com.

Har koden utløpt? Koden gjelder i omtrent 15 minutter. Har den utløpt, klikker du på Koble til GitHub igjen.

Repositorier i en organisasjon, for eksempel skolens GitHub-organisasjon:

• Hvis organisasjonen begrenser tredjepartsapper, klikker du på Request (be om tilgang) ved siden av organisasjonen på godkjenningssiden. Det kan også gjøres senere på github.com/settings/applications > AI-School Desktop.
• En eier av organisasjonen godkjenner det under organisasjonens Settings > Third-party access > OAuth application policy.
• Uten den godkjenningen fungerer dine egne repositorier, men ikke organisasjonens.

Bruke en annen konto? Klikk på Koble fra og logg ut av github.com i nettleseren (eller bruk et privat vindu) før du kobler til igjen. Ellers bruker GitHub kontoen du allerede er logget inn med.

merknad

Eldre versjoner av appen viser «Pålogging med GitHub er ikke tilgjengelig i denne versjonen av appen ennå.» Oppdater da appen.

Legge ut på nett og oppdatere

Be deretter for eksempel:

Legg dette prosjektet på GitHub.

Assistenten viser et kort med den nøyaktige adressen og etikettene Innebygd i appen og Nettverk på. Klikk på Kjør for å fortsette eller på Avvis for å stoppe. Et nytt repositorium er privat, med mindre du ber om et offentlig. Er adressen ikke github.com, eller blir repositoriet offentlig, advarer kortet. Når du legger ut på nett, ser du hvilke filer som sendes.

Senere kan du for eksempel si:

• "Legg ut den nye versjonen." Assistenten sender de nye versjonene dine til GitHub.
• "Hent den nyeste versjonen." Assistenten henter endringer fra GitHub.
• "Last ned prosjektet https://github.com/navn/prosjekt til denne mappen." Assistenten laster ned et eksisterende prosjekt.

Et offentlig prosjekt kan du også laste ned uten tilkobling. For å legge ut på nett og opprette et nytt repositorium trenger du tilkoblingen.

6. Sikkerhetstips

• Nye repositorier er private. Gjør bare et repositorium offentlig hvis alle kan få se koden.
• Legg aldri passord, nøkler eller andre hemmeligheter inn i appen din.
• Bruker du en Google API-nøkkel (begynner med AIza, som webnøkkelen til en Firebase-app)? Legg den da i en fil som assistenten holder utenfor versjonene, som .env. Står nøkkelen i koden din, legges den filen ikke ut på nett.
• Kontroller alltid adressen på kortet før du klikker på Kjør.
• Tilkoblingen lagres kryptert på brukerkontoen din på denne datamaskinen. Assistenten ser aldri GitHub-nøkkelen din. Jobber du på en delt datamaskin, klikker du på Koble fra når du er ferdig.
• Koble fra fjerner bare tilkoblingen fra denne datamaskinen. Vil du trekke tilbake tilgangen helt, gjør du det på GitHub under Settings > Applications.