منصة MCP في Firebase Studio

1. نظرة عامة

في هذا الدرس العملي، ستتدرب على استخدام أداة App Prototyping مع خادم Firebase MCP في Firebase Studio لإنشاء تطبيق ويب متكامل يستخدم قاعدة بيانات Firebase في الوقت الفعلي.

صورة GIF متحرّكة للتطبيق النهائي

ما الذي ستتعلمه

  • إنشاء تطبيق ويب ثابت باستخدام وكيل "نماذج التطبيقات الأولية"
  • إعداد خادم MCP في Firebase
  • إضافة "قاعدة بيانات Firebase في الوقت الفعلي" باستخدام Firebase MCP

المتطلبات

  • متصفّح من اختيارك، مثل Google Chrome
  • حساب Google لإنشاء مشروعك على Firebase وإدارته

2- إنشاء تطبيقك باستخدام أداة App Prototyping

يستخدم وكيل "نماذج التطبيقات الأولية" Gemini في Firebase لإنشاء تطبيقك. وحتى عند استخدام طلبات مماثلة، قد تختلف النتائج. إذا واجهتك أي مشاكل، قدّمنا مجموعة من الملفات التي يمكنك إضافتها إلى مساحة العمل لمتابعة التدريب العملي في عدة نقاط تحقّق خلال هذا الدرس البرمجي.

  1. سجِّل الدخول إلى حسابك على Google، وانضم إلى برنامج مطوّري Google، ثم افتح استوديو Firebase.
  2. في حقل إنشاء نموذج أولي لتطبيق باستخدام الذكاء الاصطناعي، أدخِل وصفًا للتطبيق:
    An app for a picker wheel that allows custom input.
  3. انقر على تحسين الطلب. راجِع الطلب المحسّن.
  4. انقر على إنشاء نموذج أوّلي باستخدام الذكاء الاصطناعي.
  5. راجِع "مخطط التطبيق" المقترَح. انقر على تخصيص رمز التعديل في Codiconتخصيص لتعديلها.
  6. انقر على حفظ.
  7. عندما ينتهي المخطط من دمج التعديلات، انقر على إنشاء نموذج أولي لهذا التطبيق.مخطط التطبيق
  8. إذا كان المخطط يتضمّن عناصر مستندة إلى الذكاء الاصطناعي، سيطلب منك الوكيل مفتاح Gemini. أضِف مفتاح واجهة برمجة تطبيقات Gemini الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح واجهة برمجة تطبيقات Gemini. إذا نقرت على إنشاء تلقائيًا، سينشئ Firebase Studio مشروعًا على Firebase ويُنشئ لك مفتاح Gemini API.
  9. يستخدم وكيل "نماذج التطبيقات الأولية" المخطط لإنشاء الإصدار الأول من تطبيقك. وعند الانتهاء، ستظهر معاينة لتطبيقك إلى جانب واجهة محادثة Gemini. يُرجى تخصيص بعض الوقت لمراجعة تطبيقك واختباره. إذا واجهتك أخطاء، انقر على إصلاح الخطأ في المحادثة للسماح للوكيل بإصلاح أخطائه.

3- إعداد ميزة "الربط بين عدة مشاريع" في Firebase Studio

يوسّع خادم MCP في Firebase إمكانات وكيل "إنشاء نماذج أولية للتطبيقات" من خلال توفير أدوات يمكن للوكيل استخدامها لإعداد البيانات وإدارتها واستردادها من خدمات Firebase، بما في ذلك Firebase Authentication وCloud Firestore وFirebase Data Connect. إليك كيفية إعدادها.

  1. في Firebase Studio، انقر على رمز عرض رمز الاستوديوالتبديل إلى "الرمز" لفتح "عرض الرمز".
  2. في نافذة الجهاز (Shift+Ctrl+C)، نفِّذ الأمر التالي لتسجيل الدخول إلى حسابك على Firebase، واتّبِع التعليمات الظاهرة على الشاشة واحتفِظ بجميع الخيارات التلقائية:
    firebase login --no-localhost
  3. من "المستكشف" (Ctrl+Shift+E)، انقر بزر الماوس الأيمن على مجلد ‎ .idx، ثم اختَر ملف جديد. أطلِق على الملف اسم mcp.json واضغط على Enter.
  4. أضِف إعدادات الخادم إلى .idx/mcp.json.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    تأكَّد من أنّك متصل بخادم Firebase MCP. من المفترَض أن تظهر لك إدخالات سجلّ مشابهة في لوحة "الإخراج"، مع اختيار "Gemini" كقناة صحيحة.MCPManager من سجلات Gemini

4. إضافة "قاعدة بيانات Firebase في الوقت الفعلي" باستخدام Firebase MCP

الهدف 1: إضافة Firebase إلى تطبيقك

  1. التبديل إلى Prototyper في واجهة المحادثة، اطلب من الوكيل إنشاء مشروع.
    Create a Firebase project for my app.
    من المتوقّع أن يستدعي الوكيل أداة "إدارة المشاريع المتعددة" (MCP) في Firebase firebase_create_project.يمكنك تخطّي هذه الخطوة إذا سبق لك إنشاء مشروع على Firebase أثناء استخدام خيار الإنشاء التلقائي للحصول على مفتاح Gemini API. من المفترض أن يظهر رقم تعريف مشروعك بجانب اسم مساحة العمل في أعلى يمين الشاشة. يمكنك بدلاً من ذلك أن تطلب من الوكيل إدراج مشاريعك وتدوين المشروع الذي تريد استخدامه.
    List my Firebase projects
    من المتوقّع أن يتصل بك أحد الموظفين باستخدام أداة "إدارة العملاء المتعددين" (MCP) في Firebase firebase_list_projects.
  2. اطلب من الوكيل الربط بهذا المشروع.
    Connect my app to my project `spinsync-3y3c6`.
    تأكَّد من ظهور ملف .firebaserc يضبط مشروعك النشط. إذا لم يكن الأمر كذلك، اطلب من الوكيل تعديل بيئة Firebase.
    Update my Firebase environment to use this project.
    من المتوقّع أن يتصل بك أحد موظفي الدعم باستخدام أداة "إدارة العملاء المتعددين" (MCP) في Firebase firebase_update_environment . ومع ذلك، من المحتمل أن يحقّق الوكيل ذلك بدون استدعاء الأداة.وأخيرًا، تأكَّد من أنّ بيئة Firebase تتضمّن المشروع النشط الصحيح وأنّك المستخدم الذي تمّت مصادقته.
    Show me my current Firebase environment.
    من المتوقّع أن يتصل بك أحد الموظفين باستخدام أداة "إدارة العملاء المتعددين" (MCP) في Firebase firebase_get_environment.
  3. اطلب من الوكيل إنشاء تطبيق ويب في مشروعك على Firebase.
    Create a web app in my active Firebase project.
    من المتوقّع أن يستدعي الموظف الأداة firebase_create_app ويعرض رقم تعريف التطبيق. إذا لم يتمكّن الوكيل من ذلك، حاوِل مرة أخرى بالنقر على ، أو اتّبِع هذه التعليمات لإكمال الخطوة في "وحدة تحكّم Firebase".
    Use the App ID to get the SDK configuration and add to my app.
    من المتوقّع أن يستدعي الوكيل الأداة firebase_get_sdk_config ويعدّل الرمز باستخدام إعدادات Firebase.إذا ظهر مفتاح واجهة برمجة التطبيقات والإعدادات الأخرى في src/lib/firebase.ts بعد أن يعلن الوكيل عن إكمال المهمة، اطلب منه نقلها إلى مكان آخر للحفاظ على أمان تطبيقك.
    Secure my code by moving my Firebase config to the `.env` file.

الهدف 2: إضافة قاعدة بيانات Firebase في الوقت الفعلي

  1. البقاء في Prototyper أو التبديل إلى Prototyper في واجهة المحادثة، اطلب من الوكيل إعداد "قاعدة البيانات الآنية الاستجابة" من Firebase في مشروعك.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    من المتوقّع أن يستدعي الوكيل أداة Firebase MCP firebase_init وينشئ قواعد أمان في database.rules.json كجزء من تغييرات الملف في نهاية دورة المحادثة هذه.
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    يمكنك هنا منح جميع المستخدمين إذن الوصول إلى قاعدة البيانات للقراءة والكتابة. خارج هذا الدرس العملي، يجب دائمًا تأمين قواعد البيانات. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في مستنداتنا.
  2. التبديل إلى "الرمز" في نافذة الجهاز (Shift+Ctrl+C)، ابدأ عملية إعداد قاعدة بيانات Firebase في الوقت الفعلي.
    firebase init database
    اتّبِع التعليمات الظاهرة على الشاشة واترك الخيارات التلقائية، ثمّ نفِّذ قواعد الأمان لمثيل قاعدة البيانات.
    firebase deploy --only database
  3. التبديل إلى Prototyper اطلب من الوكيل استخدام مثيل قاعدة البيانات التلقائي لإدخالات المستخدمين.
    Use my default Realtime Database instance for user entries.
    من المتوقّع أن يعدّل الوكيل بقية الرمز المصدر لربط تطبيقك بنسخة قاعدة البيانات.

الهدف 3: تجربة الميزة

  1. أنشئ بعض الإدخالات الجديدة لعجلة الاختيار، وشاهِدها تظهر في صفحة "قاعدة بيانات Firebase في الوقت الفعلي" في وحدة تحكّم Firebase.

قاعدة بيانات Firebase في الوقت الفعلي في وحدة تحكّم Firebase

5- الخاتمة

تهانينا! لقد نجحت في إنشاء تطبيق ويب متكامل باستخدام أداة "نماذج أوّلية للتطبيقات" مع Firebase MCP. يمكنك تجربة الأدوات الأخرى التي يقدّمها خادم Firebase MCP وتوسيع نطاق إمكانات تطبيقك.

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