إطلاق تطبيق ويب خاص بقوائم المهام باستخدام الذكاء الاصطناعي

1- مقدمة

نظرة عامة

أين يبدأ تصميم المحتوى باستخدام الذكاء الاصطناعي اليوم؟ بالنسبة إلى معظمنا، يبدأ الأمر بطلب بحث بسيط أو نموذج أوّلي. يوفّر Google AI Studio وضع التصميم الفعّال (يُشار إليه غالبًا باسم "ترميز الحالة المزاجية") الذي يتيح لك تصميم تطبيقات ويب كاملة المكدس واختبارها وإنشاؤها باستخدام ميزة إنشاء الرموز البرمجية المستندة إلى نماذج Gemini.

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيقًا تعاونيًا للمهام باستخدام قاعدة بيانات Firestore للتخزين المستمر ومصادقة Firebase لتسجيل دخول المستخدمين. سيضبط وكيل AI Studio جميع خدمات الخلفية ويكتب رمز التفاعل مع الواجهة الأمامية وقاعدة البيانات. بعد تحسين التطبيق، ستنشره مباشرةً على Cloud Run بنقرة واحدة.

الإجراءات التي ستنفذّها

  • اطلب من Google AI Studio إنشاء نموذج أوّلي لتطبيق ويب تعاوني لقائمة المهام.
  • اضبط عملية التكامل مع Firebase وفعِّلها لتوفير قاعدة بيانات Firestore وإعداد ميزة "تسجيل الدخول باستخدام حساب Google".
  • اختبِر التطبيق في وضع الحماية التفاعلي للمعاينة.
  • انشر التطبيق على Cloud Run مباشرةً من واجهة مستخدم Google AI Studio.

أهداف الدورة التعليمية

  • كيفية استخدام "وضع التصميم" في Google AI Studio لإنشاء نموذج أوّلي بسرعة لخدمة كاملة المكدس باستخدام اللغة الطبيعية
  • كيفية ضبط عمليات التكامل مع Firebase Firestore و"مصادقة Firebase" تلقائيًا في Google AI Studio
  • كيفية نشر تطبيق AI Studio كحاوية بلا خادم على Cloud Run
  • كيفية فحص سجلات قاعدة البيانات وحالة الأمان داخل "وحدة تحكّم Firebase"

2. إعداد المشروع

قبل تشغيل AI Studio، تحقَّق من حالة حسابك والمتطلبات الأساسية.

حساب Google ومعلومات الطبقة

  1. إذا لم يكن لديك حساب حاليًا، يمكنك إنشاء حساب على Google.
    • ملاحظة: استخدِم حسابًا شخصيًا على Google في هذا المختبر إن أمكن. قد تفرض الحسابات الجماعية أو حسابات المؤسسات أو الحسابات التعليمية سياسات Workspace التي توقف الميزات التجريبية أو عمليات التكامل مع السحابة الإلكترونية.
  2. راجِع تفاصيل الفوترة لعمليات النشر:
    • طبقة Google Cloud Starter: تتيح نشر ما يصل إلى تطبيقَين كاملَي المكدس في منطقة محدّدة بدون أي تكلفة، بدون إنشاء حساب فوترة كامل على Google Cloud.
    • عملية النشر العادية: تتصل بمشروع على السحابة الإلكترونية حالي مدفوع على Google Cloud وتوسّع حدود التخزين وموارد وحدة المعالجة المركزية وواجهات برمجة التطبيقات.

3. إنشاء تطبيق للمهام في "وضع التصميم" في AI Studio

لننشئ هيكل التطبيق ونطلب من مساعد رمز الذكاء الاصطناعي إنشاء طبقتَي الأمان والمثابرة.

  1. انتقِل إلى لوحة التطبيقات في Google AI Studio وانقر على تطبيق جديد.
  2. في مربّع طلب المحادثة، أدخِل وصفًا لتطبيق المهام: 
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. انقر على تصميم لبدء عملية إنشاء التطبيق.

عندما يدرك وكيل AI Studio الحاجة إلى مساحة تخزين في قاعدة البيانات وتسجيل دخول آمن للمستخدم، يبدأ تدفق الإعداد التلقائي في Firebase.

  1. بعد دقيقة واحدة تقريبًا، تظهر بطاقة تكامل تفعيل Firebase في مساحة العمل.
  2. انقر على الزر تفعيل Firebase للتأكيد وقبول بنود الخدمة.
  3. سينفّذ الوكيل عملية الإعداد في الخلفية. الخيارات المتقدمة:
    • يتم توفير مثيل قاعدة بيانات Firestore.
    • يتم تفعيل "مصادقة Firebase" مع تفعيل ميزة "تسجيل الدخول باستخدام حساب Google".
    • يتم إنشاء إعدادات حساب خدمة (مثل إنشاء src/lib/firebase.ts الذي يحتوي على بيانات اعتماد واجهة برمجة التطبيقات).
    • تتم إضافة firestore.rules الذي يحتوي على حدود الأمان التلقائية (قواعد عزل المستخدم).

4. الاختبار والتكرار

قبل إطلاق الخدمة، عليك إجراء عمليات التحقق من الصحة في المعاينة التفاعلية.

  1. افتح جزء المعاينة داخل Google AI Studio.
  2. انقر على الزر "تسجيل الدخول" لبدء عملية المصادقة في وضع الحماية باستخدام ميزة "تسجيل الدخول باستخدام حساب Google".
    • ملاحظة حول إصلاح الأخطاء: أثناء الإنشاء أو الاختبار، قد تواجه أحيانًا مشاكل في وقت التشغيل أو أخطاء في التجميع أو حالات تعذُّر الحصول على إذن Firestore بسبب عدم تطابق قواعد الأمان. في حال حدوث ذلك، يعرض AI Studio زر إصلاح في المحادثة، ما يتيح لك أن تطلب من الوكيل تشخيص المشكلة وإصلاحها تلقائيًا.
    موقع زر "الإصلاح" في Google AI Studio
  3. بعد تسجيل الدخول، أضِف عدة مهام (مثل "مراجعة مستندات Cloud Run" و"إكمال الدرس التطبيقي حول الترميز").
  4. ضَع علامة على بعض المهام كمكتملة واحذف إحداها للتأكّد من أنّ معالِجات من جهة العميل وحالات قاعدة البيانات يتم تعديلها بشكل صحيح.
  5. إذا أردت تغيير التصميم أو السلوك، اطلب من الوكيل ذلك من خلال نافذة المحادثة. على سبيل المثال:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. انتظِر إلى أن يعدّل الوكيل قاعدة الرموز البرمجية واطّلِع على التعديلات في متصفّح المعاينة.

5. النشر على Cloud Run

بعد أن يصبح النموذج الأوّلي جاهزًا، انشره كخدمة عامة على Cloud Run.

  1. في أعلى يسار Google AI Studio، انقر على الزر نشر لبدء معالج النشر.موقع زر "النشر" في Google AI Studio
  2. انقر على البدء لضبط مشروعك على Google Cloud.
    • تأكَّد من أنّ القائمة المنسدلة مشروع Google Cloud المستهدَف تطابق المشروع الذي ربطته بمساحة عملك.
    • سينشئ AI Studio تلقائيًا معرّف خدمة فريدًا لمثيل Cloud Run.
  3. إذا كانت هذه هي المرة الأولى التي تنشر فيها وكنت تستخدم مَعلمات Google Cloud العادية، قد يُطلب منك تحديد نوع مؤسسة وتقديم تفاصيل الفوترة.
  4. انقر على نشر التطبيق.
  5. تحدث خطوات إنشاء الحاوية وتسجيلها ونشر الخدمة في الخلفية. تكتمل هذه العملية عادةً خلال دقيقتَين إلى 4 دقائق.
  6. عند اكتمال عملية النشر، انسخ عنوان URL للتطبيق الذي تم إنشاؤه وانتقِل إلى رابط التطبيق المباشر في علامة تبويب المتصفّح.
  7. اختبِر تطبيق الويب المباشر في متصفّحك.

6. الفحص في "وحدة تحكّم Firebase"

ألقِ نظرة على الخيارات المتقدمة لمعرفة كيفية تتبُّع مخططات البيانات والمستخدمين.

  1. انتقِل إلى "وحدة تحكّم Firebase".
  2. اختَر مشروعك (الذي يحمل التصنيف AI Studio أو رقم تعريف مشروعك الذي ربطته يدويًا).
  3. في لوحة التنقّل على يمين الصفحة، انقر على إنشاء > قاعدة بيانات Firestore:
    • اطّلِع على مجموعات قاعدة البيانات والمستندات التي أنشأها تطبيقك.
    • تأكَّد من أنّ كل مستند يحتوي على معرّف مالك يطابق بيانات اعتماد مصادقة المستخدم النشط.
  4. انقر على علامة التبويب الأمان في لوحة Firestore لمراجعة توجيهات الأمان التي تم إنشاؤها تلقائيًا والتي تحدّ من أذونات القراءة والكتابة لمالكي المستندات الذين تم التحقّق منهم.
  5. انتقِل إلى الأمان > المصادقة للاطّلاع على قائمة ببيانات اعتماد المستخدم النشط التي تم ملؤها أثناء اختبارات تسجيل الدخول.

7. تنظيف

لتجنُّب أي رسوم فوترة غير متوقّعة أو لتنظيف موارد مساحة عملك:

  1. في Google AI Studio، انتقِل إلى صفحة التطبيقات.
  2. ابحث عن تطبيقك في الشبكة أو القائمة.
  3. انقر على رمز المهملات لحذف حالة التطبيق وإلغاء نشر الخدمة من Cloud Run.
  4. إذا نشرت باستخدام مشروع عادي وأردت إيقاف جميع الموارد بالكامل، انتقِل إلى إعدادات المشروع في Google Cloud Console واحذف المشروع الأساسي.

8. الخاتمة

تهانينا! لقد صمّمت تطبيق ويب كامل المكدس وطوّرته ونشرته مباشرةً من Google AI Studio.

انتقِل إلى هذا الرابط للحصول على شارة رحلة المطوّر المكتملة.

لمواصلة رحلتك، انتقِل إلى goo.gle/builders للمختبر التالي.

مزيد من المعلومات