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

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

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

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

পরিচয়পত্র পূরণ করুন

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

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

পরিচয়পত্র সংরক্ষণ করুন

ব্যবহারকারীরা অটোফিলের মাধ্যমে নিম্নলিখিত উপায়ে পরিচয়পত্র সংরক্ষণ করতে পারেন:

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

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

অটোফিল সেট আপ করুন

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

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

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

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

মান-ভিত্তিক পাঠ্য ক্ষেত্র

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

রাজ্য-ভিত্তিক পাঠ্য ক্ষেত্র

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

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

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

অটোফিলের মাধ্যমে সংরক্ষণ করা যায় এমন সব ধরনের ডেটার জন্য, ContentType রেফারেন্সটি দেখুন।

মান-ভিত্তিক পাঠ্য ক্ষেত্র

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

রাজ্য-ভিত্তিক পাঠ্য ক্ষেত্র

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

অটোফিল দিয়ে ডেটা পূরণ করুন

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

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

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

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

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

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

নিচের কোড স্নিপেটগুলোতে দেখানো হয়েছে কিভাবে একটি বাটন ব্যবহার করে অটোফিলের মাধ্যমে সুস্পষ্টভাবে ডেটা সেভ করতে হয়:

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

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. আপনার TextField(s) -তে Modifier.semantics ব্যবহার করে আপনার নির্বাচিত কন্টেন্ট টাইপ যোগ করুন:

   • মান-ভিত্তিক টেক্সট ফিল্ডগুলির সাথে:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

   • রাজ্য-ভিত্তিক টেক্সট ফিল্ড সহ:

     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 }
         )
     }
     AutofillSnippets.kt

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

   • মান-ভিত্তিক টেক্সট ফিল্ডগুলির সাথে:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = usernameTextFieldValue.value,
             onValueChange = { usernameTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = passwordTextFieldValue.value,
             onValueChange = { passwordTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • রাজ্য-ভিত্তিক টেক্সট ফিল্ড সহ:

     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") }
     }
     AutofillSnippets.kt

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

যখন ব্যবহারকারী বোতামটিতে ক্লিক করবেন, তখন তারা এই বটম শীটটি দেখতে পাবেন, যা তাদেরকে নির্বাচিত ক্রেডেনশিয়াল প্রোভাইডারে ক্রেডেনশিয়ালগুলো সংরক্ষণ করতে অনুরোধ করবে:

শক্তিশালী পাসওয়ার্ডের পরামর্শের মাধ্যমে অটোফিল ব্যবহার করে ডেটা সংরক্ষণ করুন।

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

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

'সেভ' করার প্রক্রিয়াটি শুরু করার সময়, আপনি যদি একাধিকবার 'এখন নয়' (Not now) বিকল্পে ক্লিক করেন, তাহলে আপনার ক্রেডেনশিয়াল প্রোভাইডার হয়তো আর বটম শীটটি প্রদর্শন করবে না। এটিকে পুনরায় চালু করতে এবং আবার দেখানোর জন্য, আপনাকে সেই নির্দিষ্ট অ্যাপগুলো সরিয়ে ফেলতে হবে যেগুলো 'এই পাসওয়ার্ডটি মনে রাখুন?' (Remember this password?) বিকল্পটি ব্লক করে রেখেছে।

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

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

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

মান-ভিত্তিক পাঠ্য ক্ষেত্র

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

রাজ্য-ভিত্তিক পাঠ্য ক্ষেত্র

val customHighlightColor = Color.Red

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