كيف تبني تطبيقًا بالبرمجة بالإحساس (Vibe Coding): من الفكرة إلى تطبيق منشور

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

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

المشروع

تخيّل صاحبة استوديو يوغا تُدعى سارة، تدير ثماني حصص أسبوعيًا. تصلها الحجوزات عبر واتساب، وتحتفظ بقائمة ورقية لكل حصة، وكثيرًا ما تحجز أكثر من الطاقة الاستيعابية. وتريد:

• أن يرى الطلاب جدول الأسبوع ويحجزوا مكانًا.
• أن تكون لكل حصة سعة محددة.
• قائمة لكل حصة تستطيع مراجعتها عند الباب.
• أن يلغي الطلاب الحجز قبل ساعتين من موعد الحصة.

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

الخطوة 1: اكتب مواصفات من صفحة واحدة

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

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

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

الخطوة 2: اختر أداة تغطي الحلقة كاملة

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

الخطوة 3: الطلب الأول

حوّل المواصفات إلى فقرة واحدة. لا تلصق الوثيقة كاملة دفعة واحدة بكل تفاصيلها؛ أعطِ الجوهر، وأضف الباقي على خطوات.

ابنِ تطبيق حجز حصص لاستوديو اليوغا الخاص بي. يسجّل الطلاب باستخدام الاسم والبريد والهاتف، ويرون جدول هذا الأسبوع، ويحجزون مكانًا في حصة. لكل حصة اسم ومدرّب ووقت بداية ومدة وسعة؛ وتظهر الحصة المكتملة بعبارة «مكتملة» ولا يمكن حجزها. يرى الطلاب حجوزاتهم ويستطيعون إلغاءها حتى ساعتين قبل الحصة. أنا المدير: أستطيع إضافة الحصص وتعديلها ورؤية قائمة من حجزوا في كل حصة. تصميم هادئ وبسيط ويعمل جيدًا على الهواتف.

إذا لم تكن متأكدًا من أن الأداة فهمت الطلب، فاطلب خطة أولًا. في Mythex، يعرض وضع Plan الشاشات والبيانات قبل كتابة الكود، وتوافق عليها.

الخطوة 4: اجعل الحلقة الأساسية تعمل

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

1. سجّل كطالب، واحجز حصة.
2. افتح عرض الإدارة. هل الحجز موجود؟
3. احجز الحصة نفسها مرة أخرى. يجب أن يرفض التطبيق.
4. اجعل سعة حصة 2، واحجزها من حسابين لطالبين، وحاول إضافة ثالث.

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

اعرض جميع أوقات الحصص بالمنطقة الزمنية للاستوديو، [Asia/Dubai]، بغض النظر عن ضبط جهاز الزائر.

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

أصلح الحلقة الأساسية قبل إضافة أي شيء آخر، فكل ما عداها يعتمد عليها.

الخطوة 5: أضف بقية القواعد، واحدة في كل رسالة

الآن مرّ على قواعد المواصفات واحدة تلو الأخرى:

يستطيع الطلاب إلغاء الحجز حتى ساعتين قبل بدء الحصة. بعد ذلك، أخفِ زر الإلغاء، وارفض الإلغاء على الخادم مع رسالة واضحة.

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

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

الخطوة 6: حسّن ما سيلاحظه المستخدمون الحقيقيون

المستخدمون الحقيقيون يلاحظون الأشياء الصغيرة. قائمة قصيرة لتطبيق سارة:

• حالات فارغة: «لا توجد حصص هذا الأسبوع بعد» بدلًا من صفحة فارغة.
• تأكيد: «تم حجزك في Vinyasa، يوم الثلاثاء الساعة 18:00» بعد الحجز.
• تخطيط الهاتف: أزرار كبيرة، والجدول قابل للقراءة على شاشة 375 بكسل.
• المقاعد المتبقية: «3 أماكن متبقية» على كل بطاقة حصة، فيحجز الطلاب أسرع.

اعرض على كل بطاقة حصة عدد الأماكن المتبقية، مثل «3 من 12 متبقية». وبعد الحجز، اعرض تأكيدًا يتضمن اسم الحصة واليوم والوقت، وزرًا للانتقال إلى حجوزاتي.

الخطوة 7: اختبر كما يختبر شخص غريب

قبل أن يستخدمه أي شخص آخر، اقضِ نصف ساعة في محاولة كسره:

يمكنك أيضًا أن تطلب من الذكاء الاصطناعي المرور على الحالات الاستثنائية:

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

الخطوة 8: مراجعة أمنية

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

• هل يستطيع طالب أن يرى حجوزات طالب آخر أو بياناته؟
• هل توجد مفاتيح أو كلمات مرور في كود يعمل داخل المتصفح؟
• هل نموذج التسجيل محمي من الروبوتات؟
• هل توجد نسخة احتياطية من البيانات؟

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

الخطوة 9: النشر

عندما تنجح الحلقة الأساسية والقواعد والفحوص، انشر. في Mythex يتم ذلك بنقرة واحدة، ويحصل التطبيق على رابط عام مع قاعدة بياناته واستضافته جاهزتين. وفي خطة Pro يمكنك ربط نطاقك الخاص، مثل book.sarasyoga.com؛ انظر كيفية ربط نطاق مخصص.

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

الخطوة 10: أول المستخدمين والنسخة التالية

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

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

تحويله إلى تطبيق هاتف

كثير من الاستوديوهات تريد أيقونة على هواتف طلابها. في خطة Mythex Pro، يمكن للتطبيق المنشور أن يصبح تطبيق Android (ملفًا ترفعه إلى Google Play) وتطبيق iPhone يُرسل إلى TestFlight باستخدام مفتاح App Store Connect الخاص بك، دون الحاجة إلى Mac. ويفتح تطبيق الهاتف تطبيق الويب المنشور، لذا كلما نشرت تحديثًا، يحصل تطبيق الهاتف عليه أيضًا.

الخلاصة

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

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

الأسئلة