Ionic: การเพิ่มแพลตฟอร์ม Android

Posted on by

การเพิ่มแพลตฟอร์ม Android

  1. ติดตั้ง JDK, Android Studio และ Ant
  2. Build แอพเป็น APK
  3. การ Debug เมื่อรันบนเครื่อง Android จริง

1. ติดตั้ง JDK, Android Studio และ Ant

ติดตั้ง JDK, Android Studio เสร็จแล้ว
ให้กำหนดค่า Environment Variable > System variables
Set ตัวแปร ANDROID_HOME
C:\Users\username\AppData\Local\Android\Sdk\

ให้กำหนดค่า Environment Variable > User variables
Set ตัวแปร Path
C:\Users\username\AppData\Local\Android\Sdk\tools
C:\Users\username\AppData\Local\Android\Sdk\platform-tools

ติดตั้ง Ant บน Windows
ดูวิธีติดตั้งที่
http://nextflow.in.th/2014/easy-install-ant-on-windows/
Download WinAnt

ตรวจสอบว่าติดตั้งเรียบร้อยมั๊ย

> ant -version
Apache Ant(TM) version 1.8.2 compiled on December 20 2010

2. Build แอพเป็น APK

Link: Android Publishing

เพิ่มแพลตฟอร์ม Android ด้วยคำสั่ง

> ionic cordova platform add android

ลบแพลตฟอร์ม Android ด้วยคำสั่ง

> ionic cordova platform rm android

Build แบบ Release ด้วยคำสั่ง

> ionic cordova build android --release

หรือ

> ionic cordova build android --prod --release

จะได้ไฟล์อยู่ที่
platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk
ลอง copy ไฟล์ไปติดตั้งแล้ว แต่ติดตั้งไม่ได้ เลยลองแบบ debug แทน

Build แบบ Debug ด้วยคำสั่ง

> ionic cordova run android --device

จะได้ไฟล์อยู่ที่
platforms\android\app\build\outputs\apk\debug\app-debug.apk
ลอง copy ไฟล์ไปติดตั้งแล้ว ใช้ได้

สรุปคือใช้ 2 คำสั่งนี้สำหรับ Android

> ionic cordova platform rm android
> ionic cordova platform add android
> ionic cordova run android --device

และ 2 คำสั่งนี้สำหรับ iOS

> ionic cordova platform rm ios
> ionic cordova platform add ios
> ionic cordova run ios --device

เพิ่มและรันแพลตฟอร์ม browser

> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser

3. การ Debug เมื่อรันบนเครื่อง Android จริง

กำหนดให้ Notebook และ Android Mobile เข้า Network วงเดียวกันก่อน

จากนั้นรันคำสั่ง

> ionic cordova run android --device -l -c

โดย
l = live reload
c = console output

ถ้า Notebook มีหลาย NIC ให้เลื่อนขึ้น-ลง เพื่อเลือก NIC ตัวที่อยู่ Network วงเดียวกับมือถือ

Note: เหมือนว่าโค๊ดจะ deploy จาก Notebook ไปมือถือด้วยสาย USB แต่
มือถือจะเข้าถึง Server ของ ionic จาก WI-FI เลยทำให้เราสามารถ Debug ที่เครื่อง Notebook ได้

Link