Vibe Coding: selbst eine kleine App erstellen

Beim Vibe Coding beschreiben Sie in einfachen Worten, was Sie erstellen möchten. Der Assistent schreibt den Code, zeigt das Ergebnis und passt es anhand Ihres Feedbacks an. Sie müssen selbst nicht programmieren können. So erstellen Sie zum Beispiel ein Quiz für eine Schulung, ein kleines Spiel oder ein praktisches Tool für Ihre Kolleginnen und Kollegen.

Sie brauchen nur die Desktop-Anwendung. Node.js und Git müssen Sie nicht installieren: Die App bringt beides mit.

1. Einen Arbeitsordner wählen

Erstellen Sie einen leeren Ordner auf Ihrem Computer, zum Beispiel Schulungsquiz, und wählen Sie ihn als Arbeitsordner Ihres Chats. Wie das geht, lesen Sie unter Lokaler Dateizugriff. Der Assistent arbeitet nur in diesem Ordner.

2. Beschreiben, was Sie möchten

Beschreiben Sie so konkret wie möglich, was Sie erstellen möchten. Zum Beispiel:

Erstelle ein Quiz für einen Workshop über Informationssicherheit als eine einzige HTML-Seite. Zehn Multiple-Choice-Fragen, mit großen Schaltflächen, einer Punktzahl am Ende und einer Schaltfläche zum Neustarten.

Eine einfache Seite wie diese zeigt der Assistent mit dem integrierten Webserver der App an. Das Ergebnis erscheint im integrierten Browser: die Schaltfläche Browser (das Globus-Symbol) rechts in der oberen Leiste. Mehr dazu lesen Sie unter Lokale Server und der integrierte Browser.

Nicht zufrieden? Sagen Sie einfach, was anders sein soll:

Mach die Schaltflächen grün und zeige bei einer falschen Antwort die richtige an.

Eigene Fotos und Mitschauen

Füge deiner Nachricht ein Foto hinzu und frage:

Setze dieses Foto auf die Webseite.

Der Assistent speichert das Foto in deinem Projektordner, zum Beispiel in img/, und fügt es in die Seite ein. Das geht auch mit einem Bild, das der Assistent gerade für dich erstellt hat.

Stimmt etwas mit der Seite im integrierten Browser nicht? Frage:

Schau mit, was auf der Seite nicht stimmt.

Der Assistent sieht sich dann den Text, einen Screenshot und die Fehlermeldungen der Seite an. Siehe Den Assistenten mitschauen lassen.

Öffnet der Assistent selbst eine Seite im integrierten Browser, wartet er, bis sie geladen ist, und sieht ihre Fehlermeldungen, etwa einen Skriptfehler oder eine Datei, die nicht lädt. Diese behebt er, bevor er sagt, dass es funktioniert. Danach probiert er die Seite wie ein Benutzer aus: Er klickt auf Schaltflächen, füllt Felder aus, drückt Tasten und behebt die Fehler, die dabei auftreten. Ob alles so funktioniert, wie Sie es sich vorstellen, prüfen Sie selbst.

3. Größere Apps

Möchten Sie etwas Größeres, etwa eine App mit mehreren Bildschirmen, kann der Assistent ein Projekt mit zum Beispiel Vite und React anlegen:

Erstelle in diesem Ordner eine React-App mit Vite, mit der Kolleginnen und Kollegen einen Besprechungsraum buchen können. Installiere alles, starte die App und zeige das Ergebnis.

Das Anlegen eines solchen Projekts (zum Beispiel mit npm create vite@latest) genehmigen Sie auf der Befehlskarte. Danach installiert der Assistent Pakete. Auch das genehmigen Sie, oder Sie schalten Paketinstallationen ohne Nachfrage erlauben ein. Siehe Pakete installieren. Keine Karte für jeden Befehl? Wählen Sie auf der ersten Karte Diesem Projekt vertrauen.

4. Versionen speichern

Eine Version ist eine Momentaufnahme Ihres Projekts. Gefällt Ihnen eine Änderung nicht, können Sie zu einer früheren Version zurückkehren. Bitten Sie den Assistenten zu einem passenden Zeitpunkt:

Speichere eine Version.

Beim ersten Mal legt der Assistent eine Versionsgeschichte für den Ordner an. Dateien, die nach Geheimnissen aussehen, etwa Passwörter oder Schlüssel (auch Google-API-Schlüssel), landen nie in einer Version. Der Assistent meldet es, wenn er etwas überspringt.

5. Ihr Projekt auf GitHub stellen

Auf GitHub speichern Sie Ihr Projekt online. So haben Sie eine Sicherungskopie und können auf einem anderen Computer daran weiterarbeiten.

GitHub verbinden

Jede Person verbindet ihr eigenes GitHub-Konto. Noch kein Konto? Erstelle zuerst kostenlos eines unter github.com/signup.

1. Gehen Sie zu Einstellungen und suchen Sie unter Desktop-Status den Bereich GitHub.
2. Klicken Sie auf GitHub verbinden. Die App zeigt einen Code und öffnet github.com/login/device in Ihrem Browser.
3. Geben Sie den Code auf GitHub ein (mit Code kopieren übernehmen Sie ihn) und erteilen Sie die Berechtigung. Hat sich die Seite nicht geöffnet, klicken Sie auf GitHub öffnen.
4. Der Bereich zeigt jetzt Verbunden als @ihr-name.

Was GitHub fragt. GitHub zeigt die App AI-School Desktop von HandiHow-B-V und bittet um Zugriff auf deine Repositorys (repo): Lesen und Schreiben, auch in privaten Repositorys. Diesen Zugriff braucht die App, um dein Projekt anzulegen und zu aktualisieren. Erteile ihn nur, wenn die Seite auf github.com ist.

Code abgelaufen? Der Code gilt etwa 15 Minuten. Ist er abgelaufen, klicke erneut auf GitHub verbinden.

Repositorys einer Organisation:

• Schränkt die Organisation Apps von Drittanbietern ein, klicke auf der Zustimmungsseite neben der Organisation auf Request (Zugriff anfragen). Das geht auch später unter github.com/settings/applications > AI-School Desktop.
• Eine Inhaberin oder ein Inhaber der Organisation genehmigt es unter Settings > Third-party access > OAuth application policy der Organisation.
• Ohne diese Genehmigung funktionieren deine eigenen Repositorys, die der Organisation aber nicht.

Anderes Konto verwenden? Klicke auf Trennen und melde dich im Browser bei github.com ab (oder nutze ein privates Fenster), bevor du erneut verbindest. Sonst verwendet GitHub das Konto, mit dem du bereits angemeldet bist.

hinweis

Ältere Versionen der App zeigen „Die Anmeldung mit GitHub ist in dieser Version der App noch nicht verfügbar.“ Aktualisiere dann die App.

Online stellen und aktualisieren

Bitten Sie danach zum Beispiel:

Stelle dieses Projekt auf GitHub.

Der Assistent zeigt eine Karte mit der genauen Adresse und den Labels In die App eingebaut und Netzwerk an. Klicken Sie auf Ausführen, um fortzufahren, oder auf Ablehnen, um abzubrechen. Ein neues Repository ist privat, es sei denn, Sie bitten um ein öffentliches. Ist die Adresse nicht github.com oder wird das Repository öffentlich, warnt die Karte. Beim Online-Stellen sehen Sie, welche Dateien gesendet werden.

Später sagen Sie zum Beispiel:

• "Stelle die neue Version online." Der Assistent sendet Ihre neuen Versionen an GitHub.
• "Hol die neueste Version." Der Assistent ruft Änderungen von GitHub ab.
• "Lade das Projekt https://github.com/naam/project in diesen Ordner herunter." Der Assistent lädt ein bestehendes Projekt herunter.

Ein öffentliches Projekt können Sie auch ohne Verbindung herunterladen. Zum Online-Stellen und zum Anlegen eines neuen Repositorys ist die Verbindung nötig.

6. Sicherheitstipps

• Neue Repositorys sind privat. Machen Sie eines nur öffentlich, wenn alle den Code sehen dürfen.
• Speichern Sie nie Passwörter, Schlüssel oder andere Geheimnisse in Ihrer App.
• Verwenden Sie einen Google-API-Schlüssel (er beginnt mit AIza, etwa der Web-Schlüssel einer Firebase-App)? Legen Sie ihn in eine Datei, die der Assistent aus den Versionen heraushält, zum Beispiel .env. Steht der Schlüssel in Ihrem Code, wird diese Datei nicht online gestellt.
• Prüfen Sie auf der Karte immer die Adresse, bevor Sie auf Ausführen klicken.
• Die Verbindung wird verschlüsselt bei Ihrem Benutzerkonto auf diesem Computer gespeichert. Der Assistent sieht Ihren GitHub-Schlüssel nie. Arbeiten Sie an einem gemeinsam genutzten Computer, klicken Sie danach auf Trennen.
• Trennen entfernt die Verbindung nur von diesem Computer. Möchten Sie den Zugriff vollständig widerrufen, tun Sie das auf GitHub unter Settings > Applications.