Firebase MCP در Firebase Studio

1. بررسی اجمالی

در این کد لبه، شما با استفاده از عامل پروتوتایپ برنامه همراه با سرور Firebase MCP در Firebase Studio تمرین خواهید کرد تا یک برنامه وب تمام پشته ایجاد کنید که از Firestore استفاده می کند.

گیف متحرک برنامه نهایی

چیزی که یاد خواهید گرفت

  • با استفاده از عامل نمونه سازی برنامه یک برنامه وب استاتیک ایجاد کنید
  • به پروژه Firebase متصل شوید
  • سرور Firebase MCP را راه اندازی کنید
  • Firestore را با استفاده از Firebase MCP اضافه کنید

آنچه شما نیاز دارید

  • مرورگر دلخواه شما، مانند گوگل کروم
  • یک حساب Google برای ایجاد و مدیریت پروژه Firebase شما

2. برنامه خود را با استفاده از عامل App Prototyping ایجاد کنید

عامل App Prototyping از Gemini در Firebase برای ساخت برنامه شما استفاده می کند. حتی در صورت استفاده از دستورات یکسان، نتایج ممکن است متفاوت باشد.

  1. وارد حساب Google خود شوید، به برنامه برنامه‌نویس Google بپیوندید و Firebase Studio را باز کنید.
  2. در قسمت Prototype an app with AI توضیحی درباره برنامه وارد کنید: 
    An app for a picker wheel that allows custom input.
  3. روی Improve Prompt کلیک کنید. درخواست بهبودیافته را مرور کنید.
  4. روی Prototype with AI کلیک کنید.
  5. طرح برنامه پیشنهادی را مرور کنید. کلیک کنید سفارشی کردن نماد برای ویرایش کدیکون برای ویرایش آن سفارشی کنید .
  6. روی ذخیره کلیک کنید.
  7. وقتی طرح اولیه شامل به‌روزرسانی‌های شما شد، روی Prototype this App کلیک کنید. طرح اولیه برای برنامه
  8. اگر طرح شما حاوی عناصر هوش مصنوعی باشد، عامل از شما می خواهد که یک کلید Gemini Gemini را انتخاب کنید. کلید Gemini API خود را اضافه کنید یا روی Auto-generate کلیک کنید تا یک کلید API Gemini ایجاد شود. اگر روی Auto-generate کلیک کنید، Firebase Studio یک پروژه Firebase ایجاد می کند و یک کلید API Gemini برای شما ایجاد می کند.
  9. عامل App Prototyping از طرح اولیه برای ایجاد اولین نسخه از برنامه شما استفاده می کند. وقتی کار تمام شد، پیش نمایش برنامه شما در کنار رابط چت Gemini ظاهر می شود. یک لحظه برای بررسی و آزمایش برنامه خود وقت بگذارید. اگر با خطا مواجه شدید، روی Fix Error در چت کلیک کنید تا نماینده بتواند خطاهای خودش را برطرف کند.

3. (اختیاری) کد را دریافت کنید

اگر گیر کردید، از فایل‌های نمونه استفاده کنید تا از این مرحله به بعد برنامه نمونه را با دقت بیشتری دنبال کنید.

  1. فایل های موجود در پوشه را دانلود کنید.
  2. در Firebase Studio، کلیک کنید نماد مشاهده کد برای باز کردن نمای کد، به کد بروید .
  3. فایل‌هایی را که دانلود کرده‌اید به پنجره Explorer Firebase Studio بکشید. اجازه دهید فایل‌ها جایگزین فایل‌های موجود شوند.
  4. در ترمینال ( Shift + Ctrl + C )، دستور زیر را برای نصب بسته ها اجرا کنید. 
    npm install
  5. صفحه کنترل منبع Firebase Studio را باز کنید، پیامی را برای توضیح تغییر کد تایپ کنید، به عنوان مثال، "کد وارد شده از GitHub"، سپس Commit را بزنید.
  6. با استفاده از نسخه نمونه برنامه، روی Switch to Prototyper کلیک کنید تا به لبه کد ادامه دهید.

4. به پروژه Firebase متصل شوید

تبریک می گویم! برنامه شما به صورت محلی کار می کند. برای دادن یک Backend به آن، در مرحله بعد آن را به یک پروژه Firebase متصل خواهید کرد.

  1. از عامل پروتوتایپ برنامه بخواهید به پروژه Firebase متصل شود.
    Connect to a Firebase project.
    انتظار داشته باشید که عامل یک پروژه جدید ایجاد کند یا به پروژه موجود متصل شود (اگر قبلاً از گزینه تولید خودکار برای دریافت کلید API Gemini استفاده کرده اید، پروژه شما باید در کنار نام فضای کاری شما در گوشه سمت چپ بالای صفحه نمایش شما ظاهر شود)، سپس پیکربندی 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 MCP را در Firebase Studio راه اندازی کنید

سرور Firebase MCP با ارائه ابزارهایی که عامل می‌تواند برای راه‌اندازی، مدیریت و کشیدن داده‌ها از سرویس‌های Firebase، از جمله Firebase Authentication، Cloud Firestore، و Firebase Data Connect، با آنها تماس بگیرد، قابلیت‌های عامل App Prototyping را گسترش می‌دهد. در اینجا نحوه تنظیم آن آمده است.

  1. کلیک کنید نماد مشاهده کد استودیو برای باز کردن نمای کد، به کد بروید .
  2. در ترمینال ( Shift + Ctrl + C )، دستور زیر را اجرا کنید تا به حساب Firebase خود وارد شوید، دستورالعمل‌های روی صفحه را دنبال کنید و همه گزینه‌های پیش‌فرض را رها کنید: 
    firebase login --no-localhost
  3. از Explorer ( Ctrl + Shift + E )، روی پوشه .idx راست کلیک کرده و New file را انتخاب کنید. نام فایل را mcp.json و Enter را فشار دهید.
  4. تنظیمات سرور را به .idx/mcp.json اضافه کنید.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    بررسی کنید که به سرور Firebase MCP متصل هستید. باید ورودی‌های گزارش مشابهی را در پانل خروجی ببینید، با انتخاب «جمینی» به عنوان کانال مناسب. MCPManager از جمینی سیاهههای مربوط

6. Firestore را با استفاده از Firebase MCP اضافه کنید

هدف 1: افزودن Firestor

  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 API را در پروژه Firebase فعلی فعال نکرده اید، Firestore را مقداردهی اولیه کنید.
    firebase init firestore
    دستورالعمل های روی صفحه را دنبال کنید و گزینه های پیش فرض را رها کنید. قوانین امنیتی مرحله قبل را بازنویسی نکنید. سپس قوانین امنیتی را برای نمونه پایگاه داده خود مستقر کنید.
    firebase deploy --only firestore
    این یک نمونه پایگاه داده Firestore را برای شما فراهم می کند.

هدف 2: آزمایش کنید

  1. برنامه خود را مجدداً بارگیری کنید، ورودی‌های چرخ انتخاب خود را ایجاد و حذف کنید، و این به‌روزرسانی‌ها را در صفحه Firestore در Firebase Console تماشا کنید.

برنامه در استودیو و کنسول

  1. همچنین می توانید با Firestore چت کنید تا پایگاه داده خود را پرس و جو کنید.
    List my Firestore collections.
    انتظار داشته باشید که Gemini با ابزار Firebase MCP firestore_list_collections تماس بگیرد.

با Firestore چت کنید

7. نتیجه گیری

تبریک می گویم! شما با موفقیت یک برنامه وب تمام پشته با استفاده از عامل نمونه سازی برنامه با Firebase MCP ایجاد کردید. به راحتی می توانید سایر ابزارهای ارائه شده توسط سرور Firebase MCP را امتحان کنید و کارهایی را که برنامه شما می تواند انجام دهد را گسترش دهید.

بیشتر بدانید