ติดตั้ง 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

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (ภาค Intro)

ผมเคยใช้งาน Apache Cordova 2.9 มาก่อน ตอนนั้นติดตั้งง่ายมากๆ แค่ดาวน์โหลดไฟล์ zip มา แล้วใช้ NetBeans 7.4 beta (เป็นเวอร์ชันเดียวที่ใช้กับตัว Cordova 2.9 ได้ง่ายๆเลย) แทบไม่ต้องตั้งค่าอะไร

พอ Cordova ขึ้นหลัก 3 (ปัจจุบันเวอร์ชันล่าสุดที่เขียนคือ 4.0.0) ผมก็อยากลองเหลือเกิน แต่ติดด้วยมันต้องลงนั่นลงนี่ลงโน่น ซึ่งความจริงมันก็ไม่ซับซ้อนเกินไป แต่ด้วยความที่ไม่ชอบจะไปลงโปรแกรมบนเครื่องเยอะๆ และบางครั้งต้องไปใช้เครื่องที่ไม่มีสิทธิ์เป็น Admin เลยยังไม่อยากจะลองเวอร์ชันใหม่

ต่อมา มีข่าวเรื่องความปลอดภัยของ Cordova ตั้งแต่เวอร์ชัน 3.5.0 ลงไป (สำหรับ Android เท่านั้น platform อื่นไม่มีปัญหา) ข่าวนี้ครับ ทำให้ผมต้องตัดสินใจอัพเดทตัวเองไปหาเวอร์ชันล่าสุด

ด้วยความเข้าใจแบบงูๆปลาๆว่า Cordova รุ่นใหม่ๆนี้ออกแบบมาให้รองรับการเปลี่ยนแปลงได้ง่าย คือ สามารถอัพเดทตัวเองได้ เพิ่มลดplugin เพิ่มลด platform ฯลฯ เลยต้องอาศัย web service เป็นหลัก แต่สำหรับคนที่ไม่มีเน็ตตลอดหรือเน็ตเน่าก็น่าจะมีทางออกด้วย เลยออกแบบให้ติดตั้งได้สองวิธีคือ
1. ดาวน์โหลดไปจัดการเอง (แยกเป็น platform ไป เช่น Android, iOS ฯลฯ) การเพิ่ม/ลด/แก้ไข/อัพเดท platform และ plug-in ต้องทำเองหมด (บางอย่างก็ยุ่งยากพอสมควร T_T)
2. ติดตั้งและอัพเดทผ่านเว็บ (เพิ่ม/ลด platform ใน project ได้ตามต้องการ นั่นคือ project เดียวแต่ build ได้หลาย platform) เพิ่ม/ลดและอัพเดท plug-in ได้สะดวก

ขั้นตอนการเตรียมความพร้อม
ทั้งสองวิธีต้องการ Nodejs ครับ ไปดาวน์โหลดได้ที่ http://nodejs.org/download/ บนวินโดวส์มีทั้ง 32 และ 64 bits ในที่นี้เราอยากให้มันเป็น portable ได้มากที่สุด ให้เลือกที่เป็น Windows Binary (node.exe) นะครับ ย้ายไฟล์นี้ไปไว้ในโฟลเดอร์ที่เราเตรียมไว้เช่น D:\mobile\nodejs

ต่อมา ถ้าใครยังไม่มี Android SDK สามารถไปดาวน์โหลด Eclipse ADT Bundle ได้ที่ https://developer.android.com/sdk/index.html เช่นเดียวกันมีเวอร์ชัน 32 และ 64 bits นะครับ จากนั้นให้แตกไฟล์นี้ไว้ใน D:\mobile แล้วเปลี่ยนชื่อโฟลเดอร์ให้ง่ายๆหน่อยเป็น D:\mobile\adt-bundle ประมาณนี้

---------------------------------
ส่วนนี้เป็นตัวเลือกนะครับ จะทำหรือไม่ก็ได้
เพื่อความสมบูรณ์ของ ADT ก็ไปอัพเดทกันซะหน่อยนะครับ ลองเรียกไฟล์ D:\mobile\adt-bundle\SDK Manager.exe ดู

ตัวล่าสุดที่ผมโหลดมามี API level 20 คือ 4.4W (สนับสนุน Android Wear) แต่ก็มี level 21 คือ Android 5.0 Lollipop มาให้ลองแล้ว ในที่นี้เราจะยึดอยู่กับ level 20 เหมือนเดิมครับ ยังไม่ต้องโหลดเพิ่มก็ได้ จากนั้นก็ Install update packages ไปตามเรื่องตามราว (นานพอควร)

Eclipse ที่มีมาให้กับ ADT Bundle นี้เป็นรุ่น Juno ซึ่งยังไม่มี package ด้านการแก้ไฟล์ html เลย เราต้องลงเพิ่มสักหน่อย ลองเรียก eclispe จาก D:\mobile\adt-bundle\eclipse\eclipse.exe ถ้าเจอปัญหา Failed to Create Java Virtual Machine ให้ไปแก้ไขไฟล์ eclipse.ini ลองลดเมมลงโดยแก้บรรทัดสุดท้ายที่ว่า -Xmx1024m เป็น -Xmx512m ดูครับ จากนั้นเมื่อเข้าโปรแกรมได้แล้ว เลือกเมนู Help/Install new software เลือกประมาณดังรูป (รอนานหน่อยครับ)
---------------------------------

ท้ายสุดละ เราจะสร้าง batch file เพื่อกำหนด path ให้โปรแกรมต่างๆสามารถหากันเจอและทำให้เราใช้งานโปรแกรมได้ง่าย ลองสร้างไฟล์ setpath.bat ไว้ใน D:\mobile\ แล้วบันทึกคำสั่งเหล่านี้ลงไป

set ANDROID_HOME=%~dp0adt-bundle\sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%~dp0nodejs

กว่าจะเตรียมเรียบร้อยก็เหงื่อตกพอสมควร ตอนต่อไปเราจะลองวิธีติดตั้ง cordova แบบที่หนึ่งคือ โหลดไปจัดการเองครับ