ติดตั้ง 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 แบบที่หนึ่งคือ โหลดไปจัดการเองครับ

jQuery กับการอ่านค่าจาก Radio button

ตัวอย่างการอ่านค่าจาก Radio button ที่ถูกเลือกด้วย jQuery ครับ

โค้ดประมาณนี้ครับ

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="jquery-2.1.1.min.js"></script>
  <script>
   $(document).ready(function(){  
    $("button").on("click",function(){
     var v = $("input[type=radio]:checked").val();
     alert(v);
    });
   });  
  </script>
 </head>

<body>
 <input type="radio" name="sex" value="Male" checked="checked">Male<br/>
 <input type="radio" name="sex" value="Female">Female<br/>
 <button>OK</button>
</body>
</html>

Phonegap / Cordova กับ เสียง

วันนี้ได้ลองแก้ปัญหาการเล่นไฟล์เสียงโดยคลิกที่รูปครับ ซึ่งถ้าเป็นเว็บธรรมดาก็สามารถ link ไฟล์เสียงเข้ากับรูปโดยตรง แต่สำหรับ hybrid app ที่ใช้ phonegap อาจจะต้องใช้โค้ดตามคู่มือดังนี้ http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

ตัวอย่างเช่น

$("#img01").on("tap", function() {
 var myMedia = new Media("/android_asset/www/sound/1.mp3", onSuccess, onError);        
 myMedia.play();
});

// onSuccess Callback
function onSuccess() {
 console.log("playAudio():Audio Success");
}

// onError Callback
function onError(error) {
 alert('code: '    + error.code    + '\n' +
    'message: ' + error.message + '\n');
}

ซึ่ง มีข้อควรระวังดังนี้

1. อย่าลืมอ้างถึง cordova.js เช่น "script src="js/libs/Cordova-2.9.0/cordova-2.9.0.js"
2. ถ้าไฟล์เสียงอยู่บนอินเตอร์เน็ต สามารถใช้ var my_media = new Media("http://abcdef/1.mp3", onSuccess, onError); ได้เลย
3. ถ้าไฟล์เสียงอยู่ในตัว mobile app เอง อย่าลืมอ้างถึงโฟลเดอร์เสียงนั้นแบบเต็มๆ เช่น var my_media = new Media("/android_asset/www/sound/1.mp3", onSuccess, onError);  ซึ่งในกรณีนี้ไฟล์เสียงจะอยู่ใต้โฟลเดอร์ sound และโฟลเดอร์ sound อยู่ใน level เดียวกับไฟล์ index.html ครับ

แต่ถ้าต้องการให้เล่นเสียงแบบต่อเนื่อง คือเมื่อจบแล้วเล่นใหม่เป็นลูปไปเรื่อยๆ

สำหรับ iOS มีคำสั่งให้เลยครับ คือ

myMedia.play({ numberOfLoops: 999 });

แต่ platform อื่น ต้องเขียนโค้ดเองครับ ประมาณนี้

var myMedia = null;
function onDeviceReady(){
 myMedia = new Media("file:///android_asset/www/audio.mp3", onSuccess, onError, onStatus);
 myMedia.play();
}

// onSuccess Callback
function onSuccess() {
 console.log("playAudio():Audio Success");
}

// onError Callback
function onError(error) {
 alert('code: ' + error.code + '\n message: ' + error.message);
}

// onStatus Callback 
function onStatus(status) {
 //if audio stops, plat it again
 if(status==Media.MEDIA_STOPPED) {
  myMedia.play();
 }
}

ข้อมูลอ้างอิง

http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

http://stackoverflow.com/questions/4438822/playing-local-sound-in-phonegap?lq=1
http://ilee.co.uk/looping-audio-with-phonegap/
http://stackoverflow.com/questions/13927316/how-to-loop-a-audio-in-phonegap

เมื่อ ADB ไม่สามารถติดต่อ AVD หรือ Mobile Device ได้

เมื่อเราใช้ Eclipse และสั่งรัน emulator (AVD) ด้วย ADT plugin จนเคยชินด้วยความสะดวกสบาย จนมาวันหนึ่งที่เราต้องการสั่งรัน AVD (Android Virtual Device) โดยไม่มี Eclipse เราจะทำอย่างไร

ก่อนอื่น ต้องรู้ก่อนว่า จะทดสอบโปรแกรมบน AVD นั้น ซึ่งใช้ Eclipse คลิกอย่างเดียว มันมีกระบวนการเบื้องหลังอยู่อย่างไรบ้าง

1. Start ADB (Android Debug Bridge) ตัวนี้ล่ะครับที่ทำให้เราสามารถเชื่อมต่อกับ emulator หรือ device จริงๆได้
2. Start AVD หรือ เสียบสาย USB ที่เชื่อมต่อกับอุปกรณ์
3. เชื่อม ADB กับ AVD หรืออุปกรณ์
4. ตอนนี้ก็สามารถติดตั้ง ทดสอบโปรแกรม หรือจัดการอะไรต่างๆมากมายบน AVD หรืออุปกรณ์ได้แล้ว

 อย่างไรก็ตาม ปัญหาที่มักจะเจอ คือ ขั้นตอนที่ 3 ไม่สามารถสามารถติดต่อ AVD หรือ Mobile Device ได้

วิธีการลองแก้ไข คือ

1. ตรวจสอบให้ชัดเจนว่า AVD หรืออุปกรณ์ได้ทำงานแล้ว (เปิดอยู่) เสียบสาย USB แน่น ลองดึงออกแล้วเปลี่ยนช่องเสียบดู
2. ตรวจสอบว่าได้เปิด USB debugging ใน developer mode แล้ว
3. เปิด command prompt และไปที่โฟลเดอร์ของ Android SDK หาโฟลเดอร์ sdk\platform-tools แล้วพิมพ์คำสั่งว่า "adb devices" ถ้าขึ้นชื่อ AVD หรืออุปกรณ์ และไม่ตามด้วยคำว่า offline แสดงว่าใช้งานได้แล้ว (ถ้าไม่ได้ใช่ eclipse ตัว adb จะไม่ได้ทำงานเองนะครับ ต้องไป start มัน ซึ่งสามารถใช้คำสั่ง adb devices ได้เลย)
4. แต่ถ้ายังมีคำว่า offline ตามท้าย ก็ยังใช้ไม่ได้ ลอง restart adb ใหม่ด้วยคำสั่ง "adb kill-server" (หรือใช้ task manager เพื่อ stop process ชื่อ adb.exe ก็ได้) ตามด้วย "adb devices" อีกครั้ง แล้วดูผล
5. บางครั้งต้องติดตั้ง driver ของอุปกรณ์/มือถือ ชิ้นนั้นก่อน ซึ่งมักจะมีมาพร้อมกับอุปกรณ์เอง (อยู่ในโฟลเดอร์หรือต้องเปลี่ยนโหมดอุปกรณ์ให้เป็นการติดตั้งซอฟต์แวร์ก่อน) หรือสามารถหาดาวน์โหลดได้ทั่วไป เช่น ดูจากที่นี่ครับ
6. หากยังไม่ได้ ลองตรวจสอบว่ามี program หรือ process ใด ที่ใช้ port 5555/5554 ทับกับ adb/AVD หรือไม่ ถ้ามีก็หยุด process นั้น แล้วลองข้อ 3 ใหม่
7. หากยังไม่ได้ ลองลบ AVD นั้น แล้วสร้างขึ้นใหม่ (บางคนไม่ลบ แค่เลือก wipe data ตอน start ก็ใช้งานได้) แล้วลองข้อ 3 ใหม่
8. หากยังไม่ได้อีก บางเว็บแนะนำให้อัพเดท Android SDK แล้วลองข้อ 3 ใหม่
9. หากยังไม่ได้อีก ลองบังคับการเชื่อมต่อผ่านไอพี โดยใช้คำสั่ง "adb connect IP:port" ดู ซึ่งมักจะเป็นกรณีพิเศษ เช่นใช้ emulator ที่ไม่ได้มากับ SDK ตัวอย่างเช่น "adb connect localhost:5555"
10. ถ้ายังไม่ได้ อาจจะต้องลองหาว่าเป็นเฉพาะ emulator ตัวนั้น หรืออุปกรณ์ตัวนั้นหรือเปล่าครับ ซึ่งอาจจะมีวิธีอื่นๆอีก ถ้าหาเจอเพิ่มเติมจะมาอัพเดทต่อไปนะครับ