كيفية بناء أبسط برنامج صغير على WeChat

1. ما هي البرامج الصغيرة على WeChat وتطوير البرامج الصغيرة

في هذا البرنامج التعليمي، سنكمل حلقة مغلقة كاملة: من فكرة في ذهنك إلى برنامج صغير حقيقي يمكن البحث عنه وفتحه عبر رمز QR داخل WeChat.

قبل أن نبدأ البناء، نحتاج إلى تأسيس فهمين أساسيين.

الأول هو الجوهر: ما هو بالضبط البرنامج الصغير على WeChat؟ كيف يختلف عن التطبيق العادي أو الموقع الإلكتروني؟ لماذا يختار العديد من المنتجات هذا التنسيق؟ فقط عندما تفهم المنطق الأساسي يمكنك الحكم على ما إذا كانت فكرتك تناسب البرنامج الصغير.

الثاني هو المسار: عندما تقول "أريد بناء برنامج صغير"، كيف يبدو المسار الكامل من الصفر إلى الإطلاق؟ ما هي العقد الرئيسية على هذا المسار - ماذا تفكر فيه أثناء التصور، كيف تعد البيئة، كيف يحسن التطوير بمساعدة الذكاء الاصطناعي الكفاءة، ما الفخاخ التي تظهر في تصحيح المحاكي، وماذا يحل كل من حساب الاختبار والإطلاق الرسمي. إذا مررت بهذه العملية ذهنيًا أولاً، لن تضيع أثناء التنفيذ.

بعد توضيح هذين السؤالين، يمكننا الدخول رسميًا في التطوير. لنبدأ بالسؤال الأول: ما هو بالضبط البرنامج الصغير على WeChat؟

1.1 البرنامج الصغير على WeChat

يمكن اعتبار البرنامج الصغير على WeChat كتطبيق يعيش داخل WeChat. لا تحتاج للبحث في متجر تطبيقات، أو التنزيل، أو التثبيت. يمكن للمستخدمين البحث بالاسم في WeChat، أو مسح رمز QR، أو فتح بطاقة مشتركة واستخدامه فورًا. بعد الاستخدام، يكفي إغلاقه. لا يشغل مساحة دائمة على الشاشة الرئيسية للهاتف أو التخزين.

للمستخدمين العاديين، تحل البرامج الصغيرة العديد من "المهام الصغيرة": تتبع التوصيلات، طلب القهوة، عرض الطلبات، لعب لعبة سريعة. البدء السريع والدخول الموحد داخل WeChat هما أكبر سمات تجربتها.

بالنسبة للشركات والمطورين، البرامج الصغيرة هي تنسيق "تطبيق صغير" قابل للبحث والمشاركة. طالما قمت بالتسجيل على منصة WeChat الرسمية، وإكمال الإعدادات، واجتياز المراجعة، يمكن لبرنامجك الصغير أن يفتح لجميع مستخدمي WeChat. مقارنة بالتطبيقات التقليدية، من الأسهل الحصول على أول مجموعة مستخدمين لأن الناس معتادون بالفعل على أداء العديد من المهام في WeChat.

في هذا البرنامج التعليمي، لن نبني نظام أعمال معقد. اخترنا مثالًا كلاسيكيًا: لعبة الثعبان. إنها صغيرة ومنطقها واضح، لكنها تتضمن العناصر الكاملة التي يجب أن يحتويها البرنامج الصغير: صفحات متعددة، تفاعلات بسيطة، تغييرات الحالة، تسجيل النقاط، إلخ. إنها مثالية كأول مشروع لك.

1.2 تطوير البرامج الصغيرة على WeChat

بعد فهم "ما هي البرامج الصغيرة"، السؤال التالي هو: ماذا يتضمن تطوير واحد فعليًا؟

تحتاج إلى هدف واضح (مثلاً، لعبة ثعبان يمكن للمستخدمين لعبها في أي وقت)، تصميم الواجهة التي سيراها المستخدمون، تحديد ماذا يجب أن يحدث تحت إجراءات مختلفة، وأخيرًا نشره.

في التطوير التقليدي، عادة ما يقود المبرمجون جميع هذه الخطوات ويكتبون الكثير من الكود. في التطوير بمساعدة الذكاء الاصطناعي، يمكن تقسيم هذا بشكل أكثر وضوحًا: أنت تشرح ما تريد، والذكاء الاصطناعي يساعد في معظم تفاصيل التنفيذ. هذا يعني للمبتدئين، أن المهارة الأكثر أهمية لم تعد حفظ بناء الجمل، بل وصف المتطلبات بوضوح وفهم مخرجات الذكاء الاصطناعي.

1.3 عدة طرق لتطوير البرامج الصغيرة على WeChat

في المشاريع الحقيقية، يستخدم الناس مسارات تقنية مختلفة. لتجنب إغراقك بالمصطلحات في البداية، سنقوم بتصنيف تقريبي فقط حتى تفهم المسارات الشائعة.

الطريقة الأولى هي استخدام القدرات الأصلية الرسمية مباشرة. بعد إنشاء مشروع في أدوات تطوير WeChat، سترى مجموعة ثابتة من أنواع الملفات المستخدمة لوصف بنية الصفحة والأنماط والمنطق. هذه الطريقة تبقى قريبة من الوثائق الرسمية وتمنح تحكمًا قويًا، لكن للمتعلمين الواجهات الأمامية لأول مرة، منحنى التعلم أكثر انحدارًا قليلاً.

الطريقة الثانية هي استخدام أطر العمل متعددة الأنظمة، مثل uni-app. تكتب أساسًا كودًا شبيهًا بالويب محليًا (مثلاً ملفات .vue)، ويحول الإطار هذا الكود إلى تنسيقات يمكن للبرامج الصغيرة على WeChat تشغيلها. الميزة هي هيكل موحد. إذا نشرت لاحقًا على منصات أخرى (مثل H5 أو التطبيق)، التغييرات تكون أقل نسبيًا.

بناءً على هاتين الطريقتين، يركز هذا البرنامج التعليمي على إجراءات التشغيل الموحدة للبرامج الصغيرة باستخدام أدوات مساعدة من الذكاء الاصطناعي. مثلاً، افتح المشروع بالكامل في Trae وأخبر الذكاء الاصطناعي المدمج مباشرة: "أرجو إضافة صفحة رئيسية بعنوان وزر في هذا الملف" أو "أرجو إنشاء صفحة لعبة تعرض الثعبان والنقاط." سيقوم الذكاء الاصطناعي بإنشاء مقتطفات كود جديدة أو تعديل/إعادة هيكلة الكود الموجود بناءً على سياق المشروع الحالي.

هذه الطرق الثلاث ليست حصرية متبادلة. يمكنك تمامًا البناء في مشروع uni-app بينما تستخدم Trae AI لمعظم أعمال البرمجة. المفتاح ليس اختيار طريقة واحدة، بل معرفة أين أنت الآن وما الأدوات المتاحة.

1.4 خطوات البرنامج الصغير على WeChat المشمولة في هذه المقالة (معاينة عامة)

يتبع هذا البرنامج التعليمي إيقاعًا من البيئة إلى المنتج النهائي. حول مثال لعبة الثعبان وأسلوب Trae vibecoding، نقسم العملية إلى مسار قابل لإعادة الاستخدام. في الفصول اللاحقة، ستمر بهذه المراحل:

1. بناء الأساس المفاهيمي: فهم ما هي البرامج الصغيرة، ما طرق التطوير الشائعة، ولمن هذه اللعبة الصغيرة الثعبان وفي أي سيناريوهات تُستخدم.
2. إعداد البيئة: تسجيل حساب برنامج صغير، تثبيت HBuilderX و Trae وأدوات تطوير WeChat، ثم إنشاء هيكل مشروع أساسي مع HBuilderX يمكن تشغيله في أدوات تطوير WeChat وعرض أبسط صفحة أولاً.
3. الدخول في التطوير الرسمي: فتح المشروع في Trae، استخدام حوار vibecoding مع الذكاء الاصطناعي لتوليد الصفحة الرئيسية وتخطيط صفحة اللعبة خطوة بخطوة، وتنفيذ أساسيات اللعب مثل حركة الثعبان وأكل الطعام وانتهاء اللعبة.
4. بعد تشغيل الميزات الأساسية، تعلم استخدام الذكاء الاصطناعي كـ "شريك في التصحيح وإعادة الهيكلة": اطلب منه تشخيص الأخطاء، ترتيب الهيكل عندما يصبح الكود فوضويًا، وإضافة التفاصيل تدريجيًا مثل البدء/الإيقاف المؤقت، تسجيل أعلى نقاط، وتحسين واجهة المستخدم.
5. الدخول في النشر: بناء المشروع إلى نسخة يتعرف عليها WeChat، المعاينة والاختبار على أجهزة حقيقية في أدوات تطوير WeChat، الإطلاق أولاً بحساب اختبار ونسخة تجريبية للتحقق من العملية، ثم إكمال التسجيل والمراجعة قبل الإطلاق الرسمي حتى يتمكن الآخرون من البحث عن برنامجك الصغير واللعب به.

يوجه هذا القسم الخريطة الكاملة فقط ولا يتوسع في الأوامر أو تفاصيل الكود بعد. الآن، تذكر هذه الخطوات الخمس: الفهم -> إعداد البيئة -> تطوير Vibecoding -> التصحيح والتحسين -> البناء والإطلاق. الفصول اللاحقة ستتعمق في كل خطوة، عارضةً ماذا تعد، ماذا تقول للذكاء الاصطناعي، وما النتائج التي يجب أن تراها على الشاشة في كل مرحلة.

2. إعداد البيئة

قبل كتابة أي سطر كود، لنعد البيئة أولاً. هدف هذا الجزء هو التأكد من أنك لن تعلق بعد الآن على أين تُنزل الأدوات ولماذا لا تعمل الأشياء، حتى تتمكن من التركيز مباشرة على حوار الذكاء الاصطناعي وتنفيذ المتطلبات.

إذا كنت تستطيع فتح متصفح، وتنزيل ملفات، والنقر المزدوج على المثبتات، يمكنك إكمال هذا القسم.

2.1 الأدوات الثلاث المستخدمة في هذا البرنامج التعليمي

لتطوير برنامج Snake الصغير، نستخدم ثلاث أدوات معًا، لكل منها مسؤوليات مختلفة:

1. الأولى هي Trae. فكر فيها كمحرر كود متكامل مع الذكاء الاصطناعي. يمكنه فتح ملفات المشروع مثل IDE عادي وأيضًا يتيح لك الدردشة مع الذكاء الاصطناعي بلغة طبيعية لتوليد وتعديل وشرح الكود. معظم عمليات "بناء برنامج صغير مع الذكاء الاصطناعي" في هذا البرنامج التعليمي تحدث في Trae. نزّل أحدث نسخة من https://www.trae.cn .
2. الثانية هي HBuilderX. لديها دعم قوي لـ Vue و uni-app، وتقدم قوالب برامج صغيرة جاهزة. نستخدمها لـ "توليد بنقرة واحدة" مشروع برنامج صغير أساسي - هذا يضع الأساس قبل تسليمه إلى Trae + الذكاء الاصطناعي لمزيد من التكرار. نزّل من https://www.dcloud.io/hbuilderx.html .
3. الثالثة هي أدوات تطوير WeChat. هذه الأداة الرسمية تُستخدم لتطوير ومعاينة البرامج الصغيرة. تشغل مشروعك على سطح المكتب وتدعم التصحيح على الأجهزة الحقيقية على الهاتف. نزّل من https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html .

باختصار: HBuilderX ينشئ المشروع الأساسي بسرعة، Trae يساعدك في البرمجة مع الذكاء الاصطناعي، وأدوات تطوير WeChat تعرض البرنامج الصغير الفعلي قيد التشغيل.

2.2 تسجيل حساب منصة WeChat الرسمية والحصول على AppID

بعد تجهيز الأدوات، لا يزال بحاجة إلى هوية برنامج صغير، والتي تُنشأ على منصة WeChat الرسمية. إذا لم تكن قد سجلت برنامجًا صغيرًا من قبل، اتبع هذا الترتيب:

1. أدخل https://mp.weixin.qq.com في متصفحك، افتح منصة WeChat الرسمية، وسجل الدخول بمسح رمز QR مع WeChat.

2. اختر "Mini Program" على الصفحة الرئيسية وأكمل مطالبات التسجيل، بما في ذلك البريد الإلكتروني ورقم الهاتف ونوع الكيان (فرد أو مؤسسة).
3. بعد التسجيل الناجح، ادخل الخلفية، ابحث عن "Development Management" أو "Development Settings"، وسترى معرفًا فريدًا اسمه AppID. هذا هو هوية برنامجك الصغير وسيُستخدم في إعدادات المشروع لاحقًا.

يُنصح بحفظ AppID في مكان سهل الوصول. في الأقسام اللاحقة، سنملأ هذه القيمة مباشرة لربط المشروع المحلي ببرنامجك الصغير عبر الإنترنت.

2.3 تثبيت أدوات تطوير WeChat

بعد ذلك نحتاج مكانًا لتشغيل ومعاينة البرامج الصغيرة فعليًا. هذا بالضبط ما صُممت من أجله أدوات تطوير WeChat.

1. زر صفحة التنزيل https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html . في هذه الصفحة سترى نسخًا لأنظمة تشغيل مختلفة. عادة اختر النسخة المستقرة المطابقة لنظامك، مثل Windows 64-bit أو macOS.
2. بعد التنزيل، انقر نقرًا مزدوجًا على المثبت واتبع المعالج خطوة بخطوة. إذا لم تكن متأكدًا، احتفظ بالخيارات الافتراضية.
3. بعد التثبيت، شغّل أدوات تطوير WeChat من سطح المكتب أو قائمة البدء. عند التشغيل الأول، تظهر رمز QR وتطلب منك المسح مع WeChat. امسح واسمح بالدخول إلى الواجهة الرئيسية.

لاحقًا، بعد أن تكون ملفات المشروع جاهزة في Trae، سنستورد البرنامج الصغير المبني إلى أدوات تطوير WeChat ونرى نتائج التشغيل الفعلية هنا.

2.4 إعداد Trae و HBuilderX

أخيرًا، ثبّت الأداتين المستخدمتين للبرمجة الفعلية: Trae و HBuilderX.

يمكنك تثبيت Trae أولاً. زر https://www.trae.cn في المتصفح ونزّل النسخة المناسبة لنظام التشغيل لديك. التثبيت كالبرنامج العادي: انقر نقرًا مزدوجًا على المثبت واتبع المطالبات. بعد التثبيت، تحصل على IDE يمكنه فتح المجلدات المحلية وفحص الكود والدردشة مع الذكاء الاصطناعي. جميع خطوات vibecoding اللاحقة تحدث هنا.

ثم ثبّت HBuilderX. زر https://www.dcloud.io/hbuilderx.html ونزّل حزمة نظام التشغيل لديك. HBuilderX خفيف ويبدأ بسرعة. بعد التثبيت، يمكنك إلقاء نظرة سريعة على الواجهة؛ لا حاجة لدراسة الميزات بعمق الآن. في الفصول اللاحقة، نستخدمه لإنشاء قالب برنامج صغير uni-app كنقطة بداية للمشروع.

بعد إكمال هذا القسم، بيئتك مكتملة: لديك حساب برنامج صغير + AppID، أداة معاينة تشغيل، و IDE برمجة بالذكاء الاصطناعي. بعد ذلك نبدأ من إنشاء هيكل المشروع الأول ونجعل هذه الأدوات تعمل فعلًا.

2.5 إعداد الملفات الأساسية

1. انقر على "New Project".

2. اختر القالب الافتراضي، عيّن اسم البرنامج الصغير، حدد مسار التخزين، ثم انقر على إنشاء في الزاوية السفلية اليمنى:

3. تظهر شاشة نجاح الإنشاء:

4. ثم ابحث عن هذا المجلد في نظام الملفات، افتحه في Trae، وسترى أن الملفات الأساسية جاهزة بالكامل:

3. تطوير البرنامج الصغير

في الجزأين الأولين، أوضحنا بالفعل "ما هي البرامج الصغيرة" و"كيفية إعداد الأدوات والبيئة." من هذا القسم، ندخل في الممارسة العملية: ليس مجرد مفاهيم، بل الذكاء الاصطناعي يساعدك فعلًا في بناء برنامج Snake الصغير من الصفر.

في هذا القسم، ستمر بإجراءات تشغيل موحدة كاملة لمرحلة التطوير، تتضمن تقريبًا:

1. افتح المشروع الحالي في Trae وأعطِ الذكاء الاصطناعي أول تعليمة كاملة ليصمم وينفذ نسخة Snake قابلة للتشغيل بناءً على الهيكل الحالي.
2. دع Trae يعدل ملفات المشروع الفعلية مباشرة، وليس فقط يُخرج "كودًا تجريبيًا"، وتعلم استخدام التراجع لاستعادة الحالة السابقة عند الحاجة.
3. عد إلى HBuilderX وأدوات تطوير WeChat، شغّل في محاكي البرنامج الصغير، والعب هذه النسخة في المحاكي للانتقال من "منظور الكود" إلى "منظور المستخدم."
4. بناءً على نتائج اللعب، استمر في اقتراح التعديلات بلغة طبيعية ودع الذكاء الاصطناعي يكرر التحكم من الأزرار إلى عصا التحكم، مع تجربة حلقة كاملة من "اكتشف المشكلة -> صِف المشكلة -> الذكاء الاصطناعي يصلح -> تحقق مرة أخرى."

يمكنك اختيار تصميم كل صفحة وكل زر قبل التطوير. لكن للمبتدئين تمامًا، تصميم الواجهة والتفاعل بحد ذاته هو أيضًا مجال جديد (لاحقًا سنعرض التصميم بمساعدة الذكاء الاصطناعي). لذا في هذه الجولة نستخدم عمدًا طريقة أخرى: ابدأ أولاً - دع الذكاء الاصطناعي يولد نسخة قابلة للتشغيل، ثم حسّن تدريجيًا بمشاهدة التأثيرات والدردشة بلغة طبيعية.

3.1 اشرح المتطلبات بوضوح دفعة واحدة: أعطِ Trae أول "Master Prompt"

بعد فتح مشروع البرنامج الصغير المُعد في Trae، لم أتعجل في تعديل سطر معين. بدلاً من ذلك، أخبرت مساعد الذكاء الاصطناعي المدمج:

أعطيت الذكاء الاصطناعي أمرًا: بناءً على الإطار الحالي، ابنِ برنامج Snake الصغير. أرجو تصميم هذا البرنامج الصغير وكتابة prompt لي.

بمعنى آخر، لم أطلب منه "كتابة دالة واحدة خطوة بخطوة." بل طرحت هدفًا كاملاً أولاً، دع الذكاء الاصطناعي يساعد في التخطيط، والذكاء الاصطناعي لم يخطط فقط بل هبط بالتنفيذ الأول مباشرة.

بعد تلقي هذه التعليمة، يقرأ Trae هيكل المشروع الحالي، يحدد أين يضيف صفحات وأين يضيف منطقًا، ويعدل ملفات/كود المشروع مباشرة. لا تحتاج لكتابة الكود يدويًا أو إنشاء/تعديل المجلدات يدويًا.

3.2 دع الذكاء الاصطناعي يعدل الكود الفعلي تلقائيًا، وليس البرمجة اليدوية

عند تنفيذ هذه التعليمة في Trae، يدخل الذكاء الاصطناعي في تدفق "تعديل المشروع." خلال هذه العملية، يمكنك ملاحظة نقاط رئيسية:

1. يشرح تفكيره في منطقة الدردشة، مثلاً أي الأدلة سيضيف صفحات إليها وكيف سينظم منطق اللعبة.

2. يعدل ملفات المشروع الفعلية مباشرة، بدلاً من إعطاء "كود تجريبي" فقط للنسخ واللصق.
3. بعد الانتهاء، يُخرج Trae ملخصًا قصيرًا يخبرك بأي الملفات تغيرت وماذا تم.

إذا لم تكن راضيًا عن هذه الجولة (أو تعتقد أن شيئًا ما خاطئ)، لا داعي للذعر. يوفر Trae تراجعًا في الزاوية العلوية اليسرى خارج صندوق الدردشة. يمكنك استعادة حالة المشروع قبل هذه التعليمة بنقرة واحدة - مثل مفتاح تراجع آمن.

3.3 عرض التأثيرات في HBuilderX وأدوات تطوير WeChat

بعد إكمال الذكاء الاصطناعي الجولة الأولى من التطوير، الكود مكتوب في المشروع، لكنك لم ترَ تأثير اللعبة الفعلي بعد. بعد ذلك نحتاج لتشغيله.

العملية المحددة: عد إلى HBuilderX، ابحث عن القائمة العلوية "Run"، اختر "Run to Mini Program Simulator" -> "WeChat DevTools." هذا يؤدي لتشغيل بناء المشروع وفتح النتيجة في أدوات تطوير WeChat.

لوحة المخرجات في الأسفل تعرض عملية البناء. إذا كانت الحالة النهائية "ready" بدون أخطاء، نجح البناء. ثم انتقل إلى أدوات تطوير WeChat للتحقق من واجهة المستخدم والميزات في هذه النسخة.

في معظم الحالات، يفتح HBuilderX أدوات تطوير WeChat تلقائيًا ويمكنك رؤية البرنامج الصغير المحدث مباشرة. إذا لم يفتح تلقائيًا، افعل ما يلي:

1. أوقف التشغيل الحالي في HBuilderX أولاً.
2. شغّل أدوات تطوير WeChat يدويًا وأبقها مفتوحة.
3. عد في HBuilderX، انقر "Run -> Run to Mini Program Simulator -> WeChat DevTools" مرة أخرى.

ثم يمكنك رؤية البرنامج الصغير vibecoding في أدوات تطوير WeChat:

3.4 استخدام اللغة الطبيعية للتعديل المتكرر حتى الرضا

في هذه الممارسة، ولّد الذكاء الاصطناعي مبدئيًا Snake بالتحكم بالأزرار: أربعة أزرار اتجاه على الشاشة، والثعبان يغير اتجاهه عند النقر. يمكن لعبها بالكامل، لكنني شخصيًا أفضل التحكم بعصا التحكم. لطلبات التعديل الخاصة بك (ليس فقط الميزات، بل أيضًا تصميم واجهة المستخدم والتخطيط؛ بمجرد أن تصبح ذا خبرة، يمكنك حتى طلب من الذكاء الاصطناعي دمج APIs نماذج خارجية أو قواعد بيانات)، مرة أخرى: أنت فقط بحاجة لوصف المتطلبات بلغة طبيعية.

هذه هي الميزة الأساسية لـ vibecoding: لا يتعين عليك التعمق في الكود لربط الأحداث أو منطق الإحداثيات. أنت تخبر الذكاء الاصطناعي مباشرة بما تريد. مثلاً، في دردشة Trae يمكنك كتابة:

استبدل الأزرار بعصا تحكم. عندما يُطلق المستخدم عصا التحكم، يجب أن يستمر الثعبان في التحرك في الاتجاه الحالي حتى إجراء عصا التحكم التالي.

طالما المتطلب واضح، سيحدد الذكاء الاصطناعي تلقائيًا الملفات المستهدفة ويعدل أنماط التحكم وروابط التفاعل ومنطق معالجة الاتجاه.

بعد التعديل، عد إلى أدوات تطوير WeChat للتحقق. إذا لم تكن التغييرات مرئية فورًا، انقر على "Run" في DevTools أو حدث نافذة المعاينة لتطبيق أحدث بناء. إذا لم يُحدَّث بعد، أوقف التشغيل في HBuilderX وشغّل في المحاكي مرة أخرى، ثم يمكنك رؤية البرنامج الصغير المحدث:

3.5 ماذا لو ظهرت مشاكل: استمر في التواصل بلغة طبيعية

النسخ المولدة بالذكاء الاصطناعي ليست دائمًا مثالية في المرة الأولى. قد تواجه:

• أخطاء تشغيل والتطبيق يفشل في الفتح؛
• الميزات صحيحة في الغالب، لكن التفاصيل تختلف عن توقعك؛
• واجهة المستخدم قابلة للاستخدام لكنها ليست جميلة أو مريحة بما فيه الكفاية بعد.

في هذه اللحظات، لا داعي لتعديل الكود بنفسك بشكل عشوائي. صِف المشاكل مباشرة لمساعد Trae AI بلغة طبيعية، مثلاً:

"عصا التحكم تعمل الآن، لكن الثعبان يتوقف فجأة أحيانًا. أرجو فحص التنفيذ الحالي." أو: "اللعبة قابلة للعب الآن، لكن الواجهة تبدو مزدحمة. أريد مسافة عمودية أكبر على الهاتف. أرجو تعديل التخطيط."

سيستخدم الذكاء الاصطناعي سياق المشروع الحالي + وصفك، ثم يقدم ويطبق تغييرات الكود مباشرة. إذا أصبحت النتيجة أسوأ أو كان الاتجاه خاطئًا، لا يزال يمكنك التراجع إلى النسخة المستقرة السابقة وتجربة صياغة مختلفة.

من خلال عدة جولات كهذه، يمكنك التحسين من "النسخة الأولى الخشنة" إلى Snake بعصا تحكم أقرب لتفضيلك. مثلاً، أعطيت صورة مرجعية للنمط وطلبت من الذكاء الاصطناعي تعديل نمط واجهة المستخدم وفقًا لذلك:

3.6 النتيجة النهائية وملخص القسم

بعد جولات متكررة من الوصف بلغة طبيعية -> تعديل الذكاء الاصطناعي -> المعاينة في أدوات تطوير WeChat -> استمرار التعديلات الدقيقة، حصلت أخيرًا على هذه النتيجة:

• صفحة لعبة كاملة؛
• الثعبان يتحرك بسلاسة ويأكل الطعام؛
• يدعم التحكم بعصا التحكم؛
• يعمل بشكل صحيح في محاكي البرنامج الصغير.

أمثلة المنتج النهائي:

في هذا القسم، رأيت حلقة مغلقة كاملة:

1. في Trae، تعليمة واحدة واضحة جعلت الذكاء الاصطناعي يبني أول نسخة من برنامج Snake الصغير؛
2. مع HBuilderX + أدوات تطوير WeChat، التحقق من التأثير الفعلي من منظور المستخدم؛
3. الاستمرار في اقتراح التعديلات بلغة طبيعية، دع الذكاء الاصطناعي يتولى تحسين الميزات وواجهة المستخدم؛
4. عند ظهور مشاكل، استخدام التراجع + إعادة التشغيل لإبقاء العملية آمنة.

بعد ذلك، يمكنك استخدام نفس الإيقاع لأفكارك الخاصة: غير مقتصر على Snake، بل أيضًا برامج صغيرة أدوات، صفحات أحداث، أو نماذج أعمال حقيقية. مهمتك الرئيسية هي التفكير بوضوح والوصف بوضوح. دع الذكاء الاصطناعي والأدوات تتولى الباقي.

4. إطلاق البرنامج الصغير

في الفصول الثلاثة السابقة، أكملنا التدفق الكامل من إعداد البيئة -> التطوير بمساعدة الذكاء الاصطناعي -> تشغيل Snake في المحاكي المحلي.

من هذا الفصل، يصبح السؤال الرئيسي: كيف ننشر هذا العمل فعلًا على WeChat، حتى لا يكون مجرد لعبة، بل برنامج صغير قابل للاستخدام؟

لتقليل الصعوبة، نأخذ أولاً أقصر حلقة مغلقة: النشر فقط كـ نسخة اختبار/تجريبية لنفسك وبضع زملاء في الفريق. بعد استقرار الوظائف والتجربة، انتقل بعد ذلك للإطلاق الرسمي العام.

يغطي هذا الفصل أولاً 4.1 لإكمال أقصر مسار لـ إطلاق النسخة التجريبية. الإطلاق الرسمي لجميع المستخدمين مشروح في 4.2.

4.1 أقصر SOP - الإطلاق كنسخة تجريبية

هدف هذا القسم الفرعي هو شيء واحد فقط: دعك تفتح برنامج Snake الصغير في WeChat كـ نسخة تجريبية.

التدفق الكامل أربع مهام:

1. ابحث عن AppID الخاص بك وأكده في منصة WeChat الرسمية.
2. اضبط هذا AppID في مشروعك.
3. ارفع النسخة الحالية في أدوات تطوير WeChat.
4. عد إلى المنصة الرسمية واضبط هذه النسخة المرفوعة كـ "Experience Version."

لنمضِ بهذا الترتيب.

4.1.1 تأكيد AppID في منصة WeChat الرسمية

الخطوة الأولى: تأكيد AppID للبرنامج الصغير الخاص بك في منصة WeChat الرسمية.

لقد فعلت هذا مرة واحدة بالفعل في القسم 2 إعداد البيئة. هنا نستخدمه فعليًا.

1. زر https://mp.weixin.qq.com وسجل الدخول إلى خلفية برنامجك الصغير.
2. ابحث عن "Development Management" في القائمة اليسرى، ثم ادخل "Development Settings."
3. في الأعلى، ابحث عن منطقة "Developer ID". يوجد سطر "AppID (Mini Program ID)" - هذا هو معرفك الفريد.

يجب أن يتطابق هذا المعرف تمامًا مع إعدادات المشروع. وإلا سيراه WeChat ك هوية تطبيق مختلفة وسيفشل المعاينة/النشر.

4.1.2 ملء AppID في المشروع

الخطوة الثانية: اكتب هذا AppID في إعدادات المشروع حتى يتوافق البناء المحلي لحساب برنامجك الصغير الرسمي.

إذا كان مشروعك يستخدم قالب uni-app، افعل ما يلي:

1. افتح HBuilderX وحمّل مشروع Snake.
2. ابحث عن manifest.json في شجرة الملفات وافتحه.
3. مرر إلى "WeChat Mini Program Configuration"، وسترى حقل إدخال مثل "WeChat Mini Program AppID."
4. الصق AppID المنسوخ من المنصة الرسمية بدقة، ثم احفظ الملف.

الآن مشروعك المحلي قد طالب بهوية هذا البرنامج الصغير. بعد ذلك، عندما ترفع من أدوات تطوير WeChat، سيُسجل تحت هذا AppID.

4.1.3 رفع نسخة في أدوات تطوير WeChat

لقد شغلنا المشروع بالفعل في أدوات تطوير WeChat لمعاينة المحاكي.

الآن سنفعل: "تعبئة الكود الحالي كنسخة ورفعه إلى الخادم."

الخطوات:

1. في شريط الأدوات العلوي الأيمن من أدوات تطوير WeChat، انقر على "Upload."
2. في النافذة المنبثقة، املأ حقلين رئيسيين:
   1. رقم النسخة: مثلاً 1.0.0 (أرقام ونقاط فقط).
   2. ملاحظات المشروع: وصف قصير، مثل "تم إكمال أساسيات اللعب."
3. أكد وانقر "Upload." تعرض لوحة المخرجات عملية البناء. إذا تحولت جميع الخطوات للأخضر واكتمل الرفع، تم إرسال هذه النسخة بنجاح إلى خادم WeChat.

4.1.4 تعيين النسخة المرفوعة كنسخة تجريبية في الخلفية

الرفع يرسل الكود فقط إلى جانب WeChat. لا يزال بحاجة لإخبار النظام "هذه نسخة تجريبية."

الخطوة الأخيرة: عد إلى خلفية المنصة الرسمية وأكمل الحلقة.

1. افتح https://mp.weixin.qq.com وادخل خلفية البرنامج الصغير.

2. في القائمة اليسرى، ابحث عن "Management" -> "Version Management."

3. في قسم "Development Version"، يجب أن ترى النسخة المرفوعة: نسخة 1.0.0، ملاحظاتك، وطابع الوقت للرفع للتو.

4. على الجانب الأيمن من هذا الصف، استخدم القائمة المنسدلة/زر الإجراء لاختيار "Set as Experience Version"، أكد الإجراء. قبل هذه الخطوة، تأكد أن فئتك الرئيسية مهيأة في إعدادات الصفحة الرئيسية/الفئة.

   

   

بعد الإكمال، تصبح هذه النسخة "Experience Version" لبرنامجك الصغير. يمكنك توليد رمز QR تجريبي في الخلفية، أو إضافة نفسك/فريقك كأعضاء تجريبيين، ثم المسح في WeChat للاختبار على الأجهزة الحقيقية.

في هذه المرحلة، أنجزنا أقصر حلقة من المشروع المحلي إلى الإطلاق التجريبي:

لا تحتاج للفتح لجميع مستخدمي WeChat فورًا. في نطاق آمن، شغّل برنامجًا صغيرًا حقيقيًا في بيئة WeChat حقيقية أولاً. هذا يكفي لاختبار الميزات وجمع الملاحظات والتكرار.

4.2 الإطلاق الرسمي للبرنامج الصغير

بعد أن تعمل النسخة التجريبية بشكل جيد، يمكنك بالفعل لعب هذا البرنامج الصغير Snake في WeChat الخاص بك. الخطوة التالية هي الانتقال من مستخدمين تجريبيين محدودين إلى برنامج WeChat صغير عام بالكامل.

قسم هذا إلى خطوات: أكمل المعلومات الأساسية، اختر الفئة، أنهِ التسجيل، ثم أرسل للمراجعة. اتبع هذا الترتيب:

4.2.1 الدخول في تدفق إطلاق البرنامج الصغير

أولاً عد إلى خلفية منصة WeChat الرسمية وسجل الدخول. في التنقل الأيسر ابحث عن إدخالات متعلقة بـ "Version Management / Release" (قد تختلف واجهة المستخدم قليلاً بمرور الوقت). ستجد "Mini Program Release Flow."

بعد الدخول، تعرض المنطقة العلوية شريط تقدم. تحته تُدرج خطوات مثل:

1. Mini Program Information
2. Mini Program Category
3. Operation Information / Filing
4. WeChat Verification (حسب نوع الكيان)

في البداية التقدم 0%. مع إكمال كل خطوة، يُحدث النظام تلقائيًا.

4.2.2 ملء معلومات البرنامج الصغير الأساسية

الخطوة الأولى هي إكمال "بطاقة العمل" لبرنامجك الصغير، وهو ما يراه المستخدمون أولاً في WeChat.

في صفحة "Mini Program Information"، تحتاج عادةً لملء/تأكيد:

1. اسم البرنامج الصغير يظهر هذا في نتائج البحث ورأس التطبيق. له حدود طول وقواعد تسمية. اختر اسمًا يصف الوظيفة وسهل التذكر.
2. الوصف / المقدمة استخدم جملة أو جملتين لشرح ماذا يفعل هذا البرنامج الصغير، مثلاً: "لعبة Snake مطورة بالبرمجة بمساعدة الذكاء الاصطناعي، مناسبة للعب السريع والترفيه." حافظ على الوصف متسقًا مع الوظائف الحقيقية وتجنب النص التسويقي المبالغ فيه.
3. الأيقونة ولقطات الشاشة
   1. الأيقونة عادةً تتطلب صورة مربعة بدعم PNG/JPG وحدود حجم/بكسل (تحقق من قواعد الصفحة). استخدم أيقونة بسيطة ذات تباين عالٍ.
   2. ارفع عدة لقطات شاشة مثل الصفحة الرئيسية وصفحة اللعبة وصفحة الإعدادات. تساعد المستخدمين على فهم المحتوى.
4. الحقول المطلوبة الأخرى مثل الوسوم ومنطقة الخدمة، املأ وفقًا للمطالبات. مبدأ واحد فقط: يجب أن تتطابق جميع المعلومات مع الوظائف الحقيقية لبرنامج Snake الصغير الخاص بك.

بعد إكمال جميع الحقول، انقر على Save أو Next. الخطوة الأولى في تدفق الإطلاق مكتملة.

4.2.3 اختيار فئة خدمة البرنامج الصغير

بعد المعلومات الأساسية، يرشدك المعالج إلى "Mini Program Category." الفئة هي تصنيف تطبيقك في WeChat، وتؤثر على مسار المراجعة والعرض/التشغيل اللاحق.

في هذه الصفحة سترى "Add Category." انقر عليها واختر الفئة المناسبة في شجرة فئات النظام، مثلاً:

1. اختر "Education" كفئة عليا؛
2. ثم اختر فئة فرعية أكثر تحديدًا مثل "Education Tools / Teaching Assistant." في هذا المثال، اختيرت أدوات التعليم كمساعد تعليمي لـ vibecoding.

في مشروعك الخاص، ببساطة اختر الفئة الأقرب لحالة الاستخدام الفعلية.

بعد تأكيد الفئة، انقر على Save. إذا أظهرت الصفحة "category created successfully" وعرضت العنصر الجديد، هذه الخطوة مكتملة.

4.2.4 إكمال معلومات التسجيل

بعد ذلك، يطلب تدفق الإطلاق "Operation Information / Filing." هذا يتحقق من الكيان المسؤول خلف البرنامج الصغير.

تحت مثال الكيان الفردي، يتضمن التدفق عادةً:

1. اختيار نوع التسجيل اختر بين أنواع مثل "Individual" أو "Enterprise"، متسق مع كيان التسجيل الخاص بك.
2. ملء معلومات الكيان تشمل الاسم، نوع الهوية، رقم الهوية، إلخ. يجب أن يتطابق هذا مع معلومات التسجيل، وإلا قد ترفض المراجعة.
3. رفع الوثائق الداعمة عادةً تتطلب صور الهوية أو ملفات إثبات أخرى، مع متطلبات تنسيق/حجم/وضوح محددة معروضة على الصفحة. جهّز وارفع ملفات واضحة.

بعد الإرسال، يدخل النظام "under review" ويعرض رسالة مثل "Information submitted, please wait." قد يستغرق هذا بعض الوقت. يمكنك التحقق من التقدم في أي وقت في الخلفية.

4.2.5 الإرسال للمراجعة وانتظار الإطلاق الرسمي

عندما تكون "Mini Program Information" و"Category" و"Operation Information/Filing" جميعها مكتملة، نفذ الإجراء الأخير: الإرسال للمراجعة.

1. عد إلى صفحة نظرة عامة تدفق الإطلاق وتأكد أن جميع العناصر تظهر مكتملة، مع تقدم قريب من 100%.
2. انقر "Submit for Review" (أو زر مشابه) لإرسال نسخة التطوير الحالية لفريق مراجعة WeChat.
3. في "Version Management"، تصبح حالة هذه النسخة "Under Review." بعد الموافقة تصبح "Published" أو متاحة لـ "Go Live."

إذا فشلت مراجعة التسجيل، قد يتلقى المطورون مكالمة تحدد الأجزاء الفاشلة.

للتسجيل، قد تتلقى رمز تحقق ورابط تحقق من وزارة الصناعة وتكنولوجيا المعلومات. افتح الرابط واملأ الرمز + المعلومات الشخصية (التحقق صالح ليوم واحد). إذا مر التسجيل، تتلقى إشعار بريد إلكتروني ورسالة قصيرة مع رقم التسجيل. تحقق WeChat: الأفراد عادةً يدفعون 30 يوان صيني، المؤسسات حوالي 300 يوان صيني. الرسوم غير قابلة للاسترداد بغض النظر عن نتيجة الموافقة. قد تتلقى إشعار تحقق ومكالمة تأكيد.

عند إرسال المراجعة، ارفع فيديو/لقطات تشغيل واملأ المعلومات المطلوبة. ثم انقر "Submit Release" للإطلاق الرسمي.

5. الملخص

في هذه المرحلة، أكملت حلقة تطوير برنامج صغير من 0 إلى 1 كاملة: من فهم البرامج الصغيرة، إلى تثبيت Trae و HBuilderX وأدوات تطوير WeChat؛ من إعطاء الذكاء الاصطناعي فكرتك وتركه "ينقل الطوب" في الكود، إلى لعب أول نسخة Snake في المحاكي؛ ثم التعبئة كنسخة تجريبية، إنهاء التسجيل/المراجعة، وجعلها قابلة للاستخدام فعلًا في WeChat - لقد مررت بالسلسلة الكاملة شخصيًا.

الأهم من ذلك، لم تحقق ذلك بحفظ بناء الجمل. حققته بالتعبير الواضح عن المتطلبات + التواصل الفعال مع الذكاء الاصطناعي. لقد اختبرت بالفعل هذا: تعليمة واحدة بلغة طبيعية يمكنها أن تجعل الذكاء الاصطناعي يلبي احتياجات التطوير الخاصة بك بفعالية كبيرة. هذه القدرة غير مقتصرة على Snake. يمكن نقلها إلى أي برنامج صغير تريد بناءه لاحقًا - أدوات، صفحات أحداث، تطبيقات تعليمية، أو مشاريع عمل حقيقية.

إذا لخصنا في SOP عام، فهو خمس خطوات فقط: وضوح متطلب صغير واحد -> بناء هيكل مشروع في Trae -> استخدام vibecoding + الذكاء الاصطناعي لإنشاء النسخة الأولى -> اختبار اللعب المتكرر والتحسين في أدوات تطوير WeChat -> الرفع والتسجيل والمراجعة والإطلاق. في كل مرة تكرر هذه الخطوات الخمس، تكسب برنامجًا صغيرًا حقيقيًا آخر يمكن فتحه ومشاركته، وطبقة أخرى من الثقة بأنني "يمكنني استخدام الذكاء الاصطناعي لتحويل الأفكار إلى منتجات."

بعد ذلك، يمكنك الاستمرار في تحسين تطبيق Snake هذا، أو إغلاقه وبدء مشروع فارغ من فكرتك الخاصة. بغض النظر عما تبنيه، تذكر شيء واحد: لم تعد مجرد شخص "يريد بناء شيء." أنت بالفعل مطور vibecoding أجرى سير العمل الكامل. الباقي تكرار حتى تصبح هذه القدرة عادة.

مراجع:

• https://zhuanlan.zhihu.com/p/1889401120939567074
• https://blog.csdn.net/2401_87407347/article/details/155193007