1. ওভারভিউ
এই কোডল্যাবে, আপনি একটি নতুন ভাষা শিখতে সাহায্য করার জন্য ডিজাইন করা একটি অ্যাপ তৈরি করতে Firebase স্টুডিওতে অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে অনুশীলন করবেন। তারপরে আপনি অ্যাপটিকে পরিমার্জিত ও উন্নত করবেন, ঐচ্ছিকভাবে Firebase অ্যাপ হোস্টিং-এ প্রকাশ করবেন।
আপনি কি শিখবেন
- ফায়ারবেস স্টুডিওতে প্রম্পট করার জন্য সর্বোত্তম অনুশীলন
- কার্যকারিতা যোগ করতে এবং বাগগুলি ঠিক করতে একটি অ্যাপে পুনরাবৃত্তি করুন৷
- Firebase অ্যাপ হোস্টিং-এ একটি অ্যাপ প্রকাশ করুন এবং অন্যদের সাথে শেয়ার করুন
- অ্যাপ হোস্টিং অ্যাপ ওভারভিউ প্যানেলের মাধ্যমে কী মেট্রিক্স ট্র্যাক করুন
আপনি কি প্রয়োজন হবে
- আপনার পছন্দের একটি ব্রাউজার, যেমন Google Chrome
- আপনার ফায়ারবেস প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট
2. অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে আপনার অ্যাপ তৈরি করুন
অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপ তৈরি করতে Firebase-এ Gemini ব্যবহার করে। এমনকি অভিন্ন প্রম্পট ব্যবহার করার সময়ও, আপনার ফলাফল এই কোডল্যাবে বৈশিষ্ট্যযুক্ত একটির মতো দেখতে বা কাজ নাও করতে পারে। আপনি আটকে গেলে, আমরা এই কোডল্যাব জুড়ে বেশ কয়েকটি চেকপয়েন্টে ল্যাব বাছাই করার জন্য আপনার কর্মক্ষেত্রে যোগ করতে পারেন এমন ফাইলগুলির একটি সেট সরবরাহ করেছি।
- আপনার Google অ্যাকাউন্টে লগ ইন করুন এবং Firebase স্টুডিও খুলুন।
- AI ক্ষেত্রের প্রোটোটাইপ একটি অ্যাপে , আপনি যে অ্যাপটি তৈরি করতে চান তার একটি বিবরণ লিখুন। এই কোডল্যাবের জন্য, আপনি একটি অ্যাপ তৈরি করবেন যা আপনাকে গল্প, ফ্ল্যাশকার্ড এবং একটি এআই টিউটরের মাধ্যমে একটি নতুন ভাষা শিখতে সাহায্য করবে। একটি প্রম্পট লিখুন, যেমন:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future.
- এআই সহ প্রোটোটাইপ ক্লিক করুন।
- প্রস্তাবিত অ্যাপ ব্লুপ্রিন্ট পর্যালোচনা করুন। ক্লিক করুন
ব্লুপ্রিন্ট সম্পাদনা করতে কাস্টমাইজ করুন :
- সহজে কথা বলতে অ্যাপের নাম পরিবর্তন করুন।
- নিম্নলিখিত রঙের স্কিম পরিবর্তন করুন:
আপনি যদি একটি চিত্র হিসাবে আপনার রঙের স্কিম বা বিন্যাস জমা দিতে পছন্দ করেন তবে ক্লিক করুনPrimary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
প্রম্পট বা ব্লুপ্রিন্ট প্রক্রিয়া চলাকালীন একটি ছবি আপলোড করার জন্য সংযুক্তি বিকল্প। ছবি 3MiB এর কম হতে হবে।
- সংরক্ষণ করুন ক্লিক করুন.
- ব্লুপ্রিন্ট আপনার আপডেটগুলি অন্তর্ভুক্ত করা শেষ হলে, এই অ্যাপটির প্রোটোটাইপ ক্লিক করুন।
- যেহেতু এই অ্যাপটিতে AI উপাদান রয়েছে, তাই এজেন্ট আপনাকে একটি মিথুন কীর জন্য অনুরোধ করে। আপনার নিজস্ব Gemini API কী যোগ করুন অথবা একটি Gemini API কী তৈরি করতে স্বয়ংক্রিয়-জেনারেট ক্লিক করুন। আপনি যদি স্বয়ংক্রিয়-জেনারেট ক্লিক করেন, Firebase স্টুডিও একটি Firebase প্রকল্প তৈরি করে এবং আপনার জন্য একটি Gemini API কী তৈরি করে।
- অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপের প্রথম সংস্করণ তৈরি করতে অ্যাপ ব্লুপ্রিন্ট ব্যবহার করে। এটি হয়ে গেলে, আপনার অ্যাপের পূর্বরূপ একটি মিথুন চ্যাট ইন্টারফেসের পাশাপাশি প্রদর্শিত হবে। আপনার অ্যাপ্লিকেশন পরীক্ষা করার জন্য একটি মুহূর্ত সময় নিন. এমনকি আপনি যেভাবে কল্পনা করেছেন তা ঠিক দেখতে না পেলেও, পরবর্তী বিভাগটি বর্ণনা করে যে কীভাবে নতুন কার্যকারিতা যোগ করা যায় এবং নকশাটি পরিমার্জিত করা যায়।
3. (ঐচ্ছিক) কোড পান
আপনি যদি আটকে যান বা উদাহরণ অ্যাপের সাথে আরও ঘনিষ্ঠভাবে অনুসরণ করতে চান তবে কোডল্যাব জুড়ে বিভিন্ন চেকপয়েন্টে প্রদত্ত নমুনা ফাইলগুলি ব্যবহার করুন।
- ফোল্ডারে ফাইল ডাউনলোড করুন।
- ফায়ারবেস স্টুডিওতে ক্লিক করুন
কোড ভিউ খুলতে কোডে স্যুইচ করুন ।
- আপনার ডাউনলোড করা ফাইলগুলি Firebase স্টুডিওর এক্সপ্লোরার প্যানে টেনে আনুন। ফাইলগুলিকে যেকোনো বিদ্যমান ফাইল প্রতিস্থাপন করার অনুমতি দিন।
- অ্যাপের উদাহরণ সংস্করণ ব্যবহার করে কোডল্যাব চালিয়ে যেতে প্রোটোটাইপারে স্যুইচ করুন ক্লিক করুন।
4. আপনার অ্যাপের কার্যকারিতা পরীক্ষা করুন, পুনরাবৃত্তি করুন এবং ডিবাগ করুন
আপনি অ্যাপের পূর্বরূপ দেখার সময়, আপনি বাগ বা অপ্রত্যাশিত কার্যকারিতা লক্ষ্য করতে পারেন। অ্যাপের উদাহরণ সংস্করণে, আমরা নিম্নলিখিত পরিবর্তন এবং সংশোধনগুলি যোগ করব:
- এআই স্টোরি জেনারেটরে, ব্যবহারকারীদের ইংরেজিতে একটি সংজ্ঞা পেতে ভোকাব শব্দগুলিতে ক্লিক করতে সক্ষম হওয়া উচিত।
- ফ্ল্যাশকার্ডগুলি ফরাসি ভাষায় উপস্থিত হওয়া উচিত, তারপরে ক্লিক করা হলে ইংরেজিতে স্যুইচ করুন৷
- ব্যবহারকারীর একটি সেটিংস পৃষ্ঠায় যেতে এবং ফ্রেঞ্চের পরিবর্তে জাপানি ভাষা শেখার জন্য স্যুইচ করতে সক্ষম হওয়া উচিত।
লক্ষ্য 1: এআই স্টোরি জেনারেটরে ভোকাব শব্দ যোগ করুন
ঐচ্ছিক: এই পয়েন্ট থেকে অ্যাপের উদাহরণ সংস্করণ ব্যবহার করতে, কোড ভিউতে Firebase স্টুডিওর এক্সপ্লোরার প্যানে এই ফাইলগুলি ডাউনলোড করুন এবং টেনে আনুন।
- চ্যাট ইন্টারফেসে, আপনি যে বৈশিষ্ট্যটি যোগ করতে চান তা বর্ণনা করুন:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked.
- প্রিভিউ উইন্ডোতে অ্যাপটি পরীক্ষা করুন। আপনি পরে অ্যাপটির চেহারা এবং অনুভূতি আপডেট করবেন, তাই আপাতত শুধুমাত্র কার্যকারিতার উপর ফোকাস করার চেষ্টা করুন।
- যদি আপনার অ্যাপটি আপনার প্রত্যাশা অনুযায়ী কাজ না করে, তাহলে অ্যাপ প্রোটোটাইপিং এজেন্টকে সামঞ্জস্য করার জন্য অনুরোধ করা চালিয়ে যান। যেমন:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance.
- ক্লিক করুন
কোড ভিউ খুলতে কোডে স্যুইচ করুন , যেখানে আপনি আপনার অ্যাপের সমস্ত ফাইল দেখতে পারবেন এবং সরাসরি আপনার কোড পরিবর্তন করতে পারবেন। যদি কোনও বাগ থাকে যা মিথুন সমাধান করতে সক্ষম না হয়, তবে কখনও কখনও ম্যানুয়ালি ফাইল সম্পাদনা করা সহজ। আপনি প্রস্তুত হলে, অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার চালিয়ে যেতে প্রোটোটাইপার মোডে স্যুইচ করুন ।
লক্ষ্য 2: ফ্ল্যাশ কার্ডে অনুবাদ যোগ করুন
ঐচ্ছিক: এই পয়েন্ট থেকে অ্যাপের উদাহরণ সংস্করণ ব্যবহার করতে, কোড ভিউতে Firebase স্টুডিওর এক্সপ্লোরার প্যানে এই ফাইলগুলি ডাউনলোড করুন এবং টেনে আনুন।
উপরের মত একই প্রক্রিয়া অনুসরণ করুন, বৈশিষ্ট্যটি বর্ণনা করতে চ্যাট ইন্টারফেস ব্যবহার করে, পূর্বরূপ উইন্ডোতে এটি পরীক্ষা করুন, তারপর ফ্ল্যাশ কার্ডগুলিতে অনুবাদ যোগ করতে অতিরিক্ত প্রম্পট বা কোড ভিউ ব্যবহার করুন। একটি প্রম্পট চেষ্টা করুন যেমন:
The flash cards should appear in the target language to start, then switch to
English when clicked.
কখনও কখনও, অ্যাপ প্রোটোটাইপিং এজেন্ট চিনতে পারে না যখন একটি বাগ আছে। আপনি কী দেখছেন এবং কী ঠিক করা দরকার তা বর্ণনা করা আরও কার্যকর হতে পারে, যেমন:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
লক্ষ্য 3: একটি নতুন ভাষা যোগ করুন
ঐচ্ছিক: এই পয়েন্ট থেকে অ্যাপের উদাহরণ সংস্করণ ব্যবহার করতে, কোড ভিউতে Firebase স্টুডিওর এক্সপ্লোরার প্যানে এই ফাইলগুলি ডাউনলোড করুন এবং টেনে আনুন।
একটি প্রম্পট চেষ্টা করুন যেমন:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. আপনার অ্যাপের ডিজাইনে পুনরাবৃত্তি করুন
ঐচ্ছিক: এই পয়েন্ট থেকে অ্যাপের উদাহরণ সংস্করণ ব্যবহার করতে, কোড ভিউতে Firebase স্টুডিওর এক্সপ্লোরার প্যানে এই ফাইলগুলি ডাউনলোড করুন এবং টেনে আনুন।
এখন যেহেতু আপনার অ্যাপটিতে আপনি চান এমন সমস্ত কার্যকারিতা রয়েছে, এটি স্টাইলে কাজ করার সময়।
অ্যাপের কালার স্কিম পরিবর্তন করুন
আপনি কোন রঙগুলি ব্যবহার করতে চান সে সম্পর্কে আপনি নির্দিষ্ট হতে পারেন বা আপনি অ্যাপ প্রোটোটাইপিং এজেন্টকে নেতৃত্ব দিতে দিতে পারেন৷ চ্যাট ইন্টারফেসে, আপনি ক্লিক করতে পারেন আপনি যে রঙ বা শৈলী ব্যবহার করতে চান তার একটি ছবি আপলোড করার জন্য সংযুক্তি বিকল্প। আপনি যদি একটি প্রম্পট ব্যবহার করতে পছন্দ করেন তবে চেষ্টা করুন:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
অ্যাপে ব্যবহৃত টেক্সট আপডেট করুন
উদাহরণস্বরূপ, "এআই চ্যাটবট টিউটর" এর পরিবর্তে আপনি এটিকে কেবল "চ্যাট" বলতে চাইতে পারেন:
Change the text "AI Chatbot Tutor" to "Chat".
অ্যাপটিকে আরও স্বজ্ঞাত করতে এর UI সামঞ্জস্য করুন
উদাহরণস্বরূপ, পাঠ্য জমা দেওয়ার জন্য ব্যবহারকারীকে একটি বোতাম টিপতে হবে তার পরিবর্তে, আপনি ব্যবহারকারীকে তাদের কীবোর্ডে Return
টিপতে অনুমতি দিতে চাইতে পারেন:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
হালকা এবং অন্ধকার মোডের মধ্যে বেছে নিতে ব্যবহারকারীর জন্য বিকল্প যোগ করুন
অনেক ব্যবহারকারী অ্যাপের জন্য হালকা বা গাঢ় থিমের মধ্যে বেছে নেওয়ার বিকল্প পছন্দ করতে পারেন। এই সুইচটি খুঁজে পাওয়ার যৌক্তিক জায়গা কোথায় হবে তা বিবেচনা করুন:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
প্রম্পটিং এবং ডিবাগিং টিপস
- প্রম্পটগুলির জন্য সাহায্য পান: অ্যাপ প্রোটোটাইপিং এজেন্টকে আপনি কী চান তা ব্যাখ্যা করতে আপনার সমস্যা হলে, প্রম্পটটি পরিমার্জিত করতে সাহায্য করার জন্য Google-এর কাছে Gemini বলার চেষ্টা করুন৷ কার্যকর প্রম্পটিং সম্পর্কে আরও জানুন ।
- অন্যান্য ডিভাইসে পরীক্ষা করুন: প্রোটোটাইপ মোডে, ক্লিক করুন
অন্যান্য ডিভাইসে আপনার অ্যাপ পরীক্ষা করতে প্রিভিউ লিঙ্ক শেয়ার করুন ।
- অন্তর্নির্মিত সরঞ্জামগুলি ব্যবহার করুন: কোড ভিউতে, আপনার অ্যাপ পরিদর্শন, ডিবাগ এবং অডিট করতে Firebase স্টুডিওর অন্তর্নির্মিত ডিবাগিং এবং রিপোর্টিং বৈশিষ্ট্যগুলি ব্যবহার করুন৷
- সহজ শুরু করুন: একবারে একটি বৈশিষ্ট্যে কাজ করুন। আপনার প্রোটোটাইপের বৈশিষ্ট্যগুলির একটি প্রাথমিক সেট দিয়ে শুরু করার কথা বিবেচনা করুন, তারপরে প্রত্যাশিতভাবে কাজ করার পরে প্রসারিত করুন।
- বাগগুলি বর্ণনা করুন: যদি কিছু কাজ না করে তবে অ্যাপ প্রোটোটাইপিং এজেন্টের কাছে বর্তমান আচরণ বর্ণনা করুন, তারপরে আপনি যে আচরণটি চান তা অনুসরণ করুন।
- প্রয়োজনে রোল ব্যাক করুন: যখন অ্যাপ প্রোটোটাইপিং এজেন্ট কোনও প্রম্পটকে ভুল বোঝে বা সমাধান করা কঠিন সমস্যা প্রবর্তন করে, তখন অ্যাপের আগের সংস্করণে ফিরে যেতে পুনরুদ্ধার বোতামে ক্লিক করুন এবং একটি ভিন্ন প্রম্পট দিয়ে আবার চেষ্টা করুন।
6. (ঐচ্ছিক) আপনার অ্যাপ প্রকাশ করুন
ঐচ্ছিক: এই পয়েন্ট থেকে অ্যাপের উদাহরণ সংস্করণ ব্যবহার করতে, কোড ভিউতে Firebase স্টুডিওর এক্সপ্লোরার প্যানে এই ফাইলগুলি ডাউনলোড করুন এবং টেনে আনুন।
আপনি অ্যাপটি পরীক্ষা করার পরে এবং এতে সন্তুষ্ট হওয়ার পরে, আপনি Firebase অ্যাপ হোস্টিং এর মাধ্যমে এটিকে ওয়েবে প্রকাশ করতে পারেন।
- একটি নতুন ফায়ারবেস প্রকল্প তৈরি করতে এবং অ্যাপ হোস্টিং সেটআপ শুরু করতে পাবলিশ এ ক্লিক করুন। আপনার অ্যাপ প্রকাশ করুন ফলকটি প্রদর্শিত হবে।
- Firebase প্রকল্পের ধাপে, আপনার জন্য তৈরি করা Firebase প্রকল্পের নামটি নোট করুন, তারপর Next এ ক্লিক করুন।
- লিঙ্ক ক্লাউড বিলিং অ্যাকাউন্ট ধাপে, নিম্নলিখিতগুলির মধ্যে একটি বেছে নিন:
- ক্লাউড বিলিং অ্যাকাউন্টটি নির্বাচন করুন যা আপনি আপনার Firebase প্রকল্পের সাথে লিঙ্ক করতে চান।
- আপনার যদি একটি ক্লাউড বিলিং অ্যাকাউন্ট না থাকে বা একটি নতুন একটি তৈরি করতে চান, একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করুন ক্লিক করুন। এটি Google ক্লাউড পাঠ্য খোলে, যেখানে আপনি একটি নতুন স্ব-পরিষেবা ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করতে পারেন। আপনি অ্যাকাউন্ট তৈরি করার পরে, Firebase স্টুডিওতে ফিরে যান এবং লিঙ্ক ক্লাউড বিলিং তালিকা থেকে অ্যাকাউন্টটি নির্বাচন করুন।
- পরবর্তী ক্লিক করুন. Firebase স্টুডিও আপনার কর্মক্ষেত্রের সাথে যুক্ত প্রকল্পের সাথে বিলিং অ্যাকাউন্ট লিঙ্ক করে, যখন আপনি একটি Gemini API কী স্বয়ংক্রিয়ভাবে তৈরি করেন বা যখন আপনি প্রকাশ করুন ক্লিক করেন তখন তৈরি হয়। তারপরে, অ্যাপ হোস্টিং Google ক্লাউডে আপনার অ্যাপের জন্য একটি সম্পূর্ণ-পরিচালিত পরিবেশ সেট আপ করে।
- আপনার প্রথম রোলআউট তৈরি করুন ক্লিক করুন। Firebase স্টুডিও অ্যাপ হোস্টিং রোলআউট চালু করেছে। এটি সম্পূর্ণ হতে দশ মিনিট পর্যন্ত সময় লাগতে পারে। পর্দার আড়ালে কী ঘটছে সে সম্পর্কে আরও জানতে, অ্যাপ হোস্টিং বিল্ড প্রক্রিয়া দেখুন।
- রোলআউট সম্পূর্ণ হলে, অ্যাপ ওভারভিউ অ্যাপ হোস্টিং পর্যবেক্ষণযোগ্যতা দ্বারা চালিত একটি URL এবং অ্যাপ অন্তর্দৃষ্টি সহ প্রদর্শিত হয়। Firebase-জেনারেটেড ডোমেনের পরিবর্তে একটি কাস্টম ডোমেন (যেমন example.com বা app.example.com) ব্যবহার করতে, আপনি Firebase টেক্সটে একটি কাস্টম ডোমেন যোগ করতে পারেন।
অ্যাপ হোস্টিং সম্পর্কে আরও তথ্যের জন্য, অ্যাপ হোস্টিং বুঝতে এবং এটি কীভাবে কাজ করে দেখুন।
7. (ঐচ্ছিক) আপনার অ্যাপ মনিটর করুন
অ্যাপ হোস্টিং অ্যাপ ওভারভিউ প্যানেল আপনার অ্যাপ সম্পর্কে মূল মেট্রিক্স এবং তথ্য প্রদান করে, আপনাকে অ্যাপ হোস্টিং-এর অন্তর্নির্মিত পর্যবেক্ষণ টুল ব্যবহার করে আপনার ওয়েব অ্যাপের কর্মক্ষমতা নিরীক্ষণ করতে দেয়। আপনার সাইট রোল আউট হওয়ার পরে, আপনি প্রকাশ করুন ক্লিক করে ওভারভিউ অ্যাক্সেস করতে পারেন। এই প্যানেল থেকে, আপনি করতে পারেন:
- আপনার অ্যাপের একটি নতুন সংস্করণ প্রকাশ করতে রোলআউট তৈরি করুন ক্লিক করুন৷
- আপনার অ্যাপের লিঙ্কটি শেয়ার করুন বা আপনার অ্যাপটি দেখুন সরাসরি আপনার অ্যাপ খুলুন।
- অনুরোধের মোট সংখ্যা এবং আপনার সাম্প্রতিক রোলআউটের স্থিতি সহ গত 7 দিনে আপনার অ্যাপের কর্মক্ষমতার একটি সারসংক্ষেপ পর্যালোচনা করুন। Firebase টেক্সটে আরও তথ্য অ্যাক্সেস করতে বিশদ বিবরণ দেখুন ক্লিক করুন।
- এইচটিটিপি স্ট্যাটাস কোড দ্বারা বিভক্ত, গত 24 ঘন্টায় আপনার অ্যাপটি কতগুলি অনুরোধ পেয়েছে তার সংখ্যার একটি গ্রাফ দেখুন৷
আপনি যদি অ্যাপ ওভারভিউ প্যানেলটি বন্ধ করে দেন, আপনি যে কোনো সময় প্রকাশ করুন এ ক্লিক করে এটি পুনরায় খুলতে পারেন।
ম্যানেজ রোলআউটস এবং রিলিজগুলিতে অ্যাপ হোস্টিং রোলআউটগুলি পরিচালনা এবং পর্যবেক্ষণ সম্পর্কে আরও জানুন৷
8. উপসংহার
অভিনন্দন! আপনি Firebase স্টুডিও ব্যবহার করে সফলভাবে একটি অ্যাপ তৈরি করেছেন। অ্যাপটিতে আপনি আরও অনেক কিছু যোগ করতে পারেন, যেমন একটি প্রসারিত অভিধান, আরও ভাষা, অডিও, অ্যানিমেশন বা একটি অসুবিধা নির্বাচন৷ নির্দ্বিধায় আপনার অ্যাপের সাথে খেলতে থাকুন বা নতুন কিছু তৈরি করুন।