بناء أوّل مشروع على Lovable — من الفكرة إلى النشر
دليل تطبيقي متسلسل لبناء أوّل مشروع على Lovable بالعربية: صياغة الفكرة، البرومبت الافتتاحي، إضافة الصفحات، ربط قاعدة البيانات، اختبار الجوّال، مراجعة الأمان، ثمّ النشر.
١) بلور الفكرة قبل فتح المحرّر
اكتب في سطرين: من المستخدم؟ ما المشكلة؟ ما القرار الذي سيتّخذه في التطبيق؟ مثال حيّ: «رائد أعمال يريد بيع دورة تدريبيّة عربيّة، القرار: التسجيل والدفع». هذا التوصيف يوجّه كلّ برومبت لاحق ويوفّر عليك تعديلات كثيرة.
٢) اكتب البرومبت الافتتاحي
أضف: النوع (Landing/متجر/لوحة تحكّم)، الجمهور، النغمة البصريّة (احترافيّة/مرحة)، والصفحات المطلوبة. مثال: «موقع عربي لبيع دورة تدريبيّة، نغمة احترافيّة دافئة، أربع صفحات: هبوط، منهج، سعر، تواصل. Font: IBM Plex Sans Arabic. dir=rtl.»
٣) استخدم Plan Mode للتغييرات الكبيرة
قبل تعديل يمسّ التخطيط العام أو قاعدة البيانات، فعّل Plan Mode. ستحصل على خطّة نصّيّة قابلة للمراجعة قبل التنفيذ. هذه الخطوة تختصر أخطاء «التنفيذ ثمّ التراجع».
٤) أضف الصفحات تدريجيًّا
برومبت واحد لكلّ صفحة. لا تطلب «صفحة تعريف وسعر وتواصل معًا». افصلها: «أنشئ صفحة تعريف الدورة، تحوي ثلاثة أقسام: نتائج التعلّم، جدول المحاور، شهادات المتدرّبين». المخرجات أدقّ والتراجع أسهل.
٥) فعّل قاعدة البيانات والمصادقة عند الحاجة
عند طلب حفظ بيانات (تسجيل، حجز، طلب) ستقترح Lovable تفعيل Cloud بنقرة. راجع الجداول التي تُنشأ، ومفاتيح خارجيّة، وسياسات RLS. لا تخزّن أيّ بيانات حقيقيّة قبل تفعيل RLS.
٦) اختبر على الجوّال قبل أيّ شيء آخر
غالبيّة الزوّار العرب يصلونك من الجوّال. اختبر على 375px داخل المعاينة: قائمة التنقّل، الأزرار الأساسيّة، النماذج، والجداول القابلة للتمرير. أي عنصر يقلق العين على الجوّال أعِد صياغته الآن.
٧) راجع الأمان قبل النشر
قائمة سريعة: RLS مفعّلة، مفاتيح API خارج الواجهة، صلاحيّات المستخدم منفصلة (owner/user)، حماية النماذج من الإرسال المتكرّر، وتحقّق من الحقول على السيرفر لا على المتصفّح فقط.
٨) أضف SEO أساسي لكلّ صفحة
لكلّ صفحة عنوان ووصف مختلفان، رابط canonical، وصورة OG. اطلب: «أضِف head مخصّصًا لصفحة الأسعار مع عنوان ووصف باللغة العربية ورابط canonical». هذا يفتح باب الظهور في Google قبل بدء التسويق.
٩) انشر واختبر على متصفّح فعلي
اضغط Publish للحصول على رابط .lovable.app. افتحه على متصفّح جوّال حقيقي، جرّب رحلة المستخدم كاملة: زيارة، تصفّح، تسجيل، إتمام العمليّة. ما لا تراه في المعاينة قد يظهر في الإنتاج.
١٠) اربط دومينك
من إعدادات المشروع اختر Domains، أدخل دومينك، ثمّ اتّبع تعليمات DNS (سجلّ A أو CNAME). خلال دقائق يعمل الدومين بشهادة SSL تلقائيًّا. حدّث canonical في كلّ صفحة بحيث يشير إلى دومينك الجديد.
قائمة تحقّق أخيرة قبل الإعلان
برومبت المشروع محفوظ لديك للرجوع، الصفحات تعمل على الجوّال، RLS مفعّلة، SEO الأساسي موجود، صفحة تواصل تعمل، تحليلات مربوطة (GA4 مثلًا)، والدومين يعمل بـHTTPS. عند اكتمال هذه القائمة، أنت جاهز للإعلان.
- هيرو تحريري لصفحة هبوطهيرو مقسّم 8/4 بدون تدرّجات، بأسلوب Stripe/Linear.
هل كان هذا المحتوى مفيداً؟
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.