شرح Lovable بالعربي: من أول برومبت إلى موقع منشور

ما هي الأداة ولمن

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

للواجهة الخلفية تقدّم الأداة خدمة اسمها Lovable Cloud تشمل قاعدة بيانات وتسجيل دخول وتخزين ملفات وتحديثًا لحظيًا ودوال تعمل على الخادم، وهي مبنية على أساس Supabase المفتوح المصدر. ولمن يملك مشروع Supabase جاهزًا، يمكن ربطه بدلًا من Cloud.

• صاحب فكرة يريد نموذجًا يعمل يعرضه على شريك أو مستثمر خلال جلسة واحدة.
• مصمم يريد تحويل تصوّر في رأسه إلى صفحات حقيقية قابلة للنقر.
• مبرمج يريد هيكلًا أوليًا سريعًا ثم يكمل في محرّره عبر مزامنة GitHub.

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

قبل أن تبدأ

أنشئ حسابًا من الموقع الرسمي، وستبدأ على الخطة المجانية تلقائيًا. الخطط تُسعَّر بالأرصدة لا بعدد الأعضاء، وعدد أعضاء مساحة العمل غير محدود.

لم نتمكن من قراءة أسعار Pro و Business بالدولار من صفحة الأسعار لأن جدولها يُعرض ديناميكيًا، فافتحها بنفسك. ولتحويل أي سعر إلى الريال اضربه في 3.75، فالريال مربوط بالدولار عند هذا السعر: 20 دولارًا مثلًا تساوي نحو 75 ريالًا.

جهّز قبل أول رسالة: وصفًا للفكرة في خمسة أسطر، ونصوصك العربية الحقيقية (اسم النشاط، الخدمات، الأسعار، رقم الجوال)، وشعارًا أو لونين إن وُجدا، وحساب GitHub إن أردت نسخة من الكود عندك.

الخطوات

1. 1

   اكتب برومبت أول كاملًا

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

2. 2

   راجع النسخة الأولى قبل أي طلب

   افتح المعاينة على الجوال والكمبيوتر، واكتب لنفسك قائمة بكل ما لا يعجبك. لا ترسل كل ملاحظة فور رؤيتها.

3. 3

   عدّل بطلب واحد واضح في كل رسالة

   بدل «حسّن الموقع» اكتب «اجعل زر احجزي الآن ثابتًا أسفل الشاشة على الجوال وبلون أخضر». الطلب المحدد ينفذ من أول مرة غالبًا.

4. 4

   أضف البيانات عبر Cloud

   اطلب «احفظ طلبات الحجز في قاعدة بيانات بالحقول: الاسم، الجوال، الخدمة، التاريخ، الوقت». ستُفعَّل Cloud لمشروعك، وتظهر الجداول في لوحتها.

5. 5

   أضف تسجيل الدخول للوحة الإدارة

   اطلب صفحة دخول لصاحبة الصالون فقط ترى فيها الحجوزات وتغيّر حالتها، واطلب صراحة ألا يرى الزوار هذه البيانات.

6. 6

   اربط GitHub مبكرًا

   المزامنة في Lovable باتجاهين، وتدعم كذلك GitLab و Bitbucket. ربطها من اليوم الأول يعني أن لديك نسخة من الكود مهما حدث.

7. 7

   انشر المشروع

   زر النشر يضع موقعك على رابط من نوع xxx.lovable.app مع HTTPS. شاركه مع صديقين وجرّبوا الحجز فعليًا قبل الإعلان.

8. 8

   اربط نطاقك الخاص

   في الخطط المدفوعة تشتري نطاقًا عبر Lovable أو تربط نطاقًا تملكه مثل salon-jeddah.sa بإضافة السجلات التي تظهر لك عند المسجّل. التفاصيل العامة في دليل ربط النطاق.

نصائح للعربي

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

• اطلب dir="rtl" و lang="ar" على وسم html نفسه، لا على كل قسم.
• اطلب خصائص CSS المنطقية مثل margin-inline-start بدل left و right حتى لا تنقلب المسافات.
• سمِّ الخط بالاسم: IBM Plex Sans Arabic أو Tajawal، مع ارتفاع سطر بين 1.6 و 1.8.
• الأسعار وأرقام الجوال تبقى من اليسار لليمين داخل الجملة العربية، فاطلب عزلها.
• الأيقونات الاتجاهية مثل سهم «التالي» يجب أن تنعكس.

<html lang="ar" dir="rtl">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; line-height: 1.7; }
    .card { padding-inline-start: 1.5rem; border-inline-start: 3px solid #0f766e; text-align: start; }
    .price, .phone { direction: ltr; unicode-bidi: isolate; }
  </style>
</head>

إذا بُني المشروع وظهر مقلوبًا، فالحلول التفصيلية مع الكود في إصلاح RTL في Lovable.

حدود يجب أن تعرفها

• الأرصدة المجانية قليلة للمشاريع الحقيقية: 5 يوميًا وبحد 30 في الشهر. خطط عملك بحيث تجمع ملاحظاتك في رسائل قليلة.
• محرر الكود للقراءة فقط في الخطة المجانية: التعديل اليدوي على الكود من الخطط المدفوعة.
• النطاق الخاص للمدفوعة فقط: المجانية تبقى على lovable.app.
• تنزيل المشروع كاملًا كملف zip في الخطط المدفوعة: تنزيل ملف واحد متاح في كل الخطط، ومزامنة GitHub بديل عملي للنسخة الكاملة.
• الخلفية مرتبطة بأساس Supabase: إن قررت الانتقال لاحقًا فأنت تنقل قاعدة البيانات أيضًا، والتوثيق يذكر تصدير قاعدة البيانات والنسخ الاحتياطية.
• العربية غير مذكورة في التوثيق: ستتحمّل أنت مراجعة الاتجاه والخطوط.

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

متى تختار أوترا

• إذا أردت أن تبدأ بواجهة عربية واتجاه صحيح من اليمين لليسار دون أن تشترطه في كل برومبت، مع دعم يرد عليك بالعربية عبر واتساب أو البريد.
• إذا كنت تفضّل الدفع بالريال عبر مدى أو Apple Pay بأسعار شاملة الضريبة مع فاتورة ضريبية، وباقة النمو (Pro) بـ 99 ر.س شهريًا تشمل النشر.
• إذا احتاج مشروعك بيئة مفتوحة تثبّت فيها Python أو PHP أو Go عبر الترمينال، لا قالبًا محددًا مسبقًا.

وإن كان لديك مشروع في Lovable وتريد نقله، فخطوات النقل في انقل مشروعك من Lovable.