گردش کار WebView

تاریخ انتشار: 28 فوریه 2014

یکی از چیزهای مهم در توسعه وب، مجموعه غنی از ابزارهایی است که می توانید برای بهبود گردش کار خود از آنها استفاده کنید.

نمونه‌ای از یکی از این ابزارها Grunt است، یک برنامه اجراکننده جاوا اسکریپت که به شما امکان می‌دهد وظایفی را برای انجام در برنامه وب خود تعریف کنید، از کامپایل Sass و راه‌اندازی سرور زنده گرفته تا فشرده‌سازی تصاویر، کوچک کردن جاوا اسکریپت و اجرای JSHint قبل از ایجاد یک ساخت آماده برای تولید. .

Yeoman ابزاری است که به ایجاد برنامه های کاربردی وب، تولید boilerplate، آوردن کتابخانه ها از Bower و npm و ایجاد یک فایل Grunt با وظایف از پیش تعریف شده کمک می کند.

در این آموزش، از Yeoman برای ایجاد یک برنامه وب پایه جدید استفاده می‌کنید، سپس سیستم ساخت اندروید استودیو ( Gradle ) را با Grunt ادغام می‌کنید تا برنامه وب خود را بسازید. همچنین وظایف Grunt را برای راه‌اندازی یک سرور محلی با بارگذاری مجدد زنده برای آزمایش برنامه خود در مرورگر راه‌اندازی می‌کنید، بنابراین لازم نیست هر بار که یک فایل HTML، CSS یا جاوا اسکریپت را تغییر می‌دهید، صفحه را به‌صورت دستی بازخوانی کنید.

پیش نیازها

قبل از شروع، باید چند پیش نیاز را نصب کنید:

  1. Yeoman را نصب کنید: https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. اندروید استودیو را نصب کنید: https://developer.android.com/sdk/installing/studio.html

مرحله 1. یک پروژه جدید در Android Studio با WebView ایجاد کنید

می‌توانید دستورالعمل‌های کاملی درباره نحوه انجام این کار در راهنمای شروع پیدا کنید.

مرحله 2. یک زیر شاخه برای محتوای برنامه وب ایجاد کنید

پس از ایجاد پروژه خود، یک دایرکتوری سطح بالا ایجاد کنید. در Android Studio، روی پوشه پروژه کلیک راست کرده و New > Directory را انتخاب کنید.

webapp دایرکتوری را نامگذاری کنید.

مرحله 3. یک پروژه Yeoman در فهرست جدید خود ایجاد کنید

در یک cd ترمینال به دایرکتوری webapp در پروژه.

cd <path-to-project>/webapp/

سپس یک برنامه وب جدید با Yeoman ایجاد کنید:

yo webapp

برای انتخاب گزینه های پروژه، اعلان های روی صفحه را دنبال کنید. بسته به اینکه npm چگونه روی دستگاه شما نصب شده است، ممکن است نیاز به اجرای sudo npm install داشته باشید.

قبل از رفتن به مرحله بعدی، برنامه را با اجرای دستور زیر تست کنید:

grunt server

یک تب جدید باید در مرورگر شما باز شود و به یک سرور محلی که توسط Grunt راه اندازی شده است متصل شود. اگر یکی از فایل های HTML، CSS یا جاوا اسکریپت را در پروژه تغییر دهید، صفحه به طور خودکار بارگیری و به روز می شود.

اگر 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"]
}

این یک کار جدید به نام buildWebApp با نوع از پیش تعریف شده Exec ایجاد می کند. سپس، بسته به سیستم عامل فعلی، متغیر executable در Exec را روی دستور grunt مربوطه تنظیم کنید. args روی "build" تنظیم شده است که برابر است با اجرای grunt build در خط فرمان. در نهایت، واردات در بالا استفاده از Os.isFamily(Os.FAMILY_WINDOWS) است.

قبل از اینکه بتوانیم از این وظیفه جدید استفاده کنیم، باید پروژه را از فایل جدید build.gradle آگاه کنیم.

settings.gradle را در پوشه اصلی باز کنید و خط زیر را اضافه کنید:

include ':webapp'

مرحله 5. برنامه وب خود را هنگام ساخت برنامه اندروید بسازید

برنامه وب را برای ساخت دریافت کنید و سپس برنامه را در فهرست assets برنامه اندروید ما کپی کنید.

موارد زیر را در فایل 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 

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

این کار حذف تمام فایل‌های موجود در فهرست assets/www را حذف می‌کند.

copyWebApplication.dependsOn 

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

خط اول این بیان می کند که copyWebApplication به وظیفه buildWebApp از فایل build.gradle برنامه وب ما وابستگی دارد.

خط دوم بیان می کند که یک وابستگی به وظیفه deleteWebApplication وجود دارد.

به عبارت دیگر، قبل از اینکه فایلی را در فهرست assets کپی کنیم، مطمئن شوید که برنامه وب را ساخته ایم و همچنین محتویات فعلی فهرست assets را حذف کرده ایم.

android.applicationVariants.all 

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

این وظیفه وابستگی‌ها را برای تمام ساخت‌های پروژه شما، برای هر نسخه از برنامه شما مشخص می‌کند. در اینجا یک وابستگی به وظایف assemble برای اجرای copyWebApplication تعیین می کند.

وظایف assemble خروجی پروژه را مونتاژ می کند، بنابراین برنامه وب باید ابتدا در پروژه اندروید کپی شود.

مرحله 6. مطمئن شوید که همه چیز کار می کند

در اندروید استودیو، نباید دایرکتوری assets در پوشه src برنامه های اندرویدی خود داشته باشید.

WebView را برای استفاده از صفحه index.html تنظیم کنید:

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

روی Run کلیک کنید و اجازه دهید برنامه شما ساخته شود. شما باید دایرکتوری assets با برنامه وب خود در زیر شاخه www ببینید.

مرحله 7. یک سرور زنده ایجاد کنید و دوباره بارگذاری کنید

بارگذاری مجدد زنده می تواند برای ایجاد تغییرات سریع در برنامه های وب شما بسیار مفید باشد. برای فعال کردن این کار، می توانید دو «طعم محصول» برای برنامه خود ایجاد کنید: یک نسخه سرور زنده و یک نسخه استاتیک، که در آن محتوای وب در برنامه اندروید بسته بندی می شود.

در build.gradle برنامه Android خود خطوط زیر را در انتهای عنصر android اضافه کنید: 

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

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

}

Gradle اکنون به شما این امکان را می دهد که نسخه ای از برنامه خود را با نام بسته liveserver و نسخه ای با نام بسته معمولی خود ایجاد کنید. برای بررسی اینکه آیا کار می کند یا خیر، روی Sync Project with Gradle Files (در نوار بالای کنار دکمه Run ) کلیک کنید.

سپس Build Variants را مشاهده کنید که در گوشه سمت چپ پایین Android Studio قرار دارند و اساساً به شما نشان می دهد که چه نسخه هایی از برنامه خود را می توانید بسازید.

برای هر productFlavor نسخه های Debug و Release وجود دارد که افزونه اندروید Gradle به طور پیش فرض در اختیار شما قرار می دهد. این تعیین می کند که آیا ساخت باید یک ساخت اشکال زدایی باشد یا یک نسخه انتشار مناسب برای استقرار در فروشگاه Play.

اکنون شما دو نسخه دارید، اما آنها در واقع هنوز کار متفاوتی انجام نمی دهند.

مرحله 8. از یک سرور زنده بارگیری کنید

اکنون، برنامه خود را پیکربندی کنید تا بسته به طعم محصولی که می‌سازید، URL متفاوتی بارگیری کند.

در برنامه Android شما، فایل‌های مشترک برای همه طعم‌های محصول در src/main وجود دارند. برای افزودن کد یا منابع خاص به طعم یک محصول، دایرکتوری دیگری تحت src با همان نام productFlavor خود ایجاد کنید. وقتی برای آن نوع ساخت می‌سازید، Gradle و افزونه Android این فایل‌های اضافی را در بالای فایل‌ها در src/main ادغام می‌کنند.

URL را به عنوان یک منبع رشته ای تعریف کنید و از آن منبع در کد خود به جای URL سخت کد شده استفاده کنید.

  1. پوشه های src/liveserver و src/staticbuild را ایجاد کنید.

  2. در پوشه liveserver ، یک پوشه جدید به نام res با یک زیرپوشه به نام values ​​ایجاد کنید. داخل این فایلی به نام 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. WebView خود را طوری تنظیم کنید که از init_url این فایل های پیکربندی استفاده کند. 

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

  5. یک فایل جدید به نام AndroidManifest.xml در liveserver/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. در Android Studio، در انتخاب Build Variant ، LiveserverDebug را انتخاب کنید. سپس روی Run کلیک کنید.

    شما باید بتوانید محتوای HTML، CSS و جاوا اسکریپت خود را ویرایش کنید و بلافاصله آن را در مرورگر منعکس کنید.

اکنون دو نسخه از برنامه خود دارید: یک نسخه توسعه با بارگذاری مجدد زنده از سرور Grunt. و یک نسخه استاتیک، به صورت محلی در برنامه اندروید بسته بندی شده است.