Codex für Anfänger: Schritt für Schritt zur ersten Todo-App unter Windows

Eine kleine App wird nützlich, wenn sie in deinen Alltag passt. Bei einer Aufgabenliste ist der Ablauf einfach: eine Aufgabe notieren, sie nach dem Erledigen abhaken und beim nächsten Öffnen sehen, was noch ansteht.

Genau deshalb eignet sie sich als erstes Projekt mit Codex. Du beschreibst das gewünschte Verhalten in normaler Sprache, lässt Codex die Datei erstellen und prüfst das Ergebnis selbst. Dafür musst du noch nicht jede Zeile JavaScript verstehen. Ob ein Klick auf „Hinzufügen“ die richtige Aufgabe anlegt, kannst du auch so feststellen.

In dieser Anleitung bauen wir eine lokale Aufgabenliste unter Windows. Anschließend ergänzen wir eine gezielte Verbesserung: den Namen einer Aufgabe ändern, ohne ihren Erledigt-Status zu verlieren.

Das Ergebnis: eine Datei namens index.html, die Oberfläche, Gestaltung und JavaScript enthält. Du öffnest sie im Browser, prüfst die Funktionen und gibst Codex einen konkreten Folgeauftrag. Für die App brauchst du weder ein Framework noch zusätzliche Pakete.

C:\Users\Thinkpad\Desktop\crazyrouter文章\12.小白使用codex\viblo-de-assets-20261008\cover-de.png Gestaltungsbeispiel für das Projekt. Deine erzeugte Oberfläche kann anders aussehen.

Gib der ersten Version eine klare Aufgabe

Stell dir vor, du öffnest die Liste morgen früh. Du trägst „Dokumentation lesen“ und „Gliederung senden“ ein. Sobald du mit dem Lesen fertig bist, hakst du die erste Aufgabe ab.

Aus diesem kleinen Ablauf ergeben sich die Anforderungen:

• Aufgaben per Schaltfläche oder Eingabetaste hinzufügen.
• Aufgaben als erledigt markieren und wieder öffnen.
• Einzelne Aufgaben löschen, ohne benachbarte Einträge zu verändern.
• Die Anzahl offener Aufgaben anzeigen.
• Aufgabentext und Status wiederherstellen, wenn der Browserspeicher verfügbar ist.

Wir halten alles in einer Datei, damit du sie leicht finden, öffnen und bearbeiten kannst. Benutzerkonten, ein Server und die Synchronisierung zwischen Geräten gehören noch nicht zu dieser ersten Version. Die Aufgaben werden lokal im Browser gespeichert.

Halte ein paar Beispielaufgaben bereit. Mit ihnen prüfst du später, ob die erzeugte App das gewünschte Verhalten zeigt.

Bereite die Arbeitsumgebung vor

Wir verwenden Codex CLI, also die Version für das Terminal. Dabei wechselst du zwischen drei Eingabestellen: PowerShell für Befehle, einem Texteditor für die Konfiguration und dem Codex-Dialog für deine Projektaufträge. Im Browser verwendest du anschließend die fertige Seite.

Jede Eingabe hat ihren Platz. Die Konfiguration kommt in eine Datei, der Auftrag für die App in den Codex-Dialog.

Installiere die Werkzeuge für das Terminal

Lade auf der offiziellen Node.js-Downloadseite die LTS-Version für Windows herunter. Wähle das Installationspaket passend zur Prozessorarchitektur deines Rechners. Lass npm und den Eintrag im PATH aktiviert.

Schließe das bisherige Terminal, öffne ein neues PowerShell-Fenster und führe diese Befehle einzeln aus:

node --version
npm.cmd --version

Wenn beide eine Versionsnummer ausgeben, installiere Codex:

npm.cmd install -g @openai/codex@latest

Warte, bis die Installation beendet ist, und prüfe anschließend:

codex.cmd --version

Die .cmd-Aufrufe umgehen einige PowerShell-Einschränkungen für gleichnamige .ps1-Skripte. Kopiere nur die Befehle, ohne eine vorangestellte Eingabeaufforderung wie PS C:\...>.

Die Versionsnummer ist dein erster Kontrollpunkt. Wird der Befehl nicht gefunden, prüfe die Installationsausgabe und öffne das Terminal erneut, bevor du weitermachst.

Wähle die Verbindung zum Modell

Beim offiziellen Kontozugang folgst du den Anmeldehinweisen, sobald Codex startet. Welche Funktionen verfügbar sind, richtet sich nach deinem aktuellen Konto.

Wenn du Crazyrouter als benutzerdefinierten API-Anbieter verwenden möchtest, erledige zuerst die folgende Konfiguration. Funktioniert deine Verbindung bereits, kannst du direkt mit Projektordner anlegen und Verbindung prüfen fortfahren.

Für diese Einrichtung sind zwei Quellen hilfreich:

• Codex-Einrichtungsanleitung von Crazyrouter — hier findest du die aktuellen Angaben zu Endpunkt, Konfigurationsfeldern und Modellanforderungen.
• API-Preise der Modelle bei Crazyrouter — gleiche die Preise mit Guthaben, Modellzugriff und Abrechnungsangaben in deinem Konto ab.

Die verlinkten Referenzseiten sind auf Englisch. Ein ChatGPT-Abonnement und ein Konto bei einem externen API-Anbieter werden getrennt abgerechnet. Lege den Schlüssel für den gewählten Dienst bereit und prüfe den Modellzugriff vor der ersten Anfrage.

API-Schlüssel speichern

Führe diese Zeile in PowerShell aus:

$codexSecureKey = Read-Host 'Crazyrouter-API-Schlüssel einfügen und Enter drücken' -AsSecureString

Füge den Schlüssel bei der Aufforderung ein und drücke Enter. Die Eingabe bleibt verborgen. Sobald wieder die normale PowerShell-Eingabeaufforderung erscheint, führst du diesen Block aus:

$codexKeyPtr = [Runtime.InteropServices.Marshal]::SecureStringToBSTR($codexSecureKey)
try {
    $codexPlainKey = [Runtime.InteropServices.Marshal]::PtrToStringBSTR($codexKeyPtr).Trim()
    if ([string]::IsNullOrWhiteSpace($codexPlainKey)) {
        throw 'Es wurde kein API-Schlüssel eingegeben.'
    }
    [Environment]::SetEnvironmentVariable('CRAZYROUTER_API_KEY', $codexPlainKey, 'User')
    $env:CRAZYROUTER_API_KEY = $codexPlainKey
} finally {
    [Runtime.InteropServices.Marshal]::ZeroFreeBSTR($codexKeyPtr)
    $codexPlainKey = $null
    $codexSecureKey.Dispose()
}

Damit ist der Schlüssel im aktuellen Fenster verfügbar und für deinen Windows-Benutzer gespeichert. Er gehört weder in die Projektdatei noch in Screenshots. Eine Benutzer-Umgebungsvariable ist kein verschlüsselter Tresor; verwende dein eigenes Windows-Konto.

Verbindung konfigurieren

Dieser PowerShell-Block öffnet die Konfigurationsdatei. Falls sie bereits existiert, legt er vorher eine Sicherung an:

$codexConfigDir = if ($env:CODEX_HOME) { $env:CODEX_HOME } else { Join-Path $env:USERPROFILE '.codex' }
New-Item -ItemType Directory -Path $codexConfigDir -Force | Out-Null
$codexConfigFile = Join-Path $codexConfigDir 'config.toml'
if (Test-Path -LiteralPath $codexConfigFile) {
    Copy-Item -LiteralPath $codexConfigFile -Destination ($codexConfigFile + '.bak.' + (Get-Date -Format 'yyyyMMdd-HHmmss'))
}
notepad.exe $codexConfigFile

In eine neue, leere Datei fügst du in Notepad Folgendes ein:

model = "gpt-5.6-sol"
model_provider = "crazyrouter"

[model_providers.crazyrouter]
name = "Crazyrouter"
base_url = "https://api.crazyrouter.com/v1"
env_key = "CRAZYROUTER_API_KEY"
wire_api = "responses"

Die Modell-ID stammt aus dem am 8. Oktober 2026 dokumentierten Einrichtungsbeispiel des Anbieters. Prüfe vor der Verwendung die aktuelle ID, deinen Modellzugriff und die Unterstützung der Responses API in der verlinkten Anleitung.

env_key enthält den Namen der Umgebungsvariable, nicht den API-Schlüssel. In base_url steht die API-Adresse ohne Trackingparameter.

Enthält die Datei schon Einstellungen, passe die betreffenden Felder an, statt alles zu ersetzen. model und model_provider gehören vor die erste Abschnittsüberschrift in eckigen Klammern. Vermeide doppelte Schlüssel und speichere die Datei als config.toml, ohne zusätzliche Endung .txt.

Prüfe anschließend in PowerShell, ob das aktuelle Fenster die Variable lesen kann:

[bool]$env:CRAZYROUTER_API_KEY

True bedeutet, dass ein Wert vorhanden ist. Die tatsächliche Verbindung prüfen wir gleich. Falls ein neues Terminal die gespeicherte Variable nicht erkennt, schließe Windows Terminal vollständig und öffne es erneut.

Projektordner anlegen und Verbindung prüfen

Gib der App einen eigenen Ordner:

$codexProject = Join-Path $env:USERPROFILE 'CodexProjects\viblo-task-planner'
New-Item -ItemType Directory -Path $codexProject -Force | Out-Null
Set-Location -LiteralPath $codexProject
Get-Location

Kontrolliere den angezeigten Pfad. Falls dort bereits wichtige Dateien liegen, wähle einen neuen Ordnernamen und verwende ihn auch in den späteren Befehlen.

Starte Codex:

codex.cmd --sandbox workspace-write --ask-for-approval on-request

Folge den Hinweisen zur Anmeldung, zum Vertrauen in das Verzeichnis oder zur Einrichtung der Windows-Sandbox. Wenn eine Freigabe erforderlich ist, prüfe den Zielpfad und die angeforderte Aktion.

Sende im Codex-Dialog zunächst:

Antworte ausschließlich mit: Verbindung bereit.
Lies oder ändere keine Dateien und führe keine Befehle aus.

Eine Antwort bestätigt, dass diese Anfrage erfolgreich zurückkam. Du hast jetzt einen Projektordner und eine antwortende Modellverbindung. Als Nächstes entsteht die Seite.

Formuliere daraus einen konkreten Arbeitsauftrag

Sende diesen Auftrag im selben Codex-Dialog:

Erstelle im aktuellen Projektordner tatsächlich eine Datei index.html.
Baue eine deutschsprachige Todo-App mit dem Titel "Meine Aufgaben".

Gewünschtes Verhalten:
- Aufgaben über "Hinzufügen" oder die Eingabetaste anlegen.
- Eingaben aus reinen Leerzeichen ignorieren; nach dem Hinzufügen das Eingabefeld leeren.
- Aufgaben einzeln abschließen, wieder öffnen und löschen.
- Gleiche Aufgabennamen erlauben; jeder Eintrag bleibt unabhängig.
- Die Anzahl offener Aufgaben anzeigen.
- Aufgabentext und Erledigt-Status mit localStorage speichern.
- Gespeicherte Aufgaben beim Laden der Seite wiederherstellen.
- Eine sichtbare Meldung anzeigen, wenn Lesen oder Schreiben im Speicher fehlschlägt.
- Lange Texte und Schaltflächen auch in einem schmalen Fenster bedienbar halten.

Technischer Umfang:
- HTML, CSS und JavaScript bleiben in dieser einen Datei.
- Keine Pakete installieren; keine externen Bibliotheken, Schriften, Bilder oder CDNs.
- Aufgabentexte als normalen Text darstellen, nicht als HTML ausführen.
- Nur index.html erstellen oder ändern.

Schreibe die Datei, statt nur Code im Dialog anzuzeigen.
Nenne anschließend den Pfad, die Schritte zum Öffnen und die durchgeführten Prüfungen.
Kennzeichne, was noch manuell im Browser geprüft werden muss.

Der Auftrag trennt gewünschtes Verhalten und technischen Umfang. Codex kann die Gestaltung wählen, während die für dich wichtigen Funktionen klar überprüfbar bleiben.

Achte nach Abschluss auf den Dateipfad. Erhältst du nur einen Codeblock, bitte Codex, den Code tatsächlich in index.html im aktuellen Projektordner zu schreiben und den Speicherort zu bestätigen.

Öffne die Seite und spiele einen kurzen Ablauf durch

Beende Codex nach den Anweisungen auf dem Bildschirm. Falls bei Ctrl + C eine weitere Bestätigung verlangt wird, folge dem Hinweis. Zurück in PowerShell führst du Folgendes aus:

Set-Location -LiteralPath (Join-Path $env:USERPROFILE 'CodexProjects\viblo-task-planner')
Test-Path .\index.html

Bei True öffnest du die Datei:

Start-Process .\index.html

Öffnet sich ein Editor, wähle im Datei-Explorer über Öffnen mit Edge oder Chrome. Bei False vergleichst du zuerst den aktuellen Ordner mit dem von Codex genannten Pfad.

Probiere anschließend diesen kleinen Alltagsablauf:

Aktion	Erwartetes Verhalten
„Dokumentation lesen“ über die Schaltfläche hinzufügen	Eine Aufgabe erscheint, das Eingabefeld wird geleert
„Gliederung senden“ mit Enter hinzufügen	Genau ein weiterer Eintrag entsteht
Nur Leerzeichen abschicken	Keine neue Aufgabe erscheint
Noch einmal „Gliederung senden“ hinzufügen und einen der Einträge löschen	Der andere Eintrag bleibt erhalten
Eine Aufgabe erledigen und wieder öffnen	Status und Anzahl offener Aufgaben ändern sich passend
Mit einer erledigten und einer offenen Aufgabe neu laden	Text und beide Zustände werden bei verfügbarem Speicher wiederhergestellt
Das Fenster verkleinern und eine lange Aufgabe anlegen	Text und Bedienelemente bleiben nutzbar

Führe diese Prüfungen an deiner erzeugten Version durch. Achte nach dem Neuladen sowohl auf den Text als auch auf den Erledigt-Status. Eine wiederhergestellte Aufgabe mit falschem Status braucht noch eine Korrektur.

Die Grafik enthält bereits die Prüfung der Bearbeitungsfunktion aus dem nächsten Schritt.

Der lokale Speicher gehört zur jeweiligen Browserumgebung. Beim Löschen von Browserdaten kann die Liste verloren gehen. Bei direkt geöffneten file://-Seiten kann sich das Speicherverhalten zwischen Browsern unterscheiden. Verwende für die ersten Prüfungen Beispielaufgaben und bewahre wichtige Informationen zusätzlich separat auf.

Ergänze als nächsten Schritt das Bearbeiten von Aufgaben

Wenn die grundlegenden Prüfungen bestanden sind, machen wir die Liste bequemer: Der Name einer bestehenden Aufgabe soll sich ändern lassen, ohne sie löschen und neu anlegen zu müssen.

Sichere zuerst die App-Datei in PowerShell im Projektordner:

Copy-Item .\index.html ('.\index.backup-' + (Get-Date -Format 'yyyyMMdd-HHmmss') + '.html')

Das ist eine Sicherung des Programmcodes. Die im Browser gespeicherten Aufgaben sind davon getrennt.

Starte Codex im selben Ordner erneut mit dem vorherigen Startbefehl. Mit codex.cmd resume kannst du auch eine frühere Unterhaltung auswählen. Sende dann:

Lies die aktuelle index.html, bevor du Änderungen vornimmst.
Ergänze bei jeder Aufgabe "Bearbeiten" sowie "Speichern" und "Abbrechen".

Beim Speichern eines neuen Namens bleiben Identität und Erledigt-Status der Aufgabe erhalten.
"Abbrechen" lässt den ursprünglichen Text unverändert.
Leere Namen und Namen aus reinen Leerzeichen werden abgelehnt.
Zwei Aufgaben mit identischem Text müssen unabhängig bearbeitbar bleiben.
Speichere den neuen Namen so, dass er bei verfügbarem Speicher ein Neuladen übersteht.
Hinzufügen, Erledigen, Wiederöffnen und Löschen müssen weiterhin funktionieren.
Ändere nur index.html und erkläre, wie ich die Änderung prüfen kann.

Wechsle zurück in den Browser und lade die Seite neu, damit die überarbeitete Datei verwendet wird. Lege zwei gleichnamige Aufgaben an, erledige eine davon und bearbeite nur diesen erledigten Eintrag. Sein neuer Name sollte erscheinen, sein Status aber erhalten bleiben. Der zweite Eintrag darf sich nicht verändern.

Probiere auch „Abbrechen“ und einen leeren Namen aus. Lade schließlich neu und prüfe erneut das Hinzufügen und Löschen. So siehst du, ob die neue Funktion mit den bestehenden zusammenarbeitet.

Beschreibe einen Fehler so, dass er sich wiederholen lässt

C:\Users\Thinkpad\Desktop\crazyrouter文章\12.小白使用codex\viblo-de-assets-20261008\setup-map-de.png Lass den Browser geöffnet, damit du den Ablauf erneut ausprobieren kannst. Ist Codex noch offen, sende den Bericht in diesem Dialog. Andernfalls kehrst du zu PowerShell zurück, wechselst bei Bedarf in denselben Projektordner und startest Codex erneut.

Beschreibe die genaue Folge von Aktionen, statt nur „Bearbeiten funktioniert nicht“ zu schreiben:

Lies die vorhandene index.html.
In Edge habe ich zwei Aufgaben namens "Gliederung senden" angelegt und die erste erledigt.
Dann habe ich die erste Aufgabe in "Überarbeitete Gliederung senden" umbenannt und gespeichert.
Dabei wurden beide Aufgabennamen geändert.

Erwartet: Nur die bearbeitete Aufgabe ändert ihren Namen; ihr Erledigt-Status bleibt erhalten.
Prüfe, wie die Bearbeitungsfunktion den betreffenden Eintrag identifiziert.
Ändere in index.html nur das Nötige und erhalte die anderen Funktionen.
Erkläre, wie ich den Ablauf wiederholen kann und was du tatsächlich geprüft hast.

Das ist ein Beispielbericht. Ersetze Aktionen und Ergebnis durch das, was in deiner eigenen Seite passiert ist. Lade den Browser nach einer Korrektur neu, wiederhole denselben Ablauf und prüfe anschließend die vorhandenen Funktionen.

Bei Verbindungsproblemen hilft der Fehlertext bei der nächsten Entscheidung. Prüfe bei 401 oder 403 Zugangsdaten und Berechtigungen, bei 404 den Pfad, die Modell-ID und das Protokoll. Bei 429 sind die Angaben des Dienstes zu Limits oder Kontingenten relevant. Entferne Schlüssel aus Fehlermeldungen, die du weitergibst.

Übertrage den Ablauf auf dein nächstes kleines Projekt

Deine erste Version ist für eigene Alltagsexperimente bereit, wenn du sie öffnen, Aufgaben verwalten, gespeicherte Daten im gewählten Browser wiederherstellen und einzelne Einträge unabhängig bearbeiten kannst.

Der Ablauf lässt sich wiederverwenden: eine kleine Aufgabe beschreiben, eine echte Datei erstellen lassen, sie mit alltäglichen Handlungen prüfen und anschließend eine gezielte Verbesserung anfordern.

Das funktioniert als Vorgehensweise auch für ein Lesetagebuch, einen einfachen Rechner oder eine persönliche Startseite. Wähle etwas, dessen Verhalten du selbst erklären und überprüfen kannst.

Was würde die Aufgabenliste für deinen Alltag nützlicher machen: Kategorien, Fälligkeitsdaten oder ein Export? Wähle eine dieser Erweiterungen für die nächste Runde.