Firebase স্টুডিওতে Firebase MCP

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি Firebase Studio- তে Firebase MCP সার্ভারের সাথে অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে অনুশীলন করবেন যাতে Firestore ব্যবহার করে একটি ফুল-স্ট্যাক ওয়েব অ্যাপ তৈরি করা যায়।

চূড়ান্ত অ্যাপের অ্যানিমেটেড জিআইএফ

তুমি কি শিখবে

  • অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে একটি স্ট্যাটিক ওয়েব অ্যাপ তৈরি করুন
  • একটি Firebase প্রকল্পের সাথে সংযোগ করুন
  • ফায়ারবেস এমসিপি সার্ভার সেট আপ করুন
  • Firebase MCP ব্যবহার করে Firestore যোগ করুন

তোমার যা লাগবে

  • আপনার পছন্দের একটি ব্রাউজার, যেমন গুগল ক্রোম
  • আপনার Firebase প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট

২. অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে আপনার অ্যাপ তৈরি করুন

অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপ তৈরি করতে Firebase-এ Gemini ব্যবহার করে। একই রকম প্রম্পট ব্যবহার করলেও, ফলাফল ভিন্ন হতে পারে।

  1. আপনার গুগল অ্যাকাউন্টে লগ ইন করুন, গুগল ডেভেলপার প্রোগ্রামে যোগ দিন এবং ফায়ারবেস স্টুডিও খুলুন।
  2. "প্রোটোটাইপ অ্যান অ্যাপ উইথ এআই" ফিল্ডে, অ্যাপটির একটি বিবরণ লিখুন: 
    An app for a picker wheel that allows custom input.
  3. Improve Prompt এ ক্লিক করুন। উন্নত প্রম্পটটি পর্যালোচনা করুন।
  4. প্রোটোটাইপ উইথ এআই-এ ক্লিক করুন।
  5. প্রস্তাবিত অ্যাপ ব্লুপ্রিন্ট পর্যালোচনা করুন। ক্লিক করুন কোডিকন সম্পাদনার জন্য আইকন কাস্টমাইজ করুন এটি সম্পাদনা করার জন্য কাস্টমাইজ করুন ।
  6. সংরক্ষণ করুন ক্লিক করুন।
  7. ব্লুপ্রিন্ট আপনার আপডেটগুলি অন্তর্ভুক্ত করা শেষ হলে, Prototype this App এ ক্লিক করুন। অ্যাপটির নীলনকশা
  8. যদি আপনার ব্লুপ্রিন্টে AI উপাদান থাকে, তাহলে এজেন্ট আপনাকে একটি Gemini Gemini কী লিখতে বলবে। আপনার নিজস্ব Gemini API কী যোগ করুন অথবা Gemini API কী তৈরি করতে Auto-generate এ ক্লিক করুন। যদি আপনি Auto-generate এ ক্লিক করেন, তাহলে Firebase Studio একটি Firebase প্রকল্প তৈরি করবে এবং আপনার জন্য একটি Gemini API কী তৈরি করবে।
  9. অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপের প্রথম সংস্করণ তৈরি করার জন্য ব্লুপ্রিন্ট ব্যবহার করে। এটি সম্পন্ন হলে, আপনার অ্যাপের প্রিভিউ একটি জেমিনি চ্যাট ইন্টারফেসের পাশাপাশি প্রদর্শিত হবে। আপনার অ্যাপটি পর্যালোচনা এবং পরীক্ষা করার জন্য কিছুক্ষণ সময় নিন। যদি আপনি ত্রুটির সম্মুখীন হন, তাহলে চ্যাটে ত্রুটি ঠিক করুন ক্লিক করুন যাতে এজেন্টটি তার নিজস্ব ত্রুটিগুলি ঠিক করতে পারে।

৩. (ঐচ্ছিক) কোডটি পান

যদি আপনি আটকে যান, তাহলে এখন থেকে নমুনা অ্যাপটি আরও ঘনিষ্ঠভাবে অনুসরণ করতে নমুনা ফাইলগুলি ব্যবহার করুন।

  1. ফোল্ডারে থাকা ফাইলগুলি ডাউনলোড করুন।
  2. ফায়ারবেস স্টুডিওতে, ক্লিক করুন কোড ভিউ আইকন কোড ভিউ খুলতে কোডে স্যুইচ করুন ।
  3. আপনার ডাউনলোড করা ফাইলগুলিকে Firebase Studio-এর Explorer প্যানে টেনে আনুন। ফাইলগুলিকে বিদ্যমান যেকোনো ফাইল প্রতিস্থাপন করার অনুমতি দিন।
  4. টার্মিনালে ( Shift + Ctrl + C ), প্যাকেজ ইনস্টল করার জন্য নিম্নলিখিত কমান্ডটি চালান। 
    npm install
  5. Firebase Studio-এর Source Control প্যানটি খুলুন, কোড পরিবর্তন বর্ণনা করার জন্য একটি বার্তা টাইপ করুন, উদাহরণস্বরূপ, "GitHub থেকে আমদানি করা কোড", তারপর Commit টিপুন।
  6. অ্যাপের উদাহরণ সংস্করণ ব্যবহার করে কোডল্যাব চালিয়ে যেতে "প্রোটোটাইপারে স্যুইচ করুন" এ ক্লিক করুন।

৪. একটি ফায়ারবেস প্রকল্পের সাথে সংযোগ করুন

অভিনন্দন! আপনার অ্যাপটি স্থানীয়ভাবে কাজ করছে। এটিকে একটি ব্যাকএন্ড দেওয়ার জন্য, আপনাকে পরবর্তীতে এটিকে একটি Firebase প্রকল্পের সাথে সংযুক্ত করতে হবে।

  1. অ্যাপ প্রোটোটাইপিং এজেন্টকে একটি ফায়ারবেস প্রকল্পের সাথে সংযোগ করতে বলুন।
    Connect to a Firebase project.
    এজেন্ট একটি নতুন প্রকল্প তৈরি করবে অথবা বিদ্যমান প্রকল্পের সাথে সংযোগ স্থাপন করবে বলে আশা করুন (যদি আপনি আগে জেমিনি API কী পেতে অটো-জেনারেট বিকল্পটি ব্যবহার করে থাকেন, তাহলে আপনার প্রকল্পটি আপনার স্ক্রিনের উপরের বাম কোণে আপনার কর্মক্ষেত্রের নামের পাশে প্রদর্শিত হবে), তারপর প্রয়োজনীয় 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.

৫. ফায়ারবেস স্টুডিওতে ফায়ারবেস এমসিপি সেট আপ করুন

ফায়ারবেস এমসিপি সার্ভার অ্যাপ প্রোটোটাইপিং এজেন্টের ক্ষমতা বৃদ্ধি করে, এমন সরঞ্জাম সরবরাহ করে যা এজেন্ট ফায়ারবেস পরিষেবাগুলি থেকে ডেটা সেট আপ, পরিচালনা এবং টেনে আনতে কল করতে পারে, যার মধ্যে রয়েছে ফায়ারবেস প্রমাণীকরণ, ক্লাউড ফায়ারস্টোর এবং ফায়ারবেস ডেটা কানেক্ট। এটি কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল।

  1. ক্লিক করুন স্টুডিও কোড ভিউ আইকন কোড ভিউ খুলতে কোডে স্যুইচ করুন ।
  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

৬. ফায়ারবেস এমসিপি ব্যবহার করে ফায়ারস্টোর যোগ করুন

লক্ষ্য ১: ফায়ারস্টোর যোগ করুন

  1. প্রোটোটাইপারে স্যুইচ করুন । চ্যাট ইন্টারফেসে, এজেন্টকে আপনার অ্যাপে ফায়ারস্টোর ব্যবহার করতে বলুন।
    Use Firestore for user entries. Give anyone read and write access.
    এজেন্টের কাছ থেকে আশা করা যায়:
    • 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 ), যদি আপনি বর্তমান Firebase প্রকল্পে Firestore API সক্রিয় না করে থাকেন তবে Firestore আরম্ভ করুন।
    firebase init firestore
    স্ক্রিনে প্রদর্শিত নির্দেশাবলী অনুসরণ করুন এবং ডিফল্ট বিকল্পগুলি ছেড়ে দিন। পূর্ববর্তী ধাপ থেকে সুরক্ষা নিয়মগুলি ওভাররাইট করবেন না। তারপর আপনার ডাটাবেস ইনস্ট্যান্সের জন্য সুরক্ষা নিয়মগুলি স্থাপন করুন।
    firebase deploy --only firestore
    এটি আপনার জন্য একটি ফায়ারস্টোর ডাটাবেস ইনস্ট্যান্স সরবরাহ করবে।

লক্ষ্য ২: এটি পরীক্ষা করে দেখুন

  1. আপনার অ্যাপটি পুনরায় লোড করুন, আপনার পিকার হুইলে এন্ট্রি তৈরি করুন এবং মুছুন, এবং Firebase Console- এর Firestore পৃষ্ঠায় এই আপডেটগুলি দেখুন।

স্টুডিও এবং কনসোলে অ্যাপ

  1. আপনার ডাটাবেস অনুসন্ধানের জন্য আপনি ফায়ারস্টোরের সাথে চ্যাট করতে পারেন।
    List my Firestore collections.
    আশা করি জেমিনি ফায়ারবেস এমসিপি টুল firestore_list_collections কল করবে।

ফায়ারস্টোরের সাথে চ্যাট করুন

৭. উপসংহার

অভিনন্দন! আপনি Firebase MCP ব্যবহার করে অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে একটি ফুল-স্ট্যাক ওয়েব অ্যাপ সফলভাবে তৈরি করেছেন। Firebase MCP সার্ভার দ্বারা প্রদত্ত অন্যান্য সরঞ্জামগুলি চেষ্টা করে দেখতে দ্বিধা করবেন না এবং আপনার অ্যাপ কী করতে পারে তা প্রসারিত করতে পারেন।

আরও জানুন