এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

1. ওভারভিউ

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

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

আপনি কি শিখবেন

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

আপনি কি প্রয়োজন হবে

আপনার পছন্দের একটি ব্রাউজার, যেমন Google Chrome
আপনার ফায়ারবেস প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট

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

অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপ তৈরি করতে Firebase-এ Gemini ব্যবহার করে। এমনকি অভিন্ন প্রম্পট ব্যবহার করার সময়, ফলাফল পরিবর্তিত হতে পারে। আপনি আটকে গেলে, আমরা এই কোডল্যাব জুড়ে বেশ কয়েকটি চেকপয়েন্টে ল্যাব বাছাই করার জন্য আপনার কর্মক্ষেত্রে যোগ করতে পারেন এমন ফাইলগুলির একটি সেট সরবরাহ করেছি।

আপনার Google অ্যাকাউন্টে লগ ইন করুন, Google বিকাশকারী প্রোগ্রামে যোগ দিন এবং Firebase স্টুডিও খুলুন।
এআই ফিল্ড সহ একটি অ্যাপ প্রোটোটাইপে , অ্যাপটির একটি বিবরণ লিখুন:
```
An app for a picker wheel that allows custom input.
```
ইম্প্রুভ প্রম্পটে ক্লিক করুন। উন্নত প্রম্পট পর্যালোচনা করুন.
এআই সহ প্রোটোটাইপ ক্লিক করুন।
প্রস্তাবিত অ্যাপ ব্লুপ্রিন্ট পর্যালোচনা করুন। ক্লিক করুন এটি সম্পাদনা করতে কাস্টমাইজ করুন ।
Save এ ক্লিক করুন।
ব্লুপ্রিন্ট আপনার আপডেটগুলি অন্তর্ভুক্ত করা শেষ হলে, এই অ্যাপটির প্রোটোটাইপ ক্লিক করুন।
আপনার ব্লুপ্রিন্টে AI উপাদান থাকলে, এজেন্ট আপনাকে একটি মিথুন মিথুন কী-এর জন্য অনুরোধ করবে। আপনার নিজস্ব Gemini API কী যোগ করুন অথবা একটি Gemini API কী তৈরি করতে স্বয়ংক্রিয়-জেনারেট ক্লিক করুন। আপনি যদি স্বয়ংক্রিয়-জেনারেট ক্লিক করেন, Firebase স্টুডিও একটি Firebase প্রকল্প তৈরি করে এবং আপনার জন্য একটি Gemini API কী তৈরি করে।
অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপের প্রথম সংস্করণ তৈরি করতে ব্লুপ্রিন্ট ব্যবহার করে। এটি হয়ে গেলে, আপনার অ্যাপের পূর্বরূপ একটি মিথুন চ্যাট ইন্টারফেসের পাশাপাশি প্রদর্শিত হবে। আপনার অ্যাপ পর্যালোচনা এবং পরীক্ষা করার জন্য কিছুক্ষণ সময় নিন। আপনি যদি ত্রুটির সম্মুখীন হন, এজেন্টকে তার নিজের ত্রুটিগুলি ঠিক করার অনুমতি দিতে চ্যাটে ত্রুটি সংশোধন করুন ক্লিক করুন৷

3. Firebase স্টুডিওতে Firebase MCP সেট আপ করুন৷

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

ফায়ারবেস স্টুডিওতে ক্লিক করুন কোড ভিউ খুলতে কোডে স্যুইচ করুন ।
টার্মিনালে ( Shift + Ctrl + C ), আপনার Firebase অ্যাকাউন্টে সাইন ইন করতে নিম্নলিখিত কমান্ডটি চালান, অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন এবং সমস্ত ডিফল্ট বিকল্পগুলি ছেড়ে দিন:
```
firebase login --no-localhost
```
এক্সপ্লোরার থেকে ( Ctrl+Shift+E ), .idx ফোল্ডারে ডান-ক্লিক করুন এবং নতুন ফাইল নির্বাচন করুন। ফাইলটির নাম দিন mcp.json এবং এন্টার টিপুন।
.idx/mcp.json এ সার্ভার কনফিগারেশন যোগ করুন।
```
{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
```
আপনি Firebase MCP সার্ভারের সাথে সংযুক্ত আছেন তা যাচাই করুন। আপনি আউটপুট প্যানেলে অনুরূপ লগ এন্ট্রি দেখতে পাবেন, সঠিক চ্যানেল হিসাবে "মিথুন" নির্বাচন করা হয়েছে।

4. Firebase MCP ব্যবহার করে Firestore যোগ করুন

লক্ষ্য 1: আপনার অ্যাপে Firebase যোগ করুন

প্রোটোটাইপারে স্যুইচ করুন । চ্যাট ইন্টারফেসে, এজেন্টকে একটি ফায়ারবেস প্রকল্প তৈরি করতে বলুন।
```
Create a Firebase project.
```
একটি Gemini API কী পাওয়ার জন্য স্বয়ংক্রিয়-জেনারেট বিকল্প ব্যবহার করার সময় আপনি যদি ইতিমধ্যে একটি Firebase প্রকল্প তৈরি করে থাকেন তবে এই পদক্ষেপটি এড়িয়ে যান। আপনার প্রোজেক্ট আইডি আপনার স্ক্রিনের উপরের বাম কোণে আপনার ওয়ার্কস্পেস নামের পাশে উপস্থিত হওয়া উচিত। বিকল্পভাবে, এজেন্টকে আপনার প্রকল্পের তালিকা করতে বলুন এবং আপনি যে প্রকল্পটি ব্যবহার করতে চান তা নোট করুন।
```
List my Firebase projects.
```
আশা করুন যে এজেন্ট Firebase MCP টুলকে কল করবে firebase_list_projects ।
এজেন্টকে আপনার স্থানীয় উন্নয়নের জন্য আপনার ফায়ারবেস প্রকল্প ব্যবহার করতে বলুন।
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
নিশ্চিত করুন যে আপনি একটি .firebaserc ফাইল দেখতে পাচ্ছেন যা আপনার ডিফল্ট Firebase প্রকল্প সেট করে। এই ফাইলটি Firebase CLI কে বলে যে কোন Firebase প্রজেক্টটি ব্যবহার করতে হবে। আপনি যদি এই ফাইলটি দেখতে না পান তবে এই ফাইলটির জন্য বিশেষভাবে আবার জিজ্ঞাসা করুন৷
এজেন্টকে আপনার ফায়ারবেস প্রকল্পে একটি ওয়েব অ্যাপ তৈরি করতে বলুন।
```
Create a web app in my Firebase project.
```
আশা করুন এজেন্ট firebase_create_app টুলটিতে কল করবে। যদি এজেন্ট তা করতে ব্যর্থ হয়, আবার চেষ্টা করুন, অথবা Firebase কনসোলে ধাপটি সম্পূর্ণ করার জন্য এই নির্দেশাবলী অনুসরণ করুন। এজেন্ট 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: Firestore যোগ করুন

কোডে স্যুইচ করুন । চ্যাট ইন্টারফেসে, এজেন্টকে আপনার অ্যাপে Firestore ব্যবহার করতে বলুন।
```
Use Firestore for user entries. Give anyone read and write access.
```
ব্যবহারকারীর এন্ট্রির জন্য স্থানীয় স্টোরেজের পরিবর্তে Firestore ব্যবহার করার জন্য এজেন্ট আপনার সোর্স কোড আপডেট করবেন এবং Firestore নিরাপত্তা নিয়ম তৈরি করবেন বলে আশা করুন। মনে রাখবেন যে এটি Firebase MCP টুলটিকে firebase_init কল করতে পারে বা Firestore আরম্ভ করার জন্য টার্মিনালে firebase init কমান্ড চালানোর জন্য অনুরোধ করতে পারে। যাই হোক না কেন, চালিয়ে যাওয়ার আগে নিশ্চিত করুন যে আপনি নিম্নলিখিত বিষয়বস্তু সহ firestore.rules ফাইলটি দেখতে পাচ্ছেন।
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
এখানে আপনি প্রত্যেককে আপনার ডাটাবেসে পড়ার এবং লেখার অ্যাক্সেস দেন। এই কোডল্যাবের বাইরে, আপনার সর্বদা আপনার ডাটাবেসগুলি সুরক্ষিত করা উচিত। আমাদের ডকুমেন্টেশনে এই বিষয় সম্পর্কে আরও জানুন।
টার্মিনালে ( Shift + Ctrl + C ), ফায়ারস্টোর শুরু করুন যদি এজেন্ট আপনাকে আগে তা করতে না বলে থাকে।
```
firebase init firestore
```
অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন এবং ডিফল্ট বিকল্পগুলি ছেড়ে দিন। পূর্ববর্তী ধাপ থেকে নিরাপত্তা নিয়মগুলি ওভাররাইট করবেন না৷ তারপর আপনার ডাটাবেস উদাহরণের জন্য সুরক্ষা নিয়মগুলি স্থাপন করুন৷
```
firebase deploy --only firestore
```
এটি আপনার জন্য একটি Firestore ডাটাবেস উদাহরণের ব্যবস্থা করবে।

লক্ষ্য 3: এটি পরীক্ষা করুন

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

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

5. উপসংহার

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