Auf die Warteliste

Lektion 0 · kostenlose Anleitung

Deine erste App in 60 Minuten

Am Ende läuft eine kleine Haushaltsbuch-App in deinem Browser, die du speichern und zeigen kannst. Sieben Schritte, sieben Prompts zum Kopieren, keine Vorkenntnisse.

Ehrlich: Die 60 Minuten sind ein Richtwert, keine Garantie. Wenn ein Werkzeug hakt oder du Dinge ausprobierst, dauert es länger, und das ist gut so.

Mit Schritt 1 starten Als PDF + Checkliste

Bevor du startest

Das brauchst du. Mehr nicht.

  • Einen Laptop oder Computer (ein Tablet geht zur Not, ist aber fummelig)
  • Einen aktuellen Browser, zum Beispiel Chrome, Firefox, Safari oder Edge
  • Ein kostenloses Konto bei einem Werkzeug (Schritt 2)
  • Etwas Geduld für den Fall, dass nicht alles beim ersten Mal klappt

  1. Schritt 1 von 7

    Idee klein schneiden

    Ziel: Aus „Ich will ein Haushaltsbuch“ wird ein Satz, den die KI heute umsetzen kann.

    Die meisten ersten Versuche scheitern nicht an der KI, sondern an einer zu großen Idee. Anmeldung, Diagramme, Bankanbindung, Teilen mit der Familie: Das alles kommt später. Für heute reicht: Ausgaben eintragen, Liste sehen, Monatssumme sehen.

    Diesen Prompt kannst du in jedem KI-Chat stellen, zum Beispiel in ChatGPT, Claude oder Gemini. Programmiert wird hier noch nichts.

    Ich möchte eine kleine Haushaltsbuch-App bauen. Ich bin Anfänger und kann nicht programmieren.

Hilf mir, die Idee auf das Kleinste zu reduzieren, das trotzdem nützlich ist. Stell mir höchstens drei Fragen und schlag mir dann eine erste Version mit maximal drei Funktionen vor.

    So sieht es aus, wenn es klappt

    Du hast eine kurze Liste mit höchstens drei Funktionen, zum Beispiel: Ausgabe eintragen, Liste anzeigen, Summe des Monats. Schreib sie dir auf, du brauchst sie in Schritt 3.

    Wenn nicht

    Die KI schlägt dir Logins, Statistiken oder eine Datenbank vor? Streich alles, was du heute nicht brauchst. Faustregel: Wenn du eine Funktion nicht in einem Satz erklären kannst, ist sie für die erste Version zu groß.

    Mehr Hilfe: Wenn etwas kaputtgeht

  2. Schritt 2 von 7

    Werkzeug öffnen

    Ziel: Du hast ein Werkzeug geöffnet, in dem die KI nicht nur antwortet, sondern eine App baut, die du sofort ausprobieren kannst.

    Such dir ein Werkzeug aus. Für den Anfang eignen sich Lovable, Bolt, Replit, ChatGPT mit Canvas, Claude mit Artifacts oder Google AI Studio. Alle laufen im Browser, du musst nichts installieren. Die meisten bieten einen kostenlosen Einstieg, der für diese Anleitung reicht. Lies trotzdem kurz nach, was im kostenlosen Zugang enthalten ist.

    Die Oberflächen ändern sich oft, deshalb nennen wir hier keine Knopfnamen. Meist schreibst du einfach in das große Eingabefeld auf der Startseite. Frag das Werkzeug ruhig selbst, wie es funktioniert:

    Ich bin Anfänger. Bevor wir anfangen, erkläre mir bitte in drei kurzen Sätzen: Wo sehe ich, was du baust? Wie probiere ich die App aus? Und wie komme ich zu einer früheren Version zurück?

    So sieht es aus, wenn es klappt

    Du siehst ein Chatfeld und daneben oder darunter einen Bereich, in dem später deine App erscheint (oft „Vorschau“ oder „Preview“ genannt).

    Wenn nicht

    Das Werkzeug will sofort Zahlungsdaten oder du findest dich gar nicht zurecht? Nimm ein anderes. Die sieben Schritte funktionieren in jedem dieser Werkzeuge.

    Mehr dazu: Lovable Tutorial auf Deutsch

  3. Schritt 3 von 7

    Erster Prompt

    Ziel: In der Vorschau läuft eine erste Version deines Haushaltsbuchs.

    Ein guter erster Prompt sagt drei Dinge: was gebaut werden soll, welche Funktionen dazugehören und was ausdrücklich noch nicht. Kopier die Vorlage und pass die Kategorien an dein Leben an.

    Bau mir eine einfache Haushaltsbuch-App, die im Browser läuft.

Funktionen:
1. Ich kann eine Ausgabe eintragen: Betrag in Euro, Datum, Kategorie (Lebensmittel, Wohnen, Mobilität, Freizeit, Sonstiges) und eine kurze Notiz.
2. Alle Ausgaben erscheinen in einer Liste, die neueste oben.
3. Oben steht die Summe für den aktuellen Monat.

Gestaltung: schlicht, gut lesbar, große Schrift, funktioniert auch auf dem Handy.

Bitte noch keine Anmeldung, keine Datenbank, keine Diagramme.

    So sieht es aus, wenn es klappt

    Du siehst ein Formular und eine Liste. Trag eine Ausgabe ein, zum Beispiel 12,50 € für Lebensmittel: Sie erscheint in der Liste, und die Monatssumme ändert sich.

    Wenn nicht

    Statt einer App siehst du eine rote Fehlermeldung? Kopier die komplette Meldung, füg sie in den Chat ein und schreib dazu: „Diese Fehlermeldung erscheint. Bitte behebe den Fehler und erkläre mir in einem Satz, was los war.“

    Mehr dazu: Fehlermeldung? So behebt die KI ihren Fehler selbst

  4. Schritt 4 von 7

    Eine Sache verbessern

    Ziel: Du änderst genau eine Sache, und der Rest der App bleibt, wie er war.

    Hier passiert der häufigste Anfängerfehler: zehn Wünsche in einem Prompt. Dann ändert die KI vieles gleichzeitig, und wenn etwas kaputtgeht, weißt du nicht, was. Deshalb: ein Wunsch pro Prompt, und dazusagen, dass der Rest bleiben soll.

    Die App funktioniert. Ändere jetzt nur eine Sache und lass alles andere, wie es ist:

Ich möchte eine Ausgabe wieder löschen können. Füge neben jedem Eintrag einen kleinen Löschen-Knopf hinzu, mit der Sicherheitsfrage „Wirklich löschen?“.

    So sieht es aus, wenn es klappt

    Neben jedem Eintrag steht ein Löschen-Knopf. Du klickst ihn an, bestätigst, und der Eintrag verschwindet. Die Monatssumme stimmt danach immer noch.

    Wenn nicht

    Die KI hat auch Farben, Aufbau oder andere Funktionen verändert? Spring zur vorherigen Version zurück und wiederhole den Prompt mit dem Zusatz: „Ändere nichts außer dem Löschen-Knopf.“

    Mehr Hilfe: Wenn etwas kaputtgeht

  5. Schritt 5 von 7

    Daten speichern

    Ziel: Deine Einträge sind nach dem Neuladen der Seite noch da.

    Probier es aus: Trag zwei Ausgaben ein und lade die Seite neu. Gut möglich, dass alles weg ist. Die App merkt sich bisher nichts. Die einfachste Lösung für den Anfang ist der Speicher deines Browsers (localStorage, also ein kleines Fach im Browser auf deinem Gerät, in dem Webseiten Daten ablegen können).

    Wenn ich die Seite neu lade, sind alle Ausgaben weg. Bitte speichere die Einträge im Browser (localStorage), damit sie nach dem Neuladen noch da sind.

Erkläre mir danach in zwei Sätzen, wo die Daten jetzt liegen und wer sie sehen kann.

    So sieht es aus, wenn es klappt

    Nach dem Neuladen sind deine Einträge noch da. Wichtig zu wissen: Die Daten liegen nur in diesem Browser auf diesem Gerät. Wer die App über einen Link öffnet, sieht deine Ausgaben nicht. Wenn du die Browserdaten löschst, sind sie weg.

    Wenn nicht

    Die Einträge verschwinden trotzdem? Manche Vorschau-Fenster setzen den Speicher bei jedem Neuladen zurück. Teste es in der geöffneten oder veröffentlichten Version (Schritt 7). Hilft das nicht, beschreib der KI genau, was du tust und was passiert.

    Mehr Hilfe: Wenn etwas kaputtgeht

  6. Schritt 6 von 7

    Version sichern

    Ziel: Es gibt eine benannte Version deiner App, zu der du jederzeit zurückkannst.

    Ab jetzt gilt: Jedes Mal, wenn etwas funktioniert, sicherst du eine Version. Die meisten Werkzeuge haben dafür einen Versionsverlauf, in dem du Stände markieren oder wiederherstellen kannst. Manche lassen sich mit GitHub verbinden, das ist ein Dienst, der alle Versionen deines Codes in einem Repository speichert, also in einem Ordner mit Gedächtnis.

    Arbeitest du in einem Chat ohne Versionsverlauf, etwa mit Canvas oder Artifacts? Dann lad den Code herunter oder kopier ihn in eine Textdatei mit Datum im Namen.

    Fasse in einer Zeile zusammen, was die App jetzt kann. Diese Zeile nutze ich als Namen für die gesicherte Version.

    So sieht es aus, wenn es klappt

    Im Versionsverlauf (oder als Datei) findest du eine Version mit einem Namen wie „v1: Eintragen, Löschen, Speichern“.

    Wenn nicht

    Du findest keinen Versionsverlauf? Frag das Werkzeug: „Wie sichere ich eine Version und wie stelle ich sie wieder her?“ Und wenn schon etwas kaputt ist: Spring zur letzten funktionierenden Version zurück, statt die KI zehnmal reparieren zu lassen.

    Mehr Hilfe: Wenn etwas kaputtgeht

  7. Schritt 7 von 7

    Teilen-Link erzeugen und testen

    Ziel: Du hast einen Link, über den deine App auch auf einem anderen Gerät startet.

    Fast jedes Werkzeug kann deine App über einen Link teilen oder veröffentlichen. Bevor du das tust, lass die KI einmal prüfen, ob etwas im Code steht, das dort nicht hingehört. Denn alles, was in einer geteilten App steckt, können andere grundsätzlich lesen.

    Ich möchte die App über einen Link mit meiner Familie teilen. Prüfe bitte vorher: Stehen im Code Passwörter, API-Keys oder persönliche Daten? Und erkläre mir kurz, ob andere über den Link meine eingetragenen Ausgaben sehen können.

    So sieht es aus, wenn es klappt

    Öffne den Link in einem privaten Browserfenster oder auf deinem Handy. Die App startet, und zwar leer. Das ist richtig so: Deine Einträge liegen ja nur in deinem Browser (Schritt 5). Glückwunsch, das ist deine erste eigene App!

    Wenn nicht

    Der Link verlangt eine Anmeldung oder zeigt eine Fehlerseite? Dann ist das Projekt vermutlich noch privat. Frag das Werkzeug, wie du einen öffentlichen Link erzeugst. Und falls die KI einen API-Key im Code findet: erst entfernen, dann teilen.

    Mehr Hilfe: Wenn etwas kaputtgeht

Erste Hilfe

Wenn etwas kaputtgeht

Die fünf häufigsten Notfälle beim ersten Projekt, und was du sofort tun kannst.

Und dann?

Wie geht's weiter?

Deine erste App läuft. Als Nächstes lohnt sich eine zweite, etwas größere: ein Vokabeltrainer, eine Einkaufsliste oder eine Seite für deinen Verein. Und wenn du lieber mit rotem Faden lernst als allein: Trag dich auf die Warteliste für den Online-Kurs ein.

Kostenlos & unverbindlich

Anleitung als PDF holen und auf die Warteliste

Nach dem Absenden bekommst du „Deine erste App in 60 Minuten“ sofort als PDF zum Herunterladen, mit Checkliste zum Ausdrucken. Auf Wunsch sagen wir dir auch Bescheid, sobald der Online-Kurs startet, und fragen dich vorher, was du dir davon wünschst. Beides ist kostenlos, und du kannst dich jederzeit wieder abmelden.

Kein Spam. Nur die Anleitung und Infos zum Kursstart. Abmelden jederzeit.

Wir nutzen deine Angaben nur, um dir die Anleitung bereitzustellen und, wenn du die Warteliste gewählt hast, dich über den Kursstart zu informieren. Du kannst das jederzeit widerrufen. Mehr in der Datenschutzerklärung.