منصة MCP في Firebase Studio

1. نظرة عامة

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

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

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

  • إنشاء تطبيق ويب ثابت باستخدام وكيل "نماذج التطبيقات الأولية"
  • الربط بمشروع على Firebase
  • إعداد خادم 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 API. أضِف مفتاح واجهة برمجة تطبيقات Gemini الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح واجهة برمجة تطبيقات Gemini. إذا نقرت على إنشاء تلقائيًا، سينشئ Firebase Studio مشروعًا على Firebase ويُنشئ لك مفتاح Gemini API.
  9. يستخدم وكيل "نماذج التطبيقات الأولية" المخطط لإنشاء الإصدار الأول من تطبيقك. وعند الانتهاء، ستظهر معاينة لتطبيقك إلى جانب واجهة محادثة Gemini. يُرجى تخصيص بعض الوقت لمراجعة تطبيقك واختباره. إذا واجهتك أخطاء، انقر على إصلاح الخطأ في المحادثة للسماح للوكيل بإصلاح أخطائه.

3- (اختياري) الحصول على الرمز

إذا واجهتك مشكلة، استخدِم الملفات النموذجية لمتابعة المثال على التطبيق بشكل أوثق من هذه النقطة فصاعدًا.

  1. نزِّل الملفات في المجلد.
  2. في Firebase Studio، انقر على رمز طريقة عرض الرمز التبديل إلى "عرض الرمز" لفتح "عرض الرمز".
  3. اسحب الملفات التي نزّلتها إلى جزء "المستكشف" في Firebase Studio. السماح للملفات باستبدال أي ملفات حالية
  4. في الوحدة الطرفية (Shift+Ctrl+C)، نفِّذ الأمر التالي لتثبيت الحِزم.
    npm install
  5. افتح لوحة التحكّم بالمصدر في Firebase Studio، واكتب رسالة لوصف تغيير الرمز، مثل "تم استيراد الرمز من GitHub"، ثم انقر على تنفيذ.
  6. انقر على التبديل إلى Prototyper لمتابعة الدرس العملي، باستخدام الإصدار التجريبي من التطبيق.

4. الربط بمشروع على Firebase

تهانينا! يعمل تطبيقك على الجهاز فقط. ولإضافة خلفية برمجية إليه، عليك ربطه بمشروع على Firebase.

  1. اطلب من وكيل App Prototyping الربط بمشروع على Firebase.
    Connect to a Firebase project.
    من المتوقّع أن ينشئ الوكيل مشروعًا جديدًا أو يتصل بمشروع حالي (إذا كنت قد استخدمت خيار الإنشاء التلقائي للحصول على مفتاح Gemini API في وقت سابق، من المفترض أن يظهر مشروعك بجانب اسم مساحة العمل في أعلى يمين الشاشة)، ثم ينشئ إعدادات Firebase اللازمة ويدمجها في تطبيقك من خلال src/lib/firebase.ts (كما هو موضّح).
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    لا تتردد في الطلب من الموظف مرة أخرى إذا لم يتمكّن من إكمال المهمة في المرة الأولى، ويمكنك تقسيم الخطوات إذا لزم الأمر.
    Create a new Firebase project.

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

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

  1. انقر على رمز عرض رمز الاستوديوالتبديل إلى "الرمز" لفتح "عرض الرمز".
  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

6. إضافة Firestore باستخدام Firebase MCP

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

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

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

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

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

  1. يمكنك أيضًا الدردشة مع Firestore للاستعلام عن قاعدة البيانات.
    List my Firestore collections.
    من المتوقّع أن يستدعي Gemini أداة "إدارة العملاء المتعددين" (MCP) في Firebase firestore_list_collections.

الدردشة مع Firestore

7. الخاتمة

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

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