استخدام Bolt.New و Logto لبناء تدفقات تسجيل الدخول المخصصة بسرعة

ما هو Bolt.New#

Bolt.new هي أداة قائمة على المتصفح لتوليد وتشغيل تطبيقات الويب كاملة المكدس على الفور. تم بناؤها على تقنية WebContainer من StackBlitz، وتوفر للمطورين حزمة نظيفة ومهيأة مسبقًا تشمل Next.js (App Router)، وTailwind CSS، وSupabase، وPrisma، وShadCN UI. يعمل كل شيء محليًا في المتصفح، بدون تثبيتات، ولا خطوات بناء سحابية، ولا حاجة للتسجيل.

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

ما الذي يجعل Bolt.new مختلفًا عن Cursor أو Lovable؟#

بينما تخدم أدوات مثل Cursor وLovable كطيارين مساعدين للذكاء الاصطناعي داخل محرر الشيفرة الخاص بك، يركز Bolt.new على شيء مختلف تمامًا: إنشاء وتشغيل التطبيقات كاملة المكدس على الفور.

• Cursor يُعزز سير العمل في VS Code بالذكاء الاصطناعي، ويساعدك على تعديل أو توليد الشيفرة في بيئتك الحالية.
• Bolt.new ينشئ تطبيقًا يعمل من الصفر بناءً على مطلب أو قالب، ويشغله مباشرة داخل المتصفح باستخدام WebContainers.

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

لمن صُمّم Bolt.new؟#

Bolt.new مصمم للمطورين الذين غالبًا ما يبدأون من الصفر مثل:

• صانعي المشاريع المستقلة الذين يتحققون من أفكار المنتجات
• مطوري الذكاء الاصطناعي الذين يختبرون سير العمل أو يدمجون النماذج
• المؤسسين الذين يصممون النماذج الأولية للمنتجات الحد الأدنى (MVP)
• المهندسين الذين ينشئون أدوات داخلية أو عروض توضيحية

عادة ما يكون هؤلاء المستخدمون مرتاحين مع تكنولوجيا الويب الحديثة ويفضلون الأدوات السريعة والنظيفة وغير المتحيزة. Bolt.new ليس منشئ مواقع مرئية أو منصة تعليمية قائمة على الدروس. يفترض أنك تمتلك معرفة عملية بـ React وتطوير التطبيقات كاملة المكدس، لكنه يزيل عناء الإعداد.

تاريخ وتطور Bolt.new#

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

في عام 2023، واجهت StackBlitz نقطة تحول. تباطأ النمو، وبدأ الفريق في استكشاف اتجاه أكثر جذرية: دمج WebContainers مع الذكاء الاصطناعي لتوليد تطبيقات عملية بالكامل من مطالبات اللغة الطبيعية.

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

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

الدليل: استخدام Logto و Bolt.New لإضافة تجربة تسجيل دخول مخصصة#

تسجيل تطبيق في وحدة تحكم Logto#

في هذا المثال، استخدمت Bolt.new لإنشاء تطبيق CMS. تخطيت مرحلة المطالبة وذهبت مباشرة للهدف: طلبت من الوكيل بناء CMS باستخدام Logto كمزود المصادقة.

وفقًا للتعليمات، كان عليّ تزويد قطعتين رئيسيتين من المعلومات:

1. نقطة نهاية Logto
2. معرّف التطبيق (App ID)

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

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

ثم قمت بإعداد عناوين URI لإعادة التوجيه وعناوين URI لإعادة التوجيه بعد تسجيل الخروج.

تفصيل مهم: بما أن Bolt.new يعمل في المتصفح وليس IDE المحلي، لا يمكنك استخدام http://localhost:3000/ كعنوان URI لإعادة التوجيه. بدلاً من ذلك، تأكد من استخدام عنوان المعاينة الذي يظهر في علامة تبويب Bolt.new في المتصفح.

تخصيص تجربة تسجيل الدخول المسبقة البناء من Logto#

يوفر Logto تدفق تسجيل دخول مسبق البناء قابل للتخصيص من خلال وحدة التحكم. للبدء، انتقل إلى تجربة تسجيل الدخول > تسجيل الدخول والتسجيل، ثم اختر طرق تسجيل الدخول المفضلة لديك (مثل البريد الإلكتروني، اسم المستخدم، رقم الهاتف، أو تسجيل الدخول الاجتماعي).

بمجرد الإعداد، عند تفعيل تدفق تسجيل الدخول سيتم إعادة توجيه المستخدمين إلى صفحة تسجيل الدخول المستضافة من Logto مع الخيارات التي حددتها. تتولى Logto كامل عملية المصادقة، ويُعاد المستخدمون إلى تطبيقك بعد تسجيل الدخول.

إنشاء لوحة تسجيل دخول عائمة فوق منتجك#

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

لذا أستخدم فقط هذا الأمر:

أريد أن تبدو صفحة تسجيل الدخول أجمل، مجرد لوحة عائمة في الزاوية اليمنى السفلى. مع زرين: واحد لـ“تسجيل الدخول” وآخر لـ“إنشاء حساب”. كل زر يجب أن يعيد التوجيه إلى شاشة مختلفة، تدار بواسطة Logto. باستخدام تجربة الشاشة الأولى الموثقة في Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

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

إضافة تدفقات تسجيل الدخول الاجتماعي#

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

التحديث القادم لـLogto سيدعم دمج المصادقة المدعومة بالذكاء الاصطناعي#

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

مع هذا الإعداد، ستكون قادرًا على:

1. إنشاء وإدارة المستخدمين
2. عرض وتصفية السجلات
3. إعداد تدفقات التسجيل وتسجيل الدخول
4. تحديد موارد الـAPI والصلاحيات والأدوار
5. إدارة التطبيقات وإعدادات الوصول
6. والمزيد

من خلال الجمع بين الأدوات المحلية والذكاء الاصطناعي وبنية Logto التحتية، لن تكون المصادقة خطوة دمج مؤلمة بعد الآن، بل ستصبح جزءًا من سير عمل تطويرك الطبيعي.