feat: add comprehensive backend topics and fix build issues
## 新增内容 ### 附录文档扩展 - 扩展前端项目架构文档 (frontend-project-architecture.md) - 扩展后端项目架构文档 (backend-project-architecture.md) - 扩展数据治理文档 (data-governance.md) - 扩展数据可视化文档 (data-visualization.md) - 扩展分布式系统文档 (distributed-systems.md) - 扩展高可用文档 (high-availability.md) - 扩展单体到微服务文档 (monolith-to-microservices.md) - 扩展系统设计方法论文档 (system-design-methodology.md) - 扩展 Docker 容器文档 (docker-containers.md) - 扩展 Kubernetes 文档 (kubernetes.md) - 扩展 Linux 基础文档 (linux-basics.md) - 扩展神经网络文档 (neural-networks.md) ### 新增交互式组件 - 数据治理组件: DataQualityDemo, DataGovernanceFrameworkDemo, DataLineageDemo - 数据可视化组件: ChartTypeSelectorDemo, DashboardLayoutDemo - 分布式系统组件: CAPTheoremDemo, ConsistencyModelsDemo, DistributedChallengesDemo - 高可用组件: AvailabilityCalculatorDemo, FailoverStrategyDemo - 系统设计组件: SystemDesignStepsDemo, CapacityEstimationDemo - Docker 容器组件: DockerArchitectureDemo, DockerLifecycleDemo - Kubernetes 组件: K8sArchitectureDemo, K8sWorkloadsDemo - Linux 基础组件: LinuxFileSystemDemo, LinuxCommandDemo, LinuxPermissionsDemo - 神经网络组件: NeuronDemo, NetworkLayersDemo, NetworkArchitectureDemo - 单体到微服务组件: ArchEvolutionDemo - 项目架构组件: ProjectArchitectureComparisonDemo - 附录导航组件: AppendixFlowMap ### 英文版重构 - 将 en-us 目录重命名为 en - 更新相关配置和组件中的语言代码 ## Bug 修复 - 修复 index.js 中重复的组件导入语句导致的 build 失败 - 恢复被注释的 InvertedIndexDemo 和 SearchRelevanceDemo 导入 - 修复 HomeFeatures.vue 中 en-us 与 config.mjs 中 en 不一致导致的语言切换问题 ## 其他改进 - 添加构建脚本 (scripts/build.mjs) - 更新依赖版本
This commit is contained in:
sanbuphy
+35
-192
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _من الصفر، تعلم قائم على المشاريع، بناء أول منتج ذكاء اصطناعي لك_
|
||||
# Easy-Vibe : تعلم Vibe Coding من 0 إلى 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">ابدأ القراءة أونلاين (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">دليل تفاعلي</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">اقرأ أونلاين</a> ·
|
||||
<a href="#-تنقل-المحتوى">خريطة التعلم</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت</a> ·
|
||||
<a href="#-التنقل">خريطة التعلم</a> ·
|
||||
<a href="#contact">المجتمع</a>
|
||||
</p>
|
||||
|
||||
@@ -39,196 +37,41 @@
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table align="center" dir="rtl">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>خريطة تعلم حصرية للمبتدئين</strong>
|
||||
<br>
|
||||
<sub>توجيه من الصفر، تخطيط مسار واضح، وداعًا لـ "تعلم وانسى"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>دليل مصور خطوة بخطوة</strong>
|
||||
<br>
|
||||
<sub>شرح مفصل بالصور، كأن لديك معلمًا خاصًا بجانبك</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 🚀 مقدمة المشروع
|
||||
في عصر الذكاء الاصطناعي، الأشخاص الذين يحولون الأفكار إلى منتجات هم غالبًا ليسوا الأقوى تقنيًا، بل هم الذين يتخذون الخطوة الأولى. **ولد Easy-Vibe لهذا الغرض.** سنأخذ بيدك من كتابة أول سطر كود إلى فهم منطق الواجهة الأمامية والخلفية، وأخيرًا إطلاق منتجك على الإنترنت.
|
||||
|
||||
عندما تحاول كتابة الكود بالذكاء الاصطناعي، وتواجه أخطاء مستمرة، وتريد الاستسلام غالبًا، ومن غير الواضح كيفية نشر برامجك فعليًا على الإنترنت 😢
|
||||
| المرحلة | المهارات الأساسية | المخرجات |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **المرحلة 1** | مقدمة في برمجة الذكاء الاصطناعي، فكر المنتج | ألعاب صغيرة تفاعلية، نماذج أولية (مبتدئ و PM) |
|
||||
| **المرحلة 2** | تطوير Full-stack، تكامل الذكاء الاصطناعي، قواعد البيانات | تطبيق ذكاء اصطناعي متكامل |
|
||||
| **المرحلة 3** | مهارات Claude Code المتقدمة، تطبيقات الموبايل | تطبيقات متعددة المنصات بمستوى الإنتاج |
|
||||
|
||||
هذا البرنامج التعليمي مصمم خصيصًا ليأخذك من 0 إلى 1، وإتقان تقنيات Vibe Coding تدريجيًا:
|
||||
|
||||
- **المرحلة 1**: **من الألعاب المصغرة إلى نماذج الويب**، إتقان أساسيات برمجة الذكاء الاصطناعي وتفكير المنتج
|
||||
- **المرحلة 2**: تعلم **تطوير الواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي** المتعلقة بتقنيات Vibe Coding، إكمال تطبيق كامل
|
||||
- **المرحلة 3**: إتقان بناء **التطبيقات المعقدة متعددة المنصات**، نحو تطبيقات مستوى الإنتاج
|
||||
|
||||
نؤمن بأن من خلال إتقان Vibe Coding ودمجه مع التدريب المنهجي، يمكن لشخص واحد أن يصبح مطورًا يجمع بين تطوير الواجهة الأمامية، وتطوير الواجهة الخلفية، ودمج قدرات الذكاء الاصطناعي، وتصميم المنتجات.
|
||||
|
||||
> **هذا المشروع موجه بشكل رئيسي إلى ثلاثة أنواع من المتعلمين:**
|
||||
>
|
||||
> - **المبتدئون (أشخاص عاديون / المنتج والعمليات)**: مساعدة المتعلمين غير التقنيين على فهم المفاهيم الرئيسية وإكمال أول نموذج أولي للمنتج
|
||||
> - **المطورون مستوى المبتدئ-المتوسط (الطلاب والمطورون مع أساس معين)**: إتقان معرفة Vibe Coding للواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي
|
||||
> - **المطورون المتقدمون (الشركات والشركات الناشئة، مفتوحة المصدر والمطورون المستقلون)**: تقنيات التطوير المتقدمة، التطوير متعدد المنصات
|
||||
|
||||
### 📖 تنقل المحتوى
|
||||
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### الملحق العام
|
||||
|
||||
[قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية الشائعة للذكاء الاصطناعي والمصطلحات والشروحات السيناريوية](docs/appendix/ai-capability-dictionary.md)
|
||||
|
||||
### 1. مدخل للمبتدئين ونموذج المنتج
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------- | :----- |
|
||||
| [المقدمة: خريطة التعلم](docs/stage-0/0.1-learning-map/index.md) | دليل مسار التعلم الشامل | ✅ |
|
||||
| [المبتدئ 1: عصر الذكاء الاصطناعي، إذا كنت تستطيع التحدث يمكنك البرمجة](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | تجربة قدرات البرمجة بالذكاء الاصطناعي لأول مرة من خلال حالات مثل Snake | ✅ |
|
||||
| [المبتدئ 2: معرفة أدوات IDE الذكاء الاصطناعي](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | تعلم استخدام IDE، إنشاء ألعاب مصغرة محليًا | ✅ |
|
||||
| [المبتدئ 3: بناء نموذج أولي بنفسك](docs/stage-1/1.2-building-prototype/index.md) | تحليل المتطلبات، توليد صفحة واحدة بالذكاء الاصطناعي، حتى توليد نماذج منتجات متعددة الصفحات | ✅ |
|
||||
| [المبتدئ 4: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | تعلم توصيل القدرات الشائعة للذكاء الاصطناعي (النص، الصورة، الفيديو) | ✅ |
|
||||
| [المبتدئ 5: مشروع كامل عملي](docs/stage-1/1.4-complete-project-practice/index.md) | محاكاة سيناريوهات حقيقية، قبول ملاحظات المستخدمين للتحسين، إكمال المشروع | ✅ |
|
||||
| [المشروع الكبير: إنشاء نموذج أولي كامل لتطبيق الويب وعرضه](docs/stage-1/1.5-final-project/index.md) | تنفيذ التطبيق بالكامل، عرض آثار التطبيق | ✅ |
|
||||
|
||||
#### الملاحق: التفكير التجاري
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------- | :----- |
|
||||
| [الملحق A: التفكير في المنتج وتصميم الحل](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | أطر التفكير اللازمة لبناء منتج من الصفر إلى واحد | ✅ |
|
||||
| [الملحق B: مرجع سيناريوهات تطبيق الذكاء الاصطناعي في الصناعة (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | فهم تطبيقات الذكاء الاصطناعي في مختلف الصناعات | ✅ |
|
||||
| [الملحق C: مرجع إلهام سيناريوهات استهلاك الذكاء الاصطناعي (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | استكشاف تطبيقات الذكاء الاصطناعي في منتجات المستهلكين | ✅ |
|
||||
|
||||
#### الملاحق: الحلول التقنية
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------- | :----- |
|
||||
| [الملحق D: ماذا تفعل عند مواجهة أخطاء أثناء كتابة الكود](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | الأخطاء الشائعة في Vibe Coding وطرق استكشاف الأخطاء | ✅ |
|
||||
| [الملحق E: مقارنة 7 أدوات برمجة الذكاء الاصطناعي](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | مقارنة واختبار منصات برمجة الذكاء الاصطناعي الرئيسية | ✅ |
|
||||
| [الملحق F: تصميم مواقع الويب باستخدام وكلاء التصميم والبرمجة](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | تعلم كيفية استخدام وكلاء الذكاء الاصطناعي بشكل تعاوني | ✅ |
|
||||
|
||||
### 2. مهندس تطوير مستوى المبتدئ-المتوسط
|
||||
|
||||
#### قسم الواجهة الأمامية
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | :----- |
|
||||
| [الواجهة الأمامية 0: استخدام lovart لتوليد الأصول](docs/stage-2/frontend/2.0-lovart-assets/) | استخدام lovart لتوليد الأصول المرئية مثل الشخصيات والمشاهد دفعة واحدة، توفير أساس الأصول لتصميم الواجهة وتطوير الواجهة الأمامية | 🚧 |
|
||||
| [الواجهة الأمامية 1: مقدمة إلى Figma و MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | استخدام أدوات التصميم لتنظيم هيكل المعلومات وهيكل الصفحة، وإعداد الأساس لتنفيذ الواجهة الأمامية | 🚧 |
|
||||
| [الواجهة الأمامية 2: بناء أول تطبيق حديث - تصميم الواجهة](docs/stage-2/frontend/2.2-ui-design/) | إكمال واجهة قائمة على المكونات بناءً على التصاميم، تحقيق المسار الأول من التصميم إلى الكود | 🚧 |
|
||||
| [الواجهة الأمامية 3: مرجع مواصفات تصميم الواجهة وتصميم واجهة متعدد المنتجات](docs/stage-2/frontend/2.3-multi-product-ui/) | توسيع واجهات متعددة المنتجات حول بصري رئيسي موحد، ممارسة قدرات التصميم المنهجي | 🚧 |
|
||||
| [الواجهة الأمامية 4: لنصنع صور هوجورتس معًا](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | إنشاء تطبيق واجهة أمامية بقدرات ذكاء اصطناعي مدمجة من 0 إلى 1، ربط التصميم والتطوير | ✅ |
|
||||
|
||||
#### قسم الواجهة الخلفية والكامل
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | :----- |
|
||||
| [الواجهة الخلفية 1: ما هي API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | فهم واجهات HTTP ونماذج الطلب-الاستجابة، الاستعداد للتكامل الخلفي والتنسيق | ✅ |
|
||||
| [الواجهة الخلفية 2: من قواعد البيانات إلى Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : تنفيذ قواعد البيانات وواجهات API على Supabase، ربط نماذج البيانات بصفحات الواجهة الأمامية | ✅ |
|
||||
| [الواجهة الخلفية 3: LLM المساعدة في كتابة كود الواجهة والتوثيق](docs/stage-2/backend/2.3-ai-interface-code/) : استخدام LLM للمساعدة في توليد التوثيق والكود للواجهات وقواعد البيانات، تحقيق خلفي قابل للقراءة والاختبار | 🚧 |
|
||||
| [الواجهة الخلفية 4: سير عمل Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : إدارة الكود في سير عمل Git، إجراء التحكم في الإصدار والتعاون | ✅ |
|
||||
| [الواجهة الخلفية 5: نشر Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : نشر التطبيق على Zeabur لجعله أونلاين | ✅ |
|
||||
| [الواجهة الخلفية 6: أدوات تطوير CLI حديثة](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : استخدام أدوات برمجة الذكاء الاصطناعي من نوع CLI لتسريع التطوير وتصحيح الأخطاء، تشكيل سير عمل هندسي شخصي | ✅ |
|
||||
| [الواجهة الخلفية 7: كيفية دمج أنظمة الدفع مثل Stripe](docs/stage-2/backend/2.7-stripe-payment/) : توصيل أنظمة الدفع، إكمال تدفق الدفع وعملية التسوية الأساسية | 🚧 |
|
||||
| [المشروع الكبير 1: بناء أول تطبيق حديث - تطبيق كامل](docs/stage-2/assignments/2.1-fullstack-app/) : دمج الواجهة الأمامية والواجهة الخلفية ووحدات الدفع، إكمال تطبيق ويب كامل جاهز للإنتاج | 🚧 |
|
||||
| [المشروع الكبير 2: مكتبة مكونات الواجهة الأمامية الحديثة + Trae عملية](docs/stage-2/assignments/2.2-modern-frontend-trae/) : استخدام مكتبة مكونات الواجهة الأمامية الحديثة و Trae، إكمال منتج بشكل مستقل مع تسجيل/دعم الدفع | 🚧 |
|
||||
|
||||
#### ملحق قدرات الذكاء الاصطناعي
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------- | :----- |
|
||||
| [الذكاء الاصطناعي 1: مقدمة إلى Dify ودمج قاعدة المعرفة](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : استخدام Dify Workflow و RAG الأساسي لبناء منتجات نوع الأدوات، إنشاء مثال لترقيات التطبيقات المستقبلية | ✅ |
|
||||
| [الذكاء الاصطناعي 2: تعلم البحث في قاموس الذكاء الاصطناعي ودمج واجهات API متعددة الوسائط](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : تعلم البحث عن نماذج وواجهات API مناسبة، دمج القدرات متعددة الوسائط مثل النص والصورة في المنتجات | 🚧 |
|
||||
|
||||
### 3. مهندس تطوير متقدم
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :----- |
|
||||
| [المتقدم 1: MCP ومهارات ClaudeCode](docs/stage-3/core-skills/3.1-mcp-claude-code-skills/) : توسيع قدرات IDE من خلال MCP والمهارات، توصيل الخدمات الخارجية كأدوات | 🚧 |
|
||||
| [المتقدم 2: كيفية جعل Coding Tools تعمل لفترة طويلة](docs/stage-3/core-skills/3.2-long-running-tasks/) : تصميم وتكوين المهام طويلة التشغيل، جعل Coding Tools أكثر استقرارًا وموثوقية | 🚧 |
|
||||
| [المتقدم 3: التطوير متعدد المنصات: كيفية بناء برامج WeChat المصغرة](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : فهم نظام البرامج المصغرة WeChat، إكمال برنامج مصغر للواجهة الأمامية من القالب الرسمي إلى الإطلاق | ✅ |
|
||||
| [المتقدم 4: التطوير متعدد المنصات: كيفية بناء برامج WeChat المصغرة - بما في ذلك الخلفية](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : دمج قاعدة البيانات ومنطق الواجهة الخلفية في البرامج المصغرة، تحقيق دورة نشاط كاملة | 🚧 |
|
||||
| [المتقدم 5: التطوير متعدد المنصات: كيفية بناء تطبيقات Android](docs/stage-3/cross-platform/3.5-android-app/) : استخدام أدوات مثل Expo، إكمال تطوير تطبيقات Android المتكاملة للويب/الأصلي | 🚧 |
|
||||
| [المتقدم 6: التطوير متعدد المنصات: كيفية بناء تطبيقات iOS](docs/stage-3/cross-platform/3.6-ios-app/) : استخدام أدوات مثل Expo، إكمال تطوير تطبيقات iOS المتكاملة للويب/الأصلي | 🚧 |
|
||||
| [المتقدم 7: كيفية بناء موقعك الشخصي ومブログ الأكاديمي](docs/stage-3/personal-brand/3.7-personal-website-blog/) : من الاختيار، البناء إلى النشر، بناء صفحة رئيسية أونلاين طويلة الأجل تعرض المشاريع الشخصية والنتائج الأكاديمية | 🚧 |
|
||||
|
||||
#### ملحق قدرات الذكاء الاصطناعي
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------- | :----- |
|
||||
| [الذكاء الاصطناعي المتقدم 1: ما هو RAG وكيف يعمل](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : الفهم المنهجي لمبادئ RAG والهياكل الشائعة، توفير أساس استرجاع المعرفة للتطبيقات المعقدة | ✅ |
|
||||
| [الذكاء الاصطناعي المتقدم 2: RAG متوسط-متقدم وتنظيف سير العمل: مثال LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : استخدام أدوات مثل LangGraph لتصميم سير العمل متعدد الخطوات وأنظمة RAG متوسطة-متقدمة | 🚧 |
|
||||
|
||||
## 🛠️ كيفية التعلم
|
||||
|
||||
- وفقًا لقدراتك الشخصية، اقرأ ومارس الفصول ذات الصلة بشكل انتقائي، إذا كان لديك أسئلة اطرحها في Issues.
|
||||
|
||||
## 💻 بدء هذا الدرس محليًا
|
||||
|
||||
### الطريقة الحديثة
|
||||
|
||||
في مربع حوار IDE الذكاء الاصطناعي (vscode، cursor، trae، etc.)، أدخل الموجه التالي لبدء هذا الدرس:
|
||||
|
||||
```
|
||||
الرجاء مساعدتي في تشغيل الخدمة المحلية لهذا المشروع
|
||||
```
|
||||
|
||||
### الطريقة القديمة
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. افتح متصفحك وزر `http://localhost:3000` للعرض.
|
||||
|
||||
## 🤝 المساهمة
|
||||
|
||||
- إذا اكتشفت مشاكل، أو تعتقد أن هناك طرقًا لتحسين هذا المشروع، يمكنك تقديم Issue لإعطاء ملاحظات. إذا لم يرد أحد بعد التقديم، يمكنك الاتصال [فريق الرعاية](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) للمتابعة~
|
||||
- إذا كنت ترغب في المساهمة في هذا المشروع، يمكنك تقديم Pull Request، إذا لم يرد أحد بعد التقديم، يمكنك الاتصال [فريق الرعاية](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) للمتابعة~
|
||||
- إذا كنت مهتمًا جدًا بـ Datawhale وترغب في بدء مشروع جديد، يرجى اتباع [دليل المشاريع المفتوحة المصدر Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||
|
||||
## 🙏 شكرًا لكل المساهمين
|
||||
|
||||
- [散步-قائد المشروع](https://github.com/sanbuphy) (عضو Datawhale)
|
||||
- Fang Ke-المعلم Tutor (عضو Datawhale، جامعة تسينغهوا)
|
||||
- [Yerim Kang](https://github.com/yerim25)（جزء المشاريع العملية-جامعة تسينغهوا）
|
||||
- Zhao Zhilin（جزء المشاريع العملية-جامعة تسينغهوا）
|
||||
- [Li Yixuan](https://yixuan20.github.io/)（تصميم الفن الصفحة-جامعة تسينغهوا）
|
||||
- جميع الزملاء في مجموعة اختبار بيتا AI Vibe Coding 101 الذين قدموا اقتراحات وخبرة
|
||||
|
||||
### شكر خاص
|
||||
|
||||
- شكرًا لـ [@Sm1les](https://github.com/Sm1les) على مساعدتهم ودعمهم لهذا المشروع
|
||||
- شكرًا لجميع المطورين الذين ساهموا في هذا المشروع ❤️
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 اتصل بنا</span>
|
||||
|
||||
<div align=center>
|
||||
<p>إذا كان لديك أسئلة أو اقتراحات أو شكاوى، أو ترغب في التواصل، يرجى مسح رمز QR أدناه</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
|
||||
<pامسح رمز QR أدناه لمتابعة الحساب الرسمي: Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
|
||||
</div>
|
||||
|
||||
## 📄 الترخيص
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="المشاع الإبداعي"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
هذا العمل مرخص تحت
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
المشاع الإبداعي Attribution - غير تجاري - المشاركة بالمثل 4.0 الدولي
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
*(راجع التفاصيل في الوثائق عبر الإنترنت أو المستودع الرئيسي)*
|
||||
|
||||
+39
-187
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _Von Null, projektbasiertes Lernen, dein erstes KI-Produkt bauen_
|
||||
# Easy-Vibe : Lerne Vibe Coding von 0 auf 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen starten (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Interaktives Tutorial</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> ·
|
||||
<a href="#-inhaltsnavigation">Lernkarte</a> ·
|
||||
<a href="#-navigation">Lernkarte</a> ·
|
||||
<a href="#contact">Community</a>
|
||||
</p>
|
||||
|
||||
@@ -39,195 +37,49 @@
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>Exklusive Lernkarte für Anfänger</strong>
|
||||
<br>
|
||||
<sub>Anleitung ohne Vorkenntnisse, klare Pfadplanung, Schluss mit "Lernen und Vergessen"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>Schritt-für-Schritt-Grafik-Tutorial</strong>
|
||||
<br>
|
||||
<sub>Detaillierte Erklärungen, als hätte man einen Privatlehrer an der Seite</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 🚀 Projektvorstellung
|
||||
Im Zeitalter der KI sind diejenigen, die Ideen in Produkte verwandeln, oft nicht die technisch stärksten, sondern diejenigen, die den ersten Schritt tun. **Easy-Vibe wurde dafür geschaffen.** Wir nehmen dich an die Hand, vom Schreiben deiner ersten Zeile Code bis zum Verständnis der Front-End- und Back-End-Logik und schließlich zum Start deines Produkts.
|
||||
|
||||
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 😢.
|
||||
- **Zielgruppe**: Anfänger, Produktmanager, Front-End / Back-End / Full-Stack Entwickler
|
||||
- **Themen**: KI-Programmierung, Full-Stack-Webentwicklung, KI-Agenten, Workflows und RAG-Systeme
|
||||
|
||||
Dieses Tutorial ist speziell dafür konzipiert, dich von 0 auf 1 zu bringen und Vibe Coding-Techniken schrittweise zu meistern:
|
||||
---
|
||||
|
||||
- **Stufe 1**: **Von Mini-Spielen zu Web-Prototypen**, Beherrschung von KI-Programmiergrundlagen und Produktdenken
|
||||
- **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
|
||||
Easy-Vibe führt dich in drei Phasen von 0 auf 1:
|
||||
|
||||
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.
|
||||
| Phase | Kernkompetenzen | Ergebnis |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **Phase 1** | KI-Programmierung, Produktdenken, Prototyping | Interaktive Minispiele, Web-Prototypen (Anfänger & PM) |
|
||||
| **Phase 2** | Full-Stack-Entwicklung, KI-Integration, Datenbanken | Vollständige Full-Stack-KI-Anwendung |
|
||||
| **Phase 3** | Fortgeschrittener Claude Code, Mobile & Mini-Programme | Multi-Plattform-Anwendungen auf Produktionsniveau |
|
||||
| **Anhang** | Verständnis grundlegender Konzepte von Computer & KI | 9 Wissensbereiche, 80+ interaktive Themen |
|
||||
|
||||
> **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
|
||||
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### Gesamtanhang
|
||||
|
||||
[KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
|
||||
### 1. Anfängereinstieg und Produktprototyp
|
||||
|
||||
| Kapitel | Schlüsselinhalt | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Vorwort: Lernkarte](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Gesamtführung durch den Lernpfad | ✅ |
|
||||
| [Anfänger 1: KI-Zeitalter, wenn du sprechen kannst, kannst du programmieren](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Erste Erfahrung mit KI-Programmierfähigkeiten durch Fälle wie Snake | ✅ |
|
||||
| [Anfänger 2: KI-IDE-Tools kennenlernen](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE-Nutzung lernen, lokal Mini-Spiele erstellen | ✅ |
|
||||
| [Anfänger 3: Einen Prototyp selbst bauen](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Anforderungsanalyse, KI-generierte Einzelseite, bis zu Generierung von Mehrseiten-Produktprototypen | ✅ |
|
||||
| [Anfänger 4: KI-Fähigkeiten zum Prototyp hinzufügen](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen | ✅ |
|
||||
| [Anfänger 5: Komplettes Projektpraxis](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Reale Szenarien simulieren, Benutzerfeedback zur Iteration akzeptieren, Projekt completed | ✅ |
|
||||
| [Großes Projekt: Einen kompletten Web-App-Prototyp erstellen und präsentieren](docs/zh-cn/stage-1/1.5-final-project/index.md) | Anwendung vollständig implementieren, Anwendungseffekte präsentieren | ✅ |
|
||||
|
||||
#### Anhänge: Geschäftsdenken
|
||||
|
||||
| Kapitel | Schlüsselinhalt | Status |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | :----- |
|
||||
| [Anhang A: Produktdenken und Lösungsdesign](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Denkrahmen, die für die Erstellung eines Produkts von Null auf Eins erforderlich sind | ✅ |
|
||||
| [Anhang B: Referenz für KI-Branchenanwendungsszenarien (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Verstehen der KI-Anwendungen in verschiedenen Branchen | ✅ |
|
||||
| [Anhang C: Referenz für KI-Verbrauchsszenarien-Inspiration (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Erkunden der KI-Anwendungen in Verbraucherprodukten | ✅ |
|
||||
|
||||
#### Anhänge: Technische Lösungen
|
||||
|
||||
| Kapitel | Schlüsselinhalt | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :----- |
|
||||
| [Anhang D: Was Tun bei Fehlern beim Schreiben von Code](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Häufige Fehler in Vibe Coding und Methoden zur Fehlerbehebung | ✅ |
|
||||
| [Anhang E: Vergleich von 7 KI-Programmierungstools](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Vergleich und Testen der wichtigsten KI-Programmierplattformen | ✅ |
|
||||
| [Anhang F: Websites mit Design- und Programmieragenten Entwerfen](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Lernen der kollaborativen Nutzung von KI-Agenten | ✅ |
|
||||
|
||||
### 2. Entwicklungsingenieur auf Anfänger-Fortgeschrittenen-Niveau
|
||||
|
||||
#### Frontend-Teil
|
||||
|
||||
| Kapitel | Schlüsselinhalt | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----- |
|
||||
| [Frontend 0: lovart für Asset-Generierung verwenden](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | 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](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Design-Tools zur Organisation der Informationsarchitektur und Seitenstruktur verwenden, Basis für Frontend-Implementierung schaffen | 🚧 |
|
||||
| [Frontend 2: Erste moderne Anwendung erstellen - UI-Design](docs/zh-cn/stage-2/frontend/2.2-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](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Multi-Produkt-Schnittstellen um ein einheitliches Hauptvisuelles erweitern, systematische Designfähigkeiten üben | 🚧 |
|
||||
| [Frontend 4: Gemeinsam Hogwarts-Porträts erstellen](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 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](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP-Schnittstellen und Request-Response-Modelle verstehen, Vorbereitung auf Backend-Integration und Abstimmung | ✅ |
|
||||
| [Backend 2: Von Datenbanken zu Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Datenbanken und APIs auf Supabase implementieren, Datenmodelle mit Frontend-Seiten verbinden | ✅ |
|
||||
| [Backend 3: LLM-unterstützte Schnittstellen- und Dokumentationscodierung](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) : 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](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Code in Git-Workflow verwalten, Versionskontrolle und Zusammenarbeit durchführen | ✅ |
|
||||
| [Backend 5: Zeabur-Bereitstellung](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Anwendung auf Zeabur bereitstellen, um online zu gehen | ✅ |
|
||||
| [Backend 6: Moderne CLI-Entwicklungstools](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : KI-Programmierertools vom Typ CLI verwenden, um Entwicklung und Debugging zu beschleunigen, persönlichen Engineering-Workflow bilden | ✅ |
|
||||
| [Backend 7: Zahlungssysteme wie Stripe integrieren](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) : Zahlungssysteme anschließen, Zahlungsablauf und grundlegenden Abrechnungsprozess completed | 🚧 |
|
||||
| [Großes Projekt 1: Erste moderne Anwendung erstellen - Full-Stack-App](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) : Frontend, Backend und Zahlungsmodule integrieren, produktionsreife Full-Stack-Web-Anwendung completed | 🚧 |
|
||||
| [Großes Projekt 2: Moderne Frontend-Komponentenbibliothek + Trae-Praxis](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) : 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](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : 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](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : 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 Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) : IDE-Fähigkeiten durch MCP und Skills erweitern, externe Dienste als Tools anschließen | 🚧 |
|
||||
| [Fortgeschritten 2: Coding Tools lange laufen lassen](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) : Lang laufende Aufgaben entwerfen und konfigurieren, Coding Tools stabiler und zuverlässiger machen | 🚧 |
|
||||
| [Fortgeschritten 3: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) : WeChat-Miniprogramm-Ökosystem verstehen, Frontend-Miniprogramm von offizieller Vorlage bis zum Start completed | ✅ |
|
||||
| [Fortgeschritten 4: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen - Mit Backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Datenbank und Backend-Logik in Miniprogramme integrieren, vollständigen Geschäftskreislauf realisieren | 🚧 |
|
||||
| [Fortgeschritten 5: Plattformübergreifende Entwicklung: Android-Anwendungen erstellen](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) : Tools wie Expo verwenden, Web/native-integrierte Android-Anwendungsentwicklung completed | 🚧 |
|
||||
| [Fortgeschritten 6: Plattformübergreifende Entwicklung: iOS-Anwendungen erstellen](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) : Tools wie Expo verwenden, Web/native-integrierte iOS-Anwendungsentwicklung completed | 🚧 |
|
||||
| [Fortgeschritten 7: Eigene persönliche Website und akademischen Blog erstellen](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) : 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](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : 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](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||
|
||||
## 🙏 Dank an jeden Beitragenden
|
||||
|
||||
- [散步-Projektleiter](https://github.com/sanbuphy) (Datawhale-Mitglied)
|
||||
- Fang Ke-Betreuer (Datawhale-Mitglied, Tsinghua-Universität)
|
||||
- [Yerim Kang](https://github.com/yerim25)（Praxisprojektteil-Tsinghua-Universität）
|
||||
- Zhao Zhilin（Praxisprojektteil-Tsinghua-Universität）
|
||||
- [Li Yixuan](https://yixuan20.github.io/)（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](https://github.com/Sm1les) für die Hilfe und Unterstützung bei diesem Projekt
|
||||
- Danke an alle Entwickler, die zu diesem Projekt beigetragen haben ❤️
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 Kontaktiere uns</span>
|
||||
|
||||
<div align=center>
|
||||
<p>Bei Fragen, Vorschlägen, Beschwerden oder zum Austausch scanne bitte den untenstehenden QR-Code</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
|
||||
<p>Scan den untenstehenden QR-Code, um dem offiziellen Konto zu folgen: Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
## 📄 LIZENZ
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="Creative Commons Lizenz"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
Dieses Werk ist lizenziert unter einer
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
*(Details siehe Online-Dokumentation oder Haupt-Repository)*
|
||||
|
||||
+304
-125
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _Zero Foundation, Project-Based Learning, Build Your First AI Product_
|
||||
# Easy-Vibe : Learn vibe coding from 0 to 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Start Reading Online</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Interactive Tutorial</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Online Reading</a> ·
|
||||
<a href="#-content-navigation">Learning Map</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> ·
|
||||
<a href="#-navigation">Learning Map</a> ·
|
||||
<a href="#contact">Community</a>
|
||||
</p>
|
||||
|
||||
@@ -33,170 +31,351 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="./README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="./README_CHT.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="./README_EN.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="./README_JA.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="./README_ES.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="./README_FR.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="./README_KL.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="./README_KO.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="./README_AR.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="./README_TR.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="./README_VI.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="./README_DE.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="./README_BN.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
## 🚀 Project Introduction
|
||||
|
||||
When you try to write code with AI, encounter constant errors, often want to give up, and are unclear about how to actually deploy your programs online 😢.
|
||||
|
||||
This tutorial is specifically designed to take you from 0 to 1, progressively mastering Vibe Coding techniques:
|
||||
|
||||
- **Stage 1**: From **Games to Web Prototypes**, mastering AI programming basics and product thinking (Novice & PM)
|
||||
- **Stage 2**: Learn **frontend/backend development and AI capabilities** related vibe coding techniques, complete full applications
|
||||
- **Stage 3**: Master **multi-platform complex application** construction solutions, moving towards production-grade applications
|
||||
|
||||
We believe that by mastering Vibe Coding combined with systematic training, one person can become a developer combining frontend, backend, AI capability integration, and product design.
|
||||
|
||||
> **This project is primarily designed for three types of learners:**
|
||||
>
|
||||
> - **Beginners (ordinary people / product and operations)**: Help non-technical beginners understand key concepts and complete their first product prototype.
|
||||
> - **Intermediate Developers (students and developers with some foundation)**: Master frontend/backend vibe coding and AI capability knowledge.
|
||||
> - **Advanced Developers (companies and startups, open source and independent developers)**: Advanced development techniques, multi-platform development.
|
||||
|
||||
### 📖 Content Navigation
|
||||
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>Exclusive Learning Map for Beginners</strong>
|
||||
<br>
|
||||
<sub>Zero-foundation guidance, clear path planning, say goodbye to "learn and forget"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>Step-by-Step Graphical Tutorial</strong>
|
||||
<br>
|
||||
<sub>Nanny-level detailed explanations, like having a private tutor nearby, just follow along</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>Immersive Simulated Programming</strong>
|
||||
<br>
|
||||
<sub>Virtual mouse auto-navigation, guiding you through core IDE usage quickly</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>Visible AI Principles</strong>
|
||||
<br>
|
||||
<sub>Algorithm principles animated, see at a glance how AI "draws" images</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>Learn RAG Like Playing a Game</strong>
|
||||
<br>
|
||||
<sub>Exclusive interactive components, click to see the RAG data flow clearly</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>Visualized Terminal Principles</strong>
|
||||
<br>
|
||||
<sub>Command-line operations visualized, intuitively showcasing background logic and principles</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<img src="assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
<h3>⭐ Welcome to <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Star here</a> to accelerate updates ❤️</h3>
|
||||
</div>
|
||||
|
||||
### Appendix
|
||||
In the AI era, those who turn ideas into products are often not the ones with the strongest technical skills, but the ones who take the first step.
|
||||
|
||||
[AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
Many people, even with AI assistants, are still discouraged by "not understanding the code" or "not knowing how to configure the environment." **Easy-Vibe was born for this.** Assuming everyone starts from zero foundation, we take you by the hand from writing your first line of code to understanding front-end and back-end logic, and finally launching your product.
|
||||
|
||||
### Stage 1: Novice & PM - From Games to Web Prototypes
|
||||
- **Target Audience**: Beginners, Product Managers, Front-end / Back-end / Full-stack Developers
|
||||
- **Themes**: AI Programming, Full-stack Web Application Development, AI Agent, Workflow, and RAG Systems
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :---------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | :----- |
|
||||
| [Preface: Learning Map](docs/en-us/stage-0/) | Overall learning path overview | 🚧 |
|
||||
| [Primary 1: Programming by Speaking in the AI Era](docs/en-us/stage-0/) | Experience AI programming capabilities through Snake and other cases | 🚧 |
|
||||
| [Primary 2: Understanding AI IDE Tools](docs/en-us/stage-0/) | Learn to use IDE, create small games locally | 🚧 |
|
||||
| [Primary 3: Building Prototypes Hands-On](docs/en-us/stage-0/) | From requirement analysis, AI-generated single page to multi-page product prototype | 🚧 |
|
||||
| [Primary 4: Adding AI Capabilities to Prototypes](docs/en-us/stage-0/) | Learn to integrate common AI capabilities (text, image, video) | 🚧 |
|
||||
| [Primary 5: Complete Project Practice](docs/en-us/stage-0/) | Simulate real scenarios, accept user feedback iterations, complete projects | 🚧 |
|
||||
| [Final Assignment: Build a Complete Web Application Prototype and Present](docs/en-us/stage-0/) | Fully implement application, showcase application effects | 🚧 |
|
||||
---
|
||||
|
||||
Easy-Vibe takes you from 0 to 1 through the following stages:
|
||||
|
||||
| Stage | Core Skills | Output |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **Stage 1** | Intro to AI Programming, Product Thinking, Prototyping | Interactive Mini-games, Web App Prototypes (Beginner & PM) |
|
||||
| **Stage 2** | Full-stack Development, AI Integration, Databases | Complete Full-stack AI Application |
|
||||
| **Stage 3** | Advanced Claude Code, Mini-programs & Android Development | Production-grade Multi-platform Applications |
|
||||
| **Appendix** | Helping you understand Computer & AI basic concepts | 9 Knowledge Domains, 80+ Interactive Topics |
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-02-25]** Updated [Appendix Knowledge Base](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), covering 9 knowledge domains and 80+ interactive topics.
|
||||
- **[2026-01-27]** Added Android and iOS platform application development tutorials.
|
||||
- **[2026-01-19]** Released interactive demonstration components for Prompt Engineering, AI Evolution, Authentication Design, Git Principles, etc., significantly enhancing the visual learning experience.
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[2026-01-16]** Restructured project, formally established the "Beginner Entry" chapter to lower the entry barrier.
|
||||
- **[2026-01-14]** Completed a major update of the Stage 1 "Product Prototype Construction" documentation.
|
||||
- **[2026-01-13]** Completed document architecture refactoring, fully supporting multi-language (i18n).
|
||||
- **[2026-01-01]** Released the project's core Learning Map, clarifying the learning path.
|
||||
</details>
|
||||
|
||||
### 📖 Navigation
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 📚 Appendix Knowledge Base
|
||||
|
||||
> Covering **9 knowledge domains** and **80+ interactive topics**, using animations and visual components to help you intuitively understand core concepts from computer fundamentals to the AI frontier.
|
||||
>
|
||||
> 👉 [View Full Appendix](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI Capability Dictionary](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 Computer Fundamentals</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">From Transistor to CPU</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">Operating Systems</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">Data Encoding, Storage & Transmission</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">Networks: How Two Computers Talk</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">Data Structures</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">Intro to Algorithmic Thinking</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 Development Tools</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git: The Time Machine of Code</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">Command Line & Shell Scripting</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">Package Managers</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">The Art of Debugging</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">Regular Expressions</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">Environment Variables & PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 Browser & Front-end</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">Deep Dive into JavaScript</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">Browser Rendering Pipeline</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">Front-end Framework Comparison</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">Graphics & Animation</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Web Performance Measurement & Optimization</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">The Big Picture of Front-end Engineering</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ Server & Back-end</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTP Protocol</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API Design Philosophy</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">Authentication & Authorization</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">Concurrency, Async & Multithreading</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">Message Queues & Event-Driven</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">Back-end Layered Architecture</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 Data</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">Database Fundamentals</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">Tracking & User Behavior Collection</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">Data Analysis Basics</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/B Testing & Experiment Driven</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">Data Visualization & Dashboards</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ Architecture & System Design</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">Evolution from Monolith to Microservices</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">Challenges of Distributed Systems</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">High Availability & Disaster Recovery</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">System Design Methodology</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ Infrastructure & DevOps</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Docker Containerization</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetes Orchestration</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CD Automation</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">Domains, DNS & HTTPS</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">Monitoring, Logging & Alerting</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infrastructure as Code</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 Artificial Intelligence</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">How LLMs Work</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer & Attention Mechanism</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAG Architecture</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agents & Tool Calling</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">Prompt Engineering</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">Image Generation Principles</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 Engineering Excellence</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">Code Quality & Refactoring</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">Testing Strategies</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">Design Patterns</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">Security Thinking & Defense Basics</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">Technical Writing</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">Open Source Collaboration</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### I. Zero Foundation Entry
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [Preface: Learning Map](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | Overall learning path navigation | ✅ |
|
||||
| [Level 1: AI Era, Speaking is Programming](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experience AI programming through cases like Snake | ✅ |
|
||||
| [Level 2: Finding Great Ideas](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Learn to find and validate product ideas | ✅ |
|
||||
| [Level 3: Intro to AI IDE Tools](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE, make games locally | ✅ |
|
||||
| [Level 4: Building Prototypes Hands-on](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | From requirements to single and multi-page prototypes | ✅ |
|
||||
| [Level 5: Adding AI Power to Prototypes](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to integrate AI (text, image, video) | ✅ |
|
||||
| [Level 6: Full Project Practice](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Simulate real scenarios, iterate with feedback | ✅ |
|
||||
|
||||
#### Appendix: Business Thinking
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------- | :----- |
|
||||
| [Appendix A: Product Thinking and Solution Design](docs/en-us/stage-1/appendix-a-product-thinking/) | Thinking framework needed to build products from scratch | 🚧 |
|
||||
| [Appendix B: AI Industry Application Scenarios (B2B)](docs/en-us/stage-1/appendix-industry-scenarios/) | Understand AI applications in different industries | 🚧 |
|
||||
| [Appendix C: AI Consumer Scenario Inspiration (B2C)](docs/en-us/stage-1/appendix-c-consumer-scenarios/) | Explore AI applications in consumer products | 🚧 |
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [Appendix A: Product Thinking & Solution Design](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Thinking frameworks for building products | ✅ |
|
||||
| [Appendix B: AI Industry Scenarios (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | AI applications in different industries | ✅ |
|
||||
| [Appendix C: AI Consumer Scenarios (B2C)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | AI application scenarios in consumer products | ✅ |
|
||||
|
||||
#### Appendix: Technical Solutions
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------- | :----- |
|
||||
| [Appendix D: What to Do When Encountering Errors](docs/en-us/stage-1/appendix-b-common-errors/) | Common errors in vibe coding and troubleshooting methods | 🚧 |
|
||||
| [Appendix E: Comparison of Seven AI Programming Tools](docs/en-us/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Compare and test mainstream AI programming platforms | 🚧 |
|
||||
| [Appendix F: Designing Websites with Design and Programming Agents](docs/en-us/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Learn how to use AI agents collaboratively | 🚧 |
|
||||
| Chapter | Key Content | Status |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [Appendix D: Handling Errors](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Common errors and troubleshooting in vibe coding | ✅ |
|
||||
| [Appendix E: Comparison of 7 AI Programming Tools](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Direct comparison of mainstream platforms | ✅ |
|
||||
| [Appendix F: Designing Websites with Design & Programming Agents](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Multi-agent collaboration for web design | ✅ |
|
||||
|
||||
### Stage 2: Intermediate Developer
|
||||
<details>
|
||||
<summary><strong>II. Intermediate Developer</strong></summary>
|
||||
|
||||
#### Frontend Part
|
||||
#### Front-end
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Frontend 0: Using Lovart to Generate Assets](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Learn to use Lovart to batch generate characters, scenes and other visual assets | 🚧 |
|
||||
| [Frontend 1: Figma & MasterGo Introduction](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Use design tools to organize information architecture and page structure | 🚧 |
|
||||
| [Frontend 2: Building Your First Modern Application - UI Design](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Complete componentized interface based on design specs, implement the first link from design to code | 🚧 |
|
||||
| [Frontend 3: Reference UI Design Specs and Multi-Product UI Design](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Expand multi-product interfaces around unified visual design, practice systematic design capabilities | 🚧 |
|
||||
| [Frontend 4: Building Hogwarts Portraits Together](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Build AI-capable frontend applications from scratch, connecting design and development | ✅ |
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [Front-end 0: Assets with Lovart](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Batch generate visual assets like characters/scenes | 🚧 |
|
||||
| [Front-end 1: Figma & MasterGo Intro](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Organize info architecture and page structure | 🚧 |
|
||||
| [Front-end 2: Building First Modern App - UI Design](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Design-to-code workflow with components | 🚧 |
|
||||
| [Front-end 3: UI Design Specs & Multi-product UI](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Systematic design across multiple products | 🚧 |
|
||||
| [Front-end 4: Hogwarts Portraits Together](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Build an AI-powered front-end app from 0 to 1 | ✅ |
|
||||
|
||||
#### Backend and Full Stack Part
|
||||
#### Back-end & Full-stack
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :----- |
|
||||
| [Backend 1: What is API](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Understand HTTP interfaces and request-response models | ✅ |
|
||||
| [Backend 2: From Database to Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implement databases and APIs on Supabase, connect data models with frontend pages | ✅ |
|
||||
| [Backend 3: AI-Assisted Interface Code and Documentation](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Use LLM to help generate interface and database documentation and code | 🚧 |
|
||||
| [Backend 4: Git Workflow](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Manage code in Git workflow, version control and collaboration | ✅ |
|
||||
| [Backend 5: Zeabur Deployment](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Deploy applications to Zeabur for production | ✅ |
|
||||
| [Backend 6: Modern CLI Development Tools](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Use CLI-based AI programming tools to accelerate development and debugging | ✅ |
|
||||
| [Backend 7: Integrating Payment Systems like Stripe](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Integrate payment systems, complete payment links and basic settlement processes | 🚧 |
|
||||
| [Assignment 1: Build Your First Modern Application - Full Stack](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Integrate frontend, backend and payment modules, complete production-ready full stack web application | 🚧 |
|
||||
| [Assignment 2: Modern Frontend Component Library + Trae Practice](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Use modern frontend component libraries with Trae, independently complete login/registration and payment-capable products | 🚧 |
|
||||
| Chapter | Key Content | Status |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [Back-end 1: What is an API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP interfaces and request-response models | ✅ |
|
||||
| [Back-end 2: DB to Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implement DB and API on Supabase | ✅ |
|
||||
| [Back-end 3: AI-Assisted API Code & Docs](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Generate API/DB docs and code with LLM | 🚧 |
|
||||
| [Back-end 4: Git Workflow](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Version control and collaboration in Git | ✅ |
|
||||
| [Back-end 5: Zeabur Deployment](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Deploy applications to Zeabur | ✅ |
|
||||
| [Back-end 6: Modern CLI Dev Tools](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Accelerate dev with CLI-based AI tools | ✅ |
|
||||
| [Back-end 7: Integrating Payment Systems like Stripe](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Integrate payment and basic settlement flow | 🚧 |
|
||||
| [Project 1: First Modern Application - Full-stack App](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Complete localized, production-ready Full-stack Web App | 🚧 |
|
||||
| [Project 2: Modern UI Library + Trae Practice](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Independent product with auth and payment | 🚧 |
|
||||
|
||||
#### AI Capabilities Appendix
|
||||
#### AI Capability Appendix
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- | :----- |
|
||||
| [AI 1: Dify Introduction and Knowledge Base Integration](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Use Dify Workflow and basic RAG to build utility products | ✅ |
|
||||
| [AI 2: Learn to Query AI Dictionary and Integrate Multimodal APIs](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Learn to find suitable models and APIs, integrate text, image and other multimodal capabilities | 🚧 |
|
||||
| Chapter | Key Content | Status |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [AI 1: Dify Intro & Knowledge Base](../../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Build utility products with Dify Workflow & RAG | ✅ |
|
||||
| [AI 2: AI Dictionary & Multimodal APIs](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Research models/APIs and integrate multimodal power | 🚧 |
|
||||
|
||||
### Stage 3: Advanced Developer
|
||||
</details>
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Advanced 1: MCP and Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | Extend IDE capabilities through MCP and Skills, integrate external services as tools | 🚧 |
|
||||
| [Advanced 2: Making Coding Tools Work for Long Periods](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Design and configure long-running tasks, make Coding Tools more stable and reliable | 🚧 |
|
||||
| [Advanced 3: Multi-Platform Development: Building WeChat Mini Programs](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Understand WeChat mini program ecosystem, complete a frontend mini program from official template to launch | ✅ |
|
||||
| [Advanced 4: Multi-Platform Development: Building WeChat Mini Programs - With Backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate databases and backend logic in mini programs, complete business loops | 🚧 |
|
||||
| [Advanced 5: Multi-Platform Development: Building Android Apps](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Use Expo and other tools to complete Web/native integrated Android application development | 🚧 |
|
||||
| [Advanced 6: Multi-Platform Development: Building iOS Apps](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Use Expo and other tools to complete Web/native integrated iOS application development | 🚧 |
|
||||
| [Advanced 7: Building Your Personal Website and Academic Blog](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | From selection, building to deployment, create a permanent online homepage showcasing projects and academic achievements | 🚧 |
|
||||
<details>
|
||||
<summary><strong>III. Advanced Developer</strong></summary>
|
||||
|
||||
#### AI Capabilities Appendix
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [Advanced 1: MCP & Claude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | Extend IDE power with external services as tools | 🚧 |
|
||||
| [Advanced 2: Long-running Coding Tasks](../../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Design and configure stable, long-running tasks | 🚧 |
|
||||
| [Advanced 3: WeChat Mini Program Dev](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Build and launch a front-end mini program | ✅ |
|
||||
| [Advanced 4: WeChat Mini Program with Back-end](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate DB and back-end logic in mini programs | 🚧 |
|
||||
| [Advanced 5: Android App Development](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Web/Native unified Android dev with Expo | ✅ |
|
||||
| [Advanced 6: iOS App Development](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Web/Native unified iOS dev with Expo | ✅ |
|
||||
| [Advanced 7: Personal Website & Academic Blog](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | Build and deploy a permanent online homepage | 🚧 |
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Advanced AI 1: What is RAG and How It Works](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Systematically understand RAG principles and common architectures | ✅ |
|
||||
| [Advanced AI 2: Intermediate/Advanced RAG and Workflow Orchestration with LangGraph](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Use LangGraph and other tools to design multi-step workflows and intermediate/advanced RAG systems | 🚧 |
|
||||
#### AI Capability Appendix
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
|
||||
| [Advanced AI 1: What is RAG & How It Works](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Systematic understanding of RAG architectures | ✅ |
|
||||
| [Advanced AI 2: Advanced RAG with LangGraph](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Multi-step workflows and advanced RAG systems | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
## 🛠️ How to Learn
|
||||
|
||||
- Choose relevant chapters to read and practice based on your personal ability. If you have questions, feel free to ask via issues.
|
||||
- Choose chapters to read and practice based on your skill level. Feel free to open an issue for questions.
|
||||
|
||||
## 💻 Running This Course Locally
|
||||
## 💻 Local Setup
|
||||
|
||||
### Modern Approach
|
||||
|
||||
In the AI IDE dialog box (vscode, cursor, trae, etc.), enter the following prompt to start this course:
|
||||
In an AI IDE (VS Code, Cursor, Trae, etc.), use the following prompt:
|
||||
|
||||
```
|
||||
Please help me run this project's local service
|
||||
Please help me run the local service for this project.
|
||||
```
|
||||
|
||||
### Traditional Approach
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. Open your browser and visit `http://localhost:3000` to view.
|
||||
3. Open `http://localhost:3000` in your browser.
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
- If you discover any problems or see areas for improvement, please submit an Issue for feedback. If there's no response after submitting, you can contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for follow-up.
|
||||
- If you want to contribute to this project, please submit a Pull Request. If there's no response after submitting, you can contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for follow-up.
|
||||
- If you're very interested in Datawhale and want to start a new project, please follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
- If you find issues or have suggestions, please open an Issue. If you don't get a response, contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- To contribute, please submit a Pull Request.
|
||||
- If you want to start a new project with Datawhale, follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
## 🙏 Thanks to Every Contributor
|
||||
## 🙏 Acknowledgements
|
||||
|
||||
- [Sanbu - Project Lead](https://github.com/sanbuphy) (Datawhale Member)
|
||||
- Fang Ke - Advisor (Datawhale Member, Tsinghua University)
|
||||
- [Yerim Kang](https://github.com/yerim25) (Practice Project Section - Tsinghua University)
|
||||
- Zhao Zhilin (Practice Project Section - Tsinghua University)
|
||||
- [Li Yixuan](https://yixuan20.github.io/) (Page Art Design - Tsinghua University)
|
||||
- All friends from the AI Vibe Coding 101 Beta Group who provided suggestions and experience
|
||||
- [Yerim Kang](https://github.com/yerim25) (Practice Projects - Tsinghua University)
|
||||
- Zhao Zhilin (Practice Projects - Tsinghua University)
|
||||
- [Li Yixuan](https://yixuan20.github.io/) (Visual Design - Tsinghua University)
|
||||
- Liu Siyi (Practice Projects - Tsinghua University)
|
||||
- All Beta testers from the AI Vibe Coding 101 group for their feedback.
|
||||
|
||||
### Special Thanks
|
||||
|
||||
- Thanks to [@Sm1les](https://github.com/Sm1les) for their help and support with this project
|
||||
- Thanks to all developers who contributed to this project ❤️
|
||||
- Thanks to [@Sm1les](https://github.com/Sm1les) for support and help.
|
||||
- Thanks to all contributors and everyone who starred this project ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
||||
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
||||
</p>
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
@@ -207,10 +386,10 @@ Please help me run this project's local service
|
||||
## <span id="contact">📧 Contact Us</span>
|
||||
|
||||
<div align=center>
|
||||
<p>If you have questions, suggestions, or want to communicate together, please scan the QR code below</p>
|
||||
<img src="assets/wechat.png" width="280">
|
||||
<p>For questions, suggestions, or collaboration, please scan the QR code below:</p>
|
||||
<img src="../../assets/wechat.png" width="280">
|
||||
|
||||
<p>Scan the QR code below to follow the official account: Datawhale</p>
|
||||
<p>Follow Datawhale on WeChat:</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
@@ -219,7 +398,7 @@ Please help me run this project's local service
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="Creative Commons License"
|
||||
alt="CC-BY-NC-SA 4.0"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
|
||||
+281
-123
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _Desde cero, aprendizaje basado en proyectos, construyendo tu primer producto de IA_
|
||||
# Easy-Vibe : Aprende Vibe Coding de 0 a 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Comenzar a leer en línea (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Tutorial interactivo</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
|
||||
<a href="#-navegación-de-contenido">Mapa de aprendizaje</a> ·
|
||||
<a href="#-navegación">Mapa de aprendizaje</a> ·
|
||||
<a href="#contact">Comunidad</a>
|
||||
</p>
|
||||
|
||||
@@ -37,163 +35,323 @@
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
## 🚀 Introducción al Proyecto
|
||||
|
||||
Cuando intentas escribir código con IA, encuentras errores constantes, a menudo quieres rendirte y no está claro cómo llevar realmente tus programas en línea 😢.
|
||||
|
||||
Este tutorial está específicamente diseñado para llevarte de 0 a 1, dominando progresivamente las técnicas de Vibe Coding:
|
||||
|
||||
- **Etapa 1**: **De mini juegos a prototipos web**, dominar los conceptos básicos de programación de IA y pensamiento de producto
|
||||
- **Etapa 2**: Aprender **desarrollo frontend/backend y capacidades de IA** relacionadas con técnicas de Vibe Coding, completando una aplicación completa
|
||||
- **Etapa 3**: Dominar la construcción de **aplicaciones complejas multiplataforma**, avanzando hacia aplicaciones de nivel de producción
|
||||
|
||||
Creemos que al dominar Vibe Coding y combinarlo con entrenamiento sistemático, una sola persona puede convertirse en un desarrollador que combine desarrollo frontend, desarrollo backend, integración de capacidades de IA y diseño de productos.
|
||||
|
||||
> **Este proyecto está dirigido principalmente a tres tipos de estudiantes:**
|
||||
>
|
||||
> - **Principiantes (personas comunes / producto y operaciones)**: Ayudar a estudiantes no técnicos a entender conceptos clave y completar su primer prototipo de producto
|
||||
> - **Desarrollores de nivel principiante-intermedio (estudiantes y desarrolladores con cierta base)**: Dominar el conocimiento de Vibe Coding frontend/backend y capacidades de IA
|
||||
> - **Desarrollores avanzados (empresas y startups, código abierto e desarrollores independientes)**: Técnicas avanzadas de desarrollo, desarrollo multiplataforma
|
||||
|
||||
### 📖 Navegación de Contenido
|
||||
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>Mapa de aprendizaje exclusivo para principiantes</strong>
|
||||
<br>
|
||||
<sub>Guía desde cero, planificación de ruta clara, adiós al "aprender y olvidar"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>Tutorial gráfico paso a paso</strong>
|
||||
<br>
|
||||
<sub>Explicaciones detalladas, como tener un tutor privado a tu lado, solo sigue los pasos</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>Programación simulada inmersiva</strong>
|
||||
<br>
|
||||
<sub>Navegación automática con mouse virtual, aprendiendo rápidamente los usos principales del IDE</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>Principios de IA visibles</strong>
|
||||
<br>
|
||||
<sub>Principios de algoritmos animados, entiende de un vistazo cómo la IA "dibuja" imágenes</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>Aprende RAG como si fuera un juego</strong>
|
||||
<br>
|
||||
<sub>Componentes interactivos exclusivos, haz clic para ver claramente el flujo de datos RAG</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>Principios de terminal visualizados</strong>
|
||||
<br>
|
||||
<sub>Operaciones de línea de comandos visualizadas, mostrando intuitivamente la lógica de fondo</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
<h3>⭐ Te invitamos a dar <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Star aquí</a> para acelerar las actualizaciones ❤️</h3>
|
||||
</div>
|
||||
|
||||
### Apéndice General
|
||||
En la era de la IA, las personas que convierten ideas en productos a menudo no son las que tienen los conocimientos técnicos más sólidos, sino las que dan el primer paso.
|
||||
|
||||
[Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
Muchas personas, incluso con asistentes de IA, se desaniman por "no entender el código" o "no saber cómo configurar el entorno". **Easy-Vibe nació para esto.** Asumiendo que todos parten de cero, te llevamos de la mano desde escribir tu primera línea de código hasta entender la lógica del front-end y back-end, y finalmente lanzar tu producto.
|
||||
|
||||
### 1. Entrada de Novatos y Prototipo de Producto
|
||||
- **Público objetivo**: Principiantes, Product Managers, Desarrolladores Front-end / Back-end / Full-stack
|
||||
- **Temas**: Programación con IA, Desarrollo de aplicaciones Web Full-stack, AI Agent, Workflows y sistemas RAG
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Prólogo: Mapa de aprendizaje](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Guía general de la ruta de aprendizaje | ✅ |
|
||||
| [Principiante 1: La era de la IA, si puedes hablar puedes programar](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experimentar por primera vez las capacidades de programación con IA a través de casos como Snake | ✅ |
|
||||
| [Principiante 2: Conociendo herramientas de IDE de IA](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Aprender a usar el IDE, crear mini juegos localmente | ✅ |
|
||||
| [Principiante 3: Haz un prototipo tú mismo](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Análisis de requisitos, generación de una sola página con IA, hasta generar prototipos de productos de múltiples páginas | ✅ |
|
||||
| [Principiante 4: Añade capacidades de IA al prototipo](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprender a conectar capacidades comunes de IA (texto, imagen, video) | ✅ |
|
||||
| [Principiante 5: Proyecto completo práctico](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Simular escenarios reales, aceptar feedback de usuarios para iterar, completar el proyecto | ✅ |
|
||||
| [Proyecto final: Haz un prototipo completo de aplicación web y preséntalo](docs/zh-cn/stage-1/1.5-final-project/index.md) | Implementar completamente la aplicación, mostrar los efectos de la aplicación | ✅ |
|
||||
---
|
||||
|
||||
#### Apéndices: Pensamiento de Negocio
|
||||
Easy-Vibe te lleva de 0 a 1 a través de las siguientes etapas:
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :----- |
|
||||
| [Apéndice A: Pensamiento de Producto y Diseño de Solución](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Marcos de pensamiento necesarios para crear un producto de cero a uno | ✅ |
|
||||
| [Apéndice B: Referencia de Escenarios de Aplicación de AI en la Industria (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Comprender las aplicaciones de AI en diferentes industrias | ✅ |
|
||||
| [Apéndice C: Referencia de Inspiración de Escenarios de Consumo de AI (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Explorar las aplicaciones de AI en productos de consumo | ✅ |
|
||||
| Etapa | Habilidades clave | Resultado |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **Etapa 1** | Introducción a la programación con IA, Pensamiento de producto, Diseño de prototipos | Minijuegos interactivos, Prototipos de aplicaciones Web (Principiantes & PM) |
|
||||
| **Etapa 2** | Desarrollo Full-stack, Integración de IA, Bases de datos | Aplicación de IA Full-stack completa |
|
||||
| **Etapa 3** | Claude Code avanzado, Desarrollo de Miniprogramas y Android | Aplicaciones multiplataforma de nivel de producción |
|
||||
| **Apéndice** | Ayuda para entender conceptos básicos de Computación e IA | 9 dominios de conocimiento, más de 80 temas interactivos |
|
||||
|
||||
#### Apéndices: Soluciones Técnicas
|
||||
## 🔥 Noticias
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | :----- |
|
||||
| [Apéndice D: Qué Hacer Cuando se Encuentran Errores al Escribir Código](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Errores comunes en Vibe Coding y métodos de solución de problemas | ✅ |
|
||||
| [Apéndice E: Comparación de 7 Herramientas de Programación AI](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Comparar y probar las principales plataformas de programación AI | ✅ |
|
||||
| [Apéndice F: Diseñar Sitios Web con Agentes de Diseño y Programación](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Aprender a usar agentes AI de forma colaborativa | ✅ |
|
||||
- **[2026-02-25]** Actualizada la [Base de conocimientos del apéndice](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), que cubre 9 dominios de conocimiento y más de 80 temas interactivos.
|
||||
- **[2026-01-27]** Se agregaron tutoriales de desarrollo de aplicaciones para las plataformas Android e iOS.
|
||||
- **[2026-01-19]** Lanzamiento de una serie de componentes de demostración interactiva para Prompt Engineering, evolución de la IA, diseño de autenticación, principios de Git, etc.
|
||||
|
||||
### 2. Ingeniero de Desarrollo de Nivel Principiante-Intermedio
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
#### Parte Frontend
|
||||
- **[2026-01-16]** Reestructuración del proyecto, estableciendo formalmente el capítulo de "Introducción para principiantes".
|
||||
- **[2026-01-14]** Completada una actualización masiva de la documentación de la Etapa 1 "Construcción de prototipos de productos".
|
||||
- **[2026-01-13]** Reconstrucción de la arquitectura de documentos, soporte total para multi-idioma (i18n).
|
||||
- **[2026-01-01]** Lanzamiento del Mapa de Aprendizaje principal del proyecto.
|
||||
</details>
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Frontend 0: Usar lovart para generar activos](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Usar lovart para generar por lotes activos visuales como personajes y escenas, proporcionando base de activos para diseño UI y desarrollo frontend | 🚧 |
|
||||
| [Frontend 1: Introducción a Figma y MasterGo](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Usar herramientas de diseño para organizar arquitectura de información y estructura de páginas, preparando la base para implementación frontend | 🚧 |
|
||||
| [Frontend 2: Construir la primera aplicación moderna - Diseño UI](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Completar interfaz basada en componentes basada en diseños,实现 la primera ruta de diseño a código | 🚧 |
|
||||
| [Frontend 3: Referencia de especificaciones de diseño UI y diseño UI de múltiples productos](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Expandir interfaces de múltiples productos en torno a un visual principal unificado, practicar capacidades de diseño sistemático | 🚧 |
|
||||
| [Frontend 4: Hagamos los retratos de Hogwarts juntos](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Crear una aplicación frontend con capacidades de IA integradas de 0 a 1, conectando diseño y desarrollo | ✅ |
|
||||
### 📖 Navegación
|
||||
|
||||
#### Parte Backend y Full Stack
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-image1.png" alt="Mapa de Aprendizaje" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :----- |
|
||||
| [Backend 1: Qué es una API](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Entender interfaces HTTP y modelos de solicitud-respuesta, preparándose para integración backend y coordinación | ✅ |
|
||||
| [Backend 2: De bases de datos a Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend | ✅ |
|
||||
| [Backend 3: LLM asistiendo en la escritura de código de interfaz y documentación](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Usar LLM para ayudar a generar documentación y código para interfaces y bases de datos,实现 un backend legible y testeable | 🚧 |
|
||||
| [Backend 4: Flujo de trabajo Git](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Gestionar código en flujo de trabajo Git, realizar control de versiones y colaboración | ✅ |
|
||||
| [Backend 5: Despliegue Zeabur](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Desplegar la aplicación en Zeabur para ponerla en línea | ✅ |
|
||||
| [Backend 6: Herramientas de desarrollo CLI modernas](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Usar herramientas de programación IA tipo CLI para acelerar desarrollo y depuración, formando flujo de ingeniería personal | ✅ |
|
||||
| [Backend 7: Cómo integrar sistemas de pago como Stripe](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Conectar sistemas de pago, completar flujo de pago y proceso básico de liquidación | 🚧 |
|
||||
| [Proyecto final 1: Construir la primera aplicación moderna - Aplicación full stack](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Integrar frontend, backend y módulos de pago, completar aplicación web full stack lista para producción | 🚧 |
|
||||
| [Proyecto final 2: Biblioteca de componentes frontend moderna + Trae práctico](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Usar biblioteca de componentes frontend moderna y Trae, completar independientemente un producto con registro/login y soporte de pago | 🚧 |
|
||||
### 📚 Base de conocimientos del apéndice
|
||||
|
||||
#### Apéndice de Capacidades de IA
|
||||
> Cubre **9 dominios de conocimiento** y más de **80 temas interactivos**, utilizando animaciones y componentes visuales para ayudarte a comprender intuitivamente los conceptos centrales desde los fundamentos de la computación hasta la frontera de la IA.
|
||||
>
|
||||
> 👉 [Ver apéndice completo](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [Diccionario de capacidades de IA](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [IA 1: Introducción a Dify e integración de base de conocimientos](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Usar Dify Workflow y RAG básico para construir productos tipo herramientas, creando ejemplo para actualizaciones futuras de aplicaciones | ✅ |
|
||||
| [IA 2: Aprender a consultar diccionario de IA e integrar APIs multimodales](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Aprender a buscar modelos y APIs apropiados, integrar capacidades multimodales como texto e imagen en productos | 🚧 |
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 Fundamentos de Computación</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">Del transistor a la CPU</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">Sistemas operativos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">Codificación, almacenamiento y transmisión de datos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">Redes: Cómo hablan dos ordenadores</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">Estructuras de datos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">Introducción al pensamiento algorítmico</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 Herramientas de desarrollo</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git: La máquina del tiempo del código</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">Línea de comandos y scripts de Shell</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">Gestores de paquetes</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">El arte de la depuración</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">Expresiones regulares</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">Variables de entorno y PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 Navegador y Front-end</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">Inmersión profunda en JavaScript</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">Tubería de renderizado del navegador</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">Comparación de frameworks front-end</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">Gráficos y animación</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Medición y optimización del rendimiento web</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">Panorama de la ingeniería front-end</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ Servidor y Back-end</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">Protocolo HTTP</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">Filosofía de diseño de APIs</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">Autenticación y autorización</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">Concurrencia, asincronía e hilos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">Colas de mensajes y eventos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">Arquitectura back-end en capas</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 Datos</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">Principios de bases de datos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">Recopilación de comportamiento del usuario</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">Fundamentos de análisis de datos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">Pruebas A/B y experimentación</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">Visualización de datos y dashboards</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ Arquitectura y Diseño de Sistemas</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">Del monolito a los microservicios</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">Desafíos de sistemas distribuidos</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">Alta disponibilidad y recuperación</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">Metodología de diseño de sistemas</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ Infraestructura y Operaciones</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Containerización con Docker</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Orquestación con Kubernetes</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">Automatización CI / CD</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">Dominios, DNS y HTTPS</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">Monitoreo, registros y alertas</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infraestructura como código</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 Inteligencia Artificial</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">Cómo funcionan los LLMs</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer y mecanismos de atención</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">Arquitectura RAG</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agents y llamadas a herramientas</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">Ingeniería de prompts</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">Principios de generación de imágenes</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 Excelencia en Ingeniería</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">Calidad de código y refactorización</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">Estrategias de prueba</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">Patrones de diseño</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">Pensamiento de seguridad y defensa</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">Redacción técnica</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">Colaboración de código abierto</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### 3. Ingeniero de Desarrollo Avanzado
|
||||
### I. Introducción desde cero
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Avanzado 1: MCP y Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | Extender capacidades del IDE a través de MCP y Skills, conectar servicios externos como herramientas | 🚧 |
|
||||
| [Avanzado 2: Cómo hacer que Coding Tools funcione durante mucho tiempo](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Diseñar y configurar tareas de ejecución prolongada, hacer Coding Tools más estable y confiable | 🚧 |
|
||||
| [Avanzado 3: Desarrollo multiplataforma: Cómo construir mini programas de WeChat](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Entender el ecosistema de mini programas de WeChat, completar un mini programa frontend desde plantilla oficial hasta lanzamiento | ✅ |
|
||||
| [Avanzado 4: Desarrollo multiplataforma: Cómo construir mini programas de WeChat - Incluyendo backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrar base de datos y lógica backend en mini programas,实现 ciclo completo de negocio | 🚧 |
|
||||
| [Avanzado 5: Desarrollo multiplataforma: Cómo construir aplicaciones Android](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Usar herramientas como Expo, completar desarrollo de aplicaciones Android integrando Web/nativo | 🚧 |
|
||||
| [Avanzado 6: Desarrollo multiplataforma: Cómo construir aplicaciones iOS](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Usar herramientas como Expo, completar desarrollo de aplicaciones iOS integrando Web/nativo | 🚧 |
|
||||
| [Avanzado 7: Cómo construir tu propio sitio web personal y blog académico](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | Desde selección, construcción hasta despliegue, construir homepage en línea a largo plazo mostrando proyectos personales y logros académicos | 🚧 |
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [Prólogo: Mapa de aprendizaje](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | Navegación por la ruta de aprendizaje completa | ✅ |
|
||||
| [Nivel 1: Era de la IA, hablar es programar](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experimenta la programación con IA mediante casos | ✅ |
|
||||
| [Nivel 2: Buscando buenas ideas](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Aprende a validar ideas de productos | ✅ |
|
||||
| [Nivel 3: Introducción a las herramientas AI IDE](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Aprende a usar el IDE y crea juegos locales | ✅ |
|
||||
| [Nivel 4: Construyendo prototipos a mano](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Desde el análisis hasta prototipos de varias páginas | ✅ |
|
||||
| [Nivel 5: Añadiendo IA a los prototipos](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprende a integrar IA (texto, imagen, video) | ✅ |
|
||||
| [Nivel 6: Práctica de proyecto completo](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Escenarios reales e iteración con feedback | ✅ |
|
||||
|
||||
#### Apéndice de Capacidades de IA
|
||||
#### Apéndice: Pensamiento de negocio
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [IA Avanzada 1: Qué es RAG y cómo funciona](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Entender sistemáticamente principios de RAG y arquitecturas comunes, proporcionar base de recuperación de conocimiento para aplicaciones complejas | ✅ |
|
||||
| [IA Avanzada 2: RAG intermedio-avanzado y orquestación de flujos de trabajo: Ejemplo con LangGraph](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Usar herramientas como LangGraph para diseñar flujos de trabajo multipaso y sistemas RAG intermedio-avanzados | 🚧 |
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [Apéndice A: Pensamiento de producto](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Marcos de pensamiento para crear productos | ✅ |
|
||||
| [Apéndice B: Escenarios industriales de IA (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Aplicaciones de IA en diferentes industrias | ✅ |
|
||||
| [Apéndice C: Inspiración para escenarios B2C](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Exploración de IA en productos de consumo | ✅ |
|
||||
|
||||
## 🛠️ Cómo Aprender
|
||||
#### Apéndice: Soluciones técnicas
|
||||
|
||||
- Según tus habilidades personales, lee y practica selectivamente capítulos relevantes, si tienes preguntas hazlas en Issues.
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [Apéndice D: Qué hacer ante errores](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Errores comunes en vibe coding y soluciones | ✅ |
|
||||
| [Apéndice E: Comparación de herramientas AI](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Comparativa de plataformas principales | ✅ |
|
||||
| [Apéndice F: Diseñando sitios con Agentes](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Uso de agentes de IA para diseño web | ✅ |
|
||||
|
||||
## 💻 Iniciar Este Curso Localmente
|
||||
<details>
|
||||
<summary><strong>II. Desarrollador intermedio</strong></summary>
|
||||
|
||||
### Método Moderno
|
||||
#### Front-end
|
||||
|
||||
En el cuadro de diálogo del IDE de IA (vscode, cursor, trae, etc.), ingresa el siguiente prompt para iniciar este curso:
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [Front-end 0: Activos con Lovart](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Generación masiva de activos visuales | 🚧 |
|
||||
| [Front-end 1: Intro a Figma & MasterGo](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Organización de arquitectura de la información | 🚧 |
|
||||
| [Front-end 2: Construyendo la primera App - UI](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Interfaz basada en componentes desde el diseño | 🚧 |
|
||||
| [Front-end 3: Especificaciones de diseño UI](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Diseño sistemático a través de productos | 🚧 |
|
||||
| [Front-end 4: Retratos de Hogwarts juntos](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | App front-end con IA desde cero hasta producción | ✅ |
|
||||
|
||||
#### Back-end y Full-stack
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [Back-end 1: Qué es una API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Interfaces HTTP y modelos petición-respuesta | ✅ |
|
||||
| [Back-end 2: De DB a Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implementación de bases de datos y APIs | ✅ |
|
||||
| [Back-end 3: Código de interfaz asistido por IA](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Uso de LLM para generación de código y docs | 🚧 |
|
||||
| [Back-end 4: Flujo de trabajo Git](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Control de versiones y colaboración | ✅ |
|
||||
| [Back-end 5: Despliegue en Zeabur](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Despliegue de aplicaciones para producción | ✅ |
|
||||
| [Back-end 6: Herramientas CLI modernas](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Aceleración del desarrollo con herramientas AI | ✅ |
|
||||
| [Back-end 7: Integración de pagos con Stripe](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Procesos de cobro y liquidación básicos | 🚧 |
|
||||
| [Proyecto 1: Aplicación Full-stack completa](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Web App completa lista para producción | 🚧 |
|
||||
| [Proyecto 2: UI Library + Trae](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Producto independiente con auth y pagos | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>III. Desarrollador avanzado</strong></summary>
|
||||
|
||||
| Capítulo | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [Avanzado 1: MCP & Claude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | Extensión de capacidades del IDE | 🚧 |
|
||||
| [Avanzado 2: Tareas de larga duración](../../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Configuración de tareas de codificación estables | 🚧 |
|
||||
| [Avanzado 3: WeChat Mini Program](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Ecosistema y lanzamiento de mini programas | ✅ |
|
||||
| [Avanzado 4: Mini Program con Back-end](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Lógica de negocio completa en mini programas | 🚧 |
|
||||
| [Avanzado 5: Android App Development](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Desarrollo unificado con Expo | ✅ |
|
||||
| [Avanzado 6: iOS App Development](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Desarrollo unificado con Expo | ✅ |
|
||||
| [Avanzado 7: Web personal y blog académico](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | Construcción de marca personal en línea | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
## 🛠️ Cómo aprender
|
||||
|
||||
- Según tu nivel, elige los capítulos relevantes para leer y practicar.
|
||||
|
||||
## 💻 Configuración local
|
||||
|
||||
### Método moderno
|
||||
|
||||
En tu AI IDE (VS Code, Cursor, Trae), usa el siguiente prompt:
|
||||
|
||||
```
|
||||
Por favor ayúdame a ejecutar el servicio local de este proyecto
|
||||
Por favor, ayúdame a ejecutar el servicio local de este proyecto.
|
||||
```
|
||||
|
||||
### Método Antiguo
|
||||
### Método tradicional
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. Abre tu navegador y visita `http://localhost:3000` para ver.
|
||||
3. Abre `http://localhost:3000` en tu navegador.
|
||||
|
||||
## 🤝 Contribuir
|
||||
|
||||
- Si descubres algún problema, o crees que hay algo que se pueda mejorar en este proyecto, puedes enviar un Issue para dar feedback. Si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
|
||||
- Si quieres contribuir a este proyecto, puedes enviar un Pull Request, si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
|
||||
- Si estás muy interesado en Datawhale y quieres iniciar un nuevo proyecto, por favor sigue la [guía de proyectos de código abierto de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||
- Si encuentras problemas, por favor abre un Issue.
|
||||
- Si quieres contribuir, envía un Pull Request.
|
||||
|
||||
## 🙏 Gracias a Cada Contribuyente
|
||||
## 🙏 Agradecimientos
|
||||
|
||||
- [散步-Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
|
||||
- Fang Ke-Profesor guía (Miembro de Datawhale, Universidad de Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25)（Parte de proyectos prácticos-Universidad de Tsinghua）
|
||||
- Zhao Zhilin（Parte de proyectos prácticos-Universidad de Tsinghua）
|
||||
- [Li Yixuan](https://yixuan20.github.io/)（Diseño artístico de página-Universidad de Tsinghua）
|
||||
- Todos los compañeros del grupo beta de AI Vibe Coding 101 que proporcionaron sugerencias y experiencia
|
||||
- [Sanbu - Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
|
||||
- Fang Ke - Asesor (Miembro de Datawhale, Univ. de Tsinghua)
|
||||
- Todo el equipo de diseño y pruebas por su apoyo ❤️
|
||||
|
||||
### Agradecimientos Especiales
|
||||
<div align="center">
|
||||
|
||||
- Gracias a [@Sm1les](https://github.com/Sm1les) por su ayuda y apoyo a este proyecto
|
||||
- Gracias a todos los desarrolladores que han contribuido a este proyecto ❤️
|
||||
<p>
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
||||
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
||||
</p>
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
@@ -201,13 +359,13 @@ Por favor ayúdame a ejecutar el servicio local de este proyecto
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 Contáctanos</span>
|
||||
## <span id="contact">📧 Contacto</span>
|
||||
|
||||
<div align=center>
|
||||
<p>Si tienes preguntas, sugerencias, quejas, o quieres comunicarte, por favor escanea el código QR a continuación</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
<p>Si tienes sugerencias o quieres colaborar, escanea el código QR:</p>
|
||||
<img src="../../assets/wechat.png" width="280">
|
||||
|
||||
<p>Escanea el código QR a continuación para seguir la cuenta oficial: Datawhale</p>
|
||||
<p>Sigue a Datawhale en WeChat:</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
@@ -216,16 +374,16 @@ Por favor ayúdame a ejecutar el servicio local de este proyecto
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="Licencia Creative Commons"
|
||||
alt="Licencia CC"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
Este trabajo está licenciado bajo una
|
||||
Este trabajo está bajo una
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional
|
||||
</a>
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+34
-190
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _De zéro, apprentissage par projet, construire votre premier produit IA_
|
||||
# Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Commencer la lecture en ligne (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Tutoriel interactif</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne</a> ·
|
||||
<a href="#-navigation-du-contenu">Carte d'apprentissage</a> ·
|
||||
<a href="#-navigation">Carte d'apprentissage</a> ·
|
||||
<a href="#contact">Communauté</a>
|
||||
</p>
|
||||
|
||||
@@ -38,196 +36,42 @@
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>Carte d'apprentissage exclusive pour débutants</strong>
|
||||
<br>
|
||||
<sub>Guidage à partir de zéro, planification claire, dites adieu à "apprendre et oublier"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>Tutoriel graphique pas à pas</strong>
|
||||
<br>
|
||||
<sub>Explications détaillées, comme un tuteur privé à vos côtés</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 🚀 Présentation du Projet
|
||||
À l'ère de l'IA, les personnes qui transforment les idées en produits sont souvent celles qui font le premier pas. **Easy-Vibe est né pour cela.**
|
||||
|
||||
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 😢.
|
||||
| Étape | Compétences clés | Résultat |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **É tape 1** | Intro programmation IA, pensée produit | Mini-jeux, prototypes Web (Débutant & PM) |
|
||||
| **Étape 2** | Développement Full-stack, IA, Bases de données | Application IA Full-stack complète |
|
||||
| **Étape 3** | Claude Code avancé, Mobiles & Mini-progs | Applications multiplateformes niveau production |
|
||||
|
||||
Ce tutoriel est spécialement conçu pour vous mener de 0 à 1, maîtrisant progressivement les techniques de Vibe Coding :
|
||||
|
||||
- **Étape 1** : Des **mini-jeux aux prototypes web**, maîtriser les bases de la programmation IA et la pensée produit
|
||||
- **É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
|
||||
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### Annexe Générale
|
||||
|
||||
[Dictionnaire des capacités IA : concepts centraux IA courants, termes et explications de scénarios](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
|
||||
### 1. Entrée débutant et prototype de produit
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [Préface : Carte d'apprentissage](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Guide général du parcours d'apprentissage | ✅ |
|
||||
| [Débutant 1 : L'ère de l'IA, savoir parler c'est savoir programmer](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Découvrir pour la première fois les capacités de programmation IA à travers des cas comme Snake | ✅ |
|
||||
| [Débutant 2 : Découvrir les outils IDE IA](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Apprendre à utiliser l'IDE, créer des mini-jeux localement | ✅ |
|
||||
| [Débutant 3 : Créer un prototype soi-même](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 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](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Apprendre à connecter des capacités IA courantes (texte, image, vidéo) | ✅ |
|
||||
| [Débutant 5 : Projet complet pratique](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 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](docs/zh-cn/stage-1/1.5-final-project/index.md) | Implémenter complètement l'application, présenter les effets de l'application | ✅ |
|
||||
|
||||
#### Annexes : Pensée Business
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :----- |
|
||||
| [Annexe A : Pensée Produit et Conception de Solution](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Cadres de pensée nécessaires pour créer un produit de zéro à un | ✅ |
|
||||
| [Annexe B : Référence des Scénarios d'Application AI dans l'Industrie (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Comprendre les applications AI dans différentes industries | ✅ |
|
||||
| [Annexe C : Référence d'Inspiration des Scénarios de Consommation AI (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Explorer les applications AI dans les produits grand public | ✅ |
|
||||
|
||||
#### Annexes : Solutions Techniques
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------- | :----- |
|
||||
| [Annexe D : Que Faire en Cas d'Erreur lors de l'Écriture de Code](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Erreurs courantes en Vibe Coding et méthodes de dépannage | ✅ |
|
||||
| [Annexe E : Comparaison de 7 Outils de Programmation AI](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Comparer et tester les principales plateformes de programmation AI | ✅ |
|
||||
| [Annexe F : Concevoir des Sites Web avec des Agents de Design et de Programmation](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Apprendre à utiliser les agents AI de manière collaborative | ✅ |
|
||||
|
||||
### 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](docs/zh-cn/stage-2/frontend/2.0-lovart-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](docs/zh-cn/stage-2/frontend/2.1-figma-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](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 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](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | É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](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 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](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | 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](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : 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](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) : 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](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Gérer le code dans un flux de travail Git, effectuer le contrôle de version et la collaboration | ✅ |
|
||||
| [Backend 5 : Déploiement Zeabur](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Déployer l'application sur Zeabur pour la mettre en ligne | ✅ |
|
||||
| [Backend 6 : Outils de développement CLI modernes](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : 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](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) : 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](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) : 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](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) : 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](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : 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](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : 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 Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-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](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) : 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](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) : 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](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-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](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) : 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](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) : 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](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) : 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](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : 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](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||
|
||||
## 🙏 Merci à Chaque Contributeur
|
||||
|
||||
- [散步-Chef de projet](https://github.com/sanbuphy) (Membre Datawhale)
|
||||
- Fang Ke-Professeur guide (Membre Datawhale, Université Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25)（Partie projets pratiques-Université Tsinghua）
|
||||
- Zhao Zhilin（Partie projets pratiques-Université Tsinghua）
|
||||
- [Li Yixuan](https://yixuan20.github.io/)（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](https://github.com/Sm1les) pour son aide et son soutien à ce projet
|
||||
- Merci à tous les développeurs qui ont contribué à ce projet ❤️
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 Contactez-nous</span>
|
||||
|
||||
<div align=center>
|
||||
<p>Si vous avez des questions, des suggestions, des plaintes, ou souhaitez échanger, veuillez scanner le code QR ci-dessous</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
|
||||
<p>Scannez le code QR ci-dessous pour suivre le compte officiel : Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
## 📄 LICENCE
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="Licence Creative Commons"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
Ce travail est sous licence
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
*(Voir les détails dans les autres langues ou le dépôt principal)*
|
||||
|
||||
+289
-108
@@ -4,17 +4,15 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _ゼロから、プロジェクトベース学習、最初の AI 製品を構築_
|
||||
# Easy-Vibe : 0から1で学ぶVibe Coding
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読み始める (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">インタラクティブチュートリアル</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -36,164 +34,347 @@
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>初心者のための学習マップ</strong>
|
||||
<br>
|
||||
<sub>ゼロベースのガイド、明確なパス設計、「学んで忘れる」からの脱却</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>ステップバイステップの図解チュートリアル</strong>
|
||||
<br>
|
||||
<sub>丁寧な図解解説、まるで専属講師がついているかのように進められます</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>没入型シミュレーションプログラミング</strong>
|
||||
<br>
|
||||
<sub>仮想マウスによる自動ナビゲーションで、IDEのコアな使い方を素早く習得</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>「見える」AI原理</strong>
|
||||
<br>
|
||||
<sub>アルゴリズムの原理をアニメーション化、AIがいかにして画像を「描く」のかを一目で理解</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>ゲームのようにRAGを学ぶ</strong>
|
||||
<br>
|
||||
<sub>独自の対話型コンポーネントで、クリックするだけでRAGのデータフローを明確に確認</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可視化されたターミナルの原理</strong>
|
||||
<br>
|
||||
<sub>コマンドライン操作を可視化し、バックエンドのロジックと原理を直感的に表示</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">こちらからStar</a> を追加して更新を応援してください ❤️</h3>
|
||||
</div>
|
||||
|
||||
## 🚀 プロジェクト紹介
|
||||
AI時代、アイデアを製品に変える人は、必ずしも技術が最も強い人ではなく、最初に行動を起こした人です。
|
||||
|
||||
AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢
|
||||
AIアシスタントがいても、「コードが読めない」「環境構築ができない」と諦めてしまう人が多くいます。**Easy-Vibeはそのために生まれました。** 全員がゼロベースであることを前提に、最初の一行のコードから、前後端のロジックの理解、そして最終的な製品のリリースまで、手取り足取りガイドします。
|
||||
|
||||
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：
|
||||
- **対象者**: 初心者、プロダクトマネージャー、フロントエンド/バックエンド/フルスタックエンジニア
|
||||
- **テーマ**: AIプログラミング、フルスタックWebアプリ開発、AI Agent、ワークフロー、RAGシステム
|
||||
|
||||
- **第 1 段階**：**ミニゲームからWeb プロトタイプまで**、AI プログラミングの基礎とプロダクト思考を習得
|
||||
- **第 2 段階**：**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
|
||||
- **第 3 段階**：**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ
|
||||
---
|
||||
|
||||
私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。
|
||||
Easy-Vibeは以下の段階を経て、あなたを0から1へと導きます：
|
||||
|
||||
> **本プロジェクトは主に 3 種類の学習者を対象としています：**
|
||||
>
|
||||
> - **初心者（一般人 / プロダクト・運用担当者）**：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
|
||||
> - **初中級開発者（一定の基礎がある学生と開発者）**：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
|
||||
> - **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：高度な開発技術、マルチプラットフォーム開発
|
||||
| ステージ | コアスキル | 成果物 |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **第一段階** | AIプログラミング入門、プロダクト思考、プロトタイプ設計 | インタラクティブゲーム、Webアプリのプロトタイプ (初心者 & PM) |
|
||||
| **第二段階** | フルスタック開発、AI統合、データベース | 完全なフルスタックAIアプリケーション |
|
||||
| **第三段階** | Claude Code活用、ミニプログラム・Android開発 | 本番級のマルチプラットフォームアプリケーション |
|
||||
| **付録** | コンピュータとAIの基礎概念の理解を支援 | 9大知識領域、80以上のインタラクティブ特集 |
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-02-25]** [付録知識ベース](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)を更新。9大知識領域、80以上のインタラクティブ特集を網羅。
|
||||
- **[2026-01-27]** AndroidおよびiOSプラットフォームのアプリ開発チュートリアルを追加。
|
||||
- **[2026-01-19]** Prompt Engineering、AIの進化史、認証設計、Gitの原理などの一連のインタラクティブ・デモ・コンポーネントをリリース。
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[2026-01-16]** プロジェクト構造を再構築し、初心者のハードルを下げるための「初心者入門」の章を正式に確立。
|
||||
- **[2026-01-14]** 第一段階「製品プロトタイプの構築」ドキュメントの大規模な更新を完了。
|
||||
- **[2026-01-13]** ドキュメントアーキテクチャの再構築を完了し、多言語(i18n)を全面的にサポート。
|
||||
- **[2026-01-01]** プロジェクトのコア学習マップ (Learning Map) をリリースし、学習パスを明確化。
|
||||
</details>
|
||||
|
||||
### 📖 コンテンツナビゲーション
|
||||
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 総付録
|
||||
### 📚 付録知識ベース
|
||||
|
||||
[AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
> **9大知識領域**、**80以上のインタラクティブ特集**を網羅し、アニメーションと可視化コンポーネントを通じて、コンピュータの低層からAIの最前線までのコア概念を直感的に理解するのを助けます。
|
||||
>
|
||||
> 👉 [完全な付録を表示](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI能力辞書](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### 一、初心者入門とプロダクトプロトタイプ
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 コンピュータ基礎</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">トランジスタからCPUへ</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">オペレーティングシステム</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">データのエンコード・保存・伝送</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">ネットワーク：二台のPCはどう対話するか</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">データ構造</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">アルゴリズム思考入門</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 開発ツール</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git：コードのタイムマシン</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">コマンドラインとShellスクリプト</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">パッケージマネージャー</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">デバッグの芸術</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">正規表現</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">環境変数とPATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 ブラウザとフロントエンド</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">JavaScript言語の深掘り</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">ブラウザレンダリングパイプライン</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">フロントエンドフレームワークの比較</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">グラフィックスとアニメーション</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Webパフォーマンスの測定と最適化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">フロントエンドエンジニアリングの全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ サーバーとバックエンド</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTPプロトコル</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API設計の哲学</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">認証と認可の体系</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">並行・非同期・マルチスレッド</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">メッセージキューとイベント駆動</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">バックエンド階層構造</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 データ</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">データベース原理</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">データトラッキングとユーザー行動収集</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">データ分析の基礎</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/Bテストと実験駆動</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">データの可視化とダッシュボード</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ アーキテクチャとシステム設計</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">モノリスからマイクロサービスへの進化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">分散システムの課題</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">高可用性と災害復旧</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">システム設計メソッドロジー</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ インフラと運用</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Dockerコンテナ化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetesオーケストレーション</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CDオートメーション</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">ドメイン、DNS、HTTPS</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">モニタリング、ログ、アラート</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infrastructure as Code (IaC)</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工知能</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">大規模言語モデルの仕組み</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformerとアテンション機構</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAGアーキテクチャ</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agentとツール呼び出し</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">プロンプトエンジニアリング</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">画像生成の原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 エンジニアの素養</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">コード品質とリファクタリング</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">テスト戦略</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">デザインパターン</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">セキュリティ思考と攻防の基礎</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">技術ドキュメントの作成</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">オープンソースでの協力</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--- |
|
||||
| [前書：学習マップ](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 全体学習パスのガイド | ✅ |
|
||||
| [初級一：AI 時代、話せるだけでプログラミングできる](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ |
|
||||
| [初級二：AI IDE ツールを知る](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ |
|
||||
| [初級三：手を動かしてプロトタイプを作る](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ |
|
||||
| [初級四：プロトタイプに AI 能力を追加](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的な AI 能力（テキスト、画像、動画）の接続方法を習得 | ✅ |
|
||||
| [初級五：完全プロジェクト実戦](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ |
|
||||
| [大課題：完全な Web アプリケーションプロトタイプを作成し展示](docs/zh-cn/stage-1/1.5-final-project/index.md) | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ |
|
||||
### 一、ゼロからの入門
|
||||
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [前書き：学習マップ](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 全体的な学習パスのナビゲーション | ✅ |
|
||||
| [初級一：AI時代、「話す」ことがプログラミングになる](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じてAIプログラミングの能力を体験 | ✅ |
|
||||
| [初級二：良いアイデアを探す](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | 製品のアイデアを探し、検証し、価値のあるプロジェクトを見つける方法を学ぶ | ✅ |
|
||||
| [初級三：AI IDEツールを知る](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDEの使い方を学び、ローカルでミニゲームを作成 | ✅ |
|
||||
| [初級四：プロトタイプを自作する](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 要件分析からAIによる単一ページ生成、そして複数ページの製品プロトタイプへ | ✅ |
|
||||
| [初級五：プロトタイプにAI能力を加える](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的なAI能力（テキスト、画像、動画）の連携方法を学ぶ | ✅ |
|
||||
| [初級六：プロジェクトの実践](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 実際のシーンをシミュレートし、ユーザーからのフィードバックを受けてプロジェクトを完成させる | ✅ |
|
||||
|
||||
#### 付録：ビジネス思考
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :--------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [付録 A：プロダクト思考とソリューション設計](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク | ✅ |
|
||||
| [付録 B：AI 業界アプリケーションシナリオ参考 (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | さまざまな業界での AI 応用事例を理解する | ✅ |
|
||||
| [付録 C：AI 消費シナリオインスピレーション参考 (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 消費者向け製品での AI 応用事例を探索する | ✅ |
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [付録A：プロダクト思考とソリューション設計](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 製品をゼロから作る際に考慮すべき思考フレームワーク | ✅ |
|
||||
| [付録B：AI業界の活用シーン参考 (B向け)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | さまざまな業界におけるAIの活用シーンを理解する | ✅ |
|
||||
| [付録C：AIコンシューマー向けシーンのインスピレーション (C向け)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | コンシューマー向け製品におけるAIの活用シーンを探求する | ✅ |
|
||||
|
||||
#### 付録：技術ソリューション
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [付録 D：コード作成時にエラーが発生した場合の対処法](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Vibe Coding における一般的なエラーとトラブルシューティング方法 | ✅ |
|
||||
| [付録 E：7 つの AI プログラミングツール比較](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 主流の AI プログラミングプラットフォームの比較テスト | ✅ |
|
||||
| [付録 F：デザインとプログラミングエージェントでウェブサイトを設計](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AI エージェントの協調的な使用方法を学ぶ | ✅ |
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [付録D：エラーに遭遇した時の対処法](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | vibe codingにおける一般的なエラーとその調査方法 | ✅ |
|
||||
| [付録E：AIプログラミングツール7選の比較](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 主要なAIプログラミングプラットフォームの比較テスト | ✅ |
|
||||
| [付録F：デザインとプログラミングAgentによるサイト設計](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AIエージェントとの協調作業の方法を学ぶ | ✅ |
|
||||
|
||||
### 二、初中級開発エンジニア
|
||||
<details>
|
||||
<summary><strong>二、初・中級エンジニア</strong></summary>
|
||||
|
||||
#### フロントエンド部分
|
||||
#### フロントエンド
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [フロントエンド零：lovart を使用して素材を生成](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 |
|
||||
| [フロントエンド一：Figma と MasterGo 入門](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 |
|
||||
| [フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 |
|
||||
| [フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 |
|
||||
| [フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ |
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [フロントエンド0：Lovartを使用した素材生成](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Lovartを使用してキャラクターや背景などのビジュアル素材を一括生成する方法を学ぶ | 🚧 |
|
||||
| [フロントエンド1：FigmaとMasterGo入門](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 設計ツールを使用して情報アーキテクチャとページ構造を整理する | 🚧 |
|
||||
| [フロントエンド2：最初の現代的アプリケーションの構築 - UIデザイン](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | デザイン案に基づいたコンポーネント化されたインターフェースの完成 | 🚧 |
|
||||
| [フロントエンド3：UIデザイン仕様とマルチプロダクトUI設計](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心に、システム化されたデザイン能力を磨く | 🚧 |
|
||||
| [フロントエンド4：ホグワーツの肖像画を一緒に作る](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | AI能力を組み込んだフロントエンドアプリをゼロから作成 | ✅ |
|
||||
|
||||
#### バックエンドとフルスタック部分
|
||||
#### バックエンドとフルスタック
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [バックエンド一：API とは](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ |
|
||||
| [バックエンド二：データベースから Supabase へ](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ |
|
||||
| [バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
|
||||
| [バックエンド四：Git ワークフロー](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ |
|
||||
| [バックエンド五：Zeabur デプロイ](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | アプリケーションを Zeabur にデプロイしてオンライン化 | ✅ |
|
||||
| [バックエンド六：モダン CLI 開発ツール](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | ✅ |
|
||||
| [バックエンド七：Stripe などの課金システムの統合方法](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 |
|
||||
| [大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 |
|
||||
| [大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成 | 🚧 |
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [バックエンド1：APIとは何か](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTPインターフェースとリクエスト・レスポンスモデルの理解 | ✅ |
|
||||
| [バックエンド2：データベースからSupabaseへ](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase上でのデータベースとAPIの実装 | ✅ |
|
||||
| [バックエンド3：大規模言語モデルによるインターフェースコードとドキュメントの生成](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | ドキュメントとコードの生成をAIで支援 | 🚧 |
|
||||
| [バックエンド4：Gitワークフロー](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Gitワークフローでのコード管理、バージョン管理と協力 | ✅ |
|
||||
| [バックエンド5：Zeaburへのデプロイ](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | アプリケーションをZeaburにデプロイして公開 | ✅ |
|
||||
| [バックエンド6：現代的なCLI開発ツール](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLIツールによる開発とデバッグの加速 | ✅ |
|
||||
| [バックエンド7：Stripeなどの決済システムの統合方法](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 決済システムを導入し、収益化の仕組みを完成させる | 🚧 |
|
||||
| [課題1：最初の現代的アプリケーション - フルスタックアプリ](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールの統合 | 🚧 |
|
||||
| [課題2：現代的フロントエンドコンポーネントライブラリ + Trae実践](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | ログイン、登録、決済をサポートする製品の独立開発 | 🚧 |
|
||||
|
||||
#### AI 能力付録
|
||||
#### AI能力付録
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [ AI 一：Dify 入門とナレッジベース統合](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow と基本 RAG を使ってツール系プロダクトを構築し、以降のアプリケーションアップグレードのモデルケースを作成 | ✅ |
|
||||
| [ AI 二：AI 辞典の検索とマルチモーダル API 統合を学ぶ](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 適切なモデルと API を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合 | 🚧 |
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [AI一：Dify入門と知識ベースの統合](../../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflowと基礎的なRAGを使用したツールの構築 | ✅ |
|
||||
| [AI二：AI辞書の引き方とマルチモーダルAPIの統合](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 適切なモデルとAPIの探し方、それらの統合方法を学ぶ | 🚧 |
|
||||
|
||||
### 三、上級開発エンジニア
|
||||
</details>
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [上級一：MCP と Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 |
|
||||
| [上級二：Coding Tools を長時間動作させる方法](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 |
|
||||
| [上級三：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChat ミニプログラムのエコシステムを理解し、公式テンプレートからリリースまでフロントエンドミニプログラムを完成 | ✅ |
|
||||
| [上級四：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 - バックエンド含む](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | ミニプログラムにデータベースとバックエンドロジックを統合し、完全な業務クローズドループを実現 | 🚧 |
|
||||
| [上級五：マルチプラットフォーム開発：Android アプリの構築方法](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 |
|
||||
| [上級六：マルチプラットフォーム開発：iOS アプリの構築方法](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成 | 🚧 |
|
||||
| [上級七：自分専用の個人ウェブページと学術ブログの構築方法](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築 | 🚧 |
|
||||
<details>
|
||||
<summary><strong>三、上級エンジニア</strong></summary>
|
||||
|
||||
#### AI 能力付録
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [上級一：MCPとClaude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCPとSkillsによるIDE能力の拡張 | 🚧 |
|
||||
| [上級二：Coding Toolsを長時間稼働させる方法](../../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 長時間実行されるタスクの設計と構成 | 🚧 |
|
||||
| [上級三：マルチプラットフォーム開発：WeChatミニプログラムの構築](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChatミニプログラムのエコシステムと開発フロー | ✅ |
|
||||
| [上級四：マルチプラットフォーム開発：バックエンドを含むWeChatミニプログラム](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | ミニプログラムへのデータベースとバックエンドロジックの導入 | 🚧 |
|
||||
| [上級五：マルチプラットフォーム開発：Androidアプリの構築](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expoなどのツールを使用したAndroidアプリ開発 | ✅ |
|
||||
| [上級六：マルチプラットフォーム開発：iOSアプリの構築](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expoなどのツールを使用したiOSアプリ開発 | ✅ |
|
||||
| [上級七：自分だけの個人ページと学術ブログの構築](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 技術選定から構築、デプロイまでを網羅 | 🚧 |
|
||||
|
||||
| 章 | 主要内容 | 状態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :--- |
|
||||
| [上級 AI 一：RAG とは、それがどのように動作するか](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 原理と一般的なアーキテクチャを体系的に理解し、複雑なアプリケーションに知識検索基盤を提供 | ✅ |
|
||||
| [上級 AI 二：中上級 RAG とワークフロー編成：LangGraph を例に](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph などのツールを使用してマルチステップワークフローと中上級 RAG システムを設計 | 🚧 |
|
||||
#### AI能力付録
|
||||
|
||||
| 章 | 主要な内容 | 状態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
|
||||
| [上級AI一：RAGとは何か、どのように動作するか](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAGの原理と一般的なアーキテクチャの体系的な理解 | ✅ |
|
||||
| [上級AI二：中・上級RAGとワークフローオーケストレーション：LangGraphを例に](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraphを使用した複雑なワークフローと高度なRAGの設計 | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
## 🛠️ 学習方法
|
||||
|
||||
- 個人の能力に応じて、関連する章を選択的に読み实践し、問題があれば Issue で質問してください。
|
||||
- 自身のレベルに合わせて章を選択して学習し、実践してください。疑問点があればIssueで質問してください。
|
||||
|
||||
## 💻 本课件をローカルで起動
|
||||
## 💻 ローカルでの起動方法
|
||||
|
||||
### モダン手法
|
||||
### 現代的な方法
|
||||
|
||||
AI IDE ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動：
|
||||
AI IDEの対話ボックス（VS Code, Cursor, Traeなど）で以下のプロンプトを入力してください：
|
||||
|
||||
```
|
||||
このプロジェクトのローカルサービスを実行してください
|
||||
このプロジェクトのローカルサービスを起動してください。
|
||||
```
|
||||
|
||||
### 旧手法
|
||||
### 従来の方法
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. ブラウザを開いて `http://localhost:3000` にアクセスして確認。
|
||||
3. ブラウザで `http://localhost:3000` にアクセスしてください。
|
||||
|
||||
## 🤝 貢献に参加
|
||||
## 🤝 貢献について
|
||||
|
||||
- もし問題を発見した場合、または本プロジェクトを改善できる点があると思われる場合は、Issue を提出してフィードバックしてください。提出後に誰も返信しない場合は、[保母チーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)のメンバーに連絡してフィードバックとフォローアップを受けることができます~
|
||||
- もしあなたが本プロジェクトへの貢献に参加したい場合は、Pull Request を提出してください。提出後に誰も返信しない場合は、[保母チーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)のメンバーに連絡してフィードバックとフォローアップを受けることができます~
|
||||
- もしあなたが Datawhale に非常に興味があり、新しいプロジェクトを開始したい場合は、[Datawhale オープンソースプロジェクトガイド](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)に従って操作してください~
|
||||
- 問題を見つけた場合や、改善案がある場合は、Issueでフィードバックをお願いします。
|
||||
- 貢献を希望される場合は、Pull Requestを送信してください。
|
||||
- 新しいプロジェクトの立ち上げに興味がある場合は、Datawhaleオープンソースプロジェクトガイドに従ってください。
|
||||
|
||||
## 🙏 すべての貢献者に感謝
|
||||
## 🙏 貢献者への感謝
|
||||
|
||||
- [散步-プロジェクト責任者](https://github.com/sanbuphy) (Datawhale メンバー)
|
||||
- 方可-指導教官（Datawhale メンバー、清華大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清華大学）
|
||||
- 赵芷霖（実践プロジェクト部分-清華大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（ページ美術デザイン-清華大学）
|
||||
- AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち
|
||||
- [散歩-プロジェクトリーダー](https://github.com/sanbuphy) (Datawhaleメンバー)
|
||||
- 方可-アドバイザー (Datawhaleメンバー, 清華大学)
|
||||
- [Yerim Kang](https://github.com/yerim25) (実践プロジェクト部分-清華大学)
|
||||
- 趙芷霖 (実践プロジェクト部分-清華大学)
|
||||
- [李亦萱](https://yixuan20.github.io/) (ページデザイン-清華大学)
|
||||
- その他、suggestionをくださったすべてのベータテスターの皆様に感謝します。
|
||||
|
||||
### 特別な感謝
|
||||
|
||||
- [@Sm1les](https://github.com/Sm1les) さんの本プロジェクトへの支援と支持に感謝
|
||||
- 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️
|
||||
- [@Sm1les](https://github.com/Sm1les) 氏の多大なるサポートに感謝します。
|
||||
- プロジェクトに貢献してくださったすべての開発者、スターをくださった皆様に感謝します ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
||||
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
||||
</p>
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
@@ -204,10 +385,10 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
|
||||
## <span id="contact">📧 お問い合わせ</span>
|
||||
|
||||
<div align=center>
|
||||
<p>ご質問、ご提案、不満、または交流をご希望の場合は、以下の QR コードをスキャンしてください</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
<p>質問、提案、交流をご希望の方は、以下のQRコードをスキャンしてください</p>
|
||||
<img src="../../assets/wechat.png" width="280">
|
||||
|
||||
<p>以下の QR コードをスキャンして公式アカウントをフォローしてください：Datawhale</p>
|
||||
<p>公式アカウントをフォロー：Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
@@ -216,7 +397,7 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="クリエイティブ・コモンズ・ライセンス"
|
||||
alt="知識共有ライセンス"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
@@ -224,7 +405,7 @@ AI IDE ダイアログボックス（vscode、cursor、trae など）で、以
|
||||
<br />
|
||||
本作品は
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンス
|
||||
クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際 ライセンス
|
||||
</a>
|
||||
の下でライセンスされています。
|
||||
</div>
|
||||
|
||||
+304
-122
@@ -4,23 +4,21 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _0부터, 프로젝트 기반 학습, 첫 번째 AI 제품 구축_
|
||||
# Easy-Vibe : 0에서 1까지 배우는 Vibe Coding
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인으로 읽기 시작하기 (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">대화형 튜토리얼</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">온라인으로 읽기</a> ·
|
||||
<a href="#-콘텐츠네비게이션">학습 맵</a> ·
|
||||
<a href="#contact">커뮤니티 소통</a>
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기</a> ·
|
||||
<a href="#-콘텐츠-탐색">학습 지도</a> ·
|
||||
<a href="#contact">커뮤니티 교류</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -39,161 +37,345 @@
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
## 🚀 프로젝트 소개
|
||||
|
||||
AI로 코드를 작성하려고 할 때 오류가 계속 발생하고, 포기하고 싶어지며, 프로그램을 실제로 온라인에 배포하는 방법을 명확히 알지 못할 때 😢
|
||||
|
||||
이 튜토리얼은 0에서 1까지 Vibe Coding 기술을 점진적으로 마스터할 수 있도록 특별히 설계되었습니다:
|
||||
|
||||
- **1단계**: **미니게임부터 웹 프로토타입까지**, AI 프로그래밍 기초와 제품 사고 습득
|
||||
- **2단계**: **프론트엔드/백엔드 개발과 AI 능력**과 관련된 Vibe Coding 테크닉 학습, 완전한 애플리케이션 완성
|
||||
- **3단계**: **멀티플랫폼 복잡 애플리케이션** 구축 방법 마스터, 프로덕션급 애플리케이션으로
|
||||
|
||||
우리는 Vibe Coding을 마스터하고 체계적인 훈련을 결합하면, 한 사람이 프론트엔드 개발, 백엔드 개발, AI 능력 통합, 프로덕트 디자인을 모두 갖춘 개발자가 될 수 있다고 믿습니다.
|
||||
|
||||
> **이 프로젝트는 주로 세 가지 유형의 학습자를 대상으로 합니다:**
|
||||
>
|
||||
> - **초보자(일반인 / 프로덕트 및 운용 담당자)**: 비기술 초보자가 핵심 개념을 이해하고 첫 번째 프로덕트 프로토타입을 완성하도록 지원
|
||||
> - **초중급 개발자(일정 기초가 있는 학생과 개발자)**: 프론트엔드/백엔드 Vibe Coding과 AI 능력 지식 습득
|
||||
> - **고급 개발자(기업/스타트업, 오픈소스/독립 개발자)**: 고급 개발 기술, 멀티플랫폼 개발
|
||||
|
||||
### 📖 콘텐츠 네비게이션
|
||||
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>초보자 전용 학습 지도</strong>
|
||||
<br>
|
||||
<sub>기초 지식 제로를 위한 전용 안내, 명확한 경로 설계, "배우고 잊는" 악순환 탈출</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>친절한 이미지 튜토리얼</strong>
|
||||
<br>
|
||||
<sub>상세한 이미지 설명, 마치 개인 과외 선생님이 옆에 있는 것처럼 따라 하기만 하면 습득</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>몰입형 시뮬레이션 프로그래밍</strong>
|
||||
<br>
|
||||
<sub>가상 마우스 자동 탐색으로 IDE 핵심 사용법을 빠르게 습득</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>눈으로 보는 AI 원리</strong>
|
||||
<br>
|
||||
<sub>알고리즘 원리를 애니메이션화하여 AI가 이미지를 그리는 과정을 한눈에 이해</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>게임처럼 배우는 RAG</strong>
|
||||
<br>
|
||||
<sub>독자적인 인터랙티브 컴포넌트로 클릭만 하면 RAG 데이터 흐름을 명확히 확인</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>시각화된 터미널 원리</strong>
|
||||
<br>
|
||||
<sub>명령줄 조작을 시각화하여 백엔드 로직과 원리를 직관적으로 표시</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">이곳을 클릭해 Star</a>를 눌러 업데이트를 응원해주세요 ❤️</h3>
|
||||
</div>
|
||||
|
||||
### 총 부록
|
||||
AI 시대에 아이디어를 제품으로 만드는 사람은 기술이 가장 뛰어난 사람이 아니라 가장 먼저 행동에 옮기는 사람입니다.
|
||||
|
||||
[AI 능력 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
AI 어시스턴트가 있어도 "코드를 모르겠다", "환경 설정을 못 하겠다"며 포기하는 분들이 많습니다. **Easy-Vibe는 이를 위해 태어났습니다.** 모든 사람이 기초 지식이 없다는 가정하에, 첫 줄의 코드를 작성하는 것부터 전후방 로직 이해, 그리고 최종 제품 배포까지 손을 잡고 안내해 드립니다.
|
||||
|
||||
### 1. 초보자 입문 및 제품 프로토타입
|
||||
- **대상**: 초보자, 제품 관리자(PM), 프론트엔드/백엔드/풀스택 개발자
|
||||
- **주제**: AI 프로그래밍, 풀스택 Web 애플리케이션 개발, AI Agent, 워크플로우 및 RAG 시스템
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :--------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [서론: 학습 맵](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 가이드 | ✅ |
|
||||
| [초급 1: AI 시대, 말할 수 있으면 프로그래밍 가능](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 등 사례를 통해 AI 프로그래밍 능력을 처음 체험 | ✅ |
|
||||
| [초급 2: AI IDE 도구 이해](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 배우기, 로컬에서 미니게임 제작 | ✅ |
|
||||
| [초급 3: 직접 프로토타입 만들기](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 요구사항 분석, AI 단일 페이지 생성, 다중 페이지 프로덕트 프로토타입 생성으로 | ✅ |
|
||||
| [초급 4: 프로토타입에 AI 능력 추가](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 일반적인 AI 능력(텍스트, 이미지, 비디오) 연결 방법 습득 | ✅ |
|
||||
| [초급 5: 완전 프로젝트 실전](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 실제 시나리오 시뮬레이션, 사용자 피드백 수용 반복 개선, 프로젝트 완성 | ✅ |
|
||||
| [대 과제: 완전한 웹 애플리케이션 프로토타입 만들기 및 전시](docs/zh-cn/stage-1/1.5-final-project/index.md) | 애플리케이션 완전 구현, 애플리케이션 효과 전시 | ✅ |
|
||||
---
|
||||
|
||||
Easy-Vibe는 다음 단계들을 통해 당신을 0에서 1로 안내합니다:
|
||||
|
||||
| 단계 | 핵심 기술 | 산출물 |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **1단계** | AI 프로그래밍 입문, 제품 사고, 프로토타입 설계 | 대화형 미니 게임, Web 앱 프로토타입 (초보자 & PM) |
|
||||
| **2단계** | 풀스택 개발, AI 통합, 데이터베이스 | 완전한 풀스택 AI 애플리케이션 |
|
||||
| **3단계** | Claude Code 심화, 미니 프로그램 및 안드로이드 개발 | 프로덕션급 멀티 플랫폼 애플리케이션 |
|
||||
| **부록** | 컴퓨터 및 AI 기초 개념 이해 지원 | 9대 지식 영역, 80개 이상의 대화형 주제 |
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-02-25]** [부록 지식 창고](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) 업데이트. 9대 지식 영역, 80개 이상의 대화형 주제 포함.
|
||||
- **[2026-01-27]** 안드로이드 및 iOS 플랫폼 앱 개발 튜토리얼 추가.
|
||||
- **[2026-01-19]** Prompt Engineering, AI 진화사, 인증 설계, Git 원리 등 일련의 대화형 데모 컴포넌트 출시.
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[2026-01-16]** 프로젝트 구조 재구성, "초보자 입문" 장을 공식적으로 설정하여 진입 장벽 완화.
|
||||
- **[2026-01-14]** 1단계 "제품 프로토타입 구축" 문서 대규모 업데이트 완료.
|
||||
- **[2026-01-13]** 문서 아키텍처 재구축 완료, 다국어(i18n) 전면 지원.
|
||||
- **[2026-01-01]** 프로젝트 핵심 학습 지도 (Learning Map) 출시, 학습 경로 명확화.
|
||||
</details>
|
||||
|
||||
### 📖 콘텐츠 탐색
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 📚 부록 지식 창고
|
||||
|
||||
> **9대 지식 영역**, **80개 이상의 대화형 주제**를 통해 컴퓨터 하부 구조부터 AI 최전선까지의 핵심 개념을 애니메이션과 시각화 컴포넌트로 직관적으로 이해할 수 있도록 돕습니다.
|
||||
>
|
||||
> 👉 [전체 부록 보기](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 능력 사전](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 컴퓨터 기초</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">트랜지스터에서 CPU까지</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">운영체제</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">데이터 인코딩, 저장 및 전송</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">네트워크: 두 컴퓨터의 대화법</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">자료구조</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">알고리즘 사고 입문</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 개발 도구</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git: 코드 타임머신</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">명령줄 및 Shell 스크립트</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">패키지 매니저</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">디버깅의 예술</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">정규표현식</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">환경 변수와 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 브라우저 및 프론트엔드</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">JavaScript 언어 심화</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">브라우저 렌더링 파이프라인</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">프론트엔드 프레임워크 비교</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">그래픽 및 애니메이션</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">웹 성능 측정 및 최적화</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">프론트엔드 엔지니어링 전체상</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 서버 및 백엔드</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTP 프로토콜</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API 설계 철학</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">인증 및 인가 체계</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">병행성, 비동기 및 멀티스레딩</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">메시지 큐 및 이벤트 드리븐</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">백엔드 계층 구조</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 데이터</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">데이터베이스 원리</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">데이터 트래킹 및 사용자 행동 수집</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">데이터 분석 기초</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/B 테스트 및 실험 기반</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">데이터 시각화 및 대시보드</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 아키텍처 및 시스템 설계</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">모놀리스에서 마이크로서비스로의 진화</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">분산 시스템의 도전 과제</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">고가용성 및 재해 복구</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">시스템 설계 방법론</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 인프라 및 운영</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Docker 컨테이너화</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetes 오케스트레이션</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CD 자동화</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">도메인, DNS 및 HTTPS</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">모니터링, 로그 및 알람</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">코드형 인프라 (IaC)</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 인공지능</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">거대 언어 모델의 작동 원리</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer와 어텐션 메커니즘</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAG 아키텍처</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agent와 도구 호출</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">프롬프트 엔지니어링</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">이미지 생성 원리</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 엔지니어적 소양</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">코드 품질 및 리팩토링</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">테스트 전략</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">디자인 패턴</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">보안 사고 및 공방 기초</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">기술 문서 작성</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">오픈소스 협업</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### 1단계: 제로 베이스 입문
|
||||
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [머리말: 학습 지도](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 안내 | ✅ |
|
||||
| [초급 1: AI 시대, 말이 곧 프로그래밍](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 사례를 통해 AI 프로그래밍 경험 | ✅ |
|
||||
| [초급 2: 좋은 아이디어 찾기](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | 제품 아이디어 탐색 및 검증 방법 습득 | ✅ |
|
||||
| [초급 3: AI IDE 도구 이해하기](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 습득, 로컬에서 미니 게임 제작 | ✅ |
|
||||
| [초급 4: 프로토타입 직접 만들기](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 요구사항 분석부터 AI 기반 프로토타입 생성까지 | ✅ |
|
||||
| [초급 5: 프로토타입에 AI 능력 더하기](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | AI 모델(텍스트, 이미지, 비디오) 연동 방법 습득 | ✅ |
|
||||
| [초급 6: 전체 프로젝트 실전](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 실제 시나리오 시뮬레이션 및 피드백 기반 개선 | ✅ |
|
||||
|
||||
#### 부록: 비즈니스 사고
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :---------------------------------------------------------------------------------------------------- | :-------------------------------------------------- | :--- |
|
||||
| [부록 A: 프로덕트 사고 및 솔루션 설계](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 0에서 1까지 프로덕트 만들 때 필요한 사고 프레임워크 | ✅ |
|
||||
| [부록 B: AI 산업 적용 시나리오 참조 (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | 다양한 산업에서 AI 적용 사례 이해 | ✅ |
|
||||
| [부록 C: AI 소비 시나리오 영감 참조 (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 소비자 제품에서 AI 적용 사례 탐색 | ✅ |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [부록 A: 제품 사고와 방안 설계](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 제품 제작 시 고려해야 할 사고 프레임워크 | ✅ |
|
||||
| [부록 B: AI 산업별 적용 사례 (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | 산업별 AI 활용 시나리오 이해 | ✅ |
|
||||
| [부록 C: AI 소비 시나리오 영감 (B2C)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 소비재 제품에서의 AI 활용 시나리오 탐색 | ✅ |
|
||||
|
||||
#### 부록: 기술 솔루션
|
||||
#### 부록: 기술 방안
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | :--- |
|
||||
| [부록 D: 코드 작성 시 오류 발생 시 대처 방법](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Vibe Coding의 일반적인 오류 및 문제 해결 방법 | ✅ |
|
||||
| [부록 E: 7가지 AI 프로그래밍 도구 비교](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 주요 AI 프로그래밍 플랫폼 비교 테스트 | ✅ |
|
||||
| [부록 F: 디자인 및 프로그래밍 에이전트로 웹사이트 설계](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AI 에이전트 협업 사용 방법 학습 | ✅ |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [부록 D: 코드 오류 발생 시 대처법](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Vibe coding 시 자주 발생하는 오류 및 해결법 | ✅ |
|
||||
| [부록 E: 7가지 AI 프로그래밍 도구 비교](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 주요 AI 프로그래밍 플랫폼 비교 테스트 | ✅ |
|
||||
| [부록 F: Agent를 활용한 웹사이트 설계](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AI 에이전트 협업 방법 습득 | ✅ |
|
||||
|
||||
### 2. 초중급 개발 엔지니어
|
||||
<details>
|
||||
<summary><strong>2단계: 중급 개발자</strong></summary>
|
||||
|
||||
#### 프론트엔드 부분
|
||||
#### 프론트엔드
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [프론트엔드 0: lovart 사용하여 소재 생성](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | lovart를 사용하여 캐릭터, 장면 등 시각 자료 일괄 생성, UI 디자인과 프론트엔드 개발에 자료 기반 제공 | 🚧 |
|
||||
| [프론트엔드 1: Figma와 MasterGo 입문](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 디자인 도구로 정보 아키텍처와 페이지 구조 정리, 프론트엔드 구현 기반 마련 | 🚧 |
|
||||
| [프론트엔드 2: 첫 번째 현대 애플리케이션 구축 - UI 디자인](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 디자인 안을 기반으로 컴포넌트화 인터페이스 완성, 디자인에서 코드까지의 첫 번째 경로 실현 | 🚧 |
|
||||
| [프론트엔드 3: UI 디자인 사양 및 다중 프로덕트 UI 디자인 참조](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 통합된 메인 비주얼을 중심으로 다중 프로덕트 인터페이스 확장, 체계적 디자인 능력 연습 | 🚧 |
|
||||
| [프론트엔드 4: 함께 해리포트 초상화 만들기](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0에서 1까지 AI 능력을 통합한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | ✅ |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [프론트엔드 0: Lovart로 에셋 생성](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | 시각적 에셋(캐릭터, 배경 등) 대량 생성 방법 | 🚧 |
|
||||
| [프론트엔드 1: Figma & MasterGo 입문](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 설계 도구로 정보 구조 및 페이지 구성 정리 | 🚧 |
|
||||
| [프론트엔드 2: 첫 현대적 앱 구축 - UI 설계](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 디자인에서 코드로 이어지는 컴포넌트 기반 UI 구현 | 🚧 |
|
||||
| [프론트엔드 3: UI 설계 표준 및 프로젝트 설계](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 통일된 비주얼 기반의 시스템 설계 연습 | 🚧 |
|
||||
| [프론트엔드 4: 호그와트 초상화 만들기](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | AI 기능이 포함된 프론트엔드 앱 직접 제작 | ✅ |
|
||||
|
||||
#### 백엔드와 풀스택 부분
|
||||
#### 백엔드 및 풀스택
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [백엔드 1: API란](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합과 연동 조정 준비 | ✅ |
|
||||
| [백엔드 2: 데이터베이스에서 Supabase로](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase상에서 데이터베이스와 API 구현, 데이터 모델과 프론트엔드 페이지 연결 | ✅ |
|
||||
| [백엔드 3: 대규모 언어 모델 지원 인터페이스 코드 및 문서 작성](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 대규모 언어 모델을 활용하여 인터페이스와 데이터베이스 문서 및 코드 생성 지원, 읽기 쉽고 테스트 가능한 백엔드 실현 | 🚧 |
|
||||
| [백엔드 4: Git 워크플로우](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git 워크플로우에서 코드 관리, 버전 관리 및 협업 수행 | ✅ |
|
||||
| [백엔드 5: Zeabur 배포](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 애플리케이션을 Zeabur에 배포하여 온라인화 | ✅ |
|
||||
| [백엔드 6: 현대 CLI 개발 도구](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 계열 AI 프로그래밍 도구 사용하여 개발과 디버깅 가속화, 개인 엔지니어링 워크플로우 형성 | ✅ |
|
||||
| [백엔드 7: Stripe 등 유료 시스템 통합 방법](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 결제 시스템 연결, 유료 경로와 기본 정산 흐름 완성 | 🚧 |
|
||||
| [대 과제 1: 첫 번째 현대 애플리케이션 구축 - 풀스택 앱](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | 프론트엔드, 백엔드, 결제 모듈 통합, 온라인 가능한 풀스택 웹 애플리케이션 완성 | 🚧 |
|
||||
| [대 과제 2: 현대 프론트엔드 컴포넌트 라이브러리 + Trae 실전](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 현대 프론트엔드 컴포넌트 라이브러리와 Trae 사용, 로그인/등록 가능하고 유료 지원 프로덕트 독립 완성 | 🚧 |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [백엔드 1: API란 무엇인가](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP 인터페이스 및 요청-응답 모델 이해 | ✅ |
|
||||
| [백엔드 2: DB에서 Supabase까지](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 기반 DB 및 API 구축 | ✅ |
|
||||
| [백엔드 3: AI 기반 API 코드 및 문서 생성](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | AI를 활용한 효율적인 백엔드 코드 생성 | 🚧 |
|
||||
| [백엔드 4: Git 워크플로우](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 버전 관리 및 협업을 위한 Git 활용법 | ✅ |
|
||||
| [백엔드 5: Zeabur 배포](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 애플리케이션 실제 배포 및 운영 | ✅ |
|
||||
| [백엔드 6: 현대적 CLI 개발 도구](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 기반 AI 도구로 개발 속도 향상 | ✅ |
|
||||
| [백엔드 7: 결제 시스템 연동 (Stripe)](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 결제 및 정산 프로세스 구축 | 🚧 |
|
||||
| [프로젝트 1: 첫 현대적 풀스택 앱 구축](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | 전 과정을 통합한 실제 웹 서비스 제작 | 🚧 |
|
||||
| [프로젝트 2: UI 라이브러리 + Trae 실전](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 독립적인 상용 수준 제품 제작 연습 | 🚧 |
|
||||
|
||||
#### AI 능력 부록
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------- | :--- |
|
||||
| [AI 1: Dify 입문과 지식 베이스 통합](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow와 기본 RAG 사용하여 도구 계열 프로덕트 구축, 이후 애플리케이션 업그레이드 모델 사례 작성 | ✅ |
|
||||
| [AI 2: AI 사전 검색 및 멀티모달 API 통합 학습](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 적절한 모델과 API 검색 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 프로덕트에 통합 | 🚧 |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [AI 1: Dify 입문 및 지식 창고 연동](../../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow 및 RAG 기반 툴 제작 | ✅ |
|
||||
| [AI 2: AI 사전 검색 및 멀티모달 API 연동](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 적합한 모델 탐색 및 멀티모달 능력 연동 | 🚧 |
|
||||
|
||||
### 3. 고급 개발 엔지니어
|
||||
</details>
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- | :--- |
|
||||
| [고급 1: MCP와 Claude Code Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | MCP와 Skills를 통해 IDE 능력 확장, 외부 서비스를 도구로 연결 | 🚧 |
|
||||
| [고급 2: Coding Tools를 장시간 작동시키는 방법](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 장시간 실행되는 작업 설계 및 구성, Coding Tools를 더 안정적이고 신뢰할 수 있게 | 🚧 |
|
||||
| [고급 3: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 위챗 미니 프로그램 생태계 이해, 공식 템플릿부터 출시까지 프론트엔드 미니 프로그램 완성 | ✅ |
|
||||
| [고급 4: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법 - 백엔드 포함](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 미니 프로그램에 데이터베이스와 백엔드 로직 통합, 완전한 비즈니스 폐루프 실현 | 🚧 |
|
||||
| [고급 5: 멀티플랫폼 개발: 안드로이드 앱 구축 방법](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expo 등 도구 사용, Web/네이티브 일체화 안드로이드 앱 개발 완성 | 🚧 |
|
||||
| [고급 6: 멀티플랫폼 개발: iOS 앱 구축 방법](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo 등 도구 사용, Web/네이티브 일체화 iOS 앱 개발 완성 | 🚧 |
|
||||
| [고급 7: 자신만의 개인 웹페이지와 학술 블로그 구축 방법](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 선정, 구축부터 배포까지, 개인 프로젝트와 학술 성과를 전시하는 장기 온라인 홈페이지 구축 | 🚧 |
|
||||
<details>
|
||||
<summary><strong>3단계: 고급 개발자</strong></summary>
|
||||
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [고급 1: MCP 및 Claude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | IDE 능력 확장 및 도구 연동 | 🚧 |
|
||||
| [고급 2: Coding Tools 장기 작업 환경 구축](../../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 안정적인 장기 작업 태스크 설계 | 🚧 |
|
||||
| [고급 3: 위챗 미니 프로그램 개발](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 미니 프로그램 생태계 및 배포 이해 | ✅ |
|
||||
| [고급 4: 미니 프로그램 백엔드 연동](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 복잡한 비즈니스 로직 연동 | 🚧 |
|
||||
| [고급 5: 안드로이드 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expo 기반 네이티브 앱 개발 | ✅ |
|
||||
| [고급 6: iOS 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo 기반 iOS 앱 개발 | ✅ |
|
||||
| [고급 7: 개인 웹사이트 및 학술 블로그 구축](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 개인 브랜드 구축을 위한 블로그 제작 | 🚧 |
|
||||
|
||||
#### AI 능력 부록
|
||||
|
||||
| 장 | 주요 내용 | 상태 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | :--- |
|
||||
| [고급 AI 1: RAG란 무엇이며 어떻게 작동하는가](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 원리와 일반적인 아키텍처 체계적 이해, 복잡한 애플리케이션에 지식 검색 기반 제공 | ✅ |
|
||||
| [고급 AI 2: 중고급 RAG와 워크플로우 편성: LangGraph 예시](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph 등 도구 사용하여 다단계 워크플로우와 중고급 RAG 시스템 설계 | 🚧 |
|
||||
| 장 | 핵심 내용 | 상태 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
|
||||
| [고급 AI 1: RAG의 이해와 작동 원리](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 아키텍처 및 원리 심화 이해 | ✅ |
|
||||
| [고급 AI 2: LangGraph 기반 AI 워크플로우](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 복잡한 AI 워크플로우 설계 | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
## 🛠️ 학습 방법
|
||||
|
||||
- 개인 능력에 따라 관련 장을 선택적으로 읽고 실습하며, 문제가 있으면 Issue로 질문해 주세요.
|
||||
- 개인의 능력치에 맞는 장을 선택하여 실습하세요. 문의 사항은 Issue를 이용해주세요.
|
||||
|
||||
## 💻 이 과정을 로컬에서 시작
|
||||
## 💻 로컬에서 실행하기
|
||||
|
||||
### 현대적 방법
|
||||
### 최신 방법
|
||||
|
||||
AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입력하여 이 과정을 시작:
|
||||
AI IDE(VS Code, Cursor, Trae 등) 대화창에 다음 명령을 입력하세요:
|
||||
|
||||
```
|
||||
이 프로젝트의 로컬 서비스를 실행해주세요
|
||||
이 프로젝트의 로컬 서비스를 실행해 줘.
|
||||
```
|
||||
|
||||
### 구식 방법
|
||||
### 기존 방법
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 브라우저를 열고 `http://localhost:3000`에 접속하여 확인.
|
||||
3. 브라우저에서 `http://localhost:3000`에 접속하여 확인하세요.
|
||||
|
||||
## 🤝 기여 참여
|
||||
## 🤝 기여하기
|
||||
|
||||
- 문제를 발견했거나 이 프로젝트를 개선할 수 있는 점이 있다고 생각되시면 Issue를 제출하여 피드백해 주세요. 제출 후 아무도 응답하지 않으면 [보모 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
|
||||
- 이 프로젝트에 기여하고 싶으시면 Pull Request를 제출해 주세요. 제출 후 아무도 응답하지 않으면 [보모 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
|
||||
- Datawhale에 매우 흥미가 있고 새 프로젝트를 시작하고 싶으시면 [Datawhale 오픈소스 프로젝트 가이드](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)에 따라 조작해 주세요~
|
||||
- 문제점 발견이나 개선 사항 제안은 Issue를 통해 해주세요.
|
||||
- 프로젝트 기여를 원하시면 Pull Request를 보내주세요.
|
||||
- Datawhale의 새로운 프로젝트 발의는 오픈소스 가이드를 참조하세요.
|
||||
|
||||
## 🙏 모든 기여자에게 감사
|
||||
## 🙏 도움 주신 분들
|
||||
|
||||
- [散步-프로젝트 책임자](https://github.com/sanbuphy) (Datawhale 회원)
|
||||
- 방可-지도 교사(Datawhale 회원, 칭화대학)
|
||||
- [Yerim Kang](https://github.com/yerim25)（실습 프로젝트 부분-칭화대학）
|
||||
- 赵芷霖（실습 프로젝트 부분-칭화대학）
|
||||
- [李亦萱](https://yixuan20.github.io/)（페이지 미술 디자인-칭화대학）
|
||||
- AI Vibe Coding 101 베타 테스트 그룹에서 제안과 경험을 제공한 모든 동료들
|
||||
- [산부(散步) - 프로젝트 리더](https://github.com/sanbuphy) (Datawhale 멤버)
|
||||
- 팡커(方可) - 지도 교수 (Datawhale 멤버, 칭화대)
|
||||
- [Yerim Kang](https://github.com/yerim25) (칭화대)
|
||||
- 자오즈린(趙芷霖) (칭화대)
|
||||
- [리이쉬안(李亦萱)](https://yixuan20.github.io/) (디자인, 칭화대)
|
||||
- 리우스이(劉思怡) (칭화대)
|
||||
- suggestion을 주신 모든 베타 테스터 분들께 감사드립니다.
|
||||
|
||||
### 특별한 감사
|
||||
### 특별 감사
|
||||
|
||||
- [@Sm1les](https://github.com/Sm1les) 님이 이 프로젝트에 대한 도움과 지원에 감사
|
||||
- 이 프로젝트에 기여한 모든 개발자에게 감사 ❤️
|
||||
- [@Sm1les](https://github.com/Sm1les) 님의 도움과 지원에 감사드립니다.
|
||||
- 기여해주신 모든 개발자분들과 Star를 눌러주신 분들께 감사드립니다 ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
||||
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
||||
</p>
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
@@ -201,13 +383,13 @@ AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 문의하기</span>
|
||||
## <span id="contact">📧 연락처</span>
|
||||
|
||||
<div align=center>
|
||||
<p>질문, 제안, 불만, 또는 소통을 원하시면 아래 QR 코드를 스캔해 주세요</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
<p>질문이나 제안, 교류를 원하시면 아래 QR 코드를 스캔해 주세요.</p>
|
||||
<img src="../../assets/wechat.png" width="280">
|
||||
|
||||
<p>아래 QR 코드를 스캔하여 공식 계정을 팔로우해 주세요: Datawhale</p>
|
||||
<p>Datawhale 공식 계정 팔로우:</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
@@ -216,17 +398,17 @@ AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="크리에이티브 커먼즈 라이선스"
|
||||
alt="知识共享许可协议"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
이 저작물은
|
||||
본 저작물은
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스
|
||||
</a>
|
||||
에 따라 사용이 허가되었습니다.
|
||||
에 따라 이용할 수 있습니다.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+40
-188
@@ -4,22 +4,20 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _Từ số không, học tập dựa trên dự án, xây dựng sản phẩm AI đầu tiên của bạn_
|
||||
# Easy-Vibe : Học Vibe Coding từ 0 đến 1
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Bắt đầu đọc online (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Hướng dẫn tương tác</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Đọc online</a> ·
|
||||
<a href="#-điều-hướng-nội-dung">Bản đồ học tập</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến</a> ·
|
||||
<a href="#-điều-hướng">Bản đồ học tập</a> ·
|
||||
<a href="#contact">Cộng đồng</a>
|
||||
</p>
|
||||
|
||||
@@ -39,195 +37,49 @@
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="./README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>Bản đồ học tập độc quyền cho người mới bắt đầu</strong>
|
||||
<br>
|
||||
<sub>Hướng dẫn từ con số 0, lộ trình rõ ràng, tạm biệt việc "học trước quên sau"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>Hướng dẫn hình ảnh từng bước</strong>
|
||||
<br>
|
||||
<sub>Giải thích chi tiết bằng hình ảnh, như có gia sư riêng bên cạnh</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 🚀 Giới thiệu dự án
|
||||
Trong thời đại AI, những người biến ý tưởng thành sản phẩm thường không phải là những người có kỹ thuật mạnh nhất, mà là những người có hành động đầu tiên. **Easy-Vibe ra đời vì điều này.** Chúng tôi sẽ cầm tay chỉ việc cho bạn, từ việc viết dòng code đầu tiên đến việc hiểu logic front-end và back-end, và cuối cùng là đưa sản phẩm của bạn lên mạng.
|
||||
|
||||
Khi bạn cố gắng viết code bằng AI, liên tục gặp lỗi, thường muốn từ bỏ và không rõ cách đưa chương trình của bạn lên thực tế 😢
|
||||
- **Đối tượng**: Người mới bắt đầu, Quản lý sản phẩm (PM), Lập trình viên Front-end / Back-end / Full-stack
|
||||
- **Chủ đề**: Lập trình AI, Phát triển ứng dụng Web Full-stack, AI Agent, Workflow và hệ thống RAG
|
||||
|
||||
Hướng dẫn này được thiết kế đặc biệt để đưa bạn từ 0 đến 1, làm chủ dần các kỹ thuật Vibe Coding:
|
||||
---
|
||||
|
||||
- **Giai đoạn 1**: **Từ mini-game đến nguyên mẫu web**, nắm vững cơ sở lập trình AI và tư duy sản phẩm
|
||||
- **Giai đoạn 2**: Học **phát triển frontend/backend và khả năng AI** liên quan đến kỹ thuật Vibe Coding, hoàn thành ứng dụng hoàn chỉnh
|
||||
- **Giai đoạn 3**: Làm chủ xây dựng **ứng dụng phức tạp đa nền tảng**, hướng tới ứng dụng cấp sản xuất
|
||||
Easy-Vibe dẫn dắt bạn từ 0 đến 1 qua ba giai đoạn:
|
||||
|
||||
Chúng tôi tin rằng thông qua việc làm chủ Vibe Coding kết hợp với đào tạo có hệ thống, một người có thể trở thành nhà phát triển kết hợp phát triển frontend, phát triển backend, tích hợp khả năng AI và thiết kế sản phẩm.
|
||||
| Giai đoạn | Kỹ năng cốt lõi | Sản phẩm đầu ra |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **Giai đoạn 1** | Nhập môn lập trình AI, Tư duy sản phẩm, Thiết kế Prototype | Trò chơi nhỏ tương tác, Prototype Web (Người mới & PM) |
|
||||
| **Giai đoạn 2** | Phát triển Full-stack, Tích hợp AI, Cơ sở dữ liệu | Ứng dụng AI Full-stack hoàn chỉnh |
|
||||
| **Giai đoạn 3** | Kỹ thuật Claude Code nâng cao, Mobile & Mini-app | Ứng dụng đa nền tảng cấp sản xuất |
|
||||
| **Phụ lục** | Hiểu các khái niệm cơ bản về Máy tính & AI | 9 lĩnh vực kiến thức, hơn 80 chuyên đề tương tác |
|
||||
|
||||
> **Dự án này chủ yếu hướng tới ba loại người học:**
|
||||
>
|
||||
> - **Người mới bắt đầu (người bình thường / sản phẩm và vận hành)**: Giúp người học phi kỹ thuật hiểu các khái niệm chính và hoàn thành nguyên mẫu sản phẩm đầu tiên
|
||||
> - **Nhà phát triển cấp sơ-trung (sinh viên và nhà phát triển có cơ sở nhất định)**: Làm chủ kiến thức Vibe Coding frontend/backend và khả năng AI
|
||||
> - **Nhà phát triển cấp cao (công ty và startup, mã nguồn mở và nhà phát triển độc lập)**: Kỹ thuật phát triển cấp cao, phát triển đa nền tảng
|
||||
|
||||
### 📖 Điều hướng nội dung
|
||||
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### Phụ lục tổng quát
|
||||
|
||||
[Từ điển khả năng AI: các khái niệm cốt lõi AI phổ biến, thuật ngữ và giải thích kịch bản](docs/appendix/ai-capability-dictionary.md)
|
||||
|
||||
### 1. Nhập môn cho người mới và Nguyên mẫu sản phẩm
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------- | :--------- |
|
||||
| [Lời nói đầu: Bản đồ học tập](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Hướng dẫn lộ trình học tập tổng thể | ✅ |
|
||||
| [Sơ cấp 1: Kỷ nguyên AI, biết nói là biết lập trình](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Trải nghiệm khả năng lập trình AI lần đầu qua các trường hợp như Snake | ✅ |
|
||||
| [Sơ cấp 2: Biết các công cụ IDE AI](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Học sử dụng IDE, tạo mini-game cục bộ | ✅ |
|
||||
| [Sơ cấp 3: Tự làm nguyên mẫu](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Phân tích yêu cầu, tạo trang đơn bằng AI, đến tạo nguyên mẫu sản phẩm đa trang | ✅ |
|
||||
| [Sơ cấp 4: Thêm khả năng AI vào nguyên mẫu](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Học kết nối các khả năng AI phổ biến (văn bản, hình ảnh, video) | ✅ |
|
||||
| [Sơ cấp 5: Dự án hoàn chỉnh thực chiến](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Mô phỏng kịch bản thực tế, chấp nhận phản hồi người dùng để cải tiến, hoàn thành dự án | ✅ |
|
||||
| [Đề tài lớn: Tạo nguyên mẫu ứng dụng web hoàn chỉnh và trưng bày](docs/zh-cn/stage-1/1.5-final-project/index.md) | Thực hiện ứng dụng hoàn chỉnh, trình bày hiệu ứng ứng dụng | ✅ |
|
||||
|
||||
#### Phụ lục: Tư duy Kinh doanh
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--------- |
|
||||
| [Phụ lục A: Tư duy Sản phẩm và Thiết kế Giải pháp](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Các khung tư duy cần thiết để tạo sản phẩm từ số không đến một | ✅ |
|
||||
| [Phụ lục B: Tham khảo Ứng dụng AI trong Ngành (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Hiểu các ứng dụng AI trong các ngành khác nhau | ✅ |
|
||||
| [Phụ lục C: Tham khảo Cảm hứng Kịch bản Tiêu dùng AI (B2C)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Khám phá các ứng dụng AI trong sản phẩm tiêu dùng | ✅ |
|
||||
|
||||
#### Phụ lục: Giải pháp Kỹ thuật
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- | :--------- |
|
||||
| [Phụ lục D: Làm gì khi Gặp lỗi khi Viết Code](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Các lỗi phổ biến trong Vibe Coding và phương pháp khắc phục | ✅ |
|
||||
| [Phụ lục E: So sánh 7 Công cụ Lập trình AI](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | So sánh và thử nghiệm các nền tảng lập trình AI chính | ✅ |
|
||||
| [Phụ lục F: Thiết kế Website với Agent Thiết kế và Lập trình](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Học cách sử dụng AI Agent cộng tác | ✅ |
|
||||
|
||||
### 2. Kỹ sư phát triển cấp sơ-trung
|
||||
|
||||
#### Phần Frontend
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | :--------- |
|
||||
| [Frontend 0: Sử dụng lovart tạo tài sản](docs/stage-2/frontend/2.0-lovart-assets/) | Sử dụng lovart tạo hàng loạt tài sản hình ảnh như nhân vật, cảnh, cung cấp cơ sở tài sản cho thiết kế UI và phát triển frontend | 🚧 |
|
||||
| [Frontend 1: Nhập môn Figma và MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | Sử dụng công cụ thiết kế tổ chức kiến trúc thông tin và cấu trúc trang, chuẩn bị cơ sở cho triển khai frontend | 🚧 |
|
||||
| [Frontend 2: Xây dựng ứng dụng hiện đại đầu tiên - Thiết kế UI](docs/stage-2/frontend/2.2-ui-design/) : Hoàn thành giao diện dựa trên thành phần từ thiết kế, thực hiện lộ trình đầu tiên từ thiết kế đến code | 🚧 |
|
||||
| [Frontend 3: Tham khảo thông số thiết kế UI và thiết kế UI đa sản phẩm](docs/stage-2/frontend/2.3-multi-product-ui/) : Mở rộng giao diện đa sản phẩm quanh một hình ảnh chính thống nhất, thực hành khả năng thiết kế có hệ thống | 🚧 |
|
||||
| [Frontend 4: Cùng làm chân dung Hogwarts](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) : Tạo ứng dụng frontend có khả năng AI tích hợp từ 0 đến 1, kết nối thiết kế và phát triển | ✅ |
|
||||
|
||||
#### Phần Backend và Full Stack
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------- |
|
||||
| [Backend 1: API là gì](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) : Hiểu giao diện HTTP và mô hình yêu cầu-phản hồi, chuẩn bị tích hợp backend và phối hợp | ✅ |
|
||||
| [Backend 2: Từ cơ sở dữ liệu đến Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Triển khai cơ sở dữ liệu và API trên Supabase, kết nối mô hình dữ liệu với trang frontend | ✅ |
|
||||
| [Backend 3: LLM hỗ trợ viết code giao diện và tài liệu](docs/stage-2/backend/2.3-ai-interface-code/) : Sử dụng LLM hỗ trợ tạo tài liệu và code cho giao diện và cơ sở dữ liệu, thực hiện backend có thể đọc và kiểm tra | 🚧 |
|
||||
| [Backend 4: Quy trình làm việc Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Quản lý code trong quy trình làm việc Git, thực hiện kiểm soát phiên bản và cộng tác | ✅ |
|
||||
| [Backend 5: Triển khai Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Triển khai ứng dụng lên Zeabur để đưa vào hoạt động | ✅ |
|
||||
| [Backend 6: Công cụ phát triển CLI hiện đại](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : Sử dụng công cụ lập trình AI loại CLI để tăng tốc phát triển và gỡ lỗi, hình thành quy trình kỹ thuật cá nhân | ✅ |
|
||||
| [Backend 7: Cách tích hợp hệ thống thanh toán như Stripe](docs/stage-2/backend/2.7-stripe-payment/) : Kết nối hệ thống thanh toán, hoàn thành quy trình thanh toán và quy trình thanh toán cơ bản | 🚧 |
|
||||
| [Đề tài lớn 1: Xây dựng ứng dụng hiện đại đầu tiên - Ứng dụng full stack](docs/stage-2/assignments/2.1-fullstack-app/) : Tích hợp frontend, backend và module thanh toán, hoàn thành ứng dụng web full stack sẵn sàng sản xuất | 🚧 |
|
||||
| [Đề tài lớn 2: Thư viện thành phần frontend hiện đại + Trae thực chiến](docs/stage-2/assignments/2.2-modern-frontend-trae/) : Sử dụng thư viện thành phần frontend hiện đại và Trae, hoàn thành độc lập một sản phẩm có đăng nhập/đăng ký và hỗ trợ thanh toán | 🚧 |
|
||||
|
||||
#### Phụ lục khả năng AI
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------- |
|
||||
| [AI 1: Nhập môn Dify và tích hợp cơ sở kiến thức](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : Sử dụng Dify Workflow và RAG cơ bản để xây dựng sản phẩm loại công cụ, tạo ví dụ cho nâng cấp ứng dụng trong tương lai | ✅ |
|
||||
| [AI 2: Học tra cứu từ điển AI và tích hợp API đa phương thức](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : Học tìm kiếm mô hình và API phù hợp, tích hợp khả năng đa phương thức như văn bản, hình ảnh vào sản phẩm | 🚧 |
|
||||
|
||||
### 3. Kỹ sư phát triển cấp cao
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------- |
|
||||
| [Cao cấp 1: MCP và Claude Code Skills](docs/stage-3/core-skills/3.1-mcp-claude-code-skills/) : Mở rộng khả năng IDE qua MCP và Skills, kết nối dịch vụ bên ngoài như công cụ | 🚧 |
|
||||
| [Cao cấp 2: Cách để Coding Tools hoạt động lâu](docs/stage-3/core-skills/3.2-long-running-tasks/) : Thiết kế và cấu hình nhiệm vụ chạy dài, làm Coding Tools ổn định và đáng tin cậy hơn | 🚧 |
|
||||
| [Cao cấp 3: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : Hiểu hệ sinh thái chương trình nhỏ WeChat, hoàn thành chương trình nhỏ frontend từ mẫu chính thức đến phát hành | ✅ |
|
||||
| [Cao cấp 4: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat - Bao gồm backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Tích hợp cơ sở dữ liệu và logic backend vào chương trình nhỏ, thực hiện vòng tuần hoàn hoạt động hoàn chỉnh | 🚧 |
|
||||
| [Cao cấp 5: Phát triển đa nền tảng: Cách xây dựng ứng dụng Android](docs/stage-3/cross-platform/3.5-android-app/) : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng Android tích hợp Web/native | 🚧 |
|
||||
| [Cao cấp 6: Phát triển đa nền tảng: Cách xây dựng ứng dụng iOS](docs/stage-3/cross-platform/3.6-ios-app/) : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng iOS tích hợp Web/native | 🚧 |
|
||||
| [Cao cấp 7: Cách xây dựng trang web cá nhân và blog học thuật của riêng bạn](docs/stage-3/personal-brand/3.7-personal-website-blog/) : Từ lựa chọn, xây dựng đến triển khai, xây dựng trang chủ online dài hạn trưng bày dự án cá nhân và kết quả học thuật | 🚧 |
|
||||
|
||||
#### Phụ lục khả năng AI
|
||||
|
||||
| Chương | Nội dung chính | Trạng thái |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------- |
|
||||
| [AI cao cấp 1: RAG là gì và nó hoạt động như thế nào](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : Hiểu có hệ thống nguyên lý RAG và kiến trúc phổ biến, cung cấp cơ sở truy xuất kiến thức cho ứng dụng phức tạp | ✅ |
|
||||
| [AI cao cấp 2: RAG trung cấp-cao cấp và điều phối quy trình làm việc: Ví dụ LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : Sử dụng công cụ như LangGraph để thiết kế quy trình làm việc đa bước và hệ thống RAG trung cấp-cao cấp | 🚧 |
|
||||
|
||||
## 🛠️ Cách học
|
||||
|
||||
- Theo khả năng cá nhân, đọc và thực hành có chọn lọc các chương liên quan, nếu có câu hỏi hãy đặt trong Issues.
|
||||
|
||||
## 💻 Khởi động bài học này cục bộ
|
||||
|
||||
### Phương pháp hiện đại
|
||||
|
||||
Trong hộp thoại IDE AI (vscode, cursor, trae, v.v.), nhập prompt sau để khởi động bài học này:
|
||||
|
||||
```
|
||||
Vui lòng giúp tôi chạy dịch vụ cục bộ của dự án này
|
||||
```
|
||||
|
||||
### Phương pháp cũ
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. Mở trình duyệt của bạn và truy cập `http://localhost:3000` để xem.
|
||||
|
||||
## 🤝 Đóng góp
|
||||
|
||||
- Nếu bạn phát hiện ra vấn đề hoặc nghĩ có cách nào để cải thiện dự án này, bạn có thể gửi Issue để phản hồi. Nếu sau khi gửi không ai trả lời, bạn có thể liên hệ [đội ngũ chăm sóc](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) để phản hồi và theo dõi~
|
||||
- Nếu bạn muốn đóng góp vào dự án này, bạn có thể gửi Pull Request, nếu sau khi gửi không ai trả lời, bạn có thể liên hệ [đội ngũ chăm sóc](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) để phản hồi và theo dõi~
|
||||
- Nếu bạn rất quan tâm đến Datawhale và muốn bắt đầu một dự án mới, vui lòng làm theo [hướng dẫn dự án mã nguồn mở Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||
|
||||
## 🙏 Cảm ơn mỗi người đóng góp
|
||||
|
||||
- [散步-Lãnh đạo dự án](https://github.com/sanbuphy) (Thành viên Datawhale)
|
||||
- Fang Ke-Giảng viên hướng dẫn (Thành viên Datawhale, Đại học Thanh Hoa)
|
||||
- [Yerim Kang](https://github.com/yerim25)（Phần dự án thực tế-Đại học Thanh Hoa）
|
||||
- Triệu Tri Lân（Phần dự án thực tế-Đại học Thanh Hoa）
|
||||
- [Lý Nghi Tuyên](https://yixuan20.github.io/)（Thiết kế nghệ thuật trang-Đại học Thanh Hoa）
|
||||
- Tất cả các bạn trong nhóm beta test AI Vibe Coding 101 đã cung cấp đề xuất và kinh nghiệm
|
||||
|
||||
### Cảm ơn đặc biệt
|
||||
|
||||
- Cảm ơn [@Sm1les](https://github.com/Sm1les) đã giúp đỡ và hỗ trợ dự án này
|
||||
- Cảm ơn tất cả các nhà phát triển đã đóng góp vào dự án này ❤️
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 Liên hệ với chúng tôi</span>
|
||||
|
||||
<div align=center>
|
||||
<p>Nếu bạn có câu hỏi, đề xuất, phàn nàn, hoặc muốn trao đổi, vui lòng quét mã QR bên dưới</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
|
||||
<p>Quét mã QR bên dưới để theo dõi tài khoản chính thức: Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
## 📄 GIẤY PHÉP
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="Creative Commons Giấy phép"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
Tác phẩm này được cấp phép theo
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
Creative Commons Ghi nhận - Phi thương mại - Chia sẻ tương tự 4.0 Quốc tế
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
*(Xem chi tiết trong tài liệu trực tuyến hoặc repo chính)*
|
||||
|
||||
+296
-114
@@ -4,23 +4,21 @@
|
||||
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||
|
||||
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||
|
||||
### _零基礎、專案制學習、建構第一個 AI 產品_
|
||||
# Easy-Vibe : 從 0 到 1 學習 Vibe Coding
|
||||
|
||||
<p align="center">
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">開始線上閱讀 (Start Reading Online)</a>
|
||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">交互式教程 (Interactive Tutorial)</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">線上閱讀</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀</a> ·
|
||||
<a href="#-內容導航">學習地圖</a> ·
|
||||
<a href="#contact">社群交流</a>
|
||||
<a href="#contact">社區交流</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -33,167 +31,351 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="./docs-readme/zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="./docs-readme/zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="./docs-readme/en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="./docs-readme/ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="./docs-readme/es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="./docs-readme/fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="./docs-readme/ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="./docs-readme/ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="./docs-readme/vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="./docs-readme/de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
## 🚀 專案介紹
|
||||
|
||||
當你嘗試用AI寫程式碼，出錯不斷，時常想放棄，不清楚如何將程式真正上線 😢。
|
||||
|
||||
本教學專門設計，從0到1，帶你逐步掌握 Vibe Coding 技巧：
|
||||
|
||||
- **第一階段**：從**小遊戲入門**到**Web 應用原型**，掌握 AI 編程基礎與產品思維
|
||||
- **第二階段**：學習**前後端開發與 AI 能力**相關的 vibecoding 技巧，完成完整應用
|
||||
- **第三階段**：掌握**多平台複雜應用**的建構方案，走向生產級應用
|
||||
|
||||
我們相信，掌握Vibe Coding並配合系統化訓練，一個人就能成為集前後端開發、AI 能力整合、產品設計於一身的開發者。
|
||||
|
||||
> **本專案主要面向三類學習者：**
|
||||
>
|
||||
> - **新手（普通人 / 產品與運營側）**：幫助非技術入門學習者聽懂關鍵概念，完成第一個產品原型。
|
||||
> - **初中級開發者（有一定基礎的學生和開發者）**：掌握前後端 vibe coding 與 AI 能力知識。
|
||||
> - **高級開發者（公司與初創、開源與獨立開發者）**：高級開發技巧、多平台開發。
|
||||
|
||||
### 📖 內容導航
|
||||
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手專屬學習地圖</strong>
|
||||
<br>
|
||||
<sub>零基礎專屬指引，清晰規劃路徑，告別“學了忘”</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手圖文教程</strong>
|
||||
<br>
|
||||
<sub>保姆級圖文詳解，如同私教在旁，跟着做就能學會</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模擬編程</strong>
|
||||
<br>
|
||||
<sub>虛擬鼠標自動導覽，帶你快速上手 IDE 核心用法</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得見的 AI 原理</strong>
|
||||
<br>
|
||||
<sub>算法原理動畫化，一眼看懂 AI 如何“畫”出圖片</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩遊戲一樣學 RAG</strong>
|
||||
<br>
|
||||
<sub>獨家交互組件，點擊即可看清 RAG 數據流向</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可視化終端原理</strong>
|
||||
<br>
|
||||
<sub>命令行操作可視化，直觀展示後臺邏輯與原理</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
<h3>⭐ 歡迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">點擊此處 Star</a> 加速更新 ❤️</h3>
|
||||
</div>
|
||||
|
||||
### 總附錄
|
||||
在 AI 時代，把想法變成產品的人，往往技術不是最強，而是最先邁出行動。
|
||||
|
||||
[AI 能力詞典：常見 AI 核心概念與名詞、場景解釋](../docs/zh-cn/appendix/ai-capability-dictionary.md)
|
||||
很多人即便有了 AI 助手，依然會被“代碼看不懂”、“環境不會配”勸退。**Easy-Vibe 為此而生。** 假設每個人都是零基礎，手把手帶你從寫出第一行代碼，到理解前後端邏輯，最後把產品上線。
|
||||
|
||||
### 一、新手入門與產品原型
|
||||
- **面向人群**：初學者、產品經理、前後端 / 全站開發者
|
||||
- **主題**：AI 編程、全棧 Web 應用開發、AI Agent、工作流和 RAG 系統
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :-------------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [前言：學習地圖](../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整體學習路徑導覽 | ✅ |
|
||||
| [初級一：AI 時代，會說話就會編程](../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ |
|
||||
| [初級二：認識 AI IDE 工具](../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 學會使用 IDE，在本地製作小遊戲 | ✅ |
|
||||
| [初級三：動手做出原型](../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 從需求分析、AI 生成單頁面，再到生成多頁面產品原型 | ✅ |
|
||||
| [初級四：給原型加上 AI 能力](../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 學會接入常見 AI 能力（文本、圖片、影片） | ✅ |
|
||||
| [初級五：完整專案實戰](../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 模擬真實場景、接受用戶反饋迭代，完整化專案 | ✅ |
|
||||
| [大作業：做一個完整的 Web 應用原型並展示](../docs/zh-cn/stage-1/1.5-final-project/index.md) | 完整實現應用，展示應用效果 | ✅ |
|
||||
---
|
||||
|
||||
Easy-Vibe 通過以下幾個階段，帶你從 0 到 1：
|
||||
|
||||
| 階段 | 核心技能 | 產出 |
|
||||
| ------------ | -------------------------------- | ----------------------------------------- |
|
||||
| **第一階段** | AI 編程入門、產品思維、原型設計 | 互動小遊戲、Web 應用原型（新手入門 & PM） |
|
||||
| **第二階段** | 全棧開發、AI 集成、數據庫 | 完整的全棧 AI 應用 |
|
||||
| **第三階段** | claude code 進階、小程序安卓開發 | 生產級多平台應用 |
|
||||
| **附錄** | 幫你理解計算機、人工智能基礎概念 | 9 大知識領域、80+ 交互式專題 |
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-02-25]** 更新[附錄知識庫](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵蓋 9 大知識領域、80+ 交互式專題。
|
||||
- **[2026-01-27]** 新增 Android 和 iOS 平台應用開發教程。
|
||||
- **[2026-01-19]** 發佈 Prompt Engineering、AI 演進史、鑑權設計、Git 原理等一系列交互式演示組件，大幅提升可視化學習體驗。
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[2026-01-16]** 重構項目結構，正式確立“新手入門”章節，降低上手門檻。
|
||||
- **[2026-01-14]** 完成第一階段“產品原型構建”文檔的大規模更新。
|
||||
- **[2026-01-13]** 完成文檔架構重構，全面支持多語言 (i18n)。
|
||||
- **[2026-01-01]** 發佈項目核心學習地圖 (Learning Map)，明確學習路徑。
|
||||
</details>
|
||||
|
||||
### 📖 內容導覽
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 📚 附錄知識庫
|
||||
|
||||
> 涵蓋 **9 大知識領域**、**80+ 交互式專題**，以動畫和可視化組件幫助你直觀理解從計算機底層到 AI 前沿的核心概念。
|
||||
>
|
||||
> 👉 [查看完整附錄](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力詞典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 計算機基礎</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">從晶體管到 CPU</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">操作系統</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">數據的編碼、存儲與傳輸</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">網絡：兩臺電腦如何對話</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">數據結構</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">算法思維入門</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 開發工具</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git：代碼的時光機</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">命令行與 Shell 腳本</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">包管理器</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">調試的藝術</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">正則表達式</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">環境變量與 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 瀏覽器與前端</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">JavaScript 語言深入</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">瀏覽器渲染管道</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">前端框架對比</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">圖形與動畫</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">網頁性能的度量與優化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服務器與後端</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTP 協議</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API 設計哲學</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">認證與授權體系</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">併發、異步與多線程</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">消息隊列與事件驅動</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">後端分層架構</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 數據</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">數據庫原理</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">數據埋點與用戶行為採集</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">數據分析基礎</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/B 測試與實驗驅動</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">數據可視化與儀表盤</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架構與系統設計</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">從單體到微服務的演進</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">分佈式系統的挑戰</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">高可用與容災</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">系統設計方法論</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基礎設施與運維</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Docker 容器化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetes 編排</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CD 自動化</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">域名、DNS 與 HTTPS</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">監控、日誌與告警</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">基礎設施即代碼</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">大語言模型的工作原理</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer 與注意力機制</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAG 架構</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agent 與工具調用</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">提示詞工程</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">圖像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素養</strong><br><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">代碼質量與重構</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">測試策略</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">設計模式</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">安全思維與攻防基礎</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">技術文檔寫作</a><br>
|
||||
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-協作.md">開源協作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### 一、零基礎入門
|
||||
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [前言：學習地圖](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整體學習路徑導覽 | ✅ |
|
||||
| [初級一：AI 時代，會說話就會編程](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ |
|
||||
| [初級二：尋找好想法](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | 學會尋找和驗證產品想法，找到值得做的項目 | ✅ |
|
||||
| [初級三：認識 AI IDE 工具](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 學會使用 IDE，在本地製作小遊戲 | ✅ |
|
||||
| [初級四：動手做出原型](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 從需求分析、AI 生成單頁面，再到生成多頁面產品原型 | ✅ |
|
||||
| [初級五：給原型加上 AI 能力](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 學會接入常見 AI 能力（文本、圖片、視頻） | ✅ |
|
||||
| [初級六：完整項目實戰](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 模擬真實場景、接受用戶反饋迭代，完整化項目 | ✅ |
|
||||
|
||||
#### 附錄：業務思維
|
||||
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------------- | :------------------------------- | :--- |
|
||||
| [附錄A：產品思維與方案設計](../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 從零到一做產品需要考慮的思維框架 | ✅ |
|
||||
| [附錄B：AI 行業應用場景參考 (B端)](../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | 了解 AI 在不同產業的應用場景 | ✅ |
|
||||
| [附錄C：AI 消費場景靈感參考 (C端)](../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 探索 AI 在消費級產品中的應用場景 | ✅ |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [附錄A：產品思維與方案設計](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 從零到一做產品需要考慮的思維框架 | ✅ |
|
||||
| [附錄B：AI 行業應用場景參考 (B端)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | 了解 AI 在不同產業的應用場景 | ✅ |
|
||||
| [附錄C：AI 消費場景靈感參考 (C端)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 探索 AI 在消費級產品中的應用場景 | ✅ |
|
||||
|
||||
#### 附錄：技術方案
|
||||
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------- | :--- |
|
||||
| [附錄D：寫代碼時遇到錯誤怎麼辦](../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | vibe coding 中的常見錯誤及排查方法 | ✅ |
|
||||
| [附錄E：七款 AI 編程工具對比](../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 對比測試主流 AI 編程平台 | ✅ |
|
||||
| [附錄F：用設計和編程 Agent 設計網站](../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | 學習如何使用 AI 智能體協同工作 | ✅ |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
||||
| [附錄D：寫代碼時遇到錯誤怎麼辦](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | vibe coding 中的常見錯誤及排查方法 | ✅ |
|
||||
| [附錄E：七款 AI 編程工具對比](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 對比測試主流 AI 編程平台 | ✅ |
|
||||
| [附錄F：用設計和編程 Agent 設計網站](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | 學習如何使用 AI 智能體協同工作 | ✅ |
|
||||
|
||||
### 二、初中級開發工程師
|
||||
<details>
|
||||
<summary><strong>二、初中級開發工程師</strong></summary>
|
||||
|
||||
#### 前端部分
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [前端零：使用 lovart 生產素材](../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | 學會用 lovart 批量生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧 |
|
||||
| [前端一：Figma 與 MasterGo 入門](../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 用設計工具梳理信息架構和頁面結構，為前端實現打基礎 | 🚧 |
|
||||
| [前端二：建構第一個現代應用程式-UI 設計](../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 基於設計稿完成組件化界面，實現從設計到代碼的第一條鏈路 | 🚧 |
|
||||
| [前端三：參考 UI 設計規範與多產品 UI 設計](../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 圍繞統一主視覺擴展多產品界面，練習系統化設計能力 | 🚧 |
|
||||
| [前端四：一起做霍格沃茨肖像](../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發 | ✅ |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
||||
| [前端零：使用 lovart 生產素材](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | 學會用 lovart 批量生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧 |
|
||||
| [前端一：Figma 與 MasterGo 入門](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 用設計工具梳理信息架構和頁面結構，為前端實現打基礎 | 🚧 |
|
||||
| [前端二：構建第一個現代應用程序-UI 設計](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 基於設計稿完成組件化界面，實現從設計到代碼的第一條鏈路 | 🚧 |
|
||||
| [前端三：參考 UI 設計規範與多產品 UI 設計](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 圍繞統一主視覺擴展開多產品界面，練習系統化設計能力 | 🚧 |
|
||||
| [前端四：一起做霍格沃茨畫像](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發 | ✅ |
|
||||
|
||||
#### 後端與全棧部分
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [後端一：什麼是 API](../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | 理解 HTTP 接口與請求響應模型，為後端整合與聯調做準備 | ✅ |
|
||||
| [後端二：從數據庫到 Supabase](../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | 在 Supabase 上落地數據庫和 API，打通數據模型與前端頁面 | ✅ |
|
||||
| [後端三：大模型輔助編寫接口代碼與接口文檔](../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 用大模型協助生成接口與數據庫文檔及代碼，實現可讀可測的後端 | 🚧 |
|
||||
| [後端四：Git 工作流](../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 在 Git 工作流中管理代碼，進行版本控制和協作 | ✅ |
|
||||
| [後端五：Zeabur 部署](../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 將應用部署到 Zeabur 上線 | ✅ |
|
||||
| [後端六：現代 CLI 開發工具](../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | 使用 CLI 類 AI 編程工具加速開發與調試，形成個人工程化工作流 | ✅ |
|
||||
| [後端七：如何整合 Stripe 等收費系統](../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 接入支付系統，完成收費鏈路與基礎結算流程 | 🚧 |
|
||||
| [大作業 1：建構第一個現代應用程式-全棧應用](../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | 綜合前端、後端與支付模塊，完成可上線的全棧 Web 應用 | 🚧 |
|
||||
| [大作業 2：現代前端組件庫 + Trae 實戰](../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 使用現代前端組件庫與 Trae，獨立完成可登錄註冊並支持收費的產品 | 🚧 |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| [後端一：什麼是 API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | 理解 HTTP 接口與請求響應模型，為後端集成與聯調做準備 | ✅ |
|
||||
| [後端二：從數據庫到 Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | 在 Supabase 上落地數據庫和 API，打通數據模型與前端頁面 | ✅ |
|
||||
| [後端三：大模型輔助編寫接口代碼與接口文檔](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 用大模型協助生成接口與數據庫文檔及代碼，實現可讀可測的後端 | 🚧 |
|
||||
| [後端四：Git 工作流](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 在 Git 工作流中管理代碼，進行版本控制和協作 | ✅ |
|
||||
| [後端五：Zeabur 部署](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 將應用部署到 Zeabur 上線 | ✅ |
|
||||
| [後端六：現代 CLI 開發工具](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | 使用 CLI 類 AI 編程工具加速開發與調試，形成個人工程化工作流 | ✅ |
|
||||
| [後端七：如何集成 Stripe 等收費系統](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 接入支付系統，完成收費鏈路與基礎結算流程 | 🚧 |
|
||||
| [大作業 1：構建第一個現代應用程序-全棧應用](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | 綜合前端、後端與支付模塊，完成可上線的全棧 Web 應用 | 🚧 |
|
||||
| [大作業 2：現代前端組件庫 + Trae 實戰](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 使用現代前端組件庫與 Trae，獨立完成可登錄註冊並支持收費的產品 | 🚧 |
|
||||
|
||||
#### AI 能力附錄
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------- | :--- |
|
||||
| [AI 一：Dify 入門與知識庫整合](../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | ✅ |
|
||||
| [AI 二：學會查詢 AI 詞典與整合多模態 API](../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 學會查找合適的模型與 API，並把文本、圖像等多模態能力接入產品 | 🚧 |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [AI 一：Dify 入門與知識庫集成](../../docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | ✅ |
|
||||
| [AI 二：學會查詢 AI 詞典與集成多模態 API](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 學會查找合適的模型與 API，並把文本、圖像等多模態能力接入產品 | 🚧 |
|
||||
|
||||
### 三、高級開發工程師
|
||||
</details>
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [高級一：MCP 與 Claude Code Skills](../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | 通過 MCP 與 Skills 擴展 IDE 能力，把外部服務接成工具 | 🚧 |
|
||||
| [高級二：如何讓 Coding Tools 長時間工作](../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 設計和配置長時間運行的任務，讓 Coding Tools 更穩定可靠 | 🚧 |
|
||||
| [高級三：多平台開發：如何建構微信小程式](../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 了解微信小程式生態，從官方模板到上線完成一個前端小程式 | ✅ |
|
||||
| [高級四：多平台開發：如何建構微信小程式-包含後端](../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 在小程式中接入數據庫與後端邏輯，打通完整業務閉環 | 🚧 |
|
||||
| [高級五：多平台開發：如何建構安卓程式](../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | 使用 Expo 等工具，完成 Web/原生一體化的安卓應用開發 | 🚧 |
|
||||
| [高級六：多平台開發：如何建構 iOS 程式](../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | 使用 Expo 等工具，完成 Web/原生一體化的 iOS 應用開發 | 🚧 |
|
||||
| [高級七：如何建構屬於自己的個人網頁與學術博客](../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 從選型、搭建到部署，建構展示個人專案與學術成果的長久在線主頁 | 🚧 |
|
||||
<details>
|
||||
<summary><strong>三、高級開發工程師</strong></summary>
|
||||
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
|
||||
| [高級一：MCP 與 Claude Code Skills](../../docs/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/) | 通過 MCP 與 Skills 擴展 IDE 能力，把外部服務接成工具 | 🚧 |
|
||||
| [高級二：如何讓 Coding Tools 長時間工作](../../docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 設計和配置長時間運行的任務，讓 Coding Tools 更穩定可靠 | 🚧 |
|
||||
| [高級三：多平台開發：如何構建微信小程序](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 了解微信小程序生態，從官方模板到上線完成一個前端小程序 | ✅ |
|
||||
| [高級四：多平台開發：如何構建微信小程序-包含後端](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 在小程序中接入數據庫與後端邏輯，打通完整業務閉環 | 🚧 |
|
||||
| [高級五：多平台開發：如何構建安卓程序](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | 使用 Expo 等工具，完成 Web/原生一體化的安卓應用開發 | ✅ |
|
||||
| [高級六：多平台開發：如何構建 iOS 程序](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | 使用 Expo 等工具，完成 Web/原生一體化的 iOS 應用開發 | ✅ |
|
||||
| [高級七：如何構建屬於自己的個人網頁與學術博客](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 從選型、搭建到部署，構建展示個人項目與學術成果的長久在線主頁 | 🚧 |
|
||||
|
||||
#### AI 能力附錄
|
||||
|
||||
| 章节 | 關鍵內容 | 狀態 |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
|
||||
| [高級 AI 一：什麼是 RAG 以及它如何工作](../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | 系統理解 RAG 原理與常見架構，為複雜應用提供知識檢索基礎 | ✅ |
|
||||
| [高級 AI 二：中高級 RAG 與工作流編排：以 LangGraph 為例](../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 使用 LangGraph 等工具設計多步工作流與中高級 RAG 系統 | 🚧 |
|
||||
| 章節 | 關鍵內容 | 狀態 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- |
|
||||
| [高級 AI 一：什麼是 RAG 以及它如何工作](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | 系統理解 RAG 原理與常見架構，為複雜應用提供知識檢索基礎 | ✅ |
|
||||
| [高級 AI 二：中高級 RAG 與工作流編排：以 LangGraph 為例](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 使用 LangGraph 等工具設計多步工作流與中高級 RAG 系統 | 🚧 |
|
||||
|
||||
</details>
|
||||
|
||||
## 🛠️ 如何學習
|
||||
|
||||
- 根據個人能力，選擇性地閱讀和實踐相關章節，如果有問題歡迎 issue 提問。
|
||||
|
||||
## 💻 本地啟動本課件
|
||||
## 💻 本地啓動本課件
|
||||
|
||||
### 現代方案
|
||||
|
||||
在 AI IDE 對話框（vscode、cursor、trae 等）中，輸入下列提示詞啟動本課件：
|
||||
在 AI IDE 對話框（vscode、cursor、trae 等）中，輸入下列提示詞啓動本課件：
|
||||
|
||||
```
|
||||
請你幫我運行這個專案的本地服務
|
||||
請你幫我運行這個項目的本地服務
|
||||
```
|
||||
|
||||
### 舊方案
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打開瀏覽器訪問 `http://localhost:5173` 即可查看。
|
||||
3. 打開瀏覽器訪問 `http://localhost:3000` 即可查看。
|
||||
|
||||
## 🤝 參與貢獻
|
||||
|
||||
- 如果你發現了一些問題，或者覺得任何可以改進本專案的地方，可以提 Issue 進行反饋。如果提完沒有人回復你可以聯系[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
|
||||
- 如果你想參與貢獻本專案，可以提 Pull Request，如果提完沒有人回復你可以聯系[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
|
||||
- 如果你對 Datawhale 很感興趣並想要發起一個新的專案，請按照[Datawhale 開源專案指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)進行操作即可~
|
||||
- 如果你發現了一些問題，或者覺得任何可以改進本项目的地方，可以提 Issue 進行反饋。如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
|
||||
- 如果你想參與貢獻本项目，可以提 Pull Request，如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
|
||||
- 如果你對 Datawhale 很感興趣並想要發起一個新的項目，請按照[Datawhale 開源項目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)進行操作即可~
|
||||
|
||||
## 🙏 感謝每位貢獻者
|
||||
|
||||
- [散步-專案負責人](https://github.com/sanbuphy) (Datawhale成員)
|
||||
- [散步-項目負責人](https://github.com/sanbuphy) (Datawhale成員)
|
||||
- 方可-指導老師（Datawhale成員, 清華大學）
|
||||
- [Yerim Kang](https://github.com/yerim25)（實踐專案部分-清華大學）
|
||||
- 趙芷霖（實踐專案部分-清華大學）
|
||||
- [Yerim Kang](https://github.com/yerim25)（實踐項目部分-清華大學）
|
||||
- 趙芷霖（實踐項目部分-清華大學）
|
||||
- [李亦萱](https://yixuan20.github.io/)（頁面美術設計-清華大學）
|
||||
- 劉思怡（實踐項目部分-清華大學）
|
||||
- AI Vibe Coding 101 內測群完整給建議體驗的小夥伴們
|
||||
|
||||
### 特別感謝
|
||||
|
||||
- 感謝 [@Sm1les](https://github.com/Sm1les) 對本專案的幫助與支持
|
||||
- 感謝所有為本專案做出貢獻的開發者們 ❤️
|
||||
- 感謝 [@Sm1les](https://github.com/Sm1les) 對本項目的幫助與支持
|
||||
- 感謝所有為本项目做出貢獻的開發者們和支持點贊的朋友們 ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
||||
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
||||
</p>
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align=center style="margin-top: 30px;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||
@@ -201,13 +383,13 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## <span id="contact">📧 聯系我們</span>
|
||||
## <span id="contact">📧 聯繫我們</span>
|
||||
|
||||
<div align=center>
|
||||
<p>如果有問題提建議吐槽，或者想要一起交流，請掃描下方二維碼</p>
|
||||
<img src="../assets/wechat.png" width="280">
|
||||
<img src="../../assets/wechat.png" width="280">
|
||||
|
||||
<p>掃描下方二維碼關注公眾號：Datawhale</p>
|
||||
<p>掃描下方二維碼關注公衆號：Datawhale</p>
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user