آموزش و راهنما

Bolt.new چیست؟ آموزش کامل ساخت سایت و اپلیکیشن با هوش مصنوعی

Bolt.new پلتفرمی برای ساخت سایت، Web App و اپلیکیشن موبایل با Prompt است. در این آموزش یک ابزار فارسی متصل به API درواره را از طراحی تا انتشار می‌سازیم.

Bolt.new چیست؟

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

برای مثال می‌توان چنین درخواستی نوشت:

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

Bolt می‌تواند براساس این درخواست، قسمت‌های مختلف پروژه را بسازد:

رابط کاربری
Componentها
مسیرهای برنامه
Backend
Database
Authentication
Server Function
اتصال به API
File Storage
Hosting
دامنه
اپلیکیشن موبایل مبتنی بر Expo

براساس معرفی رسمی Bolt، این ابزار برای ساخت Website، Web Application و Mobile Application طراحی شده است و می‌تواند یک Prompt را به محصول قابل‌اجرا تبدیل کند.

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

Bolt برای ساخت پروژه‌های مختلف وب و موبایل کاربرد دارد:

Landing Page
سایت شرکتی
Portfolio
فروشگاه اینترنتی
داشبورد
CRM
سیستم رزرو
Job Board
SaaS
ابزار مدیریت پروژه
پنل کاربران
پنل مدیریت
اپلیکیشن آموزشی
اپلیکیشن مدیریت مالی شخصی
ابزار داخلی سازمان
اپلیکیشن مبتنی بر API
چت‌بات هوش مصنوعی
دستیار تولید محتوا
ابزار خلاصه‌سازی اسناد
اپلیکیشن موبایل با Expo
MVP استارتاپ

Bolt بیشتر بر اکوسیستم JavaScript و TypeScript تمرکز دارد و می‌تواند از Frameworkها و کتابخانه‌های مدرن وب استفاده کند.

Bolt.new چگونه کار می‌کند؟

کار با Bolt از یک Prompt شروع می‌شود. Agent درخواست را تحلیل می‌کند، فایل‌های پروژه را می‌سازد، Packageهای لازم را نصب می‌کند و نتیجه را در Preview نمایش می‌دهد.

فرایند معمول شامل مراحل زیر است:

تعریف ایده
برنامه‌ریزی
انتخاب معماری
تولید کد
نصب Dependencyها
اجرای پروژه
نمایش Preview
اصلاح خطاها
اضافه‌کردن Backend
تست
انتشار

تفاوت Bolt با یک Chatbot معمولی این است که فقط قطعه‌کد پیشنهاد نمی‌دهد. Agent می‌تواند کد را در محیط پروژه قرار دهد، آن را اجرا کند و برای رفع مشکلات تلاش کند.

ارتباط Bolt با StackBlitz چیست؟

Bolt توسط StackBlitz ساخته شده است. StackBlitz یک محیط توسعه مبتنی بر مرورگر است که به توسعه‌دهندگان اجازه می‌دهد پروژه‌های JavaScript و Node.js را بدون نصب محیط محلی اجرا کنند.

فناوری مهم StackBlitz، WebContainers نام دارد.

WebContainers چیست؟

WebContainers یک محیط اجرای مبتنی بر WebAssembly است که امکان اجرای Node.js، File System، Terminal و Development Server را داخل مرورگر فراهم می‌کند.

در یک محیط توسعه سنتی برای اجرای پروژه باید Node.js، npm و ابزارهای Build روی کامپیوتر نصب شوند. WebContainers بخش زیادی از این محیط را داخل Tab مرورگر اجرا می‌کند.

براساس توضیحات رسمی StackBlitz، Bolt از WebContainers برای راه‌اندازی محیط توسعه در مرورگر استفاده می‌کند.

این فناوری امکان انجام کارهای زیر را فراهم می‌کند:

ساخت فایل و پوشه
اجرای npm
نصب Package
اجرای Node.js
راه‌اندازی Development Server
مشاهده Preview
استفاده از Terminal
اجرای ابزارهای Build
اشتراک‌گذاری پروژه

البته Backend و Database برنامه منتشرشده الزاماً داخل مرورگر کاربران اجرا نمی‌شوند. Bolt Cloud و سرویس‌های متصل، زیرساخت زمان اجرای محصول نهایی را فراهم می‌کنند.

تفاوت Bolt و StackBlitz چیست؟

StackBlitz یک محیط توسعه مبتنی بر مرورگر است. Bolt یک لایه Agentic روی این محیط ارائه می‌دهد.

در StackBlitz معمولاً توسعه‌دهنده پروژه را ایجاد و کد را مستقیماً ویرایش می‌کند. در Bolt، کاربر می‌تواند با Prompt از Agent بخواهد پروژه را طراحی و پیاده‌سازی کند.

به زبان ساده:

StackBlitz: محیط اجرای و توسعه کد در مرورگر
Bolt: ساخت و تغییر نرم‌افزار با AI Agent
WebContainers: فناوری اجرای محیط Node.js در مرورگر
Bolt Cloud: Backend، Database، Hosting و سرویس‌های پروژه

Bolt V2 چیست؟

در نسخه جدید Bolt، مجموعه‌ای از قابلیت‌های توسعه و زیرساخت یکپارچه شده‌اند. براساس Release Notes رسمی Bolt، نسخه جدید شامل قابلیت‌هایی مانند این موارد است:

Claude Agent به‌عنوان Agent پیش‌فرض
Bolt Database
Authentication
Server Function
Secrets
User Management
File Storage
Hosting
Domain
Analytics
نمایش Policyهای Row Level Security
ادامه پشتیبانی از Supabase

امکانات Bolt دائماً به‌روزرسانی می‌شوند. نام Agent، مدل داخلی، محدودیت‌ها و امکانات هر طرح باید از مستندات فعلی بررسی شوند.

Bolt Agent چیست؟

Bolt Agent عامل هوش مصنوعی داخل پلتفرم است که وظایفی مانند برنامه‌ریزی، تولید کد، اصلاح فایل و رفع خطا را انجام می‌دهد.

Agent می‌تواند:

ساختار پروژه را ایجاد کند.
Component بسازد.
کد موجود را تحلیل کند.
فایل‌های مختلف را هم‌زمان اصلاح کند.
Package نصب کند.
خطاهای Build را بررسی کند.
Database ایجاد کند.
Server Function بسازد.
Integration اضافه کند.
رابط را براساس بازخورد تغییر دهد.

Bolt در نسخه فعلی Agentهای Standard و Max را ارائه می‌دهد. شرایط دسترسی، مدل زیربنایی و Token مصرفی هر گزینه ممکن است براساس طرح حساب تغییر کند.

تفاوت Agent Standard و Max

Agent Standard برای وظایف عمومی توسعه طراحی شده است و میان سرعت، کیفیت و مصرف Token تعادل ایجاد می‌کند.

Agent Max برای وظایف پیچیده‌تر و پروژه‌های بزرگ‌تر در نظر گرفته شده و ممکن است فقط در طرح‌های مشخص در دسترس باشد.

برای کارهای زیر معمولاً Standard کافی است:

ساخت Landing Page
اصلاح Component
ایجاد فرم
ساخت Dashboard اولیه
رفع خطای محدود
تغییر طراحی

Max می‌تواند برای این وظایف مناسب‌تر باشد:

تحلیل Codebase بزرگ
بازطراحی معماری
تغییر چند بخش وابسته
Migration پیچیده
رفع خطاهای چندمرحله‌ای
ساخت Feature بزرگ

انتخاب Agent قوی‌تر تضمین نمی‌کند که خروجی بدون خطا باشد. محدوده تغییرات و معیار پذیرش همچنان باید در Prompt مشخص شوند.

Plan Mode چیست؟

Plan Mode برای برنامه‌ریزی پروژه یا قابلیت جدید پیش از شروع تولید کد استفاده می‌شود.

در Build Mode، Prompt می‌تواند مستقیماً باعث تغییر فایل‌ها شود. در Plan Mode می‌توان ابتدا درباره معماری، صفحات، Database و مراحل اجرا با Agent گفتگو کرد.

براساس راهنمای Plan Mode، این حالت کمک می‌کند تغییرات ناخواسته کمتر شوند و مصرف Token نیز بهتر کنترل شود.

نمونه Prompt برای Plan Mode:

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

نقش‌ها:
- کاربر
- پشتیبان
- مدیر

قابلیت‌ها:
- ثبت‌نام و ورود
- ایجاد درخواست
- پاسخ به درخواست
- تغییر وضعیت
- پنل مدیریت
- جست‌وجو و فیلتر
- خلاصه‌سازی درخواست با هوش مصنوعی

در این مرحله هیچ کدی ننویس.
ابتدا این موارد را ارائه بده:
- معماری پیشنهادی
- صفحات
- مدل داده
- Routeهای Backend
- نقش‌ها و دسترسی‌ها
- مراحل پیاده‌سازی
- ریسک‌های اصلی
- معیارهای پذیرش

پس از بررسی و اصلاح Plan می‌توان از Agent خواست فقط مرحله اول را اجرا کند.

Build Mode چیست؟

Build Mode حالت اصلی تولید و تغییر کد در Bolt است.

در این حالت، Agent می‌تواند:

فایل ایجاد کند.
کد تغییر دهد.
Dependency نصب کند.
پروژه را اجرا کند.
Database بسازد.
Server Function ایجاد کند.
خطا را برطرف کند.

برای کاهش تغییرات ناخواسته، هر Prompt باید محدوده مشخصی داشته باشد:

فقط فرم ایجاد تیکت را پیاده‌سازی کن.

در این مرحله:
- Authentication تغییر نکند.
- Database Schema تغییر نکند.
- Navigation تغییر نکند.
- Package جدید نصب نشود.
- فقط فایل‌های مربوط به فرم و Validation اصلاح شوند.

Bolt Cloud چیست؟

Bolt Cloud مجموعه‌ای از سرویس‌های موردنیاز برای ساخت و اجرای اپلیکیشن است.

این زیرساخت می‌تواند موارد زیر را در اختیار پروژه قرار دهد:

Database
Authentication
مدیریت کاربران
File Storage
Server Function
Secrets
Hosting
Domain
Analytics
Logهای Backend

استفاده از Bolt Cloud باعث می‌شود برای ساخت یک MVP مجبور نباشید چند سرویس جداگانه را از ابتدا تنظیم کنید.

بااین‌حال، پیش از ساخت محصول Production باید قیمت، محدودیت منابع، امکان Backup، نحوه Export داده و مسیر مهاجرت به زیرساخت دیگر بررسی شوند.

Bolt Database چیست؟

Bolt Database پایگاه داده یکپارچه پلتفرم است. Agent می‌تواند در صورت نیاز Database ایجاد و جدول‌های لازم را تعریف کند.

Bolt Database قابلیت‌هایی مانند موارد زیر دارد:

جدول
مدیریت کاربران
Authentication
File Storage
Secret
Server Function
Log
تنظیمات دسترسی
Row Level Security

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

جدول `tickets`

شناسه
شناسه کاربر
عنوان
توضیحات
وضعیت
اولویت
تاریخ ایجاد
تاریخ به‌روزرسانی

جدول `ticket_messages`

شناسه
شناسه درخواست
شناسه فرستنده
متن
تاریخ ارسال

جدول `profiles`

شناسه کاربر
نام
نقش
نام شرکت

ساخت جدول به‌تنهایی کافی نیست. Policyهای دسترسی باید مشخص کنند هر نقش چه داده‌ای را می‌تواند بخواند یا تغییر دهد.

Authentication در Bolt

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

در طراحی Authentication باید این موارد مشخص شوند:

روش ورود
تأیید ایمیل
بازیابی رمز عبور
Session
نقش‌های کاربری
صفحه حساب کاربری
محدودیت مسیرها
دسترسی مدیر
غیرفعال‌کردن حساب
خروج از حساب

از Agent بخواهید تفاوت Authentication و Authorization را رعایت کند. واردشدن کاربر به معنی مجاز بودن او برای مشاهده تمام داده‌ها نیست.

Server Function چیست؟

Server Function یا Edge Function بخشی از کد است که روی Backend اجرا می‌شود.

این Function برای کارهایی مناسب است که نباید در Browser انجام شوند:

فراخوانی API دارای Secret
پردازش پرداخت
بررسی دسترسی
ارسال ایمیل
دریافت Webhook
پردازش فایل
اجرای منطق حساس
ارتباط با API هوش مصنوعی

طبق مستندات Server Functions، فراخوانی APIهای خارجی هوش مصنوعی یکی از کاربردهای اصلی Server Function است.

برای اتصال اپلیکیشن Bolt به API درواره، درخواست مدل باید در Server Function انجام شود.

Secrets در Bolt

Secret برای ذخیره اطلاعات حساسی مانند API Key، Token و رمز سرویس خارجی استفاده می‌شود.

براساس راهنمای Secrets در Bolt، Server Function می‌تواند Secret را بخواند، بدون اینکه مقدار آن به Browser کاربران فرستاده شود.

برای ایجاد Secret:

پروژه Bolt را باز کنید.
روی آیکون Database کلیک کنید.
وارد بخش Secrets شوید.
نام Secret را وارد کنید.
مقدار آن را در ورودی امن قرار دهید.
Secret را ذخیره کنید.

API Key نباید در این محل‌ها قرار گیرد:

فایل Frontend
Component
Local Storage
متغیر دارای Prefix عمومی
Repository
کد نمونه منتشرشده
Console Browser
پاسخ Endpoint
Log عمومی

اتصال Bolt به Supabase

اگر پروژه به Backend مستقل‌تر یا Supabase موجود نیاز داشته باشد، می‌توان Bolt را به Supabase متصل کرد.

Supabase امکانات زیر را ارائه می‌دهد:

PostgreSQL
Authentication
Storage
Realtime
Edge Functions
Row Level Security
Dashboard مستقل
Migration
Backup براساس طرح

براساس راهنمای اتصال Supabase به Bolt، اطلاعات Supabase از تنظیمات Database پروژه قابل‌مشاهده است. توجه کنید که بازگردانی Version History کد، Database خارجی Supabase را به نسخه قبلی بازنمی‌گرداند.

این نکته مهم است: نسخه کد و نسخه Database همیشه یک چیز نیستند.

اتصال Bolt به GitHub

اتصال GitHub برای پروژه‌های جدی توصیه می‌شود.

مزایای آن عبارت‌اند از:

نگهداری نسخه کد
مشاهده تاریخچه تغییرات
بررسی Code Diff
ایجاد Branch
استفاده از Pull Request
همکاری توسعه‌دهندگان
CI/CD
انتشار روی زیرساخت دیگر
کاهش وابستگی به پلتفرم

پیش از Sync، کد را بررسی کنید تا Secret یا فایل حساس وارد Repository نشده باشد.

Version History داخلی Bolt مفید است، اما جایگزین کامل Git و Backup دیتابیس نیست.

ساخت اپلیکیشن موبایل با Bolt و Expo

Bolt می‌تواند با Expo برای ساخت اپلیکیشن موبایل استفاده شود. Expo مجموعه‌ای از ابزارها برای توسعه برنامه‌های React Native است.

با این Integration می‌توان پروژه‌هایی مانند موارد زیر ساخت:

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

ساخت رابط موبایل در Preview به معنی آماده‌بودن برنامه برای انتشار در Google Play یا App Store نیست. موارد زیر نیز باید بررسی شوند:

Permissionها
Build
Signing
Push Notification
Deep Link
Store Policy
Subscription
تست روی Device واقعی
عملکرد Offline
مدیریت Update

آموزش ساخت اپلیکیشن فارسی با Bolt و API درواره

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

کاربر متن پیام، نظر یا تیکت مشتری را وارد می‌کند. برنامه با کمک مدل هوش مصنوعی این اطلاعات را برمی‌گرداند:

خلاصه
احساس کلی
موضوع اصلی
اولویت پیشنهادی
پاسخ پیشنهادی
برچسب‌ها

Bolt رابط و Backend برنامه را می‌سازد و Server Function به API درواره متصل می‌شود.

معماری پروژه

برنامه شامل سه لایه است:

Frontend

ورودی کاربر را دریافت و نتیجه را نمایش می‌دهد.

Server Function

داده را اعتبارسنجی می‌کند، درخواست مدل را می‌سازد و API Key را امن نگه می‌دارد.

API درواره

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

مرحله اول: ساخت Plan

در صفحه اصلی Bolt، Plan Mode را فعال و این Prompt را ارسال کنید:

یک اپلیکیشن وب فارسی برای تحلیل بازخورد مشتری طراحی کن.

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

نسخه اول:
- بدون ثبت‌نام
- بدون Database
- فقط یک صفحه
- تاریخچه پنج تحلیل اخیر در Local Storage
- اتصال نهایی به API سازگار با OpenAI
- API Key فقط در Server Function

طراحی:
- کاملاً فارسی و RTL
- Responsive
- مناسب دسکتاپ و موبایل
- ورودی در سمت راست و نتیجه در سمت چپ
- پس‌زمینه روشن
- رنگ‌بندی حرفه‌ای
- وضعیت Loading، Empty و Error

در این مرحله هیچ کدی تولید نکن.
فقط معماری، Componentها، جریان داده، روش Validation و مراحل اجرا را ارائه بده.

Plan را بررسی کنید و مطمئن شوید API Key وارد Frontend نمی‌شود.

مرحله دوم: ساخت نسخه Mock

پس از تأیید Plan، وارد Build Mode شوید:

فقط نسخه Frontend را براساس Plan بساز.

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

الزامات:
- React و TypeScript
- رابط کاملاً RTL
- فرم دارای Textarea
- حداقل طول ورودی ۱۰ کاراکتر
- حداکثر طول ۱۰۰۰۰ کاراکتر
- نمایش شمارنده کاراکتر
- دکمه تحلیل
- نتیجه در Cardهای جداگانه
- دکمه کپی پاسخ پیشنهادی
- نمایش پنج تحلیل اخیر در Local Storage
- طراحی موبایل از عرض ۳۷۵ پیکسل آزمایش شود

در این مرحله فقط تجربه کاربری را ارزیابی کنید.

مرحله سوم: فعال‌کردن Bolt Database و Server Function

اکنون از Agent بخواهید Backend را ایجاد کند:

برای اتصال امن به API خارجی، Bolt Database و یک Server Function ایجاد کن.

نام Function:
analyze-feedback

قواعد:
- Frontend فقط Server Function را فراخوانی کند.
- API Key به Browser ارسال نشود.
- ورودی در Backend دوباره اعتبارسنجی شود.
- مقدارهای خروجی دارای ساختار مشخص باشند.
- برای درخواست خارجی Timeout ایجاد شود.
- خطای سرویس خارجی با پیام عمومی فارسی نمایش داده شود.
- API Key و متن کامل مشتری در Log نوشته نشوند.
- در این مرحله Database Table ایجاد نکن.

مرحله چهارم: تعریف Secretهای درواره

سه Secret ایجاد کنید:

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

از Agent بخواهید آن‌ها را به‌صورت امن دریافت کند:

Server Function باید تنظیمات زیر را فقط از Secrets بخواند:

DARVAREH_API_KEY
DARVAREH_MODEL_ID
DARVAREH_BASE_URL

اگر Base URL تعریف نشده بود از این مقدار استفاده کن:
https://api.darvareh.ir/v1

اگر API Key یا Model ID موجود نبود:
- درخواست خارجی اجرا نشود.
- پیام عمومی برای کاربر نمایش داده شود.
- مقدار Secret در هیچ Log یا Response قرار نگیرد.

مقدار DARVAREH_MODEL_ID را باید از شناسه مدل فعال در درواره انتخاب کنید.

مرحله پنجم: ساخت درخواست به API درواره

نمونه منطق Server Function:

const baseUrl =
  process.env.DARVAREH_BASE_URL ||
  "https://api.darvareh.ir/v1";

const apiKey = process.env.DARVAREH_API_KEY;
const modelId = process.env.DARVAREH_MODEL_ID;

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: AbortSignal.timeout(30000),
  }
);

ساختار دسترسی به Environment Variable ممکن است با Runtime واقعی Server Function متفاوت باشد. Agent باید کد را براساس محیط جاری Bolt Cloud تولید کند.

مرحله ششم: طراحی Prompt تحلیل

Prompt Backend باید خروجی قابل‌پردازش درخواست کند:

متن زیر یک پیام یا بازخورد مشتری است.

آن را تحلیل کن و فقط JSON معتبر برگردان.

فیلدها:
- summary: خلاصه فارسی
- sentiment: یکی از positive، negative یا neutral
- topic: موضوع اصلی به فارسی
- priority: یکی از low، medium یا high
- tags: آرایه‌ای شامل حداکثر سه برچسب فارسی
- suggested_reply: پاسخ پیشنهادی محترمانه به فارسی

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

متن مشتری:
...

حتی اگر از مدل خروجی JSON بخواهیم، Backend باید پاسخ را Parse و اعتبارسنجی کند.

مرحله هفتم: اعتبارسنجی پاسخ مدل

نمونه Schema با Zod:

import { z } from "zod";

const analysisSchema = z.object({
  summary: z.string().min(1).max(1000),
  sentiment: z.enum([
    "positive",
    "negative",
    "neutral",
  ]),
  topic: z.string().min(1).max(200),
  priority: z.enum([
    "low",
    "medium",
    "high",
  ]),
  tags: z
    .array(z.string().min(1).max(100))
    .max(3),
  suggested_reply: z
    .string()
    .min(1)
    .max(3000),
});

پس از دریافت پاسخ:

const data = await response.json();

const rawContent =
  data.choices?.[0]?.message?.content;

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

const parsedJson = JSON.parse(rawContent);
const analysis = analysisSchema.parse(parsedJson);

اگر مدل JSON نامعتبر برگرداند، برنامه نباید داده را بدون بررسی نمایش یا ذخیره کند.

مرحله هشتم: مدیریت خطاها

این وضعیت‌ها باید مدیریت شوند:

متن خالی
متن کوتاه‌تر از حداقل
متن طولانی
Secret تعریف‌نشده
API Key نامعتبر
Model ID نامعتبر
کمبود اعتبار
Rate Limit
Timeout
پاسخ خالی مدل
JSON نامعتبر
قطع ارتباط کاربر
کلیک چندباره روی دکمه

Prompt پیشنهادی:

مدیریت خطای جریان analyze-feedback را کامل کن.

الزامات:
- Validation در Frontend و Backend انجام شود.
- جزئیات Provider به کاربر نمایش داده نشود.
- خطای 401 یا 403 سرویس خارجی به پیام عمومی تبدیل شود.
- برای 429 پیام محدودیت موقت نمایش داده شود.
- Timeout پیام جداگانه داشته باشد.
- JSON نامعتبر مدل باعث Crash برنامه نشود.
- هنگام درخواست، دکمه تحلیل غیرفعال باشد.
- Abort کردن درخواست از سمت کاربر مدیریت شود.
- Secret و متن کامل مشتری وارد Log نشوند.

مرحله نهم: تست برنامه

از Agent بخواهید این سناریوها را بررسی کند:

جریان تحلیل بازخورد را آزمایش کن.

تست‌ها:
1. پیام مثبت فارسی
2. شکایت منفی
3. پیام خنثی
4. ورودی خالی
5. ورودی کمتر از ۱۰ کاراکتر
6. ورودی بیشتر از ۱۰۰۰۰ کاراکتر
7. API Key نامعتبر
8. Model ID نامعتبر
9. Timeout
10. پاسخ JSON نامعتبر
11. پاسخ خالی
12. دوبار کلیک روی دکمه
13. نمایش در عرض ۳۷۵ پیکسل
14. نمایش متن فارسی طولانی
15. کپی پاسخ پیشنهادی

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

مرحله دهم: افزودن حساب کاربری و Database

بعد از تأیید نسخه اولیه می‌توان ثبت‌نام و تاریخچه دائمی اضافه کرد.

مدل داده پیشنهادی:

جدول `analyses`

id
user_id
input_preview
summary
sentiment
topic
priority
tags
suggested_reply
created_at

قبل از Migration:

برای اپلیکیشن، Authentication و تاریخچه تحلیل اضافه کن.

قواعد:
- هر کاربر فقط تحلیل‌های خودش را مشاهده کند.
- فقط کاربر واردشده بتواند تحلیل جدید ثبت کند.
- مدیر به‌صورت پیش‌فرض به متن کامل کاربران دسترسی نداشته باشد.
- حداکثر ۳۰ تحلیل اخیر نمایش داده شود.
- کاربر بتواند تحلیل خودش را حذف کند.
- تمام Policyهای دسترسی را پیش از اجرا نمایش بده.
- بدون تأیید من Migration را اجرا نکن.

مرحله یازدهم: کنترل مصرف API

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

کنترل‌های ضروری:

الزام ورود
Rate Limit
سهمیه روزانه
محدودیت طول ورودی
جلوگیری از درخواست موازی
ثبت مصرف
محدودیت براساس طرح
کنترل موجودی
جلوگیری از فراخوانی ناشناس Function
لغو درخواست قطع‌شده

نمونه Prompt:

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

نسخه رایگان:
- هر کاربر روزانه ۱۰ تحلیل
- فقط کاربر واردشده
- محدودیت در Server Function بررسی شود
- درخواست موفق سهمیه را مصرف کند
- خطاهای موقت Provider سهمیه را مصرف نکنند
- از اجرای هم‌زمان چند درخواست برای عبور از محدودیت جلوگیری شود
- زمان بازنشانی سهمیه به کاربر نمایش داده شود

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

پیش از اتصال یا Push:

Secretها را بررسی کنید.
فایل‌های Environment را حذف کنید.
.gitignore را کنترل کنید.
کد تولیدشده را بازبینی کنید.
Packageهای اضافی را شناسایی کنید.
Build را اجرا کنید.
یک نسخه سالم ثبت کنید.

برای Featureهای بزرگ از Branch جداگانه استفاده کنید.

مرحله سیزدهم: انتشار

پروژه منتشرشده ابتدا می‌تواند روی دامنه رایگان bolt.host در دسترس قرار گیرد.

براساس مستندات Domains، Custom Domain در طرح‌های پولی قابل اتصال است. دامنه را می‌توان از Bolt خرید یا دامنه موجود را متصل کرد.

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

Build موفق است.
Secret در Frontend وجود ندارد.
Server Function کار می‌کند.
Rate Limit فعال است.
Policyهای Database بررسی شده‌اند.
رابط موبایل درست است.
صفحه حریم خصوصی وجود دارد.
Metadata تکمیل شده است.
Favicon تنظیم شده است.
صفحه 404 وجود دارد.
HTTPS فعال است.
هزینه Hosting و API پایش می‌شود.

آیا می‌توان API درواره را مدل داخلی Bolt کرد؟

در این آموزش، Bolt ابزار ساخت برنامه است و API درواره مدل‌های موردنیاز اپلیکیشن نهایی را تأمین می‌کند.

این دو جریان را نباید با هم اشتباه گرفت:

Bolt Agent: مدل و Agent داخلی برای ساخت و اصلاح کد
API درواره: API زمان اجرای اپلیکیشن ساخته‌شده

صرف اینکه API درواره با OpenAI API سازگار است، به این معنی نیست که می‌توان آن را بدون Integration رسمی جایگزین مدل داخلی Bolt Agent کرد.

روش قابل‌اتکا این است که Bolt پروژه را بسازد و Server Function پروژه با Base URL درواره ارتباط برقرار کند.

چگونه در Bolt Prompt بهتری بنویسیم؟

راهنمای رسمی Prompting در Bolt پیشنهاد می‌کند معماری از ابتدا مشخص و قابلیت‌ها به‌صورت مرحله‌ای اضافه شوند.

یک Prompt خوب شامل این بخش‌ها است:

هدف

برنامه چه مشکلی را حل می‌کند؟

مخاطب

چه افرادی از آن استفاده می‌کنند؟

نقش‌ها

کاربر، مدیر یا اپراتور چه دسترسی‌هایی دارند؟

صفحات

چه Routeهایی لازم‌اند؟

جریان اصلی

کاربر از ورود تا دریافت نتیجه چه مراحلی طی می‌کند؟

مدل داده

چه جدول‌ها و ارتباط‌هایی نیاز هستند؟

Stack

از چه Framework و سرویس‌هایی استفاده شود؟

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

کدام فایل یا بخش نباید تغییر کند؟

معیار پذیرش

چه نتیجه‌ای نشان می‌دهد کار تکمیل شده است؟

تست

کدام سناریوها باید بررسی شوند؟

قالب Prompt حرفه‌ای برای Bolt

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

هدف:
...

مخاطبان:
...

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

صفحات:
...

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

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

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

مدل داده:
...

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

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

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

محدوده این مرحله:
...

موارد ممنوع:
...

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

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

ابتدا در Plan Mode معماری را ارائه بده.
در این مرحله هیچ فایل یا دیتابیسی را تغییر نده.

روش کاهش مصرف Token در Bolt

ساخت پروژه با Promptهای بزرگ و اصلاح‌های تکراری می‌تواند Token زیادی مصرف کند.

برای کنترل مصرف:

ابتدا Plan بسازید.
Featureها را مرحله‌ای اضافه کنید.
Prompt مبهم ننویسید.
محدوده فایل‌ها را مشخص کنید.
از تغییر دوباره بخش‌های سالم جلوگیری کنید.
خطای واقعی را همراه با Context ارسال کنید.
برای تغییر ظاهری کوچک، کل صفحه را بازطراحی نکنید.
Context غیرضروری را کاهش دهید.
قبل از درخواست جدید، نتیجه فعلی را بررسی کنید.
چند تغییر وابسته را با معیار پذیرش واحد گروه‌بندی کنید.

به‌جای این Prompt:

سایت را بهتر و حرفه‌ای‌تر کن.

بنویسید:

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

- عنوان و متن فعلی حفظ شوند.
- عرض متن حداکثر ۵۶۰ پیکسل باشد.
- CTA اصلی برجسته‌تر شود.
- تصویر در سمت چپ قرار بگیرد.
- در موبایل تصویر زیر متن نمایش داده شود.
- Header و سایر Sectionها تغییر نکنند.

اشتباه‌های رایج در Bolt

شروع مستقیم با Build Mode

برای پروژه پیچیده ابتدا Plan Mode را استفاده کنید.

اضافه‌کردن تمام قابلیت‌ها در یک Prompt

Authentication، Payment، Admin، AI و Analytics را مرحله‌ای پیاده‌سازی کنید.

قرار دادن Secret در کد

Secret باید از بخش Database و تنظیمات Secrets در اختیار Server Function قرار گیرد.

اعتماد کامل به Preview

Preview صحیح، عملکرد درست Backend، Database و مجوزها را تضمین نمی‌کند.

بازگردانی کد با تصور بازگردانی Database

Version History کد ممکن است تغییرات Database خارجی را برنگرداند. Backup دیتابیس باید جداگانه مدیریت شود.

تغییر Schema بدون بررسی

Migration اشتباه می‌تواند باعث حذف داده یا اختلال در دسترسی کاربران شود.

استفاده از Local Storage برای داده حساس

Local Storage برای تاریخچه ساده و غیرحساس مناسب است، نه Token، API Key یا داده محرمانه.

انتشار Endpoint عمومی بدون سهمیه

Endpoint هوش مصنوعی بدون Authentication و Rate Limit می‌تواند باعث مصرف ناخواسته شود.

نداشتن GitHub

بدون Version Control بررسی تغییرات و بازگشت به نسخه سالم دشوارتر است.

مقایسه Bolt و Lovable

ویژگی	Bolt	Lovable
ساخت با Prompt	دارد	دارد
Plan Mode	دارد	دارد
دسترسی به کد	دارد	دارد
Preview	دارد	دارد
Backend داخلی	Bolt Cloud	Lovable Cloud
Database	Bolt Database یا Supabase	Lovable Cloud یا Supabase
Server Function	دارد	دارد
GitHub	دارد	دارد
اپلیکیشن موبایل	با Expo	تمرکز بیشتر روی Web
فناوری متمایز	WebContainers	تجربه Full-Stack یکپارچه
مناسب برای	Web و Mobile App	Web App، SaaS و Dashboard

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

مقایسه Bolt و Replit Agent

Replit یک محیط توسعه ابری با پشتیبانی از زبان‌ها و Runtimeهای مختلف است. Bolt بیشتر بر ساخت سریع برنامه‌های JavaScript و TypeScript با Agent و WebContainers تمرکز دارد.

Bolt مناسب‌تر است اگر:

Web App می‌سازید.
Preview سریع می‌خواهید.
با JavaScript و TypeScript کار می‌کنید.
ساخت Prompt-first را ترجیح می‌دهید.
به Expo برای Mobile App نیاز دارید.

Replit مناسب‌تر است اگر:

به زبان‌های مختلف نیاز دارید.
Python یا Backend مستقل می‌سازید.
محیط Cloud IDE کامل می‌خواهید.
Script، Bot یا Automation اجرا می‌کنید.
کنترل Runtime برایتان مهم‌تر است.

مقایسه Bolt و Cursor

Cursor یک محیط کدنویسی AI-First برای کار مستقیم توسعه‌دهنده روی Codebase است. Bolt بیشتر برای ایجاد سریع پروژه از روی Prompt در مرورگر طراحی شده است.

Cursor برای توسعه‌دهنده‌ای مناسب است که:

Codebase موجود دارد.
می‌خواهد روی فایل‌ها کنترل مستقیم داشته باشد.
محیط محلی را ترجیح می‌دهد.
پروژه پیچیده و طولانی‌مدت دارد.

Bolt برای کاربری مناسب است که:

می‌خواهد سریع از ایده به Preview برسد.
تنظیم محلی نمی‌خواهد.
MVP یا Web App جدید می‌سازد.
محیط یکپارچه ساخت و انتشار می‌خواهد.

مقایسه Bolt و v0

v0 محصول Vercel است و تمرکز زیادی بر تولید رابط کاربری React و Next.js دارد. Bolt علاوه بر رابط، محیط اجرای پروژه، Backend، Database و ساخت Mobile App را نیز پوشش می‌دهد.

برای Component و UI مبتنی بر Next.js، v0 انتخاب مهمی است. برای ساخت یک محصول کامل با Backend داخلی، Bolt می‌تواند Workflow یکپارچه‌تری ارائه دهد.

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

Bolt می‌تواند پروژه واقعی تولید و منتشر کند، اما Production-ready بودن فقط با کلیک روی Publish ایجاد نمی‌شود.

پروژه Production باید این موارد را داشته باشد:

معماری بازبینی‌شده
Version Control
Test
Authentication صحیح
Authorization
Database Policy
Secret Management
Rate Limit
Backup
Error Handling
Log ایمن
Monitoring
کنترل هزینه
مستندات
برنامه مهاجرت
بررسی Dependencyها
تست روی دستگاه واقعی

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

پروژه در GitHub نگهداری می‌شود.
Secret داخل Repository نیست.
API Key فقط در Server Function استفاده می‌شود.
Base URL از Config خوانده می‌شود.
Model ID از Secret خوانده می‌شود.
ورودی در Backend اعتبارسنجی می‌شود.
طول ورودی محدود است.
Timeout وجود دارد.
Retry محدود و کنترل‌شده است.
Rate Limit فعال است.
کاربر احراز هویت می‌شود.
سهمیه در Backend بررسی می‌شود.
پاسخ مدل اعتبارسنجی می‌شود.
خطاهای داخلی به کاربر نمایش داده نمی‌شوند.
Secret در Log ثبت نمی‌شود.
Policyهای Database بررسی شده‌اند.
Migration قبل از اجرا بازبینی شده است.
Backup Database وجود دارد.
رابط موبایل آزمایش شده است.
Build نهایی موفق است.
HTTPS فعال است.
مصرف API پایش می‌شود.
هزینه Bolt Cloud بررسی می‌شود.
Privacy Policy و Terms آماده هستند.
مسیر Export و مهاجرت مستند شده است.

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

Bolt.new چیست؟

Bolt.new پلتفرم مبتنی بر هوش مصنوعی StackBlitz برای ساخت Website، Web Application و Mobile Application با استفاده از Prompt است.

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

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

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

Bolt طرح رایگان و پولی دارد. محدودیت Token، Agent، Hosting و قابلیت‌های Cloud ممکن است تغییر کند و باید در صفحه رسمی قیمت بررسی شود.

آیا Bolt همان StackBlitz است؟

Bolt محصولی از StackBlitz است، اما این دو یکسان نیستند. StackBlitz محیط توسعه مرورگری است و Bolt تجربه Agentic ساخت نرم‌افزار را ارائه می‌دهد.

WebContainers چیست؟

WebContainers فناوری مبتنی بر WebAssembly برای اجرای Node.js، File System، Terminal و Development Server در مرورگر است.

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

بله. Bolt Cloud می‌تواند Database، Authentication، Server Function، Secrets، Storage و Hosting فراهم کند.

آیا Bolt به Supabase متصل می‌شود؟

بله. امکان استفاده از Supabase به‌جای یا در کنار قابلیت‌های Backend Bolt وجود دارد.

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

بله. اپلیکیشن ساخته‌شده باید از طریق Server Function به https://api.darvareh.ir/v1 متصل شود و API Key در Secrets نگهداری شود.

آیا می‌توان API Key را در Frontend قرار داد؟

خیر. هر Secret موجود در کد Browser قابل‌استخراج است. API Key باید فقط در Backend یا Server Function استفاده شود.

آیا Bolt اپلیکیشن موبایل می‌سازد؟

Bolt با Expo از ساخت پروژه‌های موبایل پشتیبانی می‌کند. Build و انتشار نهایی در فروشگاه‌ها به مراحل و بررسی‌های دیگری نیاز دارد.

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

Lovable برای Web App و SaaS تجربه Full-Stack ساده‌ای دارد. Bolt با WebContainers، Code View و Expo برای توسعه Web و Mobile انعطاف متفاوتی ارائه می‌دهد. انتخاب باید براساس پروژه واقعی باشد.

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

Bolt برای ساخت سریع اپلیکیشن‌های JavaScript و TypeScript مناسب است. Replit از زبان‌ها و Runtimeهای متنوع‌تری پشتیبانی می‌کند و به Cloud IDE سنتی نزدیک‌تر است.

آیا کد Bolt متعلق به کاربر است؟

کد پروژه قابل‌مشاهده و اتصال به GitHub است. بااین‌حال، شرایط مالکیت، طرح حساب و وابستگی‌های سرویس باید در Terms فعلی بررسی شوند.

آیا می‌توان پروژه Bolt را خارج از Bolt منتشر کرد؟

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

آیا Bolt همیشه کد صحیح تولید می‌کند؟

خیر. Agent ممکن است کد اشتباه، Package نامناسب، Policy ناقص یا Migration خطرناک تولید کند. تمام تغییرات مهم باید بررسی و آزمایش شوند.

جمع‌بندی

Bolt.new یکی از پلتفرم‌های مهم ساخت سایت و اپلیکیشن با هوش مصنوعی است. این ابزار با ترکیب AI Agent، WebContainers و Bolt Cloud می‌تواند فرایند ساخت محصول را از Prompt تا Preview و انتشار در یک محیط انجام دهد.

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

ساخت Website و Web App
ساخت Mobile App با Expo
Plan Mode و Build Mode
اجرای پروژه در مرورگر
Bolt Database
Authentication
Server Function
Secrets
File Storage
Hosting
Custom Domain
GitHub
Supabase

روش درست استفاده از Bolt این است که ابتدا پروژه را در Plan Mode طراحی کنید، سپس قابلیت‌ها را مرحله‌ای بسازید و تغییرات را با Git و تست کنترل کنید.

برای اضافه‌کردن هوش مصنوعی به اپلیکیشن ساخته‌شده، می‌توان Server Function را به API درواره متصل کرد. API Key در Secrets قرار می‌گیرد و برنامه از طریق Base URL زیر به مدل انتخاب‌شده درخواست می‌فرستد:

https://api.darvareh.ir/v1

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

مقالات مرتبط

منابع

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

Bolt.new چیست؟

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

Bolt.new چگونه کار می‌کند؟

ارتباط Bolt با StackBlitz چیست؟

WebContainers چیست؟

تفاوت Bolt و StackBlitz چیست؟

Bolt V2 چیست؟

Bolt Agent چیست؟

تفاوت Agent Standard و Max

Plan Mode چیست؟

Build Mode چیست؟

Bolt Cloud چیست؟

Bolt Database چیست؟

جدول tickets

جدول ticket_messages

جدول profiles

Authentication در Bolt

Server Function چیست؟

Secrets در Bolt

اتصال Bolt به Supabase

اتصال Bolt به GitHub

ساخت اپلیکیشن موبایل با Bolt و Expo

آموزش ساخت اپلیکیشن فارسی با Bolt و API درواره

معماری پروژه

Frontend

Server Function

API درواره

مرحله اول: ساخت Plan

مرحله دوم: ساخت نسخه Mock

مرحله سوم: فعال‌کردن Bolt Database و Server Function

مرحله چهارم: تعریف Secretهای درواره

مرحله پنجم: ساخت درخواست به API درواره

مرحله ششم: طراحی Prompt تحلیل

مرحله هفتم: اعتبارسنجی پاسخ مدل

مرحله هشتم: مدیریت خطاها

مرحله نهم: تست برنامه

مرحله دهم: افزودن حساب کاربری و Database

جدول analyses

مرحله یازدهم: کنترل مصرف API

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

مرحله سیزدهم: انتشار

آیا می‌توان API درواره را مدل داخلی Bolt کرد؟

چگونه در Bolt Prompt بهتری بنویسیم؟

هدف

مخاطب

نقش‌ها

صفحات

جریان اصلی

مدل داده

Stack

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

معیار پذیرش

تست

قالب Prompt حرفه‌ای برای Bolt

روش کاهش مصرف Token در Bolt

اشتباه‌های رایج در Bolt

شروع مستقیم با Build Mode

اضافه‌کردن تمام قابلیت‌ها در یک Prompt

قرار دادن Secret در کد

اعتماد کامل به Preview

بازگردانی کد با تصور بازگردانی Database

تغییر Schema بدون بررسی

استفاده از Local Storage برای داده حساس

انتشار Endpoint عمومی بدون سهمیه

نداشتن GitHub

مقایسه Bolt و Lovable

مقایسه Bolt و Replit Agent

مقایسه Bolt و Cursor

مقایسه Bolt و v0

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

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

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

Bolt.new چیست؟

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

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

آیا Bolt همان StackBlitz است؟

WebContainers چیست؟

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

آیا Bolt به Supabase متصل می‌شود؟

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

جدول `tickets`

جدول `ticket_messages`

جدول `profiles`

جدول `analyses`