এজেন্টদের A2UI-এর মাধ্যমে আপনার Android অ্যাপে UI তৈরি করতে দিন

হ্যালো, সবাইকে স্বাগত। এই আলোচনায় আমরা কথা বলব কীভাবে আমাদের ব্র্যান্ড নিউ A2UI লাইব্রেরি ব্যবহার করে আপনার Android অ্যাপে UI জেনারেট করবেন।

আমার নাম নিক বুচার, আমি Jetpack Compose-এ প্রোডাক্ট ম্যানেজার হিসেবে কাজ করি।

হ্যালো, আমি অ্যান্টন, Compose টিমের একজন ইঞ্জিনিয়ার।

আমি এই নতুন Jetpack Compose A2UI রেন্ডারার নিয়ে কাজ করছি, যার ব্যাপারে আজ আপনাকে জানাতে পেরে আমরা খুবই আনন্দিত।

হ্যাঁ, এখন AI-এর ক্ষমতা বৃদ্ধির সাথে সাথে, অনেক অ্যাপই দেখছে যে কীভাবে AI আপনাকে তাদের ব্যবহারকারীদের জন্য নতুন অভিজ্ঞতা উন্নত করতে বা তৈরি করতে সাহায্য করতে পারে।

কিছু লোক যে উত্তেজনাপূর্ণ অভিজ্ঞতাগুলি দেখছেন তার মধ্যে একটি হল জেনারেটিভ UI, যা রানটাইমে, এজেন্টিক ব্যাক এন্ড আপনার ব্যবহারকারীদের জন্য ব্র্যান্ডের নতুন UI তৈরি করতে পারে, যা আমরা মনে করি খুব আকর্ষণীয়।

কিন্তু দুর্ভাগ্যবশত, বর্তমানে অনেক এজেন্টিক ব্যাক এন্ডের উত্তর টেক্সটের দেওয়ালে আটকে যায়, যেমন এটি।

এখানে একটি উদাহরণ দেওয়া হল যেখানে আমি একটি এজেন্টকে ট্রিপ বুক করার জন্য একটি নতুন ফিচার তৈরি করতে বলেছি।

তাহলে, এখানে প্রম্পট দেওয়া হল।

এবং আপনি দেখতে পাচ্ছেন, এটি আসলে বেশ ভালো উত্তর দিয়েছে, কিন্তু এটি টেক্সটের এই প্রাচীরে আটকে আছে যার সাথে আমি সহজে ইন্টার‍্যাক্ট করতে পারছি না এবং এটি আমার অ্যাপ্লিকেশনের বাকি অংশের মতো দেখতে নয়।

জেনারেটিভ UI আপনাকে এর পরিবর্তে এই ধরনের অভিজ্ঞতা তৈরি করতে দেয়, যেখানে আপনি ডাইনামিক ইনপুটের উত্তরে ফ্লাইতে একটি নতুন UI তৈরি করতে পারেন, আরও কাস্টমাইজেশন বা আরও নতুন অভিজ্ঞতার সম্ভাবনা খুলে দেয়।

তাই, এখানে একটি UI-এর উদাহরণ দেওয়া হল যা স্ট্যান্ডার্ড, নেটিভ কম্পোনেন্টের মতো ব্যবহার করে তৈরি করা হয়েছে।

সুতরাং, আপনি আজ নিজেই এই ধরনের অভিজ্ঞতা তৈরি করতে পারেন, তবে ব্যাক এন্ডের সাথে ইন্টারচেঞ্জের জন্য আপনাকে নিজের মতো ফর্ম্যাট, আপনার নিজস্ব ধরনের ইভেন্ট স্ট্রিম এবং ফাংশন ইত্যাদি সংজ্ঞায়িত করতে হবে।

A2UI, যার অর্থ হল এজেন্ট-টু-UI, একটি ওপেন প্রোটোকল যা এই সমস্ত জিনিস সংজ্ঞায়িত করার জন্য একটি JSON ফর্ম্যাট।

A2UI-এর যে জিনিসটি আমার খুব ভালো লাগে তা হল এটি একটি ডিক্লারেটিভ ফর্ম্যাট।

এজেন্ট শুধু রেন্ডার করার জন্য UI-এর JSON উপস্থাপনা ফিরিয়ে দিচ্ছে।

এটি এমন কোনও কোড রিটার্ন করে না যা আপনার ক্লায়েন্টকে এক্সিকিউট করতে হবে, যার ফলে আপনার নিরাপত্তা সংক্রান্ত দুর্বলতা প্রকাশ পেতে পারে।

এটি শুধু ডিক্লারেটিভ।

তাহলে, A2UI সম্পর্কে আমাদের আর কোন কোন ধারণা থাকা প্রয়োজন?

শুধু দুটি মূল ধারণা: ক্যাটালগ এবং সারফেস।

ক্যাটালগে টেক্সট, বোতাম, সারি ও কলামের মতো কম্পোনেন্ট থাকে যা এজেন্ট UI তৈরি করতে ব্যবহার করতে পারে।

এছাড়াও, ক্যাটালগে এমন ফাংশন আছে যা এজেন্ট টেক্সট ফর্ম্যাট করা, ব্যবহারকারীর ইনপুট যাচাই করা বা URL খোলার জন্য ব্যবহার করতে পারে।

ক্যাটালগ হল একটি চুক্তি যা আপনার অ্যাপ কোন কম্পোনেন্ট এবং ফাংশন সাপোর্ট করে তা নির্ধারণ করে এবং এজেন্ট শুধুমাত্র সেগুলি দিয়েই তৈরি করতে পারে।

এর অর্থ হল, নিক যেমন উল্লেখ করেছেন, এজেন্ট আপনার অ্যাপে কখনও ইচ্ছামতো কোড এক্সিকিউট করে না।

আপনার ডিজাইন করা ও বিশ্বস্ত বিল্ডিং ব্লক থেকে এটি UI কম্পোজ করে।

আরেকটি গুরুত্বপূর্ণ ধারণা হল সারফেস।

সারফেস হল UI-এর একটি অংশ যা এজেন্ট কন্ট্রোল করে, যেমন স্লাইডে দেখানো এই ট্রিপ প্ল্যানারের উদাহরণ।

এজেন্ট, A2UI প্রোটোকল মেসেজ, যেমন createSurface, updateComponents এবং আপনার ক্যাটালগে উল্লেখ করা কম্পোনেন্ট ও ফাংশন ব্যবহার করে JSON-এ সারফেসের জন্য UI বর্ণনা করে।

ক্যাটালগের কথা বলতে গেলে, ক্যাটালগ হল A2UI-এর একটি অত্যন্ত মৌলিক ধারণা, কারণ এটি নিয়ন্ত্রণ করে যে এজেন্ট ইন্টারফেস তৈরি করতে কোন কম্পোনেন্ট ব্যবহার করতে পারে।

A2UI স্পেক, বেসিক ক্যাটালগ নামে একটি জিনিসকে সংজ্ঞায়িত করে, যা হল সাধারণ কম্পোনেন্টের একটি সেট এবং আপনি বেশিরভাগ UI তৈরি করার জন্য এটি ব্যবহার করতে পারবেন।

Jetpack Compose A2UI রেন্ডারার, Material 3 কম্পোনেন্ট ব্যবহার করে বেসিক ক্যাটালগের একটি ইমপ্লিমেন্টেশন প্রদান করে।

ক্যাটালগের বেশিরভাগ কম্পোনেন্টই সরাসরি ব্যবহার করা যায়।

তিনটি মিডিয়া কম্পোনেন্ট আছে: ছবি, ভিডিও এবং অডিও প্লেয়ার, যেখানে আপনার পছন্দের লাইব্রেরি প্লাগ-ইন করতে হবে।

যেমন, আপনি ছবি লোড করার জন্য Coil এবং ভিডিও ও অডিও প্লেয়ারের জন্য Media3 বেছে নিতে পারেন।

তবে, A2UI এবং আমাদের নতুন রেন্ডারার লাইব্রেরির আসল ক্ষমতা হল যে আপনি নিজের, সম্পূর্ণ কাস্টম কম্পোনেন্ট এবং ক্যাটালগ তৈরি করতে পারেন এবং UI তৈরি করতে এজেন্ট কী ব্যবহার করতে পারে তা সম্পূর্ণভাবে নিয়ন্ত্রণ করতে পারেন।

আমরা পরে ক্যাটালগে ফিরে আসব।

ঠিক আছে, তাহলে এটি দেখতে কেমন তা দেখে নেওয়া যাক।

তাই, আমরা যদি ডেমো মেশিনে সুইচ করতে পারি, তাহলে ভালো হয়।

এটি আমাদের ডেমো অ্যাপ, যা আমরা ব্যবহার করতে চলেছি এবং এটি কত সহজ তা আপনাকে দেখানোর জন্য আমরা A2UI রেন্ডারার তৈরি করতে চলেছি।

তাই এটি হল প্রম্পটের একটি সেট, যেমন আপনি স্ক্রিনের মাঝখানে এই ছোট চিপগুলিতে দেখতে পাচ্ছেন, যা আপনি কোনও এজেন্টকে পাঠাতে পারেন।

তাই, আমরা যদি কোনও একটি প্রম্পটে ক্লিক করি, তাহলে সেটি ব্যাক এন্ডে একজন আসল, লাইভ এজেন্টের কাছে পাঠানো হচ্ছে, তাই ডেমোর জন্য শুভকামনা রইল এবং প্রম্পটের পাশাপাশি, আমরা কিছু সিস্টেম নির্দেশাবলীও যোগ করি।

তাই, আমরা ব্যাক এন্ডকে A2UI প্রোটোকল, কম্পোনেন্টের ক্যাটালগ সম্পর্কে বলি, এই ক্ষেত্রে, আমরা এখানে যে বেসিক ক্যাটালগ ব্যবহার করছি, যা এটি UI তৈরি করতে ব্যবহার করতে পারে এবং আমরা এটিকে কীভাবে তৈরি করতে হয় তার কিছু উদাহরণ দিই।

আমাদের ডেমো অ্যাপে চ্যাট সেশন ইমপ্লিমেন্টেশন আগে থেকেই জানে যে কীভাবে এজেন্টের উত্তর থেকে র JSON A2UI মেসেজ এক্সট্র্যাক্ট করতে হয়।

তাই, এই ক্ষেত্রে, এজেন্ট কিছু টেক্সট সহ উত্তর দিয়েছে এবং তারপরে A2UI প্রোটোকল মেসেজ: createSurface, updateComponents.

তবে এই মুহূর্তে, আমাদের অ্যাপ শুধু এই র JSON দেখায় এবং এখনও UI হিসেবে এটি রেন্ডার করে না।

ঠিক আছে, আমরা কোডটি প্রয়োগ করার আগে, যদি আমরা মাত্র ১ সেকেন্ডের জন্য স্লাইডে ফিরে যেতে পারি, তাহলে আসুন এক ধাপ পিছিয়ে যাই এবং আপনাকে সিস্টেম ডিজাইন সম্পর্কে বলি, যা আমরা এটি বাস্তবায়নের জন্য ব্যবহার করতে যাচ্ছি।

ওহ, এই যে।

হ্যাঁ, তাহলে এই হল প্ল্যান।

তাই, AI এজেন্ট আমাদের অ্যাপে একটি উত্তর স্ট্রিম করে যা ChatSession ক্লাস দ্বারা গৃহীত হয়।

ChatSession এজেন্টের উত্তর থেকে র-A2UI JSON মেসেজ এক্সট্র্যাক্ট করে, কারণ এটি স্ট্রিমিং করে এবং সেগুলিকে A2UI মেসেজ প্রসেসরে পাস করে।

মেসেজ প্রসেসরটি একটি পার্সারের সাথে কনফিগার করা হয়েছে যা সেই কাঁচা JSON মেসেজগুলিকে একটি শব্দার্থিক উপস্থাপনায় রূপান্তর করে।

প্রসেসর তখন ক্যাটালগ সংজ্ঞা অনুযায়ী মেসেজ যাচাই করে এবং সারফেস মডেলের একটি সেটে ম্যাপ করে।

সারফেস মডেল, এগুলি হল সেইসব জিনিস যা UI কেমন দেখতে হবে এবং UI-এর কোন অংশ এজেন্ট কন্ট্রোল করবে তা নির্ধারণ করে।

আমাদের লাইব্রেরির মাধ্যমে প্রদান করা A2UI সারফেস কম্পোজেবল ব্যবহার করে সেই সারফেস মডেলগুলি নেটিভ Compose UI হিসেবে রেন্ডার করা হয়।

এজেন্ট ও UI-এর মধ্যে যোগাযোগ দ্বিমুখী, তাই ব্যবহারকারী UI-এর সাথে ইন্টার‍্যাক্ট করলে, ব্যবহারকারীর অ্যাকশন ও সমস্যার তথ্য এজেন্টের কাছে ফিরে আসে।

সুতরাং, সংক্ষেপে, তিনটি প্রধান বিল্ডিং ব্লক রয়েছে: ক্যাটালগ, মেসেজ প্রসেসর এবং সারফেস।

এর জন্য কোড লিখি।

হ্যাঁ, আমরা মেশিন পাল্টাতে পারলে, চলুন এটা তৈরি করা যাক।

ঠিক আছে, তাহলে প্রথম ধাপ হল ডিপেন্ডেন্সি যোগ করা।

এখানে আপনি দেখতে পাচ্ছেন যে আমরা ইতিমধ্যেই Material 3 A2UI ডিপেন্ডেন্সি অন্তর্ভুক্ত করেছি এবং আমরা ইতিমধ্যেই প্রোজেক্ট সিঙ্ক করেছি যাতে আমাদের Gradle-এর দিকে তাকিয়ে বসে থাকতে না হয়।

এটি হল টপ-লেভেল ডিপেন্ডেন্সি যা সেইসব Material 3 কম্পোনেন্ট ব্যবহার করে বেসিক ক্যাটালগের ইমপ্লিমেন্টেশনকে সংজ্ঞায়িত করে, তবে এর নিচে অন্যান্য আরও সূক্ষ্ম ডিপেন্ডেন্সি রয়েছে।

তাই, আপনি যদি বেসিক ক্যাটালগ ব্যবহার করতে না চান, যার কারণ আমরা পরে ব্যাখ্যা করব, তাহলে আপনি আরও সূক্ষ্ম ক্যাটালগ ব্যবহার করতে পারেন।

কিন্তু এটি নিয়ে আসবে-- বাকিদের ট্রানজিটিভলি টেনে আনবে।

ঠিক আছে।

তাহলে, আমরা বলেছি যে তিনটি জিনিস আছে।

প্রথম ধাপ হল ক্যাটালগ নির্ধারণ করা।

তাই আমাদের অ্যাপ্লিকেশনে, আমরা একটি ফ্যাক্টরি ফাংশন তৈরি করতে যাচ্ছি যা বেসিক ক্যাটালগের Material 3 ইমপ্লিমেন্টেশনের একটি ইনস্ট্যান্স তৈরি করতে সাহায্য করবে।

তাই আমরা এখানে এই লাইব্রেরি ফাংশন ব্যবহার করি, মেটেরিয়াল A2UI বেসিক ক্যাটালগ, যার ভার্সনও আছে।

এবং আমরা যেমন বলেছি, এটি আপনার প্রয়োজনীয় সমস্ত সাধারণ কম্পোনেন্ট প্রদান করে, তবে আমরা আপনাকে নির্দিষ্ট ইমেজ-লোডিং বা মিডিয়া-রেন্ডারিং লাইব্রেরি ব্যবহার করতে বাধ্য করতে চাই না, তাই আপনাকে সেগুলি নিজেই প্রদান করতে হবে।

যেমন, এখানে Coil-এর AsyncImage কম্পোজেবলের চারপাশে Anton আগেই এই র‍্যাপার তৈরি করেছেন, যা আমরা ছবি লোড করার জন্য ব্যবহার করব, এর পাশাপাশি আমাদের ডেমোর জন্য Wikipedia থেকে ছবি খোঁজার জন্য একটু অতিরিক্ত লজিকও ব্যবহার করব।

এবং তাই, খুব সহজেই, আমরা এটিকে ক্যাটালগ কম্পোনেন্টে প্লাগ করতে পারি।

এবং একইভাবে, আমাদের কাছে রেন্ডারিং, ভিডিও এবং অডিওর জন্য একই ধরনের ইমপ্লিমেন্টেশন রয়েছে, যেখানে আমরা ExoPlayer-এর মাধ্যমে রেন্ডার করার জন্য Media3 লাইব্রেরি ব্যবহার করতে যাচ্ছি।

তাই খুব সহজভাবে এইভাবে, আমরা আমাদের নিজস্ব কম্পোনেন্ট এতে প্লাগ-ইন করতে পারি।

ক্যাটালগের জন্য এর পরে যা প্রয়োজন, তা হল স্ট্যান্ডার্ড ফাংশনের একটি সেট।

সুতরাং, এগুলি হল সেইসব ফাংশন যা ক্লায়েন্ট প্রদান করতে পারে।

আবার, আমরা বেসিক ক্যাটালগের সাথে এটির একটি ইমপ্লিমেন্টেশন শিপ করি, তবে আমাদের এটি একটি প্রসঙ্গের সাথে প্রদান করতে হবে, যা আপনি নির্দিষ্ট কিছু অ্যাকশন করতে ব্যবহার করবেন, যেমন কোনও ব্যবহারকারী কোনও আইটেমে ট্যাপ করলে URI খোলা।

আর এইভাবে, আমাদের প্রথম ধাপ সম্পূর্ণ হল।

আমরা একটি ক্যাটালগ তৈরি করেছি।

পরবর্তী ধাপে আমাদের মেসেজ, প্রসেসর সেট-আপ করতে হবে।

সুতরাং, এটিই আসলে উত্তর এবং আরও অনেক কিছু পার্স করে।

তাই, আমরা আমাদের অ্যাপ্লিকেশনের ভিউ মডেলে সুইচ করব, যেখানে আমরা প্রথমে, আমরা আসলে সেই ক্যাটালগটি ইনস্ট্যান্টিয়েট করব যা আমরা আগে সেট আপ করেছি, কারণ আমাদের এটির প্রয়োজন হবে।

এবং তারপরে আমরা এই মেসেজ পার্সার, মেসেজ প্রসেসর অবজেক্ট তৈরি করতে যাচ্ছি, যেটির ক্যাটালগে অ্যাক্সেস প্রয়োজন, যাতে আমরা যে কম্পোনেন্টগুলি ব্যবহার করতে চাই তার সাথে রেসপন্স যাচাই করতে পারি।

আমাদের আরও একটি কম্পোনেন্ট তৈরি করতে হবে, সেটি হল পার্সার। এটি আসলে একটি অবজেক্ট যা JSON মেসেজ ফিরে আসার সাথে সাথে সেগুলিকে পার্স করার জন্য দায়ী।

তাহলে, এখানে আমরা ChatSession অবজেক্ট তৈরি করি।

তাই, আমি আগেই যেমন বলেছি, ChatSession আগে থেকেই এজেন্টের উত্তর থেকে র-A2UI মেসেজ এক্সট্র্যাক্ট করে।

এবং প্রতিটি নতুন A2UI মেসেজ রেডি হয়ে গেলে, এটি এই onA2uiMessage কলব্যাককে কল করে।

তাই, আমাদের শুধু প্রতিটি মেসেজ প্রসেসরে পৌঁছানোর সাথে সাথে পাস করতে হবে।

আমরা processInput ফাংশন কল করি, এটিকে একটি পার্সার এবং একটি মেসেজ দিই।

তাই, processInput ফাংশন প্রতিটি মেসেজ পার্স করে এবং তারপর ক্যাটালগের সাথে মিলিয়ে যাচাই করার জন্য এবং সারফেস মডেল আপডেট করার জন্য প্রসেসরের কাছে কাজগুলি সারিবদ্ধ করে।

তাই, প্রসেসর অ্যাক্টিভ সারফেস মডেলের বর্তমান সেটকে activeSurfaces StateFlow হিসেবে দেখায়।

রেন্ডার করার জন্য এজেন্টের উত্তরের UI স্ট্যাটাসে সারফেস মডেল যোগ করার জন্য ChatSession-এ কিছু লজিক আছে।

তাই, আমরা এই activeSurfaces StateFlow-কে ChatSession-এর প্যারামিটার হিসেবে পাস করি।

এছাড়াও, আমি যেমন উল্লেখ করেছি, processInput ফাংশন প্রসেসরের জন্য কাজ সারিবদ্ধ করে।

কিন্তু প্রসেসিং শুরু করার জন্য, আমাদের ব্যাকগ্রাউন্ড থ্রেডে একটি কোরুটিন লঞ্চ করতে হবে।

তাই, আমরা এর জন্য একটি ভিউ মডেল স্কোপ ব্যবহার করব এবং ডিফল্ট ডিসপ্যাচার সেট করব।

আর সেই coroutine-এ, আমাদের শুধু processor.collectMessages কল করতে হবে।

তাই, এই কো-রুটিন অ্যাক্টিভ থাকাকালীন, প্রসেসর মেসেজ কিউ থেকে মেসেজ ম্যানেজ করবে।

তাই, আমাদের আরও একটি কাজ করতে হবে, ব্যবহারকারী চ্যাট ইতিহাস মুছে দিলে, আমাদের বর্তমান সারফেসও মুছে দিতে হবে।

তাই, আমরা clearSurfaces কল করি।

ঠিক আছে।

তাহলে আমরা প্রথম দুটি ধাপ সম্পূর্ণ করেছি।

আমরা ক্যাটালগ তৈরি করেছি, মেসেজ পার্স করার জন্য প্রসেসর তৈরি করেছি।

পরবর্তী ধাপে আমাদের UI-তে সেইসব উত্তর রেন্ডার করতে হবে।

তাই পার্সার দ্বারা পার্স করা সারফেসগুলি আমরা সংগ্রহ করছি।

তাই এখন আমাদের UI-তে, আমরা এই এজেন্টের উত্তর অবজেক্টে সেগুলি পাস করব এবং আমরা সেগুলির উপর সহজভাবে পুনরাবৃত্তি করব।

এবং তারপরে আমরা এই A2UI সারফেস কম্পোজেবল ব্যবহার করব এবং তারপরে আমরা প্রতিটি মডেলের মাধ্যমে পুনরাবৃত্তি করার সাথে সাথে এটি মডেলটিকে পাস করব যাতে আমরা যেখানে এটি যেতে চাই সেখানে কন্টেন্ট রেন্ডার করতে পারি।

এখানে একটি বিষয় মনে রাখতে হবে যে, এজেন্ট যদি অনেক বেশি কন্টেন্ট দেখাতে চায়, তাহলে সে তালিকার মতো কিছু ব্যবহার করার সিদ্ধান্ত নিতে পারে।

তাই এই কম্পোনেন্টে বাউন্ডেড উচ্চতা সর্বাধিক উচ্চতায় সেট করতে হবে যাতে এটি সঠিকভাবে রেন্ডার হয়।

এবং এর সাথে, আমরা একটি বেসিক A2UI রেন্ডারারের মতো প্রয়োগ করেছি।

তাই এখন আমরা যদি আমাদের অ্যাপে ফিরে যাই, এটি আবার চালু করি এবং সেই প্রম্পটটি আবার হিট করি, তাহলে আশা করি এজেন্ট এটি ব্যবহার করবে, হ্যাঁ, আমরা এখানে যাচ্ছি, একটি আসল UI রেন্ডার করতে।

তাই আমরা শুধু লাইভ কোড করি।

এটি ধোঁয়া ও আয়নার মতো নয়।

তবে হ্যাঁ, এটি আসল ছবি ব্যবহার করছে।

এটি ট্যাব, ডায়ালগ, ডেট পিকার, স্লাইডার ব্যবহার করছে, আপনি জানেন, সব স্ট্যান্ডার্ড মেটেরিয়াল কম্পোনেন্ট যা আপনি জানেন, শুধু টেক্সচুয়াল উত্তর দেখানোর পরিবর্তে আপনার অ্যাপ তৈরি করুন।

কারণ এটি আসল মেটেরিয়াল কম্পোনেন্ট ব্যবহার করে তৈরি করা একটি আসল অ্যাপ, তাই এটি আসল কম্পোনেন্টের মতোই কাজ করে।

এটি নেটিভ পারফর্ম্যান্সের মতো।

এটি এখানে ডার্ক মোডে উত্তর দেওয়ার মতো কাজ করে।

এগুলি হল মেটিরিয়াল কম্পোনেন্ট।

তাই আপনার কাছে যদি কোনও আউটার মেটেরিয়াল থিম কম্পোজেবল থাকে যেখানে আপনি রঙ, আকার, টাইপোগ্রাফি ইত্যাদি কাস্টমাইজ করেছেন, তাহলে এই কম্পোনেন্টগুলি সেগুলি বেছে নেবে যাতে এটি আপনার বাকি অ্যাপ্লিকেশনের মতো দেখায়।

নিক যেমন উল্লেখ করেছেন, এগুলি নেটিভ কম্পোজ কম্পোনেন্ট হওয়ায়, এগুলির নেটিভ সিমেন্টিক আছে।

এর অর্থ হল Compose-এর সব বিল্ট-ইন অ্যাক্সেসিবিলিটি ফিচার কাজ করে।

তাই টকব্যাক, ফন্ট স্কেলিং, কীবোর্ড নেভিগেশনের মতো ফিচারগুলি কোনও সমস্যা ছাড়াই কাজ করে।

এখন, আপনি রানটাইমে নতুন UI জেনারেট করার জন্য এজেন্টকে ইনভোক করছেন বলে, কিছুটা লেটেন্সি হতে পারে।

আপনি জানেন, এজেন্টের উত্তরের জন্য আপনাকে অপেক্ষা করতে হতে পারে।

এই লেটেন্সি কমানোর জন্য লাইব্রেরি যথাসাধ্য চেষ্টা করে।

তাই আমরা যদি এই ধরনের ব্যবহার করি, তাহলে আমরা কিছু কিছু কিছু অপেক্ষা ইনজেক্ট করব যাতে আপনাকে একটু ধীরে ধীরে দেখানো যায় যে কী ঘটে এবং কীভাবে আমরা তা কমিয়ে আনি।

হ্যাঁ, যেহেতু এজেন্টের সম্পূর্ণ উত্তর স্ট্রিম করতে কিছুটা সময় লাগতে পারে, তাই আমরা প্রোগ্রেসিভ রেন্ডারিং নামে একটি পদ্ধতি ব্যবহার করি।

তাই রুট কম্পোনেন্ট আসার সাথে সাথেই আমরা সারফেসের জন্য UI দেখানো শুরু করি।

চাইল্ড কম্পোনেন্ট এখনও না এসে থাকলে, সব কন্টেনার কম্পোনেন্ট তাদের চাইল্ডের জন্য লোডিং প্লেসহোল্ডার দেখায়।

চাইল্ড কম্পোনেন্ট এসে পৌঁছালে, Material 3 মোশন স্কিম ব্যবহার করে সেগুলি অ্যানিমেট করা হয়।

ঠিক আছে।

এবং আমরা যদি লাইব্রেরির অন্য একটি ফিচার দেখানোর জন্য পরবর্তী প্রম্পটে যেতে পারি।

তাই এখানে আরেকটি প্রম্পট রয়েছে যেখানে আমরা ডিনারের জন্য একটি টেবিল বুক করছি।

এবং এখানে এজেন্ট এই স্লাইডার কম্পোনেন্ট ব্যবহার করার জন্য বেছে নিচ্ছে, হ্যাঁ এটি ব্যবহার করা হয়েছে।

এখানে আপনি দেখতে পাচ্ছেন যে এজেন্ট যে UI তৈরি করেছে, আপনি সেটি ড্র্যাগ করতে এবং তার সাথে ইন্টার‍্যাক্ট করতে পারবেন।

এবং লক্ষ্য করুন যে এটি কীভাবে শুধু কম্পোনেন্টের সংখ্যা পরিবর্তন করছে না, আরও নিচে এই ফর্ম্যাট স্ট্রিংও রয়েছে যেখানে এটি গণনা করছে।

যেমন, আমাকে বলুন যে এটি আপডেট করার জন্য এজেন্টের কাছে ফিরে যাওয়ার জন্য রাউন্ড ট্রিপ করছে না, তাই না?

এটি একটি টু-ওয়ে বাইন্ডিং।

তাই স্লাইডার কম্পোনেন্ট এই সারফেসের ইন-মেমরি ডেটা মডেলের সাথে যুক্ত।

ডেটা মডেলে একই পাথের সাথে যুক্ত সব কম্পোনেন্ট, ভ্যালু পরিবর্তন হলে অটোমেটিক আপডেট হয়ে যায়।

তাই স্লাইডারটি দেখানোর জন্য মানটি পড়ে এবং আমি যখন স্লাইডারটি টেনে আনি, তখন এটি আপডেট করার জন্য মডেলে আবার লিখে।

তাই, এজেন্টের কাছে যাওয়া আসা না করেই এই সবকিছু স্থানীয়ভাবে করা হয়।

তবে আমরা এজেন্টকে ডেটা আপডেট করতেও বলতে পারি।

তাহলে ৬ জন করে নেওয়া যাক।

এজেন্ট উত্তর দেওয়ার সময় স্লাইডারের দিকে মনোযোগ দিন।

এটি এখন ৬-এ পৌঁছে গেছে।

তাহলে, এজেন্টের থেকে আমরা কী পেয়েছি তা দেখা যাক।

UI-এর সম্পূর্ণ নতুন বিবরণ পাঠানোর পরিবর্তে, এজেন্ট শুধু একটি ছোট মেসেজ updateDataModel পাঠিয়েছে যা স্লাইডারের পাথ আপডেট করেছে।

যেহেতু স্লাইডারটি সেই পাথের সাথে বাউন্ড করা আছে, তাই এটি সেই জায়গাতেই আপডেট হয়েছে।

তাই প্রতিটি সারফেসের ডেটা মডেল Compose স্ন্যাপশট স্টেটের উপর তৈরি করা হয় এবং একটি পাথের সাথে বাউন্ড করা প্রতিটি কম্পোনেন্ট প্রপার্টি হল একটি ডিরাইভড স্টেট।

তাই, ব্যবহারকারী বা এজেন্ট যখনই ডেটা মডেলে ভ্যালু আপডেট করেন, একই ভ্যালুর সাথে যুক্ত সব কম্পোনেন্ট অটোমেটিক রিকম্পোজ হয়ে যায়।

ঠিক আছে।

তাহলে, ধরুন আমরা অ্যাকশন নিতে চাই এবং রিজার্ভ বোতামে ক্লিক করতে চাই, তাহলে এখানে কী হবে, অ্যান্টন?

এই মুহূর্তে কিছুই হয় না।

বোতামটি একটি অ্যাকশন ডিসপ্যাচ করে, কিন্তু আমরা এখনও এটি এজেন্টের কাছে পাঠাইনি।

তাই, আসুন এটি ঠিক করা যাক।

ঠিক আছে, ইনপুট প্রসেস করার জন্য আমাদের যেমন প্রসেসরের সাথে কানেক্ট করতে হয়েছিল, ঠিক তেমনই আমাদের আউটপুটের সাথেও কানেক্ট করতে হবে, এজেন্ট যে UI তৈরি করেছে সেখানে ব্যবহারকারী যেসব অ্যাকশন নেন।

তাই, এটি করার জন্য, আমরা outboundEvents ফ্লো ব্যবহার করি যা প্রসেসর এক্সপোজ করে এবং এর উপর সংগ্রহ করে।

তাই, ব্যবহারকারী কোনও অ্যাকশনে ট্যাপ করলে বা UI-এর মাধ্যমে কোনও কাজ করলে, আপনি নিজের পছন্দমতো লজিক যোগ করতে পারেন।

তাই, এখানে আমরা যেকোনও অ্যাকশন এজেন্টের কাছে ফেরত পাঠাচ্ছি যাতে সে সিদ্ধান্ত নিতে পারে যে কী করতে হবে, তবে আপনিও এই মুহূর্তে সিদ্ধান্ত নিতে পারেন যে আপনি নিজের ব্যাক এন্ডে কল করবেন নাকি আপনার অ্যাপ্লিকেশনের অন্য স্ক্রিনে নেভিগেট করবেন, এটি আপনার উপর নির্ভর করে।

তাই এখানে Anton এটি প্লাগ-ইন করেছেন এবং এখন আমরা যখন রিজার্ভেশন কনফার্ম করার অ্যাকশনে ক্লিক করব, তখন এটি আপনার নেওয়া অ্যাকশনটি এজেন্টের কাছে ফেরত পাঠাবে।

আর এইখানেই, আপনি জানেন, আপনি ব্যাক এন্ডে এমনকি কিছু কার্যকারিতা চালু করার সিদ্ধান্ত নিতে পারেন।

তাই, আমরা আসলে এজেন্টকে কী পাঠাই তা দেখা যাক।

এটি হল A2UI অ্যাকশন মেসেজ।

এটির একটি প্রসঙ্গ আছে এবং এই প্রসঙ্গে এক সেট প্রপার্টি আছে যা এই অ্যাকশনটি করার সময় এজেন্ট পাঠাতে বলেছে।

তাই আমি বোতামে ক্লিক করলে, ডেটা মডেলে বর্তমান ভ্যালুর উপর ভিত্তি করে সেই মুহূর্তে এই নির্দিষ্ট প্রপার্টিগুলি সমাধান করা হয় এবং আমরা এজেন্টের কাছে সেটিই পাঠাই।

ঠিক আছে, এবং এখনও পর্যন্ত এজেন্ট আমাদের সাথে বেশ সহযোগিতা করেছে, কিন্তু আমরা এখানে AI সম্পর্কে কথা বলছি এবং AI ভুল করতে পারে।

তাহলে কী হবে? আসুন দেখে নেওয়া যাক, এজেন্ট যদি ভুল করে, মানে UI-তে ভুল করে এবং সেই ভুল আমাদের কাছে বর্ণনা করে, তাহলে কী হবে।

তাই এই শেষ প্রম্পটে, আমরা আসলে এজেন্টকে একটি ভুল করতে বলছি যাতে আমরা আপনাকে এটি ডেমো দেখাতে পারি।

দেখা যাক কী হয়।

হ্যাঁ।

আপনি দেখতে পাচ্ছেন যে, একটি কম্পোনেন্টে সমস্যা আছে বলে চিহ্নিত করা হয়েছে।

আর এখন এটি ঠিক হয়ে গেছে।

সুতরাং, এটি হল এজেন্টের সেল্ফ-কারেকশন লুপ।

প্রতিটি কম্পোনেন্ট UI-তে পৌঁছানোর আগে, আমরা ক্যাটালগ স্কিমার সাথে সেই মেসেজ যাচাই করি।

কম্পোনেন্টটি স্কিমার সাথে না মিললে, এটি একটি ত্রুটি হিসাবে চিহ্নিত করা হয়।

রেন্ডারার বেসিক ক্যাটালগ ইমপ্লিমেন্টেশন দেখায় যে সেই নির্দিষ্ট কম্পোনেন্টে সমস্যা হয়েছে, তবে UI-এর বাকি অংশ এখনও দেখা যাচ্ছে।

ব্যাকগ্রাউন্ডে, রেন্ডারার এজেন্টকে একটি ত্রুটি মেসেজ পাঠায় যাতে এজেন্ট জানতে পারে যে কী ভুল হয়েছে।

তাই এই ক্ষেত্রে, আমরা একটি মেসেজ পাঠিয়েছি যাতে বলা হয়েছে যে অজানা ধরনের কম্পোনেন্ট যা নেই তা ক্যাটালগে পাওয়া যায়নি।

এজেন্ট তখন উত্তর দেওয়ার সুযোগ পেয়েছিল এবং একটি ফলো-আপ উত্তর পাঠিয়েছিল যা বিদ্যমান UI আপডেট করেছিল এবং UI ঠিক জায়গায় ঠিক করা হয়েছিল।

হ্যাঁ।

মেটেরিয়াল বেসিক ক্যাটালগের বর্তমান ইমপ্লিমেন্টেশনে, আমরা সাথে সাথেই সমস্যা দেখাই, তবে আপনার কাস্টম কম্পোনেন্টে, আপনি কোনও কম্পোনেন্টের জন্য লোডিং ইন্ডিকেটর দেখানো চালিয়ে যাওয়ার সিদ্ধান্ত নিতে পারেন, যদি এজেন্ট এটি ঠিক করার জন্য অপেক্ষা করার সময় কোনও সমস্যা হয়।

এবং এইভাবে ব্যবহারকারীর থেকে সমস্যাটি সম্পূর্ণভাবে লুকানো যেতে পারে।

আর ক্যাটালগ ও কাস্টম কম্পোনেন্টের কথা বলতে গেলে, এখনও পর্যন্ত আমরা শুধু বেসিক ক্যাটালগ ব্যবহার করেছি, কারণ এটি আউট-অফ-দ্য-বক্স হিসেবে শিপ করা হয়, তবে আপনি অবশ্যই নিজের প্রয়োজন অনুযায়ী এটি কাস্টমাইজ করতে পারবেন।

তাই আপনি দেখতে পাচ্ছেন যে ক্যাটালগ তৈরি করার জন্য আমরা যখন ফ্যাক্টরি ফাংশন ব্যবহার করি, তখন সেগুলি সমস্ত বিভিন্ন উপাদানের জন্য ডিফল্ট মান হয়।

তাই আপনি চাইলে সহজেই নিজের কম্পোনেন্ট প্লাগ-ইন করতে পারবেন।

যেমন, আমাদের অ্যাপে যদি নিজস্ব ডিজাইন সিস্টেম ও বোতাম থাকে এবং আমরা যদি সেটি প্লাগ-ইন করতে চাই, তাহলে সহজেই তা করতে পারব।

তাই আমরা ক্যাটালগের ইনস্ট্যান্স তৈরি করার সময় এই প্যারামিটারটি ওভাররাইড করি এবং আমরা এই কম্পোনেন্ট ডেফিনিশন তৈরি করব।

তাই আমরা যদি এটি প্রয়োগ করার জন্য একটি নতুন ক্লাস তৈরি করি, আপনি দেখতে পাবেন যে এখানে একটি ইন্টারফেস আছে, A2UI বেসিক ক্যাটালগ অফ টাইপ বাটন।

তাই আমরা এটি প্রয়োগ করলে, আমাদের নিজস্ব কম্পোনেন্ট প্লাগ-ইন করতে পারব।

হ্যাঁ।

তাই যেহেতু আমরা বেসিক ক্যাটালগে একটি কম্পোনেন্ট ওভাররাইড করছি, আমাদের এই A2UI বেসিক ক্যাটালগ বোতাম ইন্টারফেসটি প্রয়োগ করতে হবে।

তাই এই ইন্টারফেসে কম্পোনেন্ট সম্পর্কে কিছু তথ্য আগে থেকেই থাকে, যেমন নাম, বিবরণ এবং প্রপার্টি স্কিমা।

তাই আমাদের নিজস্ব ভার্সন প্রয়োগ করতে হলে এই কম্পোজেবল ফাংশন প্রয়োগ করতে হবে।

এতে কয়েকটি প্যারামিটার লাগে।

তাই এইসব প্যারামিটার হল এজেন্টের থেকে পাওয়া ভ্যালু যা যাচাই করা হয়েছে।

সুতরাং এগুলি হল চাইল্ড আইডির মতো জিনিস, যা এমন একটি কম্পোনেন্টকে রেফারেন্স করে যা বোতামের কন্টেন্ট হবে।

এটির একটি ভ্যারিয়েন্টও আছে যা বোতামের ধরন, অ্যাকশনের সংজ্ঞা এবং অন্যান্য কিছু প্যারামিটার বর্ণনা করে।

প্রোডাকশনে বোতামটি প্রয়োগ করার সময় আমাদের এইসব প্যারামিটার ব্যবহার করতে হবে, তবে ডেমোর জন্য আমাদের শুধু চাইল্ড ও অ্যাকশন প্রয়োজন।

তাহলে, এই কম্পোজেবল প্রয়োগ করা যাক।

ঠিক আছে, এই কম্পোজেবল ফাংশনে, আমরা এখানে আমাদের নিজস্ব কাস্টম লাইক বোতামের ধরন এমিট করতে যাচ্ছি।

আপনি দেখতেই পাচ্ছেন, A2UI-এর মাধ্যমে দেওয়া ও যাচাই করা প্যারামিটার আমরা ব্যবহার করতে পারি।

যেমন, onClick ফাংশনে আমরা সেই অ্যাকশন ডিসপ্যাচ করতে পারি।

আমরা এই লাইব্রেরি টাইপ DispatchAction ব্যবহার করতে পারি এবং A2UI দ্বারা সংজ্ঞায়িত অ্যাকশনটি পাস করতে পারি।

তাই আমরা নিজস্ব বোতাম ব্যবহার করছি, তবে আমরা এখনও চাইল্ড কন্টেন্ট, লেবেল বা এজেন্ট যা ব্যবহার করার সিদ্ধান্ত নিয়েছে তা রেন্ডার করতে চাই।

তাই আমরা যেভাবে এটি করি তা হল, আমরা এই observeA2uiComponentState ফাংশনটি ব্যবহার করি এবং রেন্ডার করা উচিত এমন চাইল্ড কন্টেন্ট হ্যান্ডেল করার জন্য এটিকে childId পাস করি।

এবং তারপরে আমরা যা করব তা হল আমরা এই A2uiComponent কম্পোজেবল ফাংশনটি ব্যবহার করব এবং তারপরে এটিকে রেন্ডার করার জন্য সেই চাইল্ড কম্পোনেন্ট স্টেট পাস করব।

এবং এখানে আপনি দেখতে পাচ্ছেন যে চাইল্ড কন্টেন্ট সফলভাবে লোড হলে আমরা শুধুমাত্র সেটি রেন্ডার করছি, তবে লোড হচ্ছে কিনা বা কোনও সমস্যা সংক্রান্ত স্ট্যাটাস থাকলে, আপনি এখানে নিজের লজিকও ব্যবহার করতে পারেন, আপনি কী দেখাতে চান তা ঠিক করতে পারেন।

তাই আমরা যদি ডেমো অ্যাপে আমাদের উদাহরণ প্রম্পটের একটিতে ফিরে যাই এবং এখন আমরা বোতামটি পরিবর্তন করি, আপনি জানেন, স্ট্যান্ডার্ড মেটেরিয়াল বোতাম।

খুবই সূক্ষ্ম, আশা করি আপনি দেখতে পাচ্ছেন।

আপনি দেখতে পাচ্ছেন যে আমরা এখানেও একটি খুব কাস্টম বোতাম ব্যবহার করছি।

দারুণ, তাহলে আপনি এইভাবে, আপনি জানেন, কিছু লাইব্রেরির ধরন পরিবর্তন করতে পারেন, কিন্তু আপনি যদি নিজের কাস্টম ধরন দিয়ে লাইব্রেরি বাড়াতে চান তাহলে কী হবে?

ক্যাটালগে যোগ করার মাধ্যমে আমরা খুব সহজেই এটি করতে পারি।

তাই স্টার রেটিং কম্পোনেন্ট প্রয়োগ করার জন্য Anton এখানে একটি নতুন ক্লাস তৈরি করতে চলেছেন।

তাই, আমরা এই কাল্পনিক ট্রিপে থাকাকালীন রেস্তোরাঁ রেট করার জন্য আমাদের অ্যাপ্লিকেশনে কিছু যোগ করতে যাচ্ছি।

তাই, যেহেতু আমরা আগে থেকে থাকা কোনও কম্পোনেন্ট পরিবর্তন করছি না, আমরা এই আরও সাধারণ ইন্টারফেস ব্যবহার করি, এই A2UI কম্পোনেন্ট ইন্টারফেস, যাতে, আপনি দেখতে পাচ্ছেন, কিছু প্যারামিটার আছে যা আমাদের ওভাররাইড করতে হবে।

তাই, প্রথম দুটি হল নাম ও বিবরণ।

সুতরাং, এটি আমাদের কম্পোনেন্ট কী এবং কী করে তা বর্ণনা করে।

এখন এগুলি খুবই গুরুত্বপূর্ণ কারণ আমরা যখন ক্যাটালগ সিরিয়ালাইজ করি এবং ব্যাক এন্ডে পাঠাই, যাতে এটি বুঝতে পারে যে UI তৈরি করার জন্য কী ব্যবহার করা যেতে পারে, তখন এজেন্ট এটি ব্যবহার করে সিদ্ধান্ত নেবে যে উত্তর দেওয়ার সময় এই কম্পোনেন্ট ব্যবহার করা হবে কিনা।

তাই, আপনাকে বেশ বর্ণনামূলক হতে হবে এবং AI-কে বলতে হবে যে আপনি ঠিক জানেন যে এটি কী করে।

আমাদের পরবর্তী যে প্রপার্টি ওভাররাইড করতে হবে তা হল এই প্রপার্টিজ প্রপার্টি, যা মূলত বলে যে এই কম্পোনেন্টটি কোন ডেটা নিয়ে কাজ করে।

তাই, আমরা একটি স্টার রেটিং বার তৈরি করছি যাতে আপনি কোনও রেস্তোরাঁকে রেটিং দিতে পারেন এবং আমাদের দুটি প্রপার্টি প্রয়োজন হবে।

এটি একটি ভ্যালু হতে চলেছে, যেমন ব্যবহারকারী কতগুলি স্টার বেছে নিয়েছেন, যা একটি পরিবর্তনযোগ্য প্রপার্টি হতে চলেছে যার সাথে ব্যবহারকারী ইন্টার‍্যাক্ট করতে এবং পরিবর্তন করতে পারবেন এবং স্টারের সর্বাধিক সংখ্যা।

সুতরাং, এখানে আমরা দেখতে পাচ্ছি যে অ্যান্টন ভ্যালুর জন্য এই ডায়নামিক নম্বর-টাইপ প্রপার্টি ব্যবহার করেছেন।

সুতরাং, এটি এমন যে আপনি জানেন যে প্রকৃত কতগুলি তারা বেছে নেওয়া হয়েছে।

যার আবার নিজস্ব ধরনের বিবরণ রয়েছে যা এজেন্টকে বলে যে এই মানটি কীসের জন্য।

এবং তারপরে আমাদের কাছে একটি স্ট্যাটিক-টাইপ প্রপার্টি আছে, তাই আমরা এই কম্পোনেন্টটি দেখাতে পারে এমন স্টারের সর্বাধিক সংখ্যা নির্ধারণ করতে, এই A2UI প্রপার্টি টাইপ নম্বর ব্যবহার করছি।

এবং তারপরে আমরা সেই দুটি প্রপার্টি সংজ্ঞায়িত করার পরে, আমাদের শুধু সেগুলি রিটার্ন করতে হবে।

তাই, এই প্রপার্টির প্রপার্টি ওভাররাইড করে, আমরা একটি তালিকা তৈরি করব, সেগুলি রিটার্ন করব।

সুতরাং, আপনি এইভাবে এজেন্টকে বলবেন যে এই কম্পোনেন্টটি কী নিয়ে কাজ করে।

হ্যাঁ।

নিক যেমন উল্লেখ করেছেন, এই প্রপার্টির সংজ্ঞাগুলি ক্যাটালগ স্কিমার অংশ হিসেবে পাঠানো হয় যাতে এজেন্ট জানতে পারে যে এই কম্পোনেন্টটি কীভাবে ব্যবহার করতে হবে।

কিন্তু এই প্রপার্টি, একই প্রপার্টি সংজ্ঞা রানটাইমে টাইপ করা মান এক্সট্র্যাক্ট করতেও ব্যবহৃত হয়।

তাই, single source of truth আছে।

তাহলে, এটি প্রয়োগ করার জন্য আমাদের কী করতে হবে তা দেখা যাক।

তাই, প্রথমে, ধরা যাক, ম্যাক্স প্রপার্টি অ্যাক্সেস করতে, যেহেতু ম্যাক্স প্রপার্টি একটি স্ট্যাটিক প্রপার্টি, এর অর্থ হল এজেন্ট প্রপার্টি অবজেক্টে ইনলাইন হিসেবে এটির ভ্যালু পাঠায়।

তাই, এটি অ্যাক্সেস করতে, আমাদের শুধু প্রপার্টি অবজেক্ট থেকে এটি পেতে হবে, এর জন্য প্রপার- ম্যাক্স প্রপার্টি অবজেক্টকে কী হিসেবে ব্যবহার করে এটিকে রেফারেন্স করতে হবে।

যেহেতু এই প্রপার্টি একটি সংখ্যা হিসেবে সংজ্ঞায়িত করা হয়েছে, তাই আমাদের এটিকে একটি int-এ রূপান্তর করতে হবে এবং ডিফল্ট সেট করতে হবে।

এর পরের বিষয়টি হল ভ্যালু প্রপার্টি।

ভ্যালু প্রপার্টি একটি ডায়নামিক প্রপার্টি হওয়ার অর্থ হল, এটি ডেটা মডেলের কোনও কিছুকে রেফারেন্স করছে।

তাই, এটি অ্যাক্সেস করতে, আমাদের properties.bind API ব্যবহার করতে হবে এবং প্যারামিটার হিসেবে কী হিসেবে প্রপার্টি অবজেক্ট পাস করতে হবে।

তাই, এটি যা করে তা হল, এই প্রপার্টির জন্য ডেটা মডেলে স্টোর করা বর্তমান ভ্যালু ফিরিয়ে দেয় এবং ভবিষ্যতের আপডেটের জন্য সাবস্ক্রাইব করে।

তাই, ডেটা মডেল আপডেট করা হলে, এই কম্পোনেন্ট অটোমেটিক রিকম্পোজ হবে।

তাই, একইভাবে, আমরাও একটি int-এ কনভার্ট করেছি এবং কিছু ডিফল্ট সেট করেছি।

আমাদের আরও একটি কাজ করতে হবে, সেটি হল টু-ওয়ে বাইন্ডিং সেট-আপ করা যাতে আমরা রেটিং পরিবর্তন করতে পারি।

এটি করার জন্য, আমরা bindUpdater API ব্যবহার করি।

আমরা একই প্রপার্টি অবজেক্ট পাস করি যা প্রপার্টিকে সংজ্ঞায়িত করে এবং এর ফলে আমরা পাই, তাই bindUpdater একটি ল্যাম্বডা রিটার্ন করে যা আমাদের ডেটা মডেলে এই প্রপার্টির জন্য একটি ভ্যালু মিউটেট করতে দেয়।

এখন আমরা স্টার রেটিং কম্পোনেন্ট এমিট করার জন্য রেডি।

ঠিক আছে।

সুতরাং, এখন আমরা যেহেতু নিজস্ব কাস্টম কম্পোনেন্ট সংজ্ঞায়িত করেছি, তাই আমরা যে ক্যাটালগ ব্যবহার করছি তাতে এটি যোগ করতে হবে।

তাই, আগে আমরা শুধু বেসিক ক্যাটালগ ব্যবহার করছিলাম।

সুতরাং, এখন আমাদের যা করতে হবে তা হল আসলে একটি নতুন ক্যাটালগ তৈরি করা, যা সমস্ত মৌলিক ক্যাটালগ নেবে এবং আমাদের কাস্টম কম্পোনেন্টে যোগ করবে।

সুতরাং, তিনটি জিনিস নিয়ে একটি ক্যাটালগ তৈরি করা হয়।

এটি হল একটি আইডি, কম্পোনেন্টের সেট এবং ফাংশনের সেট।

আইডির জন্য, আমরা একটি URI ব্যবহার করব যা আপনি জানেন, একটি অনন্যভাবে শনাক্ত করা ক্যাটালগ এবং সেইসাথে আমরা যে ভার্সনটি নিয়ে কাজ করছি তা নির্ধারণ করতে।

এবং তারপরে কম্পোনেন্টের জন্য, আমরা বেসিক ক্যাটালগ থেকে সব কম্পোনেন্ট নেব এবং তারপরে আমরা এইমাত্র তৈরি করা কাস্টম কম্পোনেন্টে যোগ করার জন্য অ্যাড অপারেটর ব্যবহার করব।

আর ফাংশনের জন্য, আমরা শুধু বেসিক ক্যাটালগ থেকে ফাংশন ব্যবহার করব।

এবং এইভাবে, আমরা আমাদের নতুন কাস্টম কম্পোনেন্ট টাইপ যোগ করার জন্য বেসিক ক্যাটালগটি এক ধরণের প্রসারিত করেছি।

দেখুন, কাস্টম ক্যাটালগ তৈরি করা কত সহজ।

তাই, আমরা সিস্টেমের যে নির্দেশাবলী পাঠাই তা থেকে এজেন্ট ক্যাটালগ ব্যবহার করার পদ্ধতি সম্পর্কে জানতে পারে।

সুতরাং, যেহেতু আমরা এখন একটি কাস্টম ক্যাটালগ তৈরি করেছি, তাই সিস্টেমের নির্দেশাবলীও আপডেট করা যাক।

তাই, আমরা ক্যাটালগ অবজেক্টটি আমাদের ফাংশনে পাস করব যা সিস্টেমের নির্দেশাবলী তৈরি করে।

তাহলে, এই হল সেই খবর।

তাই, এখন পর্যন্ত, আমরা বেসিক ক্যাটালগের জন্য স্কিমার একটি স্ট্যাটিক সংজ্ঞা পাঠাচ্ছিলাম কারণ আমরা এই স্ট্যান্ডার্ড ক্যাটালগ ব্যবহার করছিলাম।

এখন আমাদের কাছে একটি কাস্টম ক্যাটালগ আছে, আমরা toJsonSchemaString ফাংশন ব্যবহার করে ডাইনামিকভাবে স্কিমা তৈরি করতে পারি।

সুতরাং, এটি এই ক্যাটালগের একটি সম্পূর্ণ JSON উপস্থাপনা তৈরি করবে, যার মধ্যে আমরা এইমাত্র যোগ করা স্টার-রেটিং কম্পোনেন্টও অন্তর্ভুক্ত থাকবে।

সিস্টেমের নির্দেশাবলীতে এজেন্টের জন্য কিছু উদাহরণস্বরূপ উত্তরও অন্তর্ভুক্ত থাকে।

তাই, আমরা এখানে ক্যাটালগ আইডিও পরিবর্তন করি, যাতে উদাহরণগুলি সঠিক ক্যাটালগকে রেফারেন্স করে।

ঠিক আছে।

এবং এর সাথে, আমরা আমাদের নিজস্ব কাস্টম ধরন যোগ করার জন্য বেসিক ক্যাটালগ বাড়িয়েছি।

তাই, আমরা যদি এটি আবার ডিপ্লয় করি এবং এই প্রম্পটগুলির মধ্যে একটি ব্যবহার করে দেখি, তাহলে আশা করি আমরা একটি রেটিং UI দেখতে পাব।

তারপর এজেন্ট উত্তর দেয়।

এবং এখানে, আপনি দেখতে পাচ্ছেন যে এই স্টার কম্পোনেন্টটি হল এই ব্র্যান্ডের নতুন কম্পোনেন্ট যা এজেন্ট আমরা এখনই এটি প্রয়োগ না করা পর্যন্ত কখনও দেখেনি।

এটি বেসিক ক্যাটালগের অংশ নয়, আমরা এটি এইমাত্র তৈরি করেছি।

আমি যখন স্টারে ক্লিক করি, তখন bindUpdater ল্যাম্বডা কল করা হয় এবং ডেটা মডেলে ভ্যালু আপডেট করা হয়।

এবং আমরা যদি রেটিং জমা দিই, তাহলে আমরা অ্যাকশনটি দেখতে পারি এবং অ্যাকশনের প্রসঙ্গে আমরা এইমাত্র সেট করা মানগুলি অন্তর্ভুক্ত থাকবে।

ঠিক আছে, আমরা যদি এখন স্লাইডে ফিরে যেতে পারতাম।

আমরা অনেক কিছু খুব দ্রুত আলোচনা করলাম, তবে আশা করি, আমরা দেখাতে পেরেছি যে কীভাবে আপনি এজেন্টদের টেক্সটের প্রাচীর হিসেবে উত্তর দেওয়া থেকে শুরু করে আসলে রিয়েল নেটিভ UI তৈরি করার দিকে সহজেই এগিয়ে যেতে পারেন।

আশা করি, আমরা আপনাকে দেখাতে পেরেছি যে ইন্টিগ্রেশন করাটা বেশ সহজ।

আপনাকে এই তিনটি প্রধান কম্পোনেন্ট তৈরি করতে হবে: আপনাকে কম্পোনেন্টের ক্যাটালগ তৈরি করতে হবে, কিছু পার্সিং লজিক প্রয়োগ করতে হবে এবং তারপর আপনার UI-তে এটি রেন্ডার করতে হবে।

এবং আশা করি, আমরা দেখাতে পেরেছি যে লাইব্রেরি আপনার জন্য অনেক কিছু করে, যেমন প্রগ্রেসিভ রেন্ডারিং বা আপনার স্কিমা যাচাই করা, সেল্ফ-কারেকশন লুপ বা ত্রুটি ম্যানেজ করা, এটি অনেক কিছু করে।

এবং আশা করি, আমরা আজ খুব দ্রুত দেখিয়েছি যে এটি কাস্টমাইজ করা আপনার জন্য খুব সহজ।

আপনি যদি মেটিরিয়াল ব্যবহার করেন, তাহলে বেসিক ক্যাটালগ কীভাবে আপনার মেটিরিয়াল থিমে সাড়া দেয় তা আমরা দেখিয়েছি, তবে ক্যাটালগের মধ্যে কম্পোনেন্ট বাড়ানো বা পরিবর্তন করা সত্যিই সহজ।

তবে আমি মনে করি, আপনি যদি নিজের ক্যাটালগ তৈরি করেন, তাহলে আপনি সবচেয়ে বেশি সুবিধা পাবেন।

এজেন্ট আসলে কোন UI ব্যবহার করতে পারবে তার উপর সবচেয়ে বেশি নিয়ন্ত্রণ চাইলে, আপনি সম্পূর্ণ কাস্টম কম্পোনেন্ট তৈরি করতে পারবেন।

আপনি যদি এটিকে সম্পূর্ণ স্বাধীনতা দিতে চান, তাহলে আপনি এটিকে খুব বেসিক কম্পোনেন্ট দিতে পারেন, যেমন টেক্সট লেবেল এবং বোতাম, এবং বলতে পারেন, "আপনি UI তৈরি করুন।"

আপনি আরও নিয়ন্ত্রণ করতে চাইলে, আরও বিস্তারিত কম্পোনেন্ট তৈরি করে বলতে পারেন, "তুমি শুধু এইসব জিনিসই ব্যবহার করতে পারবে।"

তাই, এজেন্ট কী করতে পারে এবং আপনার ব্যবহারকারীদের কী দেখাতে পারে তা আপনি নিয়ন্ত্রণ করতে পারবেন।

সুতরাং, এটি হল নতুন A2UI রেন্ডারার লাইব্রেরি এবং Jetpack লাইব্রেরি যা আমরা এইমাত্র লঞ্চ করেছি।

implementation("androidx.compose.material3:material3-a2ui:1.0.0-alpha02")

এটি বর্তমানে Alpha-তে আছে, Alpha 02 সম্প্রতি রিলিজ করা হয়েছে।

তাই, চেক আউট করতে এইসব লিঙ্কে যান।

developer.android.com-এ আমাদের ডকুমেন্টেশন এবং কিছু স্যাম্পেল আছে।

আমাদের কাছে একটি বেসিক স্যাম্পেল আছে যা বেসিক ক্যাটালগ দেখায়, এর পাশাপাশি আরও বিস্তারিত স্যাম্পেল আছে এবং এই JetPacker স্যাম্পেল অ্যাপ আমরা এইমাত্র তৈরি করেছি, যা আপনি আজ পরে ADS কীনোটে আবার দেখতে পাবেন, এটি দেখায় যে ব্যবহারকারী কী দেখছেন তা কন্ট্রোল করার জন্য আপনি কীভাবে এই ধরনের আরও বিস্তারিত কম্পোনেন্ট তৈরি করতে পারেন।

আমি যেমন বলেছি, আমরা বর্তমানে আলফা ভার্সনে আছি, তাই এটি চেক করে দেখার এবং আপনার মতামত ও ফিচার রিকোয়েস্ট জানানোর জন্য এটি একটি দুর্দান্ত সময়। আপনি কীভাবে এটি ব্যবহার করতে চান বা এটি যদি X বা Y করতে পারে তবে আমি এটি ব্যবহার করতে চাই, এই ধরনের মতামত আমাদের জানান।

তাই, লাইব্রেরি চেক করে আপনার মতামত জানান।

আর আমরা এটাই পেয়েছি।

আপনি এবং আপনার এজেন্টরা এটি দিয়ে কী তৈরি করেন তা দেখার জন্য আমি অধীর আগ্রহে অপেক্ষা করছি।

অনেক ধন্যবাদ।

ধন্যবাদ।