Bauen Sie Ihre erste nützliche App mit KI

Schritt 1: Beschreiben Sie das Problem mit eigenen Worten

Einkaufen gehen fast alle, deshalb ist es das perfekte erste Projekt. Um zu beurteilen, ob eine Einkaufsliste funktioniert, müssen Sie nichts vom Programmieren verstehen: Sie tippen Brot, Milch und Eier ein, sehen die Summe und haken die Dinge ab, sobald Sie sie gekauft haben. Das Ergebnis können Sie schon diese Woche wirklich benutzen.

Bevor Sie irgendein KI-Werkzeug öffnen, vervollständigen Sie diese drei Sätze auf Papier oder in einer Notiz. Das ist die wichtigste Programmierfähigkeit im ganzen Buch: aus einem Wunsch konkrete Regeln zu machen.

1. Ich muss aufschreiben … (zum Beispiel: jeden Artikel, wie viele ich davon brauche und den Preis für ein Stück).
2. Das Programm soll ausrechnen … (zum Beispiel: den Preis jeder Zeile und die Summe für den ganzen Einkauf).
3. Ich weiß, dass das Programm funktioniert, wenn … (zum Beispiel: zwei Artikel zu je 25 ergeben 50, und das Abhaken eines Artikels ändert die Summe nicht).

Schritt 2: Bauen Sie die erste kleine Version

Die erste Version ist eine einzige Datei, die sich in Ihrem Webbrowser öffnet. Es gibt keine Entwicklungsumgebung zu installieren, keinen Server und keine Anmeldung. Kopieren Sie den folgenden Prompt genau so, wie er ist, in Ihren KI-Assistenten (Claude, ChatGPT oder ähnlich).

Hilf mir, meine erste einfache App zu bauen. Ich bin absoluter Anfänger.

Erstelle eine Einkaufsliste in einer einzigen Datei namens einkauf.html, die ich in meinem Webbrowser öffnen kann. Schreib alle Styles und das gesamte JavaScript in diese eine Datei, ohne externe Bibliotheken.

Ich möchte den Namen des Artikels, die Menge und den Preis für ein Stück eingeben. Ein Button fügt den Artikel zur Liste hinzu. Zeig den Preis jeder Zeile und unten die Summe für den ganzen Einkauf an. Ich möchte einen Artikel löschen und als gekauft markieren können. Das Markieren als gekauft darf die Summe nicht ändern.

Lehne einen leeren Namen, ungültige Zahlen, einen negativen Preis und eine Menge von null oder weniger ab. Akzeptiere beim Preis sowohl ein Dezimalkomma als auch einen Dezimalpunkt.

Erkläre zuerst kurz den Plan. Schreib dann den vollständigen Code und die genauen Schritte, um die Datei zu speichern und zu öffnen. Füge noch keine weiteren Funktionen hinzu.

1. Code kopieren. Nutzen Sie den Kopieren-Button in der Antwort der KI, damit Sie den ganzen Code von der ersten bis zur letzten Zeile erhalten.
2. Als einkauf.html speichern. Öffnen Sie einen einfachen Texteditor (Notepad unter Windows, TextEdit im Modus „Reiner Text“ auf dem Mac), fügen Sie den Code ein und speichern Sie ihn als einkauf.html. Wählen Sie als Dateityp „Alle Dateien“, nicht „Textdokumente“.
3. Im Browser öffnen. Doppelklicken Sie auf die Datei oder ziehen Sie sie in ein Browserfenster. Sie sollten Ihre Einkaufsliste sehen, keine Seite voller Code.

Schritt 3: Prüfen Sie, dass es nicht nur ein hübsches Bild ist

Eine App, die richtig aussieht, ist noch lange keine App, die funktioniert. Gehen Sie diese Tabelle Zeile für Zeile durch und vergleichen Sie, was Sie sehen, mit dem richtigen Ergebnis. Das ist Ihr erster echter Test.

Wenn eine Zeile nicht stimmt, korrigieren Sie den Code noch nicht von Hand. Sagen Sie der KI genau, welche Zeile fehlgeschlagen ist, was Sie eingegeben und was Sie stattdessen gesehen haben, und bitten Sie sie, nur dieses eine Problem zu beheben.

Schritt 4: Nehmen Sie selbst eine Änderung vor

Nehmen Sie jetzt Ihre erste Änderung vor, ohne dass die KI sie für Sie schreibt. Fragen Sie die KI: „Wo in meinem Code steht die Überschrift der App?“ Sie zeigt Ihnen eine Zeile, die ungefähr so aussieht: <h1>Einkaufsliste</h1>.

1. Überschrift finden. Öffnen Sie einkauf.html in Ihrem Texteditor und suchen Sie die Zeile, auf die die KI gezeigt hat.
2. Text ändern. Ersetzen Sie die Wörter zwischen <h1> und </h1> durch Ihren eigenen Titel, zum Beispiel „Samstagseinkauf“. Löschen Sie die spitzen Klammern nicht.
3. Speichern und neu laden. Speichern Sie die Datei, wechseln Sie zurück in den Browser und laden Sie die Seite neu. Ihr neuer Titel sollte erscheinen.

Bitten Sie die KI anschließend, Ihre eigene Datei in drei Teilen zu erklären und dabei Ihren Code als Beispiel zu verwenden. Sie werden sehen, dass jede Web-App aus denselben drei Schichten besteht:

Schritt 5: Bringen Sie der App etwas Neues bei

Echte Programme wachsen in kleinen Schritten. Fügen Sie eine neue Funktion hinzu und testen Sie dann erneut. Schicken Sie der KI im selben Gespräch diese Folgeanfrage:

Füge meiner Einkaufsliste ein Budget hinzu. Ich möchte den Betrag eingeben können, den ich ausgeben will. Zeig an, wie viel noch übrig ist. Wenn die Summe das Budget überschreitet, zeig eine deutliche Warnung mit dem Betrag, um den ich darüber liege. Alles andere soll genau wie bisher funktionieren, und zeig mir die vollständige aktualisierte Datei.

Sie haben jetzt eine echte App gebaut, gestartet, getestet und geändert. Das ist noch nicht das ganze Programmieren, aber es ist die Routine, die Sie in jeder folgenden Lektion wiederholen: klar beschreiben, die KI erzeugen lassen, mit den erwarteten Ergebnissen vergleichen und immer nur eine Sache auf einmal ändern.