test-repo/docs-readme/fr-FR/README.md

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

Easy-Vibe: Learn Vibe Coding from 0 to 1

De zéro, apprentissage par projet, construire votre premier produit IA

📌 Commencer la lecture en ligne (Start Reading Online)

Lire en ligne · Carte d'apprentissage · Communauté

🚀 Présentation du Projet

Quand vous essayez d'écrire du code avec l'IA, vous rencontrez des erreurs constantes, vous voulez souvent abandonner et il n'est pas clair comment mettre réellement vos programmes en ligne 😢.

Ce tutoriel est spécialement conçu pour vous mener de 0 à 1, maîtrisant progressivement les techniques de Vibe Coding :

• Étape 0 : Introduction rapide par des mini-jeux pour acquérir les compétences de Vibe Coding
• Étape 1 : Du point de vue d'un product manager, compétences de Vibe Coding et compréhension des métiers, implémentation d'un prototype d'application web
• Étape 2 : Apprendre le développement frontend/backend et les capacités d'IA liées aux techniques de Vibe Coding, compléter une application complète
• Étape 3 : Maîtriser la construction d'applications complexes multiplateformes, vers des applications de niveau production

Nous croyons qu'en maîtrisant Vibe Coding et en le combinant avec un entraînement systématique, une seule personne peut devenir un développeur combinant développement frontend, développement backend, intégration de capacités d'IA et conception de produits.

Ce projet s'adresse principalement à trois types d'apprenants :

• Débutants (gens ordinaires / produit et opérations) : Aider les apprenants non techniques à comprendre les concepts clés et à compléter leur premier prototype de produit
• Développeurs de niveau débutant-intermédiaire (étudiants et développeurs avec une certaine base) : Maîtriser les connaissances de Vibe Coding frontend/backend et les capacités d'IA
• Développeurs avancés (entreprises et startups, open source et développeurs indépendants) : Techniques de développement avancées, développement multiplateforme

📖 Navigation du Contenu

Annexe Générale

Dictionnaire des capacités IA : concepts centraux IA courants, termes et explications de scénarios

0. Maternelle

Chapitre	Contenu clé	Statut
Préface : Carte d'apprentissage	Guide général du parcours d'apprentissage	✅
Débutant 1 : L'ère de l'IA, savoir parler c'est savoir programmer	Découvrir pour la première fois les capacités de programmation IA à travers des cas comme Snake	✅

1. Product Manager IA

Chapitre	Contenu clé	Statut
Débutant 2 : Découvrir les outils IDE IA	Apprendre à utiliser l'IDE, créer des mini-jeux localement	✅
Débutant 3 : Créer un prototype soi-même	Analyse des besoins, génération d'une seule page par l'IA, jusqu'à générer des prototypes de produits multipages	✅
Débutant 4 : Ajouter des capacités IA au prototype	Apprendre à connecter des capacités IA courantes (texte, image, vidéo)	✅
Débutant 5 : Projet complet pratique	Simuler des scénarios réels, accepter les feedbacks des utilisateurs pour itérer, compléter le projet	✅
Projet final : Créer un prototype complet d'application web et le présenter	Implémenter complètement l'application, présenter les effets de l'application	✅

Annexes

Chapitre	Contenu clé	Statut
Annexe A : Complément de pensée produit	Cadres de pensée nécessaires pour créer un produit de zéro à un	✅
Annexe B : Erreurs courantes et solutions	Erreurs courantes en Vibe Coding et méthodes de dépannage	✅

2. Ingénieur de Développement Niveau Débutant-Intermédiaire

Partie Frontend

Chapitre	Contenu clé	Statut
Frontend 0 : Utiliser lovart pour générer des assets	Utiliser lovart pour générer en lot des assets visuels comme des personnages et des scènes, fournissant une base d'assets pour la conception UI et le développement frontend	🚧
Frontend 1 : Introduction à Figma et MasterGo	Utiliser des outils de conception pour organiser l'architecture de l'information et la structure des pages, préparant la base pour l'implémentation frontend	🚧
Frontend 2 : Construire la première application moderne - Design UI	Compléter une interface basée sur des composants à partir de maquettes, réaliser le premier parcours du design au code	🚧
Frontend 3 : Référence des spécifications de design UI et design UI multiproduit	Étendre des interfaces multiproduits autour d'une visuelle principale unifiée, pratiquer les capacités de design systématique	🚧
Frontend 4 : Créons ensemble les portraits de Poudlard	Créer une application frontend avec capacités IA intégrées de 0 à 1, connecter conception et développement	✅

Partie Backend et Full Stack

Chapitre	Contenu clé	Statut
Backend 1 : Qu'est-ce qu'une API	Comprendre les interfaces HTTP et les modèles requête-réponse, se préparer à l'intégration backend et à la coordination	✅
Backend 2 : Des bases de données à Supabase : Implémenter des bases de données et des APIs sur Supabase, connecter des modèles de données aux pages frontend	✅
Backend 3 : LLM assistant l'écriture de code d'interface et de documentation : Utiliser le LLM pour aider à générer de la documentation et du code pour les interfaces et bases de données, réaliser un backend lisible et testable	🚧
Backend 4 : Flux de travail Git : Gérer le code dans un flux de travail Git, effectuer le contrôle de version et la collaboration	✅
Backend 5 : Déploiement Zeabur : Déployer l'application sur Zeabur pour la mettre en ligne	✅
Backend 6 : Outils de développement CLI modernes : Utiliser des outils de programmation IA de type CLI pour accélérer le développement et le débogage, former un flux d'ingénierie personnel	✅
Backend 7 : Comment intégrer des systèmes de paiement comme Stripe : Connecter des systèmes de paiement, compléter le flux de paiement et le processus de base de règlement	🚧
Projet final 1 : Construire la première application moderne - Application full stack : Intégrer frontend, backend et modules de paiement, compléter une application web full stack prête pour la production	🚧
Projet final 2 : Bibliothèque de composants frontend moderne + Trae pratique : Utiliser une bibliothèque de composants frontend moderne et Trae, compléter indépendamment un produit avec inscription/connexion et support de paiement	🚧

Annexe des Capacités IA

Chapitre	Contenu clé	Statut
IA 1 : Introduction à Dify et intégration de base de connaissances : Utiliser Dify Workflow et le RAG de base pour construire des produits de type outils, créant un exemple pour les futures mises à jour d'applications	✅
IA 2 : Apprendre à consulter le dictionnaire IA et intégrer des APIs multimodales : Apprendre à chercher des modèles et APIs appropriés, intégrer des capacités multimodales comme le texte et l'image dans des produits	🚧

3. Ingénieur de Développement Avancé

Chapitre	Contenu clé	Statut
Avancé 1 : MCP et ClaudeCode Skills : Étendre les capacités de l'IDE via MCP et Skills, connecter des services externes comme outils	🚧
Avancé 2 : Comment faire fonctionner Coding Tools longtemps : Concevoir et configurer des tâches à longue exécution, rendre Coding Tools plus stable et fiable	🚧
Avancé 3 : Développement multiplateforme : Comment construire des mini-programmes WeChat : Comprendre l'écosystème des mini-programmes WeChat, compléter un mini-programme frontend du modèle officiel au lancement	✅
Avancé 4 : Développement multiplateforme : Comment construire des mini-programmes WeChat - Y compris backend : Intégrer une base de données et une logique backend dans les mini-programmes, réaliser un cycle d'activité complet	🚧
Avancé 5 : Développement multiplateforme : Comment construire des applications Android : Utiliser des outils comme Expo, compléter le développement d'applications Android intégrant Web natif	🚧
Avancé 6 : Développement multiplateforme : Comment construire des applications iOS : Utiliser des outils comme Expo, compléter le développement d'applications iOS intégrant Web natif	🚧
Avancé 7 : Comment construire son propre site web personnel et blog académique : Du choix, de la construction au déploiement, construire une homepage en ligne à long terme présentant des projets personnels et des réalisations académiques	🚧

Annexe des Capacités IA

Chapitre	Contenu clé	Statut
IA Avancée 1 : Qu'est-ce que RAG et comment il fonctionne : Comprendre systématiquement les principes du RAG et les architectures courantes, fournir une base de récupération de connaissances pour des applications complexes	✅
IA Avancée 2 : RAG intermédiaire-avancé et orchestration de workflows : Exemple avec LangGraph : Utiliser des outils comme LangGraph pour concevoir des workflows multi-étapes et des systèmes RAG intermédiaire-avancés	🚧

🛠️ Comment Apprendre

• Selon vos capacités personnelles, lisez et pratiquez sélectivement les chapitres pertinents, si vous avez des questions posez-les dans des Issues.

💻 Démarrer Ce Cours Localement

Méthode Moderne

Dans la boîte de dialogue de l'IDE IA (vscode, cursor, trae, etc.), entrez le prompt suivant pour démarrer ce cours :

S'il vous plaît aidez-moi à exécuter le service local de ce projet

Ancienne Méthode

1. npm install
2. npm run dev
3. Ouvrez votre navigateur et visitez http://localhost:3000 pour voir.

🤝 Contribuer

• Si vous découvrez des problèmes, ou pensez qu'il y a des moyens d'améliorer ce projet, vous pouvez soumettre une Issue pour donner un feedback. Si après soumission personne ne répond, vous pouvez contacter l'équipe des soignants pour un suivi~
• Si vous souhaitez contribuer à ce projet, vous pouvez soumettre une Pull Request, si après soumission personne ne répond, vous pouvez contacter l'équipe des soignants pour un suivi~
• Si vous êtes très intéressé par Datawhale et souhaitez lancer un nouveau projet, veuillez suivre le guide de projets open source Datawhale~

🙏 Merci à Chaque Contributeur

• 散步-Chef de projet (Membre Datawhale)
• Fang Ke-Professeur guide (Membre Datawhale, Université Tsinghua)
• Yerim Kang（Partie projets pratiques-Université Tsinghua）
• Zhao Zhilin（Partie projets pratiques-Université Tsinghua）
• Li Yixuan（Design artistique de page-Université Tsinghua）
• Tous les camarades du groupe bêta AI Vibe Coding 101 qui ont fourni des suggestions et de l'expérience

Remerciements Spéciaux

• Merci à @Sm1les pour son aide et son soutien à ce projet
• Merci à tous les développeurs qui ont contribué à ce projet ❤️

📧 Contactez-nous

Si vous avez des questions, des suggestions, des plaintes, ou souhaitez échanger, veuillez scanner le code QR ci-dessous

Scannez le code QR ci-dessous pour suivre le compte officiel : Datawhale

📄 LICENCE

Ce travail est sous licence Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Star History