في الجزء الأول، تعرّفنا على Vibe Coding والأدوات التي تساعدك تحوّل وصفك إلى موقع. بهذا الدرس، رح نفتح أداة ونطبّق فعلًا.
رح نبني نموذج موقع عربي لطلب جلسة استشارية: الزائر يختار الخدمة، يعبّي بيانات تجريبية، ويشوف ملخص طلبه.
شو رح تحتاج؟
كمبيوتر ومتصفح وإنترنت
حساب على Lovable
بيانات وهمية لتجربة النموذج
ما رح نحتاج نثبّت برامج أو نجهّز بيئة برمجية. Lovable يتيح البدء بوصف نصي، ثم معاينة التطبيق وتعديله بالمحادثة. البناء والتعديلات تستهلك رصيد استخدام، لذلك راجع الرصيد المتاح بحسابك قبل البدء.
النتيجة المطلوبة: نموذج تفاعلي تقدر تختبره بنفسك. حفظ الطلبات وإرسال الإيميلات وتأكيد المواعيد الفعلية ستكون مراحل لاحقة.
الخطوة الأولى: افتح Lovable وابدأ مشروعك
ادخل إلى lovable.dev وسجّل الدخول أو أنشئ حسابًا.
ابحث عن مربع كتابة فكرة المشروع في الصفحة الرئيسية.
اختر وضع Build إذا ظهر لك اختيار الوضع.
الصق الطلب التالي وأرسله.
الأداة تدعم وصف المشروع بلغتك، لذلك سنكتب الطلب بالعربية.
الطلب الأول: بناء النسخة الأساسية
ابنِ نموذج موقع عربي لمركز تدريبي افتراضي اسمه «خطوة»، يتيح للزائر تجربة طلب جلسة استشارية.
اجعل الموقع من صفحة واحدة، باللغة العربية وباتجاه من اليمين إلى اليسار، ومتجاوبًا مع الموبايل.
أضف الأقسام التالية:
مقدمة بعنوان «خطوتك الجاية تبدأ باستشارة»، مع وصف قصير وزر «اطلب جلسة» ينقل الزائر إلى النموذج.
ثلاث بطاقات خدمات: استشارة مسار مهني، مراجعة مشروع، وخطة تعلّم. مدة كل جلسة 30 دقيقة.
نموذج يحتوي على الاسم والبريد الإلكتروني ونوع الجلسة والتاريخ المفضّل.
اجعل جميع الحقول مطلوبة. امنع اختيار تاريخ سابق لليوم، وتحقق من صيغة البريد الإلكتروني.
بعد تعبئة النموذج بشكل صحيح، اعرض ملخصًا بالمعلومات المدخلة ورسالة: «هذه تجربة للنموذج، ولم يتم إرسال طلب أو تأكيد موعد».
أضف زر «تعديل البيانات» للعودة إلى النموذج مع الاحتفاظ بالقيم المدخلة.
استخدم خلفية فاتحة ولونًا بنفسجيًا وخط Tajawal، مع تصميم بسيط ومساحات مريحة.
لا تضف تسجيل دخول أو دفعًا إلكترونيًا أو قاعدة بيانات أو إرسال إيميلات. احتفظ بالبيانات مؤقتًا داخل الصفحة فقط، ولا تحفظها بعد إعادة تحميلها.
لاحظ أن الطلب يحدّد هدف الموقع، أقسامه، سلوك النموذج، والتصميم المطلوب. هيك بتكون أعطيت الأداة تعليمات واضحة، وعندك تفاصيل محددة تراجعها بعد البناء.
الخطوة الثانية: افتح المعاينة وجرّب الرحلة كاملة
بعد اكتمال البناء، رح تلاقي محادثة المشروع والمعاينة التي تستطيع التفاعل معها.
جرّب هذا السيناريو:
اضغط «اطلب جلسة».
تأكد أنه ينقلك إلى النموذج.
أدخل الاسم: سارة أحمد.
أدخل البريد التجريبي: sara@example.com.
اختر «مراجعة مشروع» وتاريخًا قادمًا.
أكمل النموذج وراجع الملخص.
اضغط «تعديل البيانات» وتأكد أن معلوماتك ما زالت موجودة.
شو المفروض تشوف؟ ملخص يطابق المعلومات التي أدخلتها، ورسالة واضحة بأن العملية تجريبية.
ممكن يختلف شكل تصميمك عن تصميم طالب آخر؛ المهم أن السلوك المطلوب يشتغل.
الخطوة الثالثة: اختبر الحالات التي ممكن تكشف أخطاء
جرّب الحالات التالية، وسجّل النتيجة:
أرسل النموذج فارغًا: المفروض تظهر رسائل تطلب تعبئة الحقول المطلوبة.
اكتب sara في حقل البريد الإلكتروني: المفروض يرفض الصيغة ويطلب بريدًا صحيحًا.
اختَر تاريخًا سابقًا: المفروض يمنع اختياره أو يعرض رسالة توضّح الخطأ.
ارجع من الملخص لتعديل البيانات: المفروض تبقى المعلومات التي أدخلتها موجودة.
أعِد تحميل الصفحة: المفروض تختفي البيانات التجريبية، لأننا لم نطلب حفظها.
افتح الموقع بعرض الموبايل: المفروض تظهر الحقول والأزرار بوضوح، دون خروج عن حدود الشاشة.
وجود التعليمات داخل الـPrompt ما بيضمن تنفيذها كلها بشكل صحيح؛ الاختبار هو اللي بيثبت النتيجة.
إذا لاحظت خطأ، اطلب تصحيحه بوصف ما حدث وما تتوقعه.
مثال: إصلاح التحقق من البريد
استخدم الطلب التالي إذا ظهرت المشكلة عندك:
عند كتابة sara في حقل البريد الإلكتروني، يسمح النموذج بالانتقال إلى الملخص.
عدّل التحقق ليمنع المتابعة إذا كانت صيغة البريد غير صحيحة، ويعرض رسالة عربية أسفل الحقل.
حافظ على التصميم وباقي وظائف النموذج كما هي.
بعد التعديل، جرّب نفس الحالة مرة ثانية. تأكد أيضًا أن النموذج ما زال يقبل البريد الصحيح، مثل sara@example.com.
الخطوة الرابعة: أضف تحسينًا عمليًا
بعد ما تتأكد أن النموذج الأساسي يعمل، أضف ميزة صغيرة تربط بطاقات الخدمات بالنموذج.
الطلب الثاني: اختيار الخدمة من البطاقة
أضف زر «اختر هذه الجلسة» داخل كل بطاقة خدمة.
عند الضغط عليه، انتقل إلى نموذج الطلب وحدّد نوع الجلسة تلقائيًا حسب البطاقة المختارة.
اسمح للزائر بتغيير نوع الجلسة من النموذج، وحافظ على باقي التصميم والوظائف.
اختبر النتيجة: اضغط زر بطاقة «خطة تعلّم». هل انتقلت إلى النموذج؟ وهل أصبحت «خطة تعلّم» هي القيمة المختارة؟
جرّب بعدها اختيار خدمة مختلفة من النموذج، وتأكد أن الملخص يعرض اختيارك الأخير.
هيك بتكون أضفت وظيفة واضحة، وعندك طريقة مباشرة للتأكد منها.
الخطوة الخامسة: راجع نسخة الموبايل
استخدم خيار عرض الموبايل في المعاينة، وجرّب النموذج مرة ثانية.
انتبه إلى حجم النصوص، وترتيب البطاقات، وسهولة الضغط على الأزرار.
إذا كانت البطاقات مزدحمة أو الأزرار ضيقة، ممكن تطلب:
حسّن العرض على الموبايل: رتّب بطاقات الخدمات تحت بعضها، واجعل حقول النموذج والأزرار بعرض المساحة المتاحة.
تأكد من عدم وجود تمرير أفقي، وحافظ على عرض الكمبيوتر كما هو.
بعد التعديل، راجع العرضين: الموبايل والكمبيوتر، حتى تتأكد أن التحسين ما أثّر على ترتيب الصفحة في أحدهما.
الخطوة السادسة: شارك النموذج للتجربة
بعد إنهاء الاختبارات، يمكنك نشر النسخة التجريبية باستخدام Publish والحصول على رابط للموقع. وإذا عدّلت المشروع لاحقًا، تحتاج نشر التغييرات لتظهر على الرابط المنشور.
أرسل الرابط لشخص واطلب منه:
جرّب تطلب جلسة ببيانات وهمية، واحكيلي وين حسّيت الخطوة مش واضحة.
خلي عبارة «نموذج تجريبي» ظاهرة؛ النسخة الحالية لا ترسل طلبات للمركز ولا تؤكد مواعيد فعلية.
إذا أكمل الشخص التجربة، اسأله: هل عرف كيف يختار الخدمة؟ هل فهم الرسالة النهائية؟ وهل قدر يرجع يعدّل بياناته بسهولة؟
تمرينك بعد الدرس
عدّل المشروع ليخدم مدرّسًا يستقبل طلبات دروس خصوصية:
غيّر الخدمات إلى ثلاث مواد دراسية.
أضف حقل «المرحلة الدراسية».
اجعل المرحلة الدراسية تظهر في ملخص الطلب.
اختبر النموذج ببيانات صحيحة وأخرى ناقصة.
بتكون أنجزت التمرين لما تقدر تختار مادة، تعبّي النموذج، تشوف الملخص، وترجع تعدّل البيانات بدون فقدانها.
نصيحة من Qafza Library: لكل طلب تكتبه، اسأل نفسك: شو التغيير اللي بدي أشوفه؟ وكيف رح أجرّبه؟ هيك بتتعلّم تبني مشروعك وتفهمه خطوة خطوة.