شرح Bolt بالعربي: بناء تطبيق ويب في المتصفح

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

Bolt (من bolt.new) أداة بناء بالوصف تعمل كلها في المتصفح: محادثة على جهة، وملفات المشروع ومعاينته على الجهة الأخرى. تكتب ما تريد، فيُنشئ الملفات ويثبّت الحزم ويشغّل المعاينة دون أن تُعدّ شيئًا على جهازك.

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

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

قبل أن تبدأ

ما هو الرمز؟ وحدة صغيرة من النص يقرؤها النموذج أو يكتبها. كلما كبر مشروعك زاد ما يقرؤه النموذج في كل طلب، فيرتفع استهلاك الرسالة الواحدة مع نمو المشروع. لذلك الحد اليومي في المجانية يُشعَر به في المشاريع المتوسطة.

جهّز: قائمة بالصفحات، وصور منتجاتك بأحجام صغيرة (الرفع محدود بـ 10 ميجابايت في المجانية)، وحساب GitHub.

الخطوات

المثال: كتالوج لمتجر عبايات في الرياض، يعرض التشكيلات بالمقاسات والألوان، ويستقبل طلبات الحجز قبل الدفع.

1. 1

   ابدأ بوصف قصير ومحدد

   اذكر الصفحات الثلاث: الرئيسية، التشكيلة، صفحة القطعة. وحدد البيانات: الاسم، السعر بالريال، المقاسات من 52 إلى 60، الألوان.

2. 2

   اطلب الهيكل قبل الجمال

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

3. 3

   فعّل قاعدة البيانات

   اطلب حفظ القطع في قاعدة Bolt Cloud بدل بيانات ثابتة في الكود، حتى تضيف صاحبة المتجر قطعًا جديدة دون رسالة للأداة.

4. 4

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

   اطلب دخولًا بالبريد أو بحساب Google لصاحبة المتجر فقط، مع صفحة لإضافة قطعة ورفع صورتها.

5. 5

   راجع الملفات بنفسك

   افتح ملف المكوّن الرئيسي وتأكد أن الأسعار والمقاسات تُقرأ من قاعدة البيانات. إن رأيت قيمًا مكتوبة يدويًا فاطلب نقلها.

6. 6

   اربط GitHub

   المزامنة باتجاهين: تستورد مستودعًا أو تُنشئ واحدًا، مع فروع وحفظ تلقائي للتعديلات. ويمكنك أيضًا تنزيل المشروع كملف zip.

7. 7

   انشر على bolt.host

   النشر متاح لكل المستخدمين على نطاق فرعي من bolt.host مع SSL، وفي المجانية يظهر شعار Bolt.

8. 8

   اربط نطاقك من Pro

   اشترِ نطاقًا عبر Bolt أو اربط نطاقًا تملكه، مثل abaya-riyadh.sa. وهناك أيضًا تكامل مع Netlify إن أردت النشر هناك.

نصائح للعربي

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

• اكتب أسماء الألوان بالعربية في البيانات نفسها («كحلي»، «زيتي»، «أسود ملكي») لا في الواجهة فقط.
• المقاس «54» داخل جملة عربية قد يقفز إلى طرف السطر، فاطلب عزله بوسم bdi.
• اطلب أن تكون شبكة المنتجات من اليمين لليسار، وأن يبدأ الترتيب من أعلى اليمين.
• الخط: Almarai أو Tajawal يناسبان واجهة متجر، مع خط لاتيني متناسق للأرقام.

للتفصيل في الخطوط العربية داخل أدوات البناء راجع الخطوط العربية في أدوات الذكاء الاصطناعي.

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

• الحد اليومي في المجانية: 300 ألف رمز يوميًا من مليون شهريًا، ومشروع كبير قد يصل الحد اليومي في جلسة واحدة.
• الشعار والنطاق: المجانية تنشر بشعار Bolt وعلى bolt.host فقط، والنطاق الخاص وإزالة الشعار من Pro.
• حجم الرفع: 10 ميجابايت في المجانية، فاضغط صورك قبل الرفع.
• Supabase اختياري للمدفوعة: في المجانية تعمل على Bolt Cloud، واختيار Supabase متاح للمشاريع الجديدة في Pro و Teams.
• الرموز في Teams لا تُشترك: لكل عضو رصيده، فخطط توزيع العمل على هذا الأساس.

وللإنصاف: Bolt يمنحك كشفًا كاملًا للملفات من أول دقيقة، وتصديرًا مرنًا عبر GitHub و zip، وقواعد بيانات غير محدودة حتى في المجانية.

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

• إذا أردت تعديل اسم قطعة أو لون زر بالنقر عليه في المعاينة، دون إرسال طلب واستهلاك رصيد على تعديل صغير.
• إذا أردت رؤية جداول قاعدة البيانات وسجلاتها (SQLite أو PostgreSQL أو MySQL) داخل المنصة نفسها، لتتأكد أن الطلبات تُحفظ فعلًا.
• إذا أردت أن تبقى مالك الكود: تدفعه إلى مستودع GitHub الخاص بك في أي وقت، وتكمل عليه أينما شئت.

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