Anfänger V: Vollständiges Projektpraktikum
Kapitelübersicht
1. "Happy Path" ablehnen: Die Kernkette vervollständigen
Viele Einsteiger erstellen Prototypen oft nur für den "Happy Path" (den Idealfall): Nutzer klickt → API antwortet erfolgreich → Ergebnis wird angezeigt. In der realen Welt läuft aber oft nicht alles so glatt. Damit Ihr Prototyp wie ein echtes Produkt aussieht, müssen Sie folgende "unsichtbare" Aspekte berücksichtigen.
1.1 "Warten" und "Feedback" hinzufügen
Wenn der Nutzer auf "Copywriting generieren" klickt, benötigt AI oft mehrere Sekunden, um zu antworten. Wenn die Oberfläche nicht reagiert, denkt der Nutzer, das Programm sei kaputt. Lassen Sie die AI IDE einen Loading-Status hinzufügen:
Prompt-Beispiel: "Wenn ich auf den Generieren-Button klicke, ändere den Button in 'Generiere...' und deaktiviere ihn. Zeige gleichzeitig im rechten Bereich eine Lade-Animation. Erst wenn die API ein Ergebnis zurückgibt, kehre zum Normalzustand zurück."
1.2 "Fehler" und "Ausnahmen" behandeln
API Keys können ablaufen, Netzwerke können unterbrochen werden. Lassen Sie die AI IDE Fehler behandeln:
Prompt-Beispiel: "Wenn die API-Anfrage feh schlägt, zeige nicht einfach einen Fehler in der Konsole, sondern zeige oben auf der Seite eine rote Benachrichtigung (Toast), die dem Nutzer sagt: 'Generierung fehlgeschlagen, bitte später erneut versuchen', und erlaube dem Nutzer, erneut auf Generieren zu klicken."
1.3 Chat-Verlauf persistieren
Bei der Interaktion mit AI müssen wir den Konversationsinhalt speichern, damit Nutzer den Verlauf überprüfen und frühere Gespräche fortsetzen können. Aktuell führen wir noch keine Datenbank ein; Sie können eine der folgenden leichtgewichtigen Lösungen wählen:
Speicherlösung-Auswahl:
| Lösung | Anwendungsbereich | Eigenschaften |
|---|---|---|
| LocalStorage | Reines Frontend-Projekt, Nutzerdaten im Browser gespeichert | Einfache Implementierung, geht bei Aktualisierung nicht verloren, keine geräteübergreifende Synchronisierung |
| JSON-Datei | Lokaler Prototyp, Daten als Datei gespeichert | Klare Struktur, leicht zu debuggen, manuell bearbeitbar |
| TXT-Datei | Einfachste Lösung, schnelle Textaufzeichnung | Freies Format, gute Kompatibilität |
Beispiel für Konversationsinhalt: Der gespeicherte Chat-Verlauf enthält normalerweise folgende Inhalte:
[
{
"role": "user",
"content": "Hilf mir, einen Douyin-Verkaufstext für Bluetooth-Kopfhörer zu generieren",
"timestamp": "2026-01-20 10:30:00"
},
{
"role": "assistant",
"content": "[Bluetooth-Kopfhörer Empfehlungstext]\n\nTschüss Verzögerung, immersives Hörerlebnis\n\nHey! Diese Bluetooth-Kopfhörer sind wirklich unglaublich\n\n40dB aktive Geräuschunterdrückung, sofort in die Musikwelt eintauchen\n30 Stunden Akkulaufzeit, eine Woche Pendeln ohne Aufladen\nKristallklare Anrufe wie von Angesicht zu Angesicht\nHalb-In-Ear-Design, langes Tragen ohne Schmerzen\n\nZeitlich begrenztes Angebot, klicken Sie auf den Link unten!",
"timestamp": "2026-01-20 10:30:05"
}
]Implementierungs-Prompt:
"Bitte implementiere eine Chat-Verlauf-Speicherfunktion. Unterstütze das Speichern von Nutzer- und AI-Konversationsaufzeichnungen als JSON-Datei (oder verwende LocalStorage). Lade beim Öffnen der Seite automatisch den Verlauf und unterstütze das Anzeigen und Löschen einzelner Konversationsaufzeichnungen."
2. Seele einhauchen: Echte Daten simulieren (Mock Data)
Eine leere Seite kann niemanden überzeugen. Stellen Sie sich vor, Sie präsentieren einen "E-Commerce-Material-Workspace", aber der Verlauf ist völlig leer oder zeigt nur eine Zeile "test / test / test". Für die bestmögliche Demo-Wirkung müssen wir "realistische Daten fälschen", damit Ihr Prototyp wie ein echtes Produkt aussieht, das seit einem halben Jahr in Betrieb ist.
2.1 AI beim Entwerfen der Datenstruktur helfen lassen
Wir müssen nicht selbst überlegen, wie jedes Feld heißen soll (z.B. name oder title). Das können wir komplett AI überlassen.
Sie müssen AI nur Ihr Geschäftsszenario mitteilen:
Prompt-Beispiel: "Ich arbeite an einem Prototyp für einen Douyin E-Commerce Material-Workspace. Bitte entwerfe eine JSON-Datenstruktur, die eine 'Produktaufgabe' beschreibt. Diese Aufgabe sollte enthalten: Produktbasisinformationen (Name, Kategorie), Eingabematerialien (Bild-Links) sowie AI-generierte Ergebnisse (Titel, Copywriting, Poster-Bild). Bitte gib mir direkt ein JSON-Beispiel."
AI wird basierend auf Ihrer Beschreibung automatisch Felder wie productName, generatedContent usw. vorschlagen.
2.2 AI "realistische" Daten in Batch produzieren lassen
Nachdem die Datenstruktur steht, ist der nächste Schritt, AI beim "Ausfüllen" zu helfen und einen Satz realistisch aussehender Daten zu generieren.
Prompt-Techniken: Sie können AI nicht einfach sagen "Generiere Daten für mich". Sie müssen es wie einem Praktikanten eine Aufgabe stellen und ihm Geschäftskontext und Inhaltsanforderungen mitteilen:
- Geschäftskontext: Erklären Sie AI, dass wir im "Douyin E-Commerce" tätig sind, also sollten Produkttitel aufmerksamkeitsstark sein (z.B. "Figur-schmeichelndes Wunder", "Studierenden-Must-have") und das Copywriting umgangssprachlich sein.
- Bildanforderungen: Damit der Prototyp gut aussieht, sollten die Bilder keine schwarz-weißen Platzhalter sein, sondern am besten zufällige bunte Landschafts- oder Produktfotos.
Prompt-Beispiel: "Bitte generiere basierend auf der soeben erstellten Struktur 10 realistische Simulationsdaten. (Hinweis: Nicht zwingend im JSON-Format. Wenn Sie Frontend schreiben, können Sie direkt JavaScript-Arrays generieren; bei Python Listen.)
Geschäftsszenario-Anforderungen:
- Angenommen, dies ist ein Kaufhaus, das Produkte in den Kategorien 'Damenmode', 'Elektronik' und 'Kosmetik' umfasst.
- Generierte Titel und Copywriting sollten sehr 'Douyin-Stil' sein: Titel sollten Emojis enthalten, Copywriting im umgangssprachlichen 'Unglaublich!'-Stil verfasst sein.
- Bildfeld: Bitte einheitlich das Format
https://picsum.photos/seed/{random_id}/300/400verwenden, um sicherzustellen, dass jedes Bild anders ist."
Generiertes Mock-Data-Beispiel:
export const mockProductTasks = [
{
id: 'task_001',
name: 'Sommerkleid im französischen Vintage-Blumenstil',
status: 'completed',
input: {
category: 'Damenmode',
features: ['Taillenbetonung', 'Figurschmeichelnd', 'Elegant'],
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
},
output: {
generatedTitle: 'Wer es trägt sieht toll aus! Dieses französische Blumenkleid ist wirklich unglaublich',
generatedCopy:
'Mädels! Dieses Kleid ist wirklich figurschmeichelnd! Die taillenbetonende Design ist genial, sofort hat man eine Taille. Der Stoff ist sehr atmungsaktiv, im Sommer trägt man es gar nicht schwül. Perfekt für Dates und Shopping! ',
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
},
createdAt: '2026-01-20T10:00:00Z'
},
{
id: 'task_002',
name: 'Super Noise-Cancelling Bluetooth Kopfhörer Pro',
status: 'completed',
input: {
category: 'Elektronik',
features: ['Noise-Cancelling', 'Ultra-Lange Akkulaufzeit', 'Niedrige Latenz'],
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
},
output: {
generatedTitle: ' Endlich gefunden! Die Noise-Cancelling dieser Kopfhörer ist unglaublich stark!',
generatedCopy:
'Aufsetzen und die Welt wird sofort leise. Unglaubliche Klangqualität, Musik hören wie live. Die Akkulaufzeit ist auch beeindruckend, einmal aufladen reicht für eine Woche! Ein Must-have für Studierende!',
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
},
createdAt: '2026-01-21T14:30:00Z'
}
// ... weitere Daten
]2.3 (Fortgeschritten) Mit LocalStorage "Pseudo-CRUD" implementieren
Wenn Sie möchten, dass die generierten "Simulationsdaten" nicht nur angezeigt, sondern auch gelöscht, geändert und sogar nach dem Aktualisieren der Seite noch vorhanden sind, können Sie LocalStorage verwenden.
Prompt-Beispiel: "Bitte implementiere eine Datenspeicherfunktion.
- Priorität: Zunächst Daten aus
localStoragelesen.- Wenn
localStorageleer ist, mit den generierten Mock-Daten initialisieren und inlocalStoragespeichern.- Schreibe zusätzlich
addProductTaskunddeleteProductTaskFunktionen, die bei jeder OperationlocalStoragesynchron aktualisieren."
Durch diesen Schritt erhält Ihr Prototyp "Gedächtnis" und die Nutzererfahrung ist nahezu identisch mit einem echten Produkt.
3. Feedback sammeln und schnell iterieren
Man kann kein gutes Produkt hinter verschlossenen Türen entwickeln. Jetzt hat Ihr Prototyp "Kernfunktionen" + "vollständige Kette" + "Demo-Daten" und es ist Zeit, ihn anderen zu zeigen.
3.1 Wen zum Testen einladen? Wie testen?
- Freunde/Kollegen finden: Sie müssen nicht technikversiert sein, sie müssen es nur einmal ausprobieren.
- Beobachten statt leiten: Nicht "Klick hier" sagen, sondern sehen, wohin sie klicken würden. Wenn sie den Button nicht finden, liegt ein Designproblem vor.
- "Wizard of Oz"-Methode: Wenn Ihre AI noch nicht angeschlossen ist, können Sie manuell im Hintergrund (oder in der Datenbank) Daten ändern, um die AI-Rückgabe zu simulieren und zunächst zu validieren, ob Nutzer diese Funktion benötigen.
3.2 Mit Bugs und Kritik umgehen
- Layout-Probleme: Auf verschiedenen Bildschirmgrößen kann es chaotisch aussehen.
- Aktion: Screenshot an AI IDE senden → "Bei dieser Bildschirmbreite ist es verschoben, bitte reparieren."
- Ungeschickte Bedienung: "Dieser Prozess ist zu umständlich".
- Aktion: Den Vorschlag an AI IDE weitergeben → "Nutzer finden Hochladen und dann Generieren zu langsam, kann man es zu einem Klick zusammenfassen?"
- Neue Anforderungen: "Wenn es diese Funktion gäbe, wäre es toll."
- Aktion: Prüfen, ob es zum Kern gehört; wenn ja, AI eine vereinfachte Version schnell implementieren lassen.
Merken: In dieser Phase ist AI Ihr bester Modifikationsassistent. Sie sind nur für die Problemerkennung verantwortlich, die Code-Änderung übernimmt AI.
4. Abschlussprojekt: Vervollständigen Sie Ihre "Abschlussarbeit"
Herzlichen Glückwunsch! Sie haben den gesamten Prozess von "Anforderungen" über "Prototyp" bis "AI-Integration" durchlaufen. Jetzt ist es Zeit, Ihr finales Ergebnis zu präsentieren.
Dieses Abschlussprojekt ist nicht mehr auf den "E-Commerce Material-Workspace" beschränkt. Sie müssen basierend auf Ihren Interessen oder Branchenhintergrund einen einzigartigen AI-Produktprototyp entwickeln.
Themenauswahl und Anforderungen
Sie müssen das Szenario wählen, das Ihnen am ehesten entspricht, aus der Mehrbranchen-Szenarioreferenz, oder ein völlig neues Szenario basierend auf Ihren eigenen Ideen entwerfen.
Das Projekt muss alle Inhalte aus den vorherigen Lektionen integriert nutzen:
- Prototyp-Erstellung: Frontend-Technologie verwenden, um eine ästhetische, benutzerfreundliche Oberfläche zu erstellen.
- Anforderungskontrolle: Nicht alles auf einmal, aber die Kernfunktionslogik muss geschlossen sein.
- API-Integration: Echte AI-Modelle (LLM/VLM etc.) integrieren, um der Anwendung echte Intelligenz zu verleihen.
- Eine spielbare Anwendung erstellen: Nicht nur statische Seiten, sondern eine dynamische Anwendung mit Datenfluss und Interaktions-Feedback.
Projekt-Outputs
Am Ende müssen Sie Folgendes einreichen:
- Eine vollständige Prototyp-Anwendung: Online bereitgestellt oder lokal ausführbar, mit vollständiger Nutzungskette.
- Ein 30-Sekunden-Demo-Video: Ein Video aufnehmen, das kurz Ihr Anwendungsszenario vorstellt und die Kernfunktionen in Aktion zeigt.
Dies ist die letzte Herausforderung von Stage 1. Bitte überprüfen Sie Ihr Werk anhand der folgenden Checkliste:
Nächste Schritte
Nach Abschluss des Abschlussprojekts verfügen Sie über die Fähigkeit, "unabhängig AI-Anwendungsprototypen zu entwickeln". In Stage 2 werden wir uns mit komplexerer Full-Stack-Entwicklung befassen und lernen, wie man diesen Prototypen in eine echte, online-fähige, datenbankgestützte Anwendung mit Benutzersystem verwandelt.
Wir sehen uns im nächsten Stage!