كيفية استخدام Bolt.new لنمذجة ونشر تطبيق ويب
في أقل من ساعة

هناك نوع محدد من الإحباط يأتي من وجود فكرة واضحة لتطبيق ويب وعدم وجود طريقة سريعة لتحويلها إلى شيء حقيقي. يستغرق توظيف مطور أسابيع ويكلف أموالاً كبيرة قبل أن تعرف ما إذا كانت الفكرة ناجحة أم لا. يستغرق تعلم البرمجة أشهرًا قبل أن تتمكن من بناء أي شيء ذي معنى. تنتج أدوات إنشاء السحب والإفلات بدون تعليمات برمجية نتائج تشبه أدوات إنشاء السحب والإفلات بدون تعليمات برمجية.

Bolt.new يقع في فئة مختلفة تمامًا. إنه منشئ تطبيقات مدعوم بالذكاء الاصطناعي يقوم بإنشاء مواقع ويب كاملة وتطبيقات ويب وتطبيقات جوال من موجه واحد - أنت تصف ما تريده بلغة واضحة، ويقوم Bolt بإنشاء تطبيق متكامل وواجهة أمامية وخلفية وكل شيء بينهما.

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

ما هو Bolt.new فعليًا في عام 2026؟

قبل الدخول في الخطوات، من المفيد أن تفهم ما الذي تعمل به.

Bolt.new عبارة عن منصة تطوير للذكاء الاصطناعي مبنية على تقنية WebContainers الخاصة بـ StackBlitz - وهي بيئة تطوير متكاملة قائمة على المتصفح تقوم بتشغيل بيئة Node.js حقيقية بالكامل في متصفحك. فهو يدمج وكلاء الذكاء الاصطناعي مع بيئة التشغيل المباشرة للتعامل مع كل شيء بدءًا من واجهة المستخدم الأمامية وحتى منطق الواجهة الخلفية وإعداد قاعدة البيانات، كما أنه مفتوح المصدر.

في عام 2026، سيتم تشغيل Bolt.new على Claude Opus 4.6 مع عمق تفكير قابل للتعديل، ويدعم استيراد Figma - إسقاط التصميمات مباشرة في الدردشة لبناء مرجع مرئي في الوقت الفعلي - ويتضمن تحرير الصور بالذكاء الاصطناعي مباشرة داخل واجهة الدردشة.

يؤدي الجمع بين الإنشاء الفوري وتكامل Supabase والنشر الفوري إلى إنشاء سير عمل يضغط بشكل حقيقي دورة البناء من أيام إلى ساعات - أو حتى دقائق للمشاريع الأبسط.

ما يجعل Bolt مختلفًا عن مولد الأكواد البسيط هو البيئة الحية. أنت لا تحصل على التعليمات البرمجية فحسب، بل تحصل على تطبيق قيد التشغيل يمكنك التفاعل معه واختباره وتعديله في الوقت الفعلي، كل ذلك داخل متصفحك.

فهم نظام الرمز المميز قبل البدء

يستخدم بولت نموذج تسعير قائم على الرمز المميز. تتضمن الخطة المجانية مليون رمز شهريًا بحد أقصى يومي يبلغ 150.000 رمز. تكاليف الخطة الاحترافية $25 per month with 10 million tokens, token rollover, custom domains, and no Bolt branding. The Teams plan is $30 لكل عضو شهريا.

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

يقدم Bolt ثلاثة أوضاع لإدارة استخدام الرمز المميز: يقوم وضع البناء بتحديث التعليمات البرمجية مع كل مطالبة ويستخدم معظم الرموز المميزة. يناقش وضع الخطة النهج دون تغيير التعليمات البرمجية ويستخدم عددًا أقل من الرموز المميزة. وضع المناقشة هو محادثة خالصة بدون أي تغييرات في التعليمات البرمجية ويستخدم أقل عدد من الرموز المميزة.

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

يتم ترحيل الرموز المميزة للخطة المدفوعة لمدة شهر إضافي واحد، مما يجعلها صالحة لمدة تصل إلى شهرين إجمالاً.

بالنسبة للمشروع الأول الذي يستغرق أقل من ساعة، تكون الخطة المجانية كافية لنموذج أولي بسيط إلى متوسط ​​التعقيد.

الخطوة 1: انتقل إلى Bolt.new وقم بتسجيل الدخول

افتح المتصفح الخاص بك وانتقل إلى bolt.new. ستصل مباشرة إلى الواجهة السريعة - دون الحاجة إلى تثبيت أو إعداد أو بيئة محلية.

انقر فوق تسجيل الدخول في الزاوية اليمنى العليا. يمكنك تسجيل الدخول باستخدام GitHub، أو Google، أو حساب بريد إلكتروني. يوصى باستخدام GitHub إذا كنت تخطط لتصدير التعليمات البرمجية الخاصة بك لاحقًا - فهو يجعل الاتصال بين Bolt ومستودعاتك سلسًا.

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

الخطوة 2: تحديد التطبيق الخاص بك قبل المطالبة

العامل الوحيد الأكثر أهمية في الحصول على مخرجات جيدة من Bolt.new هو جودة الموجه الأولي الخاص بك. المطالبة الغامضة تنتج نتائج غامضة. إن المطالبة المحددة والمفصلة تنتج شيئًا قريبًا مما تحتاجه بالفعل.

قبل كتابة أي شيء في Bolt، اقضِ خمس دقائق في الإجابة على هذه الأسئلة بوضوح:

• ماذا يفعل التطبيق؟ (جملة واحدة)
• لمن هو؟
• ما هي الميزات الأساسية الثلاث إلى الخمس التي يجب أن تتوفر فيها؟
• كيف ينبغي أن تبدو؟ (الحد الأدنى، الجريء، المؤسسي، الودود؟)
• هل يحتاج إلى قاعدة بيانات أو حسابات مستخدمين؟
• ما الصفحات أو الشاشات التي يحتاجها؟

اكتب إجاباتك. ستقوم بتحويل هذه إلى مطالبتك الأولى.

مثال على المطالبة الضعيفة:

Make me a booking app

مثال على المطالبة القوية:

Build a service booking web app for a car detailing business in Dubai.

The app needs:
- A homepage with hero section, services list, and pricing
- A booking form where customers select a service, date, time, 
  and enter their contact details
- A confirmation page after booking is submitted
- An admin view showing all bookings in a simple table

Design: Clean, modern, dark navy and white color scheme.
Tech: React with Tailwind CSS. Store bookings in a Supabase database.

تمنح المطالبة الثانية الذكاء الاصطناعي سياقًا كافيًا لاتخاذ قرارات جيدة دون مطالبتك بتحديد كل التفاصيل الصغيرة. هذا التوازن - النية الواضحة، والقيود الرئيسية، ومساحة للافتراضات المعقولة - هو ما ينتج أفضل مخرجات بولت.

الخطوة 3: اكتب موجهك الأول ودع بولت يبني

اكتب المطالبة المعدة في حقل الإدخال الرئيسي على صفحة Bolt.new الرئيسية واضغط على Enter.

شاهد ما سيحدث بعد ذلك. سوف بولت:

1. قم بتحليل الموجه الخاص بك وتخطيط هيكل التطبيق
2. قم بإنشاء جميع الملفات الضرورية - المكونات والصفحات ومسارات واجهة برمجة التطبيقات ومخططات قاعدة البيانات
3. تثبيت التبعيات تلقائيًا في بيئة المتصفح
4. قم بتشغيل التطبيق وستظهر لك معاينة مباشرة على الجانب الأيمن من الشاشة

يقبل Bolt المدخلات كنصوص وصور وملفات Figma ومستودعات GitHub، ثم يدعم تطبيق ويب متكامل في الوقت الفعلي. يحدث التخصيص عبر ثلاث طبقات: التغييرات المستندة إلى المطالبة، ومحرر المعاينة المرئية، والوصول المباشر إلى التعليمات البرمجية داخل IDE للمتصفح.

بالنسبة لتطبيق متوسط ​​التعقيد مثل مثال الحجز أعلاه، يستغرق هذا الجيل الأولي عادةً ما بين 60 و120 ثانية. عند الانتهاء، سيكون لديك تطبيق تفاعلي فعال قيد التشغيل في لوحة المعاينة.

التفاعل معها على الفور. انقر من خلال التدفقات. جرب النموذج. تحقق من كل صفحة. لاحظ ما يصلح وما يحتاج إلى تعديل - ستتناول هذه الأمور في الخطوة التالية.

الخطوة 4: التحسين باستخدام مطالبات المتابعة

نادرًا ما يكون جيلك الأول هو المنتج النهائي، ولا ينبغي أن يكون كذلك. فكر في الأمر كمسودة أولى سريعة جدًا. عملية التحسين هي المكان الذي تتجمع فيه ميزة السرعة الحقيقية لبولت.

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

التغييرات الهيكلية أولاً:

The booking form needs a step added — after the customer enters 
their contact details, show a summary of their booking before 
they confirm. Add a Back button on the confirmation step.

تحسينات التصميم التالية:

The homepage hero section needs more visual impact. Make the 
headline larger, add a subtle gradient background, and add 
a row of trust signals below the CTA — something like 
"500+ happy customers", "Same day available", "Rated 5 stars".

إضافات الوظائف بعد:

When a booking is submitted, send a confirmation email to the 
customer using Resend. The email should include their booking 
details and a reference number. Also send a notification email 
to admin@[yourdomain].com with the same details.

اعمل من خلال قائمة التحسينات الخاصة بك بشكل منهجي. بعد كل تغيير، تفاعل مع المعاينة للتحقق من أنها تعمل قبل الانتقال إلى المعاينة التالية.

الخطوة 5: قم بتوصيل قاعدة البيانات الخاصة بك مع Supabase

إذا كان تطبيقك يحتاج إلى تخزين البيانات - الحجوزات، وحسابات المستخدمين، وعمليات إرسال النماذج، وقوائم المنتجات - فستحتاج إلى توصيله بقاعدة بيانات حقيقية بدلاً من الاعتماد على التخزين في الذاكرة الذي تتم إعادة تعيينه عند انتهاء الجلسة.

يتضمن Bolt إدارة قاعدة بيانات مدمجة مباشرة داخل Bolt Cloud، ويدعم أيضًا الاتصال بـ Supabase للحصول على خيارات تكوين أكثر ثراءً وتخزينًا قابلاً للتطوير ومنطقًا خلفيًا مخصصًا.

إعداد Supabase:

1. انتقل إلى supabase.com وقم بإنشاء حساب مجاني
2. أنشئ مشروعًا جديدًا - اختر اسمًا، وقم بتعيين كلمة مرور لقاعدة البيانات، ثم حدد المنطقة الأقرب إلى المستخدمين لديك (بالنسبة للشركات في الإمارات العربية المتحدة، اختر فرانكفورت أو مومباي كأقرب منطقة متاحة)
3. بمجرد إنشاء مشروعك، انتقل إلى الإعدادات > واجهة برمجة التطبيقات وانسخ عنوان URL لمشروعك والمفتاح المجهول/العام
4. عد إلى Bolt، افتح الدردشة واكتب:

Connect this app to Supabase. Here are my credentials:
Project URL: [your URL]
Anon key: [your key]

Create the necessary tables for storing bookings with fields for:
customer name, email, phone, service selected, date, time, 
and a status field (pending/confirmed/completed).
Set up Row Level Security appropriately.

سيقوم Bolt بتحديث تطبيقك لاستخدام Supabase لتخزين البيانات بالكامل، وإنشاء مخطط قاعدة البيانات، وتكوين الاتصال. اختبر نموذج الحجز مرة أخرى - يجب أن تستمر عمليات الإرسال الآن في لوحة تحكم Supabase الخاصة بك ضمن محرر الجدول.

الخطوة 6: الاستيراد من Figma (إذا كان لديك تصميمات)

إحدى ميزات Bolt الأكثر فائدة لعام 2026 هي استيراد Figma - يمكنك إسقاط تصميمات Figma مباشرة في الدردشة لإنشاء مرجع مرئي في الوقت الفعلي.

إذا قمت أنت أو مصممك بإنشاء نماذج بالحجم الطبيعي في Figma، فإن هذه الميزة تسد الفجوة بين هدف التصميم والمخرجات المضمنة بشكل كبير.

كيفية استخدام استيراد Figma:

1. في Figma، حدد الإطار أو الصفحة التي تريد استيرادها
2. استخدم ملف > مشاركة وانسخ رابط المشاركة، أو قم بالتصدير كصورة
3. في دردشة Bolt، انقر فوق أيقونة المرفق والصق رابط Figma الخاص بك أو قم بتحميل الصورة المصدرة
4. يكتب:

Here is the design for the homepage. Rebuild the current 
homepage to match this design as closely as possible — 
maintain the existing functionality but use this visual 
layout, typography, and color choices.

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

الخطوة 7: اختبار شامل قبل النشر

قبل نشر أي شيء بشكل عام، اقضِ عشر دقائق في اختبار كل تدفق في لوحة المعاينة.

قائمة التحقق من الاختبار:

• هل يتم تحميل كل صفحة بدون أخطاء؟
• قم بالتحقق من صحة جميع النماذج بشكل صحيح - حاول الإرسال باستخدام حقول فارغة وعناوين بريد إلكتروني غير صالحة ومدخلات غير عادية
• هل يتم حفظ البيانات في قاعدة البيانات بشكل صحيح - تحقق من لوحة تحكم Supabase للتأكيد
• هل يبدو التطبيق صحيحًا على الهاتف المحمول - استخدم محاكاة جهاز المتصفح الخاص بك (F12 > تبديل شريط أدوات الجهاز) للتحقق من أحجام iPhone وAndroid
• هل يتم إرسال رسائل التأكيد الإلكترونية بشكل صحيح - تحقق من صندوق البريد الوارد ومجلد البريد العشوائي
• هل يعرض عرض المسؤول البيانات بشكل صحيح؟

لاحظ أي مشكلات وقم بمعالجتها من خلال مطالبات المتابعة المستهدفة قبل الانتقال إلى النشر.

الخطوة 8: نشر تطبيقك مباشرة

تتضمن جميع خطط Bolt المدفوعة نطاقات مخصصة واستضافة مدمجة من خلال Bolt Cloud. يتم النشر بنقرة واحدة.

النشر على خطة مدفوعة: انقر فوق الزر نشر في الجزء العلوي الأيمن من واجهة Bolt. سيتم تعيين تطبيقك أ .bolt.app URL على الفور. لتوصيل المجال الخاص بك، انتقل إلى إعدادات مشروعك، وأضف المجال الخاص بك، وقم بتحديث سجلات DNS الخاصة بك للإشارة إلى خوادم Bolt.

النشر على Netlify (خيار مجاني): إذا كنت مشتركًا في خطة Bolt المجانية وتريد عنوان URL عامًا، فيمكنك النشر على Netlify مباشرة من Bolt:

1. انقر فوق خيار مشاركة أو تصدير في بولت
2. اختر النشر في Netlify
3. قم بتخويل Netlify باستخدام حساب GitHub الخاص بك
4. يتم نشر تطبيقك في أقل من دقيقة ويتلقى رسالة [project-name].netlify.app عنوان URL

لتوصيل مجال مخصص على Netlify، انتقل إلى إعدادات موقعك في لوحة تحكم Netlify، وأضف المجال الخاص بك ضمن إدارة المجال، وقم بتحديث سجلات DNS الخاصة بك وفقًا لذلك.

الخطوة 9: التصدير إلى المؤشر لتحسين الإنتاج

لتطوير الإنتاج على المدى الطويل، قم بإقران Bolt مع IDE المناسب لمرحلة الصيانة. تستخدم العديد من الفرق Bolt للنماذج الأولية السريعة والبناء الأولي، ثم التصدير إلى Cursor لتحسين التعليمات البرمجية التفصيلية وتحسين الأداء والتطوير المستمر.

تصدير مشروع بولت الخاص بك:

1. في Bolt، انقر على أيقونة القائمة وحدد Download Project أو Export to GitHub
2. في حالة التصدير إلى GitHub، سيتم إنشاء مستودع جديد في حسابك المتصل يضم جميع ملفات مشروعك
3. افتح المؤشر، وقم باستنساخ المستودع، واستمر في التطوير باستخدام إمكانات IDE الكاملة الخاصة بـ Cursor

إن سير عمل التسليم هذا - Bolt للسرعة، والمؤشر للعمق - هو الطريقة التي تحصل بها الفرق المحترفة على أفضل ما في كلتا الأداتين. يزيل بولت الحمل الزائد لإعداد المشروع والسقالات الأولية. يتعامل المؤشر مع العمل التفصيلي بجودة الإنتاج الذي تتطلبه التطبيقات المعقدة.

ما هو الأفضل بالنسبة لـ Bolt.new - وأين حدوده

Bolt.new يكون أقوى عندما تكون السرعة أكثر أهمية من الكمال. إنه يتألق في مرحلة البناء المبكرة، والتجريب السريع، والمواقف التي تحتاج فيها إلى منتج يعمل بسرعة ويكون التحسين بمثابة فكرة لاحقة.

استخدم بولت من أجل:

• التحقق من صحة الفكرة قبل الاستثمار في التطوير الكامل
• بناء الأدوات الداخلية ولوحات المعلومات بسرعة
• إنشاء نماذج أولية للعميل للحصول على التعليقات قبل بدء البناء الحقيقي
• تدوير MVPs للاختبار مع مستخدمين حقيقيين
• بناء تطبيقات بسيطة إلى متوسطة التعقيد من النهاية إلى النهاية

كن واقعيًا بشأن حدوده من أجل:

• تطبيقات واسعة النطاق مع منطق أعمال معقد
• التطبيقات التي تتطلب بنية خلفية مخصصة ثقيلة
• المشاريع التي يحتاج فيها كل سطر من التعليمات البرمجية إلى المراجعة والفهم
• أنظمة الإنتاج طويلة المدى حيث تكون قابلية الصيانة أمرًا بالغ الأهمية

نقاط الضعف يمكن التنبؤ بها لأي منشئ الذكاء الاصطناعي في عام 2026: المنطق المعقد لا يزال يحتاج إلى إنسان، والطبقة المجانية تدفعك إلى الدفع بسرعة، والتعليمات البرمجية التي يتم إنشاؤها ليست دائمًا ذات جودة إنتاجية.

الخلاصة الصادقة

الساعة هي تقدير حقيقي لتطبيق ويب بسيط إلى متوسط ​​التعقيد باستخدام Bolt.new - إذا أتيت بفكرة واضحة، وموجهة أولية جيدة البناء، ونهج منظم للتحسين. ستستغرق التطبيقات الأكثر تعقيدًا وقتًا أطول، لكن ميزة السرعة مقارنة بالتطوير التقليدي تظل كبيرة بغض النظر عن النطاق.

إن الأداة التي كانت تتطلب أسابيع من التطوير، وآلاف الدراهم كرسوم للمطورين، وجهدًا طويلًا للوصول إلى الهدف الصحيح، أصبحت الآن شيئًا يمكنك وضع نموذج أولي له، واختباره، وتحسينه، ونشره في فترة ما بعد الظهر. يؤدي ذلك إلى تغيير اقتصاديات بناء المنتجات الرقمية بطرق مفيدة - خاصة بالنسبة للشركات في دولة الإمارات العربية المتحدة التي ترغب في التحقق من صحة الأفكار بسرعة قبل الالتزام ببناء الإنتاج الكامل.

الفكرة لك. بولت يتولى الباقي.