كيفية استخدام Bolt.new: من الفكرة إلى تطبيق منشور خطوة بخطوة
جولة كاملة في Bolt.new أعيد بناؤها من مشروع حقيقي لمبتدئ — أول أمر، وتحسينات بلقطات الشاشة، والإحصاءات، وتسجيل الدخول بحساب Google عبر Firebase، والنشر. كل خطوة مرفقة بصورة شاشة.
Bolt.new باختصار
- ابدأ بفكرة عامة والوظائف القليلة التي تريدها — «تسجيل جلسات العمل، إضافة المهام، حفظ الجلسات» — دون مواصفات تفصيلية. في نحو دقيقة يقف تطبيق عامل أمامك.
- طوّر بأوامر قصيرة، ميزة واحدة في كل مرة: زر الإنهاء، وتبويب الإحصاءات، والرسم الدائري، والوضع الداكن. إن أخطأ تعديل، أعد صياغته — المحاولة الثانية تنجح غالبًا.
- قد تتعارض التعديلات. حين يتوقف زر عن العمل، صِف الخلل بكلمات بسيطة أو اطلب العودة لآخر نسخة سليمة — معظم المشكلات تُحل بأمر واحد.
- تسجيل الدخول بحساب Google يحتاج Firebase: أنشئ مشروعًا، وفعّل مزود Google، والصق إعدادات firebaseConfig في Bolt، ثم فوّض نطاق تطبيقك المنشور في إعدادات Firebase.
Building an App from Scratch with Bolt.new
الفيديو المصدر من:Brock Mesarich · AI for Non Techies16:02
صور الشاشة مأخوذة من الفيديو المصدر ومُنسبة إليه بروابط بطابع زمني. النص شرح مستقل كتبناه بالاعتماد على النص الكامل للفيديو — والحقائق مطابقة للتسجيل.
هذا الدليل ملخّص مصوّر مستقل لمن يفضّل القراءة. لدعم صاحب المحتوى، شاهد الفيديو الأصلي على قناة AI for Non Techies عبر الرابط أعلاه.
أنشئ تطبيقًا في Bolt.new خطوة بخطوة
- 1
صِف فكرتك في أمر واحد
افتح bolt.new واكتب فكرة عامة إضافة إلى الوظائف التي تريدها — لا مواصفات كاملة. المثال: «أنشئ لي تطبيقًا يسجل جلسات العمل. لنسمه FocusFlow. هدفه تتبع فترات العمل، وإضافة المهام المنجزة خلال الجلسة، وحفظ تلك الجلسات.» الإفراط في التفاصيل أولًا يبطئ البناء الأول.
أول أمر لـ FocusFlow على bolt.new: فكرة عامة ووظائف قليلة.شاهد عند 0:30 - 2
شاهد النسخة الأولى تظهر — ثم صقلها بلقطة شاشة
بعد نحو دقيقة يكون Bolt قد كتب الكود وشغّله: مؤقّت، ونموذج مهام، وإحصاءات. التقط صورة شاشة للجزء الذي لا يعجبك، وأرفقها، وقل ما تريد — «لنجعل هذا الجزء من التطبيق أبسط قليلًا». هذه الملاحظة البصرية أنجح من وصف مواضع البكسل بالكلام.
المعاينة الأولى مع أمر تحسين مرفقٍ فيه لقطة شاشة.شاهد عند 1:40 - 3
أضف تصنيفات للمهام
اطلب عمود تصنيفات مع أمثلة محددة — إدارة، إنشاء محتوى، مالية، بحث، تطوير تطبيقات. سيحوّلها Bolt إلى شبكة أزرار، وتحمل كل مهمة علامة ملوّنة — وهي ما سيجعل الإحصاءات لاحقًا ذات معنى.
شبكة أزرار التصنيفات مع علامات ملوّنة للمهام.شاهد عند 2:30 - 4
اطلب زر إنهاء الجلسة
المؤقّت يعمل لكن لا شيء يُحفظ. الأمر: «أضف إمكانية إنهاء الجلسة.» ينشئ Bolt مكوّنات جديدة (SessionControls وSessionSummary) ويربطها بالتطبيق، وعند الإنهاء تظهر ملخصة: المدة، والمهام المنجزة، والتصنيف الأكثر تكرارًا.
يخطط Bolt وينشئ مكوّنات إنهاء الجلسة.شاهد عند 3:00 - 5
أبقِ الملخصات في اللوحة الرئيسية
افتراضيًا، ينقلك إنهاء الجلسة إلى صفحة منفصلة. إن لم يعجبك المسار فقلها بصراحة: «لا يعجبني نقلي إلى صفحة جديدة عند انتهاء الجلسة — أبقِها في اللوحة الرئيسية.» تظهر بطاقة الملخص الآن داخل الشاشة نفسها.
بطاقة Session Complete تعود إلى اللوحة الرئيسية.شاهد عند 4:00 - 6
أضف تبويب إحصاءات
اطلب تبويب Session Analytics يعرض كل مهمة في كل يوم مع إجماليات اليوم. يضيفه Bolt بجوار Current Session، وكل جلسة منتهية تتفتح لسجل مهامها — هنا تبدأ التصنيفات بأداء دورها.
تبويب Analytics الجديد بجوار Current Session.شاهد عند 4:30 - 7
سجّل الوقت لكل مهمة
الإحصاءات تحتاج مدخلات: اطلب وسم المهام كمنجزة تلقائيًا وإضافة الوقت المستغرق لكل مهمة. يضيف Bolt حقلي الساعات والدقائق (استُبدلا لاحقًا بشريط سحب حتى ساعة) ويمرّر الأرقام إلى الإحصاءات.
حقول الوقت المستغرق تندمج مع نموذج المهام.شاهد عند 6:00 - 8
صوّر الوقت برسوم دائرية
الأمر: «لنضيف إحصاءات برسوم دائرية تبيّن كم من الوقت ذهب لكل شيء.» يأتي أول رسم بحجم سخري — «صغّره قليلًا» تصلحه في المحاولة الثانية. هذه التعديلات الدقيقة هي الملعب الذي يتألق فيه Bolt.
الرسم الدائري اليومي بعد تصحيح الحجم.شاهد عند 6:25 - 9
صحّح التدهورات بلغة بسيطة
في منتصف البناء تتصادم التعديلات: أزرار تتوقف عن العمل، أو تأثير مرح لأثر المؤشر يفسد التخطيط. صِف الخلل بكلمات بسيطة، واطلب حذف ما لم يعجبك، أو استخدم التراجع. قوائم الإصلاح من Bolt نفسه — ستة بنود هنا — تعيد كل شيء عادةً في جولة واحدة.
قائمة من ستة إصلاحات تعيد المؤقت وتزيل تأثير التوهج.شاهد عند 9:30 - 10
أضف تسجيل الدخول بحساب Google
ليصير التطبيق منتجًا حقيقيًا تحتاج إلى حسابات. الأمر: «أضف إمكانية تسجيل الدخول عبر Google.» يرد Bolt ببطاقة عمل — تحديث package.json، وتثبيت التبعيات، وإنشاء سياق المصادقة — إضافة إلى تعليمات Firebase خطوة بخطوة تنفذها خارج Bolt.
بطاقة عمل Add Google Authentication في Bolt.شاهد عند 11:00 - 11
أنشئ مشروع Firebase
اتبع رابط Bolt إلى وحدة تحكم Firebase، وأنشئ مشروعًا جديدًا (سمِّه واختر حسابًا) ثم تابع إلى وحدة التحكم عند جهوزه. خطة Spark المجانية تكفي لهذا الدليل.
مشروع Firebase جاهز — تابع إلى وحدة التحكم.شاهد عند 11:30 - 12
فعّل Google في طرق تسجيل الدخول
في وحدة التحكم: Build ثم Authentication ثم Sign-in method. فعّل مزود Google، وفعّل أيضًا البريد وكلمة المرور ليتمكن المستخدمون من التسجيل بالطريقتين. هذه هي الإعدادات التي طلبتها قائمة Bolt تحديدًا.
Google أصبح مزود دخول مفعّلًا.شاهد عند 12:00 - 13
الصق إعدادات firebaseConfig في Bolt
في Project settings ثم Your apps، سجّل تطبيق ويب وانسخ كتلة firebaseConfig إلى المكان الذي يشير إليه Bolt — ملف الإعدادات الذي أنشأته قائمته. قل لـ Bolt «أضفت إعدادات Firebase» فيصل كل شيء ويظهر زر تسجيل يعمل.
كتلة firebaseConfig الجاهزة للّصق في ملف إعدادات Bolt.شاهد عند 12:30 - 14
فوّض نطاق تطبيقك المنشور
إلى أن يثق Firebase بعناوينك، يفشل الدخول عبر Google برسالة «تم حظر النافذة المنبثقة». انشر التطبيق من Bolt، ثم افتح Firebase ثم Authentication ثم Settings ثم Authorized domains، وأضف localhost ونطاق بيئة التطوير ورابط النسخة المنشورة (اسأل Bolt وسيمنحك النطاق الدقيق).
النطاقات المفوَّضة في إعدادات Firebase.شاهد عند 14:00 - 15
انشر وسجّل الدخول
افتح رابط النسخة المنشورة، واضغط Sign in وتابع بحساب Google — تعمل النافذة المنبثقة، ويستقر صورتك الرمزية أعلى اليمين، ويعمل تسجيل الخروج أيضًا. أمامك تطبيق منشور بحسابات حقيقية، بُني دون كتابة سطر برمجي واحد.
تم تسجيل الدخول على تطبيق FocusFlow المنشور.شاهد عند 15:00