1. সংক্ষিপ্ত বিবরণ
এই কোডল্যাবে, আপনি Firebase Studio- তে অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে অনুশীলন করবেন যাতে আপনি একটি নতুন ভাষা শিখতে সাহায্য করার জন্য ডিজাইন করা একটি অ্যাপ তৈরি করতে পারেন। এরপর আপনি অ্যাপটিকে পরিমার্জন এবং উন্নত করবেন, ঐচ্ছিকভাবে Firebase অ্যাপ হোস্টিং-এ প্রকাশ করবেন।
তুমি কি শিখবে
- ফায়ারবেস স্টুডিওতে প্রম্পট করার জন্য সেরা অনুশীলন
- কার্যকারিতা যোগ করতে এবং বাগ ঠিক করতে একটি অ্যাপে পুনরাবৃত্তি করুন
- Firebase অ্যাপ হোস্টিং-এ একটি অ্যাপ প্রকাশ করুন এবং অন্যদের সাথে শেয়ার করুন
- অ্যাপ হোস্টিং অ্যাপ ওভারভিউ প্যানেলের মাধ্যমে মূল মেট্রিক্স ট্র্যাক করুন
তোমার যা লাগবে
- আপনার পছন্দের একটি ব্রাউজার, যেমন গুগল ক্রোম
- আপনার Firebase প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট
২. অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার করে আপনার অ্যাপ তৈরি করুন
অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপ তৈরি করতে Firebase-এ Gemini ব্যবহার করে। একই রকম প্রম্পট ব্যবহার করার সময়ও, আপনার ফলাফল এই কোডল্যাবে দেখানো ফলাফলের মতো দেখতে বা কাজ নাও করতে পারে। যদি আপনি আটকে যান, তাহলে আমরা কিছু ফাইলের সেট সরবরাহ করেছি যা আপনি এই কোডল্যাবের বিভিন্ন চেকপয়েন্ট থেকে ল্যাবটি সংগ্রহ করার জন্য আপনার কর্মক্ষেত্রে যোগ করতে পারেন।
- আপনার গুগল অ্যাকাউন্টে লগ ইন করুন এবং ফায়ারবেস স্টুডিও খুলুন।
- "প্রোটোটাইপ অ্যান অ্যাপ উইথ এআই" ফিল্ডে, আপনি যে অ্যাপটি তৈরি করতে চান তার বিবরণ লিখুন। এই কোডল্যাবের জন্য, আপনি এমন একটি অ্যাপ তৈরি করবেন যা আপনাকে গল্প, ফ্ল্যাশকার্ড এবং একজন এআই টিউটরের মাধ্যমে একটি নতুন ভাষা শিখতে সাহায্য করবে। একটি প্রম্পট লিখুন, যেমন:
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 এর কম হতে হবে। - সংরক্ষণ করুন ক্লিক করুন।
- ব্লুপ্রিন্ট আপনার আপডেটগুলি অন্তর্ভুক্ত করা শেষ হলে, Prototype this App এ ক্লিক করুন।
- যেহেতু এই অ্যাপটিতে AI উপাদান রয়েছে, তাই এজেন্ট আপনাকে একটি Gemini কী লিখতে বলবে। আপনার নিজস্ব Gemini API কী যোগ করুন অথবা Gemini API কী তৈরি করতে Auto-generate এ ক্লিক করুন। যদি আপনি Auto-generate এ ক্লিক করেন, তাহলে Firebase Studio একটি Firebase প্রকল্প তৈরি করবে এবং আপনার জন্য একটি Gemini API কী তৈরি করবে।
- অ্যাপ প্রোটোটাইপিং এজেন্ট আপনার অ্যাপের প্রথম সংস্করণ তৈরি করতে অ্যাপ ব্লুপ্রিন্ট ব্যবহার করে। এটি সম্পন্ন হলে, আপনার অ্যাপের প্রিভিউ একটি জেমিনি চ্যাট ইন্টারফেসের পাশাপাশি প্রদর্শিত হবে। আপনার অ্যাপটি পরীক্ষা করার জন্য কিছুক্ষণ সময় নিন। এমনকি যদি এটি আপনার কল্পনার মতো নাও দেখায়, পরবর্তী বিভাগে কীভাবে নতুন কার্যকারিতা যোগ করবেন এবং নকশাটি আরও পরিমার্জন করবেন তা বর্ণনা করা হয়েছে।
৩. (ঐচ্ছিক) কোডটি পান
যদি আপনি আটকে যান অথবা example অ্যাপটি আরও ঘনিষ্ঠভাবে অনুসরণ করতে চান, তাহলে কোডল্যাব জুড়ে বিভিন্ন চেকপয়েন্টে প্রদত্ত নমুনা ফাইলগুলি ব্যবহার করুন।
- ফোল্ডারে থাকা ফাইলগুলি ডাউনলোড করুন।
- ফায়ারবেস স্টুডিওতে, ক্লিক করুন
কোড ভিউ খুলতে কোডে স্যুইচ করুন । - আপনার ডাউনলোড করা ফাইলগুলিকে Firebase Studio-এর Explorer প্যানে টেনে আনুন। ফাইলগুলিকে বিদ্যমান যেকোনো ফাইল প্রতিস্থাপন করার অনুমতি দিন।
- অ্যাপের উদাহরণ সংস্করণ ব্যবহার করে কোডল্যাব চালিয়ে যেতে "প্রোটোটাইপারে স্যুইচ করুন" এ ক্লিক করুন।
৪. আপনার অ্যাপের কার্যকারিতা পরীক্ষা করুন, পুনরাবৃত্তি করুন এবং ডিবাগ করুন
অ্যাপটির প্রিভিউ দেখার সময়, আপনি বাগ বা অপ্রত্যাশিত কার্যকারিতা লক্ষ্য করতে পারেন। অ্যাপটির উদাহরণ সংস্করণে, আমরা নিম্নলিখিত পরিবর্তন এবং সংশোধনগুলি যুক্ত করব:
- এআই স্টোরি জেনারেটরে, ব্যবহারকারীরা ইংরেজিতে সংজ্ঞা পেতে শব্দের শব্দগুলিতে ক্লিক করতে সক্ষম হবেন।
- ফ্ল্যাশকার্ডগুলি ফরাসি ভাষায় প্রদর্শিত হবে, তারপর ক্লিক করলে ইংরেজিতে স্যুইচ করুন।
- ব্যবহারকারীর সেটিংস পৃষ্ঠায় যেতে হবে এবং ফরাসি ভাষা শেখার পরিবর্তে জাপানি ভাষা শেখা শুরু করতে হবে।
লক্ষ্য ১: এআই স্টোরি জেনারেটরে শব্দভাণ্ডার যোগ করুন
ঐচ্ছিক: এই বিন্দু থেকে অ্যাপের উদাহরণ সংস্করণটি ব্যবহার করতে, কোড ভিউতে Firebase Studio-এর Explorer প্যানে এই ফাইলগুলি ডাউনলোড করে টেনে আনুন।
- চ্যাট ইন্টারফেসে, আপনি যে বৈশিষ্ট্যটি যোগ করতে চান তা বর্ণনা করুন:
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. - ক্লিক করুন কোড ভিউ খুলতে কোডে স্যুইচ করুন , যেখানে আপনি আপনার অ্যাপের সমস্ত ফাইল দেখতে পারবেন এবং সরাসরি আপনার কোড পরিবর্তন করতে পারবেন। যদি কোনও বাগ থাকে যা জেমিনি সমাধান করতে সক্ষম না হয়, তাহলে কখনও কখনও ম্যানুয়ালি ফাইল সম্পাদনা করা সহজ হয়। যখন আপনি প্রস্তুত হন, অ্যাপ প্রোটোটাইপিং এজেন্ট ব্যবহার চালিয়ে যেতে প্রোটোটাইপার মোডে স্যুইচ করুন ।
লক্ষ্য ২: ফ্ল্যাশ কার্ডগুলিতে অনুবাদ যোগ করুন
ঐচ্ছিক: এই বিন্দু থেকে অ্যাপের উদাহরণ সংস্করণটি ব্যবহার করতে, কোড ভিউতে Firebase Studio-এর Explorer প্যানে এই ফাইলগুলি ডাউনলোড করে টেনে আনুন।
উপরের পদ্ধতি অনুসরণ করুন, চ্যাট ইন্টারফেস ব্যবহার করে বৈশিষ্ট্যটি বর্ণনা করুন, প্রিভিউ উইন্ডোতে এটি পরীক্ষা করুন, তারপর অতিরিক্ত প্রম্পট ব্যবহার করুন অথবা ফ্ল্যাশ কার্ডগুলিতে অনুবাদ যোগ করতে কোড ভিউ ব্যবহার করুন। একটি প্রম্পট চেষ্টা করুন যেমন:
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.
লক্ষ্য ৩: একটি নতুন ভাষা যোগ করুন
ঐচ্ছিক: এই বিন্দু থেকে অ্যাপের উদাহরণ সংস্করণটি ব্যবহার করতে, কোড ভিউতে Firebase Studio-এর Explorer প্যানে এই ফাইলগুলি ডাউনলোড করে টেনে আনুন।
একটি প্রম্পট চেষ্টা করুন যেমন:
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.
৫. আপনার অ্যাপের ডিজাইনটি পুনরাবৃত্তি করুন
ঐচ্ছিক: এই বিন্দু থেকে অ্যাপের উদাহরণ সংস্করণটি ব্যবহার করতে, কোড ভিউতে Firebase Studio-এর Explorer প্যানে এই ফাইলগুলি ডাউনলোড করে টেনে আনুন।
এখন যেহেতু আপনার অ্যাপটিতে আপনার পছন্দসই সমস্ত কার্যকারিতা রয়েছে, তাই স্টাইলটি নিয়ে কাজ করার সময় এসেছে।
অ্যাপের রঙের স্কিম পরিবর্তন করুন
আপনি কোন রঙগুলি ব্যবহার করতে চান সে সম্পর্কে সুনির্দিষ্ট হতে পারেন, অথবা আপনি অ্যাপ প্রোটোটাইপিং এজেন্টকে নেতৃত্ব দিতে দিতে পারেন। চ্যাট ইন্টারফেসে, আপনি আপনি যে রঙ বা স্টাইল ব্যবহার করতে চান তার একটি ছবি আপলোড করার জন্য সংযুক্তি বিকল্প। আপনি যদি একটি প্রম্পট ব্যবহার করতে পছন্দ করেন, তাহলে চেষ্টা করুন:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
অ্যাপে ব্যবহৃত টেক্সট আপডেট করুন
উদাহরণস্বরূপ, "AI Chatbot Tutor" এর পরিবর্তে আপনি এটিতে কেবল "Chat" বলতে চাইতে পারেন:
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.
প্রম্পটিং এবং ডিবাগিং টিপস
- প্রম্পটের সাহায্য নিন: অ্যাপ প্রোটোটাইপিং এজেন্টকে আপনি কী চান তা ব্যাখ্যা করতে যদি আপনার সমস্যা হয়, তাহলে প্রম্পটটি পরিমার্জন করার জন্য জেমিনিকে গুগলের সাহায্য নিতে বলুন। কার্যকর প্রম্পট সম্পর্কে আরও জানুন ।
- অন্যান্য ডিভাইসে পরীক্ষা করুন: প্রোটোটাইপ মোডে, ক্লিক করুন
অন্যান্য ডিভাইসে আপনার অ্যাপ পরীক্ষা করতে প্রিভিউ লিঙ্ক শেয়ার করুন । - বিল্ট-ইন টুল ব্যবহার করুন: কোড ভিউতে, আপনার অ্যাপ পরিদর্শন, ডিবাগ এবং অডিট করতে ফায়ারবেস স্টুডিওর বিল্ট-ইন ডিবাগিং এবং রিপোর্টিং বৈশিষ্ট্যগুলি ব্যবহার করুন।
- সহজভাবে শুরু করুন: একবারে একটি বৈশিষ্ট্য নিয়ে কাজ করুন। আপনার প্রোটোটাইপে কিছু মৌলিক বৈশিষ্ট্য দিয়ে শুরু করার কথা বিবেচনা করুন, তারপর যখন সেগুলি প্রত্যাশা অনুযায়ী কাজ করবে তখন তা প্রসারিত করুন।
- বাগ বর্ণনা করুন: যদি কিছু কাজ না করে, তাহলে অ্যাপ প্রোটোটাইপিং এজেন্টের কাছে বর্তমান আচরণ বর্ণনা করুন, তারপরে আপনার পছন্দসই আচরণটি লিখুন।
- প্রয়োজনে রোল ব্যাক করুন: যখন অ্যাপ প্রোটোটাইপিং এজেন্ট কোনও প্রম্পট ভুল বোঝে বা সমাধান করা কঠিন সমস্যা উপস্থাপন করে, তখন অ্যাপটির পূর্ববর্তী সংস্করণে ফিরে যেতে পুনরুদ্ধার বোতামে ক্লিক করুন এবং একটি ভিন্ন প্রম্পট দিয়ে আবার চেষ্টা করুন।
৬. (ঐচ্ছিক) আপনার অ্যাপ প্রকাশ করুন
ঐচ্ছিক: এই বিন্দু থেকে অ্যাপের উদাহরণ সংস্করণটি ব্যবহার করতে, কোড ভিউতে Firebase Studio-এর Explorer প্যানে এই ফাইলগুলি ডাউনলোড করে টেনে আনুন।
অ্যাপটি পরীক্ষা করে দেখার পর এবং এতে সন্তুষ্ট হওয়ার পর, আপনি Firebase অ্যাপ হোস্টিং এর মাধ্যমে এটি ওয়েবে প্রকাশ করতে পারেন।
- একটি নতুন Firebase প্রকল্প তৈরি করতে এবং অ্যাপ হোস্টিং সেটআপ শুরু করতে Publish এ ক্লিক করুন। Publish your app প্যানেলটি প্রদর্শিত হবে।
- Firebase প্রকল্পের ধাপে, আপনার জন্য তৈরি করা Firebase প্রকল্পের নামটি নোট করুন, তারপর Next এ ক্লিক করুন।
- লিঙ্ক ক্লাউড বিলিং অ্যাকাউন্ট ধাপে, নিম্নলিখিতগুলির মধ্যে একটি বেছে নিন:
- আপনার Firebase প্রকল্পের সাথে যে ক্লাউড বিলিং অ্যাকাউন্টটি লিঙ্ক করতে চান তা নির্বাচন করুন।
- যদি আপনার ক্লাউড বিলিং অ্যাকাউন্ট না থাকে অথবা আপনি একটি নতুন অ্যাকাউন্ট তৈরি করতে চান, তাহলে "একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করুন" এ ক্লিক করুন। এটি Google ক্লাউড টেক্সটটি খুলবে, যেখানে আপনি একটি নতুন স্ব-পরিষেবা ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করতে পারবেন। অ্যাকাউন্ট তৈরি করার পরে, Firebase Studio-তে ফিরে যান এবং Link Cloud Billing তালিকা থেকে অ্যাকাউন্টটি নির্বাচন করুন।
- পরবর্তী ক্লিক করুন। ফায়ারবেস স্টুডিও আপনার কর্মক্ষেত্রের সাথে সম্পর্কিত প্রকল্পের সাথে বিলিং অ্যাকাউন্টটি লিঙ্ক করে, যা আপনি যখন একটি জেমিনি API কী স্বয়ংক্রিয়ভাবে তৈরি করেন অথবা যখন আপনি প্রকাশ করুন ক্লিক করেন তখন তৈরি হয়। তারপর, অ্যাপ হোস্টিং গুগল ক্লাউডে আপনার অ্যাপের জন্য একটি সম্পূর্ণরূপে পরিচালিত পরিবেশ সেট আপ করে।
- Create your first rollout এ ক্লিক করুন। Firebase Studio অ্যাপ হোস্টিং রোলআউট চালু করে। এটি সম্পূর্ণ হতে দশ মিনিট পর্যন্ত সময় লাগতে পারে। পর্দার আড়ালে কী ঘটছে সে সম্পর্কে আরও জানতে, The App Hosting build process দেখুন।
- রোলআউট সম্পূর্ণ হলে, অ্যাপ ওভারভিউতে একটি URL এবং অ্যাপ হোস্টিং পর্যবেক্ষণযোগ্যতা দ্বারা চালিত অ্যাপ অন্তর্দৃষ্টি প্রদর্শিত হবে। Firebase-জেনারেটেড ডোমেনের পরিবর্তে একটি কাস্টম ডোমেন (যেমন example.com বা app.example.com) ব্যবহার করতে, আপনি Firebase টেক্সটে একটি কাস্টম ডোমেন যোগ করতে পারেন।
অ্যাপ হোস্টিং সম্পর্কে আরও তথ্যের জন্য, অ্যাপ হোস্টিং এবং এটি কীভাবে কাজ করে তা বুঝুন দেখুন।
৭. (ঐচ্ছিক) আপনার অ্যাপটি পর্যবেক্ষণ করুন
অ্যাপ হোস্টিং অ্যাপ ওভারভিউ প্যানেল আপনার অ্যাপ সম্পর্কে গুরুত্বপূর্ণ মেট্রিক্স এবং তথ্য প্রদান করে, যা আপনাকে অ্যাপ হোস্টিংয়ের অন্তর্নির্মিত পর্যবেক্ষণ সরঞ্জামগুলি ব্যবহার করে আপনার ওয়েব অ্যাপের কর্মক্ষমতা পর্যবেক্ষণ করতে দেয়। আপনার সাইটটি চালু হওয়ার পরে, আপনি প্রকাশ করুন এ ক্লিক করে ওভারভিউ অ্যাক্সেস করতে পারেন। এই প্যানেল থেকে, আপনি যা করতে পারেন:
- আপনার অ্যাপের একটি নতুন সংস্করণ প্রকাশ করতে Create rollout এ ক্লিক করুন।
- আপনার অ্যাপের লিঙ্কটি শেয়ার করুন অথবা ভিজিট ইওর অ্যাপ থেকে সরাসরি আপনার অ্যাপটি খুলুন।
- গত ৭ দিনে আপনার অ্যাপের পারফর্ম্যান্সের একটি সারাংশ পর্যালোচনা করুন, যার মধ্যে মোট অনুরোধের সংখ্যা এবং আপনার সর্বশেষ রোলআউটের অবস্থা অন্তর্ভুক্ত রয়েছে। Firebase টেক্সটে আরও তথ্য অ্যাক্সেস করতে বিস্তারিত দেখুন ক্লিক করুন।
- HTTP স্ট্যাটাস কোড অনুসারে বিভক্ত, গত 24 ঘন্টায় আপনার অ্যাপ কতগুলি অনুরোধ পেয়েছে তার একটি গ্রাফ দেখুন।
আপনি যদি অ্যাপ ওভারভিউ প্যানেলটি বন্ধ করে দেন, তাহলে আপনি যেকোনো সময় প্রকাশ করুন এ ক্লিক করে এটি পুনরায় খুলতে পারেন।
অ্যাপ হোস্টিং রোলআউট পরিচালনা এবং পর্যবেক্ষণ সম্পর্কে আরও জানুন "রোলআউট এবং রিলিজ পরিচালনা করুন" বিভাগে।
৮. উপসংহার
অভিনন্দন! আপনি Firebase Studio ব্যবহার করে সফলভাবে একটি অ্যাপ তৈরি করেছেন। অ্যাপটিতে আপনি আরও অনেক কিছু যোগ করতে পারেন, যেমন একটি বর্ধিত অভিধান, আরও ভাষা, অডিও, অ্যানিমেশন, অথবা একটি অসুবিধা নির্বাচন। আপনার অ্যাপটি ব্যবহার করে খেলতে বা নতুন কিছু তৈরি করতে দ্বিধা করবেন না।