เวิร์กโฟลว์ WebView

เผยแพร่: 28 กุมภาพันธ์ 2014

สิ่งหนึ่งที่ยอดเยี่ยมเกี่ยวกับการพัฒนาเว็บคือชุดเครื่องมือที่หลากหลายที่คุณใช้เพื่อปรับปรุงเวิร์กโฟลว์ได้

ตัวอย่างเครื่องมือเหล่านี้ ได้แก่ Grunt ซึ่งเป็นเครื่องมือรันงาน JavaScript ที่ช่วยให้คุณกำหนดงานที่จะดำเนินการในเว็บแอปได้ ตั้งแต่การคอมไพล์ Sass และเริ่มเซิร์ฟเวอร์แบบเรียลไทม์ไปจนถึงการบีบอัดรูปภาพ การทำให้ JavaScript มีขนาดไฟล์เล็กลง และเรียกใช้ JSHint ก่อนสร้างบิลด์ที่พร้อมใช้งานจริง

Yeoman เป็นเครื่องมือที่ช่วยสร้างเว็บแอปพลิเคชัน สร้างไฟล์เริ่มต้น นำเข้าไลบรารีจาก Bower และ npm รวมถึงสร้างไฟล์ Grunt ที่มีงานที่กําหนดไว้ล่วงหน้า

ในบทแนะนำนี้ คุณจะใช้ Yeoman เพื่อสร้างเว็บแอปพลิเคชันพื้นฐานใหม่ จากนั้นผสานรวมระบบบิลด์ Android Studio (Gradle) กับ Grunt เพื่อสร้างเว็บแอปพลิเคชัน นอกจากนี้ คุณยังตั้งค่างาน Grunt เพื่อเปิดเซิร์ฟเวอร์การโหลดซ้ำแบบเรียลไทม์ในเครื่องเพื่อทดสอบแอปพลิเคชันในเบราว์เซอร์ด้วย เพื่อที่คุณจะได้ไม่ต้องรีเฟรชหน้าเว็บด้วยตนเองทุกครั้งที่เปลี่ยนไฟล์ HTML, CSS หรือ JavaScript

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้นใช้งาน คุณจะต้องติดตั้งข้อกําหนดเบื้องต้น 2-3 อย่างต่อไปนี้

  1. ติดตั้ง Yeoman: https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. ติดตั้ง Android Studio: https://developer.android.com/sdk/installing/studio.html

ขั้นตอนที่ 1 สร้างโปรเจ็กต์ใหม่ใน Android Studio ที่มี WebView

ดูวิธีการแบบเต็มได้ในคู่มือเริ่มต้นใช้งาน

ขั้นตอนที่ 2 สร้างไดเรกทอรีย่อยสำหรับเนื้อหาเว็บแอป

หลังจากสร้างโปรเจ็กต์แล้ว ให้สร้างไดเรกทอรีระดับบนสุดใหม่ ใน Android Studio ให้คลิกขวาที่โฟลเดอร์โปรเจ็กต์ แล้วเลือกใหม่ > ไดเรกทอรี

ตั้งชื่อไดเรกทอรีเป็น webapp

ขั้นตอนที่ 3 สร้างโปรเจ็กต์ Yeoman ในไดเรกทอรีใหม่

ในเทอร์มินัล cd ไปยังไดเรกทอรี webapp ในโปรเจ็กต์

cd <path-to-project>/webapp/

จากนั้นสร้างเว็บแอปใหม่ด้วย Yeoman โดยทำดังนี้

yo webapp

ทำตามข้อความแจ้งบนหน้าจอเพื่อเลือกตัวเลือกโปรเจ็กต์ คุณอาจต้องเรียกใช้ sudo npm install โดยขึ้นอยู่กับวิธีติดตั้ง npm ในเครื่อง

ก่อนที่จะดำเนินการต่อในขั้นตอนถัดไป ให้ทดสอบแอปโดยเรียกใช้คำสั่งต่อไปนี้

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

ซึ่งจะสร้างงานใหม่ชื่อ buildWebApp ที่มีประเภท Exec ที่กําหนดไว้ล่วงหน้า จากนั้นตั้งค่าตัวแปร executable ใน Exec เป็นคำสั่ง Grunt ที่เกี่ยวข้อง โดยขึ้นอยู่กับระบบปฏิบัติการปัจจุบัน args มีการตั้งค่าเป็น "build" ซึ่งเทียบเท่ากับgrunt build ที่ทำงานในบรรทัดคำสั่ง สุดท้าย การนําเข้าที่ด้านบนมีไว้เพื่อใช้ประโยชน์จาก Os.isFamily(Os.FAMILY_WINDOWS)

เราต้องแจ้งให้โปรเจ็กต์ทราบเกี่ยวกับไฟล์ build.gradle ใหม่ก่อนจึงจะใช้งานใหม่นี้ได้

เปิด settings.gradle ในไดเรกทอรีรูท แล้วเพิ่มบรรทัดต่อไปนี้

include ':webapp'

ขั้นตอนที่ 5 สร้างเว็บแอปเมื่อคุณสร้างแอป Android

เรียกใช้เว็บแอปเพื่อสร้าง แล้วคัดลอกแอปไปยังไดเรกทอรี assets ของแอป Android

คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ build.gradle ของแอป 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
}

มาดูแต่ละส่วนกัน

งาน 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 จะรวบรวมเอาต์พุตของโปรเจ็กต์ ดังนั้นจึงต้องคัดลอกเว็บแอปไปยังโปรเจ็กต์ Android ก่อน

ขั้นตอนที่ 6 ตรวจสอบว่าทุกอย่างใช้งานได้

ใน Android Studio คุณไม่ควรมีไดเรกทอรี assets ในโฟลเดอร์ Android applications src

ตั้งค่า WebView ให้ใช้หน้า index.html

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

อย่างชัดเจน

คลิกเรียกใช้ แล้วปล่อยให้แอปพลิเคชันสร้าง คุณควรเห็นไดเรกทอรี assets ที่มีเว็บแอปพลิเคชันของคุณในไดเรกทอรีย่อย www

ขั้นตอนที่ 7 สร้างเซิร์ฟเวอร์เวอร์ชันที่ใช้จริงและโหลดซ้ำแบบเรียลไทม์

การโหลดซ้ำแบบเรียลไทม์มีประโยชน์มากสำหรับการทําการเปลี่ยนแปลงเว็บแอปพลิเคชันอย่างรวดเร็ว หากต้องการเปิดใช้ฟีเจอร์นี้ คุณสามารถสร้าง "ผลิตภัณฑ์ย่อย" 2 รายการสำหรับแอป ได้แก่ เวอร์ชันเซิร์ฟเวอร์ที่เผยแพร่อยู่และเวอร์ชันแบบคงที่ ซึ่งจะแพ็กเกจเนื้อหาเว็บไว้ในแอปพลิเคชัน Android

ใน build.gradle ของแอป Android ให้เพิ่มบรรทัดต่อไปนี้ที่ส่วนท้ายขององค์ประกอบ android

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

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

}

ตอนนี้ Gradle ช่วยให้คุณสร้างแอปเวอร์ชันที่มีชื่อแพ็กเกจเป็น liveserver และเวอร์ชันที่มีชื่อแพ็กเกจปกติได้ หากต้องการตรวจสอบว่าได้ผลหรือไม่ ให้คลิกซิงค์โปรเจ็กต์กับไฟล์ Gradle (ในแถบด้านบนข้างปุ่มเรียกใช้)

จากนั้นดูตัวแปรการสร้างซึ่งอยู่ที่มุมล่างซ้ายของ Android Studio และแสดงเวอร์ชันของแอปที่คุณสร้างได้

productFlavor แต่ละรายการจะมีเวอร์ชันแก้ไขข้อบกพร่องและรุ่น ซึ่งปลั๊กอิน Android สำหรับ Gradle จะสร้างให้คุณโดยค่าเริ่มต้น ตัวเลือกนี้จะกำหนดว่าบิวด์ควรเป็นบิวด์แก้ไขข้อบกพร่องหรือบิวด์รุ่นที่เหมาะสำหรับนำไปใช้งานใน Play Store

ตอนนี้คุณมี 2 เวอร์ชันแล้ว แต่เวอร์ชันเหล่านั้นยังไม่ได้ทําอะไรที่แตกต่างกัน

ขั้นตอนที่ 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 ให้เลือก LiveserverDebug ในตัวเลือกตัวแปรการสร้าง จากนั้นคลิกเรียกใช้

    คุณควรแก้ไขเนื้อหา HTML, CSS และ JavaScript ได้ และจะเห็นเนื้อหาที่แก้ไขในเบราว์เซอร์ทันที

ตอนนี้คุณมีแอปพลิเคชัน 2 เวอร์ชัน ได้แก่ เวอร์ชันสำหรับการพัฒนาที่มีการโหลดซ้ำแบบเรียลไทม์จากเซิร์ฟเวอร์ Grunt และเวอร์ชันแบบคงที่ซึ่งแพ็กเกจไว้ในเครื่องในแอป Android