1. نظرة عامة
في هذا الدرس العملي، ستتدرب على استخدام أداة "إنشاء نماذج التطبيقات" مع خادم Firebase MCP في Firebase Studio لإنشاء تطبيق ويب متكامل يستخدم Firestore.
أهداف الدورة التعليمية
- إنشاء تطبيق ويب ثابت باستخدام وكيل "نماذج التطبيقات الأولية"
- الربط بمشروع على Firebase
- إعداد خادم MCP في Firebase
- إضافة Firestore باستخدام Firebase MCP
المتطلبات
- متصفّح من اختيارك، مثل Google Chrome
- حساب Google لإنشاء مشروعك على Firebase وإدارته
2- إنشاء تطبيقك باستخدام أداة App Prototyping
يستخدم وكيل "نماذج التطبيقات الأولية" Gemini في Firebase لإنشاء تطبيقك. وحتى عند استخدام طلبات مماثلة، قد تختلف النتائج.
- سجِّل الدخول إلى حسابك على Google، وانضم إلى برنامج مطوّري Google، ثم افتح استوديو Firebase.
- في حقل إنشاء نموذج أولي لتطبيق باستخدام الذكاء الاصطناعي، أدخِل وصفًا للتطبيق:
An app for a picker wheel that allows custom input.
- انقر على تحسين الطلب. راجِع الطلب المحسّن.
- انقر على إنشاء نموذج أوّلي باستخدام الذكاء الاصطناعي.
- راجِع "مخطط التطبيق" المقترَح. انقر على
تخصيص لتعديلها.
- انقر على حفظ.
- عندما ينتهي المخطط من دمج التعديلات، انقر على إنشاء نموذج أولي لهذا التطبيق.
- إذا كان المخطط يتضمّن عناصر مستندة إلى الذكاء الاصطناعي، سيطلب منك الوكيل مفتاح Gemini API. أضِف مفتاح واجهة برمجة تطبيقات Gemini الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح واجهة برمجة تطبيقات Gemini. إذا نقرت على إنشاء تلقائيًا، سينشئ Firebase Studio مشروعًا على Firebase ويُنشئ لك مفتاح Gemini API.
- يستخدم وكيل "نماذج التطبيقات الأولية" المخطط لإنشاء الإصدار الأول من تطبيقك. وعند الانتهاء، ستظهر معاينة لتطبيقك إلى جانب واجهة محادثة Gemini. يُرجى تخصيص بعض الوقت لمراجعة تطبيقك واختباره. إذا واجهتك أخطاء، انقر على إصلاح الخطأ في المحادثة للسماح للوكيل بإصلاح أخطائه.
3- (اختياري) الحصول على الرمز
إذا واجهتك مشكلة، استخدِم الملفات النموذجية لمتابعة المثال على التطبيق بشكل أوثق من هذه النقطة فصاعدًا.
- نزِّل الملفات في المجلد.
- في Firebase Studio، انقر على
التبديل إلى "عرض الرمز" لفتح "عرض الرمز".
- اسحب الملفات التي نزّلتها إلى جزء "المستكشف" في Firebase Studio. السماح للملفات باستبدال أي ملفات حالية
- في الوحدة الطرفية (
Shift
+Ctrl
+C
)، نفِّذ الأمر التالي لتثبيت الحِزم.npm install
- افتح لوحة التحكّم بالمصدر في Firebase Studio، واكتب رسالة لوصف تغيير الرمز، مثل "تم استيراد الرمز من GitHub"، ثم انقر على تنفيذ.
- انقر على التبديل إلى Prototyper لمتابعة الدرس العملي، باستخدام الإصدار التجريبي من التطبيق.
4. الربط بمشروع على Firebase
تهانينا! يعمل تطبيقك على الجهاز فقط. ولإضافة خلفية برمجية إليه، عليك ربطه بمشروع على Firebase.
- اطلب من وكيل App Prototyping الربط بمشروع على Firebase.
من المتوقّع أن ينشئ الوكيل مشروعًا جديدًا أو يتصل بمشروع حالي (إذا كنت قد استخدمت خيار الإنشاء التلقائي للحصول على مفتاح Gemini API في وقت سابق، من المفترض أن يظهر مشروعك بجانب اسم مساحة العمل في أعلى يمين الشاشة)، ثم ينشئ إعدادات Firebase اللازمة ويدمجها في تطبيقك من خلالConnect to a Firebase project.
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. إليك كيفية إعدادها.
- انقر على
التبديل إلى "الرمز" لفتح "عرض الرمز".
- في نافذة الجهاز (
Shift
+Ctrl
+C
)، نفِّذ الأمر التالي لتسجيل الدخول إلى حسابك على Firebase، واتّبِع التعليمات الظاهرة على الشاشة واحتفِظ بجميع الخيارات التلقائية:firebase login --no-localhost
- من "المستكشف" (
Ctrl
+Shift
+E
)، انقر بزر الماوس الأيمن على مجلد .idx، ثم اختَر ملف جديد. أدخِل اسمًا للملفmcp.json
واضغط على Enter. - أضِف إعدادات الخادم إلى
.idx/mcp.json
. تأكَّد من أنّك متصل بخادم Firebase MCP. من المفترَض أن تظهر لك إدخالات سجلّ مشابهة في لوحة "الإخراج"، مع اختيار "Gemini" كقناة صحيحة.{ "mcpServers": { "firebase": { "command": "npx", "args": [ "-y", "firebase-tools@latest", "experimental:mcp" ] } } }
6. إضافة Firestore باستخدام Firebase MCP
الهدف 1: إضافة Firestore
- التبديل إلى 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; } } }
- إعداد Firestore من خلال استدعاء أداة Firebase MCP
- التبديل إلى "الرمز" في نافذة الأوامر (
Shift
+Ctrl
+C
)، ابدأ Firestore إذا لم يسبق لك تفعيل Firestore API في مشروع Firebase الحالي. اتّبِع التعليمات الظاهرة على الشاشة واترك الخيارات التلقائية. لا تستبدِل قواعد الأمان من الخطوة السابقة، ثمّ نفِّذ قواعد الأمان لمثيل قاعدة البيانات.firebase init firestore
سيؤدي ذلك إلى توفير مثيل قاعدة بيانات Firestore لك.firebase deploy --only firestore
الهدف 2: تجربة الميزة
- أعِد تحميل تطبيقك، وأنشئ إدخالات واحذفها على عجلة الاختيار، واطّلِع على هذه التعديلات في صفحة Firestore في وحدة تحكّم Firebase.
- يمكنك أيضًا الدردشة مع Firestore للاستعلام عن قاعدة البيانات.
من المتوقّع أن يستدعي Gemini أداة "إدارة العملاء المتعددين" (MCP) في FirebaseList my Firestore collections.
firestore_list_collections
.
7. الخاتمة
تهانينا! لقد نجحت في إنشاء تطبيق ويب متكامل باستخدام وكيل "نماذج أوّلية للتطبيقات" مع Firebase MCP. يمكنك تجربة الأدوات الأخرى التي يقدّمها خادم Firebase MCP وتوسيع نطاق إمكانات تطبيقك.