ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่หนึ่ง)

มาว่ากันต่อครับ สำหรับการติดตั้งแบบที่หนึ่ง โดยเราจะเน้น Cordova สำหรับ Android platform ครับ ถ้ายังมีโปรแกรมไม่ครบ ให้ไปติดตั้งให้เรียบร้อยเหมือนในบทความก่อนหน้านี้นะครับ

1. ดาวน์โหลด https://www.apache.org/dist/cordova/platforms/ ในที่นี้จะเลือกเวอร์ชันสำหรับ Android เช่น https://www.apache.org/dist/cordova/platforms/cordova-windows-3.6.4.tgz ซึ่งเป็นเวอร์ชันล่าสุด เลขเวอร์ชันมากกว่า 3.5.0 แสดงว่าน่าจะแก้ปัญหาเรื่อง security ไปแล้ว

2. แตกไฟล์ที่ได้ออกมาไว้ใน D:\mobile จะได้โฟลเดอร์ชื่อ package เราจะเปลี่ยนชื่อมันเป็น cordova-android ครับ

3. เช็ค Eclipse API level ซึ่งตอนที่แล้วเรารู้ว่าเป็น level 20 ดังนั้นเราจำเป็นต้องแก้ไขไฟล์ D:\mobile\cordovaAndroid\framework\project.properties ให้ตรงกัน (อันนี้ผมยังไม่แน่ใจว่าจะมีปัญหาอะไรไหม เช่น cordova รุ่นนี้จะไม่ support กับ API ที่ไม่ได้กำหนดไว้ตั้งแต่แรก ถ้ากลัวตรงนี้ก็ไปอัพเดทให้ SDK เรามี API ตรงกับรุ่นของ Cordova ก็ได้ครับ)
แต่ถ้าจะเล่นง่ายๆแบบผมก่อน ก็ไปแก้ไขไฟล์ข้างต้น เปลี่ยนบรรทัดที่เขียนว่า target=android-19 เป็น target=android-20 ครับ

4. ไปที่ command prompt ที่ D:\mobile แล้วเรียกไฟล์ setpath.bat

5. ตอนนี้เราพร้อมที่จะสร้าง template ของ Cordova เพื่อจะไปรันใน eclipse แล้ว สมมติว่าเราต้องการสร้าง source code ไว้ในโฟล์เดอร์ D:\mobile\code\

6. ย้ายไปโฟลเดอร์  D:\mobile\cordova-android\bin ใช้คำสั่งดังนี้
create D:\mobile\code\hello com.example.hello HelloWorld
รอสักครู่ ถ้าไม่มีอะไรผิดพลาดจะได้ผลดังรูป

พารามิเตอร์ 3 ค่าของคำสั่ง create คือ
6.1 hello เป็นโฟลเดอร์ใหม่ที่เราจะสร้างขึ้นเพื่อเก็บโปรเจค โฟลเดอร์นี้ต้องไม่มีอยู่เดิม
6.2. com.example.hello เป็น new-folder reverse domain-style identifier ซึ่งจะเป็นที่ๆเก็บไฟล์ java หลัก เหมือนเราเขียน java ทั่วไป
6.3. HelloWorld เป็นชื่อของคลาส รวมถึงชื่อของแอพลิเคชั่นที่เราจะสร้างขึ้น

7. ไฟล์จะถูกสร้างไว้ใน D:\mobile\source\hello\ เราก็เปิด Eclipse แล้วเลือกเมนู File/New/Project แล้วเลือก Existing code ตามรูป

8. Browse ไปยังโฟลเดอร์ D:\mobile\source\hello\ ที่สร้างไว้ แล้วกด Finish ได้

9. ก็จะมีโปรเจคเกิดขึ้นสองอัน คือ HelloWorld อันหลัก และ CordovaApp-CordovaLib เป็นตัวอ้างอิง ไฟล์เว็บที่เราจะแก้ไขจะอยู่ในโปรเจค HelloWorld โฟลเดอร์ assets\www เช่นไฟล์ index.html ครับ

หมายเหตุ เราจะ import เฉพาะ HelloWorld ก็ได้ครับ จากนั้นก็ไปกำหนด project properties ให้ add external JAR files เป็นไฟล์ D:\mobile\code\hello\CordovaLib\bin\cordovaapp-cordovalib.jar ก็จะได้เหมือนกันครับ (มีปัญหาตอนรันบน emulator ครับ)

10. ถ้าจะทดสอบ ก็คลิกขวาที่ชื่อโปรเจค HelloWorld แล้วเลือก Run As/ Android Application ได้ครับ (ต้องสร้าง AVD หรือใช้ emulator หรือเชื่อมต่อกับอุปกรณ์จริงก่อนนะครับ)

11. ถ้าหา emulator หรือ device ไม่เจอ ลองไปดูบทความนี้ดูครับ

******************* หมายเหตุ *****************
ตั้งแต่ขั้นตอนที่ 7-10 เราจะไม่ใช่ Eclipse ก็ได้ครับ เพราะ Cordova ได้สร้างไฟล์คำสั่งให้เราสามารถ build และ run โปรแกรมได้เลย แต่เราต้องติดตั้ง 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 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%;%ANT_HOME%\bin

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

จากนั้น ไปที่โฟลเดอร์ cordova ภายใต้โฟลเดอร์โปรเจคของเรา เช่น D:\mobile\code\hello\cordova แล้ว build โปรเจคด้วยคำสั่ง

build --debug

แล้วรอจนมีคำว่า build successful

ถ้า emulator เปิดอยู่ หรือเชื่อมต่อกับ Android device อยู่ ก็สามารถใช้คำสั่ง

run --nobuild

เพื่อแสดงผลได้เลยครับ

ปล. คำสั่ง run เฉยๆ จะทำการ build ให้ใหม่โดยอัตโนมัติครับ

อ้างอิง
http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide