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

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

1. ওভারভিউ

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

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

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

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

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

আপনার পছন্দের একটি ব্রাউজার, যেমন 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 ব্যবহার করে Firebase রিয়েলটাইম ডেটাবেস যোগ করুন

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

প্রোটোটাইপারে স্যুইচ করুন । চ্যাট ইন্টারফেসে, এজেন্টকে একটি প্রকল্প তৈরি করতে বলুন।
```
Create a Firebase project for my app.
```
আশা করুন যে এজেন্ট Firebase MCP টুল firebase_create_project কল করবে। যদি আপনি ইতিমধ্যেই একটি Gemini API কী পাওয়ার জন্য স্বয়ংক্রিয়-জেনারেট বিকল্প ব্যবহার করার সময় একটি Firebase প্রকল্প তৈরি করে থাকেন তাহলে এই ধাপটি এড়িয়ে যান। আপনার প্রোজেক্ট আইডি আপনার স্ক্রিনের উপরের বাম কোণে আপনার ওয়ার্কস্পেস নামের পাশে উপস্থিত হওয়া উচিত। বিকল্পভাবে, এজেন্টকে আপনার প্রকল্পের তালিকা করতে বলুন এবং আপনি যে প্রকল্পটি ব্যবহার করতে চান তা নোট করুন।
```
List my Firebase projects
```
আশা করুন যে এজেন্ট Firebase MCP টুলকে কল করবে firebase_list_projects ।
এজেন্টকে এই প্রকল্পের সাথে সংযোগ করতে বলুন।
```
Connect my app to my project `spinsync-3y3c6`.
```
নিশ্চিত করুন যে আপনি একটি .firebaserc ফাইল দেখতে পাচ্ছেন যা আপনার সক্রিয় প্রকল্প সেট করে। যদি না হয়, এজেন্টকে আপনার ফায়ারবেস পরিবেশ আপডেট করতে বলুন।
```
Update my Firebase environment to use this project.
```
আশা করুন এজেন্ট Firebase MCP টুলকে কল করবে firebase_update_environment । যাইহোক, এটা সম্ভব যে এজেন্ট টুলটিকে কল না করেই এটি সম্পন্ন করে। শেষ পর্যন্ত, আপনার ফায়ারবেস পরিবেশে সঠিক সক্রিয় প্রকল্প রয়েছে এবং আপনি প্রমাণীকৃত ব্যবহারকারী হিসাবে পরীক্ষা করুন।
```
Show me my current Firebase environment.
```
আশা করুন এজেন্ট Firebase MCP টুলকে কল করবে firebase_get_environment ।
এজেন্টকে আপনার ফায়ারবেস প্রকল্পে একটি ওয়েব অ্যাপ তৈরি করতে বলুন।
```
Create a web app in my active Firebase project.
```
আশা করুন যে এজেন্ট firebase_create_app টুলটিতে কল করবে এবং অ্যাপ আইডি ফেরত দেবে। যদি এজেন্ট তা করতে ব্যর্থ হয়, তাহলে ক্লিক করে আবার চেষ্টা করুন, অথবা Firebase কনসোলে ধাপটি সম্পূর্ণ করতে এই নির্দেশাবলী অনুসরণ করুন।
```
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 রিয়েলটাইম ডেটাবেস যোগ করুন

থাকুন বা প্রোটোটাইপারে স্যুইচ করুন। চ্যাট ইন্টারফেসে, এজেন্টকে আপনার প্রোজেক্টে ফায়ারবেস রিয়েলটাইম ডেটাবেস সেট আপ করতে বলুন।
```
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
    }
}
```
এখানে আপনি প্রত্যেককে আপনার ডাটাবেসে পড়ার এবং লেখার অ্যাক্সেস দেন। এই কোডল্যাবের বাইরে, আপনার সবসময় আপনার ডেটাবেসগুলি সুরক্ষিত করা উচিত। আমাদের ডকুমেন্টেশনে এই বিষয় সম্পর্কে আরও জানুন।
কোডে স্যুইচ করুন । টার্মিনালে ( Shift + Ctrl + C ), ফায়ারবেস রিয়েলটাইম ডেটাবেস শুরু করুন।
```
firebase init database
```
স্ক্রিনের নির্দেশাবলী অনুসরণ করুন এবং ডিফল্ট বিকল্পগুলি ছেড়ে দিন৷ তারপর আপনার ডাটাবেস উদাহরণের জন্য সুরক্ষা নিয়মগুলি স্থাপন করুন৷
```
firebase deploy --only database
```
প্রোটোটাইপারে স্যুইচ করুন । ব্যবহারকারীর এন্ট্রির জন্য আপনার ডিফল্ট ডাটাবেস উদাহরণ ব্যবহার করতে এজেন্টকে বলুন।
```
Use my default Realtime Database instance for user entries.
```
আপনার অ্যাপটিকে আপনার ডাটাবেস ইনস্ট্যান্সের সাথে সংযুক্ত করার জন্য এজেন্ট বাকি সোর্স কোড আপডেট করবে বলে আশা করুন।

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

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

ফায়ারবেস কনসোলে ফায়ারবেস রিয়েলটাইম ডেটাবেস

5. উপসংহার

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