test-repo/docs-readme/de-DE/README.md

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe: Learn Vibe Coding from 0 to 1

Von Null, projektbasiertes Lernen, dein erstes KI-Produkt bauen

📌 Online lesen starten (Start Reading Online)

Online lesen · Lernkarte · Community

🚀 Projektvorstellung

Wenn du versuchst, mit KI Code zu schreiben, ständig auf Fehler stößt, oft aufgeben möchtest und unklar ist, wie man Programme tatsächlich online bringt 😢.

Dieses Tutorial ist speziell dafür konzipiert, dich von 0 auf 1 zu bringen und Vibe Coding-Techniken schrittweise zu meistern:

• Stufe 0: Schneller Einstieg über Mini-Spiele zum Erwerb von Vibe Coding-Fähigkeiten
• Stufe 1: Aus der Perspektive eines Product Managers, Vibe Coding-Fähigkeiten und Geschäftsverständnis, Implementierung eines Web-App-Prototyps
• Stufe 2: Lernen von Frontend/Backend-Entwicklung und KI-Fähigkeiten im Zusammenhang mit Vibe Coding-Techniken, Vervollständigung einer kompletten Anwendung
• Stufe 3: Beherrschung des Baus von plattformübergreifenden komplexen Anwendungen, hin zu produktionsreifen Anwendungen

Wir glauben, dass durch die Beherrschung von Vibe Coding in Kombination mit systematischem Training eine einzelne Person zu einem Entwickler werden kann, der Frontend-Entwicklung, Backend-Entwicklung, Integration von KI-Fähigkeiten und Produktdesign vereint.

Dieses Projekt richtet sich hauptsächlich an drei Arten von Lernenden:

• Anfänger (normale Menschen / Produkt und Betrieb): Nicht-technische Lernende helfen, Schlüsselkonzepte zu verstehen und ihren ersten Produktprototyp zu completed
• Entwickler auf Anfänger-Fortgeschrittenen-Niveau (Studenten und Entwickler mit gewisser Grundlage): Beherrschung von Vibe Coding Frontend/Backend und KI-Fähigkeitswissen
• Fortgeschrittene Entwickler (Unternehmen und Startups, Open Source und unabhängige Entwickler): Fortgeschrittene Entwicklungstechniken, plattformübergreifende Entwicklung

📖 Inhaltsnavigation

Gesamtanhang

KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen

0. Kindergarten

Kapitel	Schlüsselinhalt	Status
Vorwort: Lernkarte	Gesamtführung durch den Lernpfad	✅
Anfänger 1: KI-Zeitalter, wenn du sprechen kannst, kannst du programmieren	Erste Erfahrung mit KI-Programmierfähigkeiten durch Fälle wie Snake	✅

1. KI-Produktmanager

Kapitel	Schlüsselinhalt	Status
Anfänger 2: KI-IDE-Tools kennenlernen	IDE-Nutzung lernen, lokal Mini-Spiele erstellen	✅
Anfänger 3: Einen Prototyp selbst bauen	Anforderungsanalyse, KI-generierte Einzelseite, bis zu Generierung von Mehrseiten-Produktprototypen	✅
Anfänger 4: KI-Fähigkeiten zum Prototyp hinzufügen	Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen	✅
Anfänger 5: Komplettes Projektpraxis	Reale Szenarien simulieren, Benutzerfeedback zur Iteration akzeptieren, Projekt completed	✅
Großes Projekt: Einen kompletten Web-App-Prototyp erstellen und präsentieren	Anwendung vollständig implementieren, Anwendungseffekte präsentieren	✅

Anhänge

Kapitel	Schlüsselinhalt	Status
Anhang A: Produktdenken-Ergänzung	Denkrahmen, die für die Erstellung eines Produkts von Null auf Eins erforderlich sind	✅
Anhang B: Häufige Fehler und Lösungen	Häufige Fehler in Vibe Coding und Methoden zur Fehlerbehebung	✅

2. Entwicklungsingenieur auf Anfänger-Fortgeschrittenen-Niveau

Frontend-Teil

Kapitel	Schlüsselinhalt	Status
Frontend 0: lovart für Asset-Generierung verwenden	lovart für Batch-Generierung von visuellen Assets wie Charakteren und Szenen verwenden, Bereitstellung von Asset-Basis für UI-Design und Frontend-Entwicklung	🚧
Frontend 1: Einführung in Figma und MasterGo	Design-Tools zur Organisation der Informationsarchitektur und Seitenstruktur verwenden, Basis für Frontend-Implementierung schaffen	🚧
Frontend 2: Erste moderne Anwendung erstellen - UI-Design	Komponentenbasierte Schnittstelle basierend auf Entwürfen completed, erste Route von Design zu Code realisieren	🚧
Frontend 3: UI-Design-Spezifikationen und Multi-Produkt-UI-Design referenzieren	Multi-Produkt-Schnittstellen um ein einheitliches Hauptvisuelles erweitern, systematische Designfähigkeiten üben	🚧
Frontend 4: Gemeinsam Hogwarts-Porträts erstellen	Frontend-Anwendung mit integrierten KI-Fähigkeiten von 0 auf 1 erstellen, Design und Entwicklung verbinden	✅

Backend- und Full-Stack-Teil

Kapitel	Schlüsselinhalt	Status
Backend 1: Was ist eine API	HTTP-Schnittstellen und Request-Response-Modelle verstehen, Vorbereitung auf Backend-Integration und Abstimmung	✅
Backend 2: Von Datenbanken zu Supabase : Datenbanken und APIs auf Supabase implementieren, Datenmodelle mit Frontend-Seiten verbinden	✅
Backend 3: LLM-unterstützte Schnittstellen- und Dokumentationscodierung : LLM zur Unterstützung bei der Generierung von Dokumentation und Code für Schnittstellen und Datenbanken verwenden, lesbaren und testbaren Backend realisieren	🚧
Backend 4: Git-Workflow : Code in Git-Workflow verwalten, Versionskontrolle und Zusammenarbeit durchführen	✅
Backend 5: Zeabur-Bereitstellung : Anwendung auf Zeabur bereitstellen, um online zu gehen	✅
Backend 6: Moderne CLI-Entwicklungstools : KI-Programmierertools vom Typ CLI verwenden, um Entwicklung und Debugging zu beschleunigen, persönlichen Engineering-Workflow bilden	✅
Backend 7: Zahlungssysteme wie Stripe integrieren : Zahlungssysteme anschließen, Zahlungsablauf und grundlegenden Abrechnungsprozess completed	🚧
Großes Projekt 1: Erste moderne Anwendung erstellen - Full-Stack-App : Frontend, Backend und Zahlungsmodule integrieren, produktionsreife Full-Stack-Web-Anwendung completed	🚧
Großes Projekt 2: Moderne Frontend-Komponentenbibliothek + Trae-Praxis : Moderne Frontend-Komponentenbibliothek und Trae verwenden, unabhängig ein Produkt mit Anmeldung/Registrierung und Zahlungsunterstützung completed	🚧

KI-Fähigkeiten-Anhang

Kapitel	Schlüsselinhalt	Status
KI 1: Einführung in Dify und Wissensbasis-Integration : Dify Workflow und grundlegendes RAG verwenden, um werkzeugartige Produkte zu erstellen, Beispiel für zukünftige Anwendungs-Upgrades erstellen	✅
KI 2: KI-Lexikon abfragen und multimodale APIs integrieren lernen : Lernen, geeignete Modelle und APIs zu finden, multimodale Fähigkeiten wie Text und Bild in Produkte integrieren	🚧

3. Fortgeschrittener Entwicklungsingenieur

Kapitel	Schlüsselinhalt	Status
Fortgeschritten 1: MCP und ClaudeCode Skills : IDE-Fähigkeiten durch MCP und Skills erweitern, externe Dienste als Tools anschließen	🚧
Fortgeschritten 2: Coding Tools lange laufen lassen : Lang laufende Aufgaben entwerfen und konfigurieren, Coding Tools stabiler und zuverlässiger machen	🚧
Fortgeschritten 3: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen : WeChat-Miniprogramm-Ökosystem verstehen, Frontend-Miniprogramm von offizieller Vorlage bis zum Start completed	✅
Fortgeschritten 4: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen - Mit Backend : Datenbank und Backend-Logik in Miniprogramme integrieren, vollständigen Geschäftskreislauf realisieren	🚧
Fortgeschritten 5: Plattformübergreifende Entwicklung: Android-Anwendungen erstellen : Tools wie Expo verwenden, Web/native-integrierte Android-Anwendungsentwicklung completed	🚧
Fortgeschritten 6: Plattformübergreifende Entwicklung: iOS-Anwendungen erstellen : Tools wie Expo verwenden, Web/native-integrierte iOS-Anwendungsentwicklung completed	🚧
Fortgeschritten 7: Eigene persönliche Website und akademischen Blog erstellen : Von Auswahl, Erstellung bis Bereitstellung, langfristige Online-Homepage erstellen, die persönliche Projekte und akademische Ergebnisse präsentiert	🚧

KI-Fähigkeiten-Anhang

Kapitel	Schlüsselinhalt	Status
Fortgeschrittene KI 1: Was ist RAG und wie funktioniert es : Systematisches Verständnis von RAG-Prinzipien und gängigen Architekturen, Wissensretrieval-Basis für komplexe Anwendungen bereitstellen	✅
Fortgeschrittene KI 2: Mittel-fortgeschrittenes RAG und Workflow-Orchestrierung: LangGraph-Beispiel : Tools wie LangGraph verwenden, um mehrstufige Workflows und mittel-fortgeschrittene RAG-Systeme zu entwerfen	🚧

🛠️ Lernmethode

• Entsprechend deiner persönlichen Fähigkeiten selektiv relevante Kapitel lesen und üben, bei Fragen in Issues stellen.

💻 Dieses Kurs lokal starten

Moderne Methode

Gib im KI-IDE-Dialogfeld (vscode, cursor, trae etc.) den folgenden Prompt ein, um diesen Kurs zu starten:

Bitte hilf mir, den lokalen Service dieses Projekts auszuführen

Alte Methode

1. npm install
2. npm run dev
3. Browser öffnen und http://localhost:3000 besuchen.

🤝 Mitwirken

• Wenn du Probleme entdeckst oder denkst, dass es Möglichkeiten zur Verbesserung dieses Projekts gibt, kannst du eine Issue einreichen, um Feedback zu geben. Wenn nach Einreichung niemand antwortet, kannst du das Betreuer-Team für Feedback und Nachverfolgung kontaktieren~
• Wenn du zu diesem Projekt beitragen möchtest, kannst du einen Pull Request einreichen, wenn nach Einreichung niemand antwortet, kannst du das Betreuer-Team für Feedback und Nachverfolgung kontaktieren~
• Wenn du sehr an Datawhale interessiert bist und ein neues Projekt starten möchtest, folge bitte dem Datawhale-Open-Source-Projekt-Leitfaden~

🙏 Dank an jeden Beitragenden

• 散步-Projektleiter (Datawhale-Mitglied)
• Fang Ke-Betreuer (Datawhale-Mitglied, Tsinghua-Universität)
• Yerim Kang（Praxisprojektteil-Tsinghua-Universität）
• Zhao Zhilin（Praxisprojektteil-Tsinghua-Universität）
• Li Yixuan（Seiten-Kunst-Design-Tsinghua-Universität）
• Alle Kameraden der AI Vibe Coding 101-Beta-Testgruppe, die Vorschläge und Erfahrungen eingebracht haben

Besonderer Dank

• Danke an @Sm1les für die Hilfe und Unterstützung bei diesem Projekt
• Danke an alle Entwickler, die zu diesem Projekt beigetragen haben ❤️

📧 Kontaktiere uns

Bei Fragen, Vorschlägen, Beschwerden oder zum Austausch scanne bitte den untenstehenden QR-Code

Scan den untenstehenden QR-Code, um dem offiziellen Konto zu folgen: Datawhale

📄 LIZENZ

Dieses Werk ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz

Star History