ভবিষ্যতের ভবিষ্যদ্বাণীমূলক ব্যাক জেসচার সমর্থন করতে আপনার অ্যাপ আপডেট করুন

১. ভূমিকা

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

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

প্রিডিক্টিভ ব্যাক জেসচার সমর্থন করার জন্য, অ্যান্ড্রয়েড ১৩ নতুন উইন্ডো-লেভেল OnBackInvokedCallback প্ল্যাটফর্ম এপিআই যুক্ত করেছে। এই এপিআইটি KeyEvent.KEYCODE_BACK এপিআই এবং OnBackPressed ব্যবহারকারী সমস্ত প্ল্যাটফর্ম ক্লাসকে প্রতিস্থাপন করে, যেগুলোকে ডেপ্রিকেশনের জন্য পরিকল্পনা করা হয়েছে এবং অ্যান্ড্রয়েড ১৩-এর পরবর্তী প্রধান রিলিজে মাইগ্রেশনের প্রয়োজন হবে। বিস্তারিত জানতে, আমাদের ডকুমেন্টেশন দেখুন।

এই কোডল্যাবের ক্ষেত্রে, আমরা একটি সার্ভে ফ্র্যাগমেন্ট ঠিক করব যেটি একটি WebView ইমপ্লিমেন্ট করে।

এই কোডল্যাবের লক্ষ্য

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

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি সানফ্লাওয়ার অ্যাপে ব্যাক জেসচার পরিচালনা করার জন্য AndroidX API লাইব্রেরি ব্যবহার করবেন।

আপনি যা শিখবেন

• AndroidX-এর জন্য অন-ব্যাক ইনভোকেশন কীভাবে ইন্টারসেপ্ট করবেন
• সিস্টেমে ব্যাক ইভেন্টটি কীভাবে ফেরত পাঠানো যায়
• ব্যাক জেসচার পরিচালনার জন্য অন্যান্য বিকল্প
• অ্যান্ড্রয়েড ১৩+ এ আসছে নতুন ইউজার এক্সপেরিয়েন্স, যা আরও পূর্বাভাসযোগ্য ব্যাক জেসচার নেভিগেশন প্রদান করবে।

আপনার যা যা লাগবে

• অ্যান্ড্রয়েড স্টুডিও
• জেসচার নেভিগেশন সক্ষম একটি অ্যান্ড্রয়েড ডিভাইস
• (ঐচ্ছিক) গিট

২. ভবিষ্যদ্বাণীমূলক ব্যাক জেসচারের জন্য সমর্থনের পরিকল্পনা করুন

যেসব অ্যাপ ডিফল্ট ব্যাক নেভিগেশন ব্যবহার করে, সেগুলোর জন্য প্রেডিক্টিভ ব্যাক জেসচার স্বয়ংক্রিয়ভাবে সমর্থিত হয়। এটি সক্রিয় করতে, আপনাকে কেবল `enable predictive back gesture` অংশে ব্যাখ্যা করা অনুযায়ী enableOnBackInvokedCallback বিকল্পটি বেছে নিতে হবে।

এই বৈশিষ্ট্যটি বাস্তবায়ন করতে AndroidX API ব্যবহার করুন।

এই কোডল্যাবটি সেইসব অ্যাপের জন্য ডিজাইন করা হয়েছে যেগুলো ইতিমধ্যেই AndroidX ব্যবহার করে।

ব্যাক নেভিগেশন সমর্থন করার জন্য আপনাকে OnBackPressedDispatcher এবং OnBackPressedCallback প্রয়োগ করতে হবে।

অন্যান্য বিকল্প

আপনার অ্যাপের বিভিন্ন চাহিদার ওপর নির্ভর করে, এই ফিচারটি পরিচালনার জন্য আমাদের কাছে আরও কিছু বিকল্প রয়েছে:

• যেসব অ্যাপ AndroidX ব্যবহার করতে পারে না - আপনার ক্ষেত্রেও সমাধান আছে। Android 13-এ আমরা যে নতুন OnBackInvokedDispatcher এবং OnBackInvokedCallback প্ল্যাটফর্ম ক্লাসগুলো চালু করছি, সেগুলো ব্যবহার করুন। এগুলোর মাধ্যমে আপনি AndroidX ছাড়াই অ্যাহেড-অফ-টাইম API ব্যবহার করতে পারবেন। বিস্তারিত জানতে ডকুমেন্টেশন দেখুন।
• যেসব অ্যাপ সাময়িকভাবে মাইগ্রেট করতে পারছে না - আপনার ক্ষেত্রেও যদি এমনটা হয়ে থাকে, তবে আমরা আপনার পাশেই আছি! এই মুহূর্তে AndroidX লাইব্রেরি বা প্ল্যাটফর্ম API-তে মাইগ্রেট করা সম্ভব না হলে, আপনি প্রেডিক্টিভ ব্যাক জেসচারটি ব্যবহার না করার বিকল্পটি বেছে নিতে পারেন। বিস্তারিত জানতে ডকুমেন্টেশন দেখুন।

৩. শুরু করার আগে

অ্যান্ড্রয়েড স্টুডিও ইনস্টল করুন

অ্যান্ড্রয়েড স্টুডিও এবং অ্যান্ড্রয়েড ১৩ এসডিকে ইনস্টল করুন।

একটি ডিভাইস সংগ্রহ করুন

এই কোডল্যাবটি ব্যবহার করে তৈরি করা অ্যাপটি চালানোর জন্য আপনি একটি ভার্চুয়াল বা ফিজিক্যাল অ্যান্ড্রয়েড ডিভাইস ব্যবহার করতে পারেন।

অঙ্গভঙ্গি নেভিগেশন সক্ষম করুন

আপনি যদি এপিআই লেভেল ২৯ দিয়ে একটি নতুন এমুলেটর ইনস্ট্যান্স চালান, তাহলে জেসচার নেভিগেশন ডিফল্টরূপে চালু নাও থাকতে পারে। জেসচার নেভিগেশন চালু করতে, সিস্টেম সেটিংস > সিস্টেম > সিস্টেম নেভিগেশন > জেসচার নেভিগেশন নির্বাচন করুন।

কোডটি নিন

নিম্নলিখিত উপায়গুলোর যেকোনো একটিতে কোডটি সংগ্রহ করুন:

জিপ ফাইলটি ডাউনলোড করুন

জিপ ফাইলটি ডাউনলোড করুন (শুরু হচ্ছে)

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

আপনি যদি গিট ব্যবহার করে কোডটি ডাউনলোড করতে চান, তাহলে এই ধাপগুলো অনুসরণ করুন:

1. গিট ইনস্টল করুন।
2. এই অনুশীলনের জন্য অ্যাপটি পেতে starter-code বা main শাখা ক্লোন করুন:

টার্মিনাল

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

অ্যাপটি চালান

নিম্নলিখিত ধাপগুলি সম্পূর্ণ করুন:

1. অ্যান্ড্রয়েড স্টুডিওতে অ্যাপটি খুলুন এবং বিল্ড করুন।
2. একটি নতুন ভার্চুয়াল ডিভাইস তৈরি করুন এবং তিরামিসু নির্বাচন করুন। বিকল্পভাবে, আপনি এপিআই লেভেল ৩৩ বা তার উচ্চতর সংস্করণে চালিত একটি ফিজিক্যাল ডিভাইস সংযোগ করতে পারেন।
3. সানফ্লাওয়ার অ্যাপটি চালান।

এরপর আপনি একটি ভিত্তি স্থাপন করবেন এবং সানফ্লাওয়ার অ্যাপের একটি খারাপ অভিজ্ঞতা তুলে ধরবেন।

৪. একটি ভিত্তি স্থাপন করুন

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

ডেমোটি অন্বেষণ করুন

মূল স্ক্রিন থেকে শুরু করে, WebView কার্যকারিতার খারাপ অভিজ্ঞতা পর্যালোচনা করার জন্য চলুন আপনার অ্যাপের প্রধান কার্যপ্রবাহটি খতিয়ে দেখি।

1. Sunflower অ্যাপের ডিফল্ট স্ক্রিনে, PLANT LIST-এ ট্যাপ করুন।

2. উদ্ভিদের ক্যাটালগে, যেকোনো একটি গাছে ট্যাপ করুন। (এই উদাহরণের জন্য, আমরা অ্যাভোকাডো ফল ব্যবহার করব।)

3. আপনার ট্যাপ করা গাছটির তথ্য স্ক্রিনে, গাছটিকে রেটিং দিতে (উপরের ডান কোণায় থাকা) থাম্বস-আপ আইকনটিতে ট্যাপ করুন।

4. জরিপটি পূরণ করা শুরু করুন, কিন্তু ৩ নম্বর প্রশ্নে এসে থেমে যান।

5. ব্যাক জেসচার ব্যবহার করতে স্ক্রিনের বাম (বা ডান) প্রান্ত থেকে ভেতরের দিকে সোয়াইপ করুন। লক্ষ্য করুন যে, ব্যাক সোয়াইপ করলে তা আপনাকে সার্ভের ২ নম্বর প্রশ্নে নিয়ে যাওয়ার পরিবর্তে, আপনাকে গাছের বিস্তারিত অংশে (এই উদাহরণে, অ্যাভোকাডো তথ্যের পাতায়) নিয়ে যায়। এর ফলে আপনি আপনার উত্তরগুলো হারিয়ে ফেলেন এবং এটি একটি খারাপ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।

চলুন এখন এই সমস্যাগুলো সমাধান করা শুরু করা যাক!

৫. প্রিডিক্টিভ ব্যাক জেসচার সক্রিয় করুন।

আমাদের অ্যাপটি ইতিমধ্যেই AndroidX ব্যবহার করে, তাই আপনি ব্যাক নেভিগেশন এপিআইগুলো ব্যবহার করবেন। এগুলো আগে থেকেই অ্যাহেড-অফ-টাইম মডেল সমর্থন করে।

অ্যান্ড্রয়েড ১৩ লক্ষ্য করুন

আমাদের অ্যাপের স্টুডিও প্রজেক্টে, নিচের কোড স্নিপেটে দেখানো অনুযায়ী অ্যাপটির বিল্ড কনফিগারেশন আপডেট করে অ্যান্ড্রয়েড ১৩ টার্গেট করুন।

build.gradle (প্রকল্প)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

নির্ভরতা আপগ্রেড করুন

build.gradle-এ appCompatVersion কে 1.6.0 বা তার চেয়ে উচ্চতর সংস্করণে সেট করুন।

build.gradle (প্রকল্প)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

AndroidX Activity 1.6.0 বা উচ্চতর সংস্করণে আপগ্রেড করুন।

build.gradle (মডিউল)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

প্রিডিক্টিভ ব্যাক জেসচার সক্রিয় করুন

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

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

ব্যাক জেসচার হ্যান্ডেল করার জন্য OnBackPressedCallback ডিক্লেয়ার এবং রেজিস্টার করুন।

ব্যাক জেসচার হ্যান্ডেল করার জন্য কলব্যাক তৈরি করুন এবং handleOnBackPressed মেথডটি ওভাররাইড করুন। WebView ব্যবহারের ক্ষেত্রে, পেজ স্ট্যাকে আর কোনো পেজ না থাকা পর্যন্ত পেছনে যাওয়ার জন্য ব্যাক জেসচারটি ব্যবহার করা যাক।

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

আপনি যা তৈরি করেছেন তা পরীক্ষা করে দেখুন।

এখন আপনি পরীক্ষা করে দেখবেন যে WebView নেভিগেশনটি সঠিকভাবে কাজ করছে কি না।

1. অ্যান্ড্রয়েড স্টুডিওতে অ্যাপটি আবার বিল্ড ও রান করুন।
2. প্রথমবার ডেমো চালানোর সময় আপনি যেমনটা করেছিলেন, ঠিক সেভাবেই আপনার পছন্দের একটি গাছে ট্যাপ করুন এবং তারপর থাম্বস-আপ আইকনে ট্যাপ করুন, এরপর ৩ নম্বর প্রশ্ন পর্যন্ত সার্ভেটি পূরণ করুন।
3. ব্যাক জেসচার ব্যবহার করতে স্ক্রিনের বাম (বা ডান) প্রান্ত থেকে ভেতরের দিকে সোয়াইপ করুন। ওয়েবভিউ আপনাকে সমীক্ষার ২ নং প্রশ্নে ফিরিয়ে নিয়ে যাবে।

আমরা ঠিক এই আচরণটিই চাই। তবে, আমরা কেবল অর্ধেক পথেই আছি—এটি এখনও পুরোপুরি ঠিক হয়নি। আমরা কী বোঝাতে চাইছি তা দেখতে চলুন এগিয়ে যাই:

4. প্রশ্ন #২ থেকে প্রশ্ন #১-এ ফিরে যান, তারপর গাছের বিস্তারিত অংশে ফিরে আসার চেষ্টায় আরও একবার পিছনে সোয়াইপ করুন।

লক্ষ্য করুন যে আপনি প্রশ্ন #১ থেকে উদ্ভিদের বিস্তারিত অংশে ফিরে যেতে পারবেন না। এর কারণ হলো:

• আপনার WebView, on-Back নেভিগেশন ব্যবহার করার সময় WebView থেকে বেরিয়ে যাওয়া এড়িয়ে ব্যাক নেভিগেশন পরিচালনা করে।
• আপনার অ্যাপটির যখন আর প্রয়োজন হবে না, তখন ব্যাক নেভিগেশনটি সিস্টেমে ফেরত দেওয়া প্রয়োজন। চলুন, এটি ঠিক করার জন্য পরবর্তী বিভাগে যাই!

৬. ব্যাক জেসচারটি ঠিক করুন

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

OnBackPressedCallback ব্যবহার করে ব্যাক নেভিগেশন চালু বা বন্ধ করুন

1. ব্যাক নেভিগেশন ইন্টারসেপ্ট করা হবে কিনা তা নির্ধারণ করতে doUpdateVisitedHistory মেথডটি ওভাররাইড করুন। ব্যাক নেভিগেশন হ্যান্ডেল করার লজিকটি নিম্নরূপ:
   • WebView-তে যদি আরও পৃষ্ঠায় ফিরে যাওয়ার প্রয়োজন হয় ( webView.canGoBack() ), তাহলে OnBackPressedCallback মেথডটি সক্রিয় করা উচিত।
   • বিপরীতভাবে, যদি WebView-তে ফিরে যাওয়ার মতো আর কোনো পৃষ্ঠা না থাকে, তাহলে OnBackPressedCallback পদ্ধতিটি নিষ্ক্রিয় থাকা উচিত। এর ফলে, Back জেসচারটি ব্যাক স্ট্যাকের সর্ববৃহৎ ফ্র্যাগমেন্টে ফিরে যাবে।

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

2. WebView পুনরায় পরীক্ষা করার জন্য, ৩ নং প্রশ্ন পর্যন্ত জরিপটি আবার পূরণ করুন।
3. ব্যাক জেসচার ব্যবহার করে একেবারে গাছের বিস্তারিত ভিউতে ফিরে যান। আপনি কোনো সমস্যা ছাড়াই এটি করতে পারবেন।

লক্ষ্য করুন যে, এখন আমরা আটকে না গিয়েই WebView থেকে বেরিয়ে এসে গাছের বিস্তারিত অংশটি আবার দেখতে পারি।

ঠিক করার পর এই সবকিছু দেখতে কেমন হবে তার একটি উদাহরণ এখানে দেওয়া হলো:

নতুন ব্যাক টু হোম জেসচার অ্যানিমেশনটির প্রিভিউ দেখুন

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

ডেভেলপার অপশনটি চালু করে আপনি নতুন 'ব্যাক টু হোম' জেসচার নেভিগেশনটির প্রিভিউ দেখতে পারেন।

৭. অভিনন্দন

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

আমরা যা আলোচনা করেছি

• আপনার অ্যাপকে প্রেডিক্টিভ ব্যাক জেসচার সমর্থনকারী এপিআইগুলো ব্যবহার করা শুরু করার জন্য কীভাবে সক্ষম করবেন
• AndroidX-এর জন্য অন-ব্যাক ইনভোকেশন কীভাবে ইন্টারসেপ্ট করবেন
• সিস্টেমে ব্যাক নেভিগেশন কীভাবে ফিরিয়ে আনবেন
• ব্যাক জেসচার পরিচালনা করার জন্য অন্যান্য বিকল্প
• অ্যান্ড্রয়েড ১৩-এ আসছে নতুন ইউএক্স অভিজ্ঞতা, যা আরও পূর্বাভাসযোগ্য ব্যাক জেসচার প্রদান করবে।

কোডল্যাব সম্পন্ন হয়েছে

জিপ ফাইলটি ডাউনলোড করুন (সম্পন্ন হয়েছে)

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

অতিরিক্ত উপকরণ

• ডেভেলপার গাইড

রেফারেন্স নথি

• OnBackPressedDispatcher এবং OnBackPressedCallback
• OnBackInvokedDispatcher এবং OnBackInvokedCallback