Alur kerja WebView

Dipublikasikan: 28 Februari 2014

Salah satu hal yang luar biasa dari pengembangan web adalah beragam alat yang dapat Anda gunakan untuk meningkatkan alur kerja.

Contoh salah satu alat ini adalah Grunt, runner tugas JavaScript yang memungkinkan Anda menentukan tugas yang akan dilakukan di aplikasi web, mulai dari mengompilasi Sass dan memulai server aktif hingga mengompresi gambar, melakukan minifikasi JavaScript, dan menjalankan JSHint sebelum membuat build yang siap produksi.

Yeoman adalah alat yang membantu membuat aplikasi web, membuat boilerplate, memasukkan library dari Bower dan npm, serta membuat file Grunt dengan tugas yang telah ditentukan.

Dalam tutorial ini, Anda akan menggunakan Yeoman untuk membuat aplikasi web dasar baru, lalu mengintegrasikan sistem build Android Studio (Gradle) dengan Grunt, untuk mem-build aplikasi web Anda. Anda juga akan menyiapkan tugas Grunt untuk meluncurkan server reload langsung lokal untuk menguji aplikasi di browser, sehingga Anda tidak perlu memuat ulang halaman secara manual setiap kali mengubah file HTML, CSS, atau JavaScript.

Prasyarat

Sebelum memulai, Anda harus menginstal beberapa prasyarat:

  1. Instal Yeoman: https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. Menginstal Android Studio: https://developer.android.com/sdk/installing/studio.html

Langkah 1. Membuat project baru di Android Studio dengan WebView

Anda dapat menemukan petunjuk lengkap tentang cara melakukannya di panduan memulai.

Langkah 2. Membuat subdirektori untuk konten aplikasi web

Setelah membuat project, buat direktori level teratas baru. Di Android Studio, klik kanan folder project, lalu pilih New > Directory.

Beri nama direktori webapp.

Langkah 3. Membuat project Yeoman di direktori baru

Di terminal cd ke direktori webapp dalam project.

cd <path-to-project>/webapp/

Kemudian, buat aplikasi web baru dengan Yeoman:

yo webapp

Ikuti petunjuk di layar untuk memilih opsi project. Anda mungkin perlu menjalankan sudo npm install, bergantung pada cara npm diinstal di komputer Anda.

Sebelum melanjutkan ke langkah berikutnya, uji aplikasi dengan menjalankan perintah berikut:

grunt server

Tab baru akan terbuka di browser Anda, yang terhubung ke server lokal yang dimulai oleh Grunt. Jika Anda mengubah salah satu file HTML, CSS, atau JavaScript dalam project, halaman akan otomatis dimuat ulang dan diperbarui.

Jika Anda menjalankan grunt build, direktori baru, dist, akan dibuat dan aplikasi web Anda akan dikompresi, dioptimalkan, dan dibuat menjadi versi siap produksi di dalam folder ini.

Langkah 4. Mengonfigurasi build Gradle

Di direktori webapp, buat file baru bernama build.gradle.

Di file build.gradle baru, tambahkan kode berikut:

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

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

Tindakan ini akan membuat tugas baru bernama buildWebApp dengan jenis bawaan Exec. Kemudian, tetapkan variabel executable di Exec ke perintah grunt yang relevan bergantung pada OS saat ini. args ditetapkan ke "build" yang setara dengan grunt build yang dijalankan di command line. Terakhir, impor di bagian atas adalah untuk menggunakan Os.isFamily(Os.FAMILY_WINDOWS).

Sebelum dapat menggunakan tugas baru ini, kita perlu membuat project mengetahui file build.gradle baru.

Buka settings.gradle di direktori root dan tambahkan baris berikut:

include ':webapp'

Langkah 5. Mem-build aplikasi web saat mem-build aplikasi Android

Buat aplikasi web, lalu salin aplikasi ke direktori assets aplikasi Android kita.

Salin kode berikut ke dalam file build.gradle aplikasi Android:

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
}

Mari kita pelajari setiap bagiannya.

tugas copyWebApplication

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

Tugas Copy ini menyalin aplikasi Anda dari direktori webapp/dist. Kita ingin menyalin file ke src/main/assets/www. Tugas ini juga membuat struktur file yang diperlukan jika ada direktori yang diperlukan yang tidak ada.

tugas deleteWebApplication

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

Tugas penghapusan ini akan menghapus semua file di direktori assets/www.

copyWebApplication.dependsOn

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

Baris pertama ini menyatakan bahwa copyWebApplication memiliki dependensi pada tugas buildWebApp dari file build.gradle aplikasi web kita.

Baris kedua menyatakan bahwa ada dependensi pada tugas deleteWebApplication.

Dengan kata lain, sebelum benar-benar menyalin file ke direktori assets, pastikan kita mem-build aplikasi web dan juga menghapus konten saat ini dari direktori assets.

android.applicationVariants.all

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

Tugas ini menentukan dependensi untuk semua build project, untuk setiap versi aplikasi Anda. Di sini, tugas ini menetapkan dependensi pada tugas assemble untuk menjalankan copyWebApplication.

Tugas assemble menyusun output project, sehingga aplikasi web harus disalin ke project Android terlebih dahulu.

Langkah 6. Memastikan semuanya berfungsi

Di Android Studio, Anda tidak boleh memiliki direktori assets di folder src aplikasi Android.

Tetapkan WebView untuk menggunakan halaman index.html:

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

Klik Run dan biarkan aplikasi Anda di-build. Anda akan melihat direktori assets dengan aplikasi web di subdirektori www.

Langkah 7. Membuat server live dan live reload

Live reload dapat sangat berguna untuk melakukan perubahan cepat pada aplikasi web Anda. Untuk mengaktifkannya, Anda dapat membuat dua "ragam produk" untuk aplikasi: versi server aktif dan versi statis, tempat konten web dikemas ke dalam aplikasi Android.

Di build.gradle aplikasi Android Anda, tambahkan baris berikut di akhir elemen android:

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

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

}

Gradle kini menawarkan kemampuan untuk membuat versi aplikasi dengan nama paket liveserver, dan satu lagi dengan nama paket normal. Untuk memeriksa apakah berhasil, klik Sync Project with Gradle Files (di panel atas di samping tombol Run).

Kemudian, lihat Build Variants yang ada di sudut kiri bawah Android Studio dan pada dasarnya menunjukkan versi aplikasi yang dapat Anda build.

Untuk setiap productFlavor, ada versi Debug dan Release, yang plugin Android untuk Gradle berikan kepada Anda secara default. Hal ini menentukan apakah build harus berupa build debug atau build rilis yang sesuai untuk di-deploy di Play Store.

Sekarang Anda memiliki dua versi, tetapi keduanya belum melakukan hal yang berbeda.

Langkah 8. Memuat dari server aktif

Sekarang, konfigurasikan aplikasi Anda untuk memuat URL yang berbeda, bergantung pada ragam produk yang Anda build.

Dalam aplikasi Android Anda, file yang umum untuk semua ragam produk berada di src/main. Untuk menambahkan kode atau resource khusus untuk satu ragam produk, buat direktori lain di bagian src dengan nama yang sama dengan productFlavor Anda. Saat Anda mem-build untuk varian build tersebut, Gradle dan plugin Android akan menggabungkan file tambahan ini di atas file di src/main.

Tentukan URL sebagai resource string, dan gunakan resource tersebut dalam kode Anda, bukan URL hard code.

  1. Buat folder src/liveserver dan src/staticbuild.

  2. Di folder liveserver, buat folder baru bernama res dengan subfolder bernama values. Di dalamnya, buat file bernama config.xml. Ulangi proses ini untuk folder staticbuild.

  3. Di dalam file konfigurasi, tambahkan baris berikut ke 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>

    Tambahkan blok berikut ke 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. Tetapkan WebView Anda untuk menggunakan init_url dari file konfigurasi ini.

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

  5. Buat file baru bernama AndroidManifest.xml di liveserver/AndroidManifest.xml dan tambahkan baris berikut:

    <?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>

    Tindakan ini akan menambahkan izin Internet untuk build liveserver.

  6. Di dalam webapp/Gruntfile.js, cari:

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

    Ganti localhost dengan 0.0.0.0 agar server lokal Anda dapat diakses dari jaringan lokal:

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

Untuk menguji perubahan Anda:

  1. Mulai server live:

    grunt server

  2. Di Android Studio, pada pilihan Build Variant, pilih LiveserverDebug. Kemudian klik Run.

    Anda akan dapat mengedit konten HTML, CSS, dan JavaScript dan melihatnya langsung ditampilkan di browser.

Sekarang Anda memiliki dua versi aplikasi: versi pengembangan dengan reload langsung dari server Grunt; dan versi statis, yang dipaketkan secara lokal di aplikasi Android.