Lovable چیست؟

Lovable یک پلتفرم ساخت سایت و اپلیکیشن با هوش مصنوعی است که به کاربر اجازه می‌دهد نیازهای محصول را با زبان طبیعی توضیح دهد و در مقابل، یک پروژه واقعی و قابل‌ویرایش دریافت کند.

در سایت‌سازهای سنتی، کاربر باید قالب انتخاب کند، Componentها را روی صفحه قرار دهد و تنظیمات را به‌صورت دستی انجام دهد. در Lovable می‌توان محصول موردنظر را به شکل یک Prompt توصیف کرد:

یک داشبورد فارسی برای مدیریت درخواست‌های پشتیبانی بساز. کاربران بتوانند ثبت‌نام کنند، درخواست جدید ایجاد کنند، پاسخ‌ها را ببینند و مدیر سیستم بتواند وضعیت هر درخواست را تغییر دهد.

Lovable می‌تواند براساس این توضیح، بخش‌های مختلف برنامه را ایجاد کند:

• رابط کاربری
• صفحات و مسیرها
• Backend
• Database
• Authentication
• Storage
• اتصال به API
• Edge Function
• پنل مدیریت
• انتشار روی اینترنت

براساس مستندات رسمی Lovable، فرایند معمول کار با این پلتفرم از توضیح ایده آغاز می‌شود، با بازبینی و اصلاح برنامه ادامه پیدا می‌کند و می‌تواند به همگام‌سازی کد با GitHub و انتشار محصول منتهی شود.

پاسخ کوتاه: با Lovable چه چیزی می‌توان ساخت؟

Lovable برای ساخت انواع Web Application و ابزارهای داخلی کاربرد دارد:

• سایت شرکتی
• Landing Page
• داشبورد مدیریتی
• SaaS
• CRM
• سیستم تیکتینگ
• اپلیکیشن رزرو
• پلتفرم آموزشی
• Marketplace
• فروشگاه
• پنل کاربران
• ابزار مدیریت محتوا
• فرم‌های سازمانی
• سیستم مدیریت پروژه
• اپلیکیشن هوش مصنوعی
• چت‌بات اختصاصی
• دستیار تولید محتوا
• ابزار خلاصه‌سازی و تحلیل اسناد
• MVP استارتاپ
• Prototype قابل‌استفاده
• ابزار داخلی شرکت

خروجی Lovable فقط یک تصویر یا Prototype غیرقابل‌اجرا نیست. این پلتفرم کد واقعی تولید می‌کند و می‌توان پروژه را به GitHub متصل، توسعه و روی زیرساخت دیگری نیز منتشر کرد.

Lovable چگونه کار می‌کند؟

فرایند ساخت محصول در Lovable معمولاً شامل چند مرحله است:

دریافت Prompt

کاربر نیاز محصول، صفحات، قابلیت‌ها، نقش‌های کاربری و سبک طراحی را توضیح می‌دهد.

برنامه‌ریزی

Lovable درخواست را تحلیل می‌کند و بسته به حالت انتخاب‌شده، ممکن است پیش از تغییر کد سؤال تکمیلی بپرسد یا Plan ارائه دهد.

تولید کد

پلتفرم Componentها، Routeها، Styleها و منطق موردنیاز را ایجاد می‌کند.

نمایش Preview

نسخه قابل‌اجرا در اختیار کاربر قرار می‌گیرد تا رابط و عملکرد برنامه را بررسی کند.

اصلاح مرحله‌ای

کاربر می‌تواند تغییرات را با Prompt جدید درخواست کند:

فقط فرم ثبت‌نام را اصلاح کن.

تغییرات:
- فیلد تکرار رمز عبور اضافه شود.
- پیام‌های خطا فارسی باشند.
- در موبایل فاصله فیلدها کمتر شود.
- هیچ صفحه یا جدول دیتابیس دیگری تغییر نکند.

اضافه‌کردن Backend

در صورت نیاز، Lovable Cloud یا Supabase برای Database، Authentication، Storage، Edge Function و Secretها فعال می‌شود.

انتشار

برنامه روی یک زیردامنه lovable.app یا دامنه اختصاصی منتشر می‌شود.

Lovable یک سایت‌ساز است یا ابزار برنامه‌نویسی؟

Lovable را می‌توان در مرز میان سایت‌ساز، محیط توسعه و AI Coding Agent قرار داد.

یک سایت‌ساز سنتی معمولاً به کاربر اجازه می‌دهد از قالب‌ها و Componentهای مشخص استفاده کند. Lovable براساس درخواست کاربر کد جدید تولید می‌کند و می‌تواند منطق اختصاصی برنامه را نیز بسازد.

بااین‌حال، استفاده از Lovable به معنی حذف کامل برنامه‌نویسی نیست. برای پروژه‌های جدی همچنان باید مفاهیم زیر را شناخت:

• Database
• Authentication
• Authorization
• API
• Environment Variable
• Git
• Validation
• Error Handling
• Testing
• Deployment
• Logging
• Monitoring

کاربر غیرتوسعه‌دهنده می‌تواند با Lovable یک MVP بسازد، اما برای انتشار یک محصول پیچیده و دارای داده یا پرداخت واقعی، بازبینی فنی ضروری است.

Vibe Coding در Lovable چیست؟

Vibe Coding روشی برای ساخت نرم‌افزار با دستورهای زبان طبیعی است. در این روش، کاربر به‌جای نوشتن مستقیم تمام کدها، هدف و رفتار موردنظر را برای Agent توضیح می‌دهد.

برای مثال:

یک صفحه قیمت‌گذاری سه‌ستونه بساز.

پلن وسط برجسته باشد.
قیمت‌ها ماهانه و سالانه نمایش داده شوند.
در موبایل کارت‌ها زیر هم قرار بگیرند.
دکمه هر پلن کاربر را به صفحه ثبت‌نام ببرد.

Lovable این توضیح را به Component، Style و منطق برنامه تبدیل می‌کند.

Vibe Coding زمانی مؤثر است که کاربر دقیقاً بداند چه می‌خواهد. Promptهای مبهم ممکن است خروجی زیبا اما از نظر معماری ناقص ایجاد کنند.

مهم‌ترین قابلیت‌های Lovable

ساخت اپلیکیشن Full-Stack

Lovable می‌تواند Frontend و Backend یک محصول را در یک Workflow ایجاد کند.

Frontend مسئول نمایش رابط و دریافت تعامل کاربر است. Backend وظایفی مانند ذخیره داده، احراز هویت، اجرای منطق تجاری و اتصال به APIهای خارجی را انجام می‌دهد.

یک پروژه Full-Stack در Lovable می‌تواند شامل موارد زیر باشد:

• صفحه ورود و ثبت‌نام
• Dashboard
• جدول اطلاعات
• فرم ایجاد و ویرایش
• نقش‌های کاربری
• Database
• فایل و تصویر
• Edge Function
• API خارجی
• پنل مدیریت

Lovable Cloud چیست؟

Lovable Cloud زیرساخت داخلی Backend برای اپلیکیشن‌های ساخته‌شده با Lovable است.

براساس مستندات Lovable Cloud، این سرویس قابلیت‌هایی مانند موارد زیر را ارائه می‌دهد:

• Database
• Authentication
• مدیریت کاربران
• Storage
• Secrets
• ارسال ایمیل
• اجرای Backend
• AI
• Scheduled Job
• مشاهده داده‌ها
• Backup و بازیابی در قابلیت‌های پشتیبانی‌شده

در پروژه‌های جدید، Lovable Cloud می‌تواند بدون تنظیم دستی یک پروژه Supabase، زیرساخت Full-Stack موردنیاز را ایجاد کند.

اتصال Lovable به Supabase

Supabase یک پلتفرم Backend مبتنی بر PostgreSQL است که Database، Authentication، Storage، Realtime و Edge Function ارائه می‌دهد.

با اتصال Lovable به Supabase می‌توان:

• جدول ساخت.
• اطلاعات کاربران را ذخیره کرد.
• ثبت‌نام و ورود ایجاد کرد.
• فایل آپلود کرد.
• Row Level Security تعریف کرد.
• Edge Function اجرا کرد.
• API Keyهای خارجی را در Secret نگهداری کرد.
• Migrationهای Database را مدیریت کرد.

براساس راهنمای اتصال Supabase، Secretها در پروژه Supabase ذخیره می‌شوند و Edge Function می‌تواند آن‌ها را بخواند؛ این مقادیر نباید وارد کد Frontend یا Repository شوند.

اتصال Lovable به GitHub

یکی از مزایای مهم Lovable امکان همگام‌سازی پروژه با GitHub است.

این اتصال باعث می‌شود:

• نسخه‌ای از کد در Repository نگهداری شود.
• تاریخچه تغییرات مشخص باشد.
• توسعه‌دهندگان کد را بررسی کنند.
• Branch و Pull Request ایجاد شود.
• پروژه خارج از Lovable نیز توسعه پیدا کند.
• امکان مهاجرت و انتشار روی زیرساخت دیگر حفظ شود.
• تغییرات Agent با Diff بررسی شوند.

راهنمای اتصال در صفحه GitHub Integration منتشر شده است.

بهتر است اتصال GitHub در مراحل ابتدایی پروژه انجام شود، نه زمانی که محصول کامل شده است. این کار امکان بازگشت به نسخه‌های سالم را ساده‌تر می‌کند.

Chat Mode چیست؟

Chat Mode برای صحبت درباره پروژه، تحلیل نیازها و برنامه‌ریزی پیش از ایجاد تغییر استفاده می‌شود.

در این حالت می‌توان از Lovable خواست:

• ساختار پروژه را توضیح دهد.
• درباره معماری پیشنهاد بدهد.
• ریسک‌های تغییر را مشخص کند.
• مدل داده پیشنهاد کند.
• جریان کاربر را تحلیل کند.
• Plan مرحله‌ای ارائه دهد.
• تفاوت چند راهکار را مقایسه کند.

نمونه Prompt:

پروژه را تحلیل کن و برای اضافه‌کردن سیستم اشتراک ماهانه Plan بده.

در این مرحله:
- هیچ فایلی تغییر نکند.
- Migration اجرا نشود.
- پکیج جدید نصب نشود.
- فقط معماری، جدول‌ها، Routeها و ریسک‌ها توضیح داده شوند.

برای تغییرات بزرگ بهتر است ابتدا از Chat Mode استفاده شود و پس از تأیید Plan وارد پیاده‌سازی شوید.

Agent Mode چیست؟

Agent Mode می‌تواند برای انجام مستقل‌تر وظایف برنامه‌نویسی استفاده شود. Agent پروژه را بررسی می‌کند، فایل‌های لازم را تغییر می‌دهد و برای حل خطاها تلاش می‌کند.

Lovable اعلام کرده است که قابلیت‌های Agent به‌مرور برای کاهش تغییرات ناخواسته و حل بهتر وظایف پیچیده توسعه یافته‌اند. امکانات دقیق ممکن است با طرح حساب و نسخه محصول تغییر کنند.

حتی در Agent Mode نیز نباید تغییرات حساس بدون بازبینی پذیرفته شوند. تغییر Database، Authentication، Payment و دسترسی کاربران باید جداگانه بررسی شود.

Visual Edit

برای تغییرهای ظاهری ساده همیشه لازم نیست Prompt گسترده ارسال شود. قابلیت‌های ویرایش بصری می‌توانند برای انتخاب عناصر و اصلاح مواردی مانند متن، رنگ، اندازه و فاصله استفاده شوند.

Visual Edit برای این تغییرات مناسب است:

• اصلاح متن
• تغییر رنگ
• تغییر فاصله
• تغییر اندازه فونت
• اصلاح Border
• جابه‌جایی ساده عناصر
• تغییر تصویر

برای تغییر معماری Component یا منطق برنامه، Prompt دقیق و بازبینی کد مناسب‌تر است.

اتصال به APIهای خارجی

Lovable می‌تواند به APIهای عمومی و خصوصی متصل شود.

اگر API به احراز هویت نیاز نداشته باشد، ممکن است درخواست مستقیماً از Client ارسال شود. اگر API دارای API Key باشد، اتصال باید از طریق Backend، Secret و Edge Function انجام شود.

براساس راهنمای اتصال هر API به Lovable، برای APIهای احرازشده، Lovable می‌تواند Backend را فعال و یک Edge Function برای محافظت از کلید ایجاد کند.

این قابلیت برای اتصال به API درواره بسیار مناسب است.

Connectors و MCP

Lovable از Connectorهای مختلف برای ارتباط با سرویس‌ها و ابزارهای خارجی پشتیبانی می‌کند.

Connectorها می‌توانند در چند سطح استفاده شوند:

• اتصال سرویس به اپلیکیشن منتشرشده
• ارائه Context به Agent هنگام ساخت
• اتصال ابزارهای شخصی توسعه‌دهنده
• استفاده از MCP Server
• خواندن اطلاعات سرویس خارجی
• اجرای Action در ابزارهای دیگر

طبق مستندات Lovable Connectors، Chat Connector بیشتر در زمان ساخت برای Context شخصی استفاده می‌شود، درحالی‌که App Connector می‌تواند قابلیتی را در اختیار برنامه منتشرشده قرار دهد.

نباید Connector مورد استفاده Agent در زمان توسعه را با Integration اپلیکیشن نهایی یکسان در نظر گرفت.

انتشار و Hosting

پروژه Lovable را می‌توان روی یک آدرس lovable.app منتشر کرد.

براساس مستندات Hosting، انتشار روی زیردامنه Lovable در همه طرح‌ها امکان‌پذیر است، اما اتصال Custom Domain به طرح پولی نیاز دارد.

پس از انتشار می‌توان:

• زیردامنه را تغییر داد.
• Custom Domain متصل کرد.
• نسخه جدید منتشر کرد.
• دسترسی سایت را براساس قابلیت‌های طرح تنظیم کرد.
• مصرف Backend و AI را بررسی کرد.

اتصال دامنه اختصاصی

برای اتصال دامنه باید ابتدا پروژه منتشر شود. سپس می‌توان از بخش‌های زیر دامنه را اضافه کرد:

• تنظیمات Project
• بخش Domains
• پنجره Publish
• تنظیمات Workspace

Lovable رکوردهای DNS موردنیاز را نمایش می‌دهد. بسته به نوع اتصال، ممکن است رکوردهایی مانند A، CNAME یا رکورد تأیید دامنه لازم باشند.

جزئیات فعلی در صفحه Custom Domain قرار دارد.

اگر DNS دامنه در سرویس دیگری مانند آروان‌کلاد مدیریت می‌شود، رکوردهای ارائه‌شده باید به‌صورت دستی در همان DNS Provider ثبت شوند. انتقال کامل مدیریت DNS فقط زمانی انجام شود که مستندات اتصال صریحاً آن را لازم بدانند.

مالکیت کد و انتشار خارج از Lovable

کد پروژه را می‌توان از طریق GitHub در اختیار داشت و متناسب با معماری پروژه روی زیرساخت دیگری منتشر کرد.

ممکن است برای مهاجرت لازم باشد این بخش‌ها جایگزین یا دوباره تنظیم شوند:

• Hosting
• Environment Variables
• Serverless Function
• Database
• Authentication
• Storage
• Domain
• Build Command
• Redirectها
• Scheduled Job

Lovable راهنمای جداگانه‌ای برای انتشار و میزبانی خارج از Lovable ارائه کرده است.

مالکیت کد به‌تنهایی به معنی انتقال خودکار تمام زیرساخت نیست. وابستگی‌های Backend و سرویس‌های مدیریت‌شده نیز باید بررسی شوند.

آموزش ساخت اپلیکیشن هوش مصنوعی با Lovable و API درواره

در این آموزش یک اپلیکیشن فارسی برای تولید محتوای شبکه‌های اجتماعی می‌سازیم.

کاربر اطلاعات زیر را وارد می‌کند:

• موضوع
• شبکه اجتماعی
• لحن
• طول محتوا
• مخاطب
• توضیحات تکمیلی

برنامه متن را به Backend ارسال می‌کند. Backend با API درواره ارتباط برقرار می‌کند و پاسخ مدل را به کاربر برمی‌گرداند.

قابلیت‌های پروژه

نسخه اولیه برنامه شامل این بخش‌ها خواهد بود:

• فرم فارسی و راست‌چین
• انتخاب LinkedIn، Instagram یا Telegram
• انتخاب لحن رسمی، دوستانه یا تبلیغاتی
• انتخاب طول کوتاه، متوسط یا بلند
• نمایش Loading
• نمایش پاسخ
• دکمه کپی
• تاریخچه پنج خروجی اخیر
• اعتبارسنجی ورودی
• مدیریت خطا
• اتصال امن به API درواره

در نسخه اول به ثبت‌نام و Database نیاز نداریم. ابتدا جریان اصلی محصول را آزمایش می‌کنیم و سپس قابلیت‌های پیچیده‌تر را اضافه خواهیم کرد.

مرحله اول: ساخت پروژه

در Lovable یک Project جدید ایجاد کنید و Prompt زیر را وارد کنید:

یک اپلیکیشن وب فارسی و راست‌چین برای تولید محتوای شبکه‌های اجتماعی بساز.

نام موقت:
دستیار محتوای فارسی

کاربر باید بتواند این موارد را وارد کند:
- موضوع محتوا
- شبکه اجتماعی: LinkedIn، Instagram یا Telegram
- لحن: رسمی، دوستانه یا تبلیغاتی
- طول: کوتاه، متوسط یا بلند
- مخاطب هدف
- توضیحات تکمیلی اختیاری

خروجی:
- متن تولیدشده
- دکمه کپی
- دکمه تولید مجدد
- نمایش زمان تولید
- نگهداری پنج خروجی اخیر در Local Storage

طراحی:
- کاملاً فارسی و RTL
- Responsive
- پس‌زمینه روشن
- طراحی مینیمال و حرفه‌ای
- فرم در سمت راست و نتیجه در سمت چپ دسکتاپ
- در موبایل بخش‌ها زیر هم قرار بگیرند
- Label تمام فیلدها مشخص باشد
- حالت Focus قابل‌مشاهده باشد
- حالت Loading و Empty State ایجاد شود

فعلاً از داده Mock استفاده کن و هنوز هیچ API خارجی متصل نکن.

قبل از ساخت:
- ابتدا Plan کوتاه ارائه بده.
- Componentها و Stateهای اصلی را مشخص کن.
- هیچ Backend یا Database غیرضروری ایجاد نکن.

شروع با Mock Data باعث می‌شود طراحی و تجربه کاربری را بدون مصرف API آزمایش کنیم.

مرحله دوم: بررسی رابط کاربری

پس از ساخته‌شدن نسخه اولیه، موارد زیر را بررسی کنید:

• جهت تمام متن‌ها RTL باشد.
• ترتیب فیلدها منطقی باشد.
• صفحه در عرض ۳۷۵ پیکسل به‌درستی نمایش داده شود.
• متن‌های فارسی از کادر بیرون نزنند.
• دکمه تولید در وضعیت Loading غیرفعال شود.
• Empty State قبل از تولید پاسخ نمایش داده شود.
• پیام‌های خطا فارسی باشند.
• دکمه کپی Feedback مناسبی داشته باشد.

برای اصلاح محدود رابط می‌توان Prompt زیر را ارسال کرد:

فقط رابط صفحه اصلی را اصلاح کن.

تغییرات:
- عرض محتوای اصلی حداکثر ۱۲۰۰ پیکسل باشد.
- در دسکتاپ فرم ۴۰ درصد و خروجی ۶۰ درصد عرض را بگیرد.
- در موبایل خروجی زیر فرم قرار بگیرد.
- ارتفاع Textarea کمتر از ۱۲۰ پیکسل نباشد.
- متن دکمه کپی بعد از کلیک برای دو ثانیه به «کپی شد» تغییر کند.

هیچ منطق، Route یا Dependency را تغییر نده.

مرحله سوم: فعال‌کردن Backend

برای استفاده از API دارای کلید، باید Lovable Cloud یا Backend مبتنی بر Supabase فعال شود.

از Lovable بخواهید یک Edge Function ایجاد کند:

اکنون Backend پروژه را برای اتصال امن به یک API خارجی فعال کن.

الزامات:
- یک Edge Function با نام generate-content بساز.
- Frontend فقط این Edge Function را فراخوانی کند.
- API Key هرگز در Browser قرار نگیرد.
- هیچ Secret در کد، Repository یا Log نوشته نشود.
- ورودی در Backend اعتبارسنجی شود.
- برای درخواست خارجی Timeout تعریف شود.
- پیام خطای عمومی و فارسی به Frontend برگردد.
- هنوز مقدار واقعی Secret را در کد ننویس.

مرحله چهارم: افزودن Secretهای درواره

برای اتصال به API درواره به این مقادیر نیاز داریم:

DARVAREH_API_KEY=YOUR_API_KEY
DARVAREH_MODEL_ID=YOUR_MODEL_ID
DARVAREH_BASE_URL=https://api.darvareh.ir/v1

از Lovable بخواهید Secretها را از طریق ورودی امن دریافت کند:

برای Edge Function سه Secret تعریف کن:

DARVAREH_API_KEY
DARVAREH_MODEL_ID
DARVAREH_BASE_URL

مقدار پیش‌فرض Base URL:
https://api.darvareh.ir/v1

API Key را از طریق ورودی امن Secret دریافت کن.
API Key را در پیام Chat، فایل کد، Frontend یا Log ذخیره نکن.

براساس مستندات Secrets، این مقادیر در Backend رمزگذاری می‌شوند، در اختیار Edge Function قرار می‌گیرند و نباید به Browser ارسال شوند.

مرحله پنجم: ساخت Edge Function

نمونه پیاده‌سازی Edge Function با TypeScript:

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers":
    "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (request) => {
  if (request.method === "OPTIONS") {
    return new Response(null, { headers: corsHeaders });
  }

  try {
    const body = await request.json();

    const topic =
      typeof body.topic === "string"
        ? body.topic.trim()
        : "";

    const platform =
      typeof body.platform === "string"
        ? body.platform
        : "";

    const tone =
      typeof body.tone === "string"
        ? body.tone
        : "";

    const length =
      typeof body.length === "string"
        ? body.length
        : "";

    const audience =
      typeof body.audience === "string"
        ? body.audience.trim()
        : "";

    const details =
      typeof body.details === "string"
        ? body.details.trim()
        : "";

    if (!topic || !platform || !tone || !length) {
      return jsonResponse(
        { error: "اطلاعات لازم کامل نیست." },
        400
      );
    }

    if (topic.length > 500 || details.length > 3000) {
      return jsonResponse(
        { error: "طول ورودی بیشتر از حد مجاز است." },
        400
      );
    }

    const allowedPlatforms = [
      "linkedin",
      "instagram",
      "telegram",
    ];

    const allowedTones = [
      "formal",
      "friendly",
      "promotional",
    ];

    const allowedLengths = [
      "short",
      "medium",
      "long",
    ];

    if (
      !allowedPlatforms.includes(platform) ||
      !allowedTones.includes(tone) ||
      !allowedLengths.includes(length)
    ) {
      return jsonResponse(
        { error: "یکی از گزینه‌های انتخاب‌شده معتبر نیست." },
        400
      );
    }

    const apiKey = Deno.env.get("DARVAREH_API_KEY");
    const modelId = Deno.env.get("DARVAREH_MODEL_ID");
    const baseUrl =
      Deno.env.get("DARVAREH_BASE_URL") ||
      "https://api.darvareh.ir/v1";

    if (!apiKey || !modelId) {
      throw new Error("AI service is not configured");
    }

    const prompt = buildPrompt({
      topic,
      platform,
      tone,
      length,
      audience,
      details,
    });

    const controller = new AbortController();
    const timeout = setTimeout(
      () => controller.abort(),
      30_000
    );

    const response = await fetch(
      `${baseUrl}/chat/completions`,
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: modelId,
          messages: [
            {
              role: "system",
              content:
                "شما یک نویسنده حرفه‌ای محتوای فارسی هستید. دستور کاربر را دقیق اجرا کنید و اطلاعات ساختگی اضافه نکنید.",
            },
            {
              role: "user",
              content: prompt,
            },
          ],
        }),
        signal: controller.signal,
      }
    );

    clearTimeout(timeout);

    if (!response.ok) {
      console.error("Darvareh request failed", {
        status: response.status,
      });

      return jsonResponse(
        {
          error:
            "در حال حاضر امکان تولید محتوا وجود ندارد.",
        },
        502
      );
    }

    const data = await response.json();

    const content =
      data.choices?.[0]?.message?.content?.trim();

    if (!content) {
      throw new Error("Empty model response");
    }

    return jsonResponse({ content }, 200);
  } catch (error) {
    console.error("generate-content failed", {
      name: error?.name,
      message:
        error?.name === "AbortError"
          ? "request timed out"
          : "internal error",
    });

    return jsonResponse(
      {
        error:
          error?.name === "AbortError"
            ? "زمان پاسخ‌گویی بیش از حد طول کشید."
            : "خطایی در پردازش درخواست رخ داد.",
      },
      500
    );
  }
});

function jsonResponse(
  body: Record<string, unknown>,
  status: number
) {
  return new Response(JSON.stringify(body), {
    status,
    headers: {
      ...corsHeaders,
      "Content-Type": "application/json",
    },
  });
}

مرحله ششم: ساخت Prompt کنترل‌شده

در Edge Function، مقادیر انتخابی کاربر به دستورهای مشخص تبدیل می‌شوند:

type PromptInput = {
  topic: string;
  platform: string;
  tone: string;
  length: string;
  audience: string;
  details: string;
};

function buildPrompt(input: PromptInput) {
  const platformInstructions: Record<string, string> = {
    linkedin:
      "یک پست حرفه‌ای مناسب LinkedIn بنویس. ساختار متن خوانا و مناسب مخاطب حرفه‌ای باشد.",
    instagram:
      "یک کپشن مناسب Instagram بنویس. شروع جذاب و ساختار قابل‌خواندن داشته باشد.",
    telegram:
      "یک پست مناسب کانال Telegram بنویس. متن مستقیم، منظم و قابل‌انتشار باشد.",
  };

  const toneInstructions: Record<string, string> = {
    formal: "لحن رسمی و حرفه‌ای باشد.",
    friendly: "لحن دوستانه و محترمانه باشد.",
    promotional:
      "لحن تبلیغاتی اما غیراغراق‌آمیز باشد.",
  };

  const lengthInstructions: Record<string, string> = {
    short: "خروجی کوتاه و فشرده باشد.",
    medium: "خروجی با طول متوسط باشد.",
    long: "خروجی کامل‌تر و دارای چند پاراگراف باشد.",
  };

  return `
موضوع:
${input.topic}

پلتفرم:
${platformInstructions[input.platform]}

لحن:
${toneInstructions[input.tone]}

طول:
${lengthInstructions[input.length]}

مخاطب هدف:
${input.audience || "عمومی"}

توضیحات تکمیلی:
${input.details || "ندارد"}

قواعد:
- خروجی فقط به زبان فارسی باشد.
- هیچ آمار یا ادعای عددی اختراع نکن.
- نام برندها و محصولات را تغییر نده.
- متن آماده انتشار باشد.
- درباره فرایند تولید محتوا توضیح نده.
- فقط محتوای نهایی را برگردان.
`;
}

مقادیر platform، tone و length باید با Allowlist کنترل شوند. ارسال مستقیم مقدار دلخواه Client به Prompt می‌تواند رفتار برنامه را غیرقابل‌پیش‌بینی کند.

مرحله هفتم: اتصال Frontend به Edge Function

Frontend باید فقط Edge Function پروژه را فراخوانی کند:

const { data, error } =
  await supabase.functions.invoke(
    "generate-content",
    {
      body: {
        topic,
        platform,
        tone,
        length,
        audience,
        details,
      },
    }
  );

if (error) {
  throw new Error(
    "ارتباط با سرویس تولید محتوا برقرار نشد."
  );
}

if (!data?.content) {
  throw new Error(
    data?.error || "پاسخ معتبری دریافت نشد."
  );
}

setGeneratedContent(data.content);

کلید API درواره در این درخواست وجود ندارد. Browser فقط با Backend خود برنامه ارتباط برقرار می‌کند.

مرحله هشتم: تست اتصال

از Lovable بخواهید سناریوهای اصلی را آزمایش کند:

اتصال Frontend، Edge Function و API را تست کن.

سناریوها:
1. موضوع معتبر برای LinkedIn
2. موضوع معتبر برای Instagram
3. موضوع خالی
4. مقدار platform نامعتبر
5. ورودی بیشتر از محدودیت
6. Secret تعریف‌نشده
7. API Key نامعتبر
8. Timeout
9. پاسخ خالی مدل
10. کلیک چندباره روی دکمه هنگام Loading

بررسی کن:
- API Key در Network Browser دیده نشود.
- هیچ Secret در JavaScript Client وجود نداشته باشد.
- دکمه هنگام درخواست غیرفعال شود.
- پیام خطا فارسی باشد.
- نتیجه قابل کپی باشد.
- اجرای مجدد درخواست کنترل شود.

فقط مشکلات مرتبط با این جریان را اصلاح کن و بخش‌های دیگر پروژه را تغییر نده.

مرحله نهم: اضافه‌کردن حساب کاربری و تاریخچه

پس از اطمینان از جریان اصلی، می‌توان Authentication و Database را اضافه کرد.

مدل داده ساده:

جدول generations

• id
• user_id
• topic
• platform
• tone
• length
• content
• created_at

هر کاربر باید فقط رکوردهای خودش را ببیند. در Supabase این محدودیت با Row Level Security اعمال می‌شود.

Prompt پیشنهادی:

ثبت‌نام و ورود با ایمیل را اضافه کن.

پس از ورود:
- هر خروجی موفق در جدول generations ذخیره شود.
- کاربر فقط تاریخچه خودش را ببیند.
- حداکثر ۲۰ رکورد اخیر نمایش داده شود.
- کاربر بتواند رکورد خودش را حذف کند.
- کاربر نباید رکورد کاربران دیگر را بخواند یا تغییر دهد.
- برای جدول Row Level Security و Policyهای لازم ایجاد کن.

قبل از اجرای Migration، SQL و Policyهای پیشنهادی را برای بررسی نمایش بده.

نباید صرفاً به وجود user_id در Frontend اعتماد کرد. محدودیت دسترسی باید در Database نیز اعمال شود.

مرحله دهم: محدودکردن مصرف API

اگر برنامه عمومی باشد، هر درخواست کاربر برای مالک برنامه هزینه ایجاد می‌کند. بنابراین باید کنترل مصرف اضافه شود.

روش‌های معمول:

• الزام ورود کاربر
• محدودیت روزانه
• Rate Limit
• محدودیت طول ورودی
• جلوگیری از درخواست هم‌زمان
• ثبت تعداد درخواست
• تعیین سهمیه براساس طرح
• بررسی موجودی پیش از درخواست
• محدودیت IP به‌عنوان لایه کمکی
• جلوگیری از اجرای مستقیم Edge Function توسط کاربر ناشناس

Prompt نمونه:

برای تولید محتوا محدودیت مصرف اضافه کن.

قواعد:
- فقط کاربر واردشده بتواند درخواست ارسال کند.
- هر کاربر در نسخه رایگان روزانه حداکثر ۱۰ درخواست داشته باشد.
- محدودیت در Backend اعمال شود، نه فقط در رابط.
- درخواست‌های ناموفق موقت سهمیه را مصرف نکنند.
- عملیات بررسی و ثبت مصرف تا حد ممکن اتمیک باشد.
- زمان و نتیجه هر درخواست ثبت شود.
- متن کامل کاربر در Log عمومی ذخیره نشود.
- پس از رسیدن به سقف، زمان بازنشانی سهمیه به فارسی نمایش داده شود.

قبل از اجرای Migration، ساختار جدول و منطق جلوگیری از Race Condition را توضیح بده.

مرحله یازدهم: اتصال GitHub

پس از پایدار شدن نسخه اولیه، پروژه را به GitHub متصل کنید.

پیش از اتصال:

• نام Repository را مشخص کنید.
• Private یا Public بودن آن را بررسی کنید.
• فایل‌های Environment را بازبینی کنید.
• مطمئن شوید Secret در کد وجود ندارد.
• .gitignore را بررسی کنید.
• Commit اولیه سالم ایجاد کنید.

پس از اتصال، تغییرات بزرگ را در Branch جداگانه انجام دهید و قبل از Merge، Diff را بررسی کنید.

مرحله دوازدهم: انتشار برنامه

قبل از انتشار عمومی این چک‌لیست را بررسی کنید:

• فرم اصلی کار می‌کند.
• حالت خطا آزمایش شده است.
• Secret در Frontend نیست.
• مصرف API محدود شده است.
• Database Policyها فعال‌اند.
• صفحه موبایل بررسی شده است.
• Metadata و عنوان صفحه تنظیم شده‌اند.
• Favicon و تصویر اشتراک‌گذاری مشخص شده‌اند.
• صفحه حریم خصوصی وجود دارد.
• مسیرهای نامعتبر صفحه 404 دارند.
• Domain و HTTPS درست کار می‌کنند.
• هزینه Cloud و API پایش می‌شود.

سپس از بخش Publish نسخه جدید را منتشر کنید.

چگونه برای Lovable Prompt بهتر بنویسیم؟

Prompt مناسب باید چند جزء مشخص داشته باشد.

هدف محصول

توضیح دهید برنامه چه مشکلی را حل می‌کند.

کاربران

نقش‌های مختلف را مشخص کنید:

• مهمان
• کاربر
• مدیر
• پشتیبان
• فروشنده
• همکار سازمانی

صفحات

فهرست صفحات را بنویسید:

• صفحه اصلی
• ورود
• ثبت‌نام
• Dashboard
• تنظیمات
• پنل مدیریت
• صفحه 404

جریان‌های اصلی

برای مثال:

1. کاربر ثبت‌نام می‌کند.
2. وارد Dashboard می‌شود.
3. درخواست جدید ایجاد می‌کند.
4. پاسخ را دریافت می‌کند.
5. تاریخچه را مشاهده می‌کند.

مدل داده

Entityها و ارتباط‌ها را توضیح دهید:

• User
• Project
• Generation
• Subscription
• Invoice

محدودیت تغییر

مشخص کنید چه چیزی نباید تغییر کند:

فقط صفحه Billing را اصلاح کن.
Authentication، Database Schema و Navigation تغییر نکنند.
هیچ Package جدیدی نصب نکن.

معیار پذیرش

توضیح دهید چه زمانی کار تمام‌شده محسوب می‌شود:

کار زمانی کامل است که:
- کاربر واردشده بتواند فرم را ارسال کند.
- داده در Database ذخیره شود.
- کاربر دیگر نتواند رکورد را مشاهده کند.
- خطاها فارسی باشند.
- تست موبایل انجام شده باشد.

قالب Prompt پیشنهادی برای پروژه‌های Lovable

نام پروژه:
...

هدف:
...

مخاطبان:
...

نقش‌های کاربری:
...

صفحات:
...

جریان اصلی:
...

مدل داده:
...

قابلیت‌های Frontend:
...

قابلیت‌های Backend:
...

APIهای خارجی:
...

سبک طراحی:
...

نیازهای RTL و فارسی:
...

محدوده مجاز تغییرات:
...

مواردی که نباید تغییر کنند:
...

معیارهای پذیرش:
...

تست‌های لازم:
...

قبل از اجرا:
ابتدا سؤال‌های ضروری و Plan را ارائه بده.

اشتباه‌های رایج هنگام استفاده از Lovable

ساخت کل محصول با یک Prompt

ساخت Authentication، Billing، Admin، AI، Notification و Analytics در یک مرحله احتمال خطا و تغییرات کنترل‌نشده را افزایش می‌دهد.

محصول را مرحله‌به‌مرحله بسازید:

1. رابط اولیه
2. جریان اصلی
3. Backend
4. Authentication
5. Database
6. قابلیت AI
7. مدیریت
8. پرداخت
9. تست
10. انتشار

درخواست‌های مبهم

عبارت «صفحه را حرفه‌ای‌تر کن» مشخص نمی‌کند چه چیزی باید تغییر کند.

بهتر است بنویسید:

فقط Hero را اصلاح کن.
ارتفاع آن در دسکتاپ ۷۰ درصد Viewport باشد.
عنوان سمت راست و تصویر سمت چپ قرار بگیرد.
دو CTA حفظ شوند.
در موبایل تصویر زیر متن نمایش داده شود.

تغییر چند بخش سالم برای حل یک مشکل

در Prompt محدوده را مشخص کنید:

فقط خطای ارسال فرم Contact را رفع کن.
طراحی صفحه، جدول Database و Routeهای دیگر تغییر نکنند.

قرار دادن API Key در Frontend

متغیرهای Frontend و مقادیری که وارد Bundle می‌شوند Secret نیستند. API Key باید فقط از Edge Function یا Backend خوانده شود.

اجرای Migration بدون بررسی

تغییر Schema، حذف ستون یا اصلاح Policy می‌تواند داده و دسترسی کاربران را تحت‌تأثیر قرار دهد. SQL را قبل از اجرا بررسی کنید.

اعتماد به ظاهر زیبا

رابط خوب تضمین نمی‌کند که Authentication، Authorization و منطق Backend درست باشند.

نداشتن GitHub

بدون Version Control، بازگشت از تغییرات نامناسب و بررسی دقیق Diff دشوارتر می‌شود.

انتشار بدون محدودیت مصرف

یک Endpoint عمومی هوش مصنوعی می‌تواند هزینه غیرمنتظره ایجاد کند. Rate Limit، سهمیه و احراز هویت را قبل از انتشار فعال کنید.

مقایسه Lovable و Bolt

تفاوت قابلیت‌ها و قیمت‌ها دائماً تغییر می‌کند. انتخاب بهتر باید با ساخت یک پروژه آزمایشی مشابه در هر دو ابزار انجام شود.

مقایسه Lovable و Replit Agent

Replit یک محیط توسعه کامل همراه با Runtime، Console، Database و Agent است. Lovable تجربه ساده‌تر و بصری‌تری برای ساخت Web Application با Prompt ارائه می‌دهد.

Lovable معمولاً برای این کاربران مناسب است:

• مدیر محصول
• طراح
• بنیان‌گذار
• تیم بازاریابی
• توسعه‌دهنده Frontend
• سازنده MVP

Replit برای این کاربردها انعطاف بیشتری دارد:

• Backend مستقل
• Script
• Automation
• زبان‌های مختلف
• دسترسی مستقیم‌تر به Runtime
• پروژه‌های غیروب
• کنترل بیشتر محیط اجرا

مقایسه Lovable و WordPress

WordPress برای سایت محتوایی، فروشگاهی و شرکتی دارای اکوسیستم بزرگی از قالب و افزونه است. Lovable برای ساخت منطق و رابط اختصاصی یک Web App مناسب‌تر است.

برای وبلاگ یا سایت محتوایی استاندارد، WordPress ممکن است انتخاب اقتصادی‌تر و قابل‌پیش‌بینی‌تری باشد. برای Dashboard، SaaS یا ابزار اختصاصی، Lovable انعطاف بیشتری ارائه می‌دهد.

مقایسه Lovable و Framer

Framer بیشتر برای Landing Page، Portfolio و سایت‌های Marketing با طراحی بصری قوی مناسب است.

Lovable برای ساخت محصولاتی که به Database، Authentication، API و منطق Backend نیاز دارند، انتخاب کامل‌تری است.

یک ترکیب رایج می‌تواند این باشد:

• Framer برای سایت معرفی
• Lovable برای اپلیکیشن اصلی
• درواره برای API مدل‌های هوش مصنوعی

مقایسه Lovable Cloud و Supabase

در پروژه‌های جدید، Lovable Cloud می‌تواند شروع سریع‌تری ارائه دهد. اگر تیم از قبل Supabase دارد یا کنترل مستقیم Backend می‌خواهد، اتصال Supabase همچنان گزینه قابل‌بررسی است.

آیا Lovable برای پروژه Production مناسب است؟

Lovable می‌تواند برای ساخت محصول واقعی استفاده شود، اما Production-ready بودن به خودکار بودن فرایند ساخت وابسته نیست.

یک پروژه زمانی برای Production آماده‌تر است که:

• معماری بررسی شده باشد.
• کد بازبینی شده باشد.
• تست وجود داشته باشد.
• Database Policy درست باشد.
• Secretها محافظت شوند.
• Backup وجود داشته باشد.
• Monitoring فعال باشد.
• Rate Limit اعمال شود.
• هزینه‌ها کنترل شوند.
• مسیر مهاجرت مشخص باشد.
• شرایط حقوقی و حریم خصوصی آماده باشند.

Lovable در راهنمای ساخت محصول واقعی نیز ساخت مرحله‌ای، افزودن Backend، تست، انتشار و بهبود براساس استفاده کاربران را توصیه می‌کند.

چک‌لیست Production برای Lovable و API درواره

• پروژه به GitHub متصل است.
• Repository حاوی Secret نیست.
• API Key فقط در Backend نگهداری می‌شود.
• Model ID از تنظیمات محیطی خوانده می‌شود.
• ورودی‌ها در Backend اعتبارسنجی می‌شوند.
• طول Prompt محدود شده است.
• Timeout وجود دارد.
• Retry کنترل‌شده است.
• Rate Limit فعال است.
• سهمیه کاربر در Backend بررسی می‌شود.
• درخواست هم‌زمان کنترل می‌شود.
• خطاها اطلاعات داخلی را افشا نمی‌کنند.
• API Key در Log چاپ نمی‌شود.
• Database دارای Policy مناسب است.
• کاربر فقط داده خودش را می‌بیند.
• Migrationها بازبینی شده‌اند.
• Backup فعال است.
• مصرف API ثبت می‌شود.
• هزینه هر قابلیت پایش می‌شود.
• رابط در موبایل آزمایش شده است.
• Accessibility بررسی شده است.
• Metadata و SEO تنظیم شده‌اند.
• Custom Domain و HTTPS آزمایش شده‌اند.
• صفحه حریم خصوصی و شرایط استفاده وجود دارد.
• مسیر Export و مهاجرت مستند شده است.

پرسش‌های متداول

Lovable چیست؟

Lovable یک پلتفرم مبتنی بر هوش مصنوعی برای ساخت سایت و اپلیکیشن Full-Stack با استفاده از Prompt و زبان طبیعی است.

آیا Lovable بدون کدنویسی کار می‌کند؟

برای ساخت نسخه اولیه می‌توان بدون نوشتن مستقیم کد از آن استفاده کرد. پروژه‌های پیچیده و Production به دانش فنی، بازبینی کد و درک Backend و Database نیاز دارند.

آیا Lovable رایگان است؟

Lovable طرح رایگان و طرح‌های پولی ارائه می‌دهد، اما تعداد Credit، قابلیت‌های Cloud، Custom Domain و محدودیت‌ها ممکن است تغییر کنند. قیمت فعلی باید در وب‌سایت رسمی بررسی شود.

Lovable چه زبان‌هایی تولید می‌کند؟

Lovable بیشتر برای ساخت Web Applicationهای مدرن مبتنی بر JavaScript و TypeScript و فناوری‌هایی مانند React استفاده می‌شود. Stack دقیق پروژه ممکن است براساس قابلیت‌های فعلی پلتفرم تغییر کند.

آیا Lovable Backend می‌سازد؟

بله. می‌توان از Lovable Cloud یا Integration با Supabase برای Database، Authentication، Storage، Secret و Functionهای Backend استفاده کرد.

آیا می‌توان Lovable را به API درواره متصل کرد؟

بله. API درواره از طریق یک Edge Function یا Backend امن فراخوانی می‌شود. Base URL درواره https://api.darvareh.ir/v1 است.

آیا می‌توان OpenAI SDK را با درواره استفاده کرد؟

برای Endpointها و قابلیت‌های سازگار می‌توان Base URL، API Key و Model ID را در OpenAI SDK تغییر داد و به API درواره متصل شد.

آیا API Key را می‌توان در Lovable وارد کرد؟

بله، اما باید از قابلیت Secrets و ورودی امن استفاده شود. کلید نباید در Prompt معمولی، فایل کد یا Frontend نوشته شود.

Lovable Cloud بهتر است یا Supabase؟

برای شروع سریع و یکپارچه، Lovable Cloud مناسب است. Supabase برای تیم‌هایی که Backend مستقل‌تر و کنترل مستقیم PostgreSQL می‌خواهند گزینه مهمی است.

آیا می‌توان کد Lovable را دانلود کرد؟

امکان اتصال به GitHub و نگهداری کد پروژه وجود دارد. وابستگی‌های Backend، Database و Hosting باید جداگانه بررسی شوند.

آیا سایت Lovable را می‌توان روی سرور دیگری منتشر کرد؟

بله، در پروژه‌های قابل‌انتقال می‌توان کد را روی زیرساخت دیگری منتشر کرد، اما تنظیم Backend، Environment Variable، Database و Functionها ممکن است نیازمند تغییر باشد.

آیا Lovable برای ساخت اپلیکیشن موبایل مناسب است؟

تمرکز اصلی Lovable روی Web Application است. می‌توان رابط Responsive یا PWA ساخت، اما اپلیکیشن Native و انتشار در App Store نیازمند بررسی Stack و فرایند Build جداگانه است.

Lovable بهتر است یا Bolt؟

Lovable برای ساخت سریع محصول Full-Stack و Workflowهای یکپارچه مناسب است. Bolt محیط توسعه درون مرورگر و تجربه متفاوتی برای ساخت و اجرای کد دارد. انتخاب باید براساس پروژه واقعی انجام شود.

آیا Lovable جای برنامه‌نویس را می‌گیرد؟

Lovable بخشی از تولید کد، طراحی و راه‌اندازی را سریع‌تر می‌کند، اما معماری، تست، نگهداری، کنترل داده و مسئولیت انتشار همچنان به تخصص انسانی نیاز دارند.

جمع‌بندی

Lovable یکی از شناخته‌شده‌ترین ابزارهای ساخت اپلیکیشن با هوش مصنوعی و Vibe Coding است. این پلتفرم به کاربران اجازه می‌دهد ایده خود را با زبان طبیعی توضیح دهند و یک Web Application واقعی شامل رابط، Backend، Database و Integration دریافت کنند.

مهم‌ترین قابلیت‌های Lovable عبارت‌اند از:

• ساخت Full-Stack با Prompt
• Lovable Cloud
• اتصال به Supabase
• اتصال به GitHub
• Secrets و Edge Functions
• Integration با APIهای خارجی
• Preview و انتشار
• اتصال Custom Domain
• امکان انتقال و Hosting خارجی

برای استفاده حرفه‌ای، پروژه باید مرحله‌به‌مرحله ساخته شود. ابتدا رابط و جریان اصلی، سپس Backend، Authentication، Database و اتصال API اضافه شوند. تغییرات مهم نیز باید با Git و تست کنترل شوند.

اگر قصد دارید در اپلیکیشن ساخته‌شده با Lovable از مدل‌های هوش مصنوعی استفاده کنید، می‌توانید Backend را به API یکپارچه درواره متصل کنید. کافی است API Key را در Secret نگه دارید، Base URL را روی https://api.darvareh.ir/v1 قرار دهید و Model ID مناسب را انتخاب کنید.

برای شروع، در درواره ثبت‌نام کنید، API Key بسازید و اپلیکیشن Lovable خود را از طریق یک Edge Function امن به مدل‌های هوش مصنوعی متصل کنید.

مقالات مرتبط

• ساخت سایت با هوش مصنوعی؛ بهترین ابزارها و آموزش کامل
• ساخت اپلیکیشن با هوش مصنوعی؛ آموزش کامل Web و Mobile App
• طراحی UI/UX با هوش مصنوعی؛ از ایده تا کد
• API سازگار با OpenAI چیست؟
• React چیست؟ آموزش کامل ساخت اپلیکیشن هوش مصنوعی
• Tailwind CSS چیست؟ آموزش ساخت رابط اپلیکیشن AI
• Zod چیست؟ آموزش اعتبارسنجی داده در TypeScript
• React Hook Form چیست؟ آموزش ساخت و اعتبارسنجی فرم

منابع

• مستندات رسمی Lovable
• راهنمای ساخت محصول واقعی با Lovable
• Lovable Cloud
• اتصال Lovable به Supabase
• اتصال Lovable به GitHub
• اتصال APIهای خارجی
• مدیریت Secrets
• Hosting در Lovable
• اتصال دامنه اختصاصی
• انتشار خارج از Lovable

این مقاله صرفاً با هدف آموزش و اطلاع‌رسانی تهیه شده است. پیش از استفاده عملی، مستندات رسمی سرویس‌ها و صفحه سلب مسئولیت را مطالعه کنید.