কম্পোনেন্ট ক্যাটালগ তৈরি এবং কাস্টমাইজ করুন

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

অন্য কথায়: ক্যাটালগটি কম্পোনেন্টগুলো ঘোষণা করে, এবং এজেন্ট সেগুলো ব্যবহার করে আপনার অ্যাপের UI তৈরি করে।

Jetpack Compose A2UI রেন্ডারার ব্যবহার করে একটি অ্যান্ড্রয়েড অ্যাপ তৈরি করার সময়, আপনি কীভাবে ক্যাটালগ সরবরাহ করবেন সে বিষয়ে আপনার কাছে নমনীয় বিকল্প রয়েছে:

• বেসিক ক্যাটালগ : A2UI প্রজেক্টটি বেসিক ক্যাটালগ নামক একটি প্রমিত, সাধারণ-উদ্দেশ্যমূলক স্পেসিফিকেশন সংজ্ঞায়িত করে, যার মধ্যে বাটন, টেক্সট, টেক্সট ফিল্ড, কার্ড এবং লিস্টের মতো সাধারণ উপাদানগুলো অন্তর্ভুক্ত। androidx.compose.material3:material3-a2ui AndroidX লাইব্রেরিটি নেটিভ ম্যাটেরিয়াল ডিজাইন ৩ কম্পোনেন্ট ব্যবহার করে এই বেসিক ক্যাটালগ স্পেসিফিকেশনের একটি রেডিমেড ইমপ্লিমেন্টেশন প্রদান করে। androidx.a2ui.compose:compose-ui লাইব্রেরিটিও বেসিক ক্যাটালগের জন্য একটি জেনেরিক স্কিমা ডেফিনিশন প্রদান করে, যা আপনাকে আপনার নিজস্ব ডিজাইন সিস্টেমের জন্য বেসিক ক্যাটালগ ইমপ্লিমেন্ট করতে সাহায্য করে।
• কাস্টম ক্যাটালগ : নিজস্ব স্বতন্ত্র ডিজাইন সিস্টেমযুক্ত প্রোডাকশন অ্যাপ্লিকেশনগুলির জন্য, আপনি একেবারে শুরু থেকে একটি কাস্টম ক্যাটালগ তৈরি করতে পারেন। এটি এজেন্টকে আপনার অ্যাপের সুনির্দিষ্ট কম্পোনেন্ট, স্টাইলিং টোকেন এবং ভিজ্যুয়াল ল্যাঙ্গুয়েজের মধ্যে সীমাবদ্ধ রাখে।
• সাবসেট বা হাইব্রিড : আপনি প্রদত্ত বেসিক ক্যাটালগ থেকে নির্দিষ্ট কম্পোনেন্ট ইমপ্লিমেন্টেশনগুলোকে আপনার নিজস্ব কাস্টম কম্পোনেন্টের সাথে একত্রিত করতে পারেন, অথবা বেসিক ক্যাটালগ স্যুটের মধ্যে থাকা স্বতন্ত্র কম্পোনেন্ট ইমপ্লিমেন্টেশনগুলোকে ওভাররাইড করতে পারেন।

প্রদত্ত বেসিক ক্যাটালগ ব্যবহার করুন

প্রথম থেকে কম্পোনেন্ট স্কিমা তৈরি না করে দ্রুত কাজ শুরু করার জন্য, আপনি A2UI বেসিক ক্যাটালগ স্পেসিফিকেশনের প্রদত্ত ইমপ্লিমেন্টেশনটি ব্যবহার করতে পারেন। androidx.compose.material3:material3-a2ui লাইব্রেরিটি ম্যাটেরিয়াল ডিজাইন ৩ কম্পোনেন্ট ব্যবহার করে বেসিক ক্যাটালগটি ইমপ্লিমেন্ট করে।

যখন আপনি materialA2uiBasicCatalogV1 ইনস্ট্যানশিয়েট করবেন, তখন নিম্নলিখিতগুলির জন্য রেন্ডারার এবং হ্যান্ডলার সরবরাহ করুন:

• মিডিয়া উপাদান, যেমন ছবি, ভিডিও এবং অডিও প্লেয়ার
• ইউআরএল ওপেনার
• স্থানীয় বার্তা বিন্যাস

A2UI লাইব্রেরিগুলো ইচ্ছাকৃতভাবে Coil, Glide, বা Media3-এর মতো বাহ্যিক মিডিয়া এবং নেটওয়ার্কিং নির্ভরতাগুলো বান্ডল করে না। এর পরিবর্তে, আপনাকে আপনার নিজস্ব রেন্ডারার সরবরাহ করতে হয়। এটি স্বতন্ত্র লাইব্রেরি সরবরাহ করার মাধ্যমে নির্ভরতার দ্বন্দ্ব প্রতিরোধ করে। উদাহরণস্বরূপ, যদি আপনার অ্যাপ ইতিমধ্যেই ইমেজ লোড করার জন্য Coil বা প্লেব্যাকের জন্য Media3 ব্যবহার করে থাকে, তবে আপনি সেই বিদ্যমান লাইব্রেরিগুলোকে সরাসরি ক্যাটালগে যুক্ত করতে পারেন।

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

// Instantiate the provided Basic Catalog (implemented with Material 3)
val basicCatalog = materialA2uiBasicCatalogV1(
    // Example: Wire up Coil for image loading (via AsyncImage)
    image = MaterialA2uiBasicCatalogV1Defaults.image {
            url, description, scale, modifier, onError ->
        AsyncImage(
            model = url,
            contentDescription = description,
            contentScale = scale,
            modifier = modifier,
            onError = { state -> onError(state.result.throwable) },
        )
    },

    // Example: Use ExoPlayer/Media3 for video
    video = MaterialA2uiBasicCatalogV1Defaults.video { url, modifier, onError ->
        // Custom ExoPlayer video integration here
    },

    // Example: Use an audio player
    audioPlayer = MaterialA2uiBasicCatalogV1Defaults.audioPlayer {
            url, description, modifier, onError ->
        // Custom audio integration here
    },

    // Handle outbound URLs, such as using an app navigator or context intents.
    urlOpener = { url ->
        appNavigator.openUrl(url)
    },

    // Handle localized message formatting
    messageFormatter = { pattern, locale, args ->
        MessageFormat.format(context, locale, pattern, args)
    },
    localeProvider = A2uiLocaleProvider.Default,
)

শুরু থেকে একটি কাস্টম কম্পোনেন্ট ক্যাটালগ তৈরি করুন

আপনার অ্যাপ যদি একটি কাস্টম ডিজাইন সিস্টেম ব্যবহার করে, তাহলে আপনি আপনার নিজস্ব কাস্টম A2uiComponent ইমপ্লিমেন্টেশন সম্বলিত একটি ক্যাটালগ সংজ্ঞায়িত করতে পারেন। এই পদ্ধতিটি আপনাকে এজেন্টের কাছে প্রকাশিত কম্পোনেন্ট স্কিমা এবং নির্গত নেটিভ কম্পোজ UI-এর উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়:

// Define a custom catalog that mirrors your app's design system
val CustomDesignSystemCatalog = A2uiCatalog(
    catalogId = "https://example.com/catalogs/my-design-system/v1/catalog.json",
    components = listOf(
        CustomButtonComponent,
        CustomCardComponent,
        CustomTextFieldComponent,
    ),
    functions = listOf(MyCustomLocalFunction()),
)

স্বতন্ত্র কম্পোনেন্ট স্কিমা এবং তাদের কম্পোজ UI রেন্ডারিং লজিক নির্ধারণের নির্দেশাবলীর জন্য, “কাস্টম A2UI কম্পোনেন্ট বাস্তবায়ন করুন” দেখুন।

কাস্টম কম্পোনেন্টের সাথে বেসিক ক্যাটালগ কম্পোনেন্টের একটি উপসেট ব্যবহার করুন

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

// Assemble a catalog using select Basic Catalog components alongside custom components
val hybridCatalog = A2uiCatalog(
    catalogId = "https://example.com/catalogs/my-app/v1/catalog.json",
    components = listOf(
        // Use provided Basic Catalog components (built with Material 3)
        MaterialA2uiBasicCatalogV1Defaults.text,
        MaterialA2uiBasicCatalogV1Defaults.card,

        // Add proprietary components from your app's design system
        CustomChartComponent,
        CustomProductCardComponent,
    ),
    functions = createBasicCatalogFunctions(...),
)

বিকল্পভাবে, আপনি নির্দিষ্ট কম্পোনেন্ট স্লটগুলিকে ওভাররাইড করে প্রদত্ত বেসিক ক্যাটালগ স্যুটটি কাস্টমাইজ করতে পারেন:

// Override specific components within the Basic Catalog suite
val customizedBasicCatalog = materialA2uiBasicCatalogV1(
    // Supply required renderers (such as Coil or ExoPlayer) as shown earlier
    image = MaterialA2uiBasicCatalogV1Defaults.image(myImageRenderer),
    video = MaterialA2uiBasicCatalogV1Defaults.video(myVideoRenderer),
    audioPlayer = MaterialA2uiBasicCatalogV1Defaults
        .audioPlayer(myAudioRenderer),
    urlOpener = { url -> /* Open URL */ },
    messageFormatter = { pattern, _, _ -> pattern },
    localeProvider = A2uiLocaleProvider.Default,
    // Replaces the default button. If you use this, implement the
    // A2uiBasicCatalogV1.Button interface.
    button = MyCustomBrandButtonComponent,
    
)

ক্যাটালগ ভার্সনিং এবং স্কিমা বিবর্তন পরিচালনা করুন

A2UI ক্যাটালগগুলো তাদের JSON স্কিমা চুক্তি অনুসারে সুস্পষ্টভাবে ভার্সনযুক্ত করা হয়। স্কিমাতে বড় ধরনের পরিবর্তন আনার ক্ষেত্রে ভার্সন আপগ্রেড করা আবশ্যক:

// Original component (v1 catalog)
object CustomButtonComponent : A2uiComponent { ... }

// Unchanged component across versions
object CustomTextComponent : A2uiComponent { ... }

// Future breaking schema change (v2 catalog)
object CustomButtonComponentV2 : A2uiComponent { ... }

// Assembles the v1 catalog
fun customCatalogV1(
    button: A2uiComponent = CustomButtonComponent,
    text: A2uiComponent = CustomTextComponent,
): A2uiCatalog = A2uiCatalog(
    catalogId = "https://example.com/catalogs/my-app/v1/catalog.json",
    components = listOf(button, text),
)

// Assembles the v2 catalog
fun customCatalogV2(
    button: A2uiComponent = CustomButtonComponentV2,
    text: A2uiComponent = CustomTextComponent,
): A2uiCatalog = A2uiCatalog(
    catalogId = "https://example.com/catalogs/my-app/v2/catalog.json",
    components = listOf(button, text),
)

ডাউনটাইম ছাড়া নির্বিঘ্ন মাইগ্রেশন সক্ষম করতে, আপনার ক্লায়েন্ট মেসেজ প্রসেসরের সাথে একই সাথে একাধিক সমর্থিত ক্যাটালগ সংস্করণ নিবন্ধন করতে পারেন:

private val processor = A2uiMessageProcessor(
    catalogs = listOf(
        customCatalogV1(),
        customCatalogV2(),
    ),
)

ক্যাটালগ আলোচনার সময়, এজেন্ট সমস্ত সমর্থিত ক্যাটালগ আইডি খুঁজে বের করে এবং প্রতিটি সারফেসের জন্য উপযুক্ত সংস্করণটি নির্ধারণ করে।

বাস্তবায়নের বিবরণ

নিম্নলিখিত বিভাগগুলিতে অভ্যন্তরীণ ক্যাটালগ যাচাইকরণ এবং স্কিমা আলোচনা ব্যাখ্যা করা হয়েছে।

ক্যাটালগ ম্যানেজমেন্ট ইউজার জার্নি নিম্নলিখিত মূল API-গুলো উপস্থাপন করে:

• A2uiCatalog : কম্পোনেন্ট ক্যাটালগ সংজ্ঞায়িত করার জন্য ইন্টারফেস এবং শীর্ষ-স্তরের ফ্যাক্টরি ফাংশন।
• materialA2uiBasicCatalogVX : ভার্সনযুক্ত ফ্যাক্টরি ফাংশন (যেমন materialA2uiBasicCatalogV1 ) যা স্ট্যান্ডার্ড A2UI বেসিক ক্যাটালগ স্পেসিফিকেশনের ম্যাটেরিয়াল ৩ ইমপ্লিমেন্টেশন প্রদান করে।
• A2uiReadinessEvaluator এবং asReadinessEvaluator() : A2uiReadinessEvaluator হলো কম্পোনেন্টের প্রস্তুতি মূল্যায়নের জন্য ব্যবহৃত ইন্টারফেস। asReadinessEvaluator() এক্সটেনশন ফাংশনটি একটি ক্যাটালগে নিবন্ধিত কম্পোনেন্টগুলো ব্যবহার করে প্রস্তুতির অবস্থাগুলো সমাধান করে।

A2UI সংস্করণ ক্যাটালগ এবং উপাদান স্কিমা

একটি ক্যাটালগ স্কিমা ডেফিনিশন একটি নির্দিষ্ট প্রোটোকল ভার্সনের সাথে যুক্ত থাকে। যখন প্রোটোকলটি বিকশিত হয়, তখন ক্যাটালগ ডেফিনিশনটিরও ভার্সন উন্নত হয়। এই পরবর্তী ভার্সনের কম্পোনেন্ট ইমপ্লিমেন্টেশনগুলো আপডেট করা রেন্ডারার এপিআই ব্যবহার করতে পারে, এবং একই সাথে পূর্ববর্তী ভার্সনগুলোও পাশাপাশি চালু থাকে।