บันทึกเล็กๆของผ้มมม...

Tuesday, October 28, 2014

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

Sunday, April 13, 2014

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>

Friday, March 28, 2014

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');
}

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

อย่าลืมอ้างถึง cordova.js เช่น "script src="js/libs/Cordova-2.9.0/cordova-2.9.0.js"
ถ้าไฟล์เสียงอยู่บนอินเตอร์เน็ต สามารถใช้ var my_media = new Media("http://abcdef/1.mp3", onSuccess, onError); ได้เลย
ถ้าไฟล์เสียงอยู่ในตัว 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

Sunday, December 29, 2013

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

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

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

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

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

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

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

Monday, December 23, 2013

Fast Android Emulator

จากการที่ได้เขียนโปรแกรมบน Android และต้องทดสอบกับ Emulator คำถามนึงที่เกือบทุกคนจะถามเหมือนกันคือ ทำไม Emulator มันถึงช้าได้ขนาดนี้ เราลองมาหาทางเลือกอื่นๆ สำหรับเพิ่มความเร็วให้ Android Emulator กันดีกว่าครับ

วิธีแรก (ง่ายสุด)
ใช้ genymotion [1] ดาวน์โหลด ติดตั้ง ใช้งานได้เลย
ข้อดี

ใช้งานง่าย
มีแบบฟรีและแบบเสียค่าใช้จ่าย
สามารถจำลอง sensor แบบต่างๆได้ เช่น GPS / Screen Rotation / Battery / Gyroscope ฯลฯ
มี plugin ให้กับ eclipse และ android studio สามารถเรียก emulator ได้จากใน IDE และรันโปรแกรมได้โดยตรง

ข้อจำกัดเล็กน้อย

ต้องสมัครเป็นสมาชิก (ฟรี)
ต้องดาวน์โหลดและติดตั้ง emulator ใหม่ ถ้าต้องการใช้งานในเครื่องอื่นๆเพิ่มเติม

วิธีที่สอง

ติดตั้ง ORACLE VirtualBox และ AndroVM ซึ่งจะมีขั้นตอนพอสมควรดังนี้

1. ดาวน์โหลดและติดตั้ง VirtualBox [2] ซึ่งถ้าต้องการใช้แบบ portable สามารถดาวน์โหลดตัวช่วยคือ Portable VirtualBox [3]

หมายเหตุ ตัว genymotion ก็ต้องใช้ VirtualBox เหมือนกัน แต่มันมีเวอร์ชัน bundle คือผนวกมาให้กับตอนดาวน์โหลดเลย

2. ดาวน์โหลด AndroVM [4] (ซึ่งความจริงก็คือต้นตำรับของ genymotion นั่นแหละ) จะได้ไฟล์ .ova มา ซึ่งแน่นอนว่าจะไม่ได้อัพเดทแล้ว

หมายเหตุ ตอนดาวน์โหลด ถ้ามี t หมายถึง tablet ส่วน p หมายถึง phone ครับ หาก

ใครจะใช้ไฟล์ ova ของ genymotion ก็ได้ ไปหากันเอาเองนะครับ

3. รัน VirtualBox จะได้หน้าตาแบบนี้ครับ

4. เลือกเมนู File/Import Appliance แล้วเลือกไฟล์ ova ที่ดาวน์โหลดมาจาก AndroVM คลิก Next และ Import

5. จะเกิด VM ใหม่ในแถบด้านซ้ายมือดังรูป

ตอนนี้ถ้าลองคลิก Start ก็จะสามารถเห็น Emulator แล้วครับ

อย่างไรก็ตาม Emulator ที่มีตอนนี้ จะยังไม่สามารถใช้งานกับ adb ได้ครับ เพราะมันไม่รู้จักกัน เราต้องเชื่อม emulator กับ adb เข้าด้วยกันก่อน เพื่อให้รันหรือติดตั้งโปรแกรมได้

6. กลับไปที่หน้า VirtualBox จากนั้นให้คลิกที่ปุ่ม Settings แล้วเลือกเมนู Network

ในหัวข้อ Attached to: ถ้าเลือกแบบ Bridged Adapter แล้วมีรายการชื่อ network card โผล่มาให้ ก็ให้เลือกแบบนี้

ถ้าไม่มีรายชื่อ network card โผล่มา ก็ต้องใช้รูปแบบอื่น เช่นในที่นี้จะใช้ NAT

จากนั้นเลือกปุ่ม Port Forwarding แล้วคลิกปุ่มสีเขียวขวามือ เพื่อสร้าง rule ใหม่ และกรอกข้อมูลตามนี้

7. จากนั้นให้ Start Emulator
8. ไปโฟลเดอร์ที่มี adb อยู่ ถ้าใครดาวน์โหลด adt bundle [5] มา ก็จะอยู่ในโฟลเดอร์ \adt-bundle\sdk\platform-tools
9. เปิดหน้าต่าง command line แล้วพิมพ์ว่า adb connect localhost

สังเกตว่าถ้าสำเร็จ จะเกิดคำว่า connected to localhost:5555

10. สามารถรันหรือติดตั้งโปรแกรม android ได้แล้วครับ

11. ถ้าจะติดตั้งไฟล์ apk เพื่อทดสอบ จะให้ง่าย ให้ย้ายไฟล์ apk ไปไว้ในโฟลเดอร์เดียวกับ adb แล้วใช้คำสั่ง
adb install xxx.apk

เมื่อติดตั้งสำเร็จ ก็จะเกิด icon ของโปรแกรมในกลุ่มของ application ให้ทดสอบได้ครับ

12. ถ้าจะรันผ่าน eclipse หรือ android studio ก็ทำได้เช่นกัน เพราะมันจะเห็น emulator ที่เราใช้งานโดยอัตโนมัติ

หมายเหตุ

ขั้นตอนการเชื่อมต่อระหว่าง adb กับ emulator ต้องทำเองทุกครั้งเมื่อเริ่ม emulator ใหม่

ข้อมูลอ้างอิง
[1] http://www.genymotion.com/
[2] https://www.virtualbox.org/
[3] http://www.vbox.me/
[4] http://androvm.org/blog/download/
[5] http://developer.android.com/sdk/index.html
[6] http://therockncoder.blogspot.com/2013/06/using-virtualbox-android-emulator.html
[7] http://stackoverflow.com/questions/6751911/android-emulation-on-virtual-box-in-eclipse