Firebase MCP در Firebase Studio

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

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

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

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

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

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

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

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

عامل App Prototyping از Gemini در Firebase برای ساخت برنامه شما استفاده می کند. حتی در صورت استفاده از دستورات یکسان، نتایج ممکن است متفاوت باشد. اگر گیر کردید، مجموعه‌ای از فایل‌ها را ارائه کرده‌ایم که می‌توانید آن‌ها را به فضای کاری خود اضافه کنید تا آزمایشگاه را از چندین نقطه بازرسی در سراسر این Codelab انتخاب کنید.

  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. Firebase MCP را در Firebase Studio راه اندازی کنید

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

  1. در Firebase Studio، کلیک کنید نماد مشاهده کد استودیو برای باز کردن نمای کد، به کد بروید .
  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 از جمینی سیاهههای مربوط

4. پایگاه داده بیدرنگ Firebase را با استفاده از Firebase MCP اضافه کنید

هدف 1: Firebase را به برنامه خود اضافه کنید

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

هدف 2: افزودن پایگاه داده بیدرنگ Firebase

  1. بمانید یا به 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
    }
}
    در اینجا به همه امکان خواندن و نوشتن به پایگاه داده خود را می دهید. خارج از این CodeLab، همیشه باید پایگاه داده های خود را ایمن کنید. در مستندات ما درباره این موضوع بیشتر بیاموزید.
  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 Console ظاهر می شوند.

پایگاه داده بیدرنگ Firebase در کنسول Firebase

5. نتیجه گیری

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

بیشتر بدانید