Firebase MCP در Firebase Studio

۱. مرور کلی

در این آزمایشگاه کد، شما با استفاده از عامل نمونه‌سازی برنامه (App Prototyping agent) به همراه سرور Firebase MCP در Firebase Studio ، یک برنامه وب فول‌استک (full-stack) که از Firestore استفاده می‌کند، ایجاد خواهید کرد.

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

آنچه یاد خواهید گرفت

  • با استفاده از App Prototyping agent، یک برنامه وب استاتیک ایجاد کنید.
  • اتصال به یک پروژه Firebase
  • سرور Firebase MCP را راه‌اندازی کنید
  • اضافه کردن Firestore با استفاده از Firebase MCP

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

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

۲. برنامه خود را با استفاده از عامل نمونه‌سازی برنامه (App Prototyping agent) تولید کنید

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

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

۳. (اختیاری) دریافت کد

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

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

۴. اتصال به یک پروژه 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.

۵. تنظیمات Firebase MCP را در Firebase Studio تنظیم کنید

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

  1. کلیک نماد نمایش کد استودیو برای باز کردن نمای کد ، به بخش کد (Code) بروید .
  2. در ترمینال ( Shift + Ctrl + C )، دستور زیر را برای ورود به حساب Firebase خود اجرا کنید، دستورالعمل‌های روی صفحه را دنبال کنید و همه گزینه‌های پیش‌فرض را رها کنید: 
    firebase login --no-localhost
  3. از اکسپلورر ( 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 متصل هستید. باید ورودی‌های گزارش مشابهی را در پنل خروجی مشاهده کنید، که در آن "Gemini" به عنوان کانال مناسب انتخاب شده است. MCPManager از لاگ‌های Gemini

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

هدف ۱: اضافه کردن فایراستور

  1. به Prototyper بروید . در رابط چت، از اپراتور بخواهید که از Firestore در برنامه شما استفاده کند.
    Use Firestore for user entries. Give anyone read and write access.
    از نماینده انتظار می‌رود که:
    • با فراخوانی ابزار Firebase MCP firebase_init ، Firestore را مقداردهی اولیه کنید، که قوانین Firestore را ایجاد می‌کند (همانطور که نشان داده شده است) و فایل‌ها را در میان سایر تغییرات پیکربندی فهرست‌بندی می‌کند.
    • کد برنامه خود را به‌روزرسانی کنید تا به جای ذخیره‌سازی محلی از Firestore استفاده کند. 
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    در اینجا به همه دسترسی خواندن و نوشتن به پایگاه داده خود را می‌دهید. خارج از این آزمایشگاه کد، همیشه باید پایگاه‌های داده خود را ایمن کنید. برای اطلاعات بیشتر در مورد این موضوع به مستندات ما مراجعه کنید.
  2. به بخش کدنویسی بروید . اگر هرگز API مربوط به Firestore را در پروژه فعلی Firebase فعال نکرده‌اید، در ترمینال ( Shift + Ctrl + C )، Firestore را راه‌اندازی اولیه کنید.
    firebase init firestore
    دستورالعمل‌های روی صفحه را دنبال کنید و گزینه‌های پیش‌فرض را رها کنید. قوانین امنیتی مرحله قبل را بازنویسی نکنید. سپس قوانین امنیتی را برای نمونه پایگاه داده خود اعمال کنید.
    firebase deploy --only firestore
    این یک نمونه پایگاه داده Firestore برای شما فراهم می‌کند.

هدف ۲: آن را امتحان کنید

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

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

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

چت با فایراستور

۷. نتیجه‌گیری

تبریک! شما با موفقیت یک برنامه وب فول‌استک با استفاده از App Prototyping agent با Firebase MCP ایجاد کرده‌اید. می‌توانید ابزارهای دیگر ارائه شده توسط سرور Firebase MCP را امتحان کنید و قابلیت‌های برنامه خود را گسترش دهید.

بیشتر بدانید