أمثلة على vibe coding: 10 أنواع تطبيقات حقيقية والطلبات وما الذي حدث خطأ

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

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

1. متتبّع ميزانية شخصية

من يبنيه: أفراد جرّبوا الجداول الإلكترونية وتركوها.

الطلب الأول:

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

ما الذي حدث خطأ: احتسب المخطط كل مصروف أُدخل يومًا ما وليس مصروفات هذا الشهر فقط، فبدت كل فئة مبالغًا في إنفاقها بحلول الشهر الثاني. كما أن المبالغ المكتوبة بفاصلة ("1,200") حُفظت كأنها 1.

طلب الإصلاح:

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

الدرس: "هذا الشهر" قاعدة. قل القواعد بصوت عالٍ.

2. صفحة حجز لصالون صغير

من يبنيه: أصحاب أعمال صغيرة تعبوا من الحجز بالهاتف والرسائل.

الطلب الأول:

ابنِ صفحة حجز لصالوني. يختار الزبون خدمة وتاريخًا وموعدًا شاغرًا، ثم يدخل اسمه ورقم هاتفه. لدي صفحة إدارة خاصة خلف تسجيل دخول تعرض الحجوزات حسب اليوم.

ما الذي حدث خطأ: حجز زبونان الموعد نفسه عند 10:00 بينهما أقل من دقيقة، لأن الصفحة لم تتحقق من التوفر إلا عند أول تحميل. وحجز صبغة مدته 90 دقيقة لم يمنع المواعيد التي تليه.

طلب الإصلاح:

عند إرسال الحجز، تحقق في الخادم من أن كل موعد يغطيه الحجز ما زال شاغرًا، وارفضه برسالة "هذا الموعد حُجز للتو" إن لم يكن كذلك. الخدمة تحجز مدتها كاملة، فحجز مدته 90 دقيقة عند 10:00 يحجز 10:00 و10:30 و11:00.

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

3. قائمة مطعم برمز QR

من يبنيه: أصحاب المقاهي والمطاعم الذين يعيدون طباعة القوائم كثيرًا.

الطلب الأول:

ابنِ موقع قائمة للجوال لمقهاي. أقسام للفطور والغداء والمشروبات والحلويات، ولكل صنف اسم وسعر ووصف قصير ووسوم غذائية (نباتي، خالٍ من الغلوتين). أحتاج صفحة إدارة لتعديل الأصناف وتعليمها كنافدة. اعرض رمز QR أستطيع طباعته يفتح القائمة.

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

طلب الإصلاح:

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

الدرس: اختبر على اتصال بطيء، لا في مكتبك فقط.

4. متتبّع معدات أو مخزون لفريق

من يبنيه: مسؤولو العمليات الذين يستبدلون جدولًا مشتركًا.

الطلب الأول:

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

ما الذي حدث خطأ: أظهر السجل "مستخدم 3" بدل الأسماء، وسحب كمية أكبر من المتاحة جعل الكمية سالبة.

طلب الإصلاح:

أظهر اسم الشخص في السجل لا رقمه. لا تسمح بسحب يجعل الكمية أقل من صفر؛ اعرض "المتوفر 4 فقط" بدلًا من ذلك.

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

5. بوابة عملاء لمستقل أو استوديو

من يبنيها: المصممون والمحاسبون والمستشارون والوكالات.

الطلب الأول:

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

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

طلب الإصلاح:

افحص كل مسار في الخادم يعيد المشاريع أو الملفات أو التعليقات أو الفواتير. يجب أن يتأكد كل منها من أن العميل المسجَّل يملك السجل، وإلا يعيد "غير موجود". ثم اختبر: سجّل الدخول كعميل A وحاول فتح مشروع العميل B برقمه.

الدرس: إخفاء شيء على الشاشة لا يعني حمايته. المزيد في هل vibe coding آمن؟.

6. صفحة إطلاق مع قائمة انتظار

من يبنيها: مؤسسون يختبرون فكرة قبل بنائها.

الطلب الأول:

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

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

طلب الإصلاح:

أضف حماية أساسية من الروبوتات لنموذج التسجيل (حقل مصيدة مخفي وحد 5 تسجيلات لكل عنوان IP في الساعة). أضف عنوان صفحة ووصفًا وصورة للمشاركة الاجتماعية.

الدرس: النموذج العام يُكتشف. راجع كيف تبني صفحة قائمة انتظار.

7. تطبيق اختبارات لمعلّم

من يبنيه: معلّمون ومدرّبون يريدون ما هو أخف من نظام إدارة تعلّم.

الطلب الأول:

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

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

طلب الإصلاح:

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

الدرس: المتصفح ملك المستخدم. كل ما فيه يمكن قراءته.

8. أداة ذكاء اصطناعي صغيرة

من يبنيها: المسوّقون والكتّاب والمؤسسون الذين يريدون مساعدًا ذكيًا مركّزًا.

الطلب الأول:

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

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

طلب الإصلاح:

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

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

9. موقع أعمال بالعربية والإنجليزية

من يبنيه: شركات في الخليج والعالم العربي الأوسع تخدم لغتين.

الطلب الأول:

ابنِ موقعًا لشركتي للتصميم الداخلي بالعربية والإنجليزية مع زر تبديل اللغة. الصفحات: الرئيسية والخدمات والأعمال ومن نحن وتواصل معنا. يجب أن تكون العربية من اليمين إلى اليسار بالكامل.

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

طلب الإصلاح:

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

الدرس: الاتجاه من اليمين إلى اليسار تخطيط، لا محاذاة. تتعامل Mythex مع العربية وغيرها من التخطيطات من اليمين إلى اليسار، ويمكنك كتابة الطلبات بالعربية مباشرة.

10. متتبّع يصبح تطبيق جوال

من يبنيه: المدرّبون والنوادي الرياضية والمجموعات المجتمعية التي يعيش مستخدموها على هواتفهم.

الطلب الأول:

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

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

طلب الإصلاح:

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

الدرس: إذا سيستخدمه الناس على الهاتف فصمّم للهاتف أولًا. في Mythex Pro يمكن أن يتحول التطبيق المنشور إلى تطبيق Android لـ Google Play وتطبيق iPhone يُرسل إلى TestFlight؛ ويفتح تطبيق الجوال تطبيقك المنشور، فيحدّثه كل نشر. راجع صفحة منشئ تطبيقات الجوال.

الأنماط وراء هذه الأمثلة

في الأمثلة العشرة تقع الأخطاء في مجموعات قليلة:

لا يتطلب أيٌّ من هذا أن تقرأ الكود. يتطلب أن تختبر كمستخدم فضولي معادٍ قليلًا، وأن تصف ما تراه بدقة.

جرّب واحدًا بنفسك

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

الأسئلة