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

# Easy-Vibe: Learn Vibe Coding from 0 to 1 ### _من الصفر، تعلم قائم على المشاريع، بناء أول منتج ذكاء اصطناعي لك_

📌 ابدأ القراءة أونلاين (Start Reading Online)

اقرأ أونلاين · خريطة التعلم · المجتمع

## 🚀 مقدمة المشروع عندما تحاول كتابة الكود بالذكاء الاصطناعي، وتواجه أخطاء مستمرة، وتريد الاستسلام غالبًا، ومن غير الواضح كيفية نشر برامجك فعليًا على الإنترنت 😢 هذا البرنامج التعليمي مصمم خصيصًا ليأخذك من 0 إلى 1، وإتقان تقنيات Vibe Coding تدريجيًا: - **المرحلة 1**: **من الألعاب المصغرة إلى نماذج الويب**، إتقان أساسيات برمجة الذكاء الاصطناعي وتفكير المنتج - **المرحلة 2**: تعلم **تطوير الواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي** المتعلقة بتقنيات Vibe Coding، إكمال تطبيق كامل - **المرحلة 3**: إتقان بناء **التطبيقات المعقدة متعددة المنصات**، نحو تطبيقات مستوى الإنتاج نؤمن بأن من خلال إتقان Vibe Coding ودمجه مع التدريب المنهجي، يمكن لشخص واحد أن يصبح مطورًا يجمع بين تطوير الواجهة الأمامية، وتطوير الواجهة الخلفية، ودمج قدرات الذكاء الاصطناعي، وتصميم المنتجات. > **هذا المشروع موجه بشكل رئيسي إلى ثلاثة أنواع من المتعلمين:** > > - **المبتدئون (أشخاص عاديون / المنتج والعمليات)**: مساعدة المتعلمين غير التقنيين على فهم المفاهيم الرئيسية وإكمال أول نموذج أولي للمنتج > - **المطورون مستوى المبتدئ-المتوسط (الطلاب والمطورون مع أساس معين)**: إتقان معرفة Vibe Coding للواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي > - **المطورون المتقدمون (الشركات والشركات الناشئة، مفتوحة المصدر والمطورون المستقلون)**: تقنيات التطوير المتقدمة، التطوير متعدد المنصات ### 📖 تنقل المحتوى

Learning Map

### الملحق العام [قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية الشائعة للذكاء الاصطناعي والمصطلحات والشروحات السيناريوية](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/stage-1/appendix-a-product-thinking/index.md) | أطر التفكير اللازمة لبناء منتج من الصفر إلى واحد | ✅ | | [الملحق B: الأخطاء الشائعة والحلول](docs/stage-1/appendix-b-common-errors/index.md) | الأخطاء الشائعة في Vibe Coding وطرق استكشاف الأخطاء | ✅ | ### 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-claudecode-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) على مساعدتهم ودعمهم لهذا المشروع - شكرًا لجميع المطورين الذين ساهموا في هذا المشروع ❤️

## 📧 اتصل بنا

إذا كان لديك أسئلة أو اقتراحات أو شكاوى، أو ترغب في التواصل، يرجى مسح رمز QR أدناه

## 📄 الترخيص

المشاع الإبداعي

هذا العمل مرخص تحت المشاع الإبداعي Attribution - غير تجاري - المشاركة بالمثل 4.0 الدولي

## 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)