WebView কর্মপ্রবাহ

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

ওয়েব ডেভেলপমেন্টের একটি দুর্দান্ত জিনিস হল আপনার কাজের প্রবাহ উন্নত করতে আপনি ব্যবহার করতে পারেন এমন সরঞ্জামগুলির সমৃদ্ধ সেট৷

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

Yeoman হল একটি টুল যা ওয়েব অ্যাপ্লিকেশন তৈরি করতে, বয়লারপ্লেট তৈরি করতে, Bower এবং npm থেকে লাইব্রেরি আনতে এবং পূর্বনির্ধারিত কাজগুলির সাথে একটি Grunt ফাইল তৈরি করতে সাহায্য করে।

এই টিউটোরিয়ালে, আপনি একটি নতুন বেসিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে ইওম্যান ব্যবহার করুন, তারপর আপনার ওয়েব অ্যাপ্লিকেশন তৈরি করতে Grunt-এর সাথে Android স্টুডিও বিল্ড সিস্টেম ( Gradle ) একীভূত করুন। আপনি ব্রাউজারে আপনার অ্যাপ্লিকেশন পরীক্ষা করার জন্য একটি স্থানীয় লাইভ-রিলোড সার্ভার চালু করার জন্য গ্রান্ট টাস্কগুলিও সেট আপ করবেন, যাতে প্রতিবার আপনি একটি HTML, CSS, বা JavaScript ফাইল পরিবর্তন করার সময় আপনাকে ম্যানুয়ালি পৃষ্ঠাটি রিফ্রেশ করতে হবে না।

পূর্বশর্ত

শুরু করার আগে, আপনাকে কয়েকটি পূর্বশর্ত ইনস্টল করতে হবে:

1. ইওমান ইনস্টল করুন: https://github.com/yeoman/yeoman/wiki/Getting-Started
2. অ্যান্ড্রয়েড স্টুডিও ইনস্টল করুন: https://developer.android.com/sdk/installing/studio.html

ধাপ 1. একটি ওয়েবভিউ দিয়ে Android স্টুডিওতে একটি নতুন প্রকল্প তৈরি করুন৷

আপনি শুরু করার নির্দেশিকাতে এটি কীভাবে করবেন তার সম্পূর্ণ নির্দেশাবলী পেতে পারেন।

ধাপ 2. ওয়েব অ্যাপ কন্টেন্টের জন্য একটি সাবডিরেক্টরি তৈরি করুন

আপনি আপনার প্রকল্প তৈরি করার পরে, একটি নতুন শীর্ষ স্তরের ডিরেক্টরি তৈরি করুন। অ্যান্ড্রয়েড স্টুডিওতে, প্রকল্প ফোল্ডারে ডান-ক্লিক করুন এবং নতুন > ডিরেক্টরি নির্বাচন করুন।

webapp ডিরেক্টরিটির নাম দিন।

ধাপ 3. আপনার নতুন ডিরেক্টরিতে একটি Yeoman প্রকল্প তৈরি করুন

প্রকল্পের webapp ডিরেক্টরিতে একটি টার্মিনালে cd ।

cd <path-to-project>/webapp/

তারপর Yeoman এর সাথে একটি নতুন ওয়েব অ্যাপ তৈরি করুন:

yo webapp

প্রকল্পের বিকল্পগুলি নির্বাচন করতে অন-স্ক্রীন প্রম্পটগুলি অনুসরণ করুন৷ আপনার মেশিনে কীভাবে npm ইনস্টল করা হয়েছে তার উপর নির্ভর করে আপনাকে sudo npm install চালানোর প্রয়োজন হতে পারে।

পরবর্তী ধাপে যাওয়ার আগে, নিম্নলিখিত কমান্ডটি চালিয়ে অ্যাপটি পরীক্ষা করুন:

grunt server

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

আপনি যদি grunt build , dist , তৈরি হয় এবং আপনার ওয়েব অ্যাপটি সংকুচিত, অপ্টিমাইজ করা হয় এবং এই ফোল্ডারের ভিতরে একটি উত্পাদন-প্রস্তুত সংস্করণ তৈরি করা হয়।

ধাপ 4. Gradle বিল্ড কনফিগার করুন

আপনার webapp ডিরেক্টরিতে build.gradle নামে একটি নতুন ফাইল তৈরি করুন।

আপনার নতুন build.gradle ফাইলে, নিম্নলিখিত যোগ করুন:

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

এটি একটি পূর্বনির্ধারিত প্রকার Exec সহ buildWebApp নামে একটি নতুন টাস্ক তৈরি করে। তারপরে, বর্তমান ওএসের উপর নির্ভর করে প্রাসঙ্গিক গ্রান্ট কমান্ডে Exec এ executable ভেরিয়েবল সেট করুন। args "build" এ সেট করা হয়েছে যা কমান্ড লাইনে চালানো হচ্ছে grunt build সমান। অবশেষে, শীর্ষে আমদানি হল Os.isFamily(Os.FAMILY_WINDOWS) ব্যবহার করা।

আমরা এই নতুন কাজটি ব্যবহার করার আগে, আমাদের প্রকল্পটিকে নতুন build.gradle ফাইল সম্পর্কে সচেতন করতে হবে।

রুট ডিরেক্টরিতে settings.gradle খুলুন এবং নিম্নলিখিত লাইন যোগ করুন:

include ':webapp'

ধাপ 5. আপনি যখন Android অ্যাপ তৈরি করবেন তখন আপনার ওয়েব অ্যাপ তৈরি করুন

তৈরি করার জন্য ওয়েব অ্যাপটি পান এবং তারপর অ্যাপটিকে আমাদের Android অ্যাপের assets ডিরেক্টরিতে অনুলিপি করুন।

Android apps build.gradle ফাইলে নিম্নলিখিত অনুলিপি করুন:

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

এর প্রতিটি অংশ পরীক্ষা করা যাক.

টাস্ক copyWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

এই Copy টাস্কটি webapp/dist ডিরেক্টরি থেকে আপনার অ্যাপ্লিকেশন কপি করে। আমরা ফাইলগুলিকে src/main/assets/www এ কপি করতে চাই। এই কাজটি প্রয়োজনীয় ফাইল কাঠামো তৈরি করে যদি প্রয়োজনীয় ডিরেক্টরিগুলির মধ্যে কোনটি বিদ্যমান না থাকে।

টাস্ক মুছে ফেলার ওয়েব অ্যাপ্লিকেশন

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

এই মুছে ফেলার কাজটি assets/www ডিরেক্টরির সমস্ত ফাইল মুছে দেয়।

copyWebApplication.dependsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

এর প্রথম লাইনে বলা হয়েছে যে copyWebApplication আমাদের ওয়েব অ্যাপের build.gradle ফাইল থেকে buildWebApp টাস্কের উপর নির্ভরশীল।

দ্বিতীয় লাইনটি বলে যে deleteWebApplication টাস্কের উপর নির্ভরতা রয়েছে।

অন্য কথায়, আমরা প্রকৃতপক্ষে assets ডিরেক্টরিতে কোনো ফাইল কপি করার আগে, নিশ্চিত করুন যে আমরা ওয়েব অ্যাপ তৈরি করেছি এবং assets ডিরেক্টরির বর্তমান বিষয়বস্তু মুছে ফেলছি।

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

এই টাস্কটি আপনার অ্যাপের প্রতিটি সংস্করণের জন্য আপনার সমস্ত প্রকল্পের বিল্ডগুলির জন্য নির্ভরতা নির্দিষ্ট করে৷ এখানে এটি copyWebApplication চালানোর জন্য assemble টাস্কের উপর নির্ভরতা সেট করে।

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

ধাপ 6. নিশ্চিত করুন যে সবকিছু কাজ করে

অ্যান্ড্রয়েড স্টুডিওতে, আপনার অ্যান্ড্রয়েড অ্যাপ্লিকেশন src ফোল্ডারে আপনার কোনও assets ডিরেক্টরি থাকা উচিত নয়।

index.html পৃষ্ঠা ব্যবহার করতে WebView সেট করুন:

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

রান ক্লিক করুন এবং আপনার অ্যাপ্লিকেশন তৈরি করতে দিন। আপনি www সাবডিরেক্টরিতে আপনার ওয়েব অ্যাপ্লিকেশন সহ একটি assets ডিরেক্টরি দেখতে পাবেন।

ধাপ 7. একটি লাইভ সার্ভার তৈরি করুন এবং লাইভ রিলোড করুন

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

আপনার অ্যান্ড্রয়েড অ্যাপের build.gradle এ android উপাদানের শেষে নিম্নলিখিত লাইনগুলি যোগ করুন:

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Gradle এখন আপনাকে একটি লাইভসার্ভার প্যাকেজ নাম সহ আপনার অ্যাপের একটি সংস্করণ এবং আপনার সাধারণ প্যাকেজের নাম সহ একটি সংস্করণ তৈরি করার ক্ষমতা দেয়৷ এটি কাজ করেছে কিনা তা পরীক্ষা করতে, গ্রেডল ফাইলগুলির সাথে সিঙ্ক প্রজেক্টে ক্লিক করুন ( রান বোতামের পাশে শীর্ষ বারে)।

তারপরে Android স্টুডিওর নীচে বাম কোণায় থাকা বিল্ড ভেরিয়েন্টগুলি দেখুন এবং আপনার অ্যাপের কোন সংস্করণগুলি আপনি তৈরি করতে পারেন তা মূলত দেখায়৷

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

এখন আপনার দুটি সংস্করণ আছে, কিন্তু তারা আসলে এখনও ভিন্ন কিছু করে না।

ধাপ 8. একটি লাইভ সার্ভার থেকে লোড

এখন, আপনি কোন পণ্যের স্বাদ তৈরি করছেন তার উপর নির্ভর করে একটি ভিন্ন URL লোড করতে আপনার অ্যাপ্লিকেশন কনফিগার করুন।

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

URLটিকে একটি স্ট্রিং সংস্থান হিসাবে সংজ্ঞায়িত করুন এবং একটি হার্ড-কোডেড URL এর পরিবর্তে আপনার কোডে সেই সংস্থানটি ব্যবহার করুন৷

1. src/liveserver এবং src/staticbuild ফোল্ডারগুলি তৈরি করুন।

2. liveserver ফোল্ডারে, values নামে একটি সাবফোল্ডার সহ res নামে একটি নতুন ফোল্ডার তৈরি করুন। এর ভিতরে config.xml নামে একটি ফাইল তৈরি করুন। staticbuild ফোল্ডারের জন্য এই প্রক্রিয়াটি পুনরাবৃত্তি করুন।

3. আপনার কনফিগার ফাইলের ভিতরে, src/liveserver/res/values/config.xml এ নিম্নলিখিত লাইন যোগ করুন:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
   </resources>
   

   src/staticbuild/res/values/config.xml এ নিম্নলিখিত ব্লক যোগ করুন:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">file:///android_asset/www/index.html</string>
   </resources>
   

4. এই কনফিগার ফাইলগুলি থেকে init_url ব্যবহার করতে আপনার WebView সেট করুন।

   mWebView.loadUrl(getString(R.string.init_url));
   

5. liveserver/AndroidManifest.xml এ AndroidManifest.xml নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত লাইনগুলি যোগ করুন:

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="https://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

   এটি liveserver তৈরির জন্য ইন্টারনেট অনুমতি যোগ করে।

6. webapp/Gruntfile.js ভিতরে দেখুন:

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: **'localhost'**
     },
     ...
   }
   

   localhost 0.0.0.0 দিয়ে প্রতিস্থাপন করুন যাতে আপনার স্থানীয় সার্ভার স্থানীয় নেটওয়ার্ক থেকে অ্যাক্সেসযোগ্য হয়:

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: '**0.0.0.0'**
     },
     ...
   }
   

আপনার পরিবর্তন পরীক্ষা করতে:

1. লাইভ সার্ভার শুরু করুন:

   grunt server
   

2. অ্যান্ড্রয়েড স্টুডিওতে, বিল্ড ভেরিয়েন্ট নির্বাচনে, LiveserverDebug নির্বাচন করুন। তারপর Run এ ক্লিক করুন।

   আপনি আপনার HTML, CSS এবং JavaScript বিষয়বস্তু সম্পাদনা করতে এবং ব্রাউজারে অবিলম্বে প্রতিফলিত দেখতে সক্ষম হবেন।

আপনার কাছে এখন আপনার অ্যাপ্লিকেশনের দুটি সংস্করণ রয়েছে: গ্রন্ট সার্ভার থেকে লাইভ রিলোড সহ একটি বিকাশ সংস্করণ; এবং একটি স্ট্যাটিক সংস্করণ, Android অ্যাপে স্থানীয়ভাবে প্যাকেজ করা।