ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่สอง: ลองสร้างโปรเจค)

ตอนที่ผ่านมาเราติดตั้ง Cordova แบบ multi-platform ซึ่งจะสามารถสร้างโปรเจคได้โดยใช้ Command Line Interface (CLI)

ก่อนอื่นขอลองอธิบายรูปแบบการสร้างโปรเจคของวิธีนี้ก่อน ว่าทำไมมันถึงสนับสนุน multi-platform

หลักการคือเมื่อสร้างโปรเจคด้วย CLI มันจะสร้างโปรเจคกลางๆไว้ ไม่มี platform เลย เราต้องเพิ่ม platform เข้าไปเอง การเพิ่ม platform ก็คือการสำเนาโปรเจคหลักไปเป็นโปรเจคสำหรับ platform นั้นๆ เช่น Android, iOS เป็นต้น

เราเริ่มด้วยการเปิด command prompt แล้วไปที่ D:\mobile แล้วเรียกไฟล์ setpath.bat ที่เคยสร้างไว้ก่อนนี้

ในที่นี้เราจะสร้างโปรเจคไว้ที่ D:\mobile\code ให้อยู่ในโฟลเดอร์ multi และมีชื่อโปรเจคว่า MyMulti จึงพิมพ์ว่า
cordova create D:\mobile\code\multi com.example.multi MyMulti

กระบวนการนี้ต้องต่อเน็ตเพื่อให้ cordova ดาวน์โหลด template มา ใช้เวลาแป๊บนึงครับ ก็จะมีโฟลเดอร์ D:\mobile\code\multi เกิดขึ้น

ต่อไปก็ต้องเพิ่ม platform ที่ต้องการเข้าไปครับ จะกี่ platform ก็ได้แล้วแต่ว่าเครื่องคอมเรารองรับไหม ในที่นี้จะทดสอบเฉพาะ Android ครับ

เพื่อความสะดวก เราจะใช้ command prompt ย้ายไปที่โฟลเดอร์ของโปรเจคที่เราพึ่งสร้างขึ้น โดยพิมพ์ cd D:\mobile\code\multi แล้วพิมพ์
 cordova platform add android
ซึ่งในที่นี้อาจจะเจอข้อผิดพลาดระบุว่า "Error: Please install Android target "android-19"." ทั้งนี้เนื่องจากไฟล์ template ของ Android ถูกกำหนดไว้ที่ level 19 (KitKat) แต่ Android SDK ของเราเป็น level 20 ซึ่งเป็นปัญหาเดียวกับบทความตอนที่ 2 วิธีแก้คือ
1. เรียก SDK Manager เพื่อเพิ่ม API level 19
หรือ
2. แก้ที่เครื่องเราเอง ไปที่ C:\Users\user\.cordova\lib\npm_cache\cordova-android\3.6.4\package\framework แล้วแก้ไขไฟล์ project.properties โดยเปลี่ยนบรรทัด target=android-19 เป็น target=android-20
ในที่นี้เราจะใช้วิธีที่ 2 ครับ

เมื่อแก้ไขไฟล์และบันทึกแล้ว เรียกคำสั่งเดิม คือ
cordova platform add android
อีกครั้งครับ

ในโฟลเดอร์ D:\mobile\code\multi ที่มีโปรเจคที่เราสร้างขึ้น โค้ดหลักจะอยู่ใต้โฟลเดอร์ www ครับ ส่วนโค้ดของแต่ละ platform จะอยู่ในโฟลเดอร์ platforms อีกทีหนึ่ง

ตามคู่มือ หากต้องการแก้ไขไฟล์ให้แก้เฉพาะที่โฟลเดอร์ www เพราะไฟล์จะถูกสำเนาไปให้แต่ละ platform ตอน build โปรเจคโดยอัตโนมัติ

หากเราต้องการ build โปรเจคโดยใช้ CLI สำหรับ Android แล้วเราต้องการ Apache Ant เพิ่มด้วยครับ ซึ่งดาวน์โหลดได้ที่ http://ant.apache.org/bindownload.cgi พอได้ไฟล์แล้วคลายไว้ที่ D:\mobile แล้วเปลี่ยนชื่อให้ง่ายๆเป็น D:\mobile\ant
แล้วไปแก้ไขไฟล์ setpath.bat เพื่อเพิ่ม path ให้กับ ant ดังนี้

set ANDROID_HOME=%~dp0adt-bundle\sdk
set NODE_PATH=%~dp0nodejs
set NODE_MODULES=%NODE_PATH%\node_modules
set NPM_CONFIG_PREFIX=%NODE_PATH%
set ANT_HOME=%~dp0ant
:: If JVM memory is not enough for building project by ANT
set _JAVA_OPTIONS=-Xmx512M
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\build-tools;%NODE_PATH%;%NODE_MODULES%;%ANT_HOME%\bin

แล้วเรียกไฟล์ D:\mobile\setpath.bat บน command prompt อีกครั้ง

จากนั้นไปที่ D:\mobile\code\multi แล้วใช้คำสั่ง
cordova build
ซึ่งจะ build ให้ทุก platform
หรือ ถ้าต้องการ build เฉพาะ Android ให้พิมพ์
cordova build android
ซึ่งขั้นตอนนี้จะเป็นการสำเนาไฟล์จากโฟลเดอร์ www ไปยังโฟลเดอร์ platforms\android\assets\www ซึ่งเป็น Android platform ตามที่เราสั่งด้วย

แล้วถ้าจะ run เพื่อดูผลลัพธ์
สำหรับ emulator เช่น AVD ให้ใช้
cordova emulate android
สำหรับ เครื่องจริง หรือ emulator เช่น genymotion ให้ใช้
cordova run android

หมายเหตุ คำสั่ง run จะ build โปรเจคใหม่เสมอ ถ้าไม่ต้องการ build แต่ต้องการรันเฉยๆ ให้ใช้คำสั่ง
cordova run android -- --nobuild

ตอนต่อไป เราจะลองเพิ่ม jQuery mobile ครับ

อ้างอิง
http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface