كان الوصول إلى Lovable سلسًا بطابع شعرت معه أنه امتداد طبيعي لسير عمل المستخدم، مقارنة بمعظم المنصات التي لا تعتمد على الكود أو التي تعتمد عليه قليلًا.
في هذه مراجعة Lovable AI، سأأخذك في جولة كاملة لتجربتي العملية؛ من التسجيل، إلى بناء وتخصيص تطبيق، وحتى اختبار كيفية تعامله مع الأخطاء. في النهاية، ستعرف ما إذا كان Lovable يستحق مكانًا في مجموعة أدواتك.
ما هو Lovable.dev؟
بدلًا من تعلم البرمجة أو استخدام محرر سحب وإفلات ثقيل، ما عليك سوى وصف ما تريد باللغة الإنجليزية البسيطة. على سبيل المثال، “إنشاء لوحة تحكم مع تسجيل دخول المستخدمين والمدفوعات”، وسيقوم هذا المنشئ المدعوم بالذكاء الاصطناعي بإنشاء تطبيق يعمل من أجلك.
ما يجعل Lovable مختلفًا عن العديد من أدوات “عدم وجود كود” الأخرى هو أنه ينتج فعليًا رمزًا حقيقيًا قابلًا للتعديل. وهذا يعني أن المطورين يمكنهم تصدير المشروع إلى GitHub، أو توسيعه، أو دمجه مع خدمات مثل Stripe للمدفوعات وSupabase لقواعد البيانات.
لمن يناسب Lovable.ai؟
تم بناء منشئ تطبيقات Lovable AI لمجموعة واسعة من الأشخاص الذين يرغبون في تحويل الأفكار إلى تطبيقات عاملة بسرعة.
هو الأفضل لـ:
- المستخدم غير التقني: لمساعدتك في إنشاء التطبيقات دون الحاجة لتوظيف مطور.
- مؤسسي الشركات الناشئة والفرق الصغيرة: لتسهيل بناء واختبار المنتج الأدنى القابل للتطبيق (MVP) دون إضاعة الوقت في كتابة الكود القياسي.
- المصممين ومديري المنتجات: يحولون الرسومات التخطيطية أو النماذج الأولية إلى تطبيقات عاملة، مما يتيح لك تجاوز المراسلات الطويلة مع المهندسين ورؤية تصاميمك تتحول إلى واقع فورًا.
- المطور ذو الخبرة: لأتمتة مهام الإعداد مثل المصادقة وقواعد البيانات وCRUD، حتى يمكنهم التركيز على الميزات المخصصة والمنطق التجاري، مع الاحتفاظ بالتحكم الكامل في قاعدة الكود.
الإيجابيات والسلبيات في Lovable AI
- عملية تسجيل وانضمام سهلة
- توليد رمز حقيقي باستخدام React وTailwind
- يدعم TypeScript للتطوير الحديث
- تكامل أصلي مع backend الخاص بـ Supabase
- تكامل مدمج مع Stripe للمدفوعات.
- محرر الكود للقراءة فقط في الخطة المجانية
- حلول الأخطاء محدودة بدون الترقية
- الذكاء الاصطناعي يقبل التعليمات المتناقضة دون تقييم
- قد تمنع أخطاء وقت التشغيل التقدم
الميزات الرئيسية في Lovable
- توليد تطبيقات متكاملة (Full-stack) باستخدام الذكاء الاصطناعي
- رمز React وTypeScript حقيقي قابل للتعديل
- Tailwind CSS للتصميم والتخطيطات
- تكامل Supabase لقواعد البيانات والمصادقة
- تكامل Stripe للمدفوعات والفوترة
- مزامنة مع GitHub للتحكم في إصدار الكود
- محرر بصري للتعديلات الدقيقة على واجهة المستخدم
- تعديلات التصميم والميزات عبر الأوامر النصية (prompts)
- دعم النطاقات المخصصة في الخطط المدفوعة
- مشاريع المجتمع لإعادة الاستخدام والمعاينة
- استيراد من Figma لتحويل التصميم إلى كود
- نظام يعتمد على رصيد لاستخدام المهام
تجربتي العملية مع Lovable AI: دليل خطوة بخطوة
كنت أرغب في معرفة مدى سلاسة (أو تعثر) عملية التسجيل، وكيف ظهر لوحة التحكم عند دخولي لأول مرة، ومدى سهولة الاستخدام قبل بناء أي شيء.
التجربة العملية أهم من الادعاءات التسويقية، لذا سأرشدك تمامًا إلى ما قمت به وما لفت انتباهي.
البدء والتسجيل
بدأت مباشرة على الصفحة الرئيسية لـ Lovable.dev، والتي كان لديها خلفية متدرجة دافئة تتلاشى من الأزرق إلى الوردي والبرتقالي.
شاشة التسجيل مقسمة إلى جانبين: الجانب الأيمن احتفظ بالتدرج المألوف وصندوق إدخال مرح يطلب مني “اطلب من Lovable بناء شركتك الناشئة SaaS”، في حين ركز الجانب الأيسر على إنشاء الحساب.
كان لدي خيار المتابعة عبر Google أو GitHub أو التسجيل عبر البريد الإلكتروني. اخترت البريد الإلكتروني. بعد كتابة بريدي الإلكتروني وتعيين كلمة مرور، وافقت على الشروط ونقرت إنشاء حسابك.
لم يسمح لي Lovable بالدخول على الفور. بل طُلب مني التحقق من بريدي الإلكتروني. انتقلت إلى علامة تبويب البريد، ووجدت رسالة التحقق بسرعة، ونقرت على الرابط. أكد النظام بريدي الإلكتروني برسالة قصيرة “تم التحقق من البريد الإلكتروني” وأعاد توجيهي إلى تدفق انضمام قصير.
هنا، أدخلت اسمي، واخترت الوضع الداكن، وأجبت على بعض الأسئلة السريعة:
- لما سأستخدم Lovable (اخترت مشاريع شخصية),
- كيف أصف نفسي (اخترت مطور),
- ما الذي أبنيه (اخترت موقع / صفحة هبوط).
الخطوة الأخيرة سألتني إذا كنت أرغب في دعوة زملاء، لكن بما أنني كنت أجرب بمفردي، نقرت على إنهاء.
عند هبوطي في لوحة التحكم لأول مرة، لاحظت أن التصميم بدا نظيفًا ومتسقًا مع الصفحة الرئيسية. صندوق الإدخال الكبير في الأعلى دعاني إلى “اطلب من Lovable إنشاء صفحة هبوط لـ…” بينما ملأت مشاريع المجتمع الصفحة أدناه، كل شيء من لوحات القيادة إلى قوالب SaaS التي يمكنني معاينتها أو إعادة استخدامها.
كان الأمر أشبه بالدخول إلى مساحة عمل ومعرض عرض في آن واحد، مع الكثير من الإلهام أمامي.
بناء تطبيقي الأول على Lovable.dev
بعد التسجيل، أردت أن أرى بنفسي مدى سهولة وطبيعية وبساطة بناء تطبيق فعليًا في Lovable.
في لوحة التحكم الرئيسية لـ Lovable، كان أول ما لفت نظري هو حقل الإدخال الكبير في المركز مع نص العنصر النائب: “اطلب من Lovable إنشاء صفحة هبوط لـ…”. من الواضح أن كل شيء يبدأ من هنا.
يمكنك كتابة فكرة بسيطة، لكنني قررت أن أذهب بكل تفاصيل وموجه (prompt) مفصل يصف غرض التطبيق، أدوار المستخدمين، تدفق الانضمام، مؤشرات لوحة التحكم (KPIs)، إدارة العملاء والمشاريع، تتبع الوقت، الفوترة مع معاينات PDF، مدفوعات Stripe، وبوابة العملاء.
حتى أنني أضفت متطلبات التصميم مثل اللون الأزرق المهني كلون أساسي، تخطيطات مبنية على البطاقات، طباعة مقروءة، ورسوم متحركة خفيفة. وأوضحت في النهاية أنني أريد وظائف خلفية مدعومة بـ Supabase، مع المصادقة، تعدد المستأجرين، تخزين الملفات، والبريد الإلكتروني التفاعلي.
عندما انتهيت من كتابة الموجه المفصل، توقفت قبل النقر على إرسال لألقي نظرة فاحصة على الخيارات الإضافية التي قدمها Lovable. أسفل حقل الإدخال مباشرة، كانت هناك بضعة أزرار مثيرة للاهتمام.
- + Attach: يتيح لك رفع صورة كمثال يمكن للذكاء الاصطناعي الاعتماد عليه. هذا مفيد بشكل خاص إذا كان لديك نموذج تصميم أو سلك إطار (wireframe) تريد أن يتبعه النظام.
- خيار Import from Figma: يبرز كطريقة لجلب ملفات التصميم الاحترافية مباشرة إلى Lovable بدلاً من البدء من الصفر.
- مفتاح التبديل Public: يتحكم في الرؤية. إذا كان مضبوطًا على Public، يصبح مشروعك مفتوحًا لأي شخص في مجتمع Lovable لعرضه وإعادة استخدامه، مماثل لطريقة عمل المطورين على GitHub.
- Workspace (Pro): هذا يعني أن التطبيق سيكون مرئيًا فقط لأعضاء مساحة العمل الخاصة بك في Lovable.
- Personal/Business: يحتفظ بالمشروع خاصًا بك ما لم تشاركه صراحة.
بعد أن لاحظت جميع هذه الخيارات، تقدمت وأرسلت موجهي الكبير الأول لرؤية ما سيبنيه Lovable.
بعد تقديم الموجه، تحول الواجهة إلى بيئة بناء. انفتح لوحة دردشة على اليسار تعرض طلبي وردود Lovable، بينما عرض اللوح الأيمن شاشة تحميل بها أيقونة قلب.
إلى جانب ذلك، كانت هناك خيارات مختلفة مثل “حدد عناصر معينة للتعديل”، “ارفع صورًا كمراجع”، و“انشر عندما تكون جاهزًا”. كانت معظمها معطلة، لكن كان هناك خيار نشط واحد: Connect Supabase for backend.
أول رد من Lovable أذهلني. قسم موجهي إلى أقسام واضحة، مشيرًا إلى أدوات SaaS معروفة مثل FreshBooks وHarvest، وسرد الميزات المخططة للإصدار الأول: صفحة هبوط احترافية، لوحة متعددة المستأجرين، إدارة العملاء والمشاريع، تتبع الوقت، توليد الفواتير، وتكامل الدفع.
كما نبه فورًا إلى متطلب مهم؛ لتمكين هذه الميزات الخلفية، كان عليّ ربط مشروعي بـ Supabase. لم يتجاهل ذلك؛ بل أخبرني مقدمًا بما هو مطلوب وربطني مباشرة بوثائق التكامل.
في الزاوية العلوية اليمنى من الواجهة كان هناك زر أخضر Connect Supabase. عند النقر عليه، انفتح مودال يشرح ما هو Supabase، ولماذا هو مطلوب، وما الذي سيمكنك من فعله عند ربطه: مصادقة المستخدمين، إدارة قواعد البيانات، التخزين، والمدفوعات.
اتبعت التعليمات، وربطت منظمة Supabase الخاصة بي، ورأيت رسالة تأكيد تعلمّني بأن التكامل نجح. من هناك، أقرّ Lovable بالاتصال وبدأ في بناء التطبيق مع دعم الخلفية مفعلًا.
ثم قام Lovable AI بتوليد الكود في الخلفية. كنت أرى رسائل سجل مثل “Reading src/pages/Index.tsx” و“Edited src/components/LandingPage.tsx”، مما أكد أنه يعمل بنشاط على هيكل مشروع حقيقي بدلاً من تجميع قوالب جاهزة.
عندما اكتمل البناء الأول، قمت بمعاينة النتيجة على اللوح الأيمن. تم تسمية التطبيق InvoicePro، وكان يبدو كصفحة هبوط SaaS مصقولة.
تضمنت ترويسة مع روابط تنقل (الميزات، الأسعار، الاتصال)، أزرار تسجيل الدخول وابدأ الفترة التجريبية المجانية، قسم رئيسي (hero) بعنوان بارز (“سريعًا احصل على مدفوعاتك باستخدام الفوترة الاحترافية”)، ونص فرعي يصف كيف يمكن للمستقلين تتبع الوقت وإدارة العملاء والحصول على المدفوعات عبر الإنترنت.
عند التمرير للأسفل، ظهر قسم الميزات بست بطاقات مصممة بشكل نظيف لتتبع الوقت، إدارة العملاء، الفواتير، المدفوعات، التقارير، وبوابات العملاء.
كان قسم التسعير منظمًا لثلاث طبقات واضحة: Starter (9 دولارات/شهر)، Professional (29 دولارًا/شهر، معلمة بـ “الأكثر شعبية”)، وEnterprise (79 دولارًا/شهر)، لكل منها ميزات وزر دعوة لاتخاذ إجراء خاص بها.
في الأسفل، عزز قسم دعوة لاتخاذ إجراء الرسالة مرة أخرى مع زر ابدأ الفترة التجريبية المجانية. وتضمنت التذييل روابط قياسية مثل الميزات، الأسعار، التكاملات، المدونة، سياسة الخصوصية، وشروط الخدمة.
لم يمنحني Lovable مجرد واجهة أمامية لامعة. بل منحني الكود الأساسي. عند التبديل إلى طريقة عرض الكود، رأيت مشروع React + TypeScript منظم مع Tailwind CSS وVite وأدوات حديثة.
تضمن هيكل الملفات مجلدات للمكونات، الارتفاعات (hooks)، الصفحات، وملفات التهيئة مثل tailwind.config.ts وvite.config.ts.
- يحتوي ملف LandingPage.tsx على الكود الخاص بالـ hero والميزات وقسم التسعير، مع مصفوفات بيانات تحدد البطاقات والطبقات التي رأيتها في المعاينة.
- index.css يعرض استيراد Tailwind والمتغيرات المخصصة للوضعين الفاتح والداكن.
- App.tsx يتولى التوجيه والمقدمات (providers).
- package.json يسرد الاعتمادات مثل React ومكونات shadcn وTailwind.
كان كل شيء منظمًا ومنطقيًا وقابلًا للقراءة، مما يعني أنني (أو أي مطور) يمكنه أخذ هذا الكود وتوسيعه دون الحاجة للبدء من الصفر.
أمر يستحق الذكر هنا: تم تمييز محرر الكود نفسه كـ للقراءة فقط. إذا أردت تعديل الملفات مباشرة داخل واجهة Lovable، ستحتاج للترقية إلى خطة مدفوعة. لأغراضي، كنت لا أزال قادرًا على استكشاف الهيكل بالكامل والتحقق من جودة الكود المولد، لكن التحرير العملي في المتصفح محجوز لطبقتهم المميزة.
في أقل من عشر دقائق، حول Lovable.dev موجهًا مفصلًا إلى صفحة هبوط بأسلوب SaaS مصقولة مع كود حقيقي قابل للتعديل. توافق التصميم مع تعليماتي، وكان سير العمل سلسًا، وتمكنت من رؤية ما يحدث في الخلفية. والأهم، أنه لم يتجاهل إعداد الخلفية.
كيف يتعامل مع الأخطاء والمرونة في التعديلات
بعد أن أُعجبت بصفحة الهبوط الأولى، أردت أن أختبر Lovable أكثر وأرى مدى قدرته على التعامل مع ميزات خلفية معقدة، والتضارب المنطقي، والأخطاء غير المتوقعة.
كان هذا الاختبار الحقيقي لمعرفة ما إذا كانت المنصة جيدة فقط في توليد واجهات أمامية جميلة، أم أنها تستطيع مجابهة واقع تطوير التطبيقات الأكثر فوضوية.
في جوهره، كان هذا تناقضًا. من ناحية، كنت أطلب حدودًا واضحة بين أدوار المستخدمين؛ ومن ناحية أخرى، أردت للجميع تجاوز هذه الحدود. في المثالي، يجب على منشئ ذكي أن ينبه إلى هذا التعارض ويطلب توضيحًا.
لكن Lovable لم يفعل ذلك.
بدلًا من ذلك، قبل الطلب فورًا وحدد مكونات الخلفية التي سيحتاج إلى إنشائها: المصادقة، جداول الأدوار والأذونات، إدارة الجلسات، ونقاط نهاية API المحمية.
وقد كرر حتى متطلبه السابق لاستخدام Supabase للمصادقة وسياسات البيانات، مذكرًا إياي بالربط إذا لم أكن قد فعلت ذلك بالفعل. وبما أنني كنت مرتبطًا بـ Supabase، طلبت من Lovable المتابعة. ثم بدأ في إنشاء نظام التحكم في الوصول بناءً على الدور، وإنشاء ملفات سياقات المصادقة، وتدفقات الانضمام، والمسارات المحمية، والهجرات. كما قام بتثبيت مكتبة عميل Supabase.
ولكن عندما حاول تشغيل التطبيق، انقلبت الأمور. أصبحت نافذة المعاينة فارغة، وظهر شريط خطأ في أسفل يمين الشاشة. أوضحت السجلات الخطأ بوضوح: “Uncaught Error: Missing Supabase environment variables” في ملف supabase.ts.
بمعنى آخر، أنشأ Lovable رمزًا يتطلب مفاتيح تكوين لم أقم بتوفيرها بعد.
بالنقر على “إظهار السجلات”، حصلت على كامل تتبع الأخطاء، مؤكدًا أن التطبيق لا يمكنه العرض بدون المتغيرات المفقودة. ظلت المعاينة شاشة بيضاء، بما يتوافق مع ملاحظة سجل الأخطاء حول “الشاشة الفارغة”.
لإصلاحه، قدم Lovable خيارين: رفض (Dismiss) أو محاولة الإصلاح (Try to fix).
بطبيعة الحال، نقرت على محاولة الإصلاح. قام Lovable فورًا بتحليل المشكلة، وتحديد أن التطبيق يفتقد متغيرات بيئة Supabase المطلوبة، وأنشأ التعديلات اللازمة لحلها.
شرحّت لوحة الدردشة خطوة بخطوة ما تم تعديله، وتمكنت المعاينة من إعادة التحميل دون تعطل.
ما جعل هذا الاختبار أكثر كشفًا هو كيف فسّر Lovable تعليماتي المتناقضة. بدلًا من رفضها أو طلب توضيح، دمج الفكرتين ببساطة.
أنشأ ثلاثة أدوار (مالك، عضو، عميل) بأذونات منفصلة، ثم أضاف أن “جميع المستخدمين يمكنهم تعديل الفواتير والمشاريع” بينما احتفظ المالكون بحقوق إدارة إضافية. في الواقع، هذا قد يخلق ثغرات منطقية في تطبيق حقيقي — مما يلغي أساسًا تحكم الوصول بناءً على الدور الذي طلبته.
بالنسبة للمراجعين أو المطورين، هذا أمر مثير للإعجاب (لأنه يبني على أي حال) ومقلق في آن واحد (لأنه يمكن أن يخلق مشكلات أمنية أو منطقية في الإنتاج).
من هذا الاختبار، استخلصت درسين رئيسيين حول تعامل Lovable مع الأخطاء والمرونة عند التحرير:
- الكشف عن الأخطاء قوي: قام Lovable بسرعة بتنبيه إلى متغيرات Supabase المفقودة، وأظهر الملف والسطر المحددين، وشرح ما حدث خطأ. السجلات الواضحة والسياق يعنيان أنك لن تبقى في حيرة.
- مرن لكنه غير حذر مع التناقضات: عندما قدمت تعليمات متضاربة، دمجها بدلاً من التوضيح. قد تكون هذه مرونة مفيدة، لكن على المطورين الانتباه لتضارب المنطق.
تخصيص التصميم والتخطيط
ماذا لو أردت تغيير شيء في تطبيقك، أو تعديل التصميم ليشعرك أنه منتجك الخاص؟
في Lovable، يعتمد التخصيص على ثلاث نهج رئيسية: الأوامر النصية باللغة الطبيعية، والمحرر البصري، والتحكم المباشر على مستوى الكود.
معًا، تغطي هذه الطرق كل شيء من إعادة الهيكلة الشاملة للتصميم إلى التعديلات الدقيقة حتى أدق بكسيل.
استخدام الأوامر النصية (Prompts) لتغييرات تصميم واسعة
هذه هي الطريقة الأكثر سهولة وربما الأكثر ترويجًا من قبل Lovable. بدلاً من التلاعب بالإعدادات، تصف أفكارك التصميمية باللغة الإنجليزية البسيطة وتترك للذكاء الاصطناعي تنفيذها.
على سبيل المثال، يمكنك أن تطلب:
- “غير الثيم إلى الوضع الداكن بأسلوب حديث ومستقبلي.”
- “اعتمد جمالية ما بعد البنائية الجديدة بألوان جريئة وعالية التباين.”
- “غيّر اللون الأساسي إلى بنفسجي عميق، والثانوي إلى برتقالي، واستخدم خط Assistant لجميع العناوين.”
يتيح Lovable.dev أيضًا الأوامر النصية للتعديلات الصغيرة على واجهة المستخدم، مثل تدوير أركان الأزرار، إضافة الظلال، أو جعل قسم الـ hero أكثر ديناميكية بصريًا.
يمكنك حتى إرفاق لقطة شاشة أو رسم تخطيطي كدليل بصري، أو الاستيراد من Figma لترجمة التصاميم الاحترافية مباشرة إلى كود وظيفي.
استخدام المحرر البصري للتعديلات الدقيقة
ليس كل تغيير تريد إجراؤه في تطبيقك يستحق كتابة موجه جديد. في بعض الأحيان تحتاج فقط إلى دفع زر، أو تبديل لون، أو تعديل البادينج في قسم. هنا يأتي دور المحرر البصري في Lovable.
يعمل المحرر مثل أداة تصميم مثل Figma. يمكنك التبديل إلى وضع التحرير، وتحريك المؤشر فوق أي عنصر في صفحتك، والنقر عليه مباشرة.
بمجرد تحديد العنصر، يمكنك تعديل الخصائص دون لمس الكود. على سبيل المثال، يمكنك:
- تغيير المحتوى النصي — تحديث عنوان، إعادة كتابة تسمية زر، أو تعديل نص العنصر النائب في نموذج.
- تعديل التصميم — تبديل الألوان، تغيير حجم الخطوط، تدوير أركان الأزرار، أو إضافة الظلال.
- ضبط التخطيط — تغيير الهوامش، البادينج، المحاذاة، أو المسافات بين العناصر.
يوفر هذا النهج الوقت والرصيد. بدلًا من وصف التعديلات الصغيرة نصيًا، يمكنك تعديل العناصر بصريًا على الفور. إنه مثالي عندما يعجبك معظم الناتج لكن تريد تحسين التفاصيل لتتوافق مع علامتك التجارية.
عمليًا، يجسر المحرر الفجوة بين التوليد المدعوم بالذكاء الاصطناعي والتحكم البشري في التصميم. يمكن للذكاء الاصطناعي أن ينتج الجزء الأكبر من التطبيق بسرعة، ثم يمكنك التدخل بصريًا لتلميع النتيجة.
الاندماج مع GitHub للتخصيص الكامل للكود
للمستخدمين المتقدمين، تقدم Lovable تكاملًا مع GitHub. بمجرد الاتصال، يمكنك مزامنة المشروع، واستنساخه محليًا، وإجراء التغييرات في بيئة التحرير المفضلة لديك، ودفع التحديثات مرة أخرى إلى GitHub — مع مزامنة Lovable لهذه التغييرات في المشروع.
يفتح هذا حرية كاملة لإضافة ميزات معقدة، أو دمج مكتبات طرف ثالث، أو تخصيص الرسوم المتحركة بما يتجاوز ما يمكن للأوامر النصية والمحرر البصري تحقيقه.
عندما انتقلت إلى طريقة عرض الكود، تمكنت من رؤية هيكل المشروع الذي أنشأه Lovable بوضوح. قدم إعدادًا حديثًا باستخدام React + TypeScript + Tailwind، مكتملًا بشجرة ملفات منطقية للمكونات والصفحات والتهيئة.
هذا كود حقيقي، ليس مجرد تجريد لا كود.
نشر التطبيق وإضافة التكاملات
بعد تخصيص التطبيق، أردت أن أرى كيف يتعامل Lovable مع النشر والتكاملات.
كان هذا يعني اختبار مدى سهولة ربط خدمات الخلفية، نشر المشروع على الويب، وإدارة الاستضافة أو النطاقات المخصصة.
التكامل الأصلي لـ Supabase في Lovable محوري في قصة الخلفية الخاصة به. يوفر Supabase قاعدة بيانات PostgreSQL، والمصادقة، وتخزين الملفات، والوظائف بدون خادم. عند الربط، يستطيع Lovable تلقائيًا إنشاء مخططات قاعدة البيانات، وإعداد الجداول للمنظمات والمستخدمين، وتمهيد تدفقات المصادقة مثل تسجيل الدخول بالبريد/كلمة المرور وGoogle OAuth.
في جلستي، أصر Lovable على ربط Supabase قبل المتابعة في ميزات مثل تعدد المستأجرين والتحكم في الوصول بناءً على الدور. بعد ربط مساحة العمل الخاصة بي بمنظمة Supabase، بدأ الذكاء الاصطناعي فورًا في تعديل ملفات الهجرات، وسياقات المصادقة، والأدوات المساعدة.
يدعم Lovable أيضًا Stripe أصليًا. يخزن مفاتيح API بأمان ويمكنه توليد وظائف خلفية للتعامل مع الاشتراكات، والدفع لمرة واحدة، وأحداث الفوترة.
على سبيل المثال، يمكنك طلب “إنشاء ثلاث خطط اشتراك باستخدام Stripe” أو “أضف دفعًا لمرة واحدة بقيمة 29 دولارًا لدورة رقمية” وسيقوم النظام بربط تدفق الدفع مع مزامنة بيانات اشتراك المستخدمين إلى Supabase.
بعيدًا عن شركائه المعتمدين، يدعم Lovable ربط واجهات برمجة التطبيقات المخصصة باستخدام وظائف Supabase Edge Functions. بوصف الواجهة التي ترغب في استخدامها، يكتب الذكاء الاصطناعي الوظيفة بدون خادم، ويدير المفاتيح بأمان، وينشرها نيابة عنك. هذا يجعل من الممكن توسيع تطبيقك إلى ما وراء الخيارات المدمجة.
فيما يتعلق بالنشر، تم تصميمه ليكون بسيطًا مثل النقر على زر. عند نشر مشروع، يقوم النظام بنشره فورًا على نطاق فرعي مباشر (مثل yourproject.lovable.app).
يمكن إعادة نشر أي تعديلات لاحقة بنقرة أخرى، مما يسهل مشاركة النماذج الأولية بسرعة.
وما هو أكثر من ذلك، يتضمن Lovable أيضًا تحكمًا في الإصدارات مدمجًا. هذا يعني أنه يمكنك التراجع إلى إصدارات سابقة من تطبيقك، وتتبع التغييرات بمرور الوقت، وتجنب خطر فقدان التقدم عند تجربة ميزات جديدة.
بالنسبة للتطبيقات الإنتاجية، يدعم Lovable النطاقات المخصصة، ويتولى تلقائيًا إدارة DNS وشهادات SSL عبر شركاء الاستضافة. يمكنك ربط نطاق موجود، أو حتى شراء نطاق جديد مباشرة من واجهة Lovable.
يمكن للمطورين الذين يفضلون مزيدًا من التحكم أيضًا مزامنة مشروعهم مع GitHub ونشره عبر مضيفين خارجيين مثل Vercel أو Netlify. في هذا الإعداد، تُدمَج التغييرات في Lovable مع المستودع وتُعاد نشرها تلقائيًا.
الانطباع العام: يجعل Lovable عملية النشر والتكامل بسيطة ومنعشة على السطح. يتكامل Supabase وStripe بإحكام، ويعمل النشر بنقرة واحدة كما هو معلن، ونظام التكاملات المعتمدة واسع. يبدو الهيكل الناتج جاهزًا للإنتاج، وليس مجرد نموذج أولي.
التسعير والخطط في Lovable
تنظم Lovable خططها حول الأرصدة (credits)، التي تعمل كرموز لاستخدام منشئ الذكاء الاصطناعي. كل إجراء تقوم به (من بناء صفحة هبوط إلى إضافة المصادقة) يستهلك أرصدة بناءً على التعقيد.
تم تصميم الخطة المجانية لتتيح لك اكتشاف Lovable بدون مخاطر. تحصل على:
- رصيد يومي صغير، بحد أقصى شهري
- القدرة على إنشاء مشاريع عامة فقط
- عدد غير محدود من المتعاونين على تلك المشاريع
إنها طريقة رائعة للتجربة ورؤية كيفية عمل المنصة. ولكن، بمجرد بلوغ الحد الشهري، لا يمكنك الاستمرار في البناء حتى إعادة ضبط الأرصدة. كما لا يمكن للمستخدمين المجانيين استخدام المشاريع الخاصة، أو النطاقات المخصصة، أو ميزات الفريق المتقدمة.
خطط Lovable Website Builder
| اسم الخطة | مساحة | النطاق الترددي | السعر | |
|---|---|---|---|---|
| Pro | غير محدود | غير محدود | د.م. 230 | التفاصيل |
| Business | غير محدود | غير محدود | د.م. 460 | التفاصيل |
توسّع الطبقات المدفوعة حدودك وتفتح ميزات حاسمة للمشاريع الحقيقية. إليك ما تحصل عليه بالإضافة إلى الخطة المجانية:
- أرصدة أكثر شهريًا (مع تحديثات يومية)
- مشاريع خاصة غير مرئية للمجتمع
- أدوار المستخدمين والأذونات لإدارة الفرق
- نطاقات مخصصة لوضع علامتك التجارية على التطبيق
- إزالة شعار Lovable لمظهر أنظف واحترافي
- ترحيل الأرصدة حتى لا تضيع الأرصدة غير المستخدمة
- ضوابط متقدمة (في الطبقات العليا) مثل SSO، ومساحات مشاريع شخصية، وقوالب تصميم، والقدرة على عدم المشاركة في تدريب البيانات
- خيارات للمؤسسات للتكاملات المخصصة، والتحكم في الوصول بناءً على المجموعات، والدعم المخصص
تتزايد الأرصدة مع التعقيد. قد يستخدم تعديل واجهة صغير أقل من رصيد واحد، بينما قد يتطلب إنشاء صفحة هبوط كاملة مع أقسام متعددة عدة أرصدة. هذا يجعل الاستخدام متوقعًا. التعديلات البسيطة خفيفة، بينما الطلبات الأكبر تستهلك أكثر.
بالنسبة لسياسة الاسترداد، لا تعلن Lovable عن سياسة استرداد تقليدية. بدلاً من ذلك، يمكنك الإلغاء أو الترقية إلى الأسفل في أي وقت، وسيتم تعديل الفواتير المترتبة عليك فيما بعد. هذا يعني أنه لا مخاطرة كبيرة في تجربة خطة مدفوعة. إذا لم تكن مناسبة، فلن تكون ملتزمًا بها.
تقبل Lovable المدفوعات عبر البطاقات القياسية (Visa، Mastercard، ومزودين رئيسيين آخرين). كما أنها تقدم خصمًا للطلاب إذا قمت بالتسجيل بعنوان بريد إلكتروني أكاديمي صالح، مما يجعلها أكثر ملاءمة للمتعلمين والبناة في المراحل المبكرة.
البدائل لـ Lovable.dev
بينما يتألق Lovable بفضل نهجه الحواري والمعتمد على الأوامر النصية في بناء التطبيقات، إلا أنه ليس الخيار الوحيد في هذا المجال.
بديل ملحوظ هو Bolt.new. يدمج Bolt.new الذكاء الاصطناعي مع بيئة تطوير متكاملة (IDE) تعمل في المتصفح، مما يمنح المستخدمين تحكمًا فوريًا في الكود مع الاستفادة من التوليد بالذكاء الاصطناعي.
نظرة عامة على Lovable.dev مقابل Bolt.new
| الميزة | Lovable | Bolt.new |
|---|---|---|
| تركيز الذكاء الاصطناعي | توليد متكامل (Full-stack) معتمد على الدردشة | من الأوامر للنص إلى كود داخل IDE بالمتصفح |
| تركيز المستخدم | المستخدمون غير التقنيين، المؤسسون، المصممون، والمطورون المهتمون بالنماذج الأولية السريعة | المطورون والمستخدمون التقنيون الذين يريدون التحكم الكامل |
| الوصول إلى الكود | تصدير GitHub فقط، لا محرر داخل التطبيق | IDE متكامل في المتصفح مع تحرير مباشر |
| الخلفية | تكامل Supabase للمصادقة وقاعدة البيانات | بيئة تشغيل Node.js، يتكامل مع Supabase وPrisma |
| الواجهة الأمامية | React + Tailwind CSS | Next.js، Vue، Svelte، Astro، Expo، والمزيد |
| النشر | نقرة واحدة إلى نطاق فرعي lovable.app؛ مزامنة GitHub للاستضافة المخصصة | معاينات فورية ونشر بنقرة واحدة عبر Netlify |
| التسعير | نظام أرصدة معتمد على الرسائل | معتمد على الرموز (tokens)، متغير حسب الاستخدام |
| التعاون | متعاونون غير محدودون؛ تعاونية فورية تجريبية | روابط قابلة للمشاركة وتدفقات عمل GitHub، بدون تعاون فوري |
Lovable.dev مقابل Bolt.new: ما هو اختيارك الأفضل؟
Lovable AI هو الخيار الأنسب إذا كنت مؤسسًا غير تقني أو مصممًا أو فريقًا يقدر البساطة والسرعة. تجعل الواجهة الحواريّة من السهل وصف ما تريد والحصول على MVP عامل دون لمس الكود.
Bolt.new، من ناحية أخرى، موجه لـالمطورين والمؤسسين التقنيين الذين يريدون تحكمًا مباشرًا في قاعدة الكود. مع IDE في المتصفح، يمكنك فحص الكود المولد بالذكاء الاصطناعي وتعديله وتوسيعه على الفور. يدعم مجموعة واسعة من الأطر ويتفوق عندما تتطلب المشاريع منطقًا مخصصًا، أو تقنيات محددة، أو تحكمًا دقيقًا. إذا أعجبك فكرة المساعدة بالذكاء الاصطناعي ولكنك لا تزال تريد “البرمجة بالإحساس” وتحسين التفاصيل بنفسك، فإن Bolt.new هو الخيار الأقوى والأكثر مرونة.
الحكم النهائي على Lovable.dev
يعد Lovable مناسبًا جدًا للمؤسسين غير التقنيين، والمصممين، والفرق الصغيرة الذين يرغبون في تحويل الأفكار إلى نماذج أولية عاملة بسرعة. تجعل الواجهة الحواريّة عملية البناء سلسة، وتوليد كود Full-stack مع تكاملات مثل Supabase وStripe أمرًا مثيرًا للإعجاب.
على الرغم من أنه ليس مثاليًا، فإن الخطة المجانية المقيدة وغياب تحرير الكود المباشر للمستخدمين المتقدمين يمثلان عقبة. ومع ذلك، إذا كنت تبحث عن بناء تطبيق خلال أسابيع بدلًا من شهور، فإن Lovable أداة رائعة تستحق التجربة.
