Vibe coding: bygg en egen liten app

Med vibe coding beskriver du med vanliga ord vad du vill skapa. Assistenten skriver koden, visar resultatet och justerar det utifrån din feedback. Du behöver inte kunna programmera själv. Så kan du till exempel göra ett övningsquiz, ett litet spel eller ett praktiskt hjälpmedel för din klass.

Du behöver bara skrivbordsapplikationen. Node.js och git behöver du inte installera: appen har dem inbyggda.

1. Välj en arbetsmapp

Skapa en tom mapp på din dator, till exempel Mattequiz, och välj den som arbetsmapp för din chatt. Hur det går till läser du i Lokal filåtkomst. Assistenten arbetar bara i den här mappen.

2. Beskriv vad du vill ha

Berätta så konkret som möjligt vad du vill skapa. Till exempel:

Gör ett mattequiz för årskurs 4 som en enda HTML-sida. Tio frågor om multiplikationstabellerna upp till 10, med stora knappar, en poängsumma i slutet och en knapp för att börja om.

En enkel sida som den här visar assistenten med appens inbyggda webbserver. Resultatet visas i den inbyggda webbläsaren: knappen Webbläsare (jordglobsikonen) till höger i det övre fältet. Mer om det läser du i Lokala servrar och den inbyggda webbläsaren.

Inte nöjd? Säg bara vad som ska ändras:

Gör knapparna gröna och visa rätt svar när svaret är fel.

Egna foton och låt assistenten titta

Bifoga ett foto i ditt meddelande och be:

Lägg det här fotot på webbsidan.

Assistenten sparar fotot i projektmappen, till exempel i img/, och lägger det på sidan. Det fungerar också med en bild som assistenten just har skapat åt dig.

Är något fel på sidan i den inbyggda webbläsaren? Be:

Titta på vad som är fel på sidan.

Assistenten tittar då på texten, en skärmbild och felmeddelandena på sidan. Se Låt assistenten titta.

När assistenten själv öppnar en sida i den inbyggda webbläsaren väntar den tills sidan har laddats och ser dess felmeddelanden, till exempel ett skriptfel eller en fil som inte laddas. Dem åtgärdar den innan den säger att det fungerar. Sedan provar den sidan som en användare: den klickar på knappar, fyller i fält, trycker på tangenter och åtgärdar felen som uppstår. Om allt fungerar som du har tänkt kontrollerar du själv.

3. Större appar

Vill du göra något större, som en app med flera skärmar, kan assistenten skapa ett projekt med till exempel Vite och React:

Skapa en React-app med Vite för ett glosförhör i den här mappen. Installera allt, starta appen och visa resultatet.

Att starta ett sådant projekt (till exempel med npm create vite@latest) godkänner du på kommandokortet. Sedan installerar assistenten paket. Det godkänner du också, eller så slår du på Tillåt paketinstallationer utan att fråga. Se Installera paket. Vill du inte ha ett kort för varje kommando? Välj Lita på det här projektet på det första kortet.

4. Spara versioner

En version är en ögonblicksbild av ditt projekt. Gillar du inte en ändring kan du gå tillbaka till en tidigare version. Be assistenten vid ett lämpligt tillfälle:

Spara en version.

Första gången startar assistenten en versionshistorik för mappen. Filer som ser ut att innehålla hemligheter, som lösenord eller nycklar (även Google API-nycklar), hamnar aldrig i en version. Assistenten säger till om den hoppar över något.

5. Lägg ut ditt projekt på GitHub

På GitHub sparar du ditt projekt online. Då har du en säkerhetskopia och kan fortsätta arbeta med det på en annan dator.

Anslut GitHub

Alla kopplar sitt eget GitHub-konto. Har du inget konto än? Skapa först ett kostnadsfritt på github.com/signup.

1. Gå till Inställningar och leta upp panelen GitHub under Skrivbordsstatus.
2. Klicka på Anslut GitHub. Appen visar en kod och öppnar github.com/login/device i din webbläsare.
3. Ange koden på GitHub (med Kopiera kod kopierar du den) och ge behörighet. Om sidan inte öppnades klickar du på Öppna GitHub.
4. Panelen visar nu Ansluten som @ditt-namn.

Vad GitHub frågar om. GitHub visar appen AI-School Desktop från HandiHow-B-V och ber om åtkomst till dina repositories (repo): läsa och skriva, även i privata repositories. Åtkomsten behövs för att skapa och uppdatera ditt projekt. Godkänn bara om sidan ligger på github.com.

Har koden gått ut? Koden gäller i ungefär 15 minuter. Om den har gått ut klickar du på Anslut GitHub igen.

Repositories i en organisation, till exempel skolans GitHub-organisation:

• Om organisationen begränsar tredjepartsappar klickar du på Request (begär åtkomst) bredvid organisationen på godkännandesidan. Det går också senare via github.com/settings/applications > AI-School Desktop.
• En ägare av organisationen godkänner det under organisationens Settings > Third-party access > OAuth application policy.
• Utan det godkännandet fungerar dina egna repositories, men inte organisationens.

Använda ett annat konto? Klicka på Koppla från och logga ut från github.com i webbläsaren (eller använd ett privat fönster) innan du kopplar igen. Annars använder GitHub kontot du redan är inloggad med.

anteckning

Äldre versioner av appen visar ”Inloggning med GitHub är inte tillgänglig i den här versionen av appen än.” Uppdatera då appen.

Lägga ut online och uppdatera

Be sedan till exempel:

Lägg ut det här projektet på GitHub.

Assistenten visar ett kort med den exakta adressen och etiketterna Inbyggt i appen och Nätverk på. Klicka på Kör för att fortsätta eller på Neka för att avbryta. Ett nytt repositorium är privat, om du inte ber om ett offentligt. Är adressen inte github.com eller blir repositoriet offentligt varnar kortet. När du lägger ut online ser du vilka filer som skickas.

Senare kan du till exempel säga:

• "Lägg ut den nya versionen." Assistenten skickar dina nya versioner till GitHub.
• "Hämta den senaste versionen." Assistenten hämtar ändringar från GitHub.
• "Ladda ner projektet https://github.com/namn/projekt till den här mappen." Assistenten laddar ner ett befintligt projekt.

Ett offentligt projekt kan du ladda ner även utan anslutning. För att lägga ut online och skapa ett nytt repositorium behövs anslutningen.

6. Säkerhetstips

• Nya repositorier är privata. Gör bara ett offentligt om alla får se koden.
• Lägg aldrig in lösenord, nycklar eller andra hemligheter i din app.
• Använder du en Google API-nyckel (börjar med AIza, som webbnyckeln för en Firebase-app)? Lägg den då i en fil som assistenten håller utanför versionerna, som .env. Står nyckeln i din kod läggs den filen inte ut online.
• Kontrollera alltid adressen på kortet innan du klickar på Kör.
• Anslutningen sparas krypterad i ditt användarkonto på den här datorn. Assistenten ser aldrig din GitHub-nyckel. Arbetar du på en delad dator klickar du på Koppla från när du är klar.
• Koppla från tar bara bort anslutningen från den här datorn. Vill du återkalla åtkomsten helt gör du det på GitHub under Settings > Applications.