ফ্লটার ইউজার ইন্টারফেস তৈরি করার জন্য একটি কোডিং সহকারী টুল তৈরি করুন, বা আপনি দ্রুত পুনরাবৃত্তি করতে চান এমন কোনো কোড উপাদান। ইউজার ইন্টারফেস তৈরি করা মজাদার এবং ফলপ্রসূ হতে পারে, কিন্তু এটাও কঠিন কাজ। এটি কেবল কোডটি সঠিক হওয়ার প্রশ্নই নয়, এটি দেখতে এবং সঠিক অনুভব করা এবং আপনার দলকে একটি ডিজাইনের দিকনির্দেশের সাথে একমত হওয়াও।
এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে ফ্লাটার থিম এজেন্টকে প্রসারিত করতে হয়, একটি এআই-চালিত কোড সহায়তা টুল যা Google-এর ফ্লাটার ডেভেলপার রিলেশনস টিম দ্বারা নির্মিত। এই ওপেন সোর্স প্রজেক্টটি মাইক্রোসফ্ট ভিজ্যুয়াল স্টুডিও কোড (ভিএস কোড) এর জন্য একটি এক্সটেনশন যা একটি ফ্লাটার থিম বা থিমডেটা অবজেক্টের নির্দিষ্ট উপাদান তৈরি করে, যার মধ্যে রঙের স্কিম, পাঠ্য শৈলী এবং বোতাম শৈলী রয়েছে। এই বিদ্যমান ফাংশনগুলিকে আপনার জন্য আরও ভালভাবে কাজ করার জন্য আপনি প্রকল্পটি সংশোধন করতে পারেন, বা আপনার উন্নয়ন কর্মপ্রবাহকে আরও ভালভাবে সমর্থন করার জন্য নতুন কমান্ড তৈরি করতে পারেন।
যারা এটি তৈরি করেছেন তাদের কাছ থেকে অন্তর্দৃষ্টি সহ প্রকল্পের ভিডিও ওভারভিউ এবং কীভাবে এটিকে প্রসারিত করতে হয়, AI ফ্লাটার কোড জেনারেটর - Google AI দিয়ে তৈরি করুন দেখুন। অন্যথায় আপনি নীচের নির্দেশাবলী অনুসরণ করে প্রকল্পটি প্রসারিত করা শুরু করতে পারেন।
চিত্র 1. ফ্লটার থিম এজেন্ট ভিএস কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে চলছে।
প্রকল্প সেটআপ
এই নির্দেশাবলী আপনাকে বিকাশ এবং পরীক্ষার জন্য ফ্লটার থিম এজেন্ট প্রজেক্ট সেট আপ করার মাধ্যমে নিয়ে যায়। সাধারণ পদক্ষেপগুলি হল কিছু পূর্বশর্ত সফ্টওয়্যার ইনস্টল করা, কয়েকটি পরিবেশের ভেরিয়েবল সেট করা, কোড সংগ্রহস্থল থেকে প্রকল্পটি ক্লোন করা এবং কনফিগারেশন ইনস্টলেশন চালানো।
পূর্বশর্ত ইনস্টল করুন
ফ্লাটার থিম এজেন্ট প্রকল্পটি মাইক্রোসফ্ট ভিজ্যুয়াল স্টুডিও কোড (ভিএস কোড) এর একটি এক্সটেনশন হিসাবে চলে এবং প্যাকেজ পরিচালনা করতে এবং অ্যাপ্লিকেশন চালানোর জন্য Node.js এবং npm ব্যবহার করে। নিম্নলিখিত ইনস্টলেশন নির্দেশাবলী একটি লিনাক্স হোস্ট মেশিনের জন্য।
প্রয়োজনীয় সফ্টওয়্যার ইনস্টল করতে:
- আপনার প্ল্যাটফর্মের জন্য ভিজ্যুয়াল স্টুডিও কোড ইনস্টল করুন।
- আপনার প্ল্যাটফর্মের জন্য ইনস্টলেশন নির্দেশাবলী অনুসরণ করে
nodeএবংnpmইনস্টল করুন। - আপনি যদি ইতিমধ্যে VS কোডের জন্য Flutter ইনস্টল না করে থাকেন, তাহলে ইনস্টলেশন নির্দেশাবলী অনুসরণ করুন।
প্রকল্পটি ক্লোন করুন এবং কনফিগার করুন
প্রজেক্ট কোড ডাউনলোড করুন এবং প্রয়োজনীয় নির্ভরতা ডাউনলোড করতে এবং প্রোজেক্ট কনফিগার করতে npm ইনস্টলেশন কমান্ড ব্যবহার করুন। প্রোজেক্ট সোর্স কোড পুনরুদ্ধার করতে আপনার গিট সোর্স কন্ট্রোল সফ্টওয়্যার প্রয়োজন।
প্রকল্প কোড ডাউনলোড এবং কনফিগার করতে:
নিম্নলিখিত কমান্ড ব্যবহার করে গিট সংগ্রহস্থল ক্লোন করুন।
git clone https://github.com/google/generative-ai-docs`ঐচ্ছিকভাবে, স্পার্স চেকআউট ব্যবহার করার জন্য আপনার স্থানীয় গিট রিপোজিটরি কনফিগার করুন, যাতে আপনার কাছে ডক্স এজেন্ট প্রকল্পের জন্য শুধুমাত্র ফাইল থাকে।
cd generative-ai-docs/ git sparse-checkout init --cone git sparse-checkout set examples/gemini/node/flutter_theme_agentফ্লটার থিম এজেন্ট প্রজেক্ট রুট ডিরেক্টরিতে নেভিগেট করুন।
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/নির্ভরতা ডাউনলোড করতে এবং প্রকল্পটি কনফিগার করতে ইনস্টল কমান্ডটি চালান:
npm install
কনফিগার এবং এক্সটেনশন পরীক্ষা
আপনি এখন আপনার ডিভাইসে VS কোডে ডেভেলপমেন্ট এক্সটেনশন হিসাবে ফ্লটার থিম এজেন্ট চালিয়ে আপনার ইনস্টলেশন পরীক্ষা করতে সক্ষম হবেন। পরীক্ষাটি একটি পৃথক VS কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডো খোলে যেখানে নতুন এক্সটেনশন উপলব্ধ। এই নতুন উইন্ডোতে, আপনি API কী কনফিগার করেন এক্সটেনশনটি Google Gemini API অ্যাক্সেস করতে ব্যবহার করে।
আপনার সেটআপ কনফিগার এবং পরীক্ষা করতে:
- ভিএস কোড অ্যাপ্লিকেশন শুরু করুন।
- ভিএস কোডে, ফাইল > নতুন উইন্ডো নির্বাচন করে একটি নতুন উইন্ডো তৈরি করুন।
- ফ্লাটার থিম এজেন্ট প্রজেক্টটি খুলুন ফাইল > ওপেন ফোল্ডার নির্বাচন করে, এবং
flutter_theme_agent/ফোল্ডার নির্বাচন করে। - VS কোডে,
flutter_theme_agent/package.jsonফাইলটি খুলুন। - Run > Start Debugging নির্বাচন করে ডিবাগ মোডে এক্সটেনশন চালান। এই ধাপটি একটি পৃথক VS কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডো খোলে।
- কোড > সেটিংস > সেটিংস নির্বাচন করে VS কোড সেটিংস খুলুন।
- জেনারেটিভ এআই ডেভেলপার সাইট থেকে একটি Google Gemini API কী পান এবং কী স্ট্রিংটি অনুলিপি করুন।
কনফিগারেশন সেটিং হিসাবে API কী সেট করুন। অনুসন্ধান সেটিংস ক্ষেত্রে,
flutter themeটাইপ করুন, ব্যবহারকারী ট্যাব নির্বাচন করুন এবং Google > জেমিনি: এপিআই কী সেটিংসে, settings.json লিঙ্কে সম্পাদনা করুন ক্লিক করুন এবং আপনার Gemini API কী যোগ করুন:"google.ai.apiKey": "your-api-key-here"settings.jsonফাইলে পরিবর্তনগুলি সংরক্ষণ করুন এবং সেটিংস ট্যাবগুলি বন্ধ করুন৷
এক্সটেনশন কমান্ড পরীক্ষা করতে:
- VS কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে, আপনি যে ইউজার ইন্টারফেস কম্পোনেন্ট তৈরি করতে চান তার বর্ণনা দিয়ে একটি কোড কমেন্টে লিখুন।
- উপাদান বৈশিষ্ট্য সহ মন্তব্য পাঠ্য নির্বাচন করুন.
- দেখুন > কমান্ড প্যালেট নির্বাচন করে কমান্ড প্যালেট খুলুন।
- কমান্ড প্যালেটে,
Flutter Themeটাইপ করুন এবং সেই উপসর্গ সহ একটি কমান্ড নির্বাচন করুন।
বিদ্যমান কমান্ড পরিবর্তন করুন
ফ্লাটার থিম এজেন্টে প্রদত্ত কমান্ডগুলি পরিবর্তন করা হল এক্সটেনশনের আচরণ এবং ক্ষমতা পরিবর্তন করার সবচেয়ে সহজ উপায়।
মন্তব্য এবং পর্যালোচনা উভয় কমান্ডই কোডের উদাহরণ সহ কয়েকটি শট প্রম্পটিং পদ্ধতি ব্যবহার করে এবং সেই কোডের জন্য মন্তব্যের পাশাপাশি এআই ভাষার মডেলের জন্য কিছু সাধারণ নির্দেশাবলী ব্যবহার করে। এই প্রম্পট প্রসঙ্গ তথ্য একটি প্রতিক্রিয়া তৈরিতে মিথুন ভাষার মডেলকে গাইড করে। মন্তব্য বা পর্যালোচনা কমান্ডে প্রম্পট নির্দেশাবলী, উদাহরণ বা উভয় পরিবর্তন করে, আপনি বিদ্যমান কমান্ডগুলির প্রতিটি কীভাবে আচরণ করে তা পরিবর্তন করতে পারেন।
নির্দেশাবলীর এই সেটটি ব্যাখ্যা করে কিভাবে কমান্ডের প্রম্পট টেক্সট পরিবর্তন করে buttonstyle.ts কমান্ড পরিবর্তন করতে হয়।
buttonstyle.ts কমান্ড সম্পাদনা করার জন্য প্রস্তুত করতে:\
- ভিএস কোড অ্যাপ্লিকেশন শুরু করুন।
- ভিএস কোডে, ফাইল > নতুন উইন্ডো নির্বাচন করে একটি নতুন উইন্ডো তৈরি করুন।
- ফ্লাটার থিম এজেন্ট প্রজেক্টটি খুলুন ফাইল > ওপেন ফোল্ডার নির্বাচন করে, এবং
flutter_theme_agent/ফোল্ডার নির্বাচন করে। flutter_theme_agent/src/buttonstyle.tsফাইল খুলুন।buttonstyle.tsকমান্ডের আচরণ পরিবর্তন করতে:\buttonstyle.tsফাইলে, বিভিন্ন নির্দেশাবলী অন্তর্ভুক্ত করতেBUTTONSTYLE_CONTEXTধ্রুবক সম্পাদনা করুন৷const BUTTONSTYLE_CONTEXT=` ButtonStyle should only define properties that exist for a ButtonStyle object. ButtonStyle objects have the following properties. The buttons can ONLY be styled by setting these properties. No other properties: alignment → AlignmentGeometry? // The alignment of the button's child. ...ঐচ্ছিকভাবে,
buttonstyle.tsফাইলে,BUTTONSTYLE_CONTEXTধ্রুবক, একটি বোতাম শৈলী নির্দেশনা এবং আউটপুটের আরেকটি উদাহরণ যোগ করুন বা বিদ্যমান উদাহরণগুলির একটি প্রতিস্থাপন করুন।... Here's an example prompt: Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off. Here's an example of good Dart code: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith<Color?>( ...buttonstyle.tsফাইলে পরিবর্তনগুলি সংরক্ষণ করুন।
পরিবর্তিত কমান্ড পরীক্ষা করতে:
- আপনার VS কোড এক্সটেনশন প্রজেক্ট উইন্ডোতে, Run > Restart Debugging নির্বাচন করে ডিবাগার পুনরায় চালু করুন।
VS কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে, সম্পাদক উইন্ডোতে আপনি যে বোতাম শৈলী চান তা বর্ণনা করে একটি কোড মন্তব্য নির্বাচন করুন, উদাহরণস্বরূপ:
// blue, lickable buttons that light up when you hover over them`দেখুন > কমান্ড প্যালেট নির্বাচন করে কমান্ড প্যালেট খুলুন।
কমান্ড প্যালেটে,
Flutterটাইপ করুন এবং Flutter Theme Agent নির্বাচন করুন: একটি Flutter ButtonStyle কমান্ড তৈরি করুন ।
নতুন কমান্ড তৈরি করুন
আপনি নতুন কমান্ড তৈরি করে ফ্লাটার থিম এজেন্টকে প্রসারিত করতে পারেন যা জেমিনি API এর সাথে সম্পূর্ণ নতুন কাজ সম্পাদন করে। প্রতিটি কমান্ড ফাইল, যেমন buttonstyle.ts এবং colorscheme.ts , বেশিরভাগই স্বয়ংসম্পূর্ণ, এবং সক্রিয় সম্পাদক থেকে পাঠ্য সংগ্রহ, একটি প্রম্পট রচনা, Gemini API এর সাথে সংযোগ স্থাপন, একটি প্রম্পট প্রেরণ এবং প্রতিক্রিয়া হস্তান্তরের জন্য কোড অন্তর্ভুক্ত করে।
চিত্র 2. ভিএস কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে নতুন ফ্লটার থিম এজেন্ট কমান্ড।
নির্দেশাবলীর এই সেটটি ব্যাখ্যা করে যে কিভাবে একটি বিদ্যমান কমান্ড, colorscheme.ts , একটি টেমপ্লেট হিসাবে কোড ব্যবহার করে একটি নতুন কমান্ড তৈরি করতে হয়। এই আপডেটটি ColorScheme অবজেক্টের এনক্লোসিং সিনট্যাক্স অন্তর্ভুক্ত না করার জন্য কমান্ড পরিবর্তন করে, যাতে আপনাকে প্রজন্মের পর এই সিনট্যাক্সটি সরাতে হবে না এবং আউটপুটটি দ্রুত কল্পনা করতে হবে।
একটি ColorScheme অবজেক্টের জন্য শুধুমাত্র রঙের একটি তালিকা তৈরি করে এমন কমান্ড তৈরি করতে:
- src
src/ডিরেক্টরিতেcolorscheme2.tsনামকflutter_theme_agent/src/colorscheme.tsফাইলটির একটি অনুলিপি তৈরি করুন। - VS কোডে,
src/colorscheme2.tsফাইলটি খুলুন। colorscheme2.tsফাইলে,generateColorSchemeফাংশনের নাম পরিবর্তন করেgenerateColorScheme2করুন :export async function generateColorScheme2(){ vscode.window.showInformationMessage('Generating Color Scheme...');colorscheme2.tsফাইলে প্রম্পট নির্দেশাবলী পরিবর্তন করুন। 51 লাইনের উদাহরণ কোড থেকেColorScheme(পাঠ্যটি সরিয়ে দিয়েCOLORSCHEME_CONTEXTকোড জেনারেশন নির্দেশাবলী সম্পাদনা করুন এবং এটিকে একটি খালি লাইন করুন।... Here's the example of good Dart code: brightness: Brightness.light, primary: Color(0xffFF80AB), ...রঙের তালিকার শেষ থেকে বন্ধ বন্ধনী অক্ষর "
)" সরান এবং এটি একটি খালি লাইন করুন।... inversePrimary: Color(0xffD15B9D), surfaceTint: Color(0xffFF80AB), This example code is a good ...দ্বিতীয় উদাহরণের জন্য এই পরিবর্তনগুলি পুনরাবৃত্তি করুন। 87 লাইনের
COLORSCHEME_CONTEXTস্ট্রিং-এ,ColorScheme(টেক্সটটি সরান এবং এটিকে একটি খালি লাইন করুন।115 লাইনে, রঙের তালিকার শেষ থেকে বন্ধ বন্ধনী অক্ষর "
)" সরিয়ে দিন এবং এটি একটি খালি লাইন করুন।COLORSCHEME_CONTEXTস্ট্রিং-এ, আবদ্ধ সিনট্যাক্স অন্তর্ভুক্ত না করার জন্য একটি নির্দেশ যোগ করুন:... - The color scheme must be accessible and high-contrast. In the response, only include the list of colors and nothing else. Do not include a starting "ColorScheme(" prefix or an ending ")" suffix. Here's an example user prompt: ...colorscheme2.tsফাইলে পরিবর্তনগুলি সংরক্ষণ করুন।
নতুন কমান্ড সংহত করুন
আপনি নতুন কমান্ডের জন্য কোডটি সম্পূর্ণ করার পরে, আপনাকে এটিকে বাকি এক্সটেনশনের সাথে একীভূত করতে হবে। এক্সটেনশনের নতুন কমান্ড অংশ করতে extension.ts এবং package.json ফাইলগুলি আপডেট করুন এবং VS কোড নতুন কমান্ড চালু করতে সক্ষম হবেন।
এক্সটেনশন কোডের সাথে নতুন কমান্ড সংহত করতে:
- VS কোডে,
flutter_theme_agent/src/extension.tsফাইলটি খুলুন। একটি নতুন আমদানি বিবৃতি যোগ করে এক্সটেনশনে নতুন কমান্ড কোড আমদানি করুন।
import { generateColorScheme2 } from './components/colorscheme2';activate()ফাংশনে নিম্নলিখিত কোড যোগ করে নতুন কমান্ড নিবন্ধন করুন।export function activate(context: vscode.ExtensionContext) { ... vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2', generateColorScheme2); ... }পরিবর্তনগুলি
extension.tsফাইলে সংরক্ষণ করুন।
এক্সটেনশন প্যাকেজের সাথে নামের কমান্ডটি সংহত করতে:
- VS কোডে,
flutter_theme_agent/package.jsonফাইলটি খুলুন। প্যাকেজ ফাইলের
commandsবিভাগে নতুন কমান্ড যোগ করুন।"contributes": { "commands": [ ... { "command": "flutter-theme-agent.generateColorScheme2", "title": "Flutter Theme Agent: My New Code Generator." } ],package.jsonফাইলে পরিবর্তনগুলি সংরক্ষণ করুন।
নতুন কমান্ড পরীক্ষা করুন
একবার আপনি কমান্ডের কোডিং এবং এক্সটেনশনের সাথে একীভূত করার পরে, আপনি এটি পরীক্ষা করতে পারেন। আপনার নতুন কমান্ড শুধুমাত্র VS কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে উপলব্ধ, এবং VS কোড উইন্ডোতে নয় যেখানে আপনি এক্সটেনশনের জন্য কোডটি সম্পাদনা করেছেন৷
পরিবর্তিত কমান্ড পরীক্ষা করতে:
- আপনার VS কোড এক্সটেনশন প্রজেক্ট উইন্ডোতে, Run > Restart Debugging নির্বাচন করে ডিবাগার পুনরায় চালু করুন, যা একটি পৃথক এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডো পুনরায় চালু করে।
- ভিএস কোড এক্সটেনশন ডেভেলপমেন্ট হোস্ট উইন্ডোতে, একটি ফ্লাটার ডেভেলপমেন্ট প্রজেক্ট খুলুন।
- একই উইন্ডোতে, একটি কোড এডিটর উইন্ডো খুলুন, আপনি যে ইউজার ইন্টারফেস উপাদানটি চান তার বর্ণনা দিয়ে একটি মন্তব্য টাইপ করুন এবং সেই মন্তব্য পাঠ্য নির্বাচন করুন।
- দেখুন > কমান্ড প্যালেট নির্বাচন করে কমান্ড প্যালেট খুলুন।
- কমান্ড প্যালেটে,
Flutter Themeটাইপ করুন এবং Flutter Theme Agent: My New Code Generator কমান্ড নির্বাচন করুন।
অতিরিক্ত সম্পদ
ফ্লটার থিম এজেন্ট প্রকল্প সম্পর্কে আরও তথ্যের জন্য, কোড সংগ্রহস্থল দেখুন। আপনার যদি অ্যাপ্লিকেশন তৈরি করতে সাহায্যের প্রয়োজন হয় বা বিকাশকারী সহযোগীদের খুঁজছেন, তাহলে Google Developers Community Discord সার্ভারটি দেখুন।
উত্পাদন অ্যাপ্লিকেশন
আপনি যদি বৃহৎ দর্শকদের জন্য ফ্লাটার থিম এজেন্ট স্থাপন করার পরিকল্পনা করেন, তাহলে মনে রাখবেন যে আপনার Google Gemini API-এর ব্যবহার রেট সীমিতকরণ এবং অন্যান্য ব্যবহারের সীমাবদ্ধতার বিষয় হতে পারে। আপনি যদি জেমিনি মডেলের সাথে একটি প্রোডাকশন অ্যাপ্লিকেশন তৈরি করার কথা ভাবছেন, তাহলে আপনার অ্যাপের বর্ধিত মাপযোগ্যতা এবং নির্ভরযোগ্যতার জন্য Google Cloud Vertex AI পরিষেবাগুলি দেখুন।