Firebase MCP در Firebase Studio

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

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

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

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

  • با استفاده از عامل نمونه سازی برنامه یک برنامه وب استاتیک ایجاد کنید
  • سرور Firebase MCP را راه اندازی کنید
  • Firestore را با استفاده از 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 MCP، Firestore را اضافه کنید

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

  1. به Prototyper بروید . در رابط چت، از نماینده بخواهید که یک پروژه Firebase ایجاد کند.
    Create a Firebase project.
    اگر قبلاً یک پروژه Firebase ایجاد کرده اید، از این مرحله صرف نظر کنید و از گزینه تولید خودکار برای دریافت کلید API Gemini استفاده می کنید. شناسه پروژه شما باید در کنار نام فضای کاری شما در گوشه سمت چپ بالای صفحه نمایش ظاهر شود. از طرف دیگر، از نماینده بخواهید که پروژه های شما را لیست کند و پروژه ای را که می خواهید استفاده کنید یادداشت کنید.
    List my Firebase projects.
    انتظار داشته باشید که عامل با ابزار Firebase MCP firebase_list_projects تماس بگیرد.
  2. از نماینده بخواهید از پروژه Firebase شما برای توسعه محلی شما استفاده کند.
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    مطمئن شوید که فایل .firebaserc را می بینید که پروژه Firebase پیش فرض شما را تنظیم می کند. این فایل به Firebase CLI می گوید که از کدام پروژه Firebase استفاده کند. اگر این فایل را نمی بینید، دوباره به طور خاص برای این فایل بپرسید.
  3. از نماینده بخواهید یک برنامه وب در پروژه Firebase شما ایجاد کند.
    Create a web app in my Firebase project.
    انتظار داشته باشید که نماینده با ابزار firebase_create_app تماس بگیرد. اگر عامل موفق به انجام این کار نشد، دوباره امتحان کنید، یا این دستورالعمل ها را دنبال کنید تا مرحله را در Firebase Console تکمیل کنید. عامل ممکن است ابزار firebase_get_sdk_config را فراخوانی کند و فایل های لازم را برای اتصال پروژه شما به برنامه وب Firebase ایجاد کند. اگر این کار را نکرد، از آن بخواهید این کار را انجام دهد.
    Add my Firebase SDK configuration to my app.
    عامل اغلب کلید API و سایر تنظیمات را مستقیماً در src/lib/firebase.ts قرار می دهد. از آن بخواهید که آنها را از کد برنامه شما خارج کند تا برنامه شما ایمن بماند. 
    Secure my code by moving my Firebase config to my `.env` file.

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

  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;
    }
  }
}
    در اینجا به همه امکان خواندن و نوشتن به پایگاه داده خود را می دهید. خارج از این CodeLab، همیشه باید پایگاه داده خود را ایمن کنید. در مستندات ما درباره این موضوع بیشتر بیاموزید.
  2. در ترمینال ( Shift + Ctrl + C )، اگر عامل قبلاً از شما خواسته باشد Firestore را مقداردهی اولیه کنید.
    firebase init firestore
    دستورالعمل های روی صفحه را دنبال کنید و گزینه های پیش فرض را رها کنید. قوانین امنیتی مرحله قبل را بازنویسی نکنید. سپس قوانین امنیتی را برای نمونه پایگاه داده خود مستقر کنید.
    firebase deploy --only firestore
    این یک نمونه پایگاه داده Firestore را برای شما فراهم می کند.

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

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

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

5. نتیجه گیری

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

بیشتر بدانید