دليل Mocha AI لإنشاء التطبيقات: من الأمر النصي إلى تطبيق منشور
جولة خطوة بخطوة مع Mocha AI — اكتب أول أمر نصي، وأضف تسجيل الدخول بجوجل وستريب، وانشر على نطاق mocha.app الفرعي، وصدّر كودك. مع القصة الكاملة لإغلاق الخدمة في أغسطس 2026، بوقائق محقّقة من وثائق Mocha الرسمية.
الخلاصة
- كانت Mocha (getmocha.com) أداة ذكاء اصطناعي لبناء تطبيقات متكاملة: تصف التطبيق بلغة عادية، فتكتب تطبيق React + TypeScript حقيقي بقاعدة بيانات ومصادقة واستضافة، وتنشره بنقرة واحدة على نطاق فرعي mocha.app.
- سير العمل: اكتب الأمر → راجع خطة الذكاء الاصطناعي → جرّب في المعاينة الحية → كرّر عبر المحادثة. وضع Discuss يخطط دون لمس الكود، وDirect Edit يعدّل النص دون استهلاك الأرصدة.
- الكود كان ملكك: زر التنزيل خلف اسم التطبيق في الشريط العلوي، والحزمة التقنية قابلة للنقل (React وHono وSQLite)، وقاعدة البيانات قابلة للتصدير إلى CSV.
- أُغلقت Mocha في 1 أغسطس 2026. توثّق هذه الجولة طريقة عمل الأداة بدقة، وتغطي الأسئلة الشائعة مصير التطبيقات والفواتير والتصدير.
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
القناة:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
القناة:Mocha (official channel)13:57
Mocha documentation (getting started, billing, limits, hosting)
الوثائق:docs.getmocha.com
Mocha is shutting down on August 1 (announced May 15, 2026)
الإعلان:getmocha.com/blog
تمت مطابقة الوقائع مع وثائق Mocha الرسمية وإعلان الإغلاق في سبتمبر 2026. أرقام الأسعار مأخوذة من صفحة الأسعار الظاهرة في الفيديو (ديسمبر 2025) ومن وثائق Mocha.
لقطات الشاشة مأخوذة من الفيديو أعلاه، مع النسبة إلى صاحبها وروابط تؤدي إلى اللحظة الدقيقة لكل خطوة.
كيف تستخدم Mocha AI: من الأمر النصي إلى التطبيق المنشور، خطوة بخطوة
الجزء 1 · من الفكرة إلى أول بناء
- 1
أنشئ حسابك وافتح الأداة
سجّل مجانًا في getmocha.com ثم اضغط "Create new app" من لوحة التحكم. كل مشروع يبدأ من صندوق "What do you want to build?": اكتب فكرتك، وأرفق لقطات مرجعية، وأبقِ التطبيق خاصًا (Private) حتى تجهز للزوار. وتحته خيارات Inspiration وTemplates وPrompting 101 إن احتجت نقطة انطلاق.
صندوق "What do you want to build?" الذي يبدأ منه كل تطبيق في Mochaشاهد عند 3:06 - 2
اكتب ملخص متطلبات، لا سطرًا واحدًا
سمِّ الميزات والشكل. طلب الأمر النصي في العرض متجرًا للتجارة الإلكترونية مع عضويات: شبكة منتجات، فئات، مرشّحات، سلة مشتريات، تكامل Stripe، تسجيل دخول بالبريد وكلمة المرور وآخر بجوجل، وصفحة دخول للمشرف — ثم طلب من Mocha البدء بالميزات الأساسية وسرد ما يليها. التحديد يغلب الغموض: "أضف زر Contact Us أزرق في الترويسة" أفضل من "اجعله أجمل".
متطلبات العرض: متجر إلكتروني باشتراكات مع Stripe ودخول جوجل ودور مشرفشاهد عند 3:15 - 3
دع Mocha تبني، ثم جرّب في المعاينة
بعد الإرسال تخطط Mocha أولًا ثم تكتب الكود — استغرق البناء الأول للمتجر التجريبي نحو 3 دقائق و24 ثانية و19 رصيدًا، وانتهى بملخص "13 changes made" للمراجعة. المعاينة في الوسط تطبيق حقيقي تفاعلي: صفِّ المنتجات، وبدّل الوضع الداكن، وأضف إلى السلة، وبدّل بين الحاسوب والجوال، وسجّل الدخول بجوجل لاختبار المصادقة المدمجة.
واجهة المتجر المولّدة: مرشحات الفئات وشبكة المنتجات والوضع الداكنشاهد عند 9:54
الجزء 2 · تحت الغطاء: الكود والبيانات والإصلاحات
- 4
استعرض الكود المولّد
يعرض تبويب Code مشروع React + TypeScript كاملًا كتبته Mocha. يمكنك إضافة ملفات ومجلدات وتحرير الكود مباشرة؛ وبعض ملفات المنصة تبقى مقفلة، وكل شيء للقراءة فقط أثناء بناء الذكاء الاصطناعي. هنا يستطيع المستخدم التقني — أو الشريك التقني — أن يتولى القيادة.
تبويب Code مع المشروع الكامل — ملفات المنصة تبقى مقفلة أثناء البناءشاهد عند 5:12 - 5
تفقّد قاعدة بيانات التطوير
يسرد تبويب Data جداولك — users وproducts وcart_items وmemberships — معبأة مسبقًا ببيانات وهمية للتطوير. بيانات الإنتاج تبقى منفصلة وفارغة حتى النشر، فتجاربك هنا لا تمس مستخدمين حقيقيين أبدًا. ولا تعدّل Mocha بيانات الإنتاج مباشرة؛ أضف المنتجات عبر لوحة إدارة داخل التطبيق.
تبويب Data: جداول تطوير معبأة بمنتجات وهميةشاهد عند 10:38 - 6
تعافَ من الأخطاء بميزة Fix with AI
عند فشل المعاينة تعرض Mocha الخطأ وتقترح Quick restart و"Fix with AI". في العرض، أصلحت نقرة واحدة انهيارًا في TypeScript (كل إصلاح يكلف 1-3 أرصدة). وللأخطاء العنيدة، فعّل وضع Discuss وناقش الذكاء الاصطناعي في الخطأ ثم دعه يبني الإصلاح.
فشلت المعاينة؟ ميزة Fix with AI حلت معظم أخطاء العرض بنقرة واحدةشاهد عند 7:36 - 7
فعّل تسجيل الدخول بجوجل
تدعم تطبيقات Mocha تسجيل الدخول بجوجل منذ البداية. في Settings افتح Google Sign In، والصق معرّف عميل Google OAuth وسرّه، وأضف عنوان إعادة التوجيه من Mocha الظاهر في اللوحة إلى Google Cloud Console. وتخصيص صفحة الدخول إعداد منفصل — تجاوزه في الجولة الأولى.
إعدادات Google Sign In: الصق بيانات عميل OAuth وعنوان إعادة التوجيه من Mochaشاهد عند 6:27 - 8
خطّط في وضع Discuss قبل البناء
حوّل صندوق الكتابة إلى Discuss فيجيب الذكاء الاصطناعي دون تغيير الكود. اسأله "what are our next steps?" فيستعرض تطبيقك ويقترح الأولويات — استخدمه العرض لترتيب الدفع بـ Stripe ثم سجل الطلبات ثم العضويات. حين تعجبك الخطة عُد إلى وضع البناء وقل "build it".
وضع Discuss يجيب عن "ما الخطوات التالية" دون تغيير أي كودشاهد عند 12:21
الجزء 3 · المدفوعات والنشر والتكاليف
- 9
اربط Stripe عبر مسار المفتاح الموجّه
اطلب مدفوعات Stripe فتضيف Mocha سرًّا باسم STRIPE_SECRET_KEY إلى مشروعك، مع زر Walkthrough يسرد كل نقرة داخل لوحة Stripe — بما في ذلك الفرق بين مفاتيح الاختبار والمفاتيح الحية. الصق مفتاح sk_test وأرسل، فيكتمل ربط الدفع. تُخزَّن الأسرار كمتغيرات بيئة وتبقى مخفية عن مستخدمي التطبيق بعد النشر.
نافذة STRIPE_SECRET_KEY مع الدليل المدمج لـ Stripeشاهد عند 14:23 - 10
انشر على نطاق mocha.app الفرعي
يفتح زر Publish نافذة فيها الرابط وقائمة Status وإعدادات الظهور. أبقِ Status على Unpublished أثناء الاختبار، واجعل الظهور Private، ثم اضغط Publish app — استغرق إعادة النشر في العرض نحو 15 ثانية. مدفوعات Stripe التجريبية تعمل على الرابط المنشور فقط، لأن بيئة التجارب داخل المحرر تحجب عمليات الدفع بإعادة التوجيه.
Publish app: اختر نطاق mocha.app الفرعي وابقَ على Unpublished أثناء الاختبارشاهد عند 17:30 - 11
نفّذ عملية دفع تجريبية على التطبيق المنشور
أضف المنتجات عبر لوحة الإدارة، وتابع إلى الدفع على الرابط المنشور، وادفع ببطاقة Stripe التجريبية 4242 4242 4242 4242. ظهر في العرض "Payment Successful" وظهرت العملية في لوحة Stripe. حين يعمل كل شيء، حوّل Status إلى Published وشارك الرابط.
Payment Successful: عملية دفع تجريبية بقيمة 699.98 دولارًا على الرابط المنشورشاهد عند 19:51 - 12
اعرف التكلفة قبل الالتزام
تبدأ الخطة المجانية بـ 20 رصيدًا وفق وثائق Mocha. وفي صفحة الأسعار الظاهرة في الجولة (ديسمبر 2025): Bronze بـ 20 دولارًا شهريًا مقابل 1,500 رصيد، وSilver بـ 50 مقابل 4,500، وGold بـ 200 مقابل 25,000. لا تُخصم الأرصدة إلا عند نجاح عملية الذكاء الاصطناعي — النشر وDirect Edit واستعادة الإصدارات مجانية دائمًا.
صفحة الأسعار كما ظهرت في ديسمبر 2025: خطط Bronze وSilver وGoldشاهد عند 27:15
حقيقة التصدير: كان الكود ملكك — وماذا الآن؟
كان سؤال "هل أستطيع أن آخذ كودي؟" هو الفيصل في اختيار Mocha، والإجابة الصادقة لها شقّان: تصدير سخي ما دامت المنصة حية، ونافذة هروب متعجلة حين ماتت. هذا هو السجل بتواريخه.
- 1تنزيل الكود (أثناء حياة Mocha): اضغط اسم التطبيق في الشريط العلوي فيظهر زر تنزيل الكود. قالت FAQ الرسمية إن كل ما تبنيه على Mocha ملكك، واقترحت تصديره إلى Cursor أو Windsurf أو أي محرر. كانت الحزمة قابلة للنقل: TypeScript وReact وHono للواجهات البرمجية وSQLite.
- 2القيود: لا مزامنة مع GitHub ولا نشر على Vercel أو Netlify أو أي مستضيف خارجي — كانت Mocha تنشر على بنيتها التحتية الخاصة على Cloudflare فقط. لكن قراءة الكود كانت مجانية دائمًا، حتى بصفر أرصدة.
- 3قاعدة البيانات: كان بإمكانك أن تطلب من Mocha بناء ميزات تصدير CSV داخل التطبيق نفسه، وكان تبويب Data يتيح الاطلاع على بيانات التطوير والإنتاج.
- 4أداة التصدير عند الإغلاق: قدّم إعلان 15 مايو 2026 أداة في Settings → Export لتنزيل الكود والبيانات، مع تحذير من أن تشغيل التطبيق خارج Mocha "يتطلب جهدًا هندسيًا".
- 5الترحيل: كان المسار الموصى به ترحيلًا بنقرة واحدة إلى Anything، أداة بناء متكاملة مشابهة تدعم تطبيقات الجوال أيضًا، مع رصيد 20 دولارًا للتعديلات بعد الترحيل. توقفت الأداة في 1 أغسطس 2026، وكان من المخطط بقاء روابط الترحيل والتصدير 30 يومًا بعد الإغلاق.
الدرس أعمق من Mocha: قبل أن تبني عملك على أي أداة ذكاء اصطناعي لتطوير التطبيقات، تحقق أين يقع الكود، وهل تعمل الحزمة التقنية في مكان آخر، وكيف يبدو مخرج الطوارئ عند الإغلاق. الأدلة المرتبطة أدناه — من Lovable إلى DeepSeek في Cursor — محطات جيدة إن كنت تهاجر.
أسعار Mocha ونظام الأرصدة، مشروحة
اعتمدت Mocha نموذجًا مجانيًا مدفوعًا جزئيًا: الأرصدة دفعت مقابل عمل الذكاء الاصطناعي، والخطط دفعت مقابل الأرصدة والحدود. الأرقام أدناه من وثائق Mocha (تحققت منها في سبتمبر 2026) ومن صفحة الأسعار الموثقة في الفيديو (ديسمبر 2025).
- 1الخطة المجانية: 20 رصيدًا للبداية، وعلامة "Made in Mocha" المائية على التطبيقات المنشورة (تُزال في الخطط المدفوعة)، ومساحة تكفي المشاريع الصغيرة. استهلك التطبيق التجريبي الكامل — المصادقة وStripe والعضويات والإدارة — نحو 100 رصيد إجمالًا.
- 2الخطط المدفوعة (صفحة الأسعار في ديسمبر 2025): Bronze بـ 20 دولارًا شهريًا مع 1,500 رصيد، وSilver بـ 50 مع 4,500 (الأكثر شعبية)، وGold بـ 200 مع 25,000. تؤكد الوثائق الحصص نفسها، تتجدد شهريًا، وتُرحَّل أرصدة الاشتراك غير المستخدمة حتى ضعف الحصة الشهرية.
- 3ماذا كانت تشتري الأرصدة: تعديل نص أو تنسيق بسيط 5-15 رصيدًا، مكوّن جديد 15-40، صفحة جديدة 30-60، ميزة معقدة مع قاعدة بيانات 50-100+. وكانت عمليات الذكاء الاصطناعي الفاشلة بلا تكلفة — لا يُخصم شيء إلا عند نجاح التعديل.
- 4مجاني دائمًا: تصفح المشروع، وتغييرات النص في Direct Edit Mode، واستعراض قاعدة البيانات، ونشر التطبيق، واستعادة الإصدارات. وكانت حدود حجم التطبيق سارية على Bronze؛ ومن Silver فما فوق كانت فعليًا غير محدودة للتطبيقات الاعتيادية.
الفوترة بعد الإغلاق: استمرت الاشتراكات بسعرها حتى 1 أغسطس 2026، وأُلغيت تلقائيًا في ذلك اليوم، ولم يُخصم شيء بعده. أدرج الإعلان جهات اتصال للدعم في مسائل الفواتير — لكن نافذة الثلاثين يومًا بعد الإغلاق قد مضت الآن.