Vibe coding: lav selv en lille app

Med vibe coding beskriver du med almindelige ord, hvad du vil lave. Assistenten skriver koden, viser resultatet og tilpasser det ud fra din feedback. Du behøver ikke selv at kunne programmere. Sådan kan du for eksempel lave en quiz til et kursus, et lille spil eller et praktisk værktøj til dine kolleger.

Du skal kun bruge desktop-applikationen. Node.js og git behøver du ikke installere: appen har dem indbygget.

1. Vælg en arbejdsmappe

Opret en tom mappe på din computer, for eksempel Kursusquiz, og vælg den som arbejdsmappe for din chat. Hvordan det fungerer, kan du læse i Lokal filadgang. Assistenten arbejder kun i denne mappe.

2. Beskriv, hvad du vil have

Fortæl så konkret som muligt, hvad du vil lave. For eksempel:

Lav en quiz til en workshop om informationssikkerhed som én HTML-side. Ti multiple choice-spørgsmål, med store knapper, en score til sidst og en knap til at starte forfra.

En enkel side som denne viser assistenten med appens indbyggede webserver. Resultatet vises i den indbyggede browser: knappen Browser (globusikonet) til højre i topbjælken. Du kan læse mere om det i Lokale servere og den indbyggede browser.

Ikke tilfreds? Sig bare, hvad der skal ændres:

Gør knapperne grønne, og vis det rigtige svar, når svaret er forkert.

Dine egne fotos og lad assistenten kigge med

Vedhæft et foto til din besked og spørg:

Sæt dette foto på websiden.

Assistenten gemmer fotoet i projektmappen, for eksempel i img/, og sætter det på siden. Det virker også med et billede, som assistenten lige har lavet til dig.

Er der noget galt med siden i den indbyggede browser? Spørg:

Kig med og se, hvad der er galt på siden.

Assistenten ser så på tekst, et skærmbillede og fejlmeddelelserne fra siden. Se Lad assistenten kigge med.

Når assistenten selv åbner en side i den indbyggede browser, venter den, til siden er indlæst, og ser dens fejlmeddelelser, fx en scriptfejl eller en fil, der ikke indlæses. Dem retter den, før den siger, at det virker. Derefter afprøver den siden som en bruger: den klikker på knapper, udfylder felter, trykker på taster og retter de fejl, der opstår. Om alt virker, som du har tænkt dig, tjekker du selv.

3. Større apps

Vil du lave noget større, som en app med flere skærmbilleder, kan assistenten oprette et projekt med for eksempel Vite og React:

Lav en React-app med Vite i denne mappe, hvor kolleger kan booke et mødelokale. Installer alt, start appen, og vis resultatet.

At starte sådan et projekt (for eksempel med npm create vite@latest) godkender du på kommandokortet. Derefter installerer assistenten pakker. Det godkender du også, eller du slår Tillad pakkeinstallationer uden at spørge til. Se Installer pakker. Vil du ikke have et kort for hver kommando? Vælg Stol på dette projekt på det første kort.

4. Gem versioner

En version er et øjebliksbillede af dit projekt. Er du ikke glad for en ændring, kan du gå tilbage til en tidligere version. Bed assistenten på et passende tidspunkt:

Gem en version.

Første gang starter assistenten en versionshistorik for mappen. Filer, der ligner hemmeligheder, som adgangskoder eller nøgler (også Google API-nøgler), kommer aldrig med i en version. Assistenten siger til, hvis den springer noget over.

5. Læg dit projekt på GitHub

På GitHub gemmer du dit projekt online. Så har du en sikkerhedskopi og kan arbejde videre på det på en anden computer.

Forbind GitHub

Alle forbinder deres egen GitHub-konto. Har du ikke en konto endnu? Opret først en gratis på github.com/signup.

1. Gå til Indstillinger, og find panelet GitHub under Desktopstatus.
2. Klik på Forbind GitHub. Appen viser en kode og åbner github.com/login/device i din browser.
3. Indtast koden på GitHub (med Kopiér kode kopierer du den), og giv tilladelse. Er siden ikke blevet åbnet, så klik på Åbn GitHub.
4. Panelet viser nu Forbundet som @dit-navn.

Hvad GitHub beder om. GitHub viser appen AI-School Desktop fra HandiHow-B-V og beder om adgang til dine repositories (repo): læse og skrive, også i private repositories. Adgangen er nødvendig for at oprette og opdatere dit projekt. Giv kun tilladelse, hvis siden er på github.com.

Er koden udløbet? Koden gælder i cirka 15 minutter. Er den udløbet, så klik på Forbind GitHub igen.

Repositories i en organisation:

• Begrænser organisationen tredjepartsapps, så klik på Request (anmod om adgang) ud for organisationen på godkendelsesskærmen. Det kan også gøres senere på github.com/settings/applications > AI-School Desktop.
• En ejer af organisationen godkender det under organisationens Settings > Third-party access > OAuth application policy.
• Uden den godkendelse virker dine egne repositories, men ikke organisationens.

Bruge en anden konto? Klik på Afbryd forbindelse, og log ud af github.com i din browser (eller brug et privat vindue), før du forbinder igen. Ellers bruger GitHub den konto, du allerede er logget ind med.

notat

Ældre versioner af appen viser "Login med GitHub er endnu ikke tilgængeligt i denne version af appen." Opdater så appen.

Læg online og opdater

Bed derefter for eksempel om:

Læg dette projekt på GitHub.

Assistenten viser et kort med den præcise adresse og mærkaterne Indbygget i appen og Netværk til. Klik på Kør for at fortsætte eller på Afvis for at stoppe. Et nyt repository er privat, medmindre du beder om et offentligt. Er adressen ikke github.com, eller bliver repositoryet offentligt, advarer kortet. Når du lægger online, ser du, hvilke filer der sendes.

Senere kan du for eksempel sige:

• "Læg den nye version online." Assistenten sender dine nye versioner til GitHub.
• "Hent den nyeste version." Assistenten henter ændringer fra GitHub.
• "Download projektet https://github.com/navn/projekt til denne mappe." Assistenten downloader et eksisterende projekt.

Et offentligt projekt kan du også downloade uden forbindelse. For at lægge online og oprette et nyt repository skal forbindelsen være på plads.

6. Sikkerhedstips

• Nye repositories er private. Gør kun et offentligt, hvis alle må se koden.
• Læg aldrig adgangskoder, nøgler eller andre hemmeligheder ind i din app.
• Bruger du en Google API-nøgle (begynder med AIza, som webnøglen til en Firebase-app)? Læg den så i en fil, som assistenten holder uden for versionerne, som .env. Står nøglen i din kode, lægges den fil ikke online.
• Kontrollér altid adressen på kortet, før du klikker på Kør.
• Forbindelsen gemmes krypteret under din brugerkonto på denne computer. Assistenten ser aldrig din GitHub-nøgle. Arbejder du på en delt computer, så klik på Afbryd forbindelse, når du er færdig.
• Afbryd forbindelse fjerner kun forbindelsen fra denne computer. Vil du tilbagekalde adgangen helt, så gør det på GitHub under Settings > Applications.