delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comprehensive backend topics and fix build issues

Browse Source 
## 新增内容

### 附录文档扩展
- 扩展前端项目架构文档 (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
2026-02-26 04:35:28 +08:00
parent df51f84ab5
commit ef70b1d8e1
84 changed files with 12917 additions and 3477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -18,3 +18,6 @@ REFACTORING_PLAN.md
REFACTORING_REPORT.md
docs/.vitepress/.temp/*
.temp/*
.vitepress/cache/*
.vitepress/cache/*
docs/archived-components.md
.husky/pre-push
Executable
+19
View File
@@ -0,0 +1,19 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
echo "🚀 Pre-push checks started..."
echo ""
echo "1️⃣ Running forced build..."
if ! npm run build:force > /dev/null 2>&1; then
echo ""
echo "❌ Forced build failed! Please fix build errors before pushing."
echo ""
echo "💡 Run 'npm run build:force' to see detailed errors"
echo "💡 To skip pre-push checks: git push --no-verify"
exit 1
fi
echo "✅ Forced build: Success"
echo ""
echo "✅ Pre-push checks passed!"
README.md
+4 -1
View File
@@ -31,16 +31,19 @@
</p>
<p align="center">
<a href="./README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
<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/tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-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/tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-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="docs-readme/bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
</p>
</div>
docs-readme/ar-SA/README.md
+35 -192
View File
@@ -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
[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
*(راجع التفاصيل في الوثائق عبر الإنترنت أو المستودع الرئيسي)*
docs-readme/de-DE/README.md
+39 -187
View File
@@ -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
[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
*(Details siehe Online-Dokumentation oder Haupt-Repository)*
docs-readme/en-US/README.md
+304 -125
View File
@@ -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>
&nbsp;&nbsp;
<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"
/>
docs-readme/es-ES/README.md
+281 -123
View File
@@ -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>
&nbsp;&nbsp;
<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
docs-readme/fr-FR/README.md
+34 -190
View File
@@ -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
[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](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)*
docs-readme/ja-JP/README.md
+289 -108
View File
@@ -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>
&nbsp;&nbsp;
<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>
docs-readme/ko-KR/README.md
+304 -122
View File
@@ -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>
&nbsp;&nbsp;
<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
docs-readme/vi-VN/README.md
+40 -188
View File
@@ -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
[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](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)*
docs-readme/zh-TW/README.md
+296 -114
View File
@@ -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>
&nbsp;&nbsp;
<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>
docs/.vitepress/config.mjs
+763 -46
View File
@@ -20,7 +20,7 @@ const localeMap = {
lang: 'zh-CN',
hreflang: 'zh-CN'
},
'en-us': {
'en': {
ogLocale: 'en_US',
twitterSite: '@datawhale',
lang: 'en-US',
@@ -203,6 +203,709 @@ const commonThemeConfig = {
}
}
const productManagerSidebarEn = [
{
text: 'Getting Started',
collapsed: false,
items: [
{ text: 'Learning Map', link: '/en/stage-0/0.1-learning-map/' },
{
text: 'AI Era: If You Can Speak, You Can Code',
link: '/en/stage-0/0.2-ai-capabilities-through-games/'
}
]
},
{
text: 'Product Prototype Skills',
collapsed: false,
items: [
{
text: 'Master AI Programming Tools',
link: '/en/stage-1/1.1-introduction-to-ai-ide/'
},
{
text: 'Find Great Ideas',
link: '/en/stage-1/1.0-finding-great-idea/'
},
{
text: 'Build Product Prototypes',
link: '/en/stage-1/1.2-building-prototype/'
},
{
text: 'Integrate AI Capabilities',
link: '/en/stage-1/1.3-integrating-ai-capabilities/'
},
{
text: 'Complete Project Practice',
link: '/en/stage-1/1.4-complete-project-practice/'
}
]
},
{
text: 'Appendix: Business Thinking',
collapsed: false,
items: [
{
text: 'Product Thinking and Solution Design',
link: '/en/stage-1/appendix-a-product-thinking/'
},
{
text: 'AI Industry Application Scenarios (B-end)',
link: '/en/stage-1/appendix-industry-scenarios/'
},
{
text: 'AI Consumer Scenarios Inspiration (C-end)',
link: '/en/stage-1/appendix-c-consumer-scenarios/'
}
]
},
{
text: 'Appendix: Technical Solutions',
collapsed: false,
items: [
{
text: 'What to do if you encounter errors',
link: '/en/stage-1/appendix-b-common-errors/'
},
{
text: 'Comparison of Seven AI Programming Tools',
link: '/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
},
{
text: 'Design Websites with Agents',
link: '/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
}
]
}
]
const stage2SidebarEn = [
{
text: 'Frontend Development',
collapsed: false,
items: [
{
text: 'Frontend 0: Lovart Assets',
link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
},
{
text: 'Frontend 1: Figma & MasterGo',
link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/'
},
{
text: 'Frontend 2: UI Design',
link: '/zh-cn/stage-2/frontend/2.2-ui-design/'
},
{
text: 'Frontend 3: UI Design Specs',
link: '/zh-cn/stage-2/frontend/2.3-multi-product-ui/'
},
{
text: 'Frontend 4: Hogwarts Portraits',
link: '/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/'
}
]
},
{
text: 'Backend & Full-Stack',
collapsed: false,
items: [
{
text: 'Backend 1: What is API',
link: '/zh-cn/stage-2/backend/2.1-what-is-api/extra2/'
},
{
text: 'Backend 2: Database & Supabase',
link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
},
{
text: 'Backend 3: AI-Assisted API Code',
link: '/zh-cn/stage-2/backend/2.3-ai-interface-code/'
},
{
text: 'Backend 4: Git Workflow',
link: '/zh-cn/stage-2/backend/2.4-git-workflow/extra1/'
},
{
text: 'Backend 5: Deployment',
link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
},
{
text: 'Backend 6: Modern CLI Tools',
link: '/zh-cn/stage-2/backend/2.6-modern-cli/extra7/'
},
{
text: 'Backend 7: Stripe Payment',
link: '/zh-cn/stage-2/backend/2.7-stripe-payment/'
}
]
},
{
text: 'Assignments',
collapsed: false,
items: [
{
text: 'Assignment 1: Full-Stack App',
link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
},
{
text: 'Assignment 2: UI Library & Trae',
link: '/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/'
}
]
},
{
text: 'AI Capabilities Appendix',
collapsed: false,
items: [
{
text: 'AI 1: Dify & Knowledge Base',
link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/'
},
{
text: 'AI 2: AI Dictionary & Multimodal API',
link: '/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/'
}
]
}
]
const stage3SidebarEn = [
{
text: 'Core Skills',
collapsed: false,
items: [
{
text: 'Advanced 1: MCP & Claude Code Skills',
link: '/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/'
},
{
text: 'Advanced 2: Long Running Tasks',
link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
}
]
},
{
text: 'Multi-Platform',
collapsed: false,
items: [
{
text: 'Advanced 3: WeChat Mini Program',
link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
},
{
text: 'Advanced 4: WeChat Mini Program (Backend)',
link: '/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/'
},
{
text: 'Advanced 5: Android App - Compose',
link: '/zh-cn/stage-3/cross-platform/3.5-android-app/'
},
{
text: 'Advanced 6: iOS App - SwiftUI',
link: '/zh-cn/stage-3/cross-platform/3.6-ios-app/'
}
]
},
{
text: 'Personal Brand',
collapsed: false,
items: [
{
text: 'Advanced 7: Personal Website & Blog',
link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
}
]
},
{
text: 'AI Advanced Appendix',
collapsed: false,
items: [
{
text: 'AI Advanced 1: RAG Introduction',
link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
},
{
text: 'AI Advanced 2: LangGraph & Advanced RAG',
link: '/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/'
}
]
}
]
const appendixSidebarEn = [
{
text: 'I. Computer Fundamentals',
collapsed: false,
items: [
{
text: 'Full-Stack in Vibe Coding Era',
link: '/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack'
},
{
text: 'Power On to Web Visit',
link: '/zh-cn/appendix/1-computer-fundamentals/power-on-to-web'
},
{
text: 'Transistor to CPU',
link: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu'
},
{
text: 'Computer Organization',
link: '/zh-cn/appendix/1-computer-fundamentals/computer-organization'
},
{
text: 'Operating Systems',
link: '/zh-cn/appendix/1-computer-fundamentals/operating-systems'
},
{
text: 'Data Encoding & Storage',
link: '/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage'
},
{
text: 'Computer Networks',
link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
},
{
text: 'Data Structures',
link: '/zh-cn/appendix/1-computer-fundamentals/data-structures'
},
{
text: 'Algorithm Thinking',
link: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking'
},
{
text: 'Programming Languages',
link: '/zh-cn/appendix/1-computer-fundamentals/programming-languages'
},
{
text: 'Compilers Intro',
link: '/zh-cn/appendix/1-computer-fundamentals/compilers'
},
{
text: 'Type Systems Intro',
link: '/zh-cn/appendix/1-computer-fundamentals/type-systems'
}
]
},
{
text: 'II. Tools & Environment',
collapsed: false,
items: [
{
text: 'IDE Basics',
link: '/zh-cn/appendix/2-development-tools/ide-basics'
},
{
text: 'Command Line & Shell',
link: '/zh-cn/appendix/2-development-tools/command-line-shell'
},
{
text: 'Git: Code Time Machine',
link: '/zh-cn/appendix/2-development-tools/git-version-control'
},
{
text: 'Env Vars & PATH',
link: '/zh-cn/appendix/2-development-tools/environment-path'
},
{
text: 'Ports & Localhost',
link: '/zh-cn/appendix/2-development-tools/ports-localhost'
},
{
text: 'SSH & Key Auth',
link: '/zh-cn/appendix/2-development-tools/ssh-authentication'
},
{
text: 'Package Managers',
link: '/zh-cn/appendix/2-development-tools/package-managers'
},
{
text: 'Art of Debugging',
link: '/zh-cn/appendix/2-development-tools/debugging-art/'
},
{
text: 'Regex',
link: '/zh-cn/appendix/2-development-tools/regex'
}
]
},
{
text: 'III. Browser & Frontend',
collapsed: false,
items: [
{
text: 'JavaScript Deep Dive',
link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
},
{
text: 'TypeScript Intro',
link: '/zh-cn/appendix/3-browser-and-frontend/typescript'
},
{
text: 'Frontend Frameworks',
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
},
{
text: 'Browser as OS',
link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os'
},
{
text: 'Rendering Pipeline',
link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering'
},
{
text: 'HTML / CSS Layout',
link: '/zh-cn/appendix/3-browser-and-frontend/html-css-layout'
},
{
text: 'JS Runtime',
link: '/zh-cn/appendix/3-browser-and-frontend/javascript-runtime'
},
{
text: 'Nature of Frameworks',
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature'
},
{
text: 'State Management',
link: '/zh-cn/appendix/3-browser-and-frontend/state-management'
},
{
text: 'Routing & Navigation',
link: '/zh-cn/appendix/3-browser-and-frontend/routing-navigation'
},
{
text: 'Graphics & Animation',
link: '/zh-cn/appendix/3-browser-and-frontend/graphics-animation'
},
{
text: 'Real-time Comm',
link: '/zh-cn/appendix/3-browser-and-frontend/realtime-communication'
},
{
text: 'Web Performance',
link: '/zh-cn/appendix/3-browser-and-frontend/web-performance'
},
{
text: 'Frontend Engineering',
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering'
},
{
text: 'Project Architecture',
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture'
},
{
text: 'A11y & i18n',
link: '/zh-cn/appendix/3-browser-and-frontend/a11n-i18n'
}
]
},
{
text: 'IV. Server & Backend',
collapsed: false,
items: [
{
text: 'Backend Languages',
link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
},
{
text: 'Client Languages',
link: '/zh-cn/appendix/4-server-and-backend/client-languages'
},
{
text: 'Cross-platform Solutions',
link: '/zh-cn/appendix/4-server-and-backend/cross-platform'
},
{
text: 'HTTP Protocol',
link: '/zh-cn/appendix/4-server-and-backend/http-protocol'
},
{
text: 'Request Journey',
link: '/zh-cn/appendix/4-server-and-backend/request-journey'
},
{
text: 'Web Frameworks',
link: '/zh-cn/appendix/4-server-and-backend/web-frameworks'
},
{
text: 'API Intro',
link: '/zh-cn/appendix/4-server-and-backend/api-intro'
},
{
text: 'API Design Philosophy',
link: '/zh-cn/appendix/4-server-and-backend/api-design'
},
{
text: 'Serialization',
link: '/zh-cn/appendix/4-server-and-backend/serialization'
},
{
text: 'Auth & Authorization',
link: '/zh-cn/appendix/4-server-and-backend/auth-authorization'
},
{
text: 'Concurrency & Async',
link: '/zh-cn/appendix/4-server-and-backend/concurrency-async'
},
{
text: 'Caching Strategies',
link: '/zh-cn/appendix/4-server-and-backend/caching'
},
{
text: 'Message Queues',
link: '/zh-cn/appendix/4-server-and-backend/message-queues'
},
{
text: 'Async Task Queues',
link: '/zh-cn/appendix/4-server-and-backend/async-task-queues'
},
{
text: 'Rate Limiting',
link: '/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure'
},
{
text: 'Search Engine Principles',
link: '/zh-cn/appendix/4-server-and-backend/search-engines'
},
{
text: 'File Storage',
link: '/zh-cn/appendix/4-server-and-backend/file-storage'
},
{
text: 'Backend Architecture',
link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
},
{
text: 'Project Architecture',
link: '/zh-cn/appendix/4-server-and-backend/backend-project-architecture'
},
{
text: 'DSL Intro',
link: '/zh-cn/appendix/4-server-and-backend/domain-specific-languages'
}
]
},
{
text: 'V. Data',
collapsed: false,
items: [
{
text: 'Database Fundamentals',
link: '/zh-cn/appendix/5-data/database-fundamentals'
},
{
text: 'Data Models Panorama',
link: '/zh-cn/appendix/5-data/data-models'
},
{
text: 'Data Tracking',
link: '/zh-cn/appendix/5-data/data-tracking'
},
{
text: 'Data Analysis',
link: '/zh-cn/appendix/5-data/data-analysis'
},
{
text: 'A/B Testing',
link: '/zh-cn/appendix/5-data/ab-testing'
},
{
text: 'Data Visualization',
link: '/zh-cn/appendix/5-data/data-visualization'
},
{
text: 'Data Governance',
link: '/zh-cn/appendix/5-data/data-governance'
}
]
},
{
text: 'VI. Architecture',
collapsed: false,
items: [
{
text: 'Monolith to Microservices',
link: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices'
},
{
text: 'Distributed Systems',
link: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems'
},
{
text: 'HA & Disaster Recovery',
link: '/zh-cn/appendix/6-architecture-and-system-design/high-availability'
},
{
text: 'System Design',
link: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology'
}
]
},
{
text: 'VII. Infrastructure',
collapsed: false,
items: [
{
text: 'Linux Basics',
link: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics'
},
{
text: 'Docker Containers',
link: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers'
},
{
text: 'Kubernetes',
link: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes'
},
{
text: 'CI / CD',
link: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd'
},
{
text: 'Domain, DNS & HTTPS',
link: '/zh-cn/appendix/7-infrastructure-and-operations/dns-https'
},
{
text: 'Load Balancing',
link: '/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway'
},
{
text: 'Gateway & Reverse Proxy',
link: '/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy'
},
{
text: 'Cloud Platforms',
link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms'
},
{
text: 'IAM',
link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam'
},
{
text: 'Storage & CDN',
link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn'
},
{
text: 'IaC',
link: '/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code'
},
{
text: 'Monitoring & Logging',
link: '/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging'
},
{
text: 'Incident Response',
link: '/zh-cn/appendix/7-infrastructure-and-operations/incident-response'
}
]
},
{
text: 'VIII. Artificial Intelligence',
collapsed: false,
items: [
{
text: 'AI History & Concepts',
link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
},
{
text: 'Neural Networks',
link: '/zh-cn/appendix/8-artificial-intelligence/neural-networks'
},
{
text: 'Transformer & Attention',
link: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention'
},
{
text: 'LLM Principles',
link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
},
{
text: 'Prompt Engineering',
link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
},
{
text: 'Context Engineering',
link: '/zh-cn/appendix/8-artificial-intelligence/context-engineering'
},
{
text: 'Multimodal Models',
link: '/zh-cn/appendix/8-artificial-intelligence/multimodal-models'
},
{
text: 'Image Generation',
link: '/zh-cn/appendix/8-artificial-intelligence/image-generation'
},
{
text: 'Speech Synthesis',
link: '/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition'
},
{
text: 'Embedding & Vector Search',
link: '/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval'
},
{
text: 'RAG Architecture',
link: '/zh-cn/appendix/8-artificial-intelligence/rag'
},
{
text: 'AI Agent & Tools',
link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
},
{
text: 'AI Protocols (MCP)',
link: '/zh-cn/appendix/8-artificial-intelligence/ai-protocols'
},
{
text: 'Fine-tuning & Deployment',
link: '/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment'
},
{
text: 'AI Native Design',
link: '/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design'
},
{
text: 'AI Dictionary',
link: '/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary'
}
]
},
{
text: 'IX. Engineering Excellence',
collapsed: false,
items: [
{
text: 'Code Quality',
link: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring'
},
{
text: 'Testing Strategies',
link: '/zh-cn/appendix/9-engineering-excellence/testing-strategies'
},
{
text: 'Design Patterns',
link: '/zh-cn/appendix/9-engineering-excellence/design-patterns'
},
{
text: 'Security Thinking',
link: '/zh-cn/appendix/9-engineering-excellence/security-thinking'
},
{
text: 'Technical Writing',
link: '/zh-cn/appendix/9-engineering-excellence/technical-writing'
},
{
text: 'Open Source',
link: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration'
},
{
text: 'Tech Selection',
link: '/zh-cn/appendix/9-engineering-excellence/technology-selection'
}
]
}
]
const productManagerSidebar = [
{
text: '新手入门',
@@ -288,6 +991,15 @@ export default defineConfig({
base: base,
ignoreDeadLinks: true,
// Vite 配置
vite: {
server: {
watch: {
ignored: ['**/docs/.vitepress/dist/**']
}
}
},
// Sitemap 配置
sitemap: {
hostname: 'https://datawhalechina.github.io/easy-vibe',
@@ -726,7 +1438,7 @@ export default defineConfig({
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering'
},
{
text: '前端项目架构设计',
text: '前端项目文件目录设计',
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture'
},
{
@@ -812,7 +1524,7 @@ export default defineConfig({
link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
},
{
text: '后端项目架构设计',
text: '后端项目文件目录设计',
link: '/zh-cn/appendix/4-server-and-backend/backend-project-architecture'
},
{
@@ -1045,15 +1757,15 @@ export default defineConfig({
},
// 英文
'en-us': {
label: 'English (US)',
'en': {
label: 'English',
lang: 'en-US',
link: '/en-us/',
link: '/en/',
title: 'Easy-Vibe Tutorial',
description:
'Learn Vibe Coding from Zero to Advanced - Master AI programming with Claude Code, Cursor, and other AI IDE tools',
head: getSeoHead(
'en-us',
'en',
'Easy-Vibe Tutorial',
'Learn Vibe Coding from Zero to Advanced - Master AI programming with Claude Code, Cursor, and other AI IDE tools'
),
@@ -1064,23 +1776,28 @@ export default defineConfig({
label: 'On this page'
},
nav: [
{ text: 'Home', link: '/en-us/' },
{ text: 'Home', link: '/en/' },
{
text: 'Novice & PM',
link: '/en-us/stage-0/'
link: '/en/stage-0/'
},
{
text: 'Full-Stack Development',
link: '/en-us/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'Advanced Development',
link: '/en-us/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'Appendix', link: '/en-us/appendix/' }
{ text: 'Appendix', link: '/zh-cn/appendix/index' }
],
// TODO: Add English sidebar when content is ready
sidebar: {}
sidebar: {
'/en/stage-0/': productManagerSidebarEn,
'/en/stage-1/': productManagerSidebarEn,
'/en/stage-2/': stage2SidebarEn,
'/en/stage-3/': stage3SidebarEn,
'/en/appendix/': appendixSidebarEn
}
}
},
@@ -1107,17 +1824,17 @@ export default defineConfig({
{ text: 'ホーム', link: '/ja-jp/' },
{
text: '初心者とPM',
link: '/ja-jp/stage-0/'
link: '/zh-cn/stage-0/'
},
{
text: 'フルスタック開発',
link: '/ja-jp/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: '上級開発',
link: '/ja-jp/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: '付録', link: '/ja-jp/appendix/' }
{ text: '付録', link: '/zh-cn/appendix/' }
],
// TODO: Add Japanese sidebar when content is ready
sidebar: {}
@@ -1145,17 +1862,17 @@ export default defineConfig({
{ text: '首頁', link: '/zh-tw/' },
{
text: '新手與產品原型',
link: '/zh-tw/stage-0/'
link: '/zh-cn/stage-0/'
},
{
text: '初中級開發',
link: '/zh-tw/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: '高級開發',
link: '/zh-tw/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: '附錄', link: '/zh-tw/appendix/' }
{ text: '附錄', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1180,16 +1897,16 @@ export default defineConfig({
},
nav: [
{ text: '홈', link: '/ko-kr/' },
{ text: '초보자 & PM', link: '/ko-kr/stage-0/' },
{ text: '초보자 & PM', link: '/zh-cn/stage-0/' },
{
text: '풀스택 개발',
link: '/ko-kr/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: '고급 개발',
link: '/ko-kr/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: '부록', link: '/ko-kr/appendix/' }
{ text: '부록', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1216,17 +1933,17 @@ export default defineConfig({
{ text: 'Inicio', link: '/es-es/' },
{
text: 'Principiante y PM',
link: '/es-es/stage-0/'
link: '/zh-cn/stage-0/'
},
{
text: 'Desarrollo Full Stack',
link: '/es-es/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'Desarrollo Avanzado',
link: '/es-es/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'Apéndice', link: '/es-es/appendix/' }
{ text: 'Apéndice', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1251,16 +1968,16 @@ export default defineConfig({
},
nav: [
{ text: 'Accueil', link: '/fr-fr/' },
{ text: 'Débutant & PM', link: '/fr-fr/stage-0/' },
{ text: 'Débutant & PM', link: '/zh-cn/stage-0/' },
{
text: 'Développement Full Stack',
link: '/fr-fr/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'Développement Avancé',
link: '/fr-fr/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'Annexe', link: '/fr-fr/appendix/' }
{ text: 'Annexe', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1285,16 +2002,16 @@ export default defineConfig({
},
nav: [
{ text: 'Start', link: '/de-de/' },
{ text: 'Anfänger & PM', link: '/de-de/stage-0/' },
{ text: 'Anfänger & PM', link: '/zh-cn/stage-0/' },
{
text: 'Full Stack Entwicklung',
link: '/de-de/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'Fortgeschrittene Entwicklung',
link: '/de-de/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'Anhang', link: '/de-de/appendix/' }
{ text: 'Anhang', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1321,17 +2038,17 @@ export default defineConfig({
{ text: 'الرئيسية', link: '/ar-sa/' },
{
text: 'مبتدأ & PM',
link: '/ar-sa/stage-0/'
link: '/zh-cn/stage-0/'
},
{
text: 'تطوير Full Stack',
link: '/ar-sa/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'تطوير متقدم',
link: '/ar-sa/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'ملحق', link: '/ar-sa/appendix/' }
{ text: 'ملحق', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
@@ -1358,17 +2075,17 @@ export default defineConfig({
{ text: 'Trang chủ', link: '/vi-vn/' },
{
text: 'Người mới & PM',
link: '/vi-vn/stage-0/'
link: '/zh-cn/stage-0/'
},
{
text: 'Phát triển Full Stack',
link: '/vi-vn/stage-2/'
link: '/zh-cn/stage-2/'
},
{
text: 'Phát triển Nâng cao',
link: '/vi-vn/stage-3/'
link: '/zh-cn/stage-3/'
},
{ text: 'Phụ lục', link: '/vi-vn/appendix/' }
{ text: 'Phụ lục', link: '/zh-cn/appendix/' }
],
sidebar: {}
}
docs/.vitepress/theme/components/AppendixFlowMap.vue
+390
View File
@@ -0,0 +1,390 @@
<script setup>
import { ref } from 'vue'
import { withBase } from 'vitepress'
const categories = [
{
id: 'computer-fundamentals',
name: '计算机基础',
icon: '💻',
color: '#10b981',
bgGradient: 'linear-gradient(135deg, #10b98115, #10b98108)',
articles: [
{ title: 'Vibe Coding 全栈开发', path: '/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack' },
{ title: '从晶体管到 CPU', path: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu' },
{ title: '操作系统', path: '/zh-cn/appendix/1-computer-fundamentals/operating-systems' },
{ title: '数据结构', path: '/zh-cn/appendix/1-computer-fundamentals/data-structures' },
{ title: '算法思维入门', path: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking' },
{ title: '编程语言图谱', path: '/zh-cn/appendix/1-computer-fundamentals/programming-languages' },
{ title: '网络基础', path: '/zh-cn/appendix/1-computer-fundamentals/computer-networks' }
]
},
{
id: 'development-tools',
name: '开发工具',
icon: '🔧',
color: '#3b82f6',
bgGradient: 'linear-gradient(135deg, #3b82f615, #3b82f608)',
articles: [
{ title: 'IDE 基础', path: '/zh-cn/appendix/2-development-tools/ide-basics' },
{ title: '命令行与 Shell', path: '/zh-cn/appendix/2-development-tools/command-line-shell' },
{ title: 'Git 版本控制', path: '/zh-cn/appendix/2-development-tools/git-version-control' },
{ title: '环境变量与 PATH', path: '/zh-cn/appendix/2-development-tools/environment-path' },
{ title: '包管理器', path: '/zh-cn/appendix/2-development-tools/package-managers' },
{ title: '调试的艺术', path: '/zh-cn/appendix/2-development-tools/debugging-art/' }
]
},
{
id: 'browser-frontend',
name: '浏览器与前端',
icon: '🌍',
color: '#f59e0b',
bgGradient: 'linear-gradient(135deg, #f59e0b15, #f59e0b08)',
articles: [
{ title: 'JavaScript 深入', path: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive' },
{ title: 'TypeScript', path: '/zh-cn/appendix/3-browser-and-frontend/typescript' },
{ title: '浏览器是一个操作系统', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os' },
{ title: '浏览器渲染管道', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering' },
{ title: '前端框架对比', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks' },
{ title: '前端工程化', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering' }
]
},
{
id: 'server-backend',
name: '服务端与后端',
icon: '⚙️',
color: '#8b5cf6',
bgGradient: 'linear-gradient(135deg, #8b5cf615, #8b5cf608)',
articles: [
{ title: '后端语言对比', path: '/zh-cn/appendix/4-server-and-backend/backend-languages' },
{ title: 'HTTP 协议', path: '/zh-cn/appendix/4-server-and-backend/http-protocol' },
{ title: 'API 设计哲学', path: '/zh-cn/appendix/4-server-and-backend/api-design' },
{ title: 'Web 框架的本质', path: '/zh-cn/appendix/4-server-and-backend/web-frameworks' },
{ title: '认证与授权', path: '/zh-cn/appendix/4-server-and-backend/auth-authorization' },
{ title: '缓存策略', path: '/zh-cn/appendix/4-server-and-backend/caching' },
{ title: '消息队列', path: '/zh-cn/appendix/4-server-and-backend/message-queues' }
]
},
{
id: 'data',
name: '数据',
icon: '📊',
color: '#ec4899',
bgGradient: 'linear-gradient(135deg, #ec489915, #ec489908)',
articles: [
{ title: 'SQL', path: '/zh-cn/appendix/5-data/sql' },
{ title: '数据库原理', path: '/zh-cn/appendix/5-data/database-fundamentals' },
{ title: '数据模型全景', path: '/zh-cn/appendix/5-data/data-models' },
{ title: '数据分析基础', path: '/zh-cn/appendix/5-data/data-analysis' }
]
},
{
id: 'architecture',
name: '架构设计',
icon: '🏗️',
color: '#14b8a6',
bgGradient: 'linear-gradient(135deg, #14b8a615, #14b8a608)',
articles: [
{ title: '从单体到微服务', path: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices' },
{ title: '分布式系统', path: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems' },
{ title: '高可用与容灾', path: '/zh-cn/appendix/6-architecture-and-system-design/high-availability' },
{ title: '系统设计方法论', path: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology' }
]
},
{
id: 'infrastructure',
name: '基础设施',
icon: '☁️',
color: '#06b6d4',
bgGradient: 'linear-gradient(135deg, #06b6d415, #06b6d408)',
articles: [
{ title: 'Linux 基础', path: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics' },
{ title: 'Docker 容器化', path: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers' },
{ title: 'Kubernetes', path: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes' },
{ title: 'CI/CD 自动化', path: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd' }
]
},
{
id: 'ai',
name: '人工智能',
icon: '🤖',
color: '#f97316',
bgGradient: 'linear-gradient(135deg, #f9731615, #f9731608)',
articles: [
{ title: 'AI 简史', path: '/zh-cn/appendix/8-artificial-intelligence/ai-history' },
{ title: '神经网络', path: '/zh-cn/appendix/8-artificial-intelligence/neural-networks' },
{ title: 'Transformer', path: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention' },
{ title: '大语言模型原理', path: '/zh-cn/appendix/8-artificial-intelligence/llm-principles' },
{ title: 'RAG 架构', path: '/zh-cn/appendix/8-artificial-intelligence/rag' },
{ title: 'AI Agent', path: '/zh-cn/appendix/8-artificial-intelligence/ai-agents' }
]
},
{
id: 'engineering',
name: '工程素养',
icon: '✨',
color: '#a855f7',
bgGradient: 'linear-gradient(135deg, #a855f715, #a855f708)',
articles: [
{ title: '设计模式', path: '/zh-cn/appendix/9-engineering-excellence/design-patterns' },
{ title: '代码质量与重构', path: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring' },
{ title: '测试策略', path: '/zh-cn/appendix/9-engineering-excellence/testing-strategies' },
{ title: '技术写作', path: '/zh-cn/appendix/9-engineering-excellence/technical-writing' },
{ title: '开源协作', path: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration' }
]
}
]
const activeCategory = ref(null)
const hoveredArticle = ref(null)
const toggleCategory = (id) => {
activeCategory.value = activeCategory.value === id ? null : id
}
const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length, 0)
</script>
<template>
<div class="appendix-bento">
<div class="bento-header">
<h3 class="bento-title">探索附录</h3>
<p class="bento-subtitle">9 个主题方向 · {{ articleCount }} 篇文章</p>
</div>
<div class="bento-grid">
<div
v-for="category in categories"
:key="category.id"
class="bento-card"
:class="{ active: activeCategory === category.id }"
:style="{
'--card-color': category.color,
'--card-bg': category.bgGradient
}"
@click="toggleCategory(category.id)"
>
<div class="card-icon">{{ category.icon }}</div>
<div class="card-content">
<h4 class="card-title">{{ category.name }}</h4>
<p class="card-count">{{ category.articles.length }} 篇</p>
</div>
<Transition name="pop">
<div v-if="activeCategory === category.id" class="card-articles">
<a
v-for="article in category.articles"
:key="article.path"
:href="withBase(article.path)"
class="article-item"
@mouseenter="hoveredArticle = article.path"
@mouseleave="hoveredArticle = null"
>
<span class="article-dot"></span>
<span class="article-title">{{ article.title }}</span>
<span class="article-arrow">→</span>
</a>
</div>
</Transition>
<div class="card-indicator" v-if="activeCategory !== category.id">
<span>{{ category.articles.length }} 篇 →</span>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.appendix-bento {
padding: 1rem 0;
}
.bento-header {
text-align: center;
margin-bottom: 1.5rem;
}
.bento-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--vp-c-text-1);
margin: 0 0 0.25rem;
letter-spacing: -0.02em;
}
.bento-subtitle {
font-size: 0.9rem;
color: var(--vp-c-text-2);
margin: 0;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (max-width: 900px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.bento-grid {
grid-template-columns: 1fr;
}
}
.bento-card {
position: relative;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 16px;
padding: 1.25rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.bento-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--card-bg);
opacity: 0;
transition: opacity 0.3s ease;
}
.bento-card:hover::before {
opacity: 1;
}
.bento-card:hover {
border-color: var(--card-color);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.bento-card.active {
border-color: var(--card-color);
background: var(--vp-c-bg);
}
.bento-card.active::before {
opacity: 1;
}
.card-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
position: relative;
}
.card-content {
position: relative;
}
.card-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--vp-c-text-1);
margin: 0 0 0.25rem;
}
.card-count {
font-size: 0.85rem;
color: var(--vp-c-text-2);
margin: 0;
}
.card-indicator {
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
font-size: 0.8rem;
color: var(--vp-c-text-3);
transition: all 0.2s ease;
}
.bento-card:hover .card-indicator {
color: var(--card-color);
}
.card-articles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vp-c-bg);
border-radius: 15px;
padding: 1rem;
overflow-y: auto;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.article-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
color: var(--vp-c-text-1);
}
.article-item:hover {
background: var(--vp-c-bg-soft);
}
.article-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--card-color);
flex-shrink: 0;
}
.article-title {
flex: 1;
font-size: 0.85rem;
font-weight: 500;
}
.article-arrow {
opacity: 0;
color: var(--card-color);
transition: all 0.2s ease;
font-size: 0.9rem;
}
.article-item:hover .article-arrow {
opacity: 1;
transform: translateX(3px);
}
/* Animations */
.pop-enter-active {
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-leave-active {
transition: all 0.2s ease;
}
.pop-enter-from {
opacity: 0;
transform: scale(0.95);
}
.pop-leave-to {
opacity: 0;
transform: scale(0.95);
}
</style>
docs/.vitepress/theme/components/HomeFeatures.vue
+36 -36
View File
@@ -220,7 +220,7 @@ const i18n = {
btn: '>_ Start'
}
},
'en-us': {
'en': {
nav: {
title: 'Easy-Vibe Tutorial',
home: 'Home',
@@ -231,27 +231,27 @@ const i18n = {
start: 'Start Learning'
},
stage1: {
cat: 'Stage 1 · Novice & PM',
cat: 'Stage 1 · Getting Started',
title: 'Zero to Hero, <br><span class="highlight">Be Your Own PM.</span>',
sub: 'No CS background needed. Just speak your idea, and AI will turn it into high-fidelity web prototypes.',
sub: 'No CS background needed. Just speak your ideas—AI will turn them into high-fidelity web prototypes.',
cards: [
{
title: 'AI Product Manager',
desc: 'From idea to prototype, just by speaking.',
sub: 'Non-tech friendly',
link: '/en-us/stage-0/'
title: 'Learning Map',
desc: 'Understand the complete learning path from zero to full-stack development.',
sub: 'All Ages Friendly',
link: '/en/stage-0/0.1-learning-map/'
},
{
title: 'Gamified Intro',
desc: 'Build Snake, Tetris, and break the fear of code.',
sub: 'Learn by playing',
link: '/en-us/stage-0/'
desc: 'Experience the magic of AI programming by building games like Snake.',
sub: 'Learn by Playing',
link: '/en/stage-0/0.2-ai-capabilities-through-games/'
},
{
title: 'Vibe Coding',
desc: 'Master the core of AI coding: Prompt Engineering & Context.',
desc: 'Master the core of AI coding: From product ideas to interactive prototypes.',
sub: 'Core Mindset',
link: '/en-us/stage-0/'
link: '/en/stage-0/'
}
]
},
@@ -259,25 +259,25 @@ const i18n = {
cat: 'Stage 2 · Junior/Mid Dev',
title:
'Go Full Stack, <br><span class="highlight">Build Real Apps.</span>',
sub: 'Master frontend-backend separation. Build commercial-grade projects with DB, API, and complex interactions.',
sub: 'Master frontend-backend separation and build commercial-grade projects with DB and API.',
cards: [
{
title: 'Full Stack',
headline: 'Frontend & Backend.',
desc: 'From DB design to API and components, build a modern web app completely.',
link: '/en-us/stage-2/'
link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
},
{
title: 'Real Projects',
headline: 'No Toy Code.',
desc: 'Deep dive into Auth, Storage, File Uploads and core business logic.',
link: '/en-us/stage-2/'
link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
},
{
title: 'Deployment',
headline: 'Show the World.',
desc: 'Server config, DNS, CI/CD. The last mile of product delivery.',
link: '/en-us/stage-2/'
link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
}
]
},
@@ -290,22 +290,22 @@ const i18n = {
{
title: 'WeChat Mini-app',
desc: 'Cross-platform dev, reaching millions of users.',
link: '/en-us/stage-3/'
link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
},
{
title: 'AI Native Apps',
desc: 'RAG, Agent. Explore the limits of LLMs.',
link: '/en-us/stage-3/'
link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
},
{
title: 'Complex Arch',
desc: 'High concurrency, High availability architecture design.',
link: '/en-us/stage-3/'
desc: 'Architecture design for high concurrency and stable AI tasks.',
link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
},
{
title: 'Personal Brand',
desc: 'Build your own website and academic blog.',
link: '/en-us/stage-3/'
link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
}
]
},
@@ -318,62 +318,62 @@ const i18n = {
{
title: 'AI History',
desc: 'Milestones in AI evolution.',
link: '/en-us/appendix/ai-evolution'
link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
},
{
title: 'Prompt Eng',
desc: 'Master AI communication skills.',
link: '/en-us/appendix/prompt-engineering'
link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
},
{
title: 'LLM Intro',
desc: 'Understanding Large Language Models.',
link: '/en-us/appendix/llm-intro'
link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
},
{
title: 'AI Agents',
desc: 'Autonomous decision-making AI.',
link: '/en-us/appendix/agent-intro'
link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
},
{
title: 'Web Basics',
desc: 'HTML/CSS/JS fundamentals.',
link: '/en-us/appendix/web-basics'
link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
},
{
title: 'Frontend Evo',
desc: 'Evolution of frontend tech stack.',
link: '/en-us/appendix/frontend-evolution'
link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
},
{
title: 'Backend Arch',
desc: 'From monolith to microservices.',
link: '/en-us/appendix/backend-evolution'
link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
},
{
title: 'Backend Lang',
desc: 'Choosing the right tech stack.',
link: '/en-us/appendix/backend-languages'
link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
},
{
title: 'Database',
desc: 'Core principles of data storage.',
link: '/en-us/appendix/database-intro'
link: '/zh-cn/appendix/5-data/database-fundamentals'
},
{
title: 'API Design',
desc: 'Designing robust interfaces.',
link: '/en-us/appendix/api-intro'
link: '/zh-cn/appendix/4-server-and-backend/api-intro'
},
{
title: 'Git',
desc: 'Version control mastery.',
link: '/en-us/appendix/git-intro'
link: '/zh-cn/appendix/2-development-tools/git-version-control'
},
{
title: 'Networks',
desc: 'Protocols and communication.',
link: '/en-us/appendix/computer-networks'
link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
}
]
},
@@ -1374,12 +1374,12 @@ const i18n = {
import { computed } from 'vue'
const t = computed(() => {
const code = lang.value ? lang.value.toLowerCase() : 'zh-cn'
return i18n[code] || i18n['en-us']
return i18n[code] || i18n['en']
})
const locales = [
{ code: 'zh-cn', text: '简体中文' },
{ code: 'en-us', text: 'English' },
{ code: 'en', text: 'English' },
{ code: 'ja-jp', text: '日本語' },
{ code: 'zh-tw', text: '繁體中文' },
{ code: 'ko-kr', text: '한국어' },
@@ -1699,7 +1699,7 @@ const appendixCards = [
</div>
<a
class="buy-btn"
:href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
:href="withBase(t.stage1.cards[0].link)"
>{{ t.footer.btn }}</a>
</div>
</div>
docs/.vitepress/theme/components/appendix/computer-fundamentals/BiosUefiInteractiveDemo.vue
+24 -8
View File
@@ -155,7 +155,7 @@
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { ref, computed, watch, onUnmounted } from 'vue'
const stage = ref(0)
const expandedOp = ref(-1)
@@ -313,15 +313,26 @@ function getDeviceStatus(i) {
return '等待'
}
const postTimer = ref(null)
const hwTimer = ref(null)
const bootTimer = ref(null)
onUnmounted(() => {
if (postTimer.value) clearInterval(postTimer.value)
if (hwTimer.value) clearInterval(hwTimer.value)
if (bootTimer.value) clearInterval(bootTimer.value)
})
// POST 自检动画
watch(() => stage.value, (newStage) => {
if (postTimer.value) clearInterval(postTimer.value)
if (newStage === 1) {
currentCheck.value = 0
const interval = setInterval(() => {
postTimer.value = setInterval(() => {
if (currentCheck.value < postItems.length) {
currentCheck.value++
} else {
clearInterval(interval)
if (postTimer.value) clearInterval(postTimer.value)
}
}, 600)
}
@@ -329,15 +340,16 @@ watch(() => stage.value, (newStage) => {
// 硬件初始化动画
watch(() => stage.value, (newStage) => {
if (hwTimer.value) clearInterval(hwTimer.value)
if (newStage === 2) {
activeHw.value = 0
hwProgress.value = 0
const interval = setInterval(() => {
hwTimer.value = setInterval(() => {
if (hwProgress.value < 100) {
hwProgress.value += 5
activeHw.value = Math.floor(hwProgress.value / 20) % hardwareItems.length
} else {
clearInterval(interval)
if (hwTimer.value) clearInterval(hwTimer.value)
}
}, 100)
}
@@ -345,11 +357,12 @@ watch(() => stage.value, (newStage) => {
// 启动设备搜索动画
watch(() => stage.value, (newStage) => {
if (bootTimer.value) clearInterval(bootTimer.value)
if (newStage === 3) {
currentDevice.value = 0
foundDevice.value = -1
let device = 0
const interval = setInterval(() => {
bootTimer.value = setInterval(() => {
if (device < bootDevices.length) {
currentDevice.value = device
// 假设第一个设备（硬盘）可启动
@@ -357,11 +370,11 @@ watch(() => stage.value, (newStage) => {
setTimeout(() => {
foundDevice.value = device
}, 400)
clearInterval(interval)
if (bootTimer.value) clearInterval(bootTimer.value)
}
device++
} else {
clearInterval(interval)
if (bootTimer.value) clearInterval(bootTimer.value)
}
}, 800)
}
@@ -387,6 +400,9 @@ function reset() {
hwProgress.value = 0
currentDevice.value = 0
foundDevice.value = -1
if (postTimer.value) clearInterval(postTimer.value)
if (hwTimer.value) clearInterval(hwTimer.value)
if (bootTimer.value) clearInterval(bootTimer.value)
}
</script>
docs/.vitepress/theme/components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue
+5 -1
View File
@@ -47,12 +47,16 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onUnmounted } from 'vue'
const selected = ref(0)
const visibleSteps = ref(0)
let timer = null
onUnmounted(() => {
if (timer) clearInterval(timer)
})
function selectMode(i) {
selected.value = i
visibleSteps.value = 0
docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
+11 -3
View File
@@ -451,7 +451,10 @@ function toggleAuto() {
} else {
autoRunning.value = true
autoTimer = setInterval(() => {
if (done.value) { stopAuto(); return }
if (done.value) {
stopAuto()
return
}
advance()
}, 900)
}
@@ -459,7 +462,10 @@ function toggleAuto() {
function stopAuto() {
autoRunning.value = false
if (autoTimer) { clearInterval(autoTimer); autoTimer = null }
if (autoTimer) {
clearInterval(autoTimer)
autoTimer = null
}
}
function reset() {
@@ -476,7 +482,9 @@ function reset() {
currentPhase.value = -1
}
onUnmounted(stopAuto)
onUnmounted(() => {
stopAuto()
})
</script>
<style scoped>
docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
+7 -1
View File
@@ -61,12 +61,17 @@ const updateClock = () => {
}
const runSequence = () => {
if (phaseTimer) clearTimeout(phaseTimer)
phase.value = 0
const delays = [1500, 1500, 1800]
let i = 0
const next = () => {
if (i < delays.length) {
phaseTimer = setTimeout(() => { phase.value = i + 1; i++; next() }, delays[i])
phaseTimer = setTimeout(() => {
phase.value = i + 1
i++
next()
}, delays[i])
}
}
next()
@@ -77,6 +82,7 @@ onMounted(() => {
timer = setInterval(updateClock, 30000)
runSequence()
})
onUnmounted(() => {
if (timer) clearInterval(timer)
if (phaseTimer) clearTimeout(phaseTimer)
docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
+1 -1
View File
@@ -165,7 +165,7 @@ onMounted(() => {
})
onUnmounted(() => {
clearInterval(timer)
if (timer) clearInterval(timer)
})
</script>
docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
+1 -1
View File
@@ -145,7 +145,7 @@ onMounted(() => {
})
onUnmounted(() => {
clearInterval(timer)
if (timer) clearInterval(timer)
})
</script>
docs/.vitepress/theme/components/appendix/computer-fundamentals/OSArchitectureDemo.vue
+1 -1
View File
@@ -90,7 +90,7 @@ onMounted(() => {
})
onUnmounted(() => {
clearInterval(timer)
if (timer) clearInterval(timer)
})
</script>
docs/.vitepress/theme/components/appendix/computer-fundamentals/OSBootInteractiveDemo.vue
+16 -6
View File
@@ -418,23 +418,31 @@ onMounted(() => {
}, 1000)
})
const blTimer = ref(null)
const kernelTimer = ref(null)
const svcTimer = ref(null)
onUnmounted(() => {
if (timeInterval) clearInterval(timeInterval)
if (blTimer.value) clearInterval(blTimer.value)
if (kernelTimer.value) clearInterval(kernelTimer.value)
if (svcTimer.value) clearInterval(svcTimer.value)
})
// 引导程序动画
watch(() => stage.value, (newStage) => {
if (blTimer.value) clearInterval(blTimer.value)
if (newStage === 1) {
blStep.value = -1
blCodeLine.value = -1
let step = 0
const interval = setInterval(() => {
blTimer.value = setInterval(() => {
if (step < blSteps.length) {
blStep.value = step
blCodeLine.value = step + 1
step++
} else {
clearInterval(interval)
if (blTimer.value) clearInterval(blTimer.value)
}
}, 600)
}
@@ -442,14 +450,15 @@ watch(() => stage.value, (newStage) => {
// 内核加载动画
watch(() => stage.value, (newStage) => {
if (kernelTimer.value) clearInterval(kernelTimer.value)
if (newStage === 2) {
kernelProgress.value = 0
kernelName.value = Math.random() > 0.5 ? 'ntoskrnl.exe' : 'vmlinuz'
const interval = setInterval(() => {
kernelTimer.value = setInterval(() => {
if (kernelProgress.value < 100) {
kernelProgress.value += 4
} else {
clearInterval(interval)
if (kernelTimer.value) clearInterval(kernelTimer.value)
}
}, 80)
}
@@ -457,13 +466,14 @@ watch(() => stage.value, (newStage) => {
// 服务启动动画
watch(() => stage.value, (newStage) => {
if (svcTimer.value) clearInterval(svcTimer.value)
if (newStage === 3) {
svcProgress.value = 0
const interval = setInterval(() => {
svcTimer.value = setInterval(() => {
if (svcProgress.value < 100) {
svcProgress.value += 3
} else {
clearInterval(interval)
if (svcTimer.value) clearInterval(svcTimer.value)
}
}, 100)
}
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
+2 -2
View File
@@ -99,8 +99,8 @@ onMounted(() => {
})
onUnmounted(() => {
clearInterval(timer)
clearTimeout(switchTimer)
if (timer) clearInterval(timer)
if (switchTimer) clearTimeout(switchTimer)
})
const currentTask = computed(() => processes.value[currentIdx.value])
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgramLaunchDemo.vue
+1 -1
View File
@@ -98,7 +98,7 @@ onMounted(() => {
})
onUnmounted(() => {
clearInterval(timer)
if (timer) clearInterval(timer)
})
</script>
docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
+10 -4
View File
@@ -123,13 +123,14 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onUnmounted } from 'vue'
const activeAlgo = ref('linear')
const targetNumber = ref(7)
const foundIndex = ref(-1)
const searchStep = ref(-1)
const searching = ref(false)
const searchTimer = ref(null)
const numbers = ref([3, 7, 2, 9, 5, 1, 8, 4, 6, 10])
@@ -140,24 +141,29 @@ const binaryRight = ref(9)
const binaryMid = ref(4)
const binaryFoundIndex = ref(-1)
onUnmounted(() => {
if (searchTimer.value) clearInterval(searchTimer.value)
})
const startLinearSearch = () => {
if (searchTimer.value) clearInterval(searchTimer.value)
searching.value = true
searchStep.value = -1
foundIndex.value = -1
let step = 0
const interval = setInterval(() => {
searchTimer.value = setInterval(() => {
if (step < numbers.value.length) {
searchStep.value = step
if (numbers.value[step] === targetNumber.value) {
foundIndex.value = step
searching.value = false
clearInterval(interval)
if (searchTimer.value) clearInterval(searchTimer.value)
}
step++
} else {
searching.value = false
clearInterval(interval)
if (searchTimer.value) clearInterval(searchTimer.value)
}
}, 500)
}
docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
+10 -4
View File
@@ -123,24 +123,30 @@
</template>
<script setup>
import { ref, computed } from 'vue'
import { ref, onUnmounted } from 'vue'
const activeType = ref('serial')
const dataBits = ref(['1', '0', '1', '1', '0', '0', '1', '0'])
const dataBits = ref([1, 0, 1, 1, 0, 0, 1, 0])
const receivedBits = ref(['-', '-', '-', '-', '-', '-', '-', '-'])
const sendingBit = ref(null)
const timer = ref(null)
onUnmounted(() => {
if (timer.value) clearInterval(timer.value)
})
const startTransmission = () => {
if (timer.value) clearInterval(timer.value)
if (activeType.value === 'serial') {
receivedBits.value = ['-', '-', '-', '-', '-', '-', '-', '-']
let i = 0
const interval = setInterval(() => {
timer.value = setInterval(() => {
if (i < dataBits.value.length) {
sendingBit.value = i
receivedBits.value[i] = dataBits.value[i]
i++
} else {
clearInterval(interval)
if (timer.value) clearInterval(timer.value)
sendingBit.value = null
}
}, 300)
docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
+2 -1
View File
@@ -61,6 +61,7 @@ const steps = [
]
const autoPlay = () => {
if (timer) clearInterval(timer)
current.value = -1
playing.value = true
let i = 0
@@ -68,7 +69,7 @@ const autoPlay = () => {
current.value = i
i++
if (i >= steps.length) {
clearInterval(timer)
if (timer) clearInterval(timer)
playing.value = false
}
}, 800)
docs/.vitepress/theme/components/appendix/data-governance/DataGovernanceFrameworkDemo.vue
+130
View File
@@ -0,0 +1,130 @@
<!--
DataGovernanceFrameworkDemo.vue
数据治理框架演示：展示数据治理的核心流程
-->
<template>
<div class="governance-demo">
<div class="header">
<div class="title">数据治理框架</div>
<div class="subtitle">点击各阶段查看详情</div>
</div>
<div class="pipeline">
<div
v-for="(stage, i) in stages"
:key="stage.key"
:class="['stage', { active: activeStage === stage.key }]"
@click="activeStage = stage.key"
>
<div class="stage-num">{{ i + 1 }}</div>
<div class="stage-name">{{ stage.name }}</div>
<div v-if="i < stages.length - 1" class="arrow">→</div>
</div>
</div>
<div v-if="current" class="stage-detail">
<div class="detail-title">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="activities">
<div v-for="(act, i) in current.activities" :key="i" class="activity">
<span class="act-icon">{{ act.icon }}</span>
<div>
<div class="act-name">{{ act.name }}</div>
<div class="act-desc">{{ act.desc }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeStage = ref('define')
const stages = [
{
key: 'define',
name: '定义标准',
desc: '制定数据标准、命名规范、数据字典',
activities: [
{ icon: '📖', name: '数据字典', desc: '定义每个字段的含义、类型、取值范围' },
{ icon: '📏', name: '命名规范', desc: '统一字段命名：snake_case、驼峰、前缀约定' },
{ icon: '🏷️', name: '分类分级', desc: '按敏感度分级：公开、内部、机密、绝密' }
]
},
{
key: 'collect',
name: '采集接入',
desc: '规范数据采集流程，确保源头质量',
activities: [
{ icon: '🔌', name: '接入规范', desc: '定义数据接入的格式、协议、频率要求' },
{ icon: '✅', name: '入库校验', desc: '数据写入前进行格式、完整性、合规性校验' },
{ icon: '📝', name: '血缘记录', desc: '记录数据来源、加工链路、依赖关系' }
]
},
{
key: 'store',
name: '存储管理',
desc: '合理存储数据，控制成本和访问权限',
activities: [
{ icon: '🗄️', name: '分层存储', desc: 'ODS → DWD → DWS → ADS 数仓分层' },
{ icon: '🔒', name: '权限控制', desc: '按角色和数据分级控制读写权限' },
{ icon: '♻️', name: '生命周期', desc: '热数据 → 温数据 → 冷数据 → 归档/删除' }
]
},
{
key: 'use',
name: '使用消费',
desc: '让数据安全、高效地被业务使用',
activities: [
{ icon: '🔍', name: '数据目录', desc: '提供可搜索的数据资产目录，降低找数成本' },
{ icon: '🎭', name: '脱敏处理', desc: '对敏感字段进行掩码、加密、泛化处理' },
{ icon: '📊', name: '质量监控', desc: '持续监控数据质量指标，异常时告警' }
]
},
{
key: 'retire',
name: '归档销毁',
desc: '按合规要求归档或安全销毁数据',
activities: [
{ icon: '📦', name: '归档策略', desc: '超过保留期的数据迁移到低成本存储' },
{ icon: '🗑️', name: '安全删除', desc: '按 GDPR/个保法要求彻底删除用户数据' },
{ icon: '📋', name: '审计日志', desc: '记录数据删除操作，满足合规审计要求' }
]
}
]
const current = computed(() => stages.find(s => s.key === activeStage.value))
</script>
<style scoped>
.governance-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.pipeline { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stage {
display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
border-radius: 8px; cursor: pointer; background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider); transition: all 0.2s; font-size: 0.85rem;
}
.stage:hover { border-color: var(--vp-c-brand); }
.stage.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
.stage-num { width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.stage-name { font-weight: 600; }
.arrow { color: var(--vp-c-text-3); margin-left: 0.25rem; }
.stage-detail { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.detail-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.detail-desc { color: var(--vp-c-text-2); font-size: 0.85rem; margin-bottom: 0.75rem; }
.activities { display: flex; flex-direction: column; gap: 0.5rem; }
.activity { display: flex; gap: 0.5rem; padding: 0.5rem; border-radius: 6px; background: var(--vp-c-bg-soft); }
.act-icon { font-size: 1.2rem; }
.act-name { font-weight: 600; font-size: 0.85rem; }
.act-desc { font-size: 0.78rem; color: var(--vp-c-text-2); }
@media (max-width: 640px) { .pipeline { flex-direction: column; align-items: stretch; } .arrow { display: none; } }
</style>
docs/.vitepress/theme/components/appendix/data-governance/DataLineageDemo.vue
+138
View File
@@ -0,0 +1,138 @@
<!--
DataLineageDemo.vue
数据血缘追踪演示：展示数据从源头到消费的流转路径
-->
<template>
<div class="lineage-demo">
<div class="header">
<div class="title">数据血缘追踪</div>
<div class="subtitle">点击任意节点，查看上下游依赖关系</div>
</div>
<div class="lineage-graph">
<div v-for="(layer, li) in layers" :key="li" class="layer">
<div class="layer-label">{{ layer.label }}</div>
<div class="layer-nodes">
<div
v-for="node in layer.nodes"
:key="node.id"
:class="['node', { active: activeNode === node.id, upstream: upstreamIds.includes(node.id), downstream: downstreamIds.includes(node.id) }]"
@click="selectNode(node.id)"
>
<div class="node-icon">{{ node.icon }}</div>
<div class="node-name">{{ node.name }}</div>
</div>
</div>
</div>
</div>
<div v-if="activeNode && activeInfo" class="info-panel">
<div class="info-title">{{ activeInfo.name }}</div>
<div class="info-row"><span class="info-label">上游依赖：</span>{{ activeInfo.upstreamNames || '无（数据源头）' }}</div>
<div class="info-row"><span class="info-label">下游消费：</span>{{ activeInfo.downstreamNames || '无（最终消费）' }}</div>
<div class="info-row"><span class="info-label">负责人：</span>{{ activeInfo.owner }}</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeNode = ref(null)
const nodes = {
mysql_user: { name: 'MySQL 用户表', icon: '🗄️', upstream: [], downstream: ['ods_user'], owner: '业务开发组' },
mysql_order: { name: 'MySQL 订单表', icon: '🗄️', upstream: [], downstream: ['ods_order'], owner: '业务开发组' },
log_click: { name: '点击日志', icon: '📝', upstream: [], downstream: ['ods_click'], owner: '前端团队' },
ods_user: { name: 'ODS 用户', icon: '📥', upstream: ['mysql_user'], downstream: ['dwd_user'], owner: '数据工程师' },
ods_order: { name: 'ODS 订单', icon: '📥', upstream: ['mysql_order'], downstream: ['dwd_order'], owner: '数据工程师' },
ods_click: { name: 'ODS 点击', icon: '📥', upstream: ['log_click'], downstream: ['dwd_click'], owner: '数据工程师' },
dwd_user: { name: 'DWD 用户明细', icon: '🔧', upstream: ['ods_user'], downstream: ['dws_user_profile'], owner: '数据开发' },
dwd_order: { name: 'DWD 订单明细', icon: '🔧', upstream: ['ods_order'], downstream: ['dws_gmv'], owner: '数据开发' },
dwd_click: { name: 'DWD 点击明细', icon: '🔧', upstream: ['ods_click'], downstream: ['dws_user_profile'], owner: '数据开发' },
dws_user_profile: { name: 'DWS 用户画像', icon: '📊', upstream: ['dwd_user', 'dwd_click'], downstream: ['ads_report'], owner: '数据分析师' },
dws_gmv: { name: 'DWS GMV 汇总', icon: '📊', upstream: ['dwd_order'], downstream: ['ads_report'], owner: '数据分析师' },
ads_report: { name: 'ADS 经营报表', icon: '📈', upstream: ['dws_user_profile', 'dws_gmv'], downstream: [], owner: '数据产品' }
}
const layers = [
{ label: '数据源', nodes: [{ id: 'mysql_user', ...nodes.mysql_user }, { id: 'mysql_order', ...nodes.mysql_order }, { id: 'log_click', ...nodes.log_click }] },
{ label: 'ODS 层', nodes: [{ id: 'ods_user', ...nodes.ods_user }, { id: 'ods_order', ...nodes.ods_order }, { id: 'ods_click', ...nodes.ods_click }] },
{ label: 'DWD 层', nodes: [{ id: 'dwd_user', ...nodes.dwd_user }, { id: 'dwd_order', ...nodes.dwd_order }, { id: 'dwd_click', ...nodes.dwd_click }] },
{ label: 'DWS 层', nodes: [{ id: 'dws_user_profile', ...nodes.dws_user_profile }, { id: 'dws_gmv', ...nodes.dws_gmv }] },
{ label: 'ADS 层', nodes: [{ id: 'ads_report', ...nodes.ads_report }] }
]
function getAllUpstream(id, visited = new Set()) {
if (visited.has(id)) return []
visited.add(id)
const node = nodes[id]
if (!node) return []
let result = [...node.upstream]
node.upstream.forEach(uid => { result = result.concat(getAllUpstream(uid, visited)) })
return result
}
function getAllDownstream(id, visited = new Set()) {
if (visited.has(id)) return []
visited.add(id)
const node = nodes[id]
if (!node) return []
let result = [...node.downstream]
node.downstream.forEach(did => { result = result.concat(getAllDownstream(did, visited)) })
return result
}
const upstreamIds = computed(() => activeNode.value ? getAllUpstream(activeNode.value) : [])
const downstreamIds = computed(() => activeNode.value ? getAllDownstream(activeNode.value) : [])
const activeInfo = computed(() => {
if (!activeNode.value || !nodes[activeNode.value]) return null
const n = nodes[activeNode.value]
return {
...n,
upstreamNames: n.upstream.map(id => nodes[id]?.name).join('、'),
downstreamNames: n.downstream.map(id => nodes[id]?.name).join('、')
}
})
function selectNode(id) {
activeNode.value = activeNode.value === id ? null : id
}
</script>
<style scoped>
.lineage-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.lineage-graph { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.layer { display: flex; align-items: center; gap: 0.75rem; }
.layer-label {
min-width: 60px; font-size: 0.75rem; font-weight: 700;
color: var(--vp-c-text-3); text-align: right;
}
.layer-nodes { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; }
.node {
display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem;
border-radius: 6px; cursor: pointer; font-size: 0.78rem;
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); transition: all 0.2s;
}
.node:hover { border-color: var(--vp-c-brand); }
.node.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.1); font-weight: 700; }
.node.upstream { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.node.downstream { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.node-icon { font-size: 1rem; }
.node-name { white-space: nowrap; }
.info-panel {
background: var(--vp-c-bg); border-radius: 8px; padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
.info-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.info-row { font-size: 0.82rem; margin-bottom: 0.25rem; }
.info-label { font-weight: 600; color: var(--vp-c-text-2); }
@media (max-width: 640px) { .layer { flex-direction: column; align-items: flex-start; } .layer-label { text-align: left; } }
</style>
docs/.vitepress/theme/components/appendix/data-governance/DataQualityDemo.vue
+266
View File
@@ -0,0 +1,266 @@
<!--
DataQualityDemo.vue
数据质量维度演示：展示数据质量的六个核心维度
-->
<template>
<div class="data-quality-demo">
<div class="header">
<div class="title">数据质量检测器</div>
<div class="subtitle">点击不同维度，查看数据质量问题示例</div>
</div>
<div class="dimensions">
<div
v-for="dim in dimensions"
:key="dim.key"
:class="['dim-card', { active: activeDim === dim.key }]"
@click="activeDim = dim.key"
>
<div class="dim-icon">{{ dim.icon }}</div>
<div class="dim-name">{{ dim.name }}</div>
</div>
</div>
<div v-if="currentDim" class="detail-panel">
<div class="detail-header">
<span class="detail-icon">{{ currentDim.icon }}</span>
<span class="detail-title">{{ currentDim.name }}</span>
<span class="detail-desc">{{ currentDim.desc }}</span>
</div>
<div class="example-section">
<div class="example bad">
<div class="example-label bad-label">问题数据</div>
<table class="data-table">
<thead>
<tr>
<th v-for="col in currentDim.badData.cols" :key="col">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in currentDim.badData.rows" :key="i">
<td
v-for="(cell, j) in row"
:key="j"
:class="{ 'cell-error': cell.error }"
>{{ cell.value }}</td>
</tr>
</tbody>
</table>
</div>
<div class="example good">
<div class="example-label good-label">治理后</div>
<table class="data-table">
<thead>
<tr>
<th v-for="col in currentDim.goodData.cols" :key="col">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in currentDim.goodData.rows" :key="i">
<td v-for="(cell, j) in row" :key="j">{{ cell.value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="quality-score">
<div class="score-label">质量评分</div>
<div class="score-bar-bg">
<div
class="score-bar-fill"
:style="{ width: currentDim.score + '%', background: scoreColor(currentDim.score) }"
></div>
</div>
<div class="score-value">{{ currentDim.score }}%</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeDim = ref('completeness')
const dimensions = [
{
key: 'completeness', name: '完整性', icon: '📋',
desc: '数据是否存在缺失值',
score: 72,
badData: {
cols: ['用户ID', '姓名', '邮箱', '手机号'],
rows: [
[{ value: '001' }, { value: '张三' }, { value: 'zhang@mail.com' }, { value: '138xxxx1234' }],
[{ value: '002' }, { value: '李四' }, { value: '', error: true }, { value: '', error: true }],
[{ value: '003' }, { value: '', error: true }, { value: 'wang@mail.com' }, { value: '139xxxx5678' }]
]
},
goodData: {
cols: ['用户ID', '姓名', '邮箱', '手机号'],
rows: [
[{ value: '001' }, { value: '张三' }, { value: 'zhang@mail.com' }, { value: '138xxxx1234' }],
[{ value: '002' }, { value: '李四' }, { value: 'li@mail.com' }, { value: '137xxxx9012' }],
[{ value: '003' }, { value: '王五' }, { value: 'wang@mail.com' }, { value: '139xxxx5678' }]
]
}
},
{
key: 'accuracy', name: '准确性', icon: '🎯',
desc: '数据值是否正确反映真实情况',
score: 65,
badData: {
cols: ['订单ID', '金额', '日期', '状态'],
rows: [
[{ value: 'ORD-101' }, { value: '-50.00', error: true }, { value: '2025-01-15' }, { value: '已完成' }],
[{ value: 'ORD-102' }, { value: '299.00' }, { value: '2025-13-01', error: true }, { value: '已发货' }],
[{ value: 'ORD-103' }, { value: '1500.00' }, { value: '2025-02-28' }, { value: '已退款', error: true }]
]
},
goodData: {
cols: ['订单ID', '金额', '日期', '状态'],
rows: [
[{ value: 'ORD-101' }, { value: '50.00' }, { value: '2025-01-15' }, { value: '已完成' }],
[{ value: 'ORD-102' }, { value: '299.00' }, { value: '2025-01-13' }, { value: '已发货' }],
[{ value: 'ORD-103' }, { value: '1500.00' }, { value: '2025-02-28' }, { value: '已完成' }]
]
}
},
{
key: 'consistency', name: '一致性', icon: '🔗',
desc: '同一数据在不同系统中是否一致',
score: 58,
badData: {
cols: ['来源', '用户名', '手机号', '地址'],
rows: [
[{ value: 'CRM' }, { value: '张三' }, { value: '13812341234' }, { value: '北京市朝阳区' }],
[{ value: '订单系统' }, { value: '张三丰', error: true }, { value: '13812341234' }, { value: '北京朝阳', error: true }],
[{ value: '客服系统' }, { value: '张三' }, { value: '13899999999', error: true }, { value: '北京市朝阳区' }]
]
},
goodData: {
cols: ['来源', '用户名', '手机号', '地址'],
rows: [
[{ value: 'CRM' }, { value: '张三' }, { value: '13812341234' }, { value: '北京市朝阳区' }],
[{ value: '订单系统' }, { value: '张三' }, { value: '13812341234' }, { value: '北京市朝阳区' }],
[{ value: '客服系统' }, { value: '张三' }, { value: '13812341234' }, { value: '北京市朝阳区' }]
]
}
},
{
key: 'timeliness', name: '时效性', icon: '⏰',
desc: '数据是否及时更新',
score: 80,
badData: {
cols: ['商品ID', '价格', '库存', '更新时间'],
rows: [
[{ value: 'SKU-001' }, { value: '¥299' }, { value: '50' }, { value: '2024-06-01', error: true }],
[{ value: 'SKU-002' }, { value: '¥599' }, { value: '0', error: true }, { value: '2024-03-15', error: true }],
[{ value: 'SKU-003' }, { value: '¥199' }, { value: '200' }, { value: '2025-02-20' }]
]
},
goodData: {
cols: ['商品ID', '价格', '库存', '更新时间'],
rows: [
[{ value: 'SKU-001' }, { value: '¥259' }, { value: '35' }, { value: '2025-02-25' }],
[{ value: 'SKU-002' }, { value: '¥549' }, { value: '12' }, { value: '2025-02-25' }],
[{ value: 'SKU-003' }, { value: '¥199' }, { value: '180' }, { value: '2025-02-25' }]
]
}
},
{
key: 'uniqueness', name: '唯一性', icon: '🔑',
desc: '数据是否存在重复记录',
score: 70,
badData: {
cols: ['用户ID', '姓名', '邮箱', '注册时间'],
rows: [
[{ value: '001' }, { value: '张三' }, { value: 'zhang@mail.com' }, { value: '2025-01-01' }],
[{ value: '005' }, { value: '张三', error: true }, { value: 'zhang@mail.com', error: true }, { value: '2025-01-15', error: true }],
[{ value: '002' }, { value: '李四' }, { value: 'li@mail.com' }, { value: '2025-01-10' }]
]
},
goodData: {
cols: ['用户ID', '姓名', '邮箱', '注册时间'],
rows: [
[{ value: '001' }, { value: '张三' }, { value: 'zhang@mail.com' }, { value: '2025-01-01' }],
[{ value: '002' }, { value: '李四' }, { value: 'li@mail.com' }, { value: '2025-01-10' }]
]
}
},
{
key: 'validity', name: '有效性', icon: '✅',
desc: '数据是否符合预定义的格式和规则',
score: 75,
badData: {
cols: ['字段', '值', '规则'],
rows: [
[{ value: '邮箱' }, { value: 'not-an-email', error: true }, { value: '需包含@' }],
[{ value: '年龄' }, { value: '-5', error: true }, { value: '0~150' }],
[{ value: '手机号' }, { value: '1234', error: true }, { value: '11位数字' }]
]
},
goodData: {
cols: ['字段', '值', '规则'],
rows: [
[{ value: '邮箱' }, { value: 'user@mail.com' }, { value: '需包含@' }],
[{ value: '年龄' }, { value: '28' }, { value: '0~150' }],
[{ value: '手机号' }, { value: '13812345678' }, { value: '11位数字' }]
]
}
}
]
const currentDim = computed(() => dimensions.find(d => d.key === activeDim.value))
function scoreColor(score) {
if (score >= 80) return '#22c55e'
if (score >= 60) return '#f59e0b'
return '#ef4444'
}
</script>
<style scoped>
.data-quality-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.dimensions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dim-card {
display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
border-radius: 8px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
}
.dim-card:hover { border-color: var(--vp-c-brand); }
.dim-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
.dim-icon { font-size: 1.1rem; }
.dim-name { font-weight: 600; }
.detail-panel {
padding: 1rem; border-radius: 8px; background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider); margin-bottom: 1rem;
}
.detail-header { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.detail-icon { font-size: 1.2rem; }
.detail-title { font-weight: 700; font-size: 1rem; }
.detail-desc { color: var(--vp-c-text-2); font-size: 0.85rem; }
.example-section { display: flex; gap: 1rem; margin-bottom: 1rem; }
.example { flex: 1; }
.example-label { font-weight: 600; font-size: 0.8rem; margin-bottom: 0.4rem; padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block; }
.bad-label { background: rgba(239,68,68,0.1); color: #ef4444; }
.good-label { background: rgba(34,197,94,0.1); color: #22c55e; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.data-table th { background: var(--vp-c-bg-soft); padding: 0.3rem 0.4rem; text-align: left; font-weight: 600; border-bottom: 1px solid var(--vp-c-divider); }
.data-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--vp-c-divider); }
.cell-error { background: rgba(239,68,68,0.1); color: #ef4444; font-weight: 600; }
.quality-score { display: flex; align-items: center; gap: 0.75rem; }
.score-label { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.score-bar-bg { flex: 1; height: 10px; background: var(--vp-c-bg-soft); border-radius: 5px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s; }
.score-value { font-weight: 700; font-size: 0.9rem; font-family: var(--vp-font-family-mono); min-width: 40px; }
@media (max-width: 640px) { .example-section { flex-direction: column; } }
</style>
docs/.vitepress/theme/components/appendix/data-visualization/ChartTypeSelectorDemo.vue
+131
View File
@@ -0,0 +1,131 @@
<!--
ChartTypeSelectorDemo.vue
图表类型选择器：根据数据特征推荐合适的图表类型
-->
<template>
<div class="chart-selector-demo">
<div class="header">
<div class="title">图表类型选择器</div>
<div class="subtitle">选择你的数据目的，查看推荐的图表类型</div>
</div>
<div class="purposes">
<div
v-for="p in purposes"
:key="p.key"
:class="['purpose-card', { active: activePurpose === p.key }]"
@click="activePurpose = p.key"
>
<div class="purpose-icon">{{ p.icon }}</div>
<div class="purpose-name">{{ p.name }}</div>
</div>
</div>
<div v-if="currentPurpose" class="charts-panel">
<div class="panel-title">{{ currentPurpose.name }}：推荐图表</div>
<div class="chart-list">
<div
v-for="chart in currentPurpose.charts"
:key="chart.name"
class="chart-item"
>
<div class="chart-visual">{{ chart.visual }}</div>
<div class="chart-info">
<div class="chart-name">{{ chart.name }}</div>
<div class="chart-desc">{{ chart.desc }}</div>
<div class="chart-example">示例：{{ chart.example }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activePurpose = ref('comparison')
const purposes = [
{
key: 'comparison',
name: '比较',
icon: '📊',
charts: [
{ name: '柱状图', visual: '▐▐▐', desc: '比较不同类别的数值大小', example: '各部门销售额对比' },
{ name: '分组柱状图', visual: '▐▐ ▐▐', desc: '多维度分组比较', example: '各季度各产品线收入' },
{ name: '雷达图', visual: '◇', desc: '多维度综合对比', example: '候选人能力评估' }
]
},
{
key: 'trend',
name: '趋势',
icon: '📈',
charts: [
{ name: '折线图', visual: '╱╲╱', desc: '展示数据随时间的变化趋势', example: '月度用户增长曲线' },
{ name: '面积图', visual: '▓▓▓', desc: '强调趋势下的累积量', example: '各渠道流量占比变化' },
{ name: '阶梯图', visual: '┐└┐', desc: '展示离散时间点的变化', example: '价格调整历史' }
]
},
{
key: 'proportion',
name: '占比',
icon: '🍩',
charts: [
{ name: '饼图', visual: '◔', desc: '展示各部分占整体的比例', example: '市场份额分布' },
{ name: '环形图', visual: '◎', desc: '饼图的变体，中间可放数字', example: '预算使用率' },
{ name: '堆叠柱状图', visual: '▐▐▐', desc: '展示各部分的组成和总量', example: '各地区各品类销售构成' }
]
},
{
key: 'distribution',
name: '分布',
icon: '🔔',
charts: [
{ name: '直方图', visual: '▁▃▇▃▁', desc: '展示数据的频率分布', example: '用户年龄分布' },
{ name: '散点图', visual: '· ·· ·', desc: '展示两个变量的关系', example: '广告投入 vs 销售额' },
{ name: '箱线图', visual: '├─┤', desc: '展示数据的中位数、四分位数和异常值', example: '各城市房价分布' }
]
},
{
key: 'relation',
name: '关系',
icon: '🕸️',
charts: [
{ name: '桑基图', visual: '≋≋≋', desc: '展示流量或能量的流向', example: '用户转化漏斗' },
{ name: '网络图', visual: '⊙─⊙', desc: '展示节点之间的关联关系', example: '社交关系网络' },
{ name: '热力图', visual: '▓▒░', desc: '用颜色深浅表示数值大小', example: '各时段各页面访问量' }
]
}
]
const currentPurpose = computed(() => purposes.find(p => p.key === activePurpose.value))
</script>
<style scoped>
.chart-selector-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.purposes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.purpose-card {
display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
padding: 0.6rem; border-radius: 8px; cursor: pointer;
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); transition: all 0.2s;
}
.purpose-card:hover { border-color: var(--vp-c-brand); }
.purpose-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
.purpose-icon { font-size: 1.3rem; }
.purpose-name { font-size: 0.8rem; font-weight: 600; }
.panel-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.75rem; }
.charts-panel { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.chart-list { display: flex; flex-direction: column; gap: 0.5rem; }
.chart-item { display: flex; gap: 0.75rem; padding: 0.5rem; border-radius: 6px; background: var(--vp-c-bg-soft); }
.chart-visual { font-size: 1.2rem; min-width: 50px; display: flex; align-items: center; justify-content: center; font-family: var(--vp-font-family-mono); color: var(--vp-c-brand); }
.chart-name { font-weight: 600; font-size: 0.85rem; }
.chart-desc { font-size: 0.78rem; color: var(--vp-c-text-2); }
.chart-example { font-size: 0.75rem; color: var(--vp-c-text-3); font-style: italic; }
</style>
docs/.vitepress/theme/components/appendix/data-visualization/DashboardLayoutDemo.vue
+134
View File
@@ -0,0 +1,134 @@
<!--
DashboardLayoutDemo.vue
仪表盘布局演示：展示仪表盘的常见布局模式
-->
<template>
<div class="dashboard-demo">
<div class="header">
<div class="title">仪表盘布局模式</div>
<div class="subtitle">点击查看不同类型的仪表盘布局</div>
</div>
<div class="layout-tabs">
<div
v-for="layout in layouts"
:key="layout.key"
:class="['tab', { active: activeLayout === layout.key }]"
@click="activeLayout = layout.key"
>
{{ layout.name }}
</div>
</div>
<div v-if="current" class="layout-preview">
<div class="preview-title">{{ current.name }}</div>
<div class="preview-desc">{{ current.desc }}</div>
<div :class="['mock-dashboard', current.key]">
<div
v-for="(widget, i) in current.widgets"
:key="i"
:class="['widget', widget.type]"
>
<div class="widget-label">{{ widget.label }}</div>
</div>
</div>
<div class="use-case">适用场景：{{ current.useCase }}</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeLayout = ref('overview')
const layouts = [
{
key: 'overview',
name: '全局概览型',
desc: '顶部核心指标卡片 + 中间趋势图 + 底部明细表',
useCase: '管理层日报、运营大盘',
widgets: [
{ type: 'kpi', label: 'DAU 12.5万' },
{ type: 'kpi', label: '收入 ¥85万' },
{ type: 'kpi', label: '转化率 3.2%' },
{ type: 'kpi', label: '客单价 ¥268' },
{ type: 'chart-wide', label: '趋势折线图' },
{ type: 'table', label: '明细数据表' }
]
},
{
key: 'comparison',
name: '对比分析型',
desc: '左右对比布局，适合 A/B 测试或同环比分析',
useCase: 'A/B 测试报告、竞品分析',
widgets: [
{ type: 'half', label: '实验组指标' },
{ type: 'half', label: '对照组指标' },
{ type: 'chart-wide', label: '差异对比图' },
{ type: 'table', label: '统计显著性检验' }
]
},
{
key: 'drill',
name: '下钻分析型',
desc: '从汇总到明细逐层下钻，支持交互式探索',
useCase: '销售分析、用户行为分析',
widgets: [
{ type: 'chart-wide', label: '全国销售地图（点击省份下钻）' },
{ type: 'half', label: '省份排名柱状图' },
{ type: 'half', label: '城市明细饼图' },
{ type: 'table', label: '门店级明细表' }
]
},
{
key: 'realtime',
name: '实时监控型',
desc: '大屏展示，数据自动刷新，适合投屏',
useCase: '双十一大屏、服务器监控',
widgets: [
{ type: 'big-number', label: '实时 GMV ¥1.2亿' },
{ type: 'half', label: '订单量实时曲线' },
{ type: 'half', label: '地域热力图' },
{ type: 'kpi', label: '支付成功率' },
{ type: 'kpi', label: '平均响应时间' },
{ type: 'kpi', label: '在线用户数' }
]
}
]
const current = computed(() => layouts.find(l => l.key === activeLayout.value))
</script>
<style scoped>
.dashboard-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.layout-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer;
font-size: 0.85rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.tab:hover { border-color: var(--vp-c-brand); }
.tab.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); font-weight: 600; }
.layout-preview { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.preview-title { font-weight: 700; font-size: 0.95rem; }
.preview-desc { color: var(--vp-c-text-2); font-size: 0.82rem; margin-bottom: 0.75rem; }
.mock-dashboard { display: grid; gap: 0.4rem; margin-bottom: 0.75rem; grid-template-columns: repeat(4, 1fr); }
.widget {
padding: 0.5rem; border-radius: 6px; text-align: center;
font-size: 0.75rem; font-weight: 600; border: 1px dashed var(--vp-c-divider);
}
.widget.kpi { background: rgba(var(--vp-c-brand-rgb), 0.06); grid-column: span 1; }
.widget.chart-wide { background: rgba(34,197,94,0.06); grid-column: span 4; min-height: 50px; }
.widget.table { background: rgba(245,158,11,0.06); grid-column: span 4; }
.widget.half { background: rgba(99,102,241,0.06); grid-column: span 2; min-height: 40px; }
.widget.big-number { background: rgba(239,68,68,0.06); grid-column: span 4; min-height: 40px; font-size: 0.9rem; }
.widget-label { color: var(--vp-c-text-2); }
.use-case { font-size: 0.82rem; color: var(--vp-c-text-3); }
</style>
docs/.vitepress/theme/components/appendix/distributed-systems/CAPTheoremDemo.vue
+120
View File
@@ -0,0 +1,120 @@
<!--
CAPTheoremDemo.vue
CAP 定理交互演示：展示一致性、可用性、分区容错性的权衡
-->
<template>
<div class="cap-demo">
<div class="header">
<div class="title">CAP 定理交互演示</div>
<div class="subtitle">点击选择两个属性，查看对应的系统类型</div>
</div>
<div class="triangle">
<div
v-for="item in capItems"
:key="item.key"
:class="['cap-node', { active: selected.includes(item.key) }]"
@click="toggle(item.key)"
>
<div class="cap-letter">{{ item.letter }}</div>
<div class="cap-name">{{ item.name }}</div>
<div class="cap-desc">{{ item.desc }}</div>
</div>
</div>
<div v-if="result" class="result-panel">
<div class="result-title">{{ result.type }}</div>
<div class="result-desc">{{ result.desc }}</div>
<div class="result-examples">
<span class="label">典型系统：</span>{{ result.examples }}
</div>
<div class="result-tradeoff">
<span class="label">放弃了：</span>{{ result.sacrifice }}
</div>
</div>
<div v-else class="hint">请选择两个属性查看结果</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const selected = ref(['C', 'A'])
const capItems = [
{ key: 'C', letter: 'C', name: '一致性', desc: '所有节点看到相同的数据' },
{ key: 'A', letter: 'A', name: '可用性', desc: '每个请求都能得到响应' },
{ key: 'P', letter: 'P', name: '分区容错', desc: '网络分区时系统仍能运行' }
]
const combinations = {
'CA': {
type: 'CA 系统（放弃分区容错）',
desc: '在没有网络分区的情况下，同时保证一致性和可用性。但在分布式环境中，网络分区是不可避免的，所以纯 CA 系统在实际分布式场景中很少见。',
examples: '单机 MySQL、PostgreSQL（单节点）',
sacrifice: '分区容错性（P）— 网络故障时系统不可用'
},
'CP': {
type: 'CP 系统（放弃可用性）',
desc: '网络分区时优先保证数据一致性，可能拒绝部分请求。适合对数据正确性要求极高的场景。',
examples: 'ZooKeeper、etcd、HBase、MongoDB（强一致模式）',
sacrifice: '可用性（A）— 分区时部分请求会被拒绝或超时'
},
'AP': {
type: 'AP 系统（放弃强一致性）',
desc: '网络分区时优先保证可用性，允许数据暂时不一致（最终一致性）。适合对可用性要求高、能容忍短暂不一致的场景。',
examples: 'Cassandra、DynamoDB、DNS、CDN',
sacrifice: '强一致性（C）— 不同节点可能短暂返回不同数据'
}
}
function toggle(key) {
const idx = selected.value.indexOf(key)
if (idx >= 0) {
selected.value = selected.value.filter(k => k !== key)
} else {
if (selected.value.length >= 2) {
selected.value = [selected.value[1], key]
} else {
selected.value = [...selected.value, key]
}
}
}
const result = computed(() => {
if (selected.value.length !== 2) return null
const combo = [...selected.value].sort().join('')
return combinations[combo] || null
})
</script>
<style scoped>
.cap-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.triangle { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; justify-content: center; }
.cap-node {
flex: 1; min-width: 120px; max-width: 200px; padding: 0.75rem; border-radius: 8px;
cursor: pointer; text-align: center; background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider); transition: all 0.2s;
}
.cap-node:hover { border-color: var(--vp-c-brand); }
.cap-node.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.08); }
.cap-letter { font-size: 1.5rem; font-weight: 800; color: var(--vp-c-brand); }
.cap-name { font-weight: 700; font-size: 0.9rem; margin: 0.2rem 0; }
.cap-desc { font-size: 0.75rem; color: var(--vp-c-text-2); }
.result-panel {
background: var(--vp-c-bg); border-radius: 8px; padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.result-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.result-desc { font-size: 0.82rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
.result-examples, .result-tradeoff { font-size: 0.82rem; margin-bottom: 0.25rem; }
.label { font-weight: 600; color: var(--vp-c-text-2); }
.hint { text-align: center; color: var(--vp-c-text-3); font-size: 0.85rem; padding: 1rem; }
</style>
docs/.vitepress/theme/components/appendix/distributed-systems/ConsistencyModelsDemo.vue
+132
View File
@@ -0,0 +1,132 @@
<!--
ConsistencyModelsDemo.vue
一致性模型演示：展示强一致性、最终一致性、因果一致性的区别
-->
<template>
<div class="consistency-demo">
<div class="header">
<div class="title">一致性模型对比</div>
<div class="subtitle">点击查看不同一致性模型的行为差异</div>
</div>
<div class="model-tabs">
<div
v-for="m in models"
:key="m.key"
:class="['tab', { active: activeModel === m.key }]"
@click="activeModel = m.key"
>
{{ m.name }}
</div>
</div>
<div v-if="current" class="model-detail">
<div class="model-name">{{ current.name }}</div>
<div class="model-desc">{{ current.desc }}</div>
<div class="timeline">
<div v-for="(step, i) in current.steps" :key="i" class="step">
<div class="step-time">T{{ i + 1 }}</div>
<div class="step-nodes">
<div
v-for="(node, ni) in step.nodes"
:key="ni"
:class="['node', node.status]"
>
<div class="node-label">{{ node.name }}</div>
<div class="node-value">{{ node.value }}</div>
</div>
</div>
<div class="step-desc">{{ step.desc }}</div>
</div>
</div>
<div class="model-tradeoff">
<span class="label">权衡：</span>{{ current.tradeoff }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeModel = ref('strong')
const models = [
{
key: 'strong',
name: '强一致性',
desc: '写入成功后，所有节点立即返回最新值。像单机数据库一样的体验。',
tradeoff: '延迟高（需要等所有节点确认），可用性低（节点故障时可能阻塞）',
steps: [
{ nodes: [{ name: '节点A', value: 'v1', status: 'ok' }, { name: '节点B', value: 'v1', status: 'ok' }, { name: '节点C', value: 'v1', status: 'ok' }], desc: '初始状态，所有节点数据一致' },
{ nodes: [{ name: '节点A', value: 'v2 ✍️', status: 'writing' }, { name: '节点B', value: '同步中...', status: 'syncing' }, { name: '节点C', value: '同步中...', status: 'syncing' }], desc: '客户端写入 v2，等待所有节点确认' },
{ nodes: [{ name: '节点A', value: 'v2', status: 'ok' }, { name: '节点B', value: 'v2', status: 'ok' }, { name: '节点C', value: 'v2', status: 'ok' }], desc: '所有节点确认后才返回成功，读任意节点都是 v2' }
]
},
{
key: 'eventual',
name: '最终一致性',
desc: '写入后不等所有节点同步，数据最终会一致，但中间可能读到旧值。',
tradeoff: '延迟低、可用性高，但可能短暂读到旧数据',
steps: [
{ nodes: [{ name: '节点A', value: 'v1', status: 'ok' }, { name: '节点B', value: 'v1', status: 'ok' }, { name: '节点C', value: 'v1', status: 'ok' }], desc: '初始状态' },
{ nodes: [{ name: '节点A', value: 'v2 ✍️', status: 'writing' }, { name: '节点B', value: 'v1', status: 'stale' }, { name: '节点C', value: 'v1', status: 'stale' }], desc: '写入 A 后立即返回成功，B/C 还是旧值' },
{ nodes: [{ name: '节点A', value: 'v2', status: 'ok' }, { name: '节点B', value: 'v2', status: 'ok' }, { name: '节点C', value: 'v1→v2', status: 'syncing' }], desc: '后台异步同步，逐渐达到一致' }
]
},
{
key: 'causal',
name: '因果一致性',
desc: '有因果关系的操作保证顺序，无因果关系的操作可以乱序。介于强一致和最终一致之间。',
tradeoff: '比强一致性延迟低，比最终一致性更可预测',
steps: [
{ nodes: [{ name: '用户A', value: '发帖: "你好"', status: 'ok' }, { name: '用户B', value: '看到帖子', status: 'ok' }, { name: '用户C', value: '看到帖子', status: 'ok' }], desc: '用户 A 发帖' },
{ nodes: [{ name: '用户A', value: '发帖: "你好"', status: 'ok' }, { name: '用户B', value: '回复: "嗨!"', status: 'writing' }, { name: '用户C', value: '看到帖子', status: 'ok' }], desc: '用户 B 回复（因果依赖于 A 的帖子）' },
{ nodes: [{ name: '用户A', value: '看到回复', status: 'ok' }, { name: '用户B', value: '回复: "嗨!"', status: 'ok' }, { name: '用户C', value: '先看到帖子再看到回复', status: 'ok' }], desc: '所有人都先看到帖子再看到回复（因果顺序保证）' }
]
}
]
const current = computed(() => models.find(m => m.key === activeModel.value))
</script>
<style scoped>
.consistency-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.model-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer;
font-size: 0.85rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.tab:hover { border-color: var(--vp-c-brand); }
.tab.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); font-weight: 600; }
.model-detail { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.model-name { font-weight: 700; font-size: 0.95rem; }
.model-desc { color: var(--vp-c-text-2); font-size: 0.82rem; margin-bottom: 0.75rem; }
.timeline { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.step { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.step-time { font-weight: 700; font-size: 0.8rem; color: var(--vp-c-brand); min-width: 28px; }
.step-nodes { display: flex; gap: 0.4rem; flex: 1; }
.node {
padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.72rem;
border: 1px solid var(--vp-c-divider); flex: 1; text-align: center;
}
.node.ok { background: rgba(34,197,94,0.08); border-color: #22c55e; }
.node.writing { background: rgba(var(--vp-c-brand-rgb),0.08); border-color: var(--vp-c-brand); }
.node.syncing { background: rgba(245,158,11,0.08); border-color: #f59e0b; }
.node.stale { background: rgba(239,68,68,0.08); border-color: #ef4444; }
.node-label { font-weight: 600; }
.node-value { color: var(--vp-c-text-2); }
.step-desc { font-size: 0.75rem; color: var(--vp-c-text-3); width: 100%; margin-top: 0.15rem; }
.model-tradeoff { font-size: 0.82rem; }
.label { font-weight: 600; color: var(--vp-c-text-2); }
@media (max-width: 640px) { .step { flex-direction: column; } .step-nodes { width: 100%; } }
</style>
docs/.vitepress/theme/components/appendix/distributed-systems/DistributedChallengesDemo.vue
+215
View File
@@ -0,0 +1,215 @@
<!--
DistributedChallengesDemo.vue
分布式系统常见挑战交互演示
-->
<template>
<div class="challenges-demo">
<div class="header">
<div class="title">分布式系统八大挑战</div>
<div class="subtitle">点击查看每个挑战的详情和应对策略</div>
</div>
<div class="challenge-grid">
<div
v-for="c in challenges"
:key="c.key"
:class="['challenge-card', { active: activeChallenge === c.key }]"
@click="activeChallenge = activeChallenge === c.key ? null : c.key"
>
<div class="challenge-icon">{{ c.icon }}</div>
<div class="challenge-name">{{ c.name }}</div>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.icon }} {{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="detail-scenario">
<span class="label">场景举例：</span>{{ current.scenario }}
</div>
<div class="detail-solution">
<span class="label">应对策略：</span>
<ul class="solution-list">
<li v-for="(s, i) in current.solutions" :key="i">{{ s }}</li>
</ul>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeChallenge = ref('network')
const challenges = [
{
key: 'network',
name: '网络不可靠',
icon: '🔌',
desc: '分布式系统的节点通过网络通信，而网络随时可能丢包、延迟、断开。这是分布式系统最根本的挑战——你永远不能假设网络是可靠的。',
scenario: '服务 A 调用服务 B，请求发出后 3 秒没收到响应。是 B 没收到？还是 B 处理了但响应丢了？A 无法区分。',
solutions: [
'超时 + 重试：设置合理超时，失败后重试（需保证幂等性）',
'心跳检测：定期发送心跳包检测连接是否存活',
'断路器模式：连续失败后暂停调用，避免雪崩'
]
},
{
key: 'clock',
name: '时钟不同步',
icon: '⏰',
desc: '每台机器的物理时钟都有微小偏差（时钟漂移），即使用 NTP 同步也只能精确到毫秒级。在分布式系统中，你不能依赖物理时钟来判断事件的先后顺序。',
scenario: '节点 A 在 10:00:00.001 写入数据，节点 B 在 10:00:00.002 写入数据。但 B 的时钟快了 5ms，实际上 B 先写的。',
solutions: [
'逻辑时钟（Lamport Clock）：用递增计数器代替物理时钟',
'向量时钟（Vector Clock）：每个节点维护一个向量，追踪因果关系',
'TrueTime（Google Spanner）：用 GPS + 原子钟提供有界误差的时间'
]
},
{
key: 'partition',
name: '网络分区',
icon: '✂️',
desc: '网络分区是指部分节点之间无法通信，但各自仍在运行。这时系统必须在一致性和可用性之间做选择（CAP 定理）。',
scenario: '数据中心 A 和 B 之间的光纤被挖断，两边的服务各自运行，但数据开始分叉。',
solutions: [
'CP 策略：分区时拒绝写入，保证一致性（如 ZooKeeper）',
'AP 策略：分区时允许写入，事后合并冲突（如 DynamoDB）',
'多数派写入：只要多数节点确认就算成功'
]
},
{
key: 'consistency',
name: '数据一致性',
icon: '🔄',
desc: '多个副本之间如何保持数据一致？强一致性性能差，最终一致性可能读到旧数据。没有银弹，只有权衡。',
scenario: '用户在节点 A 修改了头像，但刷新页面时请求被路由到节点 B，看到的还是旧头像。',
solutions: [
'读写同一节点：写入后的读请求路由到同一节点',
'读修复（Read Repair）：读取时检测不一致并修复',
'反熵协议：后台定期比对副本，修复差异'
]
},
{
key: 'failure',
name: '部分失败',
icon: '💥',
desc: '分布式系统中，部分节点可能失败而其他节点正常运行。系统需要在部分失败的情况下继续提供服务。',
scenario: '5 个节点的集群中有 2 个节点宕机，系统需要判断：是继续服务还是停止？剩余节点的数据是否完整？',
solutions: [
'冗余副本：数据存多份，单点故障不影响可用性',
'故障检测：通过心跳和超时机制快速发现故障节点',
'自动故障转移：检测到主节点故障后自动切换到备节点'
]
},
{
key: 'split-brain',
name: '脑裂问题',
icon: '🧠',
desc: '当网络分区导致集群分成两部分时，两边都认为自己是"主"，各自接受写入，导致数据冲突。这就是脑裂。',
scenario: '主从架构中，主节点和从节点之间网络断开，从节点以为主节点挂了，自己升级为主。现在有两个主节点同时写入。',
solutions: [
'多数派选举：只有获得多数票的节点才能成为主节点',
'Fencing Token：旧主节点的写入请求会被存储层拒绝',
'仲裁节点：引入第三方节点来裁决谁是真正的主'
]
},
{
key: 'ordering',
name: '事件排序',
icon: '📋',
desc: '在分布式系统中，不同节点上发生的事件没有全局统一的顺序。如何确定"谁先谁后"是一个根本性难题。',
scenario: '两个用户同时编辑同一个文档，节点 A 收到"删除第 3 行"，节点 B 收到"修改第 3 行"。最终结果取决于执行顺序。',
solutions: [
'全序广播（Total Order Broadcast）：所有节点以相同顺序处理消息',
'CRDT（无冲突复制数据类型）：数据结构本身保证合并无冲突',
'OT（操作转换）：Google Docs 使用的协作编辑算法'
]
},
{
key: 'transaction',
name: '分布式事务',
icon: '🔐',
desc: '跨多个节点的操作如何保证原子性？要么全部成功，要么全部回滚。这比单机事务复杂得多。',
scenario: '电商下单：扣库存在服务 A，扣余额在服务 B，创建订单在服务 C。如果扣余额失败，库存需要回滚。',
solutions: [
'2PC（两阶段提交）：协调者先问所有参与者能否提交，再统一提交',
'Saga 模式：每个步骤有对应的补偿操作，失败时逐步回滚',
'TCC（Try-Confirm-Cancel）：预留资源 → 确认 → 取消'
]
}
]
const current = computed(() =>
challenges.find(c => c.key === activeChallenge.value)
)
</script>
<style scoped>
.challenges-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.challenge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.5rem;
margin-bottom: 1rem;
}
.challenge-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.6rem 0.4rem;
border-radius: 8px;
cursor: pointer;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.challenge-card:hover { border-color: var(--vp-c-brand); }
.challenge-card.active {
border-color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb), 0.05);
}
.challenge-icon { font-size: 1.3rem; }
.challenge-name { font-size: 0.75rem; font-weight: 600; text-align: center; }
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.detail-desc {
font-size: 0.82rem;
color: var(--vp-c-text-2);
margin-bottom: 0.5rem;
}
.detail-scenario {
font-size: 0.82rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
background: rgba(245, 158, 11, 0.06);
border-radius: 6px;
}
.detail-solution { font-size: 0.82rem; }
.solution-list {
margin: 0.3rem 0 0 1.2rem;
padding: 0;
}
.solution-list li {
margin-bottom: 0.2rem;
font-size: 0.8rem;
color: var(--vp-c-text-2);
}
.label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/components/appendix/docker-containers/DockerArchitectureDemo.vue
+184
View File
@@ -0,0 +1,184 @@
<!--
DockerArchitectureDemo.vue
Docker 架构对比演示：虚拟机 vs 容器
-->
<template>
<div class="docker-arch-demo">
<div class="header">
<div class="title">虚拟机 vs 容器</div>
<div class="subtitle">点击切换查看两种虚拟化方式的架构差异</div>
</div>
<div class="tabs">
<button
v-for="tab in tabs"
:key="tab.key"
:class="['tab-btn', { active: activeTab === tab.key }]"
@click="activeTab = tab.key"
>
{{ tab.label }}
</button>
</div>
<div class="arch-view">
<div class="layers">
<div
v-for="(layer, i) in currentLayers"
:key="i"
:class="['layer', layer.type]"
>
<div class="layer-label">{{ layer.label }}</div>
<div v-if="layer.items" class="layer-items">
<div v-for="(item, j) in layer.items" :key="j" class="layer-item">
{{ item }}
</div>
</div>
</div>
</div>
<div class="comparison">
<div v-for="(item, i) in currentInfo" :key="i" class="info-row">
<span class="info-label">{{ item.label }}</span>
<span :class="['info-value', item.highlight ? 'highlight' : '']">{{ item.value }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeTab = ref('container')
const tabs = [
{ key: 'vm', label: '虚拟机' },
{ key: 'container', label: '容器' }
]
const vmLayers = [
{ label: '应用 A / 应用 B / 应用 C', type: 'app', items: ['App A + Bins/Libs', 'App B + Bins/Libs', 'App C + Bins/Libs'] },
{ label: '客户操作系统（Guest OS）', type: 'os', items: ['Ubuntu', 'CentOS', 'Debian'] },
{ label: 'Hypervisor（VMware / KVM）', type: 'hypervisor' },
{ label: '宿主操作系统（Host OS）', type: 'host' },
{ label: '物理硬件', type: 'hardware' }
]
const containerLayers = [
{ label: '应用 A / 应用 B / 应用 C', type: 'app', items: ['App A + Bins/Libs', 'App B + Bins/Libs', 'App C + Bins/Libs'] },
{ label: 'Docker Engine', type: 'docker' },
{ label: '宿主操作系统（Host OS）', type: 'host' },
{ label: '物理硬件', type: 'hardware' }
]
const vmInfo = [
{ label: '启动速度', value: '分钟级', highlight: false },
{ label: '资源占用', value: '每个 VM 需要完整 OS（GB 级）', highlight: false },
{ label: '隔离性', value: '强（硬件级隔离）', highlight: true },
{ label: '密度', value: '单机通常 10-20 个 VM', highlight: false },
{ label: '镜像大小', value: 'GB 级', highlight: false }
]
const containerInfo = [
{ label: '启动速度', value: '秒级', highlight: true },
{ label: '资源占用', value: '共享宿主 OS 内核（MB 级）', highlight: true },
{ label: '隔离性', value: '较强（进程级隔离）', highlight: false },
{ label: '密度', value: '单机可运行数百个容器', highlight: true },
{ label: '镜像大小', value: 'MB 级', highlight: true }
]
const currentLayers = computed(() => activeTab.value === 'vm' ? vmLayers : containerLayers)
const currentInfo = computed(() => activeTab.value === 'vm' ? vmInfo : containerInfo)
</script>
<style scoped>
.docker-arch-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tab-btn {
padding: 0.4rem 1rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: var(--vp-c-text-2);
transition: all 0.2s;
}
.tab-btn:hover { border-color: var(--vp-c-brand); }
.tab-btn.active {
background: var(--vp-c-brand);
color: #fff;
border-color: var(--vp-c-brand);
}
.arch-view {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 640px) {
.arch-view { grid-template-columns: 1fr; }
}
.layers {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.layer {
padding: 0.5rem;
border-radius: 6px;
text-align: center;
font-size: 0.78rem;
font-weight: 600;
}
.layer.app { background: rgba(59, 130, 246, 0.12); color: var(--vp-c-text-1); }
.layer.os { background: rgba(245, 158, 11, 0.12); color: var(--vp-c-text-1); }
.layer.hypervisor { background: rgba(239, 68, 68, 0.12); color: var(--vp-c-text-1); }
.layer.docker { background: rgba(6, 182, 212, 0.15); color: var(--vp-c-text-1); }
.layer.host { background: rgba(34, 197, 94, 0.12); color: var(--vp-c-text-1); }
.layer.hardware { background: rgba(107, 114, 128, 0.12); color: var(--vp-c-text-2); }
.layer-label { margin-bottom: 0.25rem; }
.layer-items {
display: flex;
gap: 0.3rem;
justify-content: center;
flex-wrap: wrap;
}
.layer-item {
padding: 0.2rem 0.5rem;
background: var(--vp-c-bg);
border-radius: 4px;
font-size: 0.72rem;
font-weight: 500;
}
.comparison {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.6rem;
background: var(--vp-c-bg);
border-radius: 6px;
font-size: 0.8rem;
}
.info-label { color: var(--vp-c-text-2); font-weight: 500; }
.info-value { font-weight: 600; }
.info-value.highlight { color: var(--vp-c-brand); }
</style>
docs/.vitepress/theme/components/appendix/docker-containers/DockerLifecycleDemo.vue
+178
View File
@@ -0,0 +1,178 @@
<!--
DockerLifecycleDemo.vue
Docker 生命周期演示：镜像构建到容器运行的流程
-->
<template>
<div class="docker-lifecycle-demo">
<div class="header">
<div class="title">Docker 生命周期</div>
<div class="subtitle">点击每个阶段查看详细说明</div>
</div>
<div class="stages">
<div
v-for="(stage, i) in stages"
:key="stage.key"
:class="['stage-card', { active: activeStage === stage.key }]"
@click="activeStage = stage.key"
>
<div class="stage-icon">{{ stage.icon }}</div>
<div class="stage-name">{{ stage.name }}</div>
<div v-if="i < stages.length - 1" class="arrow">→</div>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="command-block">
<div class="cmd-label">常用命令</div>
<div v-for="(cmd, i) in current.commands" :key="i" class="cmd-item">
<code>{{ cmd.cmd }}</code>
<span class="cmd-desc">{{ cmd.desc }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeStage = ref('write')
const stages = [
{
key: 'write',
name: '编写 Dockerfile',
icon: '📝',
desc: 'Dockerfile 是构建镜像的"配方"，定义了从基础镜像开始，如何一步步构建出你的应用环境。每条指令创建一个镜像层（Layer），Docker 会缓存这些层以加速后续构建。',
commands: [
{ cmd: 'FROM node:18-alpine', desc: '指定基础镜像' },
{ cmd: 'WORKDIR /app', desc: '设置工作目录' },
{ cmd: 'COPY package*.json ./', desc: '复制依赖文件（利用缓存）' },
{ cmd: 'RUN npm install', desc: '安装依赖' },
{ cmd: 'COPY . .', desc: '复制应用代码' },
{ cmd: 'EXPOSE 3000', desc: '声明端口' },
{ cmd: 'CMD ["node", "server.js"]', desc: '启动命令' }
]
},
{
key: 'build',
name: '构建镜像',
icon: '🔨',
desc: 'docker build 命令读取 Dockerfile，逐层执行指令，最终生成一个不可变的镜像（Image）。镜像是只读的模板，包含运行应用所需的一切：代码、运行时、库、环境变量。',
commands: [
{ cmd: 'docker build -t myapp:1.0 .', desc: '构建并打标签' },
{ cmd: 'docker images', desc: '查看本地镜像列表' },
{ cmd: 'docker image prune', desc: '清理无用镜像' }
]
},
{
key: 'push',
name: '推送仓库',
icon: '☁️',
desc: '将构建好的镜像推送到镜像仓库（Registry），如 Docker Hub、阿里云 ACR、AWS ECR。团队成员和部署环境可以从仓库拉取镜像，实现"一次构建，到处运行"。',
commands: [
{ cmd: 'docker tag myapp:1.0 registry/myapp:1.0', desc: '给镜像打远程标签' },
{ cmd: 'docker push registry/myapp:1.0', desc: '推送到仓库' },
{ cmd: 'docker pull registry/myapp:1.0', desc: '从仓库拉取' }
]
},
{
key: 'run',
name: '运行容器',
icon: '▶️',
desc: '容器是镜像的运行实例。一个镜像可以启动多个容器，每个容器有独立的文件系统、网络和进程空间。容器是轻量级的，启动只需秒级。',
commands: [
{ cmd: 'docker run -d -p 3000:3000 myapp:1.0', desc: '后台运行并映射端口' },
{ cmd: 'docker ps', desc: '查看运行中的容器' },
{ cmd: 'docker logs <container>', desc: '查看容器日志' },
{ cmd: 'docker exec -it <container> sh', desc: '进入容器终端' }
]
},
{
key: 'manage',
name: '管理容器',
icon: '⚙️',
desc: '容器运行后需要监控、停止、重启或删除。Docker Compose 可以管理多个容器的编排，定义服务间的依赖关系和网络。',
commands: [
{ cmd: 'docker stop <container>', desc: '停止容器' },
{ cmd: 'docker restart <container>', desc: '重启容器' },
{ cmd: 'docker rm <container>', desc: '删除容器' },
{ cmd: 'docker compose up -d', desc: '用 Compose 启动多服务' }
]
}
]
const current = computed(() => stages.find(s => s.key === activeStage.value))
</script>
<style scoped>
.docker-lifecycle-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.stages {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.stage-card {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.7rem;
border-radius: 8px;
cursor: pointer;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.stage-card:hover { border-color: var(--vp-c-brand); }
.stage-card.active {
border-color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.05);
}
.stage-icon { font-size: 1.1rem; }
.stage-name { font-size: 0.8rem; font-weight: 600; }
.arrow { color: var(--vp-c-text-3); font-size: 0.9rem; margin: 0 0.1rem; }
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.detail-desc { font-size: 0.82rem; color: var(--vp-c-text-2); margin-bottom: 0.75rem; line-height: 1.6; }
.command-block {
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 0.6rem;
}
.cmd-label { font-weight: 600; font-size: 0.78rem; margin-bottom: 0.4rem; color: var(--vp-c-text-2); }
.cmd-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.25rem 0;
font-size: 0.78rem;
}
.cmd-item code {
background: var(--vp-c-bg);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
color: var(--vp-c-brand);
}
.cmd-desc { color: var(--vp-c-text-3); }
</style>
docs/.vitepress/theme/components/appendix/high-availability/AvailabilityCalculatorDemo.vue
+87
View File
@@ -0,0 +1,87 @@
<!--
AvailabilityCalculatorDemo.vue
可用性计算器：展示不同 SLA 级别对应的停机时间
-->
<template>
<div class="availability-demo">
<div class="header">
<div class="title">可用性等级计算器</div>
<div class="subtitle">点击查看不同"几个 9"对应的停机时间</div>
</div>
<div class="sla-cards">
<div
v-for="sla in slaLevels"
:key="sla.nines"
:class="['sla-card', { active: activeSla === sla.nines }]"
@click="activeSla = sla.nines"
>
<div class="sla-nines">{{ sla.label }}</div>
<div class="sla-percent">{{ sla.percent }}</div>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.label }}（{{ current.percent }}）</div>
<div class="downtime-grid">
<div class="downtime-item">
<div class="dt-label">每年停机</div>
<div class="dt-value">{{ current.yearly }}</div>
</div>
<div class="downtime-item">
<div class="dt-label">每月停机</div>
<div class="dt-value">{{ current.monthly }}</div>
</div>
<div class="downtime-item">
<div class="dt-label">每周停机</div>
<div class="dt-value">{{ current.weekly }}</div>
</div>
</div>
<div class="detail-examples">
<span class="label">典型场景：</span>{{ current.examples }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeSla = ref('3')
const slaLevels = [
{ nines: '2', label: '2 个 9', percent: '99%', yearly: '3.65 天', monthly: '7.3 小时', weekly: '1.68 小时', examples: '内部工具、非关键系统' },
{ nines: '3', label: '3 个 9', percent: '99.9%', yearly: '8.76 小时', monthly: '43.8 分钟', weekly: '10.1 分钟', examples: '普通 Web 应用、企业系统' },
{ nines: '4', label: '4 个 9', percent: '99.99%', yearly: '52.6 分钟', monthly: '4.38 分钟', weekly: '1.01 分钟', examples: '电商平台、SaaS 服务' },
{ nines: '5', label: '5 个 9', percent: '99.999%', yearly: '5.26 分钟', monthly: '26.3 秒', weekly: '6.05 秒', examples: '金融交易、电信核心网' }
]
const current = computed(() => slaLevels.find(s => s.nines === activeSla.value))
</script>
<style scoped>
.availability-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.sla-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.sla-card {
padding: 0.6rem; border-radius: 8px; cursor: pointer; text-align: center;
background: var(--vp-c-bg); border: 2px solid var(--vp-c-divider); transition: all 0.2s;
}
.sla-card:hover { border-color: var(--vp-c-brand); }
.sla-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.08); }
.sla-nines { font-weight: 800; font-size: 1.1rem; color: var(--vp-c-brand); }
.sla-percent { font-size: 0.8rem; color: var(--vp-c-text-2); }
.detail-panel { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.detail-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.75rem; }
.downtime-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.downtime-item { text-align: center; padding: 0.5rem; border-radius: 6px; background: var(--vp-c-bg-soft); }
.dt-label { font-size: 0.75rem; color: var(--vp-c-text-3); }
.dt-value { font-weight: 700; font-size: 0.9rem; color: var(--vp-c-brand); }
.detail-examples { font-size: 0.82rem; }
.label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/components/appendix/high-availability/FailoverStrategyDemo.vue
+143
View File
@@ -0,0 +1,143 @@
<!--
FailoverStrategyDemo.vue
故障转移策略演示：展示主备、主主、多活等高可用架构
-->
<template>
<div class="failover-demo">
<div class="header">
<div class="title">故障转移策略对比</div>
<div class="subtitle">点击查看不同高可用架构的工作方式</div>
</div>
<div class="strategy-tabs">
<div
v-for="s in strategies"
:key="s.key"
:class="['tab', { active: activeStrategy === s.key }]"
@click="activeStrategy = s.key"
>
{{ s.name }}
</div>
</div>
<div v-if="current" class="strategy-detail">
<div class="strategy-name">{{ current.name }}</div>
<div class="strategy-desc">{{ current.desc }}</div>
<div class="arch-visual">
<div
v-for="(node, i) in current.nodes"
:key="i"
:class="['arch-node', node.role]"
>
<div class="node-role">{{ node.label }}</div>
<div class="node-status">{{ node.status }}</div>
</div>
</div>
<div class="pros-cons">
<div class="pros">
<div class="pc-title">优点</div>
<div v-for="p in current.pros" :key="p" class="pc-item good">{{ p }}</div>
</div>
<div class="cons">
<div class="pc-title">缺点</div>
<div v-for="c in current.cons" :key="c" class="pc-item bad">{{ c }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeStrategy = ref('active-standby')
const strategies = [
{
key: 'active-standby',
name: '主备模式',
desc: '一个主节点处理所有请求，备节点待命。主节点故障时，备节点接管。',
nodes: [
{ label: '主节点', status: '处理请求', role: 'primary' },
{ label: '备节点', status: '待命同步', role: 'standby' }
],
pros: ['架构简单，易于理解', '数据一致性好保证'],
cons: ['备节点资源浪费', '切换有短暂中断（秒级）']
},
{
key: 'active-active',
name: '主主模式',
desc: '两个节点都处理请求，互相同步数据。任一节点故障，另一个继续服务。',
nodes: [
{ label: '节点 A', status: '处理请求', role: 'primary' },
{ label: '节点 B', status: '处理请求', role: 'primary' }
],
pros: ['资源利用率高', '无切换中断'],
cons: ['数据冲突处理复杂', '需要解决写冲突']
},
{
key: 'multi-az',
name: '多可用区',
desc: '在同一地域的不同数据中心部署，防止单个机房故障。',
nodes: [
{ label: 'AZ-1 主', status: '读写', role: 'primary' },
{ label: 'AZ-2 从', status: '只读', role: 'secondary' },
{ label: 'AZ-3 从', status: '只读', role: 'secondary' }
],
pros: ['机房级容灾', '读性能可扩展'],
cons: ['跨 AZ 延迟（1-2ms）', '成本增加']
},
{
key: 'multi-region',
name: '异地多活',
desc: '在不同地域部署完整的服务，每个地域独立处理本地流量。',
nodes: [
{ label: '北京', status: '独立服务', role: 'primary' },
{ label: '上海', status: '独立服务', role: 'primary' },
{ label: '广州', status: '独立服务', role: 'primary' }
],
pros: ['地域级容灾', '就近访问延迟低'],
cons: ['架构极其复杂', '数据同步挑战大']
}
]
const current = computed(() => strategies.find(s => s.key === activeStrategy.value))
</script>
<style scoped>
.failover-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.strategy-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer;
font-size: 0.85rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.tab:hover { border-color: var(--vp-c-brand); }
.tab.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); font-weight: 600; }
.strategy-detail { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.strategy-name { font-weight: 700; font-size: 0.95rem; }
.strategy-desc { color: var(--vp-c-text-2); font-size: 0.82rem; margin-bottom: 0.75rem; }
.arch-visual { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; justify-content: center; }
.arch-node {
padding: 0.5rem 0.75rem; border-radius: 6px; text-align: center;
border: 1px dashed var(--vp-c-divider); min-width: 90px;
}
.arch-node.primary { background: rgba(var(--vp-c-brand-rgb), 0.08); border-color: var(--vp-c-brand); }
.arch-node.standby { background: rgba(245,158,11,0.08); border-color: #f59e0b; }
.arch-node.secondary { background: rgba(99,102,241,0.08); border-color: #6366f1; }
.node-role { font-weight: 700; font-size: 0.82rem; }
.node-status { font-size: 0.72rem; color: var(--vp-c-text-2); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pc-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 0.3rem; }
.pc-item { font-size: 0.78rem; padding: 0.2rem 0; }
.pc-item.good::before { content: '+ '; color: #22c55e; font-weight: 700; }
.pc-item.bad::before { content: '- '; color: #ef4444; font-weight: 700; }
</style>
docs/.vitepress/theme/components/appendix/kubernetes/K8sArchitectureDemo.vue
+183
View File
@@ -0,0 +1,183 @@
<!--
K8sArchitectureDemo.vue
Kubernetes 架构演示：控制平面与工作节点
-->
<template>
<div class="k8s-arch-demo">
<div class="header">
<div class="title">Kubernetes 架构</div>
<div class="subtitle">点击组件查看详细说明</div>
</div>
<div class="arch-layout">
<div class="plane control-plane">
<div class="plane-title">控制平面（Control Plane）</div>
<div class="components">
<div
v-for="c in controlPlane"
:key="c.key"
:class="['comp-card', { active: active === c.key }]"
@click="active = c.key"
>
<div class="comp-name">{{ c.name }}</div>
</div>
</div>
</div>
<div class="plane worker-plane">
<div class="plane-title">工作节点（Worker Node）× N</div>
<div class="components">
<div
v-for="c in workerNode"
:key="c.key"
:class="['comp-card', { active: active === c.key }]"
@click="active = c.key"
>
<div class="comp-name">{{ c.name }}</div>
</div>
</div>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="detail-analogy">
<span class="label">类比：</span>{{ current.analogy }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const active = ref('api-server')
const controlPlane = [
{
key: 'api-server',
name: 'API Server',
desc: 'Kubernetes 的"前门"，所有操作（kubectl、Dashboard、内部组件）都通过 API Server 进行。它负责认证、授权、准入控制，是集群的唯一入口。',
analogy: '公司前台，所有访客和快递都要经过前台登记'
},
{
key: 'etcd',
name: 'etcd',
desc: '分布式键值存储，保存集群的所有状态数据：Pod 信息、Service 配置、Secret 等。它是集群的"记忆"，丢失 etcd 数据等于丢失整个集群。',
analogy: '公司的档案室，记录所有员工信息和规章制度'
},
{
key: 'scheduler',
name: 'Scheduler',
desc: '负责将新创建的 Pod 分配到合适的节点上。它会考虑资源需求、亲和性规则、污点容忍等因素，做出最优调度决策。',
analogy: 'HR 部门，根据岗位需求把新员工分配到合适的部门'
},
{
key: 'controller',
name: 'Controller Manager',
desc: '运行各种控制器（Deployment、ReplicaSet、Job 等），持续监控集群状态，确保实际状态与期望状态一致。如果 Pod 挂了，控制器会自动重建。',
analogy: '各部门经理，确保每个部门的人员配置符合编制要求'
}
]
const workerNode = [
{
key: 'kubelet',
name: 'kubelet',
desc: '每个节点上的"代理人"，负责管理本节点上的 Pod 生命周期。它接收 API Server 的指令，调用容器运行时创建/销毁容器，并上报节点状态。',
analogy: '每个工位上的组长，负责管理组员的日常工作'
},
{
key: 'kube-proxy',
name: 'kube-proxy',
desc: '负责实现 Service 的网络规则，将访问 Service 的流量转发到对应的 Pod。它维护节点上的 iptables/IPVS 规则，实现负载均衡。',
analogy: '公司的电话总机，把外部来电转接到正确的分机'
},
{
key: 'runtime',
name: '容器运行时',
desc: '实际运行容器的组件，如 containerd、CRI-O。kubelet 通过 CRI（容器运行时接口）与它交互，它负责拉取镜像、创建和管理容器。',
analogy: '实际干活的工人，按照指令完成具体的生产任务'
}
]
const allComponents = [...controlPlane, ...workerNode]
const current = computed(() => allComponents.find(c => c.key === active.value))
</script>
<style scoped>
.k8s-arch-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.arch-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-width: 640px) {
.arch-layout { grid-template-columns: 1fr; }
}
.plane {
border-radius: 8px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
.control-plane { background: rgba(59, 130, 246, 0.06); }
.worker-plane { background: rgba(34, 197, 94, 0.06); }
.plane-title {
font-weight: 700;
font-size: 0.8rem;
margin-bottom: 0.5rem;
color: var(--vp-c-text-2);
}
.components {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.comp-card {
padding: 0.35rem 0.6rem;
border-radius: 6px;
cursor: pointer;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
font-size: 0.78rem;
font-weight: 600;
transition: all 0.2s;
}
.comp-card:hover { border-color: var(--vp-c-brand); }
.comp-card.active {
border-color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.08);
color: var(--vp-c-brand);
}
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.detail-desc {
font-size: 0.82rem;
color: var(--vp-c-text-2);
margin-bottom: 0.5rem;
line-height: 1.6;
}
.detail-analogy {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
}
.label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/components/appendix/kubernetes/K8sWorkloadsDemo.vue
+235
View File
@@ -0,0 +1,235 @@
<!--
K8sWorkloadsDemo.vue
Kubernetes 工作负载演示：Pod、Deployment、Service 等核心资源
-->
<template>
<div class="k8s-workloads-demo">
<div class="header">
<div class="title">K8s 核心资源</div>
<div class="subtitle">点击资源类型查看说明和 YAML 示例</div>
</div>
<div class="resource-tabs">
<button
v-for="r in resources"
:key="r.key"
:class="['res-btn', { active: activeRes === r.key }]"
@click="activeRes = r.key"
>
{{ r.name }}
</button>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-header">
<div class="detail-title">{{ current.name }}</div>
<div class="detail-badge">{{ current.category }}</div>
</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="yaml-block">
<div class="yaml-label">YAML 示例</div>
<pre class="yaml-code"><code>{{ current.yaml }}</code></pre>
</div>
<div v-if="current.tips" class="tips">
<span class="tip-label">要点：</span>{{ current.tips }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeRes = ref('pod')
const resources = [
{
key: 'pod',
name: 'Pod',
category: '最小调度单元',
desc: 'Pod 是 K8s 中最小的部署单元，包含一个或多个紧密关联的容器。同一 Pod 内的容器共享网络和存储，可以通过 localhost 互相通信。',
yaml: `apiVersion: v1
kind: Pod
metadata:
name: my-app
spec:
containers:
- name: app
image: my-app:1.0
ports:
- containerPort: 3000`,
tips: '生产环境中很少直接创建 Pod，通常通过 Deployment 管理。'
},
{
key: 'deployment',
name: 'Deployment',
category: '工作负载',
desc: 'Deployment 管理 Pod 的副本数、滚动更新和回滚。你声明"我要 3 个副本运行 v1.0"，Deployment 控制器会确保始终有 3 个健康的 Pod 在运行。',
yaml: `apiVersion: apps/v1
kind: Deployment
metadata:
name: my-app
spec:
replicas: 3
selector:
matchLabels:
app: my-app
template:
metadata:
labels:
app: my-app
spec:
containers:
- name: app
image: my-app:1.0`,
tips: '更新镜像版本后，Deployment 会自动执行滚动更新，逐步替换旧 Pod。'
},
{
key: 'service',
name: 'Service',
category: '网络',
desc: 'Service 为一组 Pod 提供稳定的访问入口。Pod 的 IP 会变，但 Service 的 ClusterIP 和 DNS 名称不变。它通过 label selector 找到对应的 Pod，并做负载均衡。',
yaml: `apiVersion: v1
kind: Service
metadata:
name: my-app-svc
spec:
selector:
app: my-app
ports:
- port: 80
targetPort: 3000
type: ClusterIP`,
tips: 'ClusterIP（集群内访问）、NodePort（节点端口）、LoadBalancer（云负载均衡器）是三种常用类型。'
},
{
key: 'configmap',
name: 'ConfigMap',
category: '配置',
desc: 'ConfigMap 存储非敏感的配置数据（如数据库地址、功能开关），可以作为环境变量或文件挂载到 Pod 中。修改 ConfigMap 后可以不重建镜像就更新配置。',
yaml: `apiVersion: v1
kind: ConfigMap
metadata:
name: app-config
data:
DB_HOST: "db.example.com"
LOG_LEVEL: "info"`,
tips: '敏感数据（密码、密钥）应该用 Secret 而不是 ConfigMap。'
},
{
key: 'ingress',
name: 'Ingress',
category: '网络',
desc: 'Ingress 管理集群的外部 HTTP/HTTPS 访问入口，支持基于域名和路径的路由规则。它是集群的"反向代理"，通常配合 Nginx Ingress Controller 使用。',
yaml: `apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: my-ingress
spec:
rules:
- host: app.example.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: my-app-svc
port:
number: 80`,
tips: 'Ingress 需要 Ingress Controller 才能工作，它本身只是路由规则的声明。'
}
]
const current = computed(() => resources.find(r => r.key === activeRes.value))
</script>
<style scoped>
.k8s-workloads-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.resource-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.res-btn {
padding: 0.35rem 0.7rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
transition: all 0.2s;
}
.res-btn:hover { border-color: var(--vp-c-brand); }
.res-btn.active {
background: var(--vp-c-brand);
color: #fff;
border-color: var(--vp-c-brand);
}
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.detail-title { font-weight: 700; font-size: 0.95rem; }
.detail-badge {
font-size: 0.68rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.1);
color: var(--vp-c-brand);
font-weight: 600;
}
.detail-desc {
font-size: 0.82rem;
color: var(--vp-c-text-2);
margin-bottom: 0.75rem;
line-height: 1.6;
}
.yaml-block {
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 0.6rem;
margin-bottom: 0.5rem;
}
.yaml-label {
font-weight: 600;
font-size: 0.72rem;
color: var(--vp-c-text-3);
margin-bottom: 0.3rem;
}
.yaml-code {
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
overflow-x: auto;
color: var(--vp-c-text-1);
}
.tips {
font-size: 0.78rem;
color: var(--vp-c-text-2);
padding: 0.4rem 0.6rem;
background: rgba(245, 158, 11, 0.08);
border-radius: 6px;
}
.tip-label { font-weight: 600; }
</style>
docs/.vitepress/theme/components/appendix/linux-basics/LinuxCommandDemo.vue
+168
View File
@@ -0,0 +1,168 @@
<!--
LinuxCommandDemo.vue
Linux 常用命令分类演示
-->
<template>
<div class="linux-cmd-demo">
<div class="header">
<div class="title">Linux 命令速查</div>
<div class="subtitle">按分类查看常用命令及示例</div>
</div>
<div class="categories">
<button
v-for="cat in categories"
:key="cat.key"
:class="['cat-btn', { active: activeCat === cat.key }]"
@click="activeCat = cat.key"
>
{{ cat.label }}
</button>
</div>
<div v-if="current" class="cmd-list">
<div v-for="(cmd, i) in current.commands" :key="i" class="cmd-card">
<div class="cmd-header">
<code class="cmd-name">{{ cmd.name }}</code>
<span class="cmd-brief">{{ cmd.brief }}</span>
</div>
<div class="cmd-example">
<code>{{ cmd.example }}</code>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeCat = ref('file')
const categories = [
{
key: 'file',
label: '文件操作',
commands: [
{ name: 'ls', brief: '列出文件和目录', example: 'ls -la /home' },
{ name: 'cd', brief: '切换目录', example: 'cd /var/log' },
{ name: 'cp', brief: '复制文件', example: 'cp -r src/ backup/' },
{ name: 'mv', brief: '移动/重命名', example: 'mv old.txt new.txt' },
{ name: 'rm', brief: '删除文件', example: 'rm -rf dist/' },
{ name: 'mkdir', brief: '创建目录', example: 'mkdir -p src/components' },
{ name: 'find', brief: '查找文件', example: 'find . -name "*.js" -type f' }
]
},
{
key: 'text',
label: '文本处理',
commands: [
{ name: 'cat', brief: '查看文件内容', example: 'cat config.json' },
{ name: 'grep', brief: '搜索文本', example: 'grep -rn "ERROR" /var/log/' },
{ name: 'head/tail', brief: '查看文件头/尾', example: 'tail -f app.log' },
{ name: 'awk', brief: '文本列处理', example: "awk '{print $1, $3}' data.txt" },
{ name: 'sed', brief: '流式文本替换', example: "sed -i 's/old/new/g' file.txt" },
{ name: 'wc', brief: '统计行/词/字符数', example: 'wc -l *.js' },
{ name: 'sort | uniq', brief: '排序去重', example: 'sort data.txt | uniq -c' }
]
},
{
key: 'process',
label: '进程管理',
commands: [
{ name: 'ps', brief: '查看进程', example: 'ps aux | grep node' },
{ name: 'top/htop', brief: '实时监控', example: 'top -o %CPU' },
{ name: 'kill', brief: '终止进程', example: 'kill -9 12345' },
{ name: 'nohup', brief: '后台运行', example: 'nohup node app.js &' },
{ name: 'lsof', brief: '查看打开的文件', example: 'lsof -i :3000' },
{ name: 'systemctl', brief: '管理系统服务', example: 'systemctl restart nginx' }
]
},
{
key: 'network',
label: '网络工具',
commands: [
{ name: 'curl', brief: '发送 HTTP 请求', example: 'curl -X POST -d "data" url' },
{ name: 'ping', brief: '测试连通性', example: 'ping -c 4 google.com' },
{ name: 'ss/netstat', brief: '查看网络连接', example: 'ss -tlnp' },
{ name: 'dig', brief: 'DNS 查询', example: 'dig example.com' },
{ name: 'ssh', brief: '远程登录', example: 'ssh user@server -p 22' },
{ name: 'scp', brief: '远程复制文件', example: 'scp file.txt user@server:/tmp/' }
]
}
]
const current = computed(() => categories.find(c => c.key === activeCat.value))
</script>
<style scoped>
.linux-cmd-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.categories {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.cat-btn {
padding: 0.35rem 0.7rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
transition: all 0.2s;
}
.cat-btn:hover { border-color: var(--vp-c-brand); }
.cat-btn.active {
background: var(--vp-c-brand);
color: #fff;
border-color: var(--vp-c-brand);
}
.cmd-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cmd-card {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 0.5rem 0.7rem;
border: 1px solid var(--vp-c-divider);
}
.cmd-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.cmd-name {
font-weight: 700;
font-size: 0.82rem;
color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.08);
padding: 0.1rem 0.35rem;
border-radius: 4px;
}
.cmd-brief {
font-size: 0.78rem;
color: var(--vp-c-text-2);
}
.cmd-example code {
font-size: 0.73rem;
color: var(--vp-c-text-3);
background: var(--vp-c-bg-soft);
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
</style>
docs/.vitepress/theme/components/appendix/linux-basics/LinuxFileSystemDemo.vue
+119
View File
@@ -0,0 +1,119 @@
<!--
LinuxFileSystemDemo.vue
Linux 文件系统层级演示
-->
<template>
<div class="linux-fs-demo">
<div class="header">
<div class="title">Linux 文件系统层级</div>
<div class="subtitle">点击目录查看用途说明</div>
</div>
<div class="tree">
<div
v-for="dir in dirs"
:key="dir.path"
:class="['dir-item', { active: activeDir === dir.path }]"
@click="activeDir = dir.path"
>
<span class="dir-icon">{{ dir.icon }}</span>
<span class="dir-path">{{ dir.path }}</span>
<span class="dir-brief">{{ dir.brief }}</span>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.path }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div v-if="current.examples.length" class="examples">
<div class="ex-label">常见内容：</div>
<div class="ex-list">
<span v-for="(ex, i) in current.examples" :key="i" class="ex-tag">{{ ex }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeDir = ref('/')
const dirs = [
{ path: '/', icon: '📁', brief: '根目录', desc: '整个文件系统的起点，所有目录和文件都从这里开始。Linux 中一切皆文件，所有设备、进程信息都以文件形式存在于这棵目录树中。', examples: [] },
{ path: '/bin', icon: '⚙️', brief: '基础命令', desc: '存放系统启动和单用户模式下必需的基础命令二进制文件。这些命令所有用户都可以使用。', examples: ['ls', 'cp', 'mv', 'cat', 'grep', 'chmod'] },
{ path: '/etc', icon: '📋', brief: '配置文件', desc: '存放系统和应用的配置文件。几乎所有软件的配置都在这里，修改配置是 Linux 运维的日常。', examples: ['nginx.conf', 'hosts', 'passwd', 'ssh/sshd_config', 'crontab'] },
{ path: '/home', icon: '🏠', brief: '用户目录', desc: '普通用户的家目录。每个用户在这里有一个以用户名命名的子目录，存放个人文件和配置。', examples: ['/home/alice', '/home/bob', '~/.bashrc', '~/.ssh/'] },
{ path: '/var', icon: '📊', brief: '可变数据', desc: '存放运行时会变化的数据：日志、缓存、邮件、数据库文件等。排查问题时经常需要查看这里的日志。', examples: ['/var/log/', '/var/cache/', '/var/lib/mysql/', '/var/www/'] },
{ path: '/tmp', icon: '🗑️', brief: '临时文件', desc: '存放临时文件，系统重启后通常会被清空。所有用户都有写权限，适合存放不需要持久化的中间文件。', examples: ['编译中间文件', '下载缓存', '会话临时数据'] },
{ path: '/usr', icon: '📦', brief: '用户程序', desc: '存放用户安装的程序、库和文档。可以理解为 "Unix System Resources"，是最大的目录之一。', examples: ['/usr/bin/', '/usr/lib/', '/usr/local/', '/usr/share/'] },
{ path: '/proc', icon: '🔍', brief: '进程信息', desc: '虚拟文件系统，不占磁盘空间。内核将进程和系统信息以文件形式暴露在这里，是监控和调试的重要数据源。', examples: ['/proc/cpuinfo', '/proc/meminfo', '/proc/[pid]/status'] },
{ path: '/dev', icon: '🔌', brief: '设备文件', desc: '存放设备文件。Linux 中硬件设备也是文件，通过读写这些文件与硬件交互。', examples: ['/dev/sda', '/dev/null', '/dev/zero', '/dev/tty'] }
]
const current = computed(() => dirs.find(d => d.path === activeDir.value))
</script>
<style scoped>
.linux-fs-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.tree {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 1rem;
}
.dir-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.6rem;
border-radius: 6px;
cursor: pointer;
background: var(--vp-c-bg);
border: 1px solid transparent;
transition: all 0.2s;
font-size: 0.82rem;
}
.dir-item:hover { border-color: var(--vp-c-divider); }
.dir-item.active {
border-color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.05);
}
.dir-icon { font-size: 0.9rem; }
.dir-path { font-weight: 700; font-family: var(--vp-font-family-mono); min-width: 60px; }
.dir-brief { color: var(--vp-c-text-3); font-size: 0.78rem; }
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-title {
font-weight: 700;
font-size: 0.95rem;
font-family: var(--vp-font-family-mono);
margin-bottom: 0.4rem;
}
.detail-desc { font-size: 0.82rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; line-height: 1.6; }
.examples { margin-top: 0.4rem; }
.ex-label { font-size: 0.75rem; font-weight: 600; color: var(--vp-c-text-3); margin-bottom: 0.3rem; }
.ex-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ex-tag {
font-size: 0.72rem;
padding: 0.15rem 0.4rem;
background: var(--vp-c-bg-soft);
border-radius: 4px;
font-family: var(--vp-font-family-mono);
color: var(--vp-c-brand);
}
</style>
docs/.vitepress/theme/components/appendix/linux-basics/LinuxPermissionsDemo.vue
+234
View File
@@ -0,0 +1,234 @@
<!--
LinuxPermissionsDemo.vue
Linux 权限系统演示
-->
<template>
<div class="linux-perm-demo">
<div class="header">
<div class="title">Linux 权限解读器</div>
<div class="subtitle">输入权限字符串或数字，查看含义</div>
</div>
<div class="input-row">
<div class="input-group">
<label>权限数字（如 755）</label>
<input v-model="permNum" type="text" maxlength="3" placeholder="755" @input="onNumInput" />
</div>
<div class="perm-string">{{ permString }}</div>
</div>
<div class="perm-grid">
<div v-for="(group, gi) in groups" :key="gi" class="perm-group">
<div class="group-label">{{ group.label }}</div>
<div class="bits">
<label v-for="(bit, bi) in group.bits" :key="bi" class="bit-label">
<input type="checkbox" v-model="bit.on" @change="onBitChange" />
<span :class="['bit-char', bit.char]">{{ bit.char }}</span>
<span class="bit-name">{{ bit.name }}</span>
</label>
</div>
</div>
</div>
<div class="examples">
<div class="ex-title">常见权限组合</div>
<div class="ex-grid">
<div v-for="ex in examples" :key="ex.num" class="ex-item" @click="setPermNum(ex.num)">
<code>{{ ex.num }}</code>
<span class="ex-desc">{{ ex.desc }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue'
const groups = reactive([
{
label: '所有者（Owner）',
bits: [
{ char: 'r', name: '读', on: true },
{ char: 'w', name: '写', on: true },
{ char: 'x', name: '执行', on: true }
]
},
{
label: '所属组（Group）',
bits: [
{ char: 'r', name: '读', on: true },
{ char: 'w', name: '写', on: false },
{ char: 'x', name: '执行', on: true }
]
},
{
label: '其他人（Others）',
bits: [
{ char: 'r', name: '读', on: true },
{ char: 'w', name: '写', on: false },
{ char: 'x', name: '执行', on: true }
]
}
])
const permNum = ref('755')
const permString = computed(() => {
return '-' + groups.map(g =>
g.bits.map(b => b.on ? b.char : '-').join('')
).join('')
})
function bitsToNum() {
return groups.map(g => {
let n = 0
if (g.bits[0].on) n += 4
if (g.bits[1].on) n += 2
if (g.bits[2].on) n += 1
return n
}).join('')
}
function onBitChange() {
permNum.value = bitsToNum()
}
function onNumInput() {
const s = permNum.value.replace(/[^0-7]/g, '').slice(0, 3)
permNum.value = s
if (s.length === 3) {
s.split('').forEach((ch, gi) => {
const n = parseInt(ch)
groups[gi].bits[0].on = !!(n & 4)
groups[gi].bits[1].on = !!(n & 2)
groups[gi].bits[2].on = !!(n & 1)
})
}
}
function setPermNum(num) {
permNum.value = num
onNumInput()
}
const examples = [
{ num: '644', desc: '普通文件（owner 读写，其他只读）' },
{ num: '755', desc: '可执行文件/目录（owner 全权限）' },
{ num: '600', desc: '私密文件（仅 owner 读写）' },
{ num: '777', desc: '完全开放（不推荐）' }
]
</script>
<style scoped>
.linux-perm-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.input-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.input-group label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-2);
margin-bottom: 0.2rem;
}
.input-group input {
padding: 0.4rem 0.6rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 1.1rem;
font-family: var(--vp-font-family-mono);
font-weight: 700;
width: 80px;
text-align: center;
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
}
.perm-string {
font-family: var(--vp-font-family-mono);
font-size: 1.1rem;
font-weight: 700;
color: var(--vp-c-brand);
letter-spacing: 1px;
}
.perm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
@media (max-width: 480px) {
.perm-grid { grid-template-columns: 1fr; }
}
.perm-group {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 0.6rem;
border: 1px solid var(--vp-c-divider);
}
.group-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--vp-c-text-2);
margin-bottom: 0.4rem;
}
.bits { display: flex; flex-direction: column; gap: 0.25rem; }
.bit-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
cursor: pointer;
}
.bit-char {
font-family: var(--vp-font-family-mono);
font-weight: 700;
width: 16px;
text-align: center;
}
.bit-char.r { color: #22c55e; }
.bit-char.w { color: #f59e0b; }
.bit-char.x { color: #ef4444; }
.bit-name { color: var(--vp-c-text-3); font-size: 0.75rem; }
.examples {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 0.6rem;
border: 1px solid var(--vp-c-divider);
}
.ex-title {
font-weight: 600;
font-size: 0.78rem;
color: var(--vp-c-text-2);
margin-bottom: 0.4rem;
}
.ex-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ex-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.78rem;
transition: background 0.2s;
}
.ex-item:hover { background: var(--vp-c-bg-soft); }
.ex-item code {
font-weight: 700;
color: var(--vp-c-brand);
}
.ex-desc { color: var(--vp-c-text-3); }
</style>
docs/.vitepress/theme/components/appendix/monolith-to-microservices/ArchEvolutionDemo.vue
+158
View File
@@ -0,0 +1,158 @@
<!--
ArchEvolutionDemo.vue
架构演进演示：展示从单体到微服务的演进过程
-->
<template>
<div class="arch-evolution-demo">
<div class="header">
<div class="title">架构演进路径</div>
<div class="subtitle">点击查看每个阶段的架构特点</div>
</div>
<div class="stages">
<div
v-for="(stage, i) in stages"
:key="stage.key"
:class="['stage-card', { active: activeStage === stage.key }]"
@click="activeStage = stage.key"
>
<div class="stage-num">{{ i + 1 }}</div>
<div class="stage-name">{{ stage.name }}</div>
</div>
</div>
<div v-if="current" class="stage-detail">
<div class="detail-name">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="arch-visual">
<div
v-for="(box, i) in current.boxes"
:key="i"
:class="['arch-box', box.type]"
>
{{ box.label }}
</div>
</div>
<div class="detail-row">
<span class="label">适用规模：</span>{{ current.scale }}
</div>
<div class="detail-row">
<span class="label">核心挑战：</span>{{ current.challenge }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeStage = ref('monolith')
const stages = [
{
key: 'monolith',
name: '单体架构',
desc: '所有功能打包在一个应用中，共享一个数据库。简单直接，适合早期快速迭代。',
scale: '团队 < 10 人，日活 < 10 万',
challenge: '代码耦合严重，一个模块的 Bug 可能拖垮整个系统',
boxes: [
{ label: '用户模块', type: 'module' },
{ label: '订单模块', type: 'module' },
{ label: '支付模块', type: 'module' },
{ label: '商品模块', type: 'module' },
{ label: '单体应用（一个进程）', type: 'container' },
{ label: 'MySQL', type: 'db' }
]
},
{
key: 'modular',
name: '模块化单体',
desc: '在单体内部按业务域划分模块，模块间通过接口通信。是微服务的前置步骤。',
scale: '团队 10-30 人',
challenge: '模块边界容易被打破，需要纪律性',
boxes: [
{ label: '用户域', type: 'domain' },
{ label: '订单域', type: 'domain' },
{ label: '支付域', type: 'domain' },
{ label: '内部 API 边界', type: 'boundary' },
{ label: 'MySQL', type: 'db' }
]
},
{
key: 'soa',
name: '服务化（SOA）',
desc: '按业务能力拆分为独立服务，通过 ESB 或 API 网关通信。每个服务可以独立部署。',
scale: '团队 30-100 人',
challenge: '服务间调用链变长，需要服务治理',
boxes: [
{ label: '用户服务', type: 'service' },
{ label: '订单服务', type: 'service' },
{ label: '支付服务', type: 'service' },
{ label: 'API 网关', type: 'gateway' },
{ label: '各自数据库', type: 'db' }
]
},
{
key: 'microservices',
name: '微服务架构',
desc: '更细粒度的服务拆分，每个服务独立开发、部署、扩缩容。配合容器化和 K8s。',
scale: '团队 100+ 人，日活百万+',
challenge: '分布式复杂性、数据一致性、运维成本',
boxes: [
{ label: '用户服务', type: 'service' },
{ label: '认证服务', type: 'service' },
{ label: '订单服务', type: 'service' },
{ label: '库存服务', type: 'service' },
{ label: '支付服务', type: 'service' },
{ label: '通知服务', type: 'service' },
{ label: 'API Gateway + Service Mesh', type: 'gateway' },
{ label: '独立数据库 x N', type: 'db' }
]
}
]
const current = computed(() => stages.find(s => s.key === activeStage.value))
</script>
<style scoped>
.arch-evolution-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.stages { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stage-card {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer;
font-size: 0.85rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.stage-card:hover { border-color: var(--vp-c-brand); }
.stage-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); font-weight: 600; }
.stage-num {
width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand);
color: white; font-size: 0.7rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.stage-detail { background: var(--vp-c-bg); border-radius: 8px; padding: 1rem; border: 1px solid var(--vp-c-divider); }
.detail-name { font-weight: 700; font-size: 0.95rem; }
.detail-desc { color: var(--vp-c-text-2); font-size: 0.82rem; margin-bottom: 0.75rem; }
.arch-visual { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.arch-box {
padding: 0.35rem 0.6rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600;
border: 1px dashed var(--vp-c-divider);
}
.arch-box.module { background: rgba(var(--vp-c-brand-rgb), 0.06); }
.arch-box.domain { background: rgba(99,102,241,0.06); }
.arch-box.service { background: rgba(34,197,94,0.06); }
.arch-box.gateway { background: rgba(245,158,11,0.06); width: 100%; text-align: center; }
.arch-box.container { background: rgba(239,68,68,0.06); width: 100%; text-align: center; }
.arch-box.boundary { background: rgba(156,163,175,0.06); width: 100%; text-align: center; }
.arch-box.db { background: rgba(139,92,246,0.06); }
.detail-row { font-size: 0.82rem; margin-bottom: 0.25rem; }
.label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/components/appendix/neural-networks/NetworkArchitectureDemo.vue
+222
View File
@@ -0,0 +1,222 @@
<!--
NetworkArchitectureDemo.vue
神经网络架构对比演示
-->
<template>
<div class="net-arch-demo">
<div class="header">
<div class="title">常见神经网络架构</div>
<div class="subtitle">点击查看不同网络架构的特点和应用</div>
</div>
<div class="arch-tabs">
<button
v-for="arch in architectures"
:key="arch.key"
:class="['arch-btn', { active: activeArch === arch.key }]"
@click="activeArch = arch.key"
>
{{ arch.name }}
</button>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-header">
<div class="detail-title">{{ current.name }}（{{ current.abbr }}）</div>
<div class="detail-year">{{ current.year }}</div>
</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="structure">
<div class="struct-label">网络结构</div>
<div class="struct-visual">
<span v-for="(layer, i) in current.layers" :key="i" class="layer-tag">
{{ layer }}
<span v-if="i < current.layers.length - 1" class="layer-arrow">→</span>
</span>
</div>
</div>
<div class="apps">
<div class="apps-label">典型应用</div>
<div class="apps-list">
<span v-for="(app, i) in current.applications" :key="i" class="app-tag">{{ app }}</span>
</div>
</div>
<div class="key-idea">
<span class="idea-label">核心思想：</span>{{ current.keyIdea }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeArch = ref('ffn')
const architectures = [
{
key: 'ffn',
name: '前馈神经网络',
abbr: 'FNN',
year: '1958',
desc: '最基础的神经网络结构，数据从输入层经过隐藏层到输出层，单向流动，没有循环。每一层的每个神经元与下一层的所有神经元相连（全连接）。',
layers: ['输入层', '隐藏层 ×N', '输出层'],
applications: ['分类', '回归', '函数逼近'],
keyIdea: '通过多层非线性变换，将输入映射到输出。层数越多，能表达的函数越复杂。'
},
{
key: 'cnn',
name: '卷积神经网络',
abbr: 'CNN',
year: '1998',
desc: '专为处理网格状数据（如图像）设计。通过卷积核在输入上滑动提取局部特征，池化层降低维度，最后全连接层做分类。参数共享大幅减少了参数量。',
layers: ['输入', '卷积层', '池化层', '...', '全连接层', '输出'],
applications: ['图像分类', '目标检测', '人脸识别', '医学影像'],
keyIdea: '局部感受野 + 参数共享。卷积核只关注局部区域，同一个卷积核在整张图上共享参数。'
},
{
key: 'rnn',
name: '循环神经网络',
abbr: 'RNN/LSTM',
year: '1997',
desc: '专为处理序列数据设计。隐藏状态会传递到下一个时间步，让网络具有"记忆"能力。LSTM 通过门控机制解决了长序列中的梯度消失问题。',
layers: ['输入序列', '循环层(含记忆)', '...', '输出序列'],
applications: ['机器翻译', '语音识别', '时间序列预测', '文本生成'],
keyIdea: '引入时间维度的循环连接，让网络能处理变长序列并保持上下文记忆。'
},
{
key: 'transformer',
name: 'Transformer',
abbr: 'Transformer',
year: '2017',
desc: '用自注意力机制替代循环结构，可以并行处理整个序列。每个位置都能直接关注序列中的任意其他位置，解决了 RNN 的长距离依赖问题。是 GPT、BERT 等大模型的基础。',
layers: ['输入嵌入', '位置编码', '多头注意力', '前馈网络', '...×N', '输出'],
applications: ['ChatGPT', 'BERT', '机器翻译', '代码生成', '图像生成'],
keyIdea: '自注意力（Self-Attention）：让序列中的每个元素都能"看到"其他所有元素，计算相关性权重。'
},
{
key: 'gan',
name: '生成对抗网络',
abbr: 'GAN',
year: '2014',
desc: '由生成器和判别器两个网络对抗训练。生成器试图生成以假乱真的数据，判别器试图区分真假。两者博弈的结果是生成器越来越强。',
layers: ['随机噪声', '生成器', '生成数据', '判别器', '真/假'],
applications: ['图像生成', '风格迁移', '超分辨率', '数据增强'],
keyIdea: '对抗训练：生成器和判别器互相博弈，共同进步，最终生成器能产生逼真的数据。'
}
]
const current = computed(() => architectures.find(a => a.key === activeArch.value))
</script>
<style scoped>
.net-arch-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.arch-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.arch-btn {
padding: 0.35rem 0.7rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
transition: all 0.2s;
}
.arch-btn:hover { border-color: var(--vp-c-brand); }
.arch-btn.active {
background: var(--vp-c-brand);
color: #fff;
border-color: var(--vp-c-brand);
}
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.4rem;
}
.detail-title { font-weight: 700; font-size: 0.95rem; }
.detail-year {
font-size: 0.72rem;
padding: 0.1rem 0.4rem;
background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.1);
color: var(--vp-c-brand);
border-radius: 4px;
font-weight: 600;
}
.detail-desc {
font-size: 0.82rem;
color: var(--vp-c-text-2);
margin-bottom: 0.75rem;
line-height: 1.6;
}
.structure, .apps {
margin-bottom: 0.5rem;
}
.struct-label, .apps-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--vp-c-text-3);
margin-bottom: 0.3rem;
}
.struct-visual {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem;
}
.layer-tag {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
background: var(--vp-c-bg-soft);
border-radius: 4px;
font-weight: 600;
}
.layer-arrow {
color: var(--vp-c-text-3);
margin: 0 0.1rem;
}
.apps-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.app-tag {
font-size: 0.72rem;
padding: 0.15rem 0.4rem;
background: rgba(34, 197, 94, 0.1);
color: var(--vp-c-text-1);
border-radius: 4px;
}
.key-idea {
font-size: 0.8rem;
padding: 0.5rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
line-height: 1.5;
}
.idea-label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/components/appendix/neural-networks/NetworkLayersDemo.vue
+132
View File
@@ -0,0 +1,132 @@
<!--
NetworkLayersDemo.vue
神经网络层类型交互演示
-->
<template>
<div class="layers-demo">
<div class="header">
<div class="title">神经网络常见层类型</div>
<div class="subtitle">点击查看各层的作用和参数</div>
</div>
<div class="layer-tabs">
<button v-for="l in layers" :key="l.key"
:class="['tab-btn', { active: activeLayer === l.key }]"
@click="activeLayer = activeLayer === l.key ? null : l.key">
{{ l.name }}
</button>
</div>
<div v-if="current" class="layer-detail">
<div class="detail-name">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="detail-section">
<span class="section-label">核心参数：</span>
<code v-for="(p, i) in current.params" :key="i" class="param-tag">{{ p }}</code>
</div>
<div class="detail-section">
<span class="section-label">典型用途：</span>
<span class="usage-text">{{ current.usage }}</span>
</div>
<div class="detail-code">
<code>{{ current.code }}</code>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeLayer = ref('dense')
const layers = [
{
key: 'dense',
name: '全连接层',
desc: '每个神经元与上一层所有神经元相连。最基础的层类型，用于学习输入特征的组合。',
params: ['units（神经元数）', 'activation（激活函数）'],
usage: '分类、回归任务的输出层，以及简单特征提取',
code: 'Dense(128, activation="relu")'
},
{
key: 'conv',
name: '卷积层',
desc: '用滑动窗口（卷积核）扫描输入，提取局部特征。参数共享大幅减少参数量，是图像处理的核心。',
params: ['filters（卷积核数）', 'kernel_size（核大小）', 'stride（步长）'],
usage: '图像分类、目标检测、图像分割',
code: 'Conv2D(64, kernel_size=3, stride=1, padding=1)'
},
{
key: 'rnn',
name: '循环层',
desc: '具有"记忆"能力，能处理序列数据。每个时间步的输出会作为下一步的输入，形成循环。',
params: ['hidden_size（隐藏维度）', 'num_layers（层数）'],
usage: '文本生成、语音识别、时间序列预测',
code: 'LSTM(hidden_size=256, num_layers=2)'
},
{
key: 'attention',
name: '注意力层',
desc: '让模型学会"关注"输入中最重要的部分。Transformer 的核心，彻底改变了 NLP 领域。',
params: ['embed_dim（嵌入维度）', 'num_heads（注意力头数）'],
usage: 'GPT、BERT 等大语言模型，机器翻译',
code: 'MultiHeadAttention(embed_dim=512, num_heads=8)'
},
{
key: 'norm',
name: '归一化层',
desc: '将数据标准化到合理范围，加速训练收敛，缓解梯度消失/爆炸问题。',
params: ['num_features（特征数）'],
usage: '几乎所有深度网络中都会使用，通常跟在卷积或全连接层后面',
code: 'BatchNorm2d(64) / LayerNorm(512)'
},
{
key: 'dropout',
name: 'Dropout 层',
desc: '训练时随机"关闭"一部分神经元，防止网络过度依赖某些特征，是最常用的正则化手段。',
params: ['p（丢弃概率，通常 0.1~0.5）'],
usage: '防止过拟合，提升模型泛化能力',
code: 'Dropout(p=0.3)'
}
]
const current = computed(() => layers.find(l => l.key === activeLayer.value))
</script>
<style scoped>
.layers-demo {
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.layer-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab-btn {
padding: 0.35rem 0.7rem; border-radius: 6px; cursor: pointer;
font-size: 0.8rem; font-weight: 600; background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider); transition: all 0.2s;
color: var(--vp-c-text-2);
}
.tab-btn:hover { border-color: var(--vp-c-brand); }
.tab-btn.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); color: var(--vp-c-text-1); }
.layer-detail {
background: var(--vp-c-bg); border-radius: 8px; padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-name { font-weight: 700; font-size: 0.95rem; color: var(--vp-c-brand); margin-bottom: 0.3rem; }
.detail-desc { font-size: 0.82rem; color: var(--vp-c-text-2); margin-bottom: 0.6rem; line-height: 1.5; }
.detail-section { font-size: 0.8rem; margin-bottom: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.section-label { font-weight: 600; color: var(--vp-c-text-2); }
.param-tag {
background: rgba(var(--vp-c-brand-rgb), 0.08); padding: 0.15rem 0.4rem;
border-radius: 4px; font-size: 0.72rem;
}
.usage-text { color: var(--vp-c-text-2); }
.detail-code {
margin-top: 0.5rem; padding: 0.5rem 0.7rem; background: var(--vp-c-bg-soft);
border-radius: 6px; font-family: var(--vp-font-family-mono); font-size: 0.75rem;
color: var(--vp-c-brand);
}
</style>
docs/.vitepress/theme/components/appendix/neural-networks/NeuronDemo.vue
+202
View File
@@ -0,0 +1,202 @@
<!--
NeuronDemo.vue
神经元结构演示：展示单个神经元的工作原理
-->
<template>
<div class="neuron-demo">
<div class="header">
<div class="title">神经元工作原理</div>
<div class="subtitle">调整输入和权重，观察神经元的输出变化</div>
</div>
<div class="neuron-layout">
<div class="inputs-col">
<div class="col-label">输入 × 权重</div>
<div v-for="(inp, i) in inputs" :key="i" class="input-row">
<div class="input-pair">
<label>x{{ i + 1 }}</label>
<input v-model.number="inp.value" type="range" min="-1" max="1" step="0.1" />
<span class="val">{{ inp.value.toFixed(1) }}</span>
</div>
<span class="multiply">×</span>
<div class="input-pair">
<label>w{{ i + 1 }}</label>
<input v-model.number="inp.weight" type="range" min="-2" max="2" step="0.1" />
<span class="val">{{ inp.weight.toFixed(1) }}</span>
</div>
<span class="equals">=</span>
<span class="partial">{{ (inp.value * inp.weight).toFixed(2) }}</span>
</div>
</div>
<div class="output-col">
<div class="sum-box">
<div class="sum-label">加权求和 + 偏置({{ bias.toFixed(1) }})</div>
<div class="sum-value">{{ weightedSum.toFixed(2) }}</div>
</div>
<div class="arrow">↓</div>
<div class="activation-box">
<div class="act-label">激活函数: {{ activationName }}</div>
<div class="act-value">{{ activationOutput.toFixed(4) }}</div>
</div>
<div class="controls">
<div class="control-row">
<label>偏置 b</label>
<input v-model.number="bias" type="range" min="-2" max="2" step="0.1" />
<span class="val">{{ bias.toFixed(1) }}</span>
</div>
<div class="control-row">
<label>激活函数</label>
<select v-model="activation">
<option value="sigmoid">Sigmoid</option>
<option value="relu">ReLU</option>
<option value="tanh">Tanh</option>
</select>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const inputs = reactive([
{ value: 0.5, weight: 0.8 },
{ value: -0.3, weight: 1.2 },
{ value: 0.7, weight: -0.5 }
])
const bias = ref(0.1)
const activation = ref('sigmoid')
const activationName = computed(() => {
const names = { sigmoid: 'Sigmoid', relu: 'ReLU', tanh: 'Tanh' }
return names[activation.value]
})
const weightedSum = computed(() => {
return inputs.reduce((sum, inp) => sum + inp.value * inp.weight, 0) + bias.value
})
const activationOutput = computed(() => {
const z = weightedSum.value
switch (activation.value) {
case 'sigmoid': return 1 / (1 + Math.exp(-z))
case 'relu': return Math.max(0, z)
case 'tanh': return Math.tanh(z)
default: return z
}
})
</script>
<style scoped>
.neuron-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.neuron-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1rem;
}
@media (max-width: 640px) {
.neuron-layout { grid-template-columns: 1fr; }
}
.col-label {
font-weight: 600;
font-size: 0.8rem;
color: var(--vp-c-text-2);
margin-bottom: 0.5rem;
}
.input-row {
display: flex;
align-items: center;
gap: 0.3rem;
margin-bottom: 0.4rem;
font-size: 0.78rem;
}
.input-pair {
display: flex;
align-items: center;
gap: 0.2rem;
}
.input-pair label {
font-weight: 600;
font-size: 0.72rem;
color: var(--vp-c-text-3);
min-width: 18px;
}
.input-pair input[type="range"] { width: 60px; }
.val {
font-family: var(--vp-font-family-mono);
font-size: 0.72rem;
min-width: 28px;
text-align: right;
}
.multiply, .equals {
color: var(--vp-c-text-3);
font-weight: 600;
}
.partial {
font-family: var(--vp-font-family-mono);
font-weight: 600;
color: var(--vp-c-brand);
min-width: 40px;
text-align: right;
}
.output-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.sum-box, .activation-box {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 0.5rem 0.8rem;
text-align: center;
width: 100%;
}
.sum-label, .act-label {
font-size: 0.72rem;
color: var(--vp-c-text-3);
}
.sum-value, .act-value {
font-size: 1.1rem;
font-weight: 700;
font-family: var(--vp-font-family-mono);
color: var(--vp-c-brand);
}
.arrow { color: var(--vp-c-text-3); font-size: 1.2rem; }
.controls { width: 100%; margin-top: 0.5rem; }
.control-row {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
margin-bottom: 0.3rem;
}
.control-row label {
font-weight: 600;
color: var(--vp-c-text-2);
min-width: 55px;
font-size: 0.72rem;
}
.control-row select {
padding: 0.2rem 0.4rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
font-size: 0.78rem;
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
}
</style>
docs/.vitepress/theme/components/appendix/system-design-methodology/CapacityEstimationDemo.vue
+183
View File
@@ -0,0 +1,183 @@
<!--
CapacityEstimationDemo.vue
容量估算计算器：信封背面估算交互演示
-->
<template>
<div class="capacity-demo">
<div class="header">
<div class="title">信封背面估算器</div>
<div class="subtitle">输入基础数据，自动计算系统容量需求</div>
</div>
<div class="inputs">
<div class="input-group">
<label>日活用户（万）</label>
<input v-model.number="dau" type="number" min="1" max="100000" />
</div>
<div class="input-group">
<label>人均请求数/天</label>
<input v-model.number="reqPerUser" type="number" min="1" max="1000" />
</div>
<div class="input-group">
<label>单次响应大小（KB）</label>
<input v-model.number="responseSize" type="number" min="0.1" max="1000" />
</div>
<div class="input-group">
<label>峰值系数</label>
<input v-model.number="peakFactor" type="number" min="1" max="10" step="0.5" />
</div>
</div>
<div class="results">
<div class="result-card">
<div class="result-label">日请求量</div>
<div class="result-value">{{ formatNumber(dailyRequests) }}</div>
</div>
<div class="result-card">
<div class="result-label">平均 QPS</div>
<div class="result-value">{{ formatNumber(avgQps) }}</div>
</div>
<div class="result-card">
<div class="result-label">峰值 QPS</div>
<div class="result-value">{{ formatNumber(peakQps) }}</div>
</div>
<div class="result-card">
<div class="result-label">日带宽</div>
<div class="result-value">{{ formatBandwidth(dailyBandwidth) }}</div>
</div>
<div class="result-card">
<div class="result-label">峰值带宽</div>
<div class="result-value">{{ formatBandwidth(peakBandwidthPerSec) }}/s</div>
</div>
</div>
<div class="reference">
<div class="ref-title">常用估算参考值</div>
<div class="ref-grid">
<div class="ref-item" v-for="r in references" :key="r.label">
<span class="ref-label">{{ r.label }}</span>
<span class="ref-value">{{ r.value }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const dau = ref(100)
const reqPerUser = ref(20)
const responseSize = ref(5)
const peakFactor = ref(3)
const dailyRequests = computed(() => dau.value * 10000 * reqPerUser.value)
const avgQps = computed(() => Math.round(dailyRequests.value / 86400))
const peakQps = computed(() => Math.round(avgQps.value * peakFactor.value))
const dailyBandwidth = computed(() => dailyRequests.value * responseSize.value * 1024)
const peakBandwidthPerSec = computed(() => peakQps.value * responseSize.value * 1024)
const references = [
{ label: '1 天', value: '86,400 秒' },
{ label: '1 月', value: '≈ 250 万秒' },
{ label: 'QPS 1000', value: '≈ 1 台 8 核服务器' },
{ label: '1 亿/天', value: '≈ 1,200 QPS' },
{ label: 'MySQL 单机', value: '≈ 5,000 QPS' },
{ label: 'Redis 单机', value: '≈ 100,000 QPS' }
]
function formatNumber(n) {
if (n >= 1e8) return (n / 1e8).toFixed(1) + ' 亿'
if (n >= 1e4) return (n / 1e4).toFixed(1) + ' 万'
return n.toLocaleString()
}
function formatBandwidth(bytes) {
if (bytes >= 1e12) return (bytes / 1e12).toFixed(1) + ' TB'
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB'
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB'
if (bytes >= 1e3) return (bytes / 1e3).toFixed(1) + ' KB'
return bytes + ' B'
}
</script>
<style scoped>
.capacity-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.input-group label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--vp-c-text-2);
margin-bottom: 0.25rem;
}
.input-group input {
width: 100%;
padding: 0.4rem 0.5rem;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 0.85rem;
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
}
.results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.5rem;
margin-bottom: 1rem;
}
.result-card {
padding: 0.6rem;
border-radius: 8px;
text-align: center;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
}
.result-label {
font-size: 0.72rem;
color: var(--vp-c-text-3);
}
.result-value {
font-size: 0.95rem;
font-weight: 700;
color: var(--vp-c-brand);
}
.reference {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
.ref-title {
font-weight: 600;
font-size: 0.82rem;
margin-bottom: 0.5rem;
}
.ref-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.3rem;
}
.ref-item {
font-size: 0.75rem;
display: flex;
justify-content: space-between;
padding: 0.2rem 0;
}
.ref-label { color: var(--vp-c-text-2); }
.ref-value { font-weight: 600; font-family: var(--vp-font-family-mono); }
</style>
docs/.vitepress/theme/components/appendix/system-design-methodology/SystemDesignStepsDemo.vue
+199
View File
@@ -0,0 +1,199 @@
<!--
SystemDesignStepsDemo.vue
系统设计步骤交互演示：展示系统设计面试/实战的标准流程
-->
<template>
<div class="design-steps-demo">
<div class="header">
<div class="title">系统设计四步法</div>
<div class="subtitle">点击每个步骤查看详细内容</div>
</div>
<div class="steps">
<div
v-for="(step, i) in steps"
:key="step.key"
:class="['step-card', { active: activeStep === step.key }]"
@click="activeStep = step.key"
>
<div class="step-number">{{ i + 1 }}</div>
<div class="step-name">{{ step.name }}</div>
<div class="step-time">{{ step.time }}</div>
</div>
</div>
<div v-if="current" class="detail-panel">
<div class="detail-title">{{ current.name }}</div>
<div class="detail-desc">{{ current.desc }}</div>
<div class="checklist">
<div v-for="(item, i) in current.checklist" :key="i" class="check-item">
<span class="check-icon">✓</span>
<span>{{ item }}</span>
</div>
</div>
<div class="detail-example">
<span class="label">示例（设计短链服务）：</span>
<div class="example-text">{{ current.example }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const activeStep = ref('requirements')
const steps = [
{
key: 'requirements',
name: '需求澄清',
time: '~5 分钟',
desc: '不要急着画架构图。先搞清楚：系统要解决什么问题？用户规模多大？有哪些核心功能？有哪些非功能需求？',
checklist: [
'核心功能有哪些？（MVP 范围）',
'用户规模？DAU / QPS 预估',
'读写比例？读多写少还是写多读少？',
'数据量级？需要存多少数据？',
'可用性要求？几个 9？',
'延迟要求？P99 要多少毫秒？'
],
example: '短链服务：生成短链（写）+ 重定向（读），读写比约 100:1，日均 1 亿次重定向，短链永不过期。'
},
{
key: 'estimation',
name: '容量估算',
time: '~5 分钟',
desc: '用"信封背面估算"（Back-of-envelope estimation）快速计算系统需要的资源量级，为后续架构决策提供数据支撑。',
checklist: [
'QPS 估算：日请求量 / 86400',
'存储估算：单条数据大小 × 总量',
'带宽估算：QPS × 单次响应大小',
'缓存估算：热点数据量（通常 20% 数据承载 80% 请求）',
'峰值估算：平均 QPS × 峰值系数（通常 2-5 倍）'
],
example: '1 亿次/天 ≈ 1200 QPS，峰值 ≈ 3600 QPS。每条短链 100 字节，5 年 = 1.8 亿条 ≈ 18GB。缓存热点 20% ≈ 3.6GB，一台 Redis 足够。'
},
{
key: 'design',
name: '架构设计',
time: '~15 分钟',
desc: '画出核心组件和数据流。先画最简单的版本（单机），再根据需求逐步演进（加缓存、分库分表、CDN 等）。',
checklist: [
'API 设计：定义核心接口的输入输出',
'数据模型：设计核心表结构',
'核心组件：Web 服务、数据库、缓存、消息队列',
'数据流：请求从用户到数据库的完整路径',
'读写分离：读路径和写路径分开考虑'
],
example: '写路径：客户端 → API → 生成短码（Base62） → 写入 MySQL + Redis。读路径：客户端 → CDN → API → Redis 查询 → 302 重定向。'
},
{
key: 'deep-dive',
name: '深入优化',
time: '~10 分钟',
desc: '针对系统的瓶颈和关键问题进行深入讨论。这是展示技术深度的环节。',
checklist: [
'如何保证短码唯一性？（哈希冲突处理）',
'如何应对热点？（缓存、CDN）',
'如何水平扩展？（分库分表策略）',
'如何保证高可用？（主备、多可用区）',
'如何监控和告警？（关键指标）',
'安全考虑？（防刷、恶意链接检测）'
],
example: '短码生成：用分布式 ID 生成器（Snowflake）+ Base62 编码，避免哈希冲突。热点短链用多级缓存（本地缓存 + Redis + CDN）。'
}
]
const current = computed(() => steps.find(s => s.key === activeStep.value))
</script>
<style scoped>
.design-steps-demo {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.header { margin-bottom: 1rem; }
.title { font-weight: 700; font-size: 1.1rem; }
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
@media (max-width: 640px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
.step-card {
padding: 0.6rem;
border-radius: 8px;
cursor: pointer;
text-align: center;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
transition: all 0.2s;
}
.step-card:hover { border-color: var(--vp-c-brand); }
.step-card.active {
border-color: var(--vp-c-brand);
background: rgba(var(--vp-c-brand-rgb), 0.05);
}
.step-number {
font-size: 1.2rem;
font-weight: 800;
color: var(--vp-c-brand);
}
.step-name { font-weight: 600; font-size: 0.85rem; }
.step-time {
font-size: 0.72rem;
color: var(--vp-c-text-3);
}
.detail-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.detail-title {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.4rem;
}
.detail-desc {
font-size: 0.82rem;
color: var(--vp-c-text-2);
margin-bottom: 0.75rem;
}
.checklist {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 0.75rem;
}
.check-item {
font-size: 0.8rem;
display: flex;
gap: 0.4rem;
align-items: flex-start;
}
.check-icon {
color: var(--vp-c-brand);
font-weight: 700;
flex-shrink: 0;
}
.detail-example {
font-size: 0.82rem;
padding: 0.5rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
}
.example-text {
color: var(--vp-c-text-2);
margin-top: 0.25rem;
}
.label { font-weight: 600; color: var(--vp-c-text-2); }
</style>
docs/.vitepress/theme/index.js
+136 -44
View File
@@ -206,15 +206,15 @@ import LearningStrategyDemo from './components/appendix/computer-fundamentals/Le
import VibeCodingFlowDemo from './components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue'
import PowerOnDemo from './components/appendix/computer-fundamentals/PowerOnDemo.vue'
import BootProcessDemo from './components/appendix/computer-fundamentals/BootProcessDemo.vue'
import BiosUefiDemo from './components/appendix/computer-fundamentals/BiosUefiDemo.vue'
import BiosUefiInteractiveDemo from './components/appendix/computer-fundamentals/BiosUefiInteractiveDemo.vue'
import AppLaunchDemo from './components/appendix/computer-fundamentals/AppLaunchDemo.vue'
import DesktopDemo from './components/appendix/computer-fundamentals/DesktopDemo.vue'
import OSBootInteractiveDemo from './components/appendix/computer-fundamentals/OSBootInteractiveDemo.vue'
import BrowserArchitectureDemo from './components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue'
import URLRequestDemo from './components/appendix/computer-fundamentals/URLRequestDemo.vue'
import RenderingDemo from './components/appendix/computer-fundamentals/RenderingDemo.vue'
import FullProcessDemo from './components/appendix/computer-fundamentals/FullProcessDemo.vue'
// import BiosUefiDemo from './components/appendix/computer-fundamentals/BiosUefiDemo.vue'
// import BiosUefiInteractiveDemo from './components/appendix/computer-fundamentals/BiosUefiInteractiveDemo.vue'
// import AppLaunchDemo from './components/appendix/computer-fundamentals/AppLaunchDemo.vue'
// import DesktopDemo from './components/appendix/computer-fundamentals/DesktopDemo.vue'
// import OSBootInteractiveDemo from './components/appendix/computer-fundamentals/OSBootInteractiveDemo.vue'
// import BrowserArchitectureDemo from './components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue'
// import URLRequestDemo from './components/appendix/computer-fundamentals/URLRequestDemo.vue'
// import RenderingDemo from './components/appendix/computer-fundamentals/RenderingDemo.vue'
// import FullProcessDemo from './components/appendix/computer-fundamentals/FullProcessDemo.vue'
// Data Encoding Components
import GarbledTextDemo from './components/appendix/data-encoding/GarbledTextDemo.vue'
@@ -762,27 +762,73 @@ import IncidentCommandDemo from './components/appendix/incident-response/Inciden
import AlertEscalationDemo from './components/appendix/incident-response/AlertEscalationDemo.vue'
import PostmortemDemo from './components/appendix/incident-response/PostmortemDemo.vue'
// Async Task Queues Components
import AsyncTaskFlowDemo from './components/appendix/async-task-queues/AsyncTaskFlowDemo.vue'
import TaskWorkerDemo from './components/appendix/async-task-queues/TaskWorkerDemo.vue'
import TaskRetryDemo from './components/appendix/async-task-queues/TaskRetryDemo.vue'
import AsyncComparisonDemo from './components/appendix/async-task-queues/AsyncComparisonDemo.vue'
// // Async Task Queues Components
// import AsyncTaskFlowDemo from './components/appendix/async-task-queues/AsyncTaskFlowDemo.vue'
// import TaskWorkerDemo from './components/appendix/async-task-queues/TaskWorkerDemo.vue'
// import TaskRetryDemo from './components/appendix/async-task-queues/TaskRetryDemo.vue'
// import AsyncComparisonDemo from './components/appendix/async-task-queues/AsyncComparisonDemo.vue'
// File Storage Components
import FileStorageTypeDemo from './components/appendix/file-storage/FileStorageTypeDemo.vue'
import FileUploadFlowDemo from './components/appendix/file-storage/FileUploadFlowDemo.vue'
import CDNAccelerationDemo from './components/appendix/file-storage/CDNAccelerationDemo.vue'
// // File Storage Components
// import FileStorageTypeDemo from './components/appendix/file-storage/FileStorageTypeDemo.vue'
// import FileUploadFlowDemo from './components/appendix/file-storage/FileUploadFlowDemo.vue'
// import CDNAccelerationDemo from './components/appendix/file-storage/CDNAccelerationDemo.vue'
// Rate Limiting Components
import RateLimitAlgorithmDemo from './components/appendix/rate-limiting/RateLimitAlgorithmDemo.vue'
import BackpressureDemo from './components/appendix/rate-limiting/BackpressureDemo.vue'
// // Rate Limiting Components
// import RateLimitAlgorithmDemo from './components/appendix/rate-limiting/RateLimitAlgorithmDemo.vue'
// import BackpressureDemo from './components/appendix/rate-limiting/BackpressureDemo.vue'
// Search Engines Components Registration
import InvertedIndexDemo from './components/appendix/search-engines/InvertedIndexDemo.vue'
import SearchRelevanceDemo from './components/appendix/search-engines/SearchRelevanceDemo.vue'
// Monolith to Microservices Components
import ArchEvolutionDemo from './components/appendix/monolith-to-microservices/ArchEvolutionDemo.vue'
// High Availability Components
import AvailabilityCalculatorDemo from './components/appendix/high-availability/AvailabilityCalculatorDemo.vue'
import FailoverStrategyDemo from './components/appendix/high-availability/FailoverStrategyDemo.vue'
// Distributed Systems Components
import CAPTheoremDemo from './components/appendix/distributed-systems/CAPTheoremDemo.vue'
import ConsistencyModelsDemo from './components/appendix/distributed-systems/ConsistencyModelsDemo.vue'
import DistributedChallengesDemo from './components/appendix/distributed-systems/DistributedChallengesDemo.vue'
// System Design Methodology Components
import SystemDesignStepsDemo from './components/appendix/system-design-methodology/SystemDesignStepsDemo.vue'
import CapacityEstimationDemo from './components/appendix/system-design-methodology/CapacityEstimationDemo.vue'
// Data Visualization Components
import ChartTypeSelectorDemo from './components/appendix/data-visualization/ChartTypeSelectorDemo.vue'
import DashboardLayoutDemo from './components/appendix/data-visualization/DashboardLayoutDemo.vue'
// Data Governance Components
import DataQualityDemo from './components/appendix/data-governance/DataQualityDemo.vue'
import DataGovernanceFrameworkDemo from './components/appendix/data-governance/DataGovernanceFrameworkDemo.vue'
import DataLineageDemo from './components/appendix/data-governance/DataLineageDemo.vue'
// Linux Basics Components
import LinuxFileSystemDemo from './components/appendix/linux-basics/LinuxFileSystemDemo.vue'
import LinuxCommandDemo from './components/appendix/linux-basics/LinuxCommandDemo.vue'
import LinuxPermissionsDemo from './components/appendix/linux-basics/LinuxPermissionsDemo.vue'
// Docker Containers Components
import DockerArchitectureDemo from './components/appendix/docker-containers/DockerArchitectureDemo.vue'
import DockerLifecycleDemo from './components/appendix/docker-containers/DockerLifecycleDemo.vue'
// Kubernetes Components
import K8sArchitectureDemo from './components/appendix/kubernetes/K8sArchitectureDemo.vue'
import K8sWorkloadsDemo from './components/appendix/kubernetes/K8sWorkloadsDemo.vue'
// Neural Networks Components
import NeuronDemo from './components/appendix/neural-networks/NeuronDemo.vue'
import NetworkLayersDemo from './components/appendix/neural-networks/NetworkLayersDemo.vue'
import NetworkArchitectureDemo from './components/appendix/neural-networks/NetworkArchitectureDemo.vue'
// Project Architecture Components
import ArchitectureComparisonDemo from './components/appendix/project-architecture/ArchitectureComparisonDemo.vue'
import ProjectArchitectureComparisonDemo from './components/appendix/project-architecture/ArchitectureComparisonDemo.vue'
// Appendix Navigation Component
import AppendixFlowMap from './components/AppendixFlowMap.vue'
export default {
extends: DefaultTheme,
@@ -995,15 +1041,15 @@ export default {
app.component('VibeCodingFlowDemo', VibeCodingFlowDemo)
app.component('PowerOnDemo', PowerOnDemo)
app.component('BootProcessDemo', BootProcessDemo)
app.component('BiosUefiDemo', BiosUefiDemo)
app.component('BiosUefiInteractiveDemo', BiosUefiInteractiveDemo)
app.component('AppLaunchDemo', AppLaunchDemo)
app.component('DesktopDemo', DesktopDemo)
app.component('OSBootInteractiveDemo', OSBootInteractiveDemo)
app.component('BrowserArchitectureDemo', BrowserArchitectureDemo)
app.component('URLRequestDemo', URLRequestDemo)
app.component('RenderingDemo', RenderingDemo)
app.component('FullProcessDemo', FullProcessDemo)
// app.component('BiosUefiDemo', BiosUefiDemo)
// app.component('BiosUefiInteractiveDemo', BiosUefiInteractiveDemo)
// app.component('AppLaunchDemo', AppLaunchDemo)
// app.component('DesktopDemo', DesktopDemo)
// app.component('OSBootInteractiveDemo', OSBootInteractiveDemo)
// app.component('BrowserArchitectureDemo', BrowserArchitectureDemo)
// app.component('URLRequestDemo', URLRequestDemo)
// app.component('RenderingDemo', RenderingDemo)
// app.component('FullProcessDemo', FullProcessDemo)
// Data Encoding Components Registration
app.component('GarbledTextDemo', GarbledTextDemo)
@@ -1564,27 +1610,73 @@ export default {
app.component('AlertEscalationDemo', AlertEscalationDemo)
app.component('PostmortemDemo', PostmortemDemo)
// Async Task Queues Components Registration
app.component('AsyncTaskFlowDemo', AsyncTaskFlowDemo)
app.component('TaskWorkerDemo', TaskWorkerDemo)
app.component('TaskRetryDemo', TaskRetryDemo)
app.component('AsyncComparisonDemo', AsyncComparisonDemo)
// // Async Task Queues Components Registration
// app.component('AsyncTaskFlowDemo', AsyncTaskFlowDemo)
// app.component('TaskWorkerDemo', TaskWorkerDemo)
// app.component('TaskRetryDemo', TaskRetryDemo)
// app.component('AsyncComparisonDemo', AsyncComparisonDemo)
// File Storage Components Registration
app.component('FileStorageTypeDemo', FileStorageTypeDemo)
app.component('FileUploadFlowDemo', FileUploadFlowDemo)
app.component('CDNAccelerationDemo', CDNAccelerationDemo)
// // File Storage Components Registration
// app.component('FileStorageTypeDemo', FileStorageTypeDemo)
// app.component('FileUploadFlowDemo', FileUploadFlowDemo)
// app.component('CDNAccelerationDemo', CDNAccelerationDemo)
// Rate Limiting Components Registration
app.component('RateLimitAlgorithmDemo', RateLimitAlgorithmDemo)
app.component('BackpressureDemo', BackpressureDemo)
// // Rate Limiting Components Registration
// app.component('RateLimitAlgorithmDemo', RateLimitAlgorithmDemo)
// app.component('BackpressureDemo', BackpressureDemo)
// Search Engines Components Registration
app.component('InvertedIndexDemo', InvertedIndexDemo)
app.component('SearchRelevanceDemo', SearchRelevanceDemo)
// Data Visualization Components Registration
app.component('ChartTypeSelectorDemo', ChartTypeSelectorDemo)
app.component('DashboardLayoutDemo', DashboardLayoutDemo)
// Data Governance Components Registration
app.component('DataQualityDemo', DataQualityDemo)
app.component('DataGovernanceFrameworkDemo', DataGovernanceFrameworkDemo)
app.component('DataLineageDemo', DataLineageDemo)
// Distributed Systems Components Registration
app.component('CAPTheoremDemo', CAPTheoremDemo)
app.component('ConsistencyModelsDemo', ConsistencyModelsDemo)
app.component('DistributedChallengesDemo', DistributedChallengesDemo)
// High Availability Components Registration
app.component('AvailabilityCalculatorDemo', AvailabilityCalculatorDemo)
app.component('FailoverStrategyDemo', FailoverStrategyDemo)
// Monolith to Microservices Components Registration
app.component('ArchEvolutionDemo', ArchEvolutionDemo)
// System Design Methodology Components Registration
app.component('SystemDesignStepsDemo', SystemDesignStepsDemo)
app.component('CapacityEstimationDemo', CapacityEstimationDemo)
// Docker Containers Components Registration
app.component('DockerArchitectureDemo', DockerArchitectureDemo)
app.component('DockerLifecycleDemo', DockerLifecycleDemo)
// Linux Basics Components Registration
app.component('LinuxFileSystemDemo', LinuxFileSystemDemo)
app.component('LinuxCommandDemo', LinuxCommandDemo)
app.component('LinuxPermissionsDemo', LinuxPermissionsDemo)
// Kubernetes Components Registration
app.component('K8sArchitectureDemo', K8sArchitectureDemo)
app.component('K8sWorkloadsDemo', K8sWorkloadsDemo)
// Neural Networks Components Registration
app.component('NeuronDemo', NeuronDemo)
app.component('NetworkLayersDemo', NetworkLayersDemo)
app.component('NetworkArchitectureDemo', NetworkArchitectureDemo)
// Project Architecture Components Registration
app.component('ArchitectureComparisonDemo', ArchitectureComparisonDemo)
app.component('ProjectArchitectureComparisonDemo', ProjectArchitectureComparisonDemo)
// Appendix Navigation Component Registration
app.component('AppendixFlowMap', AppendixFlowMap)
},
setup() {
const route = useRoute()
docs/en-us/stage-0/index.md
-66
View File
@@ -1,66 +0,0 @@
# Novice & Product Prototype
Welcome to the **AI Product Manager** stage! This is the starting point of the Easy-Vibe tutorial, designed for learners with zero programming background.
## What You Will Learn
In this stage, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
### Getting Started
Suitable for product managers, operations staff, and non-technical backgrounds. Understand AI programming logic through games and build confidence:
<NavGrid>
<NavCard
href="/en-us/stage-0/0.1-learning-map/"
title="Learning Map"
description="Understand the entire learning path and clarify the goals and outcomes of each stage"
/>
<NavCard
href="/en-us/stage-0/0.2-ai-capabilities-through-games/"
title="AI Era: If You Can Speak, You Can Code"
description="Experience the charm of AI programming through games like Snake, breaking the fear of coding"
/>
</NavGrid>
### Product Manager
Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes:
<NavGrid>
<NavCard
href="/en-us/stage-1/1.1-introduction-to-ai-ide/"
title="Introduction to AI IDE Tools"
description="Learn about current mainstream AI programming tools and choose the best development partner for you"
/>
<NavCard
href="/en-us/stage-1/1.2-building-prototype/"
title="Building a Prototype"
description="Learn how to quickly transform product ideas into visual prototypes for low-cost trial and error"
/>
<NavCard
href="/en-us/stage-1/1.3-integrating-ai-capabilities/"
title="Integrating AI Capabilities"
description="Make your prototype intelligent by integrating simple AI APIs"
/>
<NavCard
href="/en-us/stage-1/1.4-complete-project-practice/"
title="Complete Project Practice"
description="Comprehensively apply what you've learned to complete a full product prototype development from 0 to 1"
/>
</NavGrid>
## Who Is This For
- Product managers and operations staff with zero programming background
- Entrepreneurs who want to quickly validate ideas
- Non-technical people interested in AI programming
- Designers looking to enhance their prototyping skills
## Learning Path
```
Getting Started → Product Manager Basics → AI Capability Integration → Complete Project Practice
```
Ready to start your AI programming journey? Click the left navigation to begin learning!
docs/en-us/appendix/index.md → docs/en/appendix/index.md
View File
docs/en-us/assets → docs/en/assets
View File
docs/en-us/index.md → docs/en/index.md
+2 -2
View File
@@ -17,10 +17,10 @@ hero:
actions:
- theme: brand
text: Start Learning
link: /en-us/stage-0/
link: /en/stage-0/
- theme: alt
text: Course Outline
link: /en-us/stage-0/
link: /en/stage-0/
---
<HomeFeatures />
docs/en-us/public/logo.png → docs/en/public/logo.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 374 KiB

docs/en-us/public/style.css → docs/en/public/style.css
View File
docs/en/stage-0/0.1-learning-map/index.md
+259
View File
@@ -0,0 +1,259 @@
---
title: 'From Idea to AI Product - Easy-Vibe Learning Roadmap'
description: 'Complete roadmap for learning AI programming: from zero basics to full-stack development. Master AI IDE tools like Vibe Coding, Claude Code, and Cursor, and learn product thinking, full-stack development, and AI capability integration.'
---
# From Idea to AI Product
In the past, building software had a high barrier: you had to understand programming and algorithms and have years of project experience.
Now it's different. As long as you have an idea, AI can help you write the code.
This is a huge change: **Programming languages are becoming natural languages**.
The emergence of Large Language Models (LLMs) has turned development from a "technical expert's exclusive" into a tool everyone can use. What used to be the hardest part—"how to write code"—is now replaced by the new hardest part: "**What do you want to do?**"
> **What is Vibe Coding?**
> Simply put, it's "programming by speaking." Vibe coding means you can rely solely on conversing with AI instead of writing code directly to complete a programming project.
Of course, letting AI write code is just the first step. To make a truly usable product, you will still encounter these questions:
- How to let AI write clean, maintainable code?
- How to piece together scattered code into a runnable application?
- How to make the application truly go live and be used by people?
- How to put AI capabilities like text generation and image recognition into your product?
These questions will find answers in this course.
Whether you are a student, teacher, doctor, worker, or any common person who knows nothing about technology—you don't need to learn programming for years first; in two weeks, you can make a runnable, demonstrable product prototype.
| Your Identity | This Course Can Help You |
|---------|-------------|
| Student | Assignments, competitions, entrepreneurship; do projects yourself without asking for help |
| Professional | Automate repetitive work, improve efficiency, and even develop side hustles |
| Product Manager / Designer | Ideas no longer stay on paper; quickly make Demos to show bosses/clients |
| Entrepreneur / SME Owner | Validate ideas at low cost; make an MVP without spending tens of thousands on outsourcing |
| Teacher / Educator | Make teaching tools, courseware, and automated questions to improve teaching efficiency |
| Doctor / Lawyer / Professional | Automate professional processes and build your own efficiency tools |
| Anyone | Use AI to solve specific problems in life/work, making the impossible possible |
In the AI era, execution and ideas are always more important than technology.
## Growth Path: From "Using AI" to "Making AI Products"
<div class="stage-intro">
<div class="stage-card">
<div class="stage-icon">🎮</div>
<h3>Getting Started</h3>
<p class="stage-role">Experience AI Programming</p>
<div class="stage-tags">
<span>Snake Mini-game</span>
<span>Zero Basics to Start</span>
<span>Vibe Coding First Experience</span>
<span>Generate in Minutes</span>
</div>
</div>
</div>
<div class="stage-grid">
<div class="stage-card">
<div class="stage-icon">🛠️</div>
<h3>Stage One</h3>
<p class="stage-role">Product Manager / Operations</p>
<div class="stage-tags">
<span>AI IDE (Cursor/Claude)</span>
<span>Requirement Deconstruction & Prototype</span>
<span>Integrate AI Capabilities</span>
<span>Full Demo Development</span>
</div>
</div>
<div class="stage-card">
<div class="stage-icon">💻</div>
<h3>Stage Two</h3>
<p class="stage-role">Junior-Mid Developer / Indie Dev</p>
<div class="stage-tags">
<span>Figma to Code</span>
<span>Supabase Database</span>
<span>Stripe Payment Integration</span>
<span>Dify Knowledge Base</span>
</div>
</div>
<div class="stage-card">
<div class="stage-icon">🚀</div>
<h3>Stage Three</h3>
<p class="stage-role">Senior Developer / Architect</p>
<div class="stage-tags">
<span>Web/Mini-program/Multi-platform</span>
<span>MCP Advanced Tools</span>
<span>RAG & LangGraph</span>
<span>Senior Engineer Thinking</span>
</div>
</div>
</div>
<style>
.stage-intro {
margin: 20px auto;
max-width: 400px;
}
.stage-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin: 16px 0;
}
.stage-card {
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 12px;
background-color: var(--vp-c-bg-soft);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.stage-card:hover {
transform: translateY(-2px);
background-color: var(--vp-c-bg-mute);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border-color: var(--vp-c-brand);
}
.stage-icon {
font-size: 2rem;
margin-bottom: 8px;
line-height: 1;
}
.stage-card h3 {
margin: 0 0 4px 0 !important;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
}
.stage-role {
margin: 0 0 8px 0 !important;
font-size: 0.8rem;
color: var(--vp-c-text-2);
font-weight: 500;
}
.stage-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.stage-tags span {
font-size: 0.7rem;
padding: 1px 6px;
border-radius: 3px;
background-color: var(--vp-c-bg-alt);
color: var(--vp-c-text-2);
border: 1px solid var(--vp-c-divider);
}
.stage-card:hover .stage-tags span {
background-color: var(--vp-c-bg);
border-color: var(--vp-c-brand-dimm);
color: var(--vp-c-brand-dark);
}
</style>
Through this complete learning path, you will gain:
- **Vibe Coding Development Ability:** Effortlessly use vibe coding thinking and AI coding tools to increase development efficiency several times. No longer need to memorize syntax, but learn how to guide AI to generate high-quality code.
- **Full-stack Development Skills:** From UI design to front-end implementation, from database design to API development, and from local development to cloud deployment, master the full technology stack of modern Web applications.
- **AI Capability Integration:** Learn to call various multimodal AI APIs and seamlessly integrate AI capabilities like text, images, and voice into your applications, building intelligent products through technologies like RAG.
- **Product Thinking and Operations Ability:** From user research to demand deconstruction, from MVP design to product iteration, and from payment integration to user management, form a complete product development and operation closed loop.
# What Can You Do After Learning?
## Stage One: Build Your First Product Prototype
This stage is suitable for students with zero programming foundation or those who only know a little but are not confident. You don't need to learn a lot of theoretical knowledge first, but follow the steps directly and learn how to use AI tools to write code in the process.
**After learning, you can**:
- Independently complete a web application using AI programming tools
- Turn product ideas into clickable, interactive prototypes
- Add AI functions to the prototype (e.g., text-to-image, intelligent dialogue)
- Know how to troubleshoot and solve problems when encountering errors
Simply put, you can make something "runnable and demonstrable to others."
We can first experience AI programming through mini-games, then learn how to use AI programming tools to help you write code and fix errors. Then start from simple pages and gradually make interactive multi-page applications, adding AI functions like text-to-image and intelligent dialogue. Finally, independently complete a full project so that your creativity can truly have the possibility of landing.
# Why Use Project-Based Training?
> **Real-world Challenges**
>
> The reason is simple: based on the state of most students now, directly entering the workplace might make it difficult to move an inch under the "social beatings" of real projects and bosses/clients. More common scenarios in the real world are:
> Your mentor / boss: We want to do xxx, the goal is to achieve yyy effect.
>
> Documentation? Ready-made frameworks? Detailed requirement specifications? Often they don't exist.
Many tasks in real work are essentially solving problems never seen before in a highly uncertain environment: requirements are vague, boundaries are changing, no one tells you the standard answer, and you need to look up information, do experiments, build prototypes, iterate continuously, and finally give a "runnable, usable, and launchable" solution.
What this course wants to do is give you a "simulated social beating" in advance in a relatively safe environment:
- Force you to practice deconstructing problems, designing solutions, and finding information yourself through seemingly difficult project tasks.
- Allow you to learn to read, understand, and transform a medium-to-large codebase through scaffolds and code that are not so "idiot-proof."
- Let you experience the complete process of a real product from 0 to 1 through the complete closed loop from idea to launch.
In the short term, this kind of training is indeed torturous; but in the long term, it will greatly improve your competitiveness in job searching and career development: you will be more able to handle things, more able to find breakthroughs in uncertain environments, and more capable of turning AI into real landing products instead of staying in the "playing with demos" stage.
# The Art of Questioning: An Essential Skill in the AI Era
In the AI era, questioning is also a "basic skill." For the same code and the same error, **how you ask almost determines what kind of answer AI can give**: whether it's talking broadly or giving implementable modifications step by step.
**Develop Good Habits**: Treat "asking AI" as part of the daily development flow: ask immediately when you don't understand or get stuck.
## Why is this an Essential Skill?
- **Real life rarely has complete documentation**: Most of the time you face unclear requirements, half-finished code, and scattered error messages.
- **AI is your tutor + colleague by your side**: Those who can ask questions can turn it into "high-quality pair programming."
- **Ability upper limit is determined by communication**: The more you can provide key information and the more you can constrain the output format, the more usable the answer will be.
**Common Misconception**: Asking just "Why error?" usually only gets a bunch of guesses. Only by filling in the context will you get an executable solution.
## How to "Feed" Information to AI: Screenshots vs Copy-Paste
Both methods are fine, but for different purposes:
| Method | Applicable Scenarios | Key Requirements |
| ------------ | ----------------------------------------- | ----------------------------------------- |
| **Copy-Paste** | Error stacks, logs, code, configuration, API returns | Be as complete as possible; don't just take one line of keywords |
| **Screenshot** | UI layout issues, interaction anomalies, can't find buttons in tools | Screenshot full screen + highlight key areas, preferably with a line of text description |
::: danger ⚠️ Important Prerequisite
**Not all AI support image input.** Communication via screenshots requires AI to have multimodal capabilities (i.e., the ability to understand and analyze images). Current AIs that support image input include: Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), and some Chinese models like Tongyi Qianwen, Wenxin Yiyan, etc.
**If the AI you are using does not support image input**, screenshots will not be recognized. In this case, please switch to copy-pasting text for communication.
:::
## Prompt Tips to Make AI "Explain Well"
If you don't just want the answer, but want to "learn" the answer. Using instructions like the following can significantly improve the quality of explanation:
> **Learning Question Examples**
>
> - "Please explain this concept clearly in 5 sentences first, and then ask me a few questions to verify if I understood it correctly."
> - "Please explain this error message in detail; I don't understand why the error occurred."
# I've been persistent for a long time but still can't handle it, I want to give up
Maybe your method of persistence is wrong. Don't hold on alone in the dark; you can come and talk to the authors and teaching assistants: frankly state the methods you have tried, the specific stuck points you encountered, and your current state of mind. Many times, just a slight adjustment in direction or adding a key knowledge point can keep you moving forward.
# I feel some designs of the tutorial are unreasonable
You are welcome to contact the author at any time, submit an issue, or give feedback directly in the group/class. We very much hope to work with you to polish this set of tutorials to be better and better: wherever it's unclear, wherever the experience is broad, or wherever it makes you waste effort, you can point it out frankly. The more real and specific the feedback, the more it can help newcomers avoid pitfalls.
# Reference
- [Nanjing University Computer Science and Technology Department Computer System Fundamentals Course Experiment](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
docs/en/stage-0/0.2-ai-capabilities-through-games/index.md
+743
View File
@@ -0,0 +1,743 @@
# Primary 1: AI Era, If You Can Speak, You Can Code
This is a **project-based learning** tutorial. We encourage you to follow the steps one by one and try to reproduce the results.
Don't worry about making mistakes or modifying the content. We always believe you can do it. Please always remember:
<div style="text-align: center;">
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
<span style="font-size: 15px; font-weight: 500; color: #666;">Completion is more important than perfection 🐣</span>
</div>
</div>
<script setup>
const duration = 'Approx. <strong>4 hours</strong>, can be completed in multiple sessions'
</script>
## Chapter Outline
<ChapterIntroduction :duration="duration" :tags="['Conversational AI Programming', 'AI-Native Mini-Games', 'Snake Game Practice']" coreOutput="AI-Native Snake + Custom Mini-Game" expectedOutput="1 playable AI-native Snake game + (Optional) 1 custom AI-native mini-game or Demo of your choice">
If you <strong>don't know how to program at all</strong>, or only know the basics, this chapter is for you. We will start from the very beginning: using <strong>conversations</strong> to have AI write code for you, without needing to memorize syntax or set up environments. It will run right in your browser.
You will personally create <strong>your first running program</strong>—a Snake game that can "eat words, write poems, and draw". Through this practical exercise, you will experience what AI programming is really like: AI is not replacing your thinking, but rather, you speak your ideas, and AI helps you implement them.
All creation starts from 0 to 1. We are glad to pass each bit of confidence and professionalism to you. For you, <strong>execution is all you need</strong>.
</ChapterIntroduction>
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="0" :items="[
{ title: 'Dilemmas & Opportunities', description: 'New possibilities for coding' },
{ title: 'Capability Exploration', description: '60-second speed development' },
{ title: 'Native Practice', description: 'Build an AI-native Snake' },
{ title: 'Extended Creation', description: 'Create other games' }
]" />
</ClientOnly>
</div>
## 1. Dilemmas and Opportunities for Ordinary People
Many people have a bunch of product ideas in their heads: a small tool to help manage finances, a webpage to record a child's growth, or even a mini-game. But the thought of having to write code or find a programmer often discourages them directly.
After the emergence of AI, for the first time, ordinary people have a completely new possibility: you don't need to know how to write code, you just need to learn how to clearly tell AI what you want. [Data from GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) shows that over 15 million developers are using AI-assisted programming, with an average of 46% of code being AI-generated! In Java projects, this proportion can reach 61%.
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
<template #header>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 20px;">🚀</span>
<span style="font-weight: bold; font-size: 16px;">Leaps in Efficiency and Adoption</span>
</div>
</template>
<el-row :gutter="20" style="margin-bottom: 24px;">
<el-col :span="6" :xs="12">
<div style="text-align: center; padding: 10px;">
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Speed Increase</div>
</div>
</el-col>
<el-col :span="6" :xs="12">
<div style="text-align: center; padding: 10px;">
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">Days</span></div>
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Task Time (from 9.6)</div>
</div>
</el-col>
<el-col :span="6" :xs="12">
<div style="text-align: center; padding: 10px;">
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Day-1 Install Rate</div>
</div>
</el-col>
<el-col :span="6" :xs="12">
<div style="text-align: center; padding: 10px;">
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Suggestion Adoption</div>
</div>
</el-col>
</el-row>
<div style="line-height: 1.8; color: #606266;">
What is truly exciting is the leap in efficiency: developers' task completion speed increased by <b>55%</b>. Code that originally took 9.6 days to deliver can now be done in just <b>2.4 days</b>. This visible improvement shows that AI is no longer just an "optional feature" but is becoming an indispensable assistant in the development workflow. The adoption rate data confirms this: on the day they granted access, <b>81%</b> of developers installed and started using it immediately; among them, <b>96%</b> started adopting the AI's code suggestions that same day. In other words, developers almost instantly integrated AI into their daily coding routines.
</div>
</el-card>
For ordinary people, this trend is even more significant: if professional programmers are relying heavily on AI to write code, **why can't those of us who don't know how to program communicate directly with AI to realize our ideas**?
The goal of this course is to help you practice a new skill: building apps through natural language conversations. We will teach you how to communicate with AI using computer language and how to let AI turn the ideas in your head into real, usable products.
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="1" :items="[
{ title: 'Dilemmas & Opportunities', description: 'New possibilities' },
{ title: 'Capability Exploration', description: '60-second speed' },
{ title: 'Native Practice', description: 'Build AI-native Snake' },
{ title: 'Extended Creation', description: 'Create other games' }
]" />
</ClientOnly>
</div>
## 2. To What Extent Can AI Help You?
In this section, we only discuss one question: if you completely don't know how to write code, to what extent can today's AI help you?
Roughly speaking, you can understand current LLM capabilities as: competent in developing **simple internal tools**, **data visualization dashboards**, and some **lightweight mini-games**. These are generally sufficient for making **tools for personal use** or validating requirements from a **product manager's perspective**. But to generate a **commercially mature product** with one click, it still typically requires manual, continuous polishing of **process design** and **details**.
Next, let's take Snake as an example and see exactly what AI programming can achieve.
### 2.1 Build a Snake Game in 60 Seconds
First, please open the experimental site used in the course, [z.ai](https://chat.z.ai/). `z.ai` is an AI platform developed by Zhipu AI (one of China's leading LLM companies), powered by their proprietary GLM models. This platform includes various features, such as slideshow generation, poster design, and full-stack development. In this tutorial, we will focus on its full-stack development module.
::: details 💡 What is the "programming right on the web" paradigm?
In the past, developing a web app required:
- Installing programming environments (Node.js, Python, etc.)
- Configuring code editors
- Learning HTML/CSS/JavaScript
- Dealing with dependencies and errors
Now, with AI coding platforms, you only need to:
- Open your browser and visit the site
- Describe your desired features in natural language
- Have AI instantly generate the code and let you preview the result live
This "conversation as programming" paradigm changes coding from "writing instructions" to "describing requirements". You don't need to care about low-level technical details; just clearly state what you want. This is the new programming paradigm of the AI era—**Vibe Coding**.
:::
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
Input our simple requirement and click the **Full-stack Development** button. You can watch the webpage being built in real time. Usually, it takes just the time to brew a coffee!
```
Help me create a Snake game:
1. Control snake movement with arrow keys
2. When it eats food, it gets longer and the score increases
3. Hitting walls or itself results in Game Over
4. Include Start and Restart buttons
5. The UI should be clean and elegant
```
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
Once generated, you will see a browsable webpage UI on the right. Scroll around or click the 🧭 button at the top to view it in full screen.
> The buttons at the top from left to right are: Arrow button expands chat history, Pencil button to start a new chat, Refresh icon to rebuild the page, Compass icon to toggle fullscreen, Download button to download the project, <> button to view code, and Publish button to publish it.
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
If you'd like to check the webpage's source code, click the code icon in the top right to view the entire codebase.
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image7.png)
::: tip 🌐 Explore More AI Programming Tools
Besides z.ai, we also recommend trying out these excellent AI programming platforms:
| Tool | Link | Features |
|------|------|----------|
| **Google AI Studio** (Recommended)| [aistudio.google.com/apps](https://aistudio.google.com/apps) | Official tool from Google, powered by Gemini, great for rapid prototyping |
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Deeply integrated with design tools, ideal for interactive prototypes |
| **Coze** | [coze.com](https://www.coze.cn) | AI bot platform by ByteDance, zero-code visual building |
| **v0.dev** | [v0.dev](https://v0.dev) | AI generation for React components from Vercel |
| **Bolt.new** | [bolt.new](https://bolt.new) | AI full-stack development capable of generating deployed apps |
| **Lovable** | [lovable.dev](https://lovable.dev) | High-quality React app generation |
| **Replit Agent**| [replit.com](https://replit.com) | Online IDE integrated with AI |
For more comparisons, view the appendix: [Comparison of 7 AI Programming Tools](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
:::
### 2.2 What Conversational Programming Can and Cannot Do
This section focuses on a specific question: When relying exclusively on conversational AI and writing no code at all, how far can you push a project?
In terms of experience, a fairly consistent conclusion is: It can help you complete a "small but complete" thing, but determining "how much is enough" still requires your personal decision on every detailed step.
#### Excels at "Small and Clear" Apps
From the Snake game example, you already saw a typical pattern:
As long as you can clearly describe the UI and interaction, AI can often piece together a fully functional, clickable webpage in just a few rounds of conversations.
Such tasks often share a few characteristics:
- Clear scope: one page, a simple internal tool, a small game mechanic.
- Visible results: you immediately see if it works as expected.
- Direct debugging: you can point out errors and ask for corrections easily.
Within these boundaries, you can view the AI as a highly capable "junior assistant".
**AI's success rate in handling small-scale tasks:**
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
#### Large Projects Require a "Process Perspective"
Once it exceeds the small and clear scope, relying purely on conversational requests to build complex systems end-to-end will quickly hit ceilings. Large projects deal with backend databases, third-party services, authentication, permissions, edge cases, state management, etc.
In these situations, the logical approach is to define a clear process flowchart and break it into segments to be handled individually.
#### The Difference Between Generating and Validating
Just because AI wrote it doesn't mean it's ready for a commercial launch! Always validate AI-generated code, especially in secure systems.
::: warning ⚠️ Usage Guidelines
- **Prototypes/Tools/Demos**: Highly suitable for early stage builds iterations.
- **Large consumer-facing products**: Usually needs developers for architecture.
- **High-security systems**: Not suitable to deploy immediately. Needs stringent checks.
:::
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="2" :items="[
{ title: 'Dilemmas', description: 'New possibilities' },
{ title: 'Basic Ability', description: '60-second speed' },
{ title: 'Native Practice', description: 'Build AI-native Snake' },
{ title: 'Extended', description: 'Create other games' }
]" />
</ClientOnly>
</div>
## 3. Hands-on: Your First AI Native Application
Let's do some hands-on work. We'll add some native AI integration elements into our game.
### 3.1 AI-Native Snake
You can simply provide these prompts:
> **💡 Example Prompt:** Build me a Snake game.
>
> ![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image12.png)
> **💡 Example Prompt:** Build me a Snake game that supports:
> 1. Eating different words and placing them in a collection box.
>
> ![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image13.png)
> **💡 Example Prompt:** Build a Snake game that supports:
> 1. I can eat distinct words, collected in a box.
> 2. When eating 8 words, the LLM generates a poem using them.
> 3. An image generation API is called right after the poem is composed.
>
> ![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image14.png)
If you face any issues, just screenshot the error or tell the bot what's wrong and it will iterate the changes.
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image15.png)
### 3.2 Add New Features to the Game
After completing the basic functionality, we can try adding some new twists to our program! If you find the process of the snake eating words or characters a bit boring, you can have the snake eat words of different colors and change the snake's color accordingly.
You can also add special effects to the "eating" process, or introduce magic words that trigger special effects—like increasing the snake's speed or size. Another idea is to have the model generate a poem and an image every time the snake eats a word, instead of waiting until it eats eight.
If these feel challenging, you can ask the language model directly for help! It can provide creative suggestions to make your game more fun. Give it a try!
```
1. "Word Unlocks World" Mechanic
Every time the snake eats a word, the LLM performs a poetic association on that word (e.g., "tree" → "forest", "shade"), and the image model instantly generates a small artwork for that word. These images gradually piece together into a unique, player-created panorama, so players are "painting and writing poetry" with every playthrough.
2. "Poetry Puzzle" Gameplay
Each word the snake eats triggers the LLM to generate a short verse, and the image model generates an illustration. These verses and images combine like puzzle pieces, forming an AI-collaborative poem and painting at the end of the round.
3. "Magic Words" & "Story Branches"
Special "magic words" (e.g., "wind", "night", "dream") not only trigger the LLM to generate poetry but also change the mood or theme of the scene—transforming the generated image style to nighttime, stormy, or dreamlike atmospheres.
Branching story: The LLM gives a theme or riddle at the start (e.g., "autumn memories"). The player's word choices directly influence the story and poetry evolution, with the image model updating backgrounds and visuals in real time.
4. "Real-time Interactive Generation"
After each word, the LLM generates a line of dialogue or description; NPCs in the game can "speak" to the player, or the environment can change accordingly.
The snake's appearance or obstacles in the game can visually change based on the words eaten, thanks to the image model.
5. "Create & Share"
Players can save and share their AI-created poems and images at the end of a session, showing off their unique "AI collaboration."
Leaderboards for "Most Beautiful Poem + Art", "Most Creative Word Combination", etc., encourage replaying and creativity.
6. "Sentence Snake" Challenge
Reverse mode: The LLM gives a line of poetry or a riddle, and the player must guide the snake to eat words in order to reconstruct the sentence. Eating the wrong word triggers funny or artistic consequences via the image generation model.
7. "Themed Levels" & "Style Selection"
At the start of the game, the player chooses a theme (e.g., "fairy tale", "sci-fi", "Tang poetry"), and both the LLM and image model adjust word selection, poetry style, and visuals to match, making each run feel fresh.
8. "Live Co-creation"
When a special word is eaten, the LLM can prompt the player to input a phrase or choose a style, then AI generates corresponding verses and illustrations, making it a true human-AI co-creation.
9. "AI Easter Eggs & Achievements"
Certain word combinations are recognized by the LLM as special themes or inside jokes (e.g., "moon", "osmanthus", "riverbank"), triggering rare verses and illustrations that reward exploration.
10. "A Growing Story"
As the snake grows, the LLM generates a continuous story-poem, and the image model creates a seamless scroll or panorama, so the player is simultaneously "writing, painting, and playing."
```
Additionally, we can also ask the LLM to generate project-level prompts for you directly. In the previous section, we only wrote the Snake game prompt ourselves. Now let's try having the LLM generate a prompt with an overall framework and implementation path (you can generate it directly with z.ai).
If you want to learn how to write better prompts, check out the [Prompt Engineering Appendix](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
> I want AI to generate a web-based Snake game and need a more complete prompt to make the result more impressive and fun. Please generate the corresponding prompt. The current goal is: generate a Snake game that implements the function of eating different words to generate poetry, and should include an image generation module.
z.ai's response will look like this:
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image56.png)
We can use this prompt to regenerate the project in full-stack development mode:
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image57.png)
![](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/image58.png)
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="3" :items="[
{ title: 'Dilemmas', description: 'New possibilities' },
{ title: 'Basic Ability', description: '60-second speed' },
{ title: 'Native Practice', description: 'Build AI-native Snake' },
{ title: 'Extended', description: 'Create other games' }
]" />
</ClientOnly>
</div>
### 3.3 Try Making Other Mini-Games
Beyond Snake, we can let our imagination run wild.
Create anything we want to create, and even try to mess everything up! Then start over!
```
1. AI Art Gallery Platform
Description: An online gallery showcasing AI-generated artworks where users can upload, share, and comment on AI art.
Features: User account system, artwork upload and display, rating system, category browsing, AI generation tool integration.
Tech highlights: React/Vue frontend, Node.js backend, MongoDB database, AI API integration.
2. Retro Game Archive
Description: A website paying tribute to classic games, featuring game history, gameplay guides, and playable retro games online.
Features: Game database, timeline display, online emulator, user reviews, game collection feature.
Tech highlights: Responsive design, WebGL/Canvas game implementation, RESTful API, user authentication.
3. Sustainable Living Tracker
Description: A website helping users track and reduce their carbon footprint through eco-tips and community challenges.
Features: Personal carbon footprint calculator, goal setting, progress tracking, community challenges, eco knowledge base.
Tech highlights: Data visualization, mobile optimization, social features, push notifications.
4. Virtual Kitchen Assistant
Description: An AI-based cooking guidance platform providing personalized recipe recommendations and step-by-step cooking instructions.
Features: Recipe database, ingredient recognition, personalized recommendations, cooking timer, nutrition analysis.
Tech highlights: Image recognition API, ML recommendation system, voice control, real-time video guidance.
5. Underground Music Discovery Platform
Description: A music streaming platform focused on indie and emerging artists, offering a unique discovery experience.
Features: Music streaming, artist profiles, personalized recommendations, playlist creation, community reviews.
Tech highlights: Audio streaming, recommendation algorithms, social features, music visualization.
6. Minimalist Task Management System
Description: A task management tool with zen aesthetics, focused on simple and efficient task organization.
Features: Task creation and categorization, priority setting, progress tracking, team collaboration, data analytics.
Tech highlights: Minimalist UI design, drag-and-drop, real-time sync, cross-platform compatibility.
7. Sci-Fi Writing Workshop
Description: A platform providing creative tools and inspiration for sci-fi writers, including world-building aids and character development tools.
Features: Story structure tools, character profiles, world-building templates, writing statistics, community feedback.
Tech highlights: Rich text editor, data visualization, collaborative editing, AI-assisted creation.
8. Personal Knowledge Graph
Description: A tool helping users build personal knowledge networks, visualizing and connecting various ideas and information.
Features: Node creation and connection, tagging system, search functionality, import/export tools, visual charts.
Tech highlights: Graph database, data visualization algorithms, Markdown support, cross-device sync.
9. Virtual Botanical Garden
Description: An interactive plant encyclopedia where users can explore the plant world and create virtual gardens.
Features: Plant database, 3D plant models, growth simulation, gardening guides, community showcase.
Tech highlights: 3D rendering, seasonal change simulation, AR integration, plant recognition API.
10. Programming Challenge Arena
Description: An online competition platform for programmers with coding challenges of various difficulty levels.
Features: Challenge problems, code editor, auto-evaluation, leaderboards, learning paths.
Tech highlights: Code sandbox environment, real-time evaluation system, algorithm visualization, social learning features.
```
And... if you enjoy playing games, let's try creating games together!
```
1. 3D Open World RPG
Description: A fantasy RPG with a vast open world, quests, and character progression.
Features: Day-night cycle, dynamic weather, skill trees, multiplayer co-op, crafting system.
Tech highlights: Three.js or Babylon.js for 3D rendering, server-side game logic, character customization, save system.
2. First-Person Shooter (FPS) Arena
Description: A fast-paced multiplayer FPS with various game modes and maps.
Features: Team deathmatch, capture the flag, weapon customization, ranked matches.
Tech highlights: WebGL/Three.js for 3D graphics, multiplayer netcode, hit detection, voice chat.
3. AI Chess and Multiplayer
Description: A full-featured chess platform with AI opponents and online matches.
Features: AI difficulty levels, endgame challenges, tournament mode, replay analysis.
Tech highlights: Chess logic library, WebSocket for real-time matches, ELO ranking system, anti-cheat.
4. Mahjong Online Multiplayer
Description: A traditional Mahjong game with online multiplayer and scoring.
Features: Multiple rule sets, private rooms, ranking system, replay feature.
Tech highlights: Tile matching logic, real-time multiplayer, lobby system, score tracking.
5. Turn-Based Strategy Game
Description: A tactical strategy game with grid-based combat and unit management.
Features: Campaign mode, skirmish, unit upgrades, fog of war, multiplayer battles.
Tech highlights: Grid movement system, AI decision-making, turn synchronization, save/load system.
6. Time Trial Racing Game
Description: A 3D racing game focused on time trials and track records.
Features: Multiple tracks, car customization, ghost replays, leaderboards.
Tech highlights: 3D car physics, track editor, replay system, online leaderboards.
7. Card Battle Game (Deck Building)
Description: A strategic card game where players build decks and battle opponents.
Features: Card collection, deck building, ranked matches, seasonal events.
Tech highlights: Card game logic, matchmaking system, AI opponents, card animations.
8. Battle Royale (Top-Down 2D)
Description: A top-down 2D battle royale with shrinking play zones and loot mechanics.
Features: Solo and squad modes, weapon variety, in-match events, leaderboards.
Tech highlights: Real-time multiplayer, zone shrinking logic, loot generation system, matchmaking.
9. Horror Survival Game (First-Person)
Description: A first-person horror game with resource management and escape mechanics.
Features: Atmospheric environments, puzzles, enemy AI, multiple endings.
Tech highlights: Dynamic lighting, sound design, enemy pathfinding, save system.
10. Music Rhythm Game (3D)
Description: A 3D rhythm game where players hit notes to the beat of the music.
Features: Multiple difficulty levels, track editor, custom song support, leaderboards.
Tech highlights: Audio analysis, beat synchronization, 3D note tracks, input timing detection.
```
## 📚 Assignment
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
<template #header>
<div style="font-weight: bold; font-size: 16px;">🎯 Chapter Assignment: Build Your First AI-Native Mini-Games</div>
</template>
<p>
In this section, you've followed the steps to experience the complete process from "conversational Snake generation" to "understanding AI-native game design thinking." The following assignments will help you turn this understanding into real skills.
</p>
<ol>
<li>
<strong>Fully Reproduce the AI-Native Snake Game</strong>
<ul>
<li>At minimum, implement: the snake can move, eating "food" changes its length and score, and hitting walls or itself ends the game.</li>
<li>During reproduction, practice sending the error description + error message + key code snippets all at once to the AI, asking it to fix things in "beginner mode."</li>
</ul>
</li>
<li>
<strong>(Optional) Create 1 Original AI-Native Mini-Game or Demo</strong>
<ul>
<li>It can be any lightweight gameplay involving text, images, music, rhythm, etc., such as "eat words to write poems," "rhythm clicking," "generative runner," etc.</li>
<li>The focus isn't on flashy graphics, but on being able to clearly articulate: what specifically did AI help with here, and what "hard-to-do-manually or tedious" part did it solve.</li>
</ul>
</li>
</ol>
<p>
That's the complete tutorial! You may need about <strong>4 hours</strong> to finish all the content and build your own Snake game. Don't rush—explore, experiment, and enjoy the process. If you encounter concepts you don't quite understand along the way, we recommend checking the relevant sections in the appendix below.
</p>
</el-card>
## Appendix
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
<div style="font-weight: bold; margin-bottom: 8px;">Appendix Navigation</div>
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
Here we've compiled some foundational concepts related to this chapter: if you encounter questions like "what is frontend?" or "what exactly does Vibe Coding mean?" during your learning, you can always come back here to look them up.
</div>
<el-row :gutter="16">
<el-col :span="12">
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Appendix 1: Do We Need Frontend Knowledge?</b></a><br/>
<span style="font-size: 12px; color: #909399">Understand where frontend fits in the overall application, and know which parts are "visible."</span>
</el-col>
<el-col :span="12">
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Appendix 2: What Exactly is Vibe Coding</b></a><br/>
<span style="font-size: 12px; color: #909399">Understand the core idea of "conversational development" and how to collaborate with AI.</span>
</el-col>
</el-row>
<el-row :gutter="16" style="margin-top: 10px;">
<el-col :span="12">
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Appendix 3: Model Context</b></a><br/>
<span style="font-size: 12px; color: #909399">Understand commonly heard but easily confused concepts like "context length."</span>
</el-col>
<el-col :span="12">
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Appendix 4: Instruction Following</b></a><br/>
<span style="font-size: 12px; color: #909399">Learn why models sometimes "don't understand" and how to write clearer instructions.</span>
</el-col>
</el-row>
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
Tip: You can press Ctrl/⌘+F to search for keywords, or copy confusing paragraphs to AI and ask it to explain again in a way "a complete beginner can understand."
</div>
</el-card>
## <span id="appendix-1">[Appendix 1: Do We Need Frontend Knowledge?](#appendix-nav)</span>
::: tip 💡 One-line Summary
You don't need to write code, but understanding the basic concepts helps you describe requirements to AI more effectively.
:::
<el-row :gutter="16" style="margin: 20px 0;">
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
<template #header>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 20px;">👁️</span>
<span style="font-weight: bold;">Frontend</span>
<el-tag type="success" size="small">Visible</el-tag>
</div>
</template>
<div style="color: #606266; line-height: 1.8;">
Everything users can <strong>see and click</strong>
<ul style="margin: 12px 0; padding-left: 20px;">
<li>Page titles, text, images</li>
<li>Buttons, input fields, dropdown menus</li>
<li>Game interfaces, animation effects</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
<template #header>
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 20px;">⚙️</span>
<span style="font-weight: bold;">Backend</span>
<el-tag type="info" size="small">Invisible</el-tag>
</div>
</template>
<div style="color: #606266; line-height: 1.8;">
Data processing running on the server
<ul style="margin: 12px 0; padding-left: 20px;">
<li>User score storage</li>
<li>Login account verification</li>
<li>Level content distribution</li>
</ul>
</div>
</el-card>
</el-col>
</el-row>
### The Frontend Trio
Browsers use three types of "code" to build pages:
<el-tabs type="border-card" style="margin: 20px 0;">
<el-tab-pane label="🏗️ HTML - Skeleton">
<div style="padding: 10px;">
<p><strong>Purpose:</strong> Defines <strong>what elements</strong> are on the page</p>
<p><strong>Analogy:</strong> The structural blueprint of a house (where walls, doors, and windows go)</p>
<el-card style="background: #f5f7fa; margin-top: 12px;">
<pre style="margin: 0;"><code>&lt;button&gt;Click me&lt;/button&gt;
&lt;h1&gt;Title&lt;/h1&gt;
&lt;img src="photo.png"&gt;</code></pre>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="🎨 CSS - Style">
<div style="padding: 10px;">
<p><strong>Purpose:</strong> Controls <strong>how elements look</strong></p>
<p><strong>Analogy:</strong> The interior decoration of a house (colors, materials, layout)</p>
<el-card style="background: #f5f7fa; margin-top: 12px;">
<pre style="margin: 0;"><code>button {
background: blue;
color: white;
border-radius: 8px;
}</code></pre>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="⚡ JavaScript - Behavior">
<div style="padding: 10px;">
<p><strong>Purpose:</strong> Makes the page <strong>interactive</strong></p>
<p><strong>Analogy:</strong> The electrical switches of a house (responses after clicking)</p>
<el-card style="background: #f5f7fa; margin-top: 12px;">
<pre style="margin: 0;"><code>button.onclick = () => {
alert('You clicked me!')
}</code></pre>
</el-card>
</div>
</el-tab-pane>
</el-tabs>
### How Does Code Become a Page?
When you open a webpage, the browser processes three types of code in order:
**1. HTML — Defines the page structure**
The browser first parses HTML to understand what elements are on the page (headings, paragraphs, images, buttons, etc.) and their hierarchical relationships.
**2. CSS — Applies styles**
Then the browser applies CSS rules to add styles to these elements: colors, sizes, positions, spacing, etc., making the page look beautiful.
**3. JavaScript — Adds interactivity**
Finally, JavaScript code is executed to make the page "come alive": responding to clicks, submitting forms, playing animations, etc.
**4. Page rendering**
The combined result of all three is the webpage you ultimately see.
### Modern Frontend Frameworks: From HTML to React/Vue
The HTML, CSS, and JavaScript introduced above are the "three essentials" of frontend development—they are the foundation of all webpages. But when pages become complex, developing directly with these three can be challenging: code becomes hard to maintain, there's lots of repetitive work, and data synchronization is troublesome.
**Modern frontend frameworks** (like React, Vue, Angular) are built on top of HTML/CSS/JS to make development more efficient:
**1. HTML/CSS/JS (Basic stage)**
Directly manipulating page elements, suitable for simple pages. But as code grows, all logic gets mixed together and becomes hard to maintain.
**2. jQuery (Transitional stage)**
Simplified DOM operations, making code more concise. But you still need to manually manage page state and find corresponding elements to update when data changes.
**3. React/Vue (Modern stage)**
Adopts component-based and state-driven design:
- **Component-based**: Break the page into independent, reusable modules (like buttons, cards, navigation bars)
- **State-driven**: When data changes, the framework automatically updates the corresponding UI without manual manipulation
::: tip 💡 Simple Understanding
- **HTML/CSS/JS** = Basic materials (bricks, cement, steel)
- **React/Vue** = Building framework (provides standards and tools for constructing buildings)
In the AI-assisted programming era, you don't need to deeply master every detail of frameworks. You just need to understand their basic concepts, and you can describe requirements in natural language to have AI generate code for you.
:::
### In Vibe Coding
**Core point: You don't need to write code, you just need to know how to describe.**
After understanding frontend concepts, you can describe requirements to AI like this:
> "Use React to make a leaderboard page, with a score list on the right side. Clicking a row shows player details below. The style should be clean and modern."
If you want to dive deeper into frontend fundamentals like HTML, CSS, and JavaScript, check out the [Web Basics Appendix](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). To learn about the evolution of frontend technology, check out the [Frontend Evolution Appendix](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
## <span id="appendix-2">[Appendix 2: What Exactly is Vibe Coding](#appendix-nav)</span>
> 💡 What is Vibe Coding? Computer scientist [Andrej Karpathy](https://karpathy.ai/) (one of the co-founders of OpenAI, former head of AI at Tesla) coined the term **vibe coding** in February 2025. This concept refers to a coding methodology that relies on LLMs, **allowing programmers to generate working code by providing natural language descriptions instead of manually writing code.**
![1767350588191](../../../zh-cn/stage-0/0.2-ai-capabilities-through-games/images/1767350588191.png)
Literally, Vibe Coding can be understood as a way of "developing by talking." The core change is: you no longer need to write code line by line, look up syntax, or debug yourself. Instead, you directly describe what you want in natural language, for example:
"I need a login page with a phone number input field and a verification code input field."
"After successful login, redirect to the homepage and display the username in the top right corner."
"Give me a simple Snake game that can be controlled with keyboard arrow keys."
The Large Language Model (LLM) will automatically translate these descriptions into real, runnable code and generate the corresponding pages, logic, and data structures. After you see the results, you can propose modifications in natural language, such as "make the button bigger," "change the background to dark," "record scores and display a leaderboard," and the AI will continue adjusting the implementation according to your requirements.
In this mode, you don't need to learn a programming language first before writing code. Instead, you focus your main energy on: clearly stating what you want to do, judging "what's wrong" after seeing the results, and then proposing new modifications. AI handles turning these high-level ideas into concrete implementations, significantly reducing mechanical, repetitive coding work.
You can click here to learn more about vibe coding: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
You can click here to see more of Karpathy's shared content: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
### How to Pretend You're a Vibe Coding Master
In practice, during real vibe coding, we usually don't use many complex prompts. Perhaps we need a specific and moderately complex prompt for the entire program at the beginning, but after that, at each step, you may only need prompts like these:
```
"There's a bug in the code, please fix it."
"I don't want partial code, give me the complete modified code."
"Your code still has problems."
"Please modify again and give me the complete corrected code."
"It was working before, why isn't it working now?"
"Did you not understand what I meant? Don't change my original code."
"Don't add any debugging features."
"Don't do things I didn't ask you to do."
"Where is the feature I asked you to implement?"
"Can you not understand what I'm saying?"
"I only want one function."
"I told you to refer to my previous code."
"Please don't add unnecessary comments."
"Please don't modify the basic logic of my original code."
"Help me modify the code."
"Modify based on my code..."
"Don't change my variable names!!!"
"Don't change the original function names!"
"Don't mess with my variables."
"Don't add extra features."
"Don't just generate a skeleton, generate the complete code."
```
This may sound a bit exaggerated, but in reality, these are the prompts we might use in daily work. Due to the **context length limitations** of large language models, or sometimes because their **instruction following ability** isn't very strong, models may forget content discussed earlier in the conversation. In vibe coding, we tend to use models with long context and strong instruction following ability. We can judge whether a model is good through rankings or metrics of these two aspects.
Alternatively, due to the style of training datasets, large models tend to respond in the style of their training data. For example, some speak very seriously, some like to add lots of embellishments, and some models like to add lots of comments or unnecessary modules to code.
## <span id="appendix-3">[Appendix 3: Model Context](#appendix-nav)</span>
Model context can be understood as AI's short-term memory. It refers to all the text content that the model can "see" and "remember" during a single conversation or task, including your previous questions, system-provided instructions, relevant materials, etc.
It is precisely because of context that AI can understand you're continuing from previous content, enabling round after round of coherent, natural conversation. Without context, every sentence you say would appear to the model as a completely new question—it wouldn't know what you said before, and there would be no way to continue a conversation.
Each model has its own effective context length (context window). This length is usually measured in tokens (which can be roughly understood as units of "word fragments"), and most mainstream models currently range from 32k to 128k tokens. The longer the context, the more content the model can "read" at once, for example:
- Reading an entire lengthy paper or report in one go
- Referencing multiple materials and cases in the same conversation
- Having the model remember conclusions from complex discussions several rounds ago
When your input approaches or exceeds the model's context limit, some common phenomena often appear:
- The model starts forgetting details or key information from earlier in the long text
- As the conversation progresses, the topic gradually drifts from the original goal
- Across different Q&As about the same material, the referenced content becomes inconsistent
These phenomena don't mean the model suddenly "got dumber"—they are natural results of the context capacity being used up or nearly used up.
In practical use, we want the context to be as long as possible, while also being aware that:
- The longer the context, the more computing resources it consumes
- The corresponding API costs (fees) also increase accordingly
Therefore, when designing AI applications, you need to balance letting the model see enough information with controlling costs and improving efficiency. For example:
- Distill information that truly needs long-term retention before feeding it to the model
- Avoid stuffing detail information that's no longer needed into the context repeatedly
- Use external knowledge bases and similar approaches to hand "long-term memory" to the system rather than forcing it into the model's context
## <span id="appendix-4">[Appendix 4: Instruction Following](#appendix-nav)</span>
Instruction following refers to: after the model understands your instructions, whether it can accurately and completely execute according to your requirements. This includes not only answering questions, but also completing tasks in specified formats, styles, and steps.
For example, the following are all instructions with clear requirements for the model:
- Summarize this article into three key points
- Write a reply email in a formal, polite tone
- Translate this word into English and create an example sentence for each
- Extract the author, time, and main events from the article
A model with strong instruction following ability typically has these characteristics:
- Outputs content in the required quantity
For example, if asked to summarize three key points, it won't give five.
- Covers all specified elements
For example, if asked to extract author, time, and events, it won't omit any of them.
- Follows the specified format and tone
For example, if asked to use a formal tone, it won't output overly colloquial responses.
- Doesn't make unnecessary additional extensions
For example, if only asked to translate and create sentences, it won't output a large paragraph of unrelated explanations.
In practical applications, strong instruction following ability is very important for these reasons:
- Improved stability: The same instruction produces more consistent output structure and behavior patterns across different times and multiple runs, less likely to go off-script
- Improved reproducibility: When you configure a prompt into a product or workflow, you can predict roughly how the model will respond, making testing and iteration easier
- Easier system integration: When model output conforms to expected formats, it's easier to automatically interface with backend programs, workflows, or other tools
Therefore, when selecting and evaluating a large language model, in addition to focusing on whether it's smart and has broad knowledge coverage, you also need to pay special attention to its instruction following ability. For industrial-grade applications, being able to stably and accurately execute instructions is often more important than occasionally giving a stunning answer.
docs/en/stage-0/index.md
+129
View File
@@ -0,0 +1,129 @@
# Build Your First AI Product
Welcome to the **Build Your First AI Product** stage! This is the starting point of the Easy-Vibe tutorial, specifically designed for learners with zero programming background.
## What You Will Learn
In this stage, you will start from zero and master the Vibe Coding workflow, becoming a super individual capable of independent product design.
### Getting Started
Suitable for learners with product, operations, and non-technical backgrounds. Understand AI programming logic through games and build learning confidence:
<NavGrid>
<NavCard
href="/en/stage-0/0.1-learning-map/"
title="1. Learning Map"
description="Understand the entire learning path and clarify the goals and outcomes of each stage."
/>
<NavCard
href="/en/stage-0/0.2-ai-capabilities-through-games/"
title="2. AI Era: If You Can Speak, You Can Code"
description="Experience the charm of AI programming through mini-games like Snake and break the fear of coding."
/>
</NavGrid>
### Product Prototype Practice
Master the Vibe Coding workflow, learn to deconstruct requirements, and independently complete high-fidelity Web application prototypes:
<NavGrid>
<NavCard
href="/zh-cn/stage-1/1.1-introduction-to-ai-ide/"
title="1. Master AI Programming Tools"
description="Learn about current mainstream AI programming tools and choose the most suitable development partner for you."
/>
<NavCard
href="/zh-cn/stage-1/1.0-finding-great-idea/"
title="2. Find Great Ideas"
description="Learn to find and validate product ideas and find projects worth doing."
/>
<NavCard
href="/zh-cn/stage-1/1.2-building-prototype/"
title="3. Build Product Prototypes"
description="Learn how to quickly transform product ideas into visual prototypes for low-cost trial and error."
/>
<NavCard
href="/zh-cn/stage-1/1.3-integrating-ai-capabilities/"
title="4. Integrate AI Capabilities"
description="Let your prototype have intelligent interaction capabilities by integrating simple AI APIs."
/>
<NavCard
href="/zh-cn/stage-1/1.4-complete-project-practice/"
title="5. Complete Project Practice"
description="Comprehensively use what you have learned to complete a complete product prototype development from 0 to 1."
/>
</NavGrid>
### Appendix: Business Thinking
**Why needed**: When you need to enhance product thinking and understand industry application scenarios, this content can help you establish a more comprehensive product perspective.
**When to watch**:
- Before starting to build a prototype, understand product thinking first to help you plan and design better.
- When you have a product idea but are unsure of the direction, refer to industry scenario cases.
- After completing the project, use product thinking to review and optimize your work.
<NavGrid>
<NavCard
href="/zh-cn/stage-1/appendix-a-product-thinking/"
title="Product Thinking and Solution Design"
description="Supplement necessary thinking models for product managers to improve demand analysis and product design capabilities."
/>
<NavCard
href="/zh-cn/stage-1/appendix-industry-scenarios/"
title="AI Industry Application Scenarios (B-end)"
description="Understand AI application scenarios in different industries to find product inspiration and direction."
/>
<NavCard
href="/zh-cn/stage-1/appendix-c-consumer-scenarios/"
title="AI Consumer Scenarios Inspiration (C-end)"
description="Explore AI application scenarios in consumer-grade products and inspire creative ideas."
/>
</NavGrid>
### Appendix: Technical Solutions
**Why needed**: When you encounter technical problems during development or want to know better tools, these technical appendices provide ready-to-use solutions.
**When to watch**:
- When you encounter an error and don't know how to solve it, check common errors and solutions.
- When you want to compare different AI programming tools, refer to platform measurement comparisons.
- When you want to learn more advanced development skills, check agent development cases.
<NavGrid>
<NavCard
href="/zh-cn/stage-1/appendix-b-common-errors/"
title="What to do if you encounter errors when coding"
description="Summarize common error messages and solutions during development to help you troubleshoot problems quickly."
/>
<NavCard
href="/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"
title="Comparison of Seven AI Programming Tools"
description="Compare and test mainstream AI programming platforms to help you choose the most suitable tool."
/>
<NavCard
href="/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"
title="Design Websites using Design and Programming Agents"
description="Learn how to use AI agents to work together and improve development efficiency."
/>
</NavGrid>
## Suitable for
- Product managers and operations personnel with zero foundation
- Entrepreneurs who want to quickly validate ideas
- Non-technical individuals interested in AI programming
- Designers who hope to improve their prototype design capabilities
## How to Learn?
It is suggested to follow this order:
```
Play games to build confidence → Follow the tutorial to make a prototype → Add AI functions to the prototype → Independently complete a full project
```
Don't read everything at once; learning while doing is most effective. When you encounter problems, remember to check the appendix for solutions.
Start now, select the first section in the left navigation!
docs/en/stage-1/1.1-introduction-to-ai-ide/index.md
+361
View File
@@ -0,0 +1,361 @@
# Beginner Level 2: Learn AI Programming Tools
## Chapter Overview
<script setup>
const duration = 'About <strong>1 day</strong>, can be completed in multiple sessions'
</script>
<ChapterIntroduction :duration="duration" :tags="['Local Development Environment Setup', 'IDE vs AI IDE', 'Efficient Development Tips']" coreOutput="1 original game you create" expectedOutput="Built using Trae">
Previously, we experienced AI programming on z.ai, but the web version has many limitations — you **can't save your work anytime**, it's **hard to manage files**, and you **can't handle complex projects**. This chapter helps you move your development environment to your own computer so you can **truly build things independently**.
We'll first clarify **what the difference is between an IDE and an AI IDE**, and why the latter can **double your efficiency**. Then we'll **walk you through step by step** using Trae to build a Snake game locally, covering the **complete workflow** from installation to running. Finally, we'll share some **practical tips** for communicating with AI so you can avoid common pitfalls.
After completing this chapter, you'll have **mastered a development workflow similar to that of professional programmers**.
::: tip 💡 Advanced Tip
If you have some programming experience and want to use more powerful tools early on, you can refer to [Modern CLI Coding Tools](../../stage-2/backend/2.6-modern-cli/extra7/) to develop using the command line.
:::
</ChapterIntroduction>
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="0" :items="[
{ title: 'Understanding the Environment', description: 'IDE vs AI IDE' },
{ title: 'Hands-on Practice', description: 'Build Snake with Trae' },
{ title: 'Tool Deep Dive', description: 'Explore the IDE Interface' },
{ title: 'Communication Skills', description: 'Talk to AI Effectively' }
]" />
</ClientOnly>
</div>
## 1. What Environment and Tools Do You Need to Write Code
### 1.1 Mindset Shift: When in Doubt, Ask AI First
Before we introduce the various environments and tools, here's an important reminder: you need to **change your thinking habits**.
In traditional programming learning, if you need to install Python, configure Conda, or fix an npm installation failure, you'd typically open a search engine, find a tutorial, and follow the steps one by one. If you hit an error along the way, you'd search for the error message and try again repeatedly.
Wrong! ❌
In the AI era, especially when using an AI IDE, remember one core principle: **For any task, you can ask AI first, or even let it do it for you.**
- **Don't know how to set up your environment?** Just ask AI in the sidebar: "I want to write Python. Please check if Python is installed, and if not, install it for me."
- **Network stuck?** If installing dependencies keeps spinning or throwing errors, just throw the error to AI: "The download failed. Is it a network issue? Can you help me switch to a different mirror source?"
- **Can't remember commands?** No need to memorize Git or Conda commands. Just tell AI: "Help me create a new virtual environment called demo."
### 1.2 Why You Need an Environment and Tools
Going from "trying to write a few lines of code" to "building a long-term maintainable project" requires completely different environments and tools.
In theory, you could write code with the system's built-in Notepad, but problems quickly arise:
- **All code is plain black text** — keywords, strings, and comments are all mixed together, making it hard to see the structure at a glance
- **No smart suggestions** — you have to type every word completely by hand, and a single typo means repeatedly checking your code
- **Files become chaotic** — switching back and forth between dozens of files, often unable to find the line you need to edit
- **Debugging is guesswork** — when the program crashes, you don't know what went wrong and can only add print statements line by line
That's why you need an IDE (Integrated Development Environment). It displays code in different colors, provides auto-suggestions as you type, organizes files by project, and lets you trace errors step by step — making development more efficient and less error-prone.
## 2. What Is an IDE, and Why Do You Need One
::: info Pre-reading Tip
If you're not yet familiar with what an IDE is or what each interface element does, we recommend reading [IDE Basics](/zh-cn/appendix/2-development-tools/ide-basics) first to learn the basic concepts and common features.
:::
In the early days of programming, all we needed was a simple text editor and a language processor. But as projects grew more complex, developers urgently needed a tool that could efficiently manage files, support syntax highlighting, and enable debugging — and thus the Integrated Development Environment (IDE) was born.
You can think of an IDE as a program specifically designed to "edit, manage, run, and debug" code. Early IDEs looked very "primitive" and were operated almost entirely through the keyboard.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image2.png)
Terminal Interface — Image source: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
Well-known and mature "built-in IDEs" like `Vim` are commonly used for remote server operations.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image3.png)
For greater efficiency, we need modern IDEs that support mouse interaction, typically including:
- **Source Code Editor**: Syntax highlighting, auto-completion.
- **Build and Run Tools**: Built-in compiler/interpreter.
- **Debugger**: Breakpoint debugging, variable inspection.
Modern IDEs often also include built-in tools like Git. The most popular is Microsoft's **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)**, which is lightweight and extensible. While there are also professional IDEs like the JetBrains suite, VS Code is the most beginner-friendly.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image4.png)
VS Code's core philosophy is "everything is a plugin." Through its plugin system, it supports various languages — install the Python plugin and it becomes a Python IDE, install the C++ plugin and it becomes a C++ IDE. Without plugins, it's just an advanced text editor.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image5.png)
You can even use it to edit Markdown documents.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image6.png)
In short, an IDE is a set of tools that helps developers write code and run programs efficiently.
For more detailed explanations, check out the [Virtual IDE Visualization section in the Appendix](/zh-cn/appendix/2-development-tools/ide-basics).
## 3. How Is an AI IDE Different from a Regular IDE
A regular IDE (like the original VS Code) is essentially a "toolbox":
You can open projects, write code, run and debug, and install plugins — but the prerequisite is that you need to know what to do and how to do it yourself:
- When there's an error, you read the message yourself and figure out which line has the problem;
- When you want to add a new page or API endpoint, you find the right file and write the code yourself;
- When you want to configure the environment or build the project, you look up the documentation and follow the steps yourself.
But in an AI IDE, you can directly use a large language model to help you code and modify files:
- Just say "make a login page," and it generates the basic code structure first;
- Throw the error message and related code at it, and let it analyze the cause and suggest fixes;
- After you confirm, let it automatically create files, batch-edit code, and handle cross-file grunt work.
For example, you can select a piece of code and ask it to "refactor this" or "add comments." You can also ask in the sidebar "How is this project designed?" and specify the reference scope using `@filename` or `@entire project`, completing the tedious operations of creating files, writing code, and running with a single sentence.
In the latest version of VS Code, a large language model assistant is already built in. You can have conversations with the model about the entire codebase, a specific file, or even a specific function. You can also use it like the auto-coding tools you used on the web — send your requirements as prompts to the built-in coding Agent, and let it automatically implement the features you need, create files, modify code, configure environments, and more.
You can download and install VS Code, click the sidebar entry in the top-right corner, and open the AI feature area to experience these capabilities.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image7.png)
However, VS Code is not the IDE with the strongest AI capabilities. For scenarios that require heavy AI-assisted coding, we often want to use "smarter, more efficient" tools — a good AI IDE can significantly save time on writing code and fixing bugs. Below we'll introduce several popular AI IDEs. You can choose any AI IDE based on your personal preference.
Since VS Code is open source (anyone can download the source code and compile it themselves), the vast majority of AI IDEs on the market today are built on top of VS Code. So you don't need to worry about "learning many different IDEs" — **as long as you're familiar with the basics of VS Code**, migrating to these AI IDEs doesn't require starting from scratch.
Generally speaking, the differences between AI IDEs mainly come down to four aspects: pricing; available model types (some advanced models may be restricted in certain regions); Agent capabilities (how smart and capable it is at assisting with coding); and speed and performance. You can choose based on your own testing results — the best tool is the one that works best for you.
> Typical AI IDEs generally have the following core capabilities:
>
> - Smart Code Generation and Completion: In traditional IDEs, we typically type a few characters to auto-complete variable or function names. In modern AI IDEs, you can write a few lines of pseudocode or simply describe your requirements, and the IDE will auto-complete the full logic, or even generate large blocks of code based on instructions.
> - Code Understanding and Q&A: The IDE can understand and answer questions about a specific piece of code, a file, or even the entire project directory structure.
> - Code Refactoring and Optimization: The IDE can rewrite or optimize the implementation logic of specified code snippets based on your intent.
> - Automatic Test Generation: The IDE can automatically generate test code for different functions and modules, making it easy to perform targeted testing.
> - Agent-style Task Execution: Smart Agents can automatically generate, build, install, run, and modify code, partially replacing the work of junior software engineers in many tasks.
::: details Antigravity
### [Antigravity](https://antigravity.google/)
Antigravity is a brand-new AI IDE released by Google in November 2025 alongside Gemini 3, adopting an "Agent-First" development model. Unlike traditional AI-assisted coding, Antigravity makes the AI agent the "active executor," capable of directly operating the editor, terminal, browser, and other tools, taking on more "execution," "planning," and "verification" work. Developers only need to express high-level intent, and the agent will automatically break down tasks, create plans, execute code, run tests, and generate results. It supports multi-model switching, including Gemini 3 Pro, Claude Sonnet 4.5, and more. It's currently available as a public preview, supporting Windows, macOS, and Linux.
:::
::: details Trae
### [Trae](https://www.trae.ai/)
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image8.png)
Trae is an AI programming assistant developed by ByteDance that supports over 100 programming languages and can be integrated into mainstream IDEs. Its features include: generating code from natural language, automatic debugging, and converting design mockups into React/Vue components. After its August 2025 update, Trae added smart dependency imports, rename suggestions, task checklist management, and more. SOLO mode also began supporting backend code generation and technical architecture document editing.
:::
::: details Cursor
### [Cursor](https://cursor.com/)
Cursor is an AI code editor developed by Anysphere, built on a customized VS Code, with optimizations focused on large-scale codebases and multi-file collaboration scenarios. It supports models like GPT-4o and Claude 3.7. The Claude Max mode introduced in 2025 can handle projects with millions of lines of code. The Pro version removed request limits, making it ideal for complex enterprise projects.
Currently, Cursor is arguably one of the best AI IDEs with a graphical interface in terms of overall experience, with a large user base and frequent feature updates. Its biggest drawback is the higher price — the Pro version costs about $20 per month.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image9.png)
:::
::: details Qoder
### [Qoder](https://qoder.com/)
Qoder is an AI IDE from Alibaba that emphasizes "transparent collaboration" and "enhanced context engineering capabilities." It supports breaking tasks into multiple steps through Action Flow and tracks AI execution in real time. It also supports multi-model dynamic routing and task state machine management, making it ideal for architecture governance in medium-to-large projects and "reverse engineering" analysis of legacy systems.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image10.png)
:::
::: details CodeBuddy
### [CodeBuddy](https://www.codebuddy.com/)
CodeBuddy is an AI programming tool from Tencent Cloud that emphasizes Chinese language command support and enterprise-grade compliance capabilities. It offers code completion, batch code review, and multi-model switching. Its Craft agent can perform multi-file code generation and API integration. The enterprise version supports private deployment and has passed Level 3 security certification, making it suitable for industries with high data security requirements such as finance and healthcare.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image11.png)
:::
::: details VS Code + Cline
### VS Code + [Cline](https://cline.bot/)
Cline is an AI programming Agent plugin for VS Code (Visual Studio Code) that can flexibly switch between different large models by configuring different API endpoints. Cline supports multimodal input, MCP tool extensions, and cost monitoring, with all operations requiring user confirmation before execution. It's ideal for quickly validating ideas or integrating with existing development workflows. Basic features are free, and the enterprise version supports deploying models in private environments.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image13.png)
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image14.png)
:::
::: details Kiro
### [Kiro](https://kiro.dev/)
Kiro is an AI programming IDE from AWS (Amazon Web Services), deeply integrated with Amazon Bedrock and the AWS cloud service ecosystem. It supports multiple large models including Claude and Nova, making it particularly suitable for development scenarios that require tight integration with AWS cloud services. Kiro provides smart code generation, automated testing, and seamless integration with AWS resources (such as Lambda, S3, DynamoDB), offering unique advantages for cloud-native application development.
> **Note**: If you want to use Anthropic Claude models, you'll need to use Cursor, Kiro, or Antigravity as your IDE. These IDEs have official partnerships or deep integrations with Anthropic, providing a more stable and complete Claude model experience.
:::
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="1" :items="[
{ title: 'Understanding the Environment', description: 'IDE vs AI IDE' },
{ title: 'Hands-on Practice', description: 'Build Snake with Trae' },
{ title: 'Tool Deep Dive', description: 'Explore the IDE Interface' },
{ title: 'Communication Skills', description: 'Talk to AI Effectively' }
]" />
</ClientOnly>
</div>
## 4. Hands-on: Build a Snake Game Locally with an AI IDE
The previous sections were mainly about "concepts" and "differences." In this section, we'll turn abstract concepts into concrete actions through a complete hands-on exercise: **Create a new empty folder -> Open it with an AI IDE -> Chat in the sidebar and have it build a Snake game from scratch using React.** Here we'll use Trae as our example, so first we need to install it and understand what Trae is.
::: tip 💡 Quick Tip: Seamless Transition from Web to Local
If you've previously developed projects on z.ai or other web-based AI programming platforms, you can download the code directly to your local machine and open it with an AI IDE to continue development. This way you can keep your previous work while enjoying the more powerful AI assistance of a local IDE.
The steps are simple:
1. Click the download button on platforms like z.ai to save the project locally
2. Unzip and open the folder with an AI IDE like Trae/Cursor
3. Continue chatting with AI in the sidebar to iterate and improve your project
:::
### 4.1 Preparation: Install and Learn About Trae
#### 4.1.1 What Is Trae
Trae's full name can be understood as "The Real AI Engineer." It's an adaptive AI Integrated Development Environment (IDE) developed by ByteDance. It's built on top of the popular VS Code, which means if you're already familiar with VS Code, you'll find Trae's interface layout and basic operations very familiar and comfortable.
Trae's core goal is to be a developer's "smart programming partner." Through deep AI integration, it can automatically handle a large amount of repetitive work, providing you with a more intuitive and efficient development experience. It's not just a "code completion tool" — it aims to assist throughout the entire development workflow, from creating projects, writing code, debugging, testing, to deployment.
#### 4.1.2 Installing Trae
Trae comes in an international version and a China version. The international version requires access to overseas networks but lets you use the latest overseas models like GPT-5. The China version primarily supports the latest domestic large models such as GLM, Qwen, Kimi, etc.
International version download: https://www.trae.ai/
China version download: https://www.trae.cn/
##### Trae Pricing and Usage Options
::: info 💡 Version Selection Tips
- If you're primarily using it in China, we recommend choosing the China version for more stable network access and support for domestic large models
- If you need to use overseas models like GPT-5 and your network conditions allow it, you can choose the international version
- If you already have a third-party model API Key, connecting third-party models gives you flexible cost control
:::
> 💡 **Currently recommended: Use OpenRouter free models for testing**
>
> As of the time this tutorial was written (2026-02-12), you can still try StepFun's models for free. See section 4.2 below for how to connect the model `stepfun/step-3.5-flash:free`.
Regarding Trae's costs and usage options, here are several choices:
- **China Version (Recommended)**: Basic usage is free, but due to high user volume, you may need to wait in a queue.
- **International Version**: Subscription costs about $3 per month, giving access to overseas models like GPT-5, but requires overseas network access.
- **Third-party Model Integration**: If you already have a Token API from a domestic large model provider (such as DeepSeek, Tongyi Qianwen, Kimi, etc.), you can connect these APIs through Trae's third-party model configuration. Major cloud service providers (such as Alibaba Cloud, Tencent Cloud, Baidu Cloud, etc.) typically offer Coding Plan subscriptions that let you use their large model APIs at more favorable prices. This way you can freely choose your preferred model while controlling costs.
We recommend beginners start with the free China version. If you encounter queuing issues or need more stable service, consider connecting a third-party model and purchasing the corresponding cloud provider's Coding Plan.
#### 4.1.3 Trae Interface Overview
In terms of interface design, Trae is very similar to the VS Code we use daily: the same classic three-column layout with a file explorer on the left, an editing area in the center, and an extension panel on the right.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image17.png)
The sidebar on the right is the Copilot interaction window, which can also be thought of as the Agent window. If you can't see it right away, click the sidebar icon in the top-right corner of Trae to open it.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image18.png)
After opening the sidebar, you'll see a `Builder` option — this is the Agent mode. Simply put, it's like a "local version" of z.ai that can operate your local environment, install runtime environments, open web pages, and more.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image19.png)
After clicking "Builder," you'll see "Chat" mode and "Builder with MCP" mode:
- **Chat Mode**: Primarily used for chatting about the code in your current folder, or as a general chat model. (You can open a folder through the "File" menu in the top-left corner and edit within that folder. In this case, any files Builder creates or modifies will only happen inside this folder.)
- **Builder with MCP Mode**: Provides the Agent with more available tools (such as connecting the language model with other software, querying weather, etc.). You can simply understand it as: MCP makes it easier for the language model to call various external tools.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image20.png)
In the area below, you'll also see model selection options — click to change the current large model. In the China version, you can choose domestic models like Kimi k2 or GLM. If you're using the international version of Trae, you can also select overseas models like ChatGPT or Claude. However, since domestic large models are developing very rapidly, Kimi, Qwen, GLM, and others already offer experiences close to Claude 3.5 or 3.7 in many tasks, which is more than sufficient for daily development. There's no strict requirement to use the international or China version here.
**Note that we don't recommend using Auto mode (automatic model selection). For the international version, we recommend using Gemini or GPT models. For the China version, we recommend trying domestic models like Kimi k2, Minimax, or GLM.** Different models suit different use cases — there's no dogmatic rule about which is better. When you hit a wall with one model, try switching to another. Through multiple tests, you'll find the best results for your own workflow.
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/image21.png)
That's a brief introduction to Trae. Next, let's revisit what we did previously on z.ai and try doing the same thing in Trae.
### 4.2 Step 1: Create an Empty Folder and Open It with an AI IDE
Before getting started, we first need to prepare a clean project working directory.
For this section's example, you can create a new empty folder named `snake-game-react` on your local machine.
Then, open your installed AI IDE, select "Open Folder" on the startup screen, and import the empty folder as the project root directory. You can also drag the folder directly into the IDE window to open it. At this point, the file explorer on the left won't show any code files, indicating that we're starting from a completely blank project state.
::: details 📚 Optional: Connect a Cloud Service Provider's API or Coding Plan
This section introduces how to connect a cloud service provider's API or Coding Plan for more stable and frequent model calls. Screenshots of the Trae integration are provided at the end.
**What Is a Coding Plan**
A Coding Plan is a subscription offered by major cloud service providers. After purchasing, you can **use the provider's large model API without limits or at high frequency** for a certain period. Compared to per-token billing, a Coding Plan is more like a "monthly package" — you pay a fixed fee and can use it freely without worrying about per-call charges.
**Why Purchase a Coding Plan**
You might ask: since you can call large models directly via API, why buy a Coding Plan? The main reason is: **unlimited usage**. The core advantage of a Coding Plan is that you can call the large model anytime, as frequently as you want, without worrying about costs exploding or constantly checking billing statements.
**Recommended Domestic Cloud Service Coding Plans**
Here are recommended Coding Plan options from major domestic cloud service providers:
- Zhipu AI (BigModel Plan): https://bigmodel.cn/glm-coding
- Volcengine (ByteDance Cloud AI Plan): https://www.volcengine.com/activity/codingplan
> 💡 **You can also directly connect a large model API**
> Besides Coding Plans, you can also directly connect various model APIs through Add Model. You can refer to the method below for connecting the OpenRouter StepFun free API to integrate it with Trae. Testing shows it meets basic programming needs.
> If you need to top up, we suggest starting with a small amount (e.g., 10 RMB) to see how long it lasts, such as with cost-effective models like DeepSeek.
**How to Connect a Coding Plan**
Connecting a Coding Plan is very simple and takes just a few minutes:
1. Visit your chosen cloud service provider's website (e.g., Zhipu AI: https://bigmodel.cn/glm-coding, Volcengine: https://www.volcengine.com/activity/codingplan)
2. Register an account and log in
3. Find the "Pricing" or "Coding Plan" page
4. Choose a plan that suits you and complete the payment
5. After payment, you'll receive an API Key or Plan ID
::: tip 🎯 Custom Model Recommendations
When connecting custom models in Trae, we **recommend using the OpenRouter approach by default**. OpenRouter provides a unified API interface for conveniently connecting to multiple large language models.
**As of February 12, 2026, you can still use StepFun's free API:**
- **`stepfun/step-3.5-flash:free`**: A free model from StepFun that can be directly connected in Trae.
**Other free models:**
- **`openrouter/free`**: A model option that uses free LLM APIs by default. You can use it directly in Trae's Custom Model integration (just enter the model ID), experiencing AI programming features without any cost.
These free options are great for beginners. Before committing to production use, you can familiarize yourself with the AI IDE workflow through these free options.
**Optional: Connect a Large Model API (Using DeepSeek as an Example)**
1. Visit the DeepSeek platform: https://platform.deepseek.com/usage
2. Register an account and log in
3. Purchase a 10 RMB token package on the top-up page
4. After topping up, create and copy an API Key on the API Keys page
5. In Trae, click **"Add Model"**, find DeepSeek, select the corresponding model, and enter the API Key to start using it
Through the interface below, you can successfully add a model (note: after selecting the model option, **make sure to scroll all the way to the bottom** — there's a "Custom Model" option. Click it to enter a model ID, where you can type the recommended model IDs like `stepfun/step-3.5-flash:free`. Also click "Get Key" below to visit the official website and obtain the corresponding API Key.)
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
![](../../../zh-cn/stage-1/1.1-introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
:::
docs/en/stage-1/1.3-integrating-ai-capabilities/index.md
+287
View File
@@ -0,0 +1,287 @@
---
title: 'Adding AI Capabilities to Your Prototype - Integrating Text and Image APIs'
description: 'Integrate real AI capabilities into your existing web prototype: understand the core concepts of APIs, learn how to find API Keys and official examples; hands-on integration of DeepSeek text model and various image generation services (SiliconFlow Qwen-Image, Recraft, Seedream), and master common model selection methods.'
---
<script setup>
const duration = 'About <strong>1 day</strong>'
</script>
# Beginner Level 4: Injecting AI Capabilities into Your Prototype
## Chapter Introduction
<ChapterIntroduction :duration="duration" :tags="['API', 'Text Model', 'Text-to-Image', 'Prototype Integration']" coreOutput="Prototype integrated with 1 text model + 1 image model (optional)" expectedOutput="AI prototype capable of calling real APIs">
In the previous chapters, we completed the entire process from **finding a great idea** to **building a product prototype**. But the current prototype is still just a "shell" — clicking buttons won't actually generate content, and all the data on the page is hardcoded.
Remember what we emphasized in the first chapter? **We want to build "products people are willing to pay for," not "prototypes that just look good."** Real value comes from a product that can **solve real problems**, and to achieve that, the prototype must be able to **actually run**.
This chapter will bring your prototype **"to life"**: we'll integrate **real AI capabilities**, starting from obtaining an API Key, reading official documentation, and having the AI IDE help you integrate the interface into your code. Using **DeepSeek's text model** as an example, you'll learn how to make your application **actually call a large language model to generate content**; if you're interested, you can also **optionally integrate image generation**.
After completing this chapter, your prototype will **no longer be a static demo**, but rather **an application that can call real AI capabilities and solve real problems**.
</ChapterIntroduction>
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="0" :items="[
{ title: 'API Basics', description: 'Understand core concepts and security practices' },
{ title: 'Text Integration', description: 'DeepSeek text generation hands-on' },
{ title: 'Image Integration', description: 'VLM image understanding and generation' }
]" />
</ClientOnly>
</div>
# 1. API Fundamentals
As mentioned earlier, our goal is to "integrate AI capabilities" so that the prototype is no longer a static demo but a tool that can call real AI services. The key to achieving this lies in understanding and using APIs (Application Programming Interfaces).
API is an important abstraction concept in computer science. Simply put: **you send a request in the format the other party requires, and they send back a result in the same format**.
- **What you send out**: Usually includes a "key (API Key)" and "what you want to generate"
- **What they send back**: If successful, you get the result; if it fails, they tell you why (e.g., "invalid key," "insufficient balance," "incorrect parameters")
Specifically, you need to master the following core elements:
1. **API Key**: Your "pass" and also your "wallet key." Anyone who gets it can make API calls on your behalf and incur charges.
2. **Endpoint**: The specific path for the API request, telling the server which function you want to access. The full request URL is typically composed of "Base URL + Endpoint path." For example:
- Text generation: Base URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = Full URL `https://api.service.com/v1/chat/completions`
- Image generation: Base URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = Full URL `https://api.service.com/v1/images/generations`
3. **Call/Request**: The process of sending a task to the AI service and getting results back
4. **Request Content**: The specific content you send to the AI, such as the topic you want the AI to write about, the description of the image to generate, etc.
5. **Response**: The content the AI returns after processing, such as the generated article, image, etc.
6. **Error Handling**: Knowing how to troubleshoot when problems occur (such as incorrect API Key, too many requests, etc.)
::: info ℹ️ What is an API
For a more in-depth explanation of APIs, see the appendix: [Introduction to APIs](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning 🔐 **API Security Notes**
The API Key is your "pass" for requesting AI services — it's a secret string used for authentication and billing.
Since the API Key is directly linked to your account and charges, be sure to:
- **Never share it** in group chats, screenshots uploaded online, or public forums
- **Never hardcode it** into your code and commit it to a Git repository (especially public repositories)
- If you suspect your Key has been leaked, **replace it with a new Key immediately**
In the content below, we will **paste the API KEY directly into the AI IDE for operations**. **Don't do this in real projects!!** Since we're just practicing, it's fine for now. (Once you're more experienced, you can have the AI generate a configuration file and simply put the API KEY in the config file.)
:::
<div style="margin: 50px 0;">
<ClientOnly>
<StepBar :active="1" :items="[
{ title: 'API Basics', description: 'Understand core concepts and security practices' },
{ title: 'Text Integration', description: 'DeepSeek text generation hands-on' },
{ title: 'Image Integration', description: 'VLM image understanding and generation' }
]" />
</ClientOnly>
</div>
# 2. Integrating the Text Generation API: DeepSeek
Although APIs involve these technical concepts, the actual operation during the prototyping phase can be very simple and efficient. The core approach is:
> **Find the official example, get the API Key, and have the AI IDE help you wire it to a button.**
Once you've grasped these concepts, you'll find that whether you're integrating a text model or an image model, the underlying process is the same: when the user clicks a button, the frontend organizes the input and sends a request; after the API returns a result, it displays the result on the page. Let's verify this through hands-on practice.
In `1.2 Building Your Prototype`, you already created an interactive prototype. What we need to do next is turn the "AI-like features" in the prototype into real, working capabilities: **when the user clicks a button, the prototype sends a request to an external AI service and displays the returned text.**
::: info ℹ️ Further Reading on Principles
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Large Language Models (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Learn More: What is DeepSeek?
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, operating under the brand name DeepSeek, is a **Chinese artificial intelligence (AI) company that develops large language models (LLMs)**. DeepSeek is headquartered in Hangzhou, Zhejiang, and is owned and funded by the Chinese hedge fund High-Flyer. DeepSeek was founded in July 2023 by Liang Wenfeng, co-founder of High-Flyer, who also serves as CEO of both companies. The company launched its eponymous chatbot and its DeepSeek-R1 model in January 2025.
Let's look at how DeepSeek compares with other top models in the GPQA benchmark rankings. Notably, DeepSeek is an open-source model (anyone can download the model from the internet), while other common models like Grok, Google Gemini, and ChatGPT are closed-source. As we can see, DeepSeek has largely caught up with the first tier of models.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
GPQA stands for "Graduate-Level Google-Proof Q&A Benchmark," a graduate-level benchmark for scientific question-answering tasks. Here's a detailed introduction.
GPQA contains 448 multiple-choice questions covering subfields of biology, physics, and chemistry, such as quantum mechanics, organic chemistry, molecular biology, and more. These questions were written by 61 experts who hold or are pursuing doctoral degrees and have undergone a rigorous validation process.
:::
Follow these 3 steps to quickly integrate a large model generation API:
1. **Create an API Key on the DeepSeek platform**
2. **Find the text generation example in the DeepSeek documentation** (there's usually ready-made code you can copy directly)
3. **Open the AI IDE, paste in the API Key + official example**, and tell the AI what functionality to implement:
> Help me integrate this large model's API to support the copywriting generation task for this application
Next, we'll walk through a demo. You can follow along with the entire process. First, register a [DeepSeek](https://platform.deepseek.com/usage) account, create an API Key, and top up a small amount for testing.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
Click "API KEYS" and find "create new API key" at the bottom of the screen. You'll end up with an API key that looks something like sk-8573341c39fc44315aadc071c53rh7d2.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
Once you have the key, you have permission to call the model.
At this point, you can directly read the [API](https://api-docs.deepseek.com/) documentation, which typically provides curl or Python call examples.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
After finding the example, you can copy all the content from the documentation along with your key into the AI IDE's chat box, asking it to help you integrate the large language model into the prototype you've already developed.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
Here's a reference prompt:
```
Based on this API call method, help me implement a copywriting generation feature that can generate Douyin (TikTok) e-commerce copy in various styles based on product information when clicked.
Reference materials:
api key: sk-8573341c39aefa1efe
api request reference:
curl \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
-d '{
"model": "deepseek-chat",
"messages": [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": "Hello!"}
],
"stream": false
}'
```
After some AI code generation, you'll easily get a corresponding copywriting generation button to test. If you can't find the entry point, you can ask the AI IDE to tell you which page leads to it. If you really can't find it, you can ask the AI IDE to directly refactor and improve based on your ideas to get the final copywriting generation result.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
Of course, you might be wondering: how do I know it's actually calling the large model and not just returning hardcoded responses? You can enter custom copy and have the large model generate corresponding content based on your custom analysis specified on the spot.
If you find that the results are different each time and logically coherent, you can be confident that the API is being called correctly. You can also check the [API usage management platform](https://platform.deepseek.com/usage) to see if the calls were successful (though it may take a few minutes to show up).
# 3. Integrating the Image-to-Text API: Qwen3 VL
::: info ℹ️ Further Reading on Principles
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Vision Language Models (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Learn More: What is Qwen3 VL?
**Qwen3 VL** is the latest version in the multimodal vision-language model series developed by Alibaba Cloud's Tongyi Qianwen team. VL stands for "Vision-Language," meaning it's a vision-language model. It can understand image content and generate text descriptions based on images, answer questions about images, extract information from images, and more.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
**Key capabilities of Qwen3 VL include:**
- **Image Understanding**: Can recognize objects, scenes, people, text, and other content in images
- **Visual Q&A**: Accurately answers questions about images based on user queries
- **Image Captioning**: Generates detailed or concise text descriptions of images
- **Multi-image Understanding**: Supports processing multiple images simultaneously for comparative analysis
- **Text Extraction**: Extracts text content from images (OCR capability)
**Why choose Qwen3 VL?**
Compared to the previous generation, Qwen3 VL has significantly improved image understanding accuracy and supports longer, more complex image analysis tasks. It excels in Chinese language understanding, has relatively low API call costs, and offers good value for money. Additionally, its larger context window enables it to handle more complex visual reasoning tasks.
**Typical use cases:**
- E-commerce: Automatically generate titles, descriptions, and selling points from product images
- Content creation: Automatically generate copy or image suggestions based on reference images
- Office: Image content extraction, automatic report recognition
- Education: Automatic parsing of image-based questions, knowledge point extraction
:::
In the previous section, we explained how to integrate a text generation API. But for the application scenario above, we'll notice a problem: we're uploading an image, and if we only use a large language model, it can't understand the content of the image very well, so the generated results may be off.
We want a model that can help us turn an image into a text description — this requires a Vision Language Model (VLM). In our case, we'll use a vision language model to generate product selling point descriptions, improving the user experience.
For convenience, we'll use the API provided by [SiliconFlow cloud platform](https://cloud.siliconflow.cn/me) to integrate the image-to-text API.
::: details Learn More: What is SiliconFlow?
**SiliconFlow** is a well-known AI model aggregation platform in China, providing API services for various mainstream large language models and vision language models.
**Platform features:**
- **Multi-model support**: Integrates various mainstream AI models, including DeepSeek, Qwen, Llama series, and other open-source models
- **Technical optimization**: Optimized inference for open-source models, providing low-latency, high-concurrency API services
- **Interface compatibility**: Provides OpenAI-compatible API interfaces for easy integration with existing applications
- **Pay-as-you-go**: Supports usage-based billing
SiliconFlow is relatively mature in inference services for open-source large models and is a common choice for using domestic open-source AI models.
:::
Go to the SiliconFlow platform homepage, where you'll see many models to choose from. Find the filter in the upper left corner, click to expand it, select the "Vision" tag, and you'll see many image-to-text models, such as Zhipu GLM-4.6V or Qwen3-VL.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
You can choose any one to test. Here we'll use `Qwen/Qwen3-VL-8B-Instruct` as an example.
![](../../../zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
Go to the [SiliconFlow platform](https://cloud.siliconflow.cn/me/account/ak), click "Create New API Key" in the API Keys section to create a new API Key.
You can directly use the code below as reference code, and send it along with the generated API Key to the AI IDE for feature integration.
::: details Image-to-Text Reference Code
```python
from openai import OpenAI
from typing import Dict, Any, List
import base64
import os
SILICONFLOW_API_KEY: str = ""
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
def encode_image(image_path: str) -> str:
with open(image_path, "rb") as image_file:
return base64.b64encode(image_file.read()).decode('utf-8')
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
response = client.chat.completions.create(
model=MODEL_NAME,
messages=messages,
max_tokens=512,
temperature=0.7,
top_p=0.7,
frequency_penalty=0.5,
stream=False,
n=1
)
return response.choices[0].message.content
def caption_image(image_path: str) -> str:
base64_image = encode_image(image_path)
messages = [
{
"role": "user",
"content": [
{
"type": "text",
"text": "Please describe this image in detail."
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/jpeg;base64,{base64_image}"
}
}
]
}
]
client = OpenAI(
api_key=SILICONFLOW_API_KEY,
base_url=SILICONFLOW_BASE_URL
)
return get_vlm_completion(client, messages)
image_path = "images.jpg"
caption = caption_image(image_path)
```
:::
docs/en-us/stage-2/index.md → docs/en/stage-2/index.md
View File
docs/en-us/stage-3/index.md → docs/en/stage-3/index.md
View File
docs/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture.md
+431 -525
View File
File diff suppressed because it is too large Load Diff
docs/zh-cn/appendix/4-server-and-backend/backend-project-architecture.md
+853 -646
View File
File diff suppressed because it is too large Load Diff
docs/zh-cn/appendix/5-data/data-governance.md
+212 -1
View File
@@ -1,3 +1,214 @@
# 数据治理与数据质量
> 待实现
::: tip 前言
**你有没有遇到过这种情况：报表上的数字和实际业务对不上，两个系统里同一个用户的信息不一样，或者分析结果因为脏数据完全不可信？** 数据治理就是解决这些问题的系统性方法。在"数据驱动决策"的时代，数据质量直接决定了决策质量——垃圾进，垃圾出（Garbage In, Garbage Out）。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **数据质量维度**：理解完整性、准确性、一致性等六大质量维度
- **数据治理体系**：了解从组织、流程到技术的治理框架
- **数据血缘**：掌握数据从源头到消费的全链路追踪
- **元数据管理**：理解"描述数据的数据"的重要性
- **数据分层架构**：掌握 ODS → DWD → DWS → ADS 的数仓分层模型
- **实战能力**：知道如何在项目中落地数据治理
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 数据质量维度 | 完整性、准确性、一致性、时效性 |
| **第 2 章** | 数据治理框架 | 组织、流程、技术、文化 |
| **第 3 章** | 数据血缘追踪 | 影响分析、问题排查、合规审计 |
| **第 4 章** | 元数据管理 | 技术元数据、业务元数据、操作元数据 |
| **第 5 章** | 数据分层架构 | ODS、DWD、DWS、ADS |
| **第 6 章** | 治理工具与实践 | Great Expectations、dbt、DataHub |
---
## 0. 全景图：为什么需要数据治理？
数据治理不是一个技术问题，而是一个**管理问题**。它回答的核心问题是：**谁对数据负责？数据的标准是什么？如何保证数据持续可信？**
想象一个公司有 100 个数据表，每个表由不同团队维护，没有统一的命名规范、没有数据字典、没有质量检查。结果就是：同一个"月活用户"指标，市场部算出来 500 万，产品部算出来 300 万——因为定义不一样。
::: tip 数据治理的四个支柱
1. **组织**：明确数据 Owner、数据管家（Data Steward）的角色和职责
2. **流程**：建立数据接入、变更、下线的标准流程
3. **技术**：部署数据质量监控、元数据管理、血缘追踪等工具
4. **文化**：让全公司认同"数据是资产"，而不是"数据是副产品"
:::
---
## 1. 数据质量的六个维度
数据质量不是一个模糊的概念，而是可以从六个具体维度来衡量的。每个维度都有明确的定义和检测方法。
<DataQualityDemo />
| 维度 | 定义 | 检测方法 | 常见问题 |
|------|------|---------|---------|
| 完整性 | 数据是否存在缺失 | 空值率检查 | 必填字段为空、关联数据缺失 |
| 准确性 | 数据是否正确 | 规则校验、抽样核对 | 金额为负、日期不合法 |
| 一致性 | 多源数据是否一致 | 跨系统比对 | CRM 和订单系统用户名不同 |
| 时效性 | 数据是否及时更新 | 更新时间检查 | 库存数据滞后、价格未同步 |
| 唯一性 | 是否存在重复记录 | 去重检查 | 同一用户注册两次 |
| 有效性 | 是否符合格式规则 | 正则/范围校验 | 邮箱格式错误、年龄为负数 |
::: tip 数据质量的 1-10-100 法则
- **1 元**：在数据入口做校验，预防脏数据进入
- **10 元**：在数据仓库中清洗已有的脏数据
- **100 元**：因为脏数据导致错误决策的损失
越早发现和修复数据质量问题，成本越低。
:::
---
## 2. 数据治理框架：全生命周期管理
数据治理不是一次性项目，而是贯穿数据全生命周期的持续过程。从数据的产生到销毁，每个阶段都需要明确的规范和责任人。
<DataGovernanceFrameworkDemo />
| 阶段 | 核心产出 | 关键角色 |
|------|---------|---------|
| 定义标准 | 数据字典、命名规范、分类分级标准 | 数据架构师 |
| 采集接入 | 接入规范、校验规则、血缘记录 | 数据工程师 |
| 存储管理 | 分层模型、权限矩阵、生命周期策略 | DBA / 平台工程师 |
| 使用消费 | 数据目录、脱敏规则、质量报告 | 数据分析师 / 业务方 |
| 归档销毁 | 归档策略、删除记录、审计日志 | 安全合规团队 |
## 2. 数据治理框架
数据治理不是买一个工具就能解决的，它需要一套完整的框架来支撑。业界最常用的参考框架是 DAMA-DMBOK（数据管理知识体系）。
| 治理领域 | 核心内容 | 关键产出 |
|---------|---------|---------|
| 数据架构 | 定义数据模型、数据流、存储策略 | 数据架构图、ER 图 |
| 数据标准 | 统一命名规范、编码规范、指标定义 | 数据字典、指标库 |
| 数据质量 | 建立质量规则、监控告警、修复流程 | 质量报告、SLA 仪表盘 |
| 数据安全 | 分级分类、访问控制、脱敏加密 | 安全策略、审计日志 |
| 主数据管理 | 统一客户、商品等核心实体的"黄金记录" | 主数据中心 |
| 数据生命周期 | 管理数据从创建到归档到销毁的全过程 | 保留策略、归档规则 |
::: tip 数据治理的成熟度模型
- **Level 1 - 初始级**：没有统一标准，各团队各自为政
- **Level 2 - 可重复级**：有基本的规范文档，但执行不一致
- **Level 3 - 已定义级**：有统一的治理流程和工具，大部分团队遵守
- **Level 4 - 已管理级**：有量化的质量指标和自动化监控
- **Level 5 - 优化级**：持续改进，数据治理融入日常开发流程
:::
---
## 3. 数据血缘：从哪来，到哪去
数据血缘（Data Lineage）记录了数据从源头到最终消费的完整流转路径。它就像数据的"族谱"，让你能追溯任何一个数据的来龙去脉。
<DataLineageDemo />
数据血缘在实际工作中有三个核心应用场景：
| 场景 | 问题 | 血缘如何帮助 |
|------|------|------------|
| 影响分析 | 要修改用户表的字段，会影响哪些下游报表？ | 沿血缘向下追踪所有依赖 |
| 根因定位 | 今天的 GMV 报表数据异常，问题出在哪一步？ | 沿血缘向上回溯每个环节 |
| 合规审计 | 用户的手机号经过了哪些系统？是否都做了脱敏？ | 追踪敏感字段的全链路流转 |
::: tip 血缘采集的两种方式
- **主动采集**：解析 SQL 语句、ETL 配置，自动提取表级/字段级血缘关系
- **被动采集**：通过 Hook 拦截查询引擎（如 Hive、Spark）的执行计划，实时记录血缘
主流工具如 Apache Atlas、DataHub、OpenLineage 都支持自动化血缘采集。
:::
---
## 4. 元数据管理："描述数据的数据"
元数据（Metadata）是关于数据的数据。如果数据是一本书的内容，元数据就是书的目录、作者、出版日期、ISBN 号。没有元数据，数据就是一堆无法理解的数字和字符串。
| 元数据类型 | 描述 | 示例 |
|-----------|------|------|
| 技术元数据 | 数据的物理存储信息 | 表名、字段类型、分区方式、存储位置 |
| 业务元数据 | 数据的业务含义 | 字段中文名、业务定义、计算口径 |
| 操作元数据 | 数据的运行状态 | ETL 执行时间、数据量、更新频率 |
::: tip 数据字典的重要性
数据字典是元数据管理最基础的产出。一个好的数据字典应该包含：
- **字段名**：英文名和中文名
- **数据类型**：VARCHAR(50)、INT、DATETIME 等
- **业务定义**：这个字段代表什么？怎么计算的？
- **取值范围**：有效值是什么？空值是否允许？
- **负责人**：谁维护这个字段？有问题找谁？
没有数据字典的团队，新人入职后理解一张表的含义可能需要一周；有数据字典的团队，10 分钟就够了。
:::
---
## 5. 数据分层架构：ODS → DWD → DWS → ADS
数据仓库不是把所有数据堆在一起，而是按照**加工程度**分层存储。每一层有明确的职责，上层依赖下层，逐步从原始数据提炼为业务可用的数据。
| 层级 | 全称 | 职责 | 数据特点 |
|------|------|------|---------|
| ODS | 操作数据层 | 原样同步业务数据库 | 最原始，未经处理 |
| DWD | 明细数据层 | 清洗、标准化、去重 | 干净的明细记录 |
| DWS | 汇总数据层 | 按主题聚合（日/周/月） | 预计算的聚合指标 |
| ADS | 应用数据层 | 面向具体报表/接口 | 直接可用的结果数据 |
::: tip 为什么要分层？
- **复用**：DWD 层清洗一次，所有上层共享，避免重复清洗
- **解耦**：业务库表结构变更只影响 ODS 层，不会波及报表
- **性能**：DWS 层预聚合，报表查询直接读取，不需要实时计算
- **可追溯**：每一层都保留，出问题时可以逐层排查
:::
---
## 6. 治理工具与实践
| 工具 | 定位 | 核心能力 | 适用场景 |
|------|------|---------|---------|
| Great Expectations | 数据质量 | 声明式数据校验规则，自动生成质量报告 | Python 数据管道 |
| dbt | 数据转换 | SQL 模型化开发，内置测试和文档生成 | 数仓建模 |
| DataHub | 元数据管理 | 数据目录、血缘追踪、数据发现 | 企业级数据治理 |
| Apache Atlas | 元数据管理 | Hadoop 生态血缘追踪 | 大数据平台 |
| OpenMetadata | 元数据管理 | 开源数据目录，支持多种数据源 | 中小团队 |
| Amundsen | 数据发现 | 搜索式数据发现平台 | 数据民主化 |
::: tip 从零开始的治理路径
如果你的团队还没有数据治理，建议按这个顺序推进：
1. **先建数据字典**：把现有的表和字段含义记录下来（哪怕用 Excel）
2. **加质量检查**：在关键数据管道中加入基本的空值、范围校验
3. **统一指标定义**：把"日活""月活""GMV"等核心指标的计算口径统一
4. **引入工具**：当手动管理成本太高时，引入 DataHub 或 dbt 等工具
5. **建立流程**：数据变更需要评审，质量问题有 SLA 和告警
:::
---
## 总结
数据治理是让数据从"能用"变成"好用、可信、可追溯"的系统性工程。它不是一次性项目，而是持续运营的过程。
回顾本章的关键要点：
1. **六大质量维度**：完整性、准确性、一致性、时效性、唯一性、有效性
2. **治理四支柱**：组织、流程、技术、文化缺一不可
3. **数据血缘**：追踪数据的来龙去脉，支撑影响分析和问题排查
4. **元数据管理**：数据字典是最基础也最重要的治理产出
5. **分层架构**：ODS → DWD → DWS → ADS，逐层提炼数据价值
6. **渐进式落地**：从数据字典开始，逐步引入工具和流程
## 延伸阅读
- [DAMA-DMBOK](https://www.dama.org/cpages/body-of-knowledge) - 数据管理知识体系，数据治理的"圣经"
- [DataHub](https://datahubproject.io/) - LinkedIn 开源的元数据管理平台
- [Great Expectations](https://greatexpectations.io/) - Python 数据质量框架
- [dbt](https://www.getdbt.com/) - 数据转换工具，内置测试和文档
- [Apache Atlas](https://atlas.apache.org/) - Hadoop 生态的元数据治理框架
- [The Data Warehouse Toolkit](https://www.kimballgroup.com/data-warehouse-business-intelligence-resources/books/) - Kimball 数仓建模经典
docs/zh-cn/appendix/5-data/data-visualization.md
+297 -1
View File
@@ -1,3 +1,299 @@
# 数据可视化与仪表盘
> 待实现
::: tip 前言
**一张好的图表胜过一千行数据。** 数据可视化是将抽象的数字转化为直观的视觉表达，让人能在几秒内理解数据背后的故事。从 Excel 图表到 Grafana 监控大屏，可视化无处不在。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **图表选择**：根据数据目的选择最合适的图表类型
- **可视化原则**：掌握数据可视化的核心设计原则
- **仪表盘设计**：了解不同类型仪表盘的布局模式
- **工具生态**：熟悉主流可视化工具的定位和选型
- **常见陷阱**：避免误导性图表和常见的可视化错误
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 图表类型选择 | 比较、趋势、占比、分布、关系 |
| **第 2 章** | 可视化设计原则 | 数据墨水比、一致性、可读性 |
| **第 3 章** | 仪表盘布局 | 概览型、对比型、下钻型、实时型 |
| **第 4 章** | 工具选型 | ECharts、D3、Grafana、Metabase |
| **第 5 章** | 常见陷阱 | 截断坐标轴、3D 饼图、颜色滥用 |
---
## 0. 全景图：为什么需要可视化？
人类大脑处理视觉信息的速度比处理文字快 6 万倍。一张折线图能让你在 1 秒内看出"上个月销售额在下降"，而同样的信息如果用表格呈现，你可能需要 30 秒才能得出结论。
可视化的核心价值：
- **发现模式**：趋势、周期、异常值在图表中一目了然
- **辅助决策**：让非技术人员也能理解数据，参与决策
- **沟通效率**：一图胜千言，减少数据解读的歧义
::: tip 可视化 ≠ 好看
可视化的目标是**传达信息**，不是炫技。一个朴素但准确的柱状图，远比一个花哨但难以理解的 3D 图表更有价值。
:::
---
## 1. 图表类型选择：用对图表讲对故事
选择图表的第一步不是"我喜欢什么图表"，而是"我想传达什么信息"。不同的数据目的对应不同的最佳图表类型。
<ChartTypeSelectorDemo />
### 图表选择速查表
| 数据目的 | 推荐图表 | 不推荐 | 原因 |
|---------|---------|--------|------|
| 比较大小 | 柱状图、条形图 | 饼图 | 人眼对长度差异比角度差异更敏感 |
| 展示趋势 | 折线图、面积图 | 柱状图 | 折线的连续性暗示时间的连续性 |
| 展示占比 | 饼图（≤5 类）、堆叠柱状图 | 3D 饼图 | 3D 透视会扭曲面积比例 |
| 展示分布 | 直方图、箱线图 | 折线图 | 分布需要看频率，不是趋势 |
| 展示关系 | 散点图、气泡图 | 柱状图 | 两个连续变量的关系需要二维空间 |
::: tip 一个简单的决策规则
- **一个变量** → 直方图（分布）或数字卡片（KPI）
- **两个变量** → 折线图（时间 vs 数值）或散点图（数值 vs 数值）
- **多个类别** → 柱状图（比较）或饼图（占比，≤5 类）
- **多维度** → 雷达图或平行坐标图
:::
---
## 2. 可视化设计原则
Edward Tufte 在《The Visual Display of Quantitative Information》中提出了数据可视化的核心原则，至今仍是行业标准。
| 原则 | 说明 | 反面案例 |
|------|------|---------|
| 数据墨水比 | 图表中用于展示数据的"墨水"占比应尽量高 | 过多的网格线、装饰性元素 |
| 最小化非数据元素 | 去除不传达信息的视觉元素 | 3D 效果、阴影、渐变背景 |
| 一致的比例尺 | 坐标轴从零开始，刻度均匀 | Y 轴从 95 开始（夸大差异） |
| 合理的颜色使用 | 用颜色编码信息，而非装饰 | 彩虹色（无序）表示有序数据 |
| 清晰的标注 | 标题、轴标签、图例缺一不可 | 没有单位、没有时间范围 |
::: tip 颜色使用的三条规则
1. **同一指标用同一颜色**：收入在所有图表中都用蓝色，不要一会蓝一会绿
2. **有序数据用渐变色**：温度从低到高用蓝→红渐变，不要用离散色
3. **考虑色盲友好**：约 8% 的男性有红绿色盲，避免仅用红绿区分关键信息
:::
---
## 2. 可视化设计原则：让数据说话
好的可视化不是"好看"，而是"好懂"。Edward Tufte 在《The Visual Display of Quantitative Information》中提出了几个经典原则，至今仍是可视化设计的黄金标准。
### 2.1 数据墨水比（Data-Ink Ratio）
> 图表中用于表达数据的"墨水"占总"墨水"的比例应该尽可能高。
简单说：**删掉一切不传达信息的元素**。
| 应该删掉的 | 应该保留的 |
|-----------|-----------|
| 3D 效果、阴影、渐变 | 数据点、坐标轴标签 |
| 多余的网格线 | 关键参考线（如目标值） |
| 装饰性图标 | 图例（当有多系列时） |
| 花哨的背景色 | 清晰的标题和单位 |
### 2.2 一致性原则
- **颜色一致**：同一个维度在不同图表中用同一种颜色（如"收入"始终用蓝色）
- **比例一致**：坐标轴从 0 开始（除非有充分理由），避免误导
- **时间一致**：时间轴的间隔应该均匀，不要跳跃
### 2.3 可读性原则
- **标题要说结论**：不是"月度销售额"，而是"销售额连续 3 个月下降"
- **标注关键点**：在异常值、拐点处加标注，引导读者注意力
- **控制信息密度**：一张图表传达 1-2 个核心信息，不要塞太多
::: tip Tufte 的名言
"Excellence in statistical graphics consists of complex ideas communicated with clarity, precision, and efficiency."（优秀的统计图形，是用清晰、精确、高效的方式传达复杂的想法。）
:::
---
## 3. 仪表盘布局：不同场景，不同模式
仪表盘（Dashboard）是多个图表的有机组合。好的仪表盘不是把图表堆在一起，而是根据使用场景选择合适的布局模式。
<DashboardLayoutDemo />
### 四种常见布局模式
| 布局模式 | 核心结构 | 适用场景 | 设计要点 |
|---------|---------|---------|---------|
| 全局概览型 | KPI 卡片 + 趋势图 + 明细表 | 管理层日报、运营大盘 | 核心指标放最上方，一眼看到关键数字 |
| 对比分析型 | 左右对称布局 | A/B 测试、同环比分析 | 保持对比维度一致，突出差异 |
| 下钻分析型 | 从汇总到明细逐层展开 | 销售分析、用户行为分析 | 支持点击交互，逐层深入 |
| 实时监控型 | 大数字 + 实时曲线 + 告警状态 | 双十一大屏、服务器监控 | 自动刷新，深色背景，适合投屏 |
### 仪表盘设计的 5 个原则
1. **先问"谁在看"**：CEO 看战略指标，运营看过程指标，工程师看技术指标
2. **5 秒规则**：用户应该在 5 秒内理解仪表盘的核心信息
3. **信息层次**：最重要的放左上角（F 型阅读模式），次要的放下方
4. **减少滚动**：一屏展示核心内容，避免用户需要滚动才能看到关键数据
5. **留白**：不要塞满每一寸空间，适当留白让视觉更舒适
::: tip 仪表盘 vs 报表
- **仪表盘**：实时/准实时，交互式，面向监控和快速决策
- **报表**：定期生成（日/周/月），静态，面向详细分析和存档
两者不是替代关系，而是互补关系。仪表盘发现问题，报表深入分析。
:::
---
## 4. 工具选型：从代码到拖拽
| 工具 | 类型 | 特点 | 适用场景 |
|------|------|------|---------|
| ECharts | JS 图表库 | 百度开源，图表类型丰富，中文文档完善 | 前端项目内嵌图表 |
| D3.js | JS 可视化库 | 底层灵活，可定制任意可视化效果 | 高度定制化需求 |
| Chart.js | JS 图表库 | 轻量简单，上手快 | 简单图表需求 |
| Grafana | 监控仪表盘 | 支持多数据源，实时刷新，告警集成 | 服务器/应用监控 |
| Metabase | BI 工具 | 开源，SQL 查询 + 拖拽建图 | 业务数据分析 |
| Superset | BI 工具 | Apache 开源，支持大数据源 | 企业级数据探索 |
| Tableau | 商业 BI | 拖拽式，交互能力强 | 企业级报表 |
::: tip 怎么选？
- **开发者做项目内嵌图表** → ECharts（功能全）或 Chart.js（轻量）
- **需要高度定制的可视化** → D3.js（学习曲线陡但无限可能）
- **运维监控大屏** → Grafana（行业标准）
- **业务团队自助分析** → Metabase（简单）或 Superset（功能强）
:::
---
## 4. 工具选型：从代码库到 BI 平台
可视化工具可以分为三个层次：底层绑定库、高层图表库、BI 平台。选择哪个取决于你的需求复杂度和团队技术能力。
### 4.1 代码级图表库
| 工具 | 语言/平台 | 特点 | 适用场景 |
|------|----------|------|---------|
| ECharts | JavaScript | 开箱即用，图表类型丰富，中文文档完善 | 业务系统内嵌图表 |
| D3.js | JavaScript | 底层灵活，可定制任何可视化效果 | 高度定制化的数据可视化 |
| Chart.js | JavaScript | 轻量简单，上手快 | 简单的图表需求 |
| Matplotlib | Python | 科学计算标准库，静态图表 | 数据分析、论文图表 |
| Plotly | Python/JS | 交互式图表，支持 3D | 数据探索、Jupyter Notebook |
### 4.2 BI 平台（无代码/低代码）
| 工具 | 定位 | 核心优势 | 适用团队 |
|------|------|---------|---------|
| Grafana | 监控可视化 | 时序数据支持好，告警集成 | 运维/SRE 团队 |
| Metabase | 轻量 BI | 开源免费，SQL 即可出图 | 中小团队快速搭建 |
| Apache Superset | 企业 BI | 开源，支持大数据源 | 有数据团队的公司 |
| Tableau | 商业 BI | 拖拽式操作，可视化效果好 | 业务分析师 |
| Power BI | 商业 BI | 与微软生态集成好 | 使用微软技术栈的企业 |
::: tip 选型建议
- **开发者做产品内嵌图表** → ECharts（中文生态好）或 Chart.js（简单场景）
- **数据分析师做探索分析** → Plotly + Jupyter 或 Metabase
- **运维监控大屏** → Grafana（事实标准）
- **业务团队自助分析** → Metabase（开源）或 Tableau（商业）
- **需要高度定制** → D3.js（学习曲线陡峭，但无所不能）
:::
---
## 5. 常见陷阱：这些图表在骗你
数据可视化是一把双刃剑——用得好能揭示真相，用得不好会制造谎言。以下是最常见的可视化陷阱，每个数据从业者都应该能识别。
### 5.1 截断坐标轴
把 Y 轴的起点从 0 改成一个较大的数字，会让微小的差异看起来像巨大的变化。
| 场景 | 真实差异 | 视觉感受 |
|------|---------|---------|
| Y 轴从 0 开始 | A 产品 98 分，B 产品 95 分 | 差距很小 |
| Y 轴从 90 开始 | 同样的数据 | A 看起来是 B 的好几倍 |
**什么时候可以截断？** 当数据的绝对值很大但变化很小时（如股价从 100 到 105），截断是合理的——但必须明确标注。
### 5.2 3D 饼图的透视陷阱
3D 透视会让靠近观察者的扇区看起来更大。一个 25% 的扇区在 3D 视角下可能看起来像 35%。
**解决方案**：永远不要用 3D 饼图。用普通饼图或环形图，或者干脆用柱状图。
### 5.3 颜色滥用
| 错误做法 | 正确做法 |
|---------|---------|
| 用红绿表示数据（色盲不友好） | 用蓝橙等色盲安全配色 |
| 每个类别用不同颜色（彩虹图） | 同一系列用同色系深浅变化 |
| 用颜色编码连续数据但不加图例 | 始终提供颜色图例和数值标注 |
| 背景色和数据色对比度不够 | 确保 WCAG AA 级对比度 |
### 5.4 其他常见错误
| 陷阱 | 问题 | 修复 |
|------|------|------|
| 双 Y 轴 | 两个不相关的指标共享 X 轴，暗示因果关系 | 拆成两张图，或明确说明无因果 |
| 面积误导 | 用圆的半径而非面积表示数值 | 数值翻倍时面积翻倍，不是半径翻倍 |
| 时间轴不均匀 | 1月、3月、12月的间距一样 | 按实际时间比例排列 |
| 过多类别 | 饼图有 15 个扇区 | 超过 5 个类别就用柱状图或合并"其他" |
::: tip 可视化的道德准则
可视化的目的是**帮助理解**，不是**操纵认知**。每次做图表时问自己：
- 如果我是读者，这张图会不会让我产生错误的结论？
- 我是否隐藏了不利的数据？
- 坐标轴、比例、颜色是否公正地呈现了数据？
:::
---
## 总结
数据可视化是数据价值传递的"最后一公里"。选对图表、遵循设计原则、避免常见陷阱，就能让数据真正"说话"。
回顾本章的关键要点：
1. **先问目的再选图表**：比较用柱状图、趋势用折线图、占比用饼图
2. **数据墨水比**：删掉一切不传达信息的视觉元素
3. **仪表盘有模式**：概览型、对比型、下钻型、实时型各有适用场景
4. **工具按需选**：ECharts 做产品、Grafana 做监控、Metabase 做分析
5. **警惕视觉陷阱**：截断坐标轴、3D 饼图、颜色滥用都会误导读者
## 延伸阅读
- [ECharts 官方文档](https://echarts.apache.org/zh/index.html) - 最流行的中文图表库
- [D3.js](https://d3js.org/) - 数据驱动的可视化库
- [Grafana](https://grafana.com/) - 开源监控可视化平台
- [The Visual Display of Quantitative Information](https://www.edwardtufte.com/tufte/books_vdqi) - Tufte 的可视化经典
- [From Data to Viz](https://www.data-to-viz.com/) - 图表类型选择指南
---
## 总结
数据可视化是数据价值传递的"最后一公里"。再好的分析，如果不能被正确理解，就等于没有分析。
回顾本章的关键要点：
1. **选对图表**：根据数据目的（比较、趋势、占比、分布、关系）选择图表类型
2. **设计原则**：高数据墨水比、一致性、可读性是三大核心原则
3. **仪表盘布局**：概览型、对比型、下钻型、实时型四种模式覆盖大部分场景
4. **工具选型**：从 ECharts 到 Grafana，根据团队能力和需求复杂度选择
5. **避免陷阱**：截断坐标轴、3D 饼图、颜色滥用是最常见的误导手段
## 延伸阅读
- [The Visual Display of Quantitative Information](https://www.edwardtufte.com/tufte/books_vdqi) - Edward Tufte 的可视化经典
- [ECharts 官方文档](https://echarts.apache.org/zh/index.html) - 最流行的中文图表库
- [D3.js](https://d3js.org/) - 最强大的底层可视化库
- [Grafana](https://grafana.com/) - 监控可视化事实标准
- [From Data to Viz](https://www.data-to-viz.com/) - 图表类型选择决策树
- [ColorBrewer](https://colorbrewer2.org/) - 色盲安全的配色方案工具
docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md
+251 -1
View File
@@ -1,3 +1,253 @@
# 分布式系统的挑战
> 待实现
::: tip 前言
**当一台机器不够用时，问题才真正开始。** 分布式系统是现代互联网的基石——从微信消息到淘宝下单，背后都是成百上千台机器协同工作。但"分布式"不是免费的午餐，它带来了一系列单机系统从未遇到的挑战。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **核心定理**：理解 CAP 定理及其对系统设计的影响
- **一致性模型**：区分强一致性、最终一致性、因果一致性
- **八大挑战**：掌握分布式系统面临的核心难题
- **共识算法**：了解 Paxos、Raft 等分布式共识的基本思想
- **实战模式**：熟悉 2PC、Saga、CRDT 等常用解决方案
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 为什么需要分布式 | 扩展性、可用性、地理分布 |
| **第 2 章** | CAP 定理 | 一致性、可用性、分区容错 |
| **第 3 章** | 一致性模型 | 强一致、最终一致、因果一致 |
| **第 4 章** | 八大挑战 | 网络、时钟、分区、脑裂等 |
| **第 5 章** | 共识算法 | Paxos、Raft、ZAB |
| **第 6 章** | 分布式事务 | 2PC、Saga、TCC |
---
## 0. 全景图：为什么需要分布式系统？
单机系统简单可靠，但有三个无法逾越的瓶颈：
| 瓶颈 | 说明 | 分布式的解法 |
|------|------|-------------|
| 性能上限 | 单机 CPU、内存、磁盘有物理极限 | 水平扩展：加更多机器分担负载 |
| 单点故障 | 一台机器挂了，整个服务就挂了 | 冗余副本：多台机器互为备份 |
| 地理延迟 | 用户在全球各地，单机只能在一个地方 | 多地部署：就近服务用户 |
::: tip 分布式的代价
分布式系统解决了上面的问题，但引入了新的复杂性：网络不可靠、时钟不同步、部分失败、数据一致性……这些就是本文要讨论的"挑战"。
**Peter Deutsch 的分布式计算八大谬误**告诉我们，以下假设在分布式环境中都是错的：
1. 网络是可靠的
2. 延迟是零
3. 带宽是无限的
4. 网络是安全的
5. 拓扑不会变化
6. 只有一个管理员
7. 传输成本是零
8. 网络是同构的
:::
---
## 1. CAP 定理：分布式系统的"不可能三角"
2000 年，Eric Brewer 提出了 CAP 猜想（后被证明为定理）：一个分布式系统最多只能同时满足以下三个属性中的两个。
| 属性 | 含义 | 通俗理解 |
|------|------|---------|
| **C**onsistency（一致性） | 所有节点在同一时刻看到相同的数据 | 你在任何 ATM 查余额，结果都一样 |
| **A**vailability（可用性） | 每个请求都能收到非错误的响应 | 系统永远能回应你，不会说"服务不可用" |
| **P**artition tolerance（分区容错） | 网络分区时系统仍能继续运行 | 即使部分网线断了，系统还能工作 |
<CAPTheoremDemo />
### 为什么只能选两个？
在分布式环境中，网络分区（P）是不可避免的——光纤会被挖断、交换机会故障、数据中心会断网。所以 P 是必选项，实际的选择是在 C 和 A 之间权衡：
- **选 CP**：分区时拒绝不确定的请求，保证数据正确 → 适合金融、库存
- **选 AP**：分区时继续服务，但数据可能暂时不一致 → 适合社交、内容
::: tip CAP 不是非黑即白
现实中的系统不是简单的"CP 或 AP"。很多系统在不同操作上做不同的选择——比如同一个数据库，读操作可以是 AP（允许读旧数据），写操作可以是 CP（要求多数确认）。
:::
---
## 2. 一致性模型：数据同步的"严格程度"
一致性不是一个开关（有或没有），而是一个光谱。不同的一致性模型在"正确性"和"性能"之间做不同的权衡。
<ConsistencyModelsDemo />
### 一致性模型对比
| 模型 | 保证 | 延迟 | 适用场景 |
|------|------|------|---------|
| 强一致性 | 读到的一定是最新写入的值 | 高（需等待同步） | 银行转账、库存扣减 |
| 最终一致性 | 最终所有副本会一致，但中间可能读到旧值 | 低（写入立即返回） | 社交动态、DNS |
| 因果一致性 | 有因果关系的操作保证顺序 | 中等 | 评论回复、协作编辑 |
| 线性一致性 | 所有操作看起来像在单机上按顺序执行 | 最高 | 分布式锁、选主 |
| 会话一致性 | 同一会话内保证读到自己的写入 | 低-中 | 用户个人数据 |
::: tip "读己之写"一致性
最常见的实际需求是：用户修改了自己的数据后，自己能立即看到更新（但其他用户可以稍后看到）。这叫"Read Your Own Writes"一致性，是最终一致性的一个实用增强。
:::
---
## 3. 八大挑战：分布式系统的"地雷阵"
分布式系统的复杂性不是来自某一个问题，而是多个问题交织在一起。以下是最核心的八大挑战。
<DistributedChallengesDemo />
### 挑战之间的关联
这八大挑战不是孤立的，它们相互关联：
- **网络不可靠** → 导致 **网络分区** → 触发 **CAP 权衡**
- **时钟不同步** → 导致 **事件排序困难** → 影响 **数据一致性**
- **部分失败** → 可能导致 **脑裂** → 需要 **共识算法** 来解决
- **数据一致性** → 需要 **分布式事务** → 但事务又受 **网络不可靠** 影响
::: tip 没有银弹
分布式系统没有"完美"的解决方案，只有"合适"的权衡。理解这些挑战的本质，才能在设计系统时做出正确的取舍。
:::
---
## 4. 共识算法：如何让多台机器"达成一致"
共识算法是分布式系统的核心——它解决的问题是：多个节点如何就某个值达成一致？即使部分节点故障或网络延迟。
### 4.1 Paxos
Leslie Lamport 在 1990 年提出，是第一个被严格证明正确的共识算法。
| 角色 | 职责 |
|------|------|
| Proposer | 提出提案（值） |
| Acceptor | 投票接受或拒绝提案 |
| Learner | 学习最终被选定的值 |
**两阶段流程**：
1. **Prepare 阶段**：Proposer 发送提案编号，Acceptor 承诺不再接受更小编号的提案
2. **Accept 阶段**：Proposer 发送具体值，多数 Acceptor 接受则提案通过
::: tip Paxos 的问题
Paxos 虽然正确，但出了名的难以理解和实现。Lamport 自己的论文用了一个希腊议会的比喻，结果让更多人困惑了。
:::
### 4.2 Raft：为可理解性而生
2014 年 Diego Ongaro 提出 Raft，目标是做一个"容易理解的 Paxos"。它把共识问题分解为三个子问题：
| 子问题 | 说明 |
|--------|------|
| Leader 选举 | 集群中选出一个 Leader，所有写入都经过 Leader |
| 日志复制 | Leader 将操作日志复制到所有 Follower |
| 安全性 | 保证已提交的日志不会被覆盖 |
**Raft 的核心流程**：
1. 集群启动时，所有节点都是 Follower
2. 如果 Follower 超时没收到 Leader 心跳，就变成 Candidate 发起选举
3. 获得多数票的 Candidate 成为新 Leader
4. Leader 接收客户端请求，将日志复制到多数节点后提交
### 4.3 共识算法对比
| 算法 | 提出时间 | 可理解性 | 使用系统 |
|------|---------|---------|---------|
| Paxos | 1990 | 困难 | Google Chubby |
| Raft | 2014 | 容易 | etcd、Consul、TiKV |
| ZAB | 2011 | 中等 | ZooKeeper |
| EPaxos | 2013 | 困难 | 学术研究为主 |
---
## 5. 分布式事务：跨节点的"全有或全无"
单机数据库的事务靠本地锁和日志就能实现 ACID。但当一个业务操作涉及多个服务/数据库时，如何保证原子性？
### 5.1 两阶段提交（2PC）
最经典的分布式事务协议，分为两个阶段：
| 阶段 | 协调者动作 | 参与者动作 |
|------|-----------|-----------|
| Prepare | 问所有参与者"能提交吗？" | 执行操作但不提交，回复 Yes/No |
| Commit | 如果全部 Yes，发送 Commit | 正式提交；如果有 No，全部回滚 |
**2PC 的问题**：
- **阻塞**：Prepare 后如果协调者挂了，参与者会一直等待
- **单点故障**：协调者是单点，挂了整个事务卡住
- **性能差**：需要多次网络往返，锁持有时间长
### 5.2 Saga 模式
Saga 把一个大事务拆成多个本地事务，每个本地事务有对应的补偿操作。如果某一步失败，就逆序执行补偿。
**电商下单的 Saga 示例**：
| 步骤 | 正向操作 | 补偿操作 |
|------|---------|---------|
| T1 | 创建订单（待支付） | 取消订单 |
| T2 | 扣减库存 | 恢复库存 |
| T3 | 扣减余额 | 退还余额 |
| T4 | 确认订单（已支付） | — |
如果 T3（扣减余额）失败：执行 C2（恢复库存）→ C1（取消订单）。
**两种编排方式**：
- **编排式（Choreography）**：每个服务监听事件，自行决定下一步。简单但难以追踪全局状态
- **协调式（Orchestration）**：有一个中心协调者控制流程。清晰但协调者是单点
### 5.3 TCC（Try-Confirm-Cancel）
TCC 是 2PC 的业务层实现，把每个操作分为三个阶段：
| 阶段 | 说明 | 示例（扣库存） |
|------|------|---------------|
| Try | 预留资源，但不真正执行 | 冻结 10 件库存（可用库存 -10，冻结库存 +10） |
| Confirm | 确认执行，消耗预留资源 | 冻结库存 -10（真正扣减） |
| Cancel | 取消预留，释放资源 | 冻结库存 -10，可用库存 +10（恢复） |
### 5.4 三种方案对比
| 方案 | 一致性 | 性能 | 复杂度 | 适用场景 |
|------|--------|------|--------|---------|
| 2PC | 强一致 | 低 | 中 | 数据库层面的跨库事务 |
| Saga | 最终一致 | 高 | 高 | 长流程业务（订单、物流） |
| TCC | 最终一致 | 中 | 最高 | 资金类高可靠场景 |
::: tip 实际选择建议
- 能用单库事务就不要用分布式事务
- 大多数业务场景用 Saga + 消息队列就够了
- TCC 适合对一致性要求极高的金融场景，但开发成本很高
- 2PC 适合数据库中间件（如 ShardingSphere）自动处理
:::
---
## 总结
分布式系统是现代互联网的基础设施，但它的复杂性远超单机系统。理解这些挑战不是为了"解决"它们（很多是根本性的），而是为了在设计系统时做出正确的权衡。
回顾本章的关键要点：
1. **CAP 定理**：网络分区不可避免，实际选择是在一致性和可用性之间权衡
2. **一致性模型**：从强一致到最终一致是一个光谱，根据业务需求选择
3. **八大挑战**：网络不可靠、时钟不同步、网络分区、脑裂等相互关联
4. **共识算法**：Raft 是目前最实用的共识算法，etcd/Consul 都基于它
5. **分布式事务**：Saga 适合大多数场景，TCC 适合金融场景，2PC 适合数据库层
## 延伸阅读
- [Designing Data-Intensive Applications](https://dataintensive.net/) - Martin Kleppmann 的分布式系统经典
- [The Raft Consensus Algorithm](https://raft.github.io/) - Raft 官方可视化演示
- [CAP Twelve Years Later](https://www.infoq.com/articles/cap-twelve-years-later-how-the-rules-have-changed/) - Brewer 对 CAP 的重新审视
- [Jepsen](https://jepsen.io/) - 分布式系统正确性测试框架
- [分布式系统模式](https://martinfowler.com/articles/patterns-of-distributed-systems/) - Martin Fowler 的分布式模式合集
docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md
+202 -1
View File
@@ -1,3 +1,204 @@
# 高可用与容灾
> 待实现
::: tip 前言
**系统挂了 1 分钟，可能意味着几十万的损失。** 高可用（High Availability）是指系统在面对硬件故障、软件 Bug、网络问题等异常情况时，仍能持续提供服务的能力。容灾（Disaster Recovery）则是在更大范围的灾难发生时，系统能够恢复服务的能力。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **可用性度量**：理解"几个 9"的含义和对应的停机时间
- **故障转移**：掌握主备、主主、多活等高可用架构
- **容灾策略**：了解 RPO 和 RTO 的概念及设计方法
- **故障检测**：理解心跳、探针、熔断等故障发现机制
- **混沌工程**：了解如何主动注入故障来验证系统韧性
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 可用性度量 | SLA、几个 9、停机时间 |
| **第 2 章** | 故障转移架构 | 主备、主主、多可用区、异地多活 |
| **第 3 章** | 容灾设计 | RPO、RTO、备份策略 |
| **第 4 章** | 故障检测与恢复 | 心跳、熔断、自动扩缩容 |
| **第 5 章** | 混沌工程 | 故障注入、韧性验证 |
---
## 1. 可用性度量：几个 9 意味着什么？
可用性通常用"几个 9"来衡量，计算公式为：
**可用性 = 正常运行时间 / 总时间 × 100%**
例如一个月（30 天 = 43200 分钟）内停机了 43 分钟，可用性就是 (43200 - 43) / 43200 ≈ 99.9%。每多一个 9，允许的停机时间就少一个数量级，实现难度和成本也指数级增长。
| 可用性等级 | 百分比 | 每月允许停机 | 每年允许停机 | 典型要求 |
|-----------|--------|------------|------------|---------|
| 2 个 9 | 99% | 7.3 小时 | 3.65 天 | 内部工具 |
| 3 个 9 | 99.9% | 43 分钟 | 8.76 小时 | 普通业务系统 |
| 4 个 9 | 99.99% | 4.3 分钟 | 52.6 分钟 | 电商、SaaS |
| 5 个 9 | 99.999% | 26 秒 | 5.26 分钟 | 金融、支付 |
<AvailabilityCalculatorDemo />
::: tip SLA 是什么？
**SLA（Service Level Agreement，服务等级协议）** 是服务提供方与客户之间的正式承诺。比如 AWS S3 承诺 99.99% 的可用性，如果没达到，会按比例退款。SLA 不只是技术指标，更是商业合同——违反 SLA 意味着赔钱。
:::
::: tip 从 3 个 9 到 4 个 9 的鸿沟
3 个 9（99.9%）意味着每月可以停机 43 分钟——一次部署出问题，回滚一下就用完了。
4 个 9（99.99%）意味着每月只能停机 4 分钟——这要求你必须有自动故障转移、滚动部署、健康检查等完整的高可用体系。
:::
---
## 2. 故障转移架构
故障转移（Failover）是高可用的核心机制：当主节点故障时，自动切换到备用节点继续提供服务。
### 主备模式（Active-Standby）
最常见的高可用架构。主节点处理所有请求，备节点实时同步数据但不处理请求。主节点故障时，备节点自动接管。
```
正常状态：
客户端 → 主节点（处理请求）
备节点（同步数据，待命）
故障转移：
客户端 → 备节点（接管为新主节点）
原主节点（故障，等待修复）
```
关键问题是**脑裂（Split Brain）**：网络分区时，主备节点都认为对方挂了，同时对外提供服务，导致数据不一致。解决方案是引入**仲裁节点（Quorum）**——至少 3 个节点投票决定谁是主节点。
### 多可用区（Multi-AZ）
将服务部署在同一地域的多个数据中心（可用区）。单个数据中心断电、断网不影响整体服务。云厂商的可用区之间通常有低延迟专线连接（< 2ms）。
### 异地多活（Multi-Region Active-Active）
在不同城市甚至不同国家部署完整的服务副本，每个站点都能独立处理请求。这是最高级别的高可用架构，但也最复杂——核心挑战是**跨地域数据同步**的延迟和一致性问题。
<FailoverStrategyDemo />
| 架构 | 可用性级别 | 成本 | 复杂度 | 适用场景 |
|------|-----------|------|--------|---------|
| 单机 | 99%~99.9% | 低 | 低 | 开发测试、内部工具 |
| 主备 | 99.9%~99.99% | 中 | 中 | 中小型业务系统 |
| 多可用区 | 99.99% | 高 | 高 | 电商、SaaS 平台 |
| 异地多活 | 99.999% | 极高 | 极高 | 金融、大型互联网 |
---
## 3. 容灾设计：RPO 与 RTO
容灾设计围绕两个核心指标展开：
| 指标 | 全称 | 含义 | 举例 |
|------|------|------|------|
| RPO | Recovery Point Objective | 能容忍丢失多少数据 | RPO=0 表示不能丢任何数据 |
| RTO | Recovery Time Objective | 能容忍停机多长时间 | RTO=5min 表示 5 分钟内恢复 |
### 备份策略与 RPO 的关系
| 备份方式 | RPO | 成本 | 说明 |
|---------|-----|------|------|
| 每日全量备份 | 24 小时 | 低 | 最多丢一天数据 |
| 实时增量备份 | 分钟级 | 中 | binlog/WAL 持续同步 |
| 同步复制 | 0 | 高 | 写入必须等副本确认 |
::: tip 不是所有数据都需要 RPO=0
用户头像丢了可以重新上传（RPO=24h 够了），但支付记录一条都不能丢（RPO=0）。根据数据的业务价值来决定备份策略，而不是一刀切。
:::
---
## 4. 故障检测与恢复
### 4.1 故障检测机制
| 机制 | 原理 | 检测速度 | 适用场景 |
|------|------|---------|---------|
| 心跳检测 | 定期发送心跳包，超时判定故障 | 秒级 | 节点存活检测 |
| 健康检查 | HTTP/TCP 探针检查服务状态 | 秒级 | 负载均衡器后端检测 |
| 业务探针 | 模拟真实请求检查业务逻辑 | 秒~分钟级 | 端到端可用性监控 |
**心跳检测的工作原理**：节点 A 每隔固定时间（如 5 秒）向监控方发送一个"我还活着"的信号。如果连续 N 次（如 3 次）没收到心跳，就判定节点 A 故障。关键参数是**心跳间隔**和**超时阈值**——间隔太短会增加网络开销，太长会延迟故障发现。
**健康检查的三种级别**：
- **存活探针（Liveness）**：进程还在运行吗？不在就重启
- **就绪探针（Readiness）**：服务能接受请求吗？不能就从负载均衡中摘除
- **启动探针（Startup）**：服务启动完成了吗？没完成就等待，不要误判为故障
### 4.2 自动恢复机制
| 机制 | 描述 | 典型工具 |
|------|------|---------|
| 自动重启 | 进程崩溃后自动拉起 | systemd、PM2、K8s |
| 自动扩缩容 | 负载升高时自动增加实例 | K8s HPA、云厂商 Auto Scaling |
| 熔断降级 | 下游故障时快速失败，防止级联故障 | Hystrix、Sentinel、Resilience4j |
| 限流 | 超过容量的请求直接拒绝 | Nginx limit_req、网关限流 |
**熔断器模式（Circuit Breaker）详解**：
熔断器的灵感来自电路中的保险丝——当电流过大时自动断开，保护整个电路不被烧毁。在微服务中，当下游服务故障时，熔断器会"断开"，让请求快速失败，而不是傻等超时。
```
熔断器三种状态：
关闭（正常）──→ 失败率超过阈值 ──→ 打开（熔断）
↑ │
│ 等待冷却时间
│ ↓
└── 探测请求成功 ←── 半开（试探）
```
- **关闭状态**：正常转发请求，同时统计失败率
- **打开状态**：所有请求直接返回错误（快速失败），不再调用下游
- **半开状态**：冷却时间到后，放行少量探测请求。如果成功，恢复关闭；如果失败，继续打开
**降级（Fallback）** 是熔断的配套策略：熔断触发后，不是直接报错，而是返回一个"兜底"结果。比如推荐服务挂了，就返回热门商品列表；用户头像加载失败，就显示默认头像。
---
## 5. 混沌工程：主动找问题
混沌工程的核心理念是：**与其等故障发生，不如主动制造故障**，在可控环境中验证系统的韧性。
| 工具 | 提出者 | 核心能力 |
|------|--------|---------|
| Chaos Monkey | Netflix | 随机终止生产环境的实例 |
| Chaos Mesh | PingCAP | K8s 环境下的故障注入 |
| Litmus | CNCF | 云原生混沌工程框架 |
| ChaosBlade | 阿里巴巴 | 多场景故障注入工具 |
::: tip 混沌工程的实施步骤
1. **定义稳态**：明确系统正常运行的指标（如 P99 延迟 < 200ms）
2. **提出假设**：如果某个节点挂了，系统应该在 30 秒内自动恢复
3. **注入故障**：在可控范围内制造故障（先在测试环境，再到生产）
4. **观察结果**：系统是否如预期恢复？有没有级联故障？
5. **修复弱点**：发现问题后改进架构和流程
:::
---
## 总结
高可用不是一个功能，而是一种架构能力。它需要从设计、开发、部署、运维的每个环节去保障。
回顾本章的关键要点：
1. **几个 9**：每多一个 9，停机时间少一个数量级，成本和复杂度指数增长
2. **故障转移**：从主备到异地多活，根据业务需求选择合适的架构
3. **RPO 与 RTO**：根据数据价值和业务容忍度设计备份和恢复策略
4. **自动化**：故障检测、自动重启、熔断降级是高可用的基础设施
5. **混沌工程**：主动制造故障，在可控环境中验证系统韧性
## 延伸阅读
- [Site Reliability Engineering](https://sre.google/sre-book/table-of-contents/) - Google SRE 经典
- [Chaos Monkey](https://netflix.github.io/chaosmonkey/) - Netflix 混沌工程工具
- [Release It!](https://pragprog.com/titles/mnee2/release-it-second-edition/) - 生产环境设计模式
- [Chaos Mesh](https://chaos-mesh.org/) - K8s 混沌工程平台
docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md
+154 -1
View File
@@ -1,3 +1,156 @@
# 从单体到微服务的演进
> 待实现
::: tip 前言
**没有哪个架构是"最好的"，只有"最适合当前阶段的"。** 从单体到微服务不是一步到位的跳跃，而是随着业务规模和团队规模增长，逐步演进的过程。过早拆分微服务和过晚拆分一样危险。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **演进路径**：理解从单体到微服务的四个阶段
- **拆分时机**：知道什么时候该拆、什么时候不该拆
- **拆分策略**：掌握按业务域拆分的方法论
- **通信模式**：了解服务间同步和异步通信的选择
- **数据拆分**：理解数据库拆分的挑战和方案
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 架构演进路径 | 单体→模块化→SOA→微服务 |
| **第 2 章** | 拆分时机与原则 | Conway 定律、团队自治 |
| **第 3 章** | 拆分策略 | DDD 限界上下文、绞杀者模式 |
| **第 4 章** | 服务通信 | REST、gRPC、消息队列 |
| **第 5 章** | 数据拆分 | 数据库拆分、数据同步 |
---
## 1. 架构演进路径
架构演进不是技术驱动的，而是**组织规模驱动的**。当团队从 5 人增长到 500 人时，单体架构的协作效率会急剧下降。
| 阶段 | 架构 | 团队规模 | 特点 |
|------|------|---------|------|
| 起步期 | 单体应用 | 1~10 人 | 所有代码在一个项目中，部署简单 |
| 成长期 | 模块化单体 | 10~50 人 | 代码按模块划分，但仍然一起部署 |
| 扩张期 | SOA（面向服务） | 50~200 人 | 按业务线拆分为粗粒度服务 |
| 规模期 | 微服务 | 200+ 人 | 细粒度服务，每个团队独立开发部署 |
<ArchEvolutionDemo />
::: tip Conway 定律
"设计系统的组织，其产生的架构等同于组织的沟通结构。"——Melvin Conway
简单说：3 个团队做一个系统，最终会变成 3 个服务。架构拆分的本质是**组织拆分**。
**反向 Conway 定律**：既然组织结构决定了系统架构，那么想要什么样的架构，就先调整成什么样的组织结构。比如你想拆出独立的支付服务，就先组建一个独立的支付团队。很多公司微服务拆分失败，不是技术问题，而是组织没有跟着调整。
:::
---
## 2. 什么时候该拆微服务？
不是所有系统都需要微服务。过早拆分会带来不必要的复杂性。
| 信号 | 说明 | 建议 |
|------|------|------|
| 部署冲突频繁 | 多个团队改同一个代码库，经常冲突 | 考虑拆分 |
| 某模块需要独立扩容 | 搜索模块需要 10 倍于其他模块的资源 | 考虑拆分 |
| 技术栈需要差异化 | AI 模块用 Python，主站用 Java | 考虑拆分 |
| 团队 < 10 人 | 沟通成本低，单体足够 | 不要拆 |
| 业务还在探索期 | 需求变化快，边界不清晰 | 不要拆 |
| 没有 DevOps 能力 | 没有 CI/CD、容器化、监控体系 | 不要拆 |
---
## 3. 拆分策略
### 3.1 按业务域拆分（DDD 限界上下文）
DDD（领域驱动设计）的限界上下文（Bounded Context）是拆分微服务的最佳指导原则。每个限界上下文对应一个独立的业务域，有自己的数据模型和业务规则。
**什么是限界上下文？** 同一个词在不同业务域中含义不同。比如"用户"在用户域是指注册信息（姓名、邮箱），在订单域是指下单人（收货地址、支付方式），在推荐域是指行为画像（浏览历史、偏好标签）。限界上下文就是划定一个边界，在这个边界内，术语和模型有明确统一的含义。
```
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 用户域 │ │ 订单域 │ │ 支付域 │
│ │ │ │ │ │
│ User │ │ Order │ │ Payment │
│ Profile │ │ OrderItem │ │ Refund │
│ Address │ │ Cart │ │ Transaction │
│ │ │ │ │ │
│ 用户服务 │ │ 订单服务 │ │ 支付服务 │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
└────── API 调用 / 事件通信 ───────┘
```
| 限界上下文 | 核心实体 | 对应服务 |
|-----------|---------|---------|
| 用户域 | User、Profile、Address | 用户服务 |
| 商品域 | Product、Category、SKU | 商品服务 |
| 订单域 | Order、OrderItem | 订单服务 |
| 支付域 | Payment、Refund | 支付服务 |
| 物流域 | Shipment、Tracking | 物流服务 |
### 3.2 绞杀者模式（Strangler Fig Pattern）
不要一次性重写整个单体，而是像绞杀榕一样，逐步用新服务替换旧模块：
1. 在单体外部创建新服务
2. 通过代理层将部分流量路由到新服务
3. 验证新服务稳定后，逐步迁移更多流量
4. 最终完全替换旧模块
---
## 4. 服务通信模式
| 方式 | 协议 | 特点 | 适用场景 |
|------|------|------|---------|
| REST | HTTP/JSON | 简单通用，生态好 | 对外 API、CRUD 操作 |
| gRPC | HTTP/2 + Protobuf | 高性能，强类型 | 内部服务间高频调用 |
| 消息队列 | AMQP/Kafka | 异步解耦，削峰填谷 | 事件通知、异步任务 |
| GraphQL | HTTP/JSON | 客户端按需查询 | BFF 层、移动端 |
::: tip 同步 vs 异步的选择
- **需要立即返回结果** → 同步（REST/gRPC）
- **不需要立即返回** → 异步（消息队列）
- **一个事件触发多个动作** → 异步（发布-订阅）
经验法则：能异步就异步，同步调用链越长，系统越脆弱。
:::
---
## 5. 数据拆分：最难的部分
微服务拆分中最痛苦的不是代码拆分，而是数据库拆分。每个服务应该拥有自己的数据库，但这意味着跨服务查询变得困难。
| 挑战 | 描述 | 解决方案 |
|------|------|---------|
| 跨服务 JOIN | 不能直接 JOIN 两个服务的表 | API 组合查询、数据冗余 |
| 分布式事务 | 跨库事务无法用本地事务 | Saga、本地消息表 |
| 数据一致性 | 多个服务的数据可能暂时不一致 | 最终一致性、事件驱动 |
| 数据迁移 | 从共享库迁移到独立库 | 双写过渡、数据同步工具 |
---
## 总结
从单体到微服务是一个渐进的过程，不是一蹴而就的革命。
回顾本章的关键要点：
1. **演进路径**：单体→模块化单体→SOA→微服务，每一步都有明确的驱动力
2. **拆分时机**：团队规模、部署冲突、扩容需求是拆分的信号
3. **拆分策略**：用 DDD 限界上下文指导拆分，用绞杀者模式渐进迁移
4. **通信选择**：能异步就异步，同步调用链越短越好
5. **数据拆分**：最难但最重要，接受最终一致性是关键心态转变
## 延伸阅读
- [Building Microservices](https://www.oreilly.com/library/view/building-microservices-2nd/9781492034018/) - Sam Newman 微服务经典
- [Monolith to Microservices](https://www.oreilly.com/library/view/monolith-to-microservices/9781492047834/) - 渐进式迁移指南
- [Domain-Driven Design](https://www.domainlanguage.com/ddd/) - Eric Evans 的 DDD 经典
- [The Strangler Fig Pattern](https://martinfowler.com/bliki/StranglerFigApplication.html) - Martin Fowler 的绞杀者模式
docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md
+250 -1
View File
@@ -1,3 +1,252 @@
# 系统设计方法论
> 待实现
::: tip 前言
**系统设计不是拍脑袋画架构图，而是一套有章可循的方法论。** 无论是面试中的系统设计题，还是实际工作中的架构设计，都遵循相似的思考框架：先搞清楚问题，再估算规模，然后设计方案，最后深入优化。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **设计流程**：掌握系统设计的四步法框架
- **容量估算**：学会"信封背面估算"的技巧
- **常见模式**：熟悉缓存、分库分表、消息队列等核心模式
- **权衡思维**：理解架构设计中的 trade-off 思维
- **实战案例**：通过短链服务、Feed 流等案例理解设计过程
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 设计四步法 | 需求澄清、容量估算、架构设计、深入优化 |
| **第 2 章** | 容量估算 | QPS、存储、带宽、信封背面估算 |
| **第 3 章** | 核心设计模式 | 缓存、分库分表、消息队列、CDN |
| **第 4 章** | 权衡思维 | 一致性 vs 可用性、性能 vs 成本 |
| **第 5 章** | 经典案例 | 短链服务、Feed 流、秒杀系统 |
---
## 1. 系统设计四步法
系统设计不是一上来就画架构图。无论是面试还是实战，都应该遵循一个结构化的流程。
<SystemDesignStepsDemo />
::: tip 为什么要先澄清需求？
很多人拿到题目就开始画图，结果设计了一个"正确但不是面试官想要的"系统。花 5 分钟问清楚需求，能避免后面 30 分钟的返工。
常见的澄清问题：
- 系统的核心功能是什么？（不要设计所有功能）
- 用户规模多大？（决定是否需要分布式）
- 读写比例？（决定缓存策略）
- 数据需要保留多久？（决定存储方案）
:::
---
## 2. 容量估算：信封背面的艺术
"信封背面估算"（Back-of-envelope estimation）是系统设计中的核心技能。不需要精确计算，只需要知道量级。
<CapacityEstimationDemo />
### 常用换算速查
| 量级 | 换算 | 记忆技巧 |
|------|------|---------|
| 1 天 | 86,400 秒 | ≈ 10 万秒 |
| 1 亿请求/天 | ≈ 1,200 QPS | 除以 10 万 |
| 1 KB × 1 亿 | ≈ 100 GB | 1 亿条小记录 |
| 1 MB × 100 万 | ≈ 1 TB | 100 万张图片 |
### 2-8 法则在估算中的应用
大多数系统遵循 80/20 法则：20% 的数据承载 80% 的请求。这意味着：
- **缓存大小** ≈ 总数据量 × 20%
- **热点 QPS** ≈ 总 QPS × 80% 集中在 20% 的 key 上
- **缓存命中率**目标 ≈ 80%+（低于这个值说明缓存策略有问题）
---
## 3. 核心设计模式
系统设计中反复出现的模式，掌握这些就能应对大多数场景。
### 3.1 缓存模式
| 模式 | 读路径 | 写路径 | 适用场景 |
|------|--------|--------|---------|
| Cache-Aside | 先查缓存，miss 则查 DB 并回填 | 先写 DB，再删缓存 | 通用场景，最常用 |
| Read-Through | 缓存层自动从 DB 加载 | 同 Cache-Aside | 需要缓存框架支持 |
| Write-Behind | 同 Cache-Aside | 先写缓存，异步写 DB | 写密集型，可容忍丢数据 |
::: tip 为什么是"删缓存"而不是"更新缓存"？
更新缓存在并发场景下容易出现数据不一致：线程 A 和 B 同时更新，A 先写 DB 但 B 先更新缓存，导致缓存中是 B 的旧值。删除缓存则让下次读请求重新从 DB 加载，天然避免这个问题。
:::
### 3.2 分库分表
当单表数据量超过千万级，或单库 QPS 超过瓶颈时，就需要考虑分库分表。
| 策略 | 做法 | 优点 | 缺点 |
|------|------|------|------|
| 垂直分库 | 按业务域拆分数据库 | 业务解耦，独立扩展 | 跨库 JOIN 困难 |
| 水平分表 | 同一张表按规则拆成多张 | 单表数据量可控 | 分片键选择关键 |
| 垂直分表 | 把大字段拆到独立表 | 减少 IO，提升查询效率 | 需要额外 JOIN |
**分片键选择原则**：
- 选择查询最频繁的字段（如 user_id）
- 数据分布要均匀，避免热点
- 尽量让同一用户的数据在同一分片（减少跨分片查询）
### 3.3 消息队列
消息队列是分布式系统的"减震器"，核心作用是解耦、异步、削峰。
| 场景 | 不用队列 | 用队列 |
|------|---------|--------|
| 下单后发通知 | 下单接口同步调用通知服务，通知失败导致下单失败 | 下单成功后发消息，通知服务异步消费 |
| 秒杀抢购 | 瞬间流量打爆数据库 | 请求先入队列，后端按能力消费 |
| 数据同步 | 服务 A 直接调用服务 B 的接口 | 服务 A 发事件，服务 B 订阅处理 |
---
## 4. 权衡思维：没有银弹
架构设计的本质是权衡（Trade-off）。每个决策都有代价，关键是理解代价并做出适合当前阶段的选择。
| 权衡维度 | 选项 A | 选项 B | 决策依据 |
|---------|--------|--------|---------|
| 一致性 vs 可用性 | 强一致（CP） | 高可用（AP） | 业务能否容忍短暂不一致？ |
| 性能 vs 成本 | 全量缓存 | 按需缓存 | 数据量和预算 |
| 简单 vs 灵活 | 单体架构 | 微服务 | 团队规模和业务复杂度 |
| 实时 vs 批量 | 流式处理 | 批处理 | 数据时效性要求 |
| 自建 vs 托管 | 自己搭 MySQL | 用云数据库 RDS | 运维能力和成本 |
::: tip 架构决策记录（ADR）
每个重要的架构决策都应该记录下来：**背景是什么、考虑了哪些方案、为什么选了这个、有什么代价**。这不是为了甩锅，而是为了让后来的人理解"为什么当时这么设计"。
格式很简单：
- **标题**：用 XXX 替代 YYY
- **背景**：我们遇到了什么问题
- **决策**：我们选择了什么方案
- **理由**：为什么选这个
- **代价**：这个决策的缺点和风险
:::
### 常见的错误权衡
| 错误 | 表现 | 正确做法 |
|------|------|---------|
| 过早优化 | 日活 1000 就上分库分表 | 先用单库，遇到瓶颈再拆 |
| 技术驱动 | "我想用 Kafka" 而不是 "我需要异步" | 从问题出发，而非从技术出发 |
| 忽略运维成本 | 选了最优方案但团队维护不了 | 方案要匹配团队能力 |
| 追求完美一致性 | 所有场景都用分布式事务 | 大多数场景最终一致性就够了 |
---
## 5. 经典案例
通过三个经典案例，把前面学到的方法论串起来。
### 5.1 短链服务（TinyURL）
短链服务是系统设计面试的经典题目，麻雀虽小五脏俱全。
**需求澄清**：
- 核心功能：长链接 → 短链接（写），短链接 → 重定向（读）
- 读写比：约 100:1（读远多于写）
- 日均重定向：1 亿次
- 短链永不过期
**容量估算**：
| 指标 | 计算 | 结果 |
|------|------|------|
| 写 QPS | 1 亿 / 100 / 86400 | ≈ 12 QPS |
| 读 QPS | 1 亿 / 86400 | ≈ 1,200 QPS |
| 峰值读 QPS | 1,200 × 3 | ≈ 3,600 QPS |
| 5 年存储 | 100 万/天 × 365 × 5 × 100B | ≈ 18 GB |
| 缓存（20%） | 18 GB × 20% | ≈ 3.6 GB |
**架构设计**：
```
写路径：客户端 → API Server → ID 生成器 → Base62 编码 → 写入 MySQL + Redis
读路径：客户端 → CDN → API Server → Redis 查询 → 302 重定向
↓ (cache miss)
MySQL 查询 → 回填 Redis
```
**关键设计决策**：
- 短码生成：Snowflake 分布式 ID + Base62 编码，避免哈希冲突
- 缓存策略：Cache-Aside，热点短链用 CDN 加速
- 数据库：单表即可（18GB 很小），按短码做索引
### 5.2 Feed 流系统
社交平台的 Feed 流（朋友圈、微博首页）是另一个经典题目。
**核心挑战**：用户发一条动态，如何让所有关注者看到？
| 方案 | 做法 | 优点 | 缺点 |
|------|------|------|------|
| 拉模式（Pull） | 读取时实时聚合关注者的动态 | 写入简单，存储少 | 读取慢，关注多时延迟高 |
| 推模式（Push） | 发布时写入所有粉丝的收件箱 | 读取极快 | 大 V 发动态写扩散严重 |
| 推拉结合 | 普通用户推，大 V 拉 | 平衡读写性能 | 实现复杂 |
**推拉结合方案**：
- 粉丝数 < 1 万：发布时推送到所有粉丝的 Feed 缓存（推模式）
- 粉丝数 > 1 万：不推送，粉丝读取时实时拉取（拉模式）
- 用户打开 Feed 时：合并推送的内容 + 实时拉取大 V 的内容，按时间排序
### 5.3 秒杀系统
秒杀的核心挑战：瞬间超高并发 + 库存不能超卖。
**流量特征**：
- 活动开始前：大量用户刷新页面等待
- 活动开始瞬间：QPS 可能是平时的 100 倍以上
- 活动结束后：流量迅速回落
**分层削峰策略**：
```
用户请求 → CDN（静态页面）→ 网关（限流）→ 消息队列（削峰）→ 库存服务（扣减）
```
| 层级 | 策略 | 效果 |
|------|------|------|
| 前端 | 按钮置灰 + 随机延迟 + 验证码 | 过滤机器人，分散请求 |
| CDN | 静态资源缓存 | 减少 90% 的页面请求 |
| 网关 | 令牌桶限流 | 只放行系统能承受的流量 |
| 消息队列 | 请求入队，异步处理 | 削峰填谷，保护数据库 |
| 库存服务 | Redis 预扣减 + Lua 原子操作 | 防止超卖，毫秒级响应 |
::: tip 秒杀的核心原则
1. **尽量拦截在上游**：能在 CDN 挡住的就不要到应用层
2. **读写分离**：商品详情页走缓存，只有下单走数据库
3. **异步处理**：用户点击"抢购"后立即返回"排队中"，后台异步处理
4. **兜底方案**：限流、熔断、降级，任何一层出问题都有 Plan B
:::
---
## 总结
系统设计是一门实践性很强的技能，核心在于结构化思考和权衡取舍。
回顾本章的关键要点：
1. **四步法框架**：需求澄清 → 容量估算 → 架构设计 → 深入优化，每一步都不可跳过
2. **信封背面估算**：不需要精确，只需要知道量级，用于指导架构决策
3. **核心模式**：缓存、分库分表、消息队列、CDN、限流熔断——这些是系统设计的"积木"
4. **权衡思维**：没有完美方案，只有适合当前阶段的方案，记录每个决策的理由和代价
5. **经典案例**：短链服务练基础、Feed 流练推拉模型、秒杀练高并发——掌握这三个就能举一反三
## 延伸阅读
- [System Design Interview](https://www.amazon.com/System-Design-Interview-insiders-Second/dp/B08CMF2CQF) - Alex Xu 系统设计面试经典
- [Designing Data-Intensive Applications](https://dataintensive.net/) - Martin Kleppmann 数据密集型应用设计
- [The System Design Primer](https://github.com/donnemartin/system-design-primer) - GitHub 上最全的系统设计学习资源
- [ByteByteGo](https://bytebytego.com/) - Alex Xu 的系统设计可视化博客
docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md
+219 -1
View File
@@ -1,3 +1,221 @@
# Docker 容器化
> 待实现
::: tip 前言
**"在我机器上能跑"是开发者最经典的借口，Docker 让这个借口彻底消失。** 容器化技术将应用及其所有依赖打包成一个标准化的单元，确保在任何环境中都能一致运行。它是现代软件交付的基石。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **核心概念**：理解镜像、容器、仓库三大核心概念
- **架构对比**：明白容器和虚拟机的本质区别
- **实操能力**：掌握 Dockerfile 编写和常用命令
- **编排基础**：学会用 Docker Compose 管理多服务应用
- **最佳实践**：了解镜像优化、安全加固等生产级实践
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 为什么需要容器 | 环境一致性、资源效率、标准化交付 |
| **第 2 章** | 核心概念 | 镜像、容器、仓库、Dockerfile |
| **第 3 章** | Docker 生命周期 | 编写、构建、推送、运行、管理 |
| **第 4 章** | Docker Compose | 多服务编排、网络、数据卷 |
| **第 5 章** | 最佳实践 | 镜像优化、安全、多阶段构建 |
---
## 1. 为什么需要容器？
在容器出现之前，部署一个应用需要在服务器上手动安装运行时、配置环境变量、处理依赖冲突。不同环境（开发、测试、生产）之间的差异是 bug 的温床。
<DockerArchitectureDemo />
### 容器解决了什么问题？
| 问题 | 传统方式 | 容器方式 |
|------|---------|---------|
| 环境不一致 | "我本地能跑" | 打包所有依赖，到处一致 |
| 依赖冲突 | App A 要 Node 14，App B 要 Node 18 | 每个容器独立环境 |
| 资源浪费 | 每个 VM 一个完整 OS | 共享内核，MB 级开销 |
| 部署慢 | 手动安装配置 | docker run 一条命令 |
| 扩容难 | 新建 VM、装环境、部署 | 秒级启动新容器 |
::: tip 容器的本质
容器不是轻量级虚拟机。它的本质是**被隔离的进程**。Linux 内核通过两个机制实现容器：
- **Namespace**：隔离进程的视野（PID、网络、文件系统等）
- **Cgroups**：限制进程的资源使用（CPU、内存、IO）
容器里的进程和宿主机上的普通进程没有本质区别，只是被"关在了一个看不到外面的房间里"。
:::
---
## 2. 核心概念
Docker 的世界围绕三个核心概念：镜像（Image）、容器（Container）、仓库（Registry）。
| 概念 | 类比 | 说明 |
|------|------|------|
| 镜像（Image） | 类 / 模板 | 只读的应用模板，包含代码、运行时、库、配置 |
| 容器（Container） | 实例 / 对象 | 镜像的运行实例，可读写，有独立的生命周期 |
| 仓库（Registry） | 应用商店 | 存储和分发镜像的服务（Docker Hub、ACR、ECR） |
| Dockerfile | 配方 / 蓝图 | 定义如何构建镜像的文本文件 |
| 数据卷（Volume） | 外接硬盘 | 持久化数据，容器删除后数据不丢失 |
### 镜像的分层结构
Docker 镜像由多个只读层（Layer）叠加而成，每条 Dockerfile 指令创建一层：
```
┌─────────────────────────┐
│ CMD ["node", "app.js"] │ ← 启动命令层
├─────────────────────────┤
│ COPY . /app │ ← 应用代码层（经常变）
├─────────────────────────┤
│ RUN npm install │ ← 依赖安装层（偶尔变）
├─────────────────────────┤
│ FROM node:18-alpine │ ← 基础镜像层（很少变）
└─────────────────────────┘
```
::: tip 为什么分层很重要？
Docker 会缓存每一层。如果某一层没有变化，构建时会直接复用缓存。所以 Dockerfile 中应该把**变化频率低的指令放在前面**（如安装依赖），**变化频率高的放在后面**（如复制代码）。这样大部分构建都能命中缓存，速度快很多。
:::
---
## 3. Docker 生命周期
从编写 Dockerfile 到容器运行，Docker 的工作流程是一条清晰的流水线。
<DockerLifecycleDemo />
### Dockerfile 常用指令速查
| 指令 | 作用 | 示例 |
|------|------|------|
| `FROM` | 指定基础镜像 | `FROM node:18-alpine` |
| `WORKDIR` | 设置工作目录 | `WORKDIR /app` |
| `COPY` | 复制文件到镜像 | `COPY package.json ./` |
| `RUN` | 构建时执行命令 | `RUN npm install` |
| `ENV` | 设置环境变量 | `ENV NODE_ENV=production` |
| `EXPOSE` | 声明端口（仅文档作用） | `EXPOSE 3000` |
| `CMD` | 容器启动命令 | `CMD ["node", "app.js"]` |
| `ENTRYPOINT` | 容器入口点（不易被覆盖） | `ENTRYPOINT ["nginx"]` |
---
## 4. Docker Compose：多服务编排
真实项目通常不止一个容器。一个 Web 应用可能需要：应用服务器 + 数据库 + Redis + Nginx。Docker Compose 用一个 YAML 文件定义和管理多个容器。
### docker-compose.yml 示例
```yaml
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- DB_HOST=db
- REDIS_HOST=redis
depends_on:
- db
- redis
db:
image: postgres:15-alpine
volumes:
- db-data:/var/lib/postgresql/data
environment:
- POSTGRES_PASSWORD=secret
redis:
image: redis:7-alpine
volumes:
db-data:
```
### Compose 核心概念
| 概念 | 说明 | 示例 |
|------|------|------|
| services | 定义各个容器服务 | app、db、redis |
| volumes | 持久化数据卷 | db-data 保存数据库文件 |
| networks | 自定义网络（默认自动创建） | 服务间通过服务名互相访问 |
| depends_on | 启动顺序依赖 | app 依赖 db 和 redis |
| environment | 环境变量 | 数据库密码、连接地址 |
::: tip 服务发现
在 Docker Compose 中，服务名就是主机名。app 容器可以直接用 `db:5432` 访问数据库，用 `redis:6379` 访问 Redis，不需要知道 IP 地址。这是 Docker 内置 DNS 的功劳。
:::
---
## 5. 最佳实践
### 5.1 多阶段构建（Multi-stage Build）
多阶段构建是优化镜像大小的利器。构建阶段安装所有工具和依赖，最终阶段只保留运行时需要的文件。
```dockerfile
# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# 运行阶段
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
EXPOSE 3000
CMD ["node", "dist/server.js"]
```
### 5.2 镜像优化清单
| 优化项 | 做法 | 效果 |
|--------|------|------|
| 选择小基础镜像 | 用 `alpine` 而非 `ubuntu` | 镜像从 ~200MB 降到 ~50MB |
| 合并 RUN 指令 | 多个命令用 `&&` 连接 | 减少镜像层数 |
| 使用 .dockerignore | 排除 node_modules、.git 等 | 加速构建，减小上下文 |
| 多阶段构建 | 分离构建和运行环境 | 最终镜像不含构建工具 |
| 固定版本号 | `node:18.17-alpine` 而非 `node:latest` | 构建可重复 |
### 5.3 安全实践
| 实践 | 说明 |
|------|------|
| 不用 root 运行 | `USER node` 指定非 root 用户 |
| 扫描漏洞 | `docker scout` 或 Trivy 扫描镜像 |
| 最小权限 | 只安装必要的包，不装调试工具 |
| 不硬编码密钥 | 用环境变量或 Docker Secrets |
| 定期更新基础镜像 | 及时修复安全漏洞 |
---
## 总结
Docker 容器化是现代软件交付的基础设施，理解它对于任何开发者都至关重要。
回顾本章的关键要点：
1. **容器 vs 虚拟机**：容器共享宿主内核，更轻量、更快，但隔离性略弱于 VM
2. **核心三件套**：镜像（模板）、容器（实例）、仓库（分发）
3. **Dockerfile**：分层构建，利用缓存，变化少的指令放前面
4. **Docker Compose**：用 YAML 定义多服务应用，服务名即主机名
5. **生产实践**：多阶段构建减小镜像、alpine 基础镜像、非 root 运行
## 延伸阅读
- [Docker 官方文档](https://docs.docker.com/) - 最权威的参考资料
- [Docker Getting Started](https://docs.docker.com/get-started/) - 官方入门教程
- [Dockerfile Best Practices](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/) - 官方最佳实践指南
- [Docker Compose 文档](https://docs.docker.com/compose/) - Compose 完整参考
docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md
+190 -1
View File
@@ -1,3 +1,192 @@
# Kubernetes 编排
> 待实现
::: tip 前言
**Docker 解决了"打包"问题，Kubernetes 解决了"管理"问题。** 当你有几十上百个容器需要部署、扩缩容、故障恢复时，手动管理是不现实的。Kubernetes（K8s）就是容器的"操作系统"，它自动化了容器化应用的部署、扩展和运维。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **架构理解**：掌握 K8s 控制平面和工作节点的组成
- **核心资源**：熟悉 Pod、Deployment、Service 等核心概念
- **声明式管理**：理解"声明期望状态，系统自动收敛"的思想
- **运维能力**：了解滚动更新、自动扩缩容、健康检查等机制
- **实战入门**：能用 kubectl 和 YAML 部署一个完整应用
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 为什么需要 K8s | 容器编排的挑战 |
| **第 2 章** | K8s 架构 | 控制平面、工作节点、etcd |
| **第 3 章** | 核心资源 | Pod、Deployment、Service、Ingress |
| **第 4 章** | 声明式管理 | YAML、kubectl、控制循环 |
| **第 5 章** | 运维实践 | 滚动更新、HPA、健康检查 |
---
## 1. 为什么需要 Kubernetes？
Docker 让单个容器的打包和运行变得简单，但当你面对以下场景时，手动管理就力不从心了：
| 挑战 | 描述 | K8s 的解决方案 |
|------|------|---------------|
| 多实例部署 | 一个服务需要运行 10 个副本 | Deployment 自动管理副本数 |
| 故障恢复 | 某个容器挂了需要自动重启 | 控制器自动检测并重建 Pod |
| 服务发现 | 容器 IP 会变，怎么找到对方？ | Service 提供稳定的 DNS 和 IP |
| 滚动更新 | 更新版本时不能停服 | 逐步替换旧 Pod，零停机 |
| 弹性伸缩 | 流量高峰自动扩容 | HPA 根据 CPU/内存自动调整副本数 |
| 资源调度 | 把容器放到最合适的机器上 | Scheduler 智能调度 |
::: tip K8s 的核心思想：声明式
你不需要告诉 K8s "启动 3 个容器"（命令式），而是告诉它 "我要 3 个副本在运行"（声明式）。K8s 会持续监控，确保实际状态与你声明的期望状态一致。如果一个 Pod 挂了，它会自动创建新的来补上。
:::
---
## 2. Kubernetes 架构
K8s 集群由控制平面（Control Plane）和工作节点（Worker Node）组成。
<K8sArchitectureDemo />
### 一次请求的完整路径
```
用户请求 → Ingress Controller → Service → kube-proxy → Pod（容器）
↑
Endpoint 列表（由 Service 维护）
```
---
## 3. 核心资源对象
K8s 通过各种"资源对象"来描述集群的期望状态。
<K8sWorkloadsDemo />
### 资源对象分类
| 类别 | 资源 | 用途 |
|------|------|------|
| 工作负载 | Pod、Deployment、StatefulSet、DaemonSet、Job | 运行应用 |
| 网络 | Service、Ingress、NetworkPolicy | 服务发现和流量管理 |
| 配置 | ConfigMap、Secret | 配置和敏感数据管理 |
| 存储 | PersistentVolume、PersistentVolumeClaim | 持久化存储 |
| 调度 | Node、Namespace、ResourceQuota | 资源隔离和限制 |
---
## 4. 声明式管理与 kubectl
### 控制循环（Reconciliation Loop）
K8s 的核心工作机制是控制循环：
```
观察（Observe）→ 比较（Diff）→ 行动（Act）→ 观察...
↓ ↓ ↓
读取实际状态 与期望状态对比 执行修正操作
```
你声明 `replicas: 3`，控制器发现只有 2 个 Pod 在运行，就会创建 1 个新的。这个循环每隔几秒执行一次，确保系统始终向期望状态收敛。
### kubectl 常用命令
| 命令 | 作用 | 示例 |
|------|------|------|
| `kubectl apply -f` | 应用 YAML 配置 | `kubectl apply -f deployment.yaml` |
| `kubectl get` | 查看资源列表 | `kubectl get pods -o wide` |
| `kubectl describe` | 查看资源详情 | `kubectl describe pod my-app-xxx` |
| `kubectl logs` | 查看 Pod 日志 | `kubectl logs -f my-app-xxx` |
| `kubectl exec` | 进入 Pod 终端 | `kubectl exec -it my-app-xxx -- sh` |
| `kubectl delete` | 删除资源 | `kubectl delete -f deployment.yaml` |
| `kubectl scale` | 手动扩缩容 | `kubectl scale deploy my-app --replicas=5` |
::: tip apply vs create
`kubectl create` 是命令式的——"创建这个资源"，如果已存在会报错。`kubectl apply` 是声明式的——"确保资源是这个状态"，不存在就创建，已存在就更新。生产环境中应该始终使用 `apply`。
:::
---
## 5. 运维实践
### 5.1 滚动更新与回滚
Deployment 默认使用滚动更新策略：逐步创建新版本 Pod，同时逐步终止旧版本 Pod。
```yaml
spec:
strategy:
type: RollingUpdate
rollingUpdate:
maxSurge: 1 # 最多多创建 1 个 Pod
maxUnavailable: 0 # 不允许有 Pod 不可用
```
| 操作 | 命令 |
|------|------|
| 更新镜像 | `kubectl set image deploy/my-app app=my-app:2.0` |
| 查看更新状态 | `kubectl rollout status deploy/my-app` |
| 查看历史版本 | `kubectl rollout history deploy/my-app` |
| 回滚到上一版本 | `kubectl rollout undo deploy/my-app` |
### 5.2 自动扩缩容（HPA）
HPA（Horizontal Pod Autoscaler）根据 CPU、内存或自定义指标自动调整 Pod 副本数。
```yaml
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
name: my-app-hpa
spec:
scaleTargetRef:
apiVersion: apps/v1
kind: Deployment
name: my-app
minReplicas: 2
maxReplicas: 10
metrics:
- type: Resource
resource:
name: cpu
target:
type: Utilization
averageUtilization: 70
```
### 5.3 健康检查（Probe）
K8s 通过三种探针监控 Pod 的健康状态：
| 探针 | 作用 | 失败后果 |
|------|------|---------|
| livenessProbe | 检测容器是否存活 | 重启容器 |
| readinessProbe | 检测容器是否就绪 | 从 Service 摘除，不接收流量 |
| startupProbe | 检测容器是否启动完成 | 启动期间不执行其他探针 |
::: tip 探针的重要性
没有配置健康检查的 Pod，K8s 只能通过进程是否存在来判断健康状态。但很多时候进程还在，服务已经不响应了（比如死锁、OOM 边缘）。配置 livenessProbe 可以让 K8s 自动重启这些"假死"的容器。
:::
---
## 总结
Kubernetes 是容器编排的事实标准，理解它的核心概念是云原生开发的基础。
回顾本章的关键要点：
1. **声明式管理**：告诉 K8s "我要什么"，而不是"怎么做"，控制循环自动收敛
2. **架构分层**：控制平面负责决策，工作节点负责执行，etcd 存储状态
3. **核心资源**：Pod（最小单元）、Deployment（副本管理）、Service（服务发现）、Ingress（外部入口）
4. **运维自动化**：滚动更新零停机、HPA 弹性伸缩、探针自动故障恢复
5. **配置分离**：ConfigMap 和 Secret 让配置与镜像解耦
## 延伸阅读
- [Kubernetes 官方文档](https://kubernetes.io/zh-cn/docs/) - 最权威的中文参考
- [Kubernetes the Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way) - 从零手动搭建 K8s 集群
- [The Illustrated Children's Guide to Kubernetes](https://www.cncf.io/phippy/) - CNCF 出品的趣味入门
- [Kubernetes Patterns](https://www.oreilly.com/library/view/kubernetes-patterns-2nd/9781098131678/) - K8s 设计模式
docs/zh-cn/appendix/7-infrastructure-and-operations/linux-basics.md
+395 -1
View File
@@ -1,3 +1,397 @@
# Linux 基础
> 待实现
::: tip 前言
**服务器的世界，Linux 是绝对的主角。** 全球超过 90% 的服务器运行 Linux，从你每天用的微信到 Google 搜索，背后都是 Linux 在支撑。作为开发者，掌握 Linux 基础不是可选项，而是必修课。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **文件系统**：理解 Linux 目录结构和"一切皆文件"的哲学
- **常用命令**：掌握文件操作、文本处理、进程管理等核心命令
- **权限模型**：理解用户、组、权限的概念
- **Shell 基础**：了解管道、重定向、环境变量等 Shell 核心概念
- **实战技能**：学会日志查看、进程排查、网络诊断等运维基本功
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 文件系统 | 目录结构、一切皆文件 |
| **第 2 章** | 常用命令 | 文件、文本、进程、网络 |
| **第 3 章** | 权限模型 | 用户、组、rwx、sudo |
| **第 4 章** | Shell 基础 | 管道、重定向、变量、脚本 |
| **第 5 章** | 实战场景 | 日志排查、性能诊断 |
---
## 1. 文件系统：一切皆文件
Linux 最核心的哲学之一就是**一切皆文件**。普通文件是文件，目录是文件，硬盘是文件，甚至网络连接、进程信息都是文件。这个统一的抽象让你可以用同一套工具（读、写、权限控制）操作几乎所有系统资源。
<LinuxFileSystemDemo />
### 目录结构速记
把 Linux 文件系统想象成一棵倒过来的树：
```
/ ← 根目录（树根）
├── home/ ← 用户的家（你的文件都在这）
├── etc/ ← 配置文件（系统的"设置面板"）
├── var/ ← 变化的数据（日志、缓存）
├── usr/ ← 用户安装的程序
├── tmp/ ← 临时文件（重启就没了）
├── proc/ ← 进程信息（虚拟的，不占磁盘）
├── dev/ ← 设备文件（硬盘、终端）
├── bin/ ← 基础命令（ls、cp、mv）
├── sbin/ ← 系统管理命令（需要 root）
├── opt/ ← 第三方软件
└── root/ ← root 用户的家目录
```
### 路径的两种写法
| 类型 | 格式 | 示例 | 说明 |
|------|------|------|------|
| 绝对路径 | 从 `/` 开始 | `/home/alice/code/app.js` | 从根目录出发，不会歧义 |
| 相对路径 | 从当前目录开始 | `./code/app.js` 或 `../config` | `.` 是当前目录，`..` 是上级目录 |
::: tip "一切皆文件"的威力
想知道 CPU 信息？读文件：`cat /proc/cpuinfo`
想知道内存使用？读文件：`cat /proc/meminfo`
想产生随机数？读文件：`cat /dev/urandom`
想丢弃输出？写文件：`echo "no thanks" > /dev/null`
不需要专门的 API，读写文件就够了。这就是 Unix 哲学的优雅之处。
:::
---
## 2. 常用命令
Linux 命令遵循一个统一的格式：`命令 [选项] [参数]`。比如 `ls -la /home` 中，`ls` 是命令，`-la` 是选项，`/home` 是参数。
<LinuxCommandDemo />
### 最常用的 10 个命令
如果只能记住 10 个命令，记这些：
| 命令 | 用途 | 记忆技巧 |
|------|------|----------|
| `ls` | 列出文件 | list |
| `cd` | 切换目录 | change directory |
| `cat` | 查看文件 | concatenate |
| `grep` | 搜索文本 | global regular expression print |
| `find` | 查找文件 | 就是 find |
| `ps` | 查看进程 | process status |
| `tail -f` | 实时看日志 | 看文件"尾巴"，-f 是 follow |
| `chmod` | 改权限 | change mode |
| `curl` | 发 HTTP 请求 | client URL |
| `ssh` | 远程登录 | secure shell |
### 命令组合的艺术
Linux 的强大不在于单个命令，而在于**命令组合**。通过管道 `|` 把多个简单命令串起来，解决复杂问题：
```bash
# 找出占用 CPU 最多的 5 个进程
ps aux --sort=-%cpu | head -6
# 统计日志中出现最多的错误类型
grep "ERROR" app.log | awk '{print $4}' | sort | uniq -c | sort -rn | head -10
# 查找大于 100MB 的文件
find / -size +100M -type f 2>/dev/null
# 实时监控日志中的错误
tail -f /var/log/app.log | grep --color "ERROR"
```
::: tip Unix 哲学
"做一件事，做好它。" 每个命令只负责一个功能，通过管道组合实现复杂操作。这就是为什么 Linux 命令都很短小——它们是积木，不是瑞士军刀。
:::
---
## 3. 权限模型
Linux 是多用户系统，权限模型是安全的基石。每个文件都有三组权限，分别控制**所有者（Owner）**、**所属组（Group）**、**其他人（Others）**能做什么。
### 读懂 `ls -l` 的输出
```bash
$ ls -l app.js
-rwxr-xr-- 1 alice developers 2048 Jan 15 10:30 app.js
│├──┤├──┤├──┤ │ │ │
│ │ │ │ │ │ └── 文件大小
│ │ │ │ │ └── 所属组
│ │ │ │ └── 所有者
│ │ │ └── 其他人权限：r-- (只读)
│ │ └── 组权限：r-x (读+执行)
│ └── 所有者权限：rwx (读+写+执行)
└── 文件类型：- 普通文件，d 目录，l 链接
```
### 权限的三种操作
| 权限 | 字母 | 数字 | 对文件的含义 | 对目录的含义 |
|------|------|------|-------------|-------------|
| 读 | `r` | 4 | 查看文件内容 | 列出目录内容（ls） |
| 写 | `w` | 2 | 修改文件内容 | 创建/删除目录中的文件 |
| 执行 | `x` | 1 | 运行程序/脚本 | 进入目录（cd） |
<LinuxPermissionsDemo />
### 数字权限速算
三个数字分别代表 Owner、Group、Others 的权限，每个数字是 r(4) + w(2) + x(1) 的和：
```
chmod 755 script.sh
7 = rwx (4+2+1) → 所有者：读+写+执行
5 = r-x (4+0+1) → 组：读+执行
5 = r-x (4+0+1) → 其他人：读+执行
```
| 常见权限 | 含义 | 典型用途 |
|---------|------|---------|
| `644` | rw-r--r-- | 普通文件（所有者可写，其他人只读） |
| `755` | rwxr-xr-x | 可执行文件/目录 |
| `600` | rw------- | 私密文件（如 SSH 密钥） |
| `777` | rwxrwxrwx | 所有人可读写执行（危险，避免使用） |
### sudo：临时获取超级权限
普通用户权限有限，有些操作需要 root 权限。`sudo` 让你临时以 root 身份执行命令：
```bash
# 普通用户无法修改系统配置
$ vim /etc/nginx/nginx.conf
# Permission denied
# 用 sudo 临时提权
$ sudo vim /etc/nginx/nginx.conf
# 输入你的密码后可以编辑
# 切换到 root 用户（谨慎使用）
$ sudo su -
```
::: warning 最小权限原则
永远不要用 `chmod 777` 解决权限问题，这等于把门锁拆了。正确做法是搞清楚谁需要什么权限，精确授予。同样，不要长期以 root 身份操作，只在必要时用 `sudo`。
:::
---
## 4. Shell 基础
Shell 是你和 Linux 内核之间的"翻译官"。你输入命令，Shell 解释并交给内核执行。最常用的 Shell 是 **Bash**（大多数 Linux 发行版默认）和 **Zsh**（macOS 默认）。
### 管道与重定向
这是 Shell 最强大的两个特性：
| 符号 | 名称 | 作用 | 示例 |
|------|------|------|------|
| `|` | 管道 | 把前一个命令的输出作为后一个的输入 | `cat log | grep ERROR` |
| `>` | 输出重定向 | 把输出写入文件（覆盖） | `echo "hello" > file.txt` |
| `>>` | 追加重定向 | 把输出追加到文件末尾 | `echo "world" >> file.txt` |
| `<` | 输入重定向 | 从文件读取输入 | `wc -l < file.txt` |
| `2>` | 错误重定向 | 把错误信息写入文件 | `cmd 2> error.log` |
| `2>&1` | 合并输出 | 把错误和正常输出合并 | `cmd > all.log 2>&1` |
### 环境变量
环境变量是 Shell 中的"全局配置"，影响命令的行为：
```bash
# 查看所有环境变量
env
# 查看某个变量
echo $PATH
echo $HOME
# 临时设置（只在当前 Shell 有效）
export API_KEY="abc123"
# 永久设置（写入配置文件）
echo 'export API_KEY="abc123"' >> ~/.bashrc
source ~/.bashrc # 让配置立即生效
```
| 常见变量 | 含义 | 示例值 |
|---------|------|--------|
| `$PATH` | 命令搜索路径 | `/usr/local/bin:/usr/bin:/bin` |
| `$HOME` | 用户主目录 | `/home/alice` |
| `$USER` | 当前用户名 | `alice` |
| `$PWD` | 当前工作目录 | `/var/log` |
| `$SHELL` | 当前使用的 Shell | `/bin/bash` |
### Shell 脚本入门
把多个命令写进一个文件，就是 Shell 脚本。它是自动化运维的起点：
```bash
#!/bin/bash
# deploy.sh - 简单的部署脚本
APP_DIR="/opt/myapp"
LOG_FILE="/var/log/deploy.log"
echo "$(date) - 开始部署..." >> $LOG_FILE
# 拉取最新代码
cd $APP_DIR && git pull origin main
# 安装依赖
npm install --production
# 重启服务
pm2 restart myapp
echo "$(date) - 部署完成" >> $LOG_FILE
```
```bash
# 给脚本执行权限并运行
chmod +x deploy.sh
./deploy.sh
```
::: tip 脚本调试技巧
在脚本开头加 `set -ex`：`-e` 让脚本遇到错误立即退出（而不是继续执行），`-x` 会打印每条执行的命令（方便排查问题）。这两个选项在生产脚本中几乎是标配。
:::
---
## 5. 实战场景
理论学完了，来看几个开发中最常遇到的实战场景。
### 5.1 日志排查
服务出问题，第一反应就是看日志。以下是日志排查的常用套路：
```bash
# 1. 实时跟踪日志（最常用）
tail -f /var/log/app/error.log
# 2. 搜索特定时间段的错误
grep "2024-01-15 14:" error.log | grep "ERROR"
# 3. 统计每小时的错误数量
grep "ERROR" app.log | awk '{print substr($1,1,13)}' | uniq -c
# 4. 查看最近 100 行日志
tail -100 app.log
# 5. 在多个日志文件中搜索
grep -r "OutOfMemory" /var/log/app/
```
### 5.2 进程排查
应用卡死、CPU 飙高、内存泄漏——这些问题都需要从进程入手：
```bash
# 查看 CPU 占用最高的进程
ps aux --sort=-%cpu | head -10
# 查看内存占用最高的进程
ps aux --sort=-%mem | head -10
# 查找特定进程
ps aux | grep "node"
# 查看进程的详细信息（包括线程）
top -Hp <PID>
# 查看进程打开的文件
lsof -p <PID>
# 优雅终止进程（SIGTERM）
kill <PID>
# 强制终止（SIGKILL，最后手段）
kill -9 <PID>
```
### 5.3 网络诊断
服务连不上？先搞清楚是网络问题还是应用问题：
```bash
# 测试目标是否可达
ping -c 4 google.com
# 检查端口是否开放
telnet db-server 3306
# 或者用 nc
nc -zv db-server 3306
# 查看本机监听的端口
ss -tlnp
# 或
netstat -tlnp
# DNS 解析检查
dig api.example.com
nslookup api.example.com
# 测试 HTTP 接口
curl -v http://localhost:3000/health
# 查看网络连接状态统计
ss -s
```
### 5.4 磁盘空间排查
磁盘满了是线上最常见的故障之一：
```bash
# 查看各分区使用情况
df -h
# 找出占用空间最大的目录
du -sh /* 2>/dev/null | sort -rh | head -10
# 进一步定位大目录
du -sh /var/log/* | sort -rh | head -10
# 查找大文件（>100MB）
find / -type f -size +100M 2>/dev/null | head -20
# 清理常见的空间占用
# 清理旧日志
sudo journalctl --vacuum-size=500M
# 清理 Docker 无用镜像
docker system prune -a
```
::: tip 线上排查口诀
**"一看日志，二看进程，三看网络，四看磁盘"**。90% 的线上问题都能通过这四步定位到原因。养成习惯后，排查效率会大幅提升。
:::
---
## 总结
Linux 是开发者的必备技能，掌握基础就能应对大部分日常开发和运维场景。
回顾本章的关键要点：
1. **一切皆文件**：Linux 用文件抽象统一了对硬件、进程、网络等资源的访问方式
2. **命令组合**：单个命令功能简单，通过管道 `|` 组合才能发挥真正威力
3. **权限模型**：Owner/Group/Others × Read/Write/Execute，用数字（如 755）快速设置
4. **Shell 基础**：管道、重定向、环境变量、脚本是自动化的基石
5. **实战排查**：日志 → 进程 → 网络 → 磁盘，四步定位大部分线上问题
## 延伸阅读
- [Linux 命令大全](https://man7.org/linux/man-pages/) - Linux man pages 官方文档
- [The Linux Command Line](https://linuxcommand.org/tlcl.php) - 免费的 Linux 命令行入门书
- [Linux Journey](https://linuxjourney.com/) - 交互式 Linux 学习网站
- [explainshell.com](https://explainshell.com/) - 输入命令自动解释每个参数的含义
docs/zh-cn/appendix/8-artificial-intelligence/neural-networks.md
+313 -1
View File
@@ -1,3 +1,315 @@
# 神经网络与深度学习
> 待实现
::: tip 前言
**神经网络是 AI 革命的引擎。** 从 ChatGPT 的语言理解到自动驾驶的图像识别，背后都是神经网络在工作。它不是魔法，而是一套精巧的数学框架——通过大量数据"学习"出输入到输出的映射关系。理解它的基本原理，能帮你更好地使用和调试 AI 工具。
:::
**这篇文章会带你学什么？**
学完这章后，你将获得：
- **核心概念**：理解神经元、层、前向传播、反向传播的基本原理
- **网络类型**：了解 CNN、RNN、Transformer 等主流架构的特点和适用场景
- **训练过程**：明白模型是如何从数据中"学习"的
- **关键技巧**：掌握过拟合、学习率、正则化等实用概念
- **发展脉络**：了解从感知机到大语言模型的演进历程
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | 从神经元到网络 | 感知机、激活函数、前向传播 |
| **第 2 章** | 网络如何学习 | 损失函数、梯度下降、反向传播 |
| **第 3 章** | 主流网络架构 | CNN、RNN、Transformer |
| **第 4 章** | 训练的艺术 | 过拟合、正则化、超参数调优 |
| **第 5 章** | 发展历程与前沿 | 从感知机到 GPT |
---
## 1. 从神经元到网络
### 单个神经元
神经网络的最小单元是**神经元**（Neuron）。它模拟了生物神经元的工作方式：接收多个输入信号，加权求和，通过激活函数产生输出。
```
输入 x1 ──→ ×w1 ──┐
输入 x2 ──→ ×w2 ──┼──→ Σ(加权求和) + b(偏置) ──→ f(激活函数) ──→ 输出
输入 x3 ──→ ×w3 ──┘
```
数学表达：**y = f(w₁x₁ + w₂x₂ + w₃x₃ + b)**
<NeuronDemo />
### 激活函数：为什么需要非线性？
如果没有激活函数，无论多少层神经元叠加，最终都等价于一个线性变换（矩阵乘法）。激活函数引入**非线性**，让网络能学习复杂的模式。
| 激活函数 | 公式 | 特点 | 常用场景 |
|---------|------|------|---------|
| ReLU | max(0, x) | 简单高效，训练快 | 隐藏层的默认选择 |
| Sigmoid | 1/(1+e⁻ˣ) | 输出 0~1 | 二分类输出层 |
| Tanh | (eˣ-e⁻ˣ)/(eˣ+e⁻ˣ) | 输出 -1~1 | RNN 中常用 |
| Softmax | eˣᵢ/Σeˣⱼ | 输出概率分布 | 多分类输出层 |
### 从神经元到网络
把多个神经元组织成**层**，多个层串联起来，就构成了神经网络：
```
输入层 隐藏层1 隐藏层2 输出层
(特征) (提取低级特征) (提取高级特征) (预测结果)
x1 ──→ [○ ○ ○ ○] ──→ [○ ○ ○] ──→ [○ ○]
x2 ──→ [○ ○ ○ ○] ──→ [○ ○ ○] ──→ 猫/狗
x3 ──→ [○ ○ ○ ○] ──→ [○ ○ ○]
```
| 概念 | 说明 |
|------|------|
| 输入层 | 接收原始数据（图片像素、文本向量等） |
| 隐藏层 | 中间处理层，层数越多网络越"深"（深度学习的"深"） |
| 输出层 | 产生最终预测（分类概率、回归值等） |
| 前向传播 | 数据从输入层逐层流向输出层的过程 |
::: tip 为什么叫"深度"学习？
传统机器学习通常只有 1-2 层。当隐藏层数量增加到几十甚至上百层时，就叫"深度"学习。更深的网络能学习更抽象的特征：第一层学边缘，第二层学纹理，第三层学部件，更深的层学到"这是一只猫"。
:::
---
## 2. 网络如何学习
神经网络的"学习"本质上是一个**优化问题**：找到一组权重（w）和偏置（b），使得网络的预测尽可能接近真实答案。
### 训练三步曲
```
1. 前向传播：输入数据，得到预测结果
2. 计算损失：用损失函数衡量预测与真实值的差距
3. 反向传播：根据损失，计算每个权重的梯度，更新权重
↓
重复以上步骤，直到损失足够小
```
### 损失函数：衡量"错得有多离谱"
损失函数（Loss Function）量化了预测值和真实值之间的差距。训练的目标就是最小化损失。
| 损失函数 | 公式简述 | 适用场景 |
|---------|---------|---------|
| MSE（均方误差） | 预测值与真实值差的平方的均值 | 回归问题 |
| Cross-Entropy（交叉熵） | -Σ y·log(ŷ) | 分类问题 |
| Binary Cross-Entropy | 交叉熵的二分类版本 | 二分类问题 |
### 梯度下降：找到最低点
想象你站在一座山上，蒙着眼睛要走到最低点。你能做的就是**摸一下脚下的坡度，然后往下坡方向走一步**。这就是梯度下降。
```
损失值
↑
│ ╱╲
│ ╱ ╲ ← 当前位置
│ ╱ ╲ ↙ 沿梯度方向下降
│ ╱ ╲╱ ← 局部最小值
│╱ ╲╱ ← 全局最小值
└──────────────→ 权重值
```
| 概念 | 说明 |
|------|------|
| 梯度 | 损失函数对每个权重的偏导数，指示"往哪个方向调整能减少损失" |
| 学习率 | 每一步走多远。太大会跳过最低点，太小会收敛太慢 |
| 批量大小 | 每次用多少样本计算梯度。全量太慢，单样本太抖，小批量（mini-batch）是折中 |
### 反向传播：链式法则的胜利
反向传播（Backpropagation）是计算梯度的高效算法。它利用微积分的**链式法则**，从输出层开始，逐层向后计算每个权重对损失的贡献。
```
前向传播：输入 → 隐藏层1 → 隐藏层2 → 输出 → 损失
反向传播：损失 → 输出 → 隐藏层2 → 隐藏层1 → 更新所有权重
```
::: tip 直觉理解反向传播
把神经网络想象成一条流水线。产品（预测）出了问题（损失大），你需要从最后一道工序开始往回查，看每道工序（每层权重）对最终问题贡献了多少，然后按贡献大小调整。贡献大的多调，贡献小的少调。
:::
---
## 3. 主流网络架构
不同类型的数据需要不同的网络架构。选对架构，事半功倍。
<NetworkLayersDemo />
### 3.1 CNN（卷积神经网络）
CNN 是处理图像的王者。核心思想：用小的卷积核在图像上滑动，提取局部特征。
```
输入图像 → [卷积层→激活→池化] × N → 全连接层 → 输出
28×28 提取边缘/纹理/形状 分类结果
```
| 特点 | 说明 |
|------|------|
| 局部连接 | 每个神经元只看一小块区域，而非整张图 |
| 参数共享 | 同一个卷积核在整张图上复用，大幅减少参数 |
| 平移不变性 | 猫在图片左边还是右边，都能识别 |
| 层级特征 | 浅层学边缘，深层学语义 |
代表模型：LeNet、AlexNet、VGG、ResNet、EfficientNet
### 3.2 RNN（循环神经网络）
RNN 专为**序列数据**设计。它的隐藏状态会传递到下一个时间步，让网络具有"记忆"能力。
```
时间步 t1 时间步 t2 时间步 t3
"我" ──→ "喜欢" ──→ "猫"
↓ ↓ ↓
[h1] ──→ [h2] ──→ [h3] ──→ 输出
↑ ↑ ↑
隐藏状态在时间步之间传递（记忆）
```
| 变体 | 解决的问题 | 核心机制 |
|------|-----------|---------|
| 原始 RNN | 基础序列建模 | 简单循环连接 |
| LSTM | 长序列梯度消失 | 遗忘门、输入门、输出门 |
| GRU | LSTM 参数太多 | 简化为重置门和更新门 |
| 双向 RNN | 只能看到过去 | 同时从前往后和从后往前处理 |
::: tip LSTM 的门控机制
LSTM 的精妙之处在于三个"门"：**遗忘门**决定丢弃哪些旧记忆，**输入门**决定存入哪些新信息，**输出门**决定输出哪些内容。就像你读一本书，会选择性地记住重要情节、忘掉无关细节。
:::
### 3.3 Transformer：注意力就是一切
2017 年 Google 发表的 "Attention Is All You Need" 论文提出了 Transformer，彻底改变了 AI 领域。它用**自注意力机制**替代了循环结构，是 GPT、BERT、Claude 等大模型的基础。
```
输入序列 → 嵌入 + 位置编码 → [多头注意力 → 前馈网络] × N → 输出
↑
每个词都能"看到"所有其他词
```
| 优势 | 说明 |
|------|------|
| 并行计算 | 不像 RNN 必须逐步处理，Transformer 可以并行处理整个序列 |
| 长距离依赖 | 任意两个位置之间直接建立联系，不受距离限制 |
| 可扩展性 | 模型越大、数据越多，效果越好（Scaling Law） |
**自注意力的直觉**：读"小猫坐在垫子上，因为**它**很累"这句话时，"它"需要关注"小猫"才能理解含义。自注意力让模型学会这种关联——为序列中的每对词计算一个"相关性分数"。
<NetworkArchitectureDemo />
## 4. 训练的艺术
有了好的架构还不够，训练过程中有很多"坑"需要避开。
### 4.1 过拟合 vs 欠拟合
| 问题 | 表现 | 原因 | 解决方案 |
|------|------|------|---------|
| 过拟合 | 训练集表现好，测试集表现差 | 模型太复杂，"背答案"而非学规律 | 正则化、Dropout、数据增强、早停 |
| 欠拟合 | 训练集和测试集都表现差 | 模型太简单，学不到规律 | 增加模型容量、训练更久、更好的特征 |
```
误差
↑
│ ╲ 训练误差 测试误差 ╱
│ ╲ ╱
│ ╲─────────────────╱
│ 欠拟合 ← 最佳点 → 过拟合
└──────────────────────────→ 模型复杂度
```
### 4.2 关键超参数
超参数是训练前需要人为设定的参数（不是模型自己学的）：
| 超参数 | 作用 | 常见范围 | 调优建议 |
|--------|------|---------|---------|
| 学习率 | 每步更新的幅度 | 1e-5 ~ 1e-1 | 最重要的超参数，通常从 1e-3 开始 |
| 批量大小 | 每次训练用多少样本 | 16 ~ 512 | 越大训练越稳定，但需要更多显存 |
| 训练轮数（Epoch） | 遍历整个数据集的次数 | 10 ~ 100+ | 配合早停法，验证集不再提升就停 |
| 优化器 | 梯度更新策略 | Adam、SGD | Adam 是默认选择，SGD+动量适合精调 |
### 4.3 正则化技巧
防止过拟合的常用手段：
| 技巧 | 原理 | 使用方式 |
|------|------|---------|
| Dropout | 训练时随机关闭部分神经元 | 通常 p=0.1~0.5 |
| 权重衰减 | 在损失函数中加入权重大小的惩罚 | L2 正则化，λ=1e-4 |
| 数据增强 | 对训练数据做随机变换（翻转、裁剪、旋转） | 图像任务必备 |
| 早停法 | 验证集损失不再下降时停止训练 | patience=5~10 |
| Batch Normalization | 标准化每层的输入分布 | 加速收敛，有轻微正则化效果 |
::: tip 训练的经验法则
1. 先用小数据集跑通整个流程，确认代码没 bug
2. 从已有的预训练模型开始微调，而非从零训练
3. 学习率是最值得花时间调的超参数
4. 如果训练损失不下降，先检查数据和代码，再怀疑模型
:::
---
## 5. 发展历程与前沿
神经网络的发展经历了几次"寒冬"和"复兴"，每次突破都源于关键的技术创新。
| 年代 | 里程碑 | 关键突破 |
|------|--------|---------|
| 1958 | 感知机（Perceptron） | 第一个神经网络模型，只能处理线性问题 |
| 1986 | 反向传播算法 | 让多层网络的训练成为可能 |
| 1998 | LeNet（CNN） | 卷积网络在手写数字识别上大获成功 |
| 2012 | AlexNet | 深度 CNN 在 ImageNet 上碾压传统方法，深度学习爆发 |
| 2014 | GAN（生成对抗网络） | 两个网络对抗训练，能生成逼真图像 |
| 2017 | Transformer | "Attention Is All You Need"，注意力机制取代 RNN |
| 2018 | BERT | 预训练+微调范式，NLP 全面突破 |
| 2020 | GPT-3 | 1750 亿参数，展示了大模型的涌现能力 |
| 2022 | ChatGPT | RLHF 对齐技术，AI 进入大众视野 |
| 2023+ | 多模态大模型 | GPT-4V、Claude 等，同时理解文本和图像 |
### 当前趋势
| 方向 | 说明 |
|------|------|
| 大模型（LLM） | 参数量从亿级到万亿级，涌现出推理、编程等能力 |
| 多模态 | 同一个模型处理文本、图像、音频、视频 |
| 高效微调 | LoRA、QLoRA 等技术让普通开发者也能微调大模型 |
| AI Agent | 让大模型使用工具、规划任务、自主完成复杂目标 |
| 小模型蒸馏 | 用大模型的知识训练小模型，在端侧部署 |
::: tip 对开发者的启示
你不需要从零训练神经网络。现代 AI 开发更多是**调用 API**（如 OpenAI、Claude API）或**微调预训练模型**（如用 Hugging Face）。但理解底层原理能帮你更好地选择模型、设计 prompt、诊断问题。
:::
---
## 总结
| 核心概念 | 一句话总结 |
|---------|-----------|
| 神经元 | 加权求和 + 激活函数，网络的最小计算单元 |
| 前向传播 | 数据从输入层逐层流向输出层，产生预测 |
| 反向传播 | 从损失出发，逐层计算梯度，更新权重 |
| CNN | 卷积核提取局部特征，图像处理的首选 |
| RNN/LSTM | 循环连接保持记忆，处理序列数据 |
| Transformer | 自注意力并行处理，大模型的基础架构 |
| 过拟合 | 模型"背答案"，用正则化、Dropout 等手段防止 |
| 迁移学习 | 站在巨人肩膀上，用预训练模型微调解决新问题 |
---
## 延伸阅读
- [3Blue1Brown - 神经网络系列视频](https://www.3blue1brown.com/topics/neural-networks) — 最直观的可视化讲解
- [Stanford CS231n](http://cs231n.stanford.edu/) — 经典的卷积神经网络课程
- [The Illustrated Transformer](https://jalammar.github.io/illustrated-transformer/) — 图解 Transformer 架构
- [Neural Networks and Deep Learning](http://neuralnetworksanddeeplearning.com/) — 免费在线教材
- [Hugging Face 课程](https://huggingface.co/learn) — 动手实践 Transformer 和大模型
docs/zh-cn/appendix/index.md
+8
View File
@@ -2,6 +2,14 @@
本附录涵盖从计算机基础到工程素养的完整知识体系，是你学习旅程中的重要参考库。
## 📍 附录知识地图
点击下方的分类卡片，查看每个分类的完整学习路径：
<AppendixFlowMap />
---
## 内容分类
### 一、计算机是怎么回事
find-intervals.mjs
+28
View File
@@ -0,0 +1,28 @@
import fs from 'fs'
import path from 'path'
function walkSync(dir, filelist = []) {
fs.readdirSync(dir).forEach(file => {
const dirFile = path.join(dir, file)
try {
filelist = fs.statSync(dirFile).isDirectory() ? walkSync(dirFile, filelist) : filelist.concat(dirFile)
} catch (err) {
if (err.code === 'OOM' || err.code === 'EMFILE') throw err
}
})
return filelist
}
const vueFiles = walkSync('docs/.vitepress/theme/components').filter(f => f.endsWith('.vue'))
for (const file of vueFiles) {
const content = fs.readFileSync(file, 'utf8')
if (content.includes('setInterval')) {
const lines = content.split('\n')
lines.forEach((line, i) => {
if (line.includes('setInterval')) {
console.log(`${file}:${i + 1}: ${line.trim()}`)
}
})
}
}
find_setinterval.cjs
+52
View File
@@ -0,0 +1,52 @@
const fs = require('fs');
const path = require('path');
function walk(dir) {
let results = [];
const list = fs.readdirSync(dir);
list.forEach(function (file) {
file = dir + '/' + file;
const stat = fs.statSync(file);
if (stat && stat.isDirectory()) {
results = results.concat(walk(file));
} else {
if (file.endsWith('.vue')) results.push(file);
}
});
return results;
}
const vueFiles = walk('docs/.vitepress/theme/components');
vueFiles.forEach(file => {
const lines = fs.readFileSync(file, 'utf8').split('\n');
let bracketDepth = 0;
let insideScript = false;
lines.forEach((line, index) => {
if (line.includes('<script setup')) {
insideScript = true;
bracketDepth = 0;
return;
}
if (line.includes('</script>')) {
insideScript = false;
}
if (insideScript) {
// Check for setInterval BEFORE updating bracket depth for the current line
// because `setInterval(() => {` will increase depth but the call ITSELF is at depth 0
if (line.includes('setInterval') && bracketDepth === 0) {
console.log(`Top-level setInterval: ${file}:${index + 1} - ${line.trim()}`);
}
// Simple Bracket Depth Counting
// Handle one-liners like `if (x) { ... }` natively by adding/subtracting on the same line
// Wait, we only care about trailing brackets basically. Ignore string contents for simplicity.
// This heuristic is usually fine for formatting standard vue codes
const openCount = (line.match(/\{/g) || []).length;
const closeCount = (line.match(/\}/g) || []).length;
bracketDepth += openCount - closeCount;
}
});
});
find_top_level_setinterval.js
+59
View File
@@ -0,0 +1,59 @@
const fs = require('fs');
const path = require('path');
const compiler = require('vue/compiler-sfc');
const babel = require('@babel/parser');
const traverse = require('@babel/traverse').default;
function walk(dir) {
let results = [];
const list = fs.readdirSync(dir);
list.forEach(function(file) {
file = dir + '/' + file;
const stat = fs.statSync(file);
if (stat && stat.isDirectory()) {
results = results.concat(walk(file));
} else {
if (file.endsWith('.vue')) results.push(file);
}
});
return results;
}
const vueFiles = walk('docs/.vitepress/theme/components');
vueFiles.forEach(file => {
const content = fs.readFileSync(file, 'utf8');
if (!content.includes('setInterval')) return;
const { descriptor } = compiler.parse(content);
if (!descriptor.scriptSetup) return;
const ast = babel.parse(descriptor.scriptSetup.content, {
sourceType: 'module',
plugins: ['typescript']
});
traverse(ast, {
CallExpression(path) {
if (path.node.callee.name === 'setInterval') {
// check if we are inside a function declaration or arrow function or onMounted check
let parent = path.parentPath;
let insideFunction = false;
while (parent) {
if (
parent.isFunctionDeclaration() ||
parent.isArrowFunctionExpression() ||
parent.isFunctionExpression() ||
parent.isObjectMethod()
) {
insideFunction = true;
break;
}
parent = parent.parentPath;
}
if (!insideFunction) {
console.log(`Top-level setInterval found in ${file} at line ${path.node.loc.start.line}`);
}
}
}
});
});
package-lock.json
Generated
+244 -716
View File
File diff suppressed because it is too large Load Diff
package.json
+3 -2
View File
@@ -5,7 +5,8 @@
"type": "module",
"scripts": {
"dev": "vitepress dev docs",
"build": "npm run lint && vitepress build docs --force",
"build": "vitepress build docs",
"build:force": "vitepress build docs --force",
"preview": "vitepress preview docs",
"format": "prettier --write .",
"verify": "bash scripts/verify.sh",
@@ -38,7 +39,7 @@
"element-plus": "^2.13.1",
"typeit": "^8.8.7",
"viewerjs": "^1.11.7",
"vitepress": "2.0.0-alpha.15",
"vitepress": "^2.0.0-alpha.16",
"vue": "^3.5.0"
}
}
scripts/build.mjs
+18
View File
@@ -0,0 +1,18 @@
/**
* VitePress 2.0 alpha build wrapper
*
* VitePress 2.0-alpha 在 build 完成后不会自动退出进程（已知问题，
* 见 https://github.com/vuejs/vitepress/issues/562）。
* 此脚本通过子进程运行 build，确保无论如何都能正确退出，
* 同时保留真实的退出码供 CI 使用。
*/
import { spawn } from 'node:child_process'
const child = spawn('npx', ['vitepress', 'build', 'docs', '--force'], {
stdio: 'inherit',
shell: true
})
child.on('close', (code) => {
process.exit(code ?? 0)
})