ওয়েব ডেভেলপারদের জন্য WebView অ্যাপ্লিকেশন

প্রকাশিত: ফেব্রুয়ারি 28, 2014

কীভাবে একটি নতুন অ্যান্ড্রয়েড প্রকল্প তৈরি করতে হয়, একটি ওয়েবভিউ যোগ করতে, একটি দূরবর্তী URL লোড করতে এবং একটি স্থানীয় HTML পৃষ্ঠা লোড করতে হয় তা শিখুন৷

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

দ্রষ্টব্য: কোটলিন হল অ্যান্ড্রয়েড স্টুডিও জিরাফ থেকে শুরু করে বিল্ড কনফিগারেশনের জন্য ডিফল্ট ভাষা।

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

এই টিউটোরিয়ালটি অ্যান্ড্রয়েড স্টুডিও ব্যবহার করে, অ্যান্ড্রয়েডের জন্য ডিজাইন-এন্ড-বিল্ড IDE।

একটি নতুন Android প্রকল্প তৈরি করুন

একবার অ্যান্ড্রয়েড স্টুডিও ইনস্টল হয়ে গেলে, এটি সেটআপ উইজার্ড চালু করে।

একটি নতুন প্রকল্প তৈরি করতে:

1. নতুন প্রকল্প ক্লিক করুন.
2. আপনার প্রকল্পের জন্য এটি নির্বাচন করতে খালি কার্যকলাপ টেমপ্লেট ক্লিক করুন। টেমপ্লেটগুলি প্রকল্পের কাঠামো এবং আপনার প্রকল্প তৈরি করতে Android স্টুডিওর জন্য প্রয়োজনীয় ফাইলগুলি তৈরি করে৷
3. নতুন প্রকল্প ডায়ালগ খুলতে পরবর্তী ক্লিক করুন।
4. আপনার প্রকল্প কনফিগার করুন. আপনার আবেদনের নাম, প্যাকেজের নাম এবং লক্ষ্য SDK লিখুন। তারপর Next এ ক্লিক করুন।
5. API 24-এ ন্যূনতম প্রয়োজনীয় SDK সেট করুন: Android 7.0 (Nougat)।
6. Finish এ ক্লিক করুন

অ্যান্ড্রয়েড স্টুডিও নতুন প্রকল্প খোলে।

দ্রষ্টব্য: আপনি আপনার প্রকল্প তৈরি করার পরে, নিশ্চিত করুন যে আপনি Nougat SDK ইনস্টল করেছেন৷ সেটিংস > SDK ম্যানেজার- এ যান। আপনি Android 7.0 (API 24) ইনস্টল করেছেন তা নিশ্চিত করুন৷

প্রকল্প কাঠামো

অ্যান্ড্রয়েড স্টুডিও দ্বারা তৈরি প্রাথমিক প্রকল্পে আপনার অ্যাপ্লিকেশন সেট আপ করার জন্য বয়লারপ্লেট কোড রয়েছে। আরও কিছু আমদানি ফোল্ডারের মধ্যে রয়েছে:

• src/main/java । অ্যান্ড্রয়েড জাভা সোর্স কোড।
• src/main/res . অ্যাপ্লিকেশন দ্বারা ব্যবহৃত সম্পদ.
• src/main/res/drawable . অ্যাপ্লিকেশন দ্বারা ব্যবহৃত ছবি সম্পদ.
• src/main/res/xml । XML লেআউট ফাইল যা UI উপাদানগুলির গঠন সংজ্ঞায়িত করে।
• src/main/res/values । মাত্রা, স্ট্রিং এবং অন্যান্য মান যা আপনি আপনার অ্যাপ্লিকেশনে হার্ড-কোড করতে চান না।
• src/main/AndroidManifest.xml ম্যানিফেস্ট ফাইল অ্যাপ্লিকেশানে কী অন্তর্ভুক্ত রয়েছে তা সংজ্ঞায়িত করে, যেমন কার্যকলাপ, অনুমতি এবং থিম৷

WebView যোগ করুন

সতর্কতা: Android স্টুডিওর সর্বশেষ সংস্করণের সাথে কাজ করার জন্য নিম্নলিখিত পদক্ষেপগুলি আপডেট করা হয়নি৷

এরপরে, প্রধান কার্যকলাপের লেআউটে একটি WebView যোগ করুন।

1. activity_main.xml ফাইলটি src/main/res/xml ডিরেক্টরিতে খুলুন যদি এটি ইতিমধ্যে খোলা না থাকে। (আপনি একটি fragment_main.xml ফাইলও দেখতে পারেন। আপনি এটি উপেক্ষা করতে পারেন, কারণ এই টিউটোরিয়ালের জন্য এটির প্রয়োজন নেই।)

   XML মার্কআপ দেখতে activity_main.xml সম্পাদকের নীচে পাঠ্য ট্যাবটি নির্বাচন করুন৷

   এই ফাইলটি আপনার প্রধান কার্যকলাপের জন্য বিন্যাস সংজ্ঞায়িত করে, এবং পূর্বরূপ প্যানগুলি কার্যকলাপের পূর্বরূপ দেখায়। ব্ল্যাঙ্ক অ্যাক্টিভিটি লেআউটে কোনো শিশু অন্তর্ভুক্ত নয়। আপনাকে WebView যোগ করতে হবে।

2. XML প্যানে, FrameLayout এলিমেন্টের শেষ থেকে সেলফ-ক্লোজিং স্ল্যাশ সরিয়ে দিন এবং <WebView> এলিমেন্ট এবং একটি নতুন ক্লোজিং ট্যাগ যোগ করুন, যেমন দেখানো হয়েছে:

   <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:tools="https://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       tools:ignore="MergeRootFrame">
   
       <WebView
         android:id="@+id/activity_main_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   </FrameLayout>
   

3. WebView ব্যবহার করার জন্য আপনাকে কার্যকলাপে এটি উল্লেখ করতে হবে। src/main/java/<PackageName> ডিরেক্টরিতে প্রধান কার্যকলাপ, MainActivity.java জন্য জাভা সোর্স ফাইলটি খুলুন।

   বোল্ডে দেখানো লাইন যোগ করুন।

   public class MainActivity extends Activity {
   
       private WebView mWebView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           mWebView = (WebView) findViewById(R.id.activity_main_webview);
   

   onCreate পদ্ধতিতে বিদ্যমান কোডটি লেআউটের সাথে কার্যকলাপকে সংযুক্ত করার কাজ করে। যোগ করা লাইনগুলি ওয়েব ভিউ উল্লেখ করার জন্য একটি নতুন সদস্য পরিবর্তনশীল, mWebView তৈরি করে।

   নিম্নলিখিত কোড সরান:

   if (savedInstanceState == null) {
     getSupportFragmentManager().beginTransaction()
       .add(R.id.container, new PlaceholderFragment())
       .commit();
   }
   

   WebView রিসোর্স আইডি দ্বারা চিহ্নিত করা হয়, যা লেআউট ফাইলে এই লাইন দ্বারা নির্দিষ্ট করা হয়েছে:

   android:id="@+id/activity_main_webview"
   

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

   দ্রুত সমাধান গ্রহণ করতে Alt + Enter (Mac-এ Option + Enter) টিপুন।

   হাতে WebView আপনি এটি সেট আপ করতে এবং কিছু সরস ওয়েব সামগ্রী লোড করতে এগিয়ে যেতে পারেন৷

জাভাস্ক্রিপ্ট সক্রিয় করুন

WebView ডিফল্টরূপে JavaScript অনুমোদন করে না। WebView-এ একটি ওয়েব অ্যাপ্লিকেশন চালানোর জন্য, আপনাকে onCreate পদ্ধতিতে নিম্নলিখিত লাইনগুলি যোগ করে স্পষ্টভাবে JavaScript সক্ষম করতে হবে:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

একটি দূরবর্তী URL লোড করুন

আপনি যদি দূরবর্তী URL থেকে ডেটা লোড করতে যাচ্ছেন, আপনার অ্যাপ্লিকেশনটির ইন্টারনেট অ্যাক্সেস করার অনুমতি প্রয়োজন৷ এই অনুমতিটি অ্যাপ্লিকেশনের ম্যানিফেস্ট ফাইলে যোগ করতে হবে।

1. src/res ডিরেক্টরিতে AndroidManifest.xml ফাইলটি খুলুন। ক্লোজিং </manifest> ট্যাগের আগে বোল্ডে লাইন যোগ করুন।

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
   ...
    
     </application>
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

2. পরবর্তী ধাপ হল ওয়েবভিউতে loadUrl পদ্ধতিতে কল করা। onCreate পদ্ধতির শেষে নিম্নলিখিত লাইন যোগ করুন।

   mWebView.loadUrl("[https://beta.html5test.com/][8]");
   

   এখন প্রকল্প চালানোর চেষ্টা করুন। আপনার কাছে কোনো ডিভাইস না থাকলে, আপনি টুলস > Android > AVD ম্যানেজার- এ গিয়ে একটি এমুলেটর (AVD বা Android Virtual Device) তৈরি করতে পারেন।

দ্রষ্টব্য: একটি URL কখন শুরু হয়েছে এবং লোডিং শেষ হয়েছে তা সনাক্ত করতে, WebViewClient.onPageStarted এবং WebViewClient.onPageFinished ব্যবহার করুন।

নেভিগেশন হ্যান্ডেল

আপনি https://www.css-tricks.com/ এ যে URLটি লোড করছেন সেটি পরিবর্তন করার চেষ্টা করুন এবং আপনার আবেদনটি পুনরায় চালান। আপনি অদ্ভুত কিছু লক্ষ্য করবেন.

আপনি যদি css-tricks.com মতো একটি রিডাইরেক্ট আছে এমন একটি সাইট দিয়ে এখন অ্যাপ্লিকেশন চালান, তাহলে আপনার অ্যাপটি ডিভাইসের একটি ব্রাউজারে সাইটটি খুলবে, আপনার WebView-এ নয় -- সম্ভবত আপনি যা আশা করেছিলেন তা নয়৷ ওয়েবভিউ যেভাবে নেভিগেশন ইভেন্টগুলি পরিচালনা করে তার কারণেই এটি।

এখানে ইভেন্টের ক্রম:

1. WebView রিমোট সার্ভার থেকে আসল URL লোড করার চেষ্টা করে এবং একটি নতুন URL-এ একটি পুনঃনির্দেশ পায়৷
2. WebView চেক করে যে সিস্টেমটি URL-এর জন্য একটি ভিউ উদ্দেশ্য পরিচালনা করতে পারে কিনা, যদি তাই হয় সিস্টেমটি URL নেভিগেশন পরিচালনা করে, অন্যথায় WebView অভ্যন্তরীণভাবে নেভিগেট করে (উদাহরণস্বরূপ, ব্যবহারকারীর ডিভাইসে কোনো ব্রাউজার ইনস্টল না থাকলে)।
3. সিস্টেমটি একটি https:// URL স্কিম পরিচালনা করার জন্য ব্যবহারকারীর পছন্দের অ্যাপ্লিকেশন বেছে নেয় -- অর্থাৎ ব্যবহারকারীর ডিফল্ট ব্রাউজার। আপনার যদি একাধিক ব্রাউজার ইনস্টল করা থাকে তবে আপনি এই সময়ে একটি ডায়ালগ দেখতে পারেন।

আপনি যদি বিষয়বস্তু (উদাহরণস্বরূপ, একটি সহায়তা পৃষ্ঠা) প্রদর্শনের জন্য একটি Android অ্যাপ্লিকেশনের ভিতরে একটি WebView ব্যবহার করেন তবে আপনি যা করতে চান তা হতে পারে। যাইহোক, আরও পরিশীলিত অ্যাপ্লিকেশনের জন্য, আপনি নিজেই নেভিগেশন লিঙ্কগুলি পরিচালনা করতে চাইতে পারেন।

WebView-এর ভিতরে নেভিগেশন পরিচালনা করার জন্য আপনাকে WebView-এর WebViewClient ওভাররাইড করতে হবে, যা WebView দ্বারা উত্পন্ন বিভিন্ন ইভেন্ট পরিচালনা করে। ওয়েবভিউ কীভাবে লিঙ্ক ক্লিক এবং পৃষ্ঠা পুনঃনির্দেশ পরিচালনা করে তা নিয়ন্ত্রণ করতে আপনি এটি ব্যবহার করতে পারেন।

WebViewClient এর ডিফল্ট বাস্তবায়ন WebView-এ যেকোনো URL খুলে দেয়:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

এটি একটি ভাল পদক্ষেপ, কিন্তু আপনি যদি ব্রাউজারে অন্যান্য ইউআরএল খোলার সময় শুধুমাত্র আপনার সাইটের জন্য লিঙ্কগুলি পরিচালনা করতে চান?

এটি অর্জন করতে আপনাকে WebViewClient ক্লাস প্রসারিত করতে হবে এবং shouldOverrideUrlLoading পদ্ধতিটি প্রয়োগ করতে হবে। যখনই WebView একটি ভিন্ন URL এ নেভিগেট করার চেষ্টা করে তখন এই পদ্ধতিটি বলা হয়৷ যদি এটি মিথ্যা প্রত্যাবর্তন করে, WebView নিজেই URLটি খোলে। (ডিফল্ট বাস্তবায়ন সর্বদা মিথ্যা ফেরত দেয়, তাই এটি আগের উদাহরণে কাজ করে।)

একটি নতুন ক্লাস তৈরি করুন:

1. আপনার অ্যাপের প্যাকেজের নামে রাইট-ক্লিক করুন এবং নতুন > জাভা ক্লাস নির্বাচন করুন
2. ক্লাসের নাম হিসাবে MyAppWebViewClient লিখুন এবং ঠিক আছে ক্লিক করুন

3. নতুন MyAppWebViewClient.java ফাইলে, নিম্নলিখিত কোড যোগ করুন (পরিবর্তনগুলি বোল্ডে দেখানো হয়েছে):

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
         return false;
       }
                  
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

   নতুন কোড MyAppWebViewClient WebViewClient এর একটি সাবক্লাস হিসেবে সংজ্ঞায়িত করে এবং shouldOverrideUrlLoading পদ্ধতি প্রয়োগ করে।

   WebView কোনো URL লোড করতে গেলে shouldOverrideUrlLoading পদ্ধতি বলা হয়। এই বাস্তবায়ন ইউআরএলের হোস্টনামের শেষে "css-tricks.com" স্ট্রিং পরীক্ষা করে। স্ট্রিংটি বিদ্যমান থাকলে, পদ্ধতিটি মিথ্যা ফেরত দেয়, যা প্ল্যাটফর্মকে ইউআরএল ওভাররাইড না করে ওয়েবভিউতে লোড করতে বলে।

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

4. আপনার নতুন কাস্টম WebViewClient ব্যবহার করতে, আপনার MainActivity ক্লাসে নিম্নলিখিত লাইনগুলি যোগ করুন:

   // Stop local links and redirects from opening in browser instead of WebView
   mWebView.setWebViewClient(new MyAppWebViewClient());
   

   এখন, একজন ব্যবহারকারী যেকোনও CSS ট্রিক্স লিঙ্কে ক্লিক করতে পারেন এবং অ্যাপের মধ্যে থাকতে পারেন, কিন্তু বাইরের সাইটের লিঙ্কগুলি ব্রাউজারে খোলা হয়।

অ্যান্ড্রয়েড ব্যাক বোতামটি পরিচালনা করুন

আপনি যখন খেলা শুরু করেন এবং CSS ট্রিক্স নিবন্ধগুলি নেভিগেট করতে শুরু করেন, Android এর পিছনের বোতামটি ক্লিক করলে অ্যাপ্লিকেশনটি থেকে বেরিয়ে যায়।

WebView পদ্ধতি canGoBack আপনাকে বলে যে পৃষ্ঠা স্ট্যাকে এমন কিছু আছে যা পপ করা যেতে পারে। একটি ব্যাক বোতাম টিপুন শনাক্ত করতে এবং ওয়েবভিউ-এর ইতিহাসে আপনার পিছিয়ে যাওয়া উচিত কিনা বা প্ল্যাটফর্মটিকে সঠিক আচরণ নির্ধারণের অনুমতি দেওয়া উচিত কিনা তা নির্ধারণ করতে, আপনার MainActivity তে onBackPressed() পদ্ধতি যোগ করুন:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

ফাইল সিস্টেম থেকে এইচটিএমএল লোড করুন

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

HTML, JavaScript এবং CSS সহ স্থানীয়ভাবে ফাইল সংরক্ষণ করতে, সেগুলিকে সম্পদ ডিরেক্টরিতে সংরক্ষণ করুন। এটি একটি সংরক্ষিত ডিরেক্টরি যা অ্যান্ড্রয়েড কাঁচা ফাইলের জন্য ব্যবহার করে। আপনার অ্যাপের এই ডিরেক্টরিতে অ্যাক্সেস প্রয়োজন, কারণ এটি নির্দিষ্ট ফাইলগুলিকে ছোট বা সংকুচিত করতে হতে পারে।

1. প্রধান ( src/main/assets/www ) এ assets/www ডিরেক্টরি তৈরি করুন।

   • ওয়েব ফাইলগুলিকে /assets এর একটি সাবডিরেক্টরিতে রাখা একটি সর্বোত্তম অভ্যাস।
   দ্রষ্টব্য: ওয়েবভিউতে শুধুমাত্র আপেক্ষিক পাথগুলি কাজ করে যখন CSS এবং JavaScript এর মতো অন্যান্য ফাইলগুলিকে উল্লেখ করে৷ পরম পাথের পরিবর্তে, যেমন /pages/somelink.html , আপেক্ষিক পাথ ব্যবহার করুন, যেমন ./pages/somelink.html ।

2. ডিরেক্টরিতে সমস্ত ফাইল আপলোড করুন।

3. উপযুক্ত ফাইল লোড করুন:

   mWebView.loadUrl("file:///android_asset/www/index.html");
   

4. অ-স্থানীয় পৃষ্ঠাগুলির জন্য একটি ব্রাউজার খুলতে shouldOverrideUrlLoading পদ্ধতি আপডেট করুন:

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().length() == 0) {
         return false;
       }
   
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

এখন আপনি একটি দুর্দান্ত WebView অ্যাপ তৈরি করতে প্রস্তুত৷

ভিজ্যুয়ালগুলি সঠিকভাবে পাওয়ার জন্য টিপসের জন্য, WebView-এ Pixel-Perfect UI দেখুন।

আপনি সমস্যায় পড়লে, Chrome DevTools হল আপনার বন্ধু৷ শুরু করতে অ্যান্ড্রয়েডে রিমোট ডিবাগিং দেখুন।