منصة MCP في Firebase Studio

1. نظرة عامة

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

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

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

  • إنشاء تطبيق ويب ثابت باستخدام وكيل "نماذج التطبيقات الأولية"
  • إعداد خادم MCP في Firebase
  • إضافة Firestore باستخدام 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. إضافة Firestore باستخدام Firebase MCP

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

  1. التبديل إلى Prototyper في واجهة المحادثة، اطلب من الوكيل إنشاء مشروع على Firebase.
    Create a Firebase project.
    تخطَّ هذه الخطوة إذا سبق لك إنشاء مشروع على Firebase أثناء استخدام خيار الإنشاء التلقائي للحصول على مفتاح Gemini API. من المفترض أن يظهر رقم تعريف مشروعك بجانب اسم مساحة العمل في أعلى يمين الشاشة. يمكنك بدلاً من ذلك أن تطلب من الوكيل إدراج مشاريعك وتدوين المشروع الذي تريد استخدامه.
    List my Firebase projects.
    من المتوقّع أن يتصل بك أحد الموظفين باستخدام أداة "إدارة العملاء المتعددين" (MCP) في Firebase firebase_list_projects.
  2. اطلب من الوكيل استخدام مشروعك على Firebase لتطوير تطبيقك محليًا.
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    تأكَّد من ظهور ملف .firebaserc يضبط مشروع Firebase التلقائي. يُعلم هذا الملفّ واجهة سطر الأوامر في Firebase بمشروع Firebase الذي يجب استخدامه. إذا لم يظهر لك هذا الملف، اطلب الملف نفسه مرة أخرى.
  3. اطلب من الوكيل إنشاء تطبيق ويب في مشروعك على Firebase.
    Create a web app in my Firebase project.
    من المتوقّع أن يتصل الموظف بالأداة firebase_create_app. إذا لم يتمكّن البرنامج من إجراء ذلك، حاوِل مرة أخرى أو اتّبِع هذه التعليمات لإكمال الخطوة في "وحدة تحكّم Firebase". قد ينتقل البرنامج إلى استدعاء الأداة firebase_get_sdk_config وإنشاء الملفات اللازمة لربط مشروعك بتطبيق الويب على Firebase. وفي حال عدم حدوث ذلك، اطلب منه إجراء ذلك.
    Add my Firebase SDK configuration to my app.
    يضع البرنامج غالبًا مفتاح واجهة برمجة التطبيقات والإعدادات الأخرى في src/lib/firebase.ts مباشرةً. اطلب منه نقلها من رمز تطبيقك للحفاظ على أمان تطبيقك.
    Secure my code by moving my Firebase config to my `.env` file.

الهدف 2: إضافة Firestore

  1. التبديل إلى "الرمز" في واجهة المحادثة، اطلب من الوكيل استخدام Firestore في تطبيقك.
    Use Firestore for user entries. Give anyone read and write access.
    من المتوقّع أن يعدّل الوكيل رمز المصدر لاستخدام Firestore بدلاً من التخزين المحلي لإدخالات المستخدمين، وأن ينشئ قواعد أمان Firestore. يُرجى العِلم أنّه قد يتم استدعاء أداة Firebase MCP firebase_init أو مطالبتك بتنفيذ الأمر firebase init في الوحدة الطرفية لبدء Firestore. في كلتا الحالتين، تأكَّد من ظهور الملف firestore.rules الذي يتضمّن المحتوى التالي قبل المتابعة.
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    يمكنك هنا منح جميع المستخدمين إذن الوصول إلى قاعدة البيانات للقراءة والكتابة. خارج هذا الدرس العملي، يجب دائمًا تأمين قواعد البيانات. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في مستنداتنا.
  2. في الوحدة الطرفية (Shift+Ctrl+C)، ابدأ Firestore إذا لم يطلب منك الوكيل ذلك من قبل.
    firebase init firestore
    اتّبِع التعليمات الظاهرة على الشاشة واترك الخيارات التلقائية. لا تستبدِل قواعد الأمان من الخطوة السابقة، ثمّ نفِّذ قواعد الأمان لمثيل قاعدة البيانات.
    firebase deploy --only firestore
    سيؤدي ذلك إلى توفير مثيل قاعدة بيانات Firestore لك.

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

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

التطبيق في "استوديو YouTube" وPlay Console

5- الخاتمة

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

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