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

1. ভূমিকা

অ্যান্ড্রয়েড ১৩-তে, আমরা এমন API যোগ করেছি যা ভবিষ্যদ্বাণীমূলক ব্যাক জেসচারের জন্য আসন্ন সহায়তার ভিত্তি হিসেবে কাজ করে।

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

এই অ্যানিমেশনটি ভবিষ্যতের বাস্তবায়নের একটি আনুমানিক রূপরেখা দেখায়\n যে ব্যবহারকারী Chrome ব্রাউজারটি খুললে,\n একটি Android মোবাইল ডিভাইসে Chrome ব্রাউজারটি দেখতে পেলে, তারপর\n পিছনে সোয়াইপ করলে হোম স্ক্রিনে পরবর্তী গন্তব্যটি প্রদর্শিত হবে\n।

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

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

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

তুমি কী তৈরি করবে

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

তুমি কি শিখবে

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

তোমার যা লাগবে

2. ভবিষ্যদ্বাণীমূলক ব্যাক অঙ্গভঙ্গির জন্য পরিকল্পনা সমর্থন

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

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

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

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

আপনার অ্যাপের বিভিন্ন চাহিদার উপর নির্ভর করে এই বৈশিষ্ট্যটি পরিচালনা করার জন্য আমাদের কাছে অন্যান্য বিকল্প রয়েছে:

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

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

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

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

একটি ডিভাইস পান

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

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

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

কোডটি পান

নিম্নলিখিত যেকোনো একটি উপায়ে কোডটি পান:

জিপ ডাউনলোড করুন।

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

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

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

টার্মিনাল

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

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

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

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

তথ্য-অ্যাভোকাডো.পিএনজি

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

৪. একটি বেসলাইন স্থাপন করুন

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

ডেমোটি ঘুরে দেখুন

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

  1. সানফ্লাওয়ার অ্যাপের ডিফল্ট স্ক্রিনে, উদ্ভিদ তালিকা ট্যাপ করুন।

তথ্য-অ্যাভোকাডো.পিএনজি

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

উদ্ভিদ-ক্যাটালগ.পিএনজি

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

তথ্য-অ্যাভোকাডো.পিএনজি

  1. জরিপটি পূরণ করা শুরু করুন, কিন্তু প্রশ্ন #৩ এ পৌঁছানোর পর থামুন।

জরিপ-পৃষ্ঠা-১.png

জরিপ-পৃষ্ঠা-২.png

জরিপ-পৃষ্ঠা-৩.png

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

সূর্যমুখী-ব্যাক-নেভি-রিটার্নস-টু-দ্য-প্ল্যান্ট-ডিটেল.gif

এবার এই সমস্যাগুলো সমাধানের জন্য ঝাঁপিয়ে পড়া যাক!

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

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

টার্গেট অ্যান্ড্রয়েড ১৩

আমাদের অ্যাপের স্টুডিও প্রজেক্টে, নিম্নলিখিত কোড স্নিপেটে দেখানো হিসাবে, Android 13 টার্গেট করার জন্য অ্যাপের বিল্ড কনফিগারেশন আপডেট করুন।

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"
    ...
}

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

ভবিষ্যদ্বাণীমূলক ব্যাক জেসচার API গুলি সক্ষম করতে, ম্যানিফেস্টে enableOnBackInvokedCallback কে true সেট করুন।

অ্যান্ড্রয়েডম্যানিফেস্ট.এক্সএমএল

<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)
}

তুমি যা তৈরি করেছো তা চেষ্টা করে দেখো।

এখন আপনি পরীক্ষা করতে যাচ্ছেন যে ওয়েবভিউ নেভিগেশন সঠিকভাবে কাজ করে।

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

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

  1. প্রশ্ন #২ থেকে, প্রশ্ন #১ এ ফিরে সোয়াইপ করুন, তারপর উদ্ভিদের বিস্তারিত অংশে ফিরে যাওয়ার জন্য আবার সোয়াইপ করুন।

সূর্যমুখী-ব্যাক-নেভি-স্টাক-সার্ভে.gif

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

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

৬. পিছনের অঙ্গভঙ্গি ঠিক করুন

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

OnBackPressedCallback ব্যবহার করে ব্যাক নেভিগেশন সক্ষম বা অক্ষম করুন

  1. doUpdateVisitedHistory পদ্ধতিটি ওভাররাইড করে নির্ধারণ করুন যে Back নেভিগেশন আটকানো উচিত কিনা। Back নেভিগেশন পরিচালনা করার যুক্তি হল নিম্নলিখিত:
    • যদি 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()

    }
  }
}
  1. WebView আবার পরীক্ষা করতে, প্রশ্ন #3-এ পৌঁছানো পর্যন্ত আবার জরিপটি পূরণ করুন।
  2. "ব্যাক" জেসচার ব্যবহার করে, প্ল্যান্ট ডিটেইল ভিউতে ফিরে যান। আপনি কোনও সমস্যা ছাড়াই এটি করতে সক্ষম হবেন।

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

সূর্যমুখী-ব্যাক-নেভি-ফিক্সড.জিআইএফ

নতুন 'বাড়ি ফিরে যাওয়া' জেসচার অ্যানিমেশনের প্রিভিউ দেখুন

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

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

অ্যানিমেশন.জিআইএফ

৭. অভিনন্দন

অভিনন্দন! আপনি অনেক কন্টেন্ট কভার করেছেন। আমরা আশা করি আপনি অ্যান্ড্রয়েডে প্রেডিক্টিভ ব্যাক জেসচারের দিকে আপনার অ্যাপ আপডেট করার জন্য বিকল্প এবং API গুলি সম্পর্কে আরও ভাল ধারণা পেয়েছেন।

আমরা যা কভার করেছি

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

সম্পূর্ণ কোডল্যাব

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

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

রেফারেন্স ডক্স