কম্পোজে অটোফিল

কিছু অ্যাপ, যেমন পাসওয়ার্ড ম্যানেজার, ব্যবহারকারীর দেওয়া ডেটা দিয়ে অন্যান্য অ্যাপের কম্পোনেন্ট পূরণ করতে পারে। যেসব অ্যাপ অন্যান্য অ্যাপের কম্পোনেন্ট পূরণ করে, সেগুলিকে অটোফিল পরিষেবা বলা হয়। অটোফিল ফ্রেমওয়ার্ক, অ্যাপ ও অটোফিল পরিষেবার মধ্যে যোগাযোগ ম্যানেজ করে।

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

মাত্র কয়েক লাইন কোড লিখে আপনি Compose-এ অটোফিল প্রয়োগ করতে পারবেন। এই ফিচার ব্যবহারকারীদের নিম্নলিখিত সুবিধা প্রদান করে:

ক্রেডেনশিয়াল পূরণ করুন

অটোফিল ব্যবহারকারীদের নিম্নলিখিত উপায়ে তাদের ক্রেডেনশিয়াল পূরণ করার অনুমতি দেয়:

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

ক্রেডেনশিয়াল সেভ করুন

ব্যবহারকারীরা নিম্নলিখিত উপায়ে অটোফিলের মাধ্যমে ক্রেডেনশিয়াল সেভ করতে পারবেন:

  • সিস্টেমটি একটি সেভ ডায়ালগ ট্রিগার করে, যা ব্যবহারকারীকে তথ্য সেভ করার জন্য প্রম্পট করে যখন তারা অটোফিল-চালু করা ফিল্ডে নতুন বা আপডেট করা তথ্য ইনপুট করে। দুটি উপায়ে সেভ করা যায়:
    • স্পষ্টভাবে, তথ্য জমা দেওয়ার মাধ্যমে (যেমন, কোনও বোতামে ক্লিক করে)
    • ব্যবহারকারী পৃষ্ঠা থেকে নেভিগেট করে চলে গেলে, এটি অটোমেটিক বন্ধ হয়ে যায়
  • আপনার ক্রেডেনশিয়াল প্রদানকারীর উপর নির্ভর করে, কোনও ফিল্ডে ContentType.NewPassword সেট করা থাকলে, সিস্টেম ব্যবহারকারীকে একটি শক্তিশালী পাসওয়ার্ড সাজেস্ট করতে পারে।

ব্যবহারকারীদের জন্য সেভ করা ডেটা ফিরিয়ে আনার প্রসেস আরও সহজ করতে, আপনি নিজের অ্যাপে 'অটোফিল' ফিচার ব্যবহার করতে পারেন। অটোফিল BasicTextField এবং সেই কম্পোনেন্টের উপর তৈরি সমস্ত মেটেরিয়াল টেক্সট ফিল্ডের মাধ্যমে টেক্সট কম্পোনেন্টকে সাপোর্ট করে।

স্বতঃপূর্ণ সেট করুন

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

একটি সেটিংস পৃষ্ঠা যা দেখায় কীভাবে একটি ক্রেডেনশিয়াল প্রদানকারী নির্দিষ্ট করতে হয়।
ছবি ১. একটি সেটিংস পৃষ্ঠা যেখানে দেখানো হয়েছে কীভাবে ক্রেডেনশিয়াল প্রদানকারীকে নির্দিষ্ট করতে হয়।

কন্টেন্টের ধরন ব্যবহার করে আপনার টেক্সট ফিল্ডে অটোফিল যোগ করুন

কোনও TextField-এ অটোফিল চালু আছে কিনা তা বোঝাতে, ফিল্ডটি গ্রহণ করতে পারে এমন ধরনের সাথে ContentType সিম্যান্টিক্স সেট করুন। এটি অটোফিল পরিষেবাকে নির্দেশ করে যে এই নির্দিষ্ট ফিল্ডের জন্য কোন ধরনের ব্যবহারকারীর ডেটা প্রাসঙ্গিক হতে পারে। ContentType.Username ব্যবহার করে এমন একটি TextField সেট করুন যা ব্যবহারকারীরা তাদের ইউজারনেম দিয়ে পূরণ করতে পারবেন।

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

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)

একাধিক ধরনের অটোফিল ফিল্ড যোগ করুন

কিছু ক্ষেত্রে, আপনি হয়ত চাইবেন যে আপনার TextField একাধিক ContentType-এর দায়িত্ব নিক। যেমন, লগ-ইন ফিল্ডে ইমেল আইডি বা ইউজারনেম লিখতে হতে পারে। আপনি + অপারেটর ব্যবহার করে আপনার TextField-এ একাধিক কন্টেন্টের ধরন যোগ করতে পারবেন।

অটোফিলের মাধ্যমে সেভ করার জন্য উপলভ্য সব ধরনের ডেটার জন্য, ContentType রেফারেন্স দেখুন।

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)

অটোফিল ফিচারের মাধ্যমে ডেটা পূরণ করা

আপনি TextField-এ ContentType যোগ করলে, ব্যবহারকারীদের ক্রেডেনশিয়াল পূরণ করার জন্য আপনাকে আর কিছু করতে হবে না।

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

টেক্সট টুলবারে চিপ সেভ করা ক্রেডেনশিয়াল দেখাচ্ছে।
ছবি ২. টেক্সট টুলবারে চিপ সেভ করা ক্রেডেনশিয়াল দেখাচ্ছে।

নেভিগেশনের মাধ্যমে অটোফিলের সাহায্যে ডেটা সেভ করা

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

অটোফিলের মাধ্যমে স্পষ্টভাবে ডেটা সেভ করুন

অটোফিলের মাধ্যমে টেক্সট ফিল্ডে নতুন ক্রেডেনশিয়াল স্পষ্টভাবে সেভ করতে, অটোফিল ম্যানেজারকে অটোফিল প্রসঙ্গ কমিট (বা বাতিল) করতে হবে। প্রয়োজন হলেই লোকাল অটোফিল ম্যানেজার, অটোফিল ফ্রেমওয়ার্কের সাথে যোগাযোগ করে। ব্যবহারকারীর ইনপুট করা ক্রেডেনশিয়াল সরাতে চাইলে, AutofillManager.cancel কল করে সেভ না করেই যেকোনও পেন্ডিং ডেটা মুছে দিন।

নিম্নলিখিত স্নিপেট থেকে জানা যায় যে কীভাবে একটি বোতাম ব্যবহার করে স্পষ্টভাবে অটোফিলের মাধ্যমে ডেটা সেভ করা যায়:

  1. অটোফিল ম্যানেজার ধরে রাখার জন্য একটি লোকাল ভেরিয়েবেল তৈরি করুন, যা নিম্নলিখিত উপায়ে উদ্ধার করা যেতে পারে:

    val autofillManager = LocalAutofillManager.current

  2. আপনার TextField(s)-এ, Modifier.semantics-এর মাধ্যমে আপনার বেছে নেওয়া কন্টেন্টের ধরন যোগ করুন:

    val autofillManager = LocalAutofillManager.current
    
    Column {
        TextField(
            state = rememberTextFieldState(),
            modifier = Modifier.semantics { contentType = ContentType.NewUsername }
        )
    
        Spacer(modifier = Modifier.height(16.dp))
    
        TextField(
            state = rememberTextFieldState(),
            modifier = Modifier.semantics { contentType = ContentType.NewPassword }
        )
    }

  3. প্রয়োজন অনুযায়ী বোতামে ক্লিক করে অটোফিল কন্টেক্সট কমিট করুন:

    val autofillManager = LocalAutofillManager.current
    
    Column {
        TextField(
            state = rememberTextFieldState(),
            modifier = Modifier.semantics { contentType = ContentType.NewUsername },
        )
    
        Spacer(modifier = Modifier.height(16.dp))
    
        TextField(
            state = rememberTextFieldState(),
            modifier = Modifier.semantics { contentType = ContentType.NewPassword },
        )
    
        // Submit button
        Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
    }

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

ব্যবহারকারী বোতামে ক্লিক করলে, তিনি এই স্ক্রিনের নিচে অ্যাটাচ করা শিট দেখতে পাবেন যা তাকে বেছে নেওয়া ক্রেডেনশিয়াল প্রোভাইডারে ক্রেডেনশিয়াল সেভ করার জন্য প্রম্পট করবে:

স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের পাসওয়ার্ড সেভ করার জন্য প্রম্পট করছে।
ছবি ৩. স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের পাসওয়ার্ড সেভ করার জন্য প্রম্পট করছে।

শক্তিশালী পাসওয়ার্ড সাজেস্ট করার মাধ্যমে অটোফিলের সাহায্যে ডেটা সেভ করুন

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

কীবোর্ড টুলবারে শক্তিশালী পাসওয়ার্ড সাজেস্ট করার চিপ।
ছবি ৪. কীবোর্ড টুলবারে শক্তিশালী পাসওয়ার্ড সাজেস্ট করার চিপ।
স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের শক্তিশালী পাসওয়ার্ড ব্যবহার করার জন্য প্রম্পট করছে।
ছবি ৫. স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের শক্তিশালী পাসওয়ার্ড ব্যবহার করার জন্য প্রম্পট করছে।

সমস্যার সমাধান

"সেভ করা" ব্যবহারকারীর অভিজ্ঞতা চালু করার সময়, আপনি "এখন নয়" বিকল্পে একাধিকবার ক্লিক করলে, আপনার ক্রেডেনশিয়াল প্রদানকারী আর স্ক্রিনের নিচে অ্যাটাচ করা শিট দেখাতে পারবে না। এটি আবার চালু করতে এবং আরও একবার দেখাতে, আপনাকে নির্দিষ্ট কিছু অ্যাপ সরাতে হবে যেগুলি "এই পাসওয়ার্ড মনে রাখবেন?" বিকল্পটি ব্লক করেছে।

স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের পাসওয়ার্ড সেভ করার জন্য প্রম্পট করছে।
ছবি ৬. স্ক্রিনের নিচে অ্যাটাচ করা শিট ব্যবহারকারীদের পাসওয়ার্ড সেভ করার জন্য প্রম্পট করছে।

অটোফিল আরও কাস্টমাইজ করুন

সাধারণত অটোফিল ব্যবহারকারীর অভিজ্ঞতায়, অটোফিল-চালু করা কম্পোনেন্ট ক্রেডেনশিয়াল দিয়ে ভরে গেলে, এটি রঙ পরিবর্তন করে এবং হাইলাইট হয়ে যায় যাতে ব্যবহারকারী বুঝতে পারেন যে অটোফিল সফলভাবে সম্পূর্ণ হয়েছে।

এই হাইলাইট করার রঙ কাস্টমাইজ করতে, CompositionLocal ব্যবহার করুন এবং আপনার পছন্দের রঙ বেছে নিন। অটোফিল হাইলাইট করার ডিফল্ট রঙ Color(0x4dffeb3b) হিসেবে সেট করা আছে।

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}