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

ช่วงนี้ Mobile Application กำลังมาแรง เค้าว่ากันว่าจะสร้าง app พวกนี้ น่าจะทำได้ประมาณ 3 แบบคือ
1. Native app เขียนโค้ดโดยตรงสำหรับ Android iOS WP8 ไปเลย
2. Web app เขียนเป็นเว็บโดยใช้ HTML+CSS+JavaScript ไง เร็วดี
3. Hybrid app เขียนเแบบ 2 แต่ wrap ให้เป็นแบบ 1 โดยใช้เครื่องมือช่วยเช่น Phonegap

ข้อดีข้อเสียก็ว่ากันไป แต่บทความนี้เราจะลองพูดถึงแบบที่ 3 ดูครับ โดยเน้นไปที่ Android อย่างไรก็ตาม วิธีนี้ถ้าใช้ phonegap อย่าลืมไปเช็ค Platform Support ก่อนที่ http://docs.phonegap.com/en/edge/guide_support_index.md.html#Platform%20Support ว่ามันทำได้อย่างที่เราต้องการหรือเปล่า

สิ่งที่เราต้องการในบทความนี้
1. phonegap (http://phonegap.com/install/) ผมลองเวอร์ชัน 3 แล้วงงพอควร แนะนำให้ใช้ 2.9.0 ซึ่งดาวน์โหลดได้โดยตรงที่ https://github.com/phonegap/phonegap/archive/2.9.0.zip
2. jquery Mobile เอามาเขียนเว็บให้ดูหน้าตาเข้าที ให้ touch ได้ swipe ได้นะ (http://jquerymobile.com/)
3. Genymotion ตัวนี้จะใช้หรือไม่ใช่ก็ได้ เอาไว้เป็น android emulator เพราะตัวที่มากับ ADT Bundle นั้นช้าที่สุดในจักรวาลลลลล ตัวนี้เร็วกว่าแบบเทียบกันไม่ได้ เหมาะกับโปรแกรมเมอร์ที่จะทดสอบโค้ดบน android emulator (http://genymotion.com/)
4. ADT Bundle สำหรับเขียนโค้ด build และรัน app (http://developer.android.com/sdk/installing/bundle.html)
5. ถ้าอยากลอง ตัวนี้จะใช้หรือไม่ก็ได้ Netbeans 7.4 Beta (http://download.netbeans.org/netbeans/7.4/beta/) ย้ำว่าควรเป็นตัวนี้เท่านั้น ตัวเต็มเวอร์ชัน 7.4 ดันเป็นตัวที่ใช้กับ phonegap ยากซะงั้น เลือกโหลดที่เป็น php เวอร์ชันก็พอครับ

วิธีการใช้งาน (เลือกเอาครับว่าจะใช้แบบไหน)
แบบที่ 1 ใช้ Netbeans
กลายเป็นว่า Netbeans เป็น IDE ที่สนับสนุนการใช้ phonegap เต็มที่ สำเร็จรูปมากกกก แต่ดันทำไม่สุด เวอร์ชัน Beta สามารถกำหนดว่า phonegap อยู่ที่ไดเรกทอรีไหน แต่เวอร์ชันจริงมันกลับไปเช็ค path การติดตั้ง phonegap ซึ่งผมไม่ต้องการ ผมอยากได้ IDE ที่มันเป็น portable ก๊อบใส่ USB drive ได้ง่ายๆ เลยถอยมาใช้ตัว Beta ดู
ปล. แนะนำให้โหลด Netbeans php ตัว zip มาใช้แบบไม่ต้องติดตั้ง
ปล.2 เว็บดาวน์โหลด Netbeans มันประหลาดมาก โหลดแล้วหลุดตลอดจนเซ็ง

หลังจากดาวน์โหลด แตกไฟล์ต่างๆเรียบร้อยแล้วก็เปิด Netbeans เลยครับ
-เลือกเมนู Tools/Options แล้วกำหนดไดเรกทอรีต่างๆ เช่น

-สร้าง New Project มันจะมีให้เลือก Phonegap Application หรือ Cordova Application ให้เลย พร้อมทั้งสำเนาไฟล์ต่างๆมาหมด สุดยอดดดด
-ลองรันรูปแบบต่างๆได้โดย

-สามารถ Build เป็น Native app ผ่าน phonegap แบบง่ายๆ โดยคลิกขวาที่ Project แล้วเลือก Build ก็จะได้ไฟล์ apk ที่เป็น debug เวอร์ชันในไดเรกทอรีชื่อ platforms/android/bin

เห็นไหมครับ ง่ายกว่านี้ไม่มีแล้ว แต่ๆๆๆๆ มันไม่สามารถเลือก emulator ตัวอื่น เช่นจาก genymotion ได้ครับ ต้อง build ออกมาก่อนเป็นไฟล์ apk แล้วใช้ adb ติดตั้งไปบน emulator ด้วยคำสั่งเช่น adb install -r xxx.apk ครับ รวมถึงมีข้อจำกัดอีกอย่างคือไฟล์ apk จะเป็น debug เวอร์ชันเท่านั้น ถ้าจะทำเป็น release หรือ sign เวอร์ชันก็จะมีขั้นตอนอีก

แบบที่ 2 ผ่าน Eclipse
อ้างอิงจากที่นี่เลยครับ http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html
ทำตามเค้าเป๊ะ ขั้นตอนเยอะพอสมควร จนถึงขั้นตอนการกำหนด user permission หลังจากนั้นก็ไม่จำเป็นแล้วมั้ง
อย่าลืมก๊อบไดเรกทอรีของ jquery mobile ไปให้ครบด้วย
ตอนกำหนดสิทธิ์ในไฟล์ AndroidManifest.xml ถ้าไม่ได้ใช้อะไร ก็กำหนดแค่
uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"
ตัวเดียวก่อน ส่วนจะต้องกำหนด permission อะไรบ้าง ขึ้นอยู่กับ module ที่ใช้ ซึ่งสามารถอ้างอิงได้จากคู่มือ http://docs.phonegap.com/en/2.9.0/index.html ในส่วนของ API reference ครับ

มีหลายอย่างที่ยังงงๆอยู่ครับ จะลองไปเล่นดูเพิ่มเติม หากมีวิธีที่ง่ายขึ้นจะมาอัพเดทอีกทีครับ

วันนี้ลองหาโค้ด JavaScript Gauge เจอสองเว็บที่น่าสนใจครับ
http://justgage.com/

แสดงผลเป็นเวกเตอร์ทำให้รูปชัดเจนแม้ย่อหรือขยาย ดูแล้วเข้าใจง่าย แต่ยังมีข้อจำกัดหลายอย่างที่กำลังพัฒนาอยู่ เวอร์ชันที่เป็น demo อยู่มีฟังก์ชันที่น่าสนใจมาก http://justgage.com/demos/

ตัวอย่างโค้ดโดยใช้เวอร์ชันที่กำลังพัฒนาอยู่ครับ ดาวน์โหลดได้ที่ http://justgage.com/justgage.js

<!doctype html>
<html>
<head>
 <title>Auto-adjust</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
 <script src="raphael.2.1.0.min.js"></script>
 <script src="justgage.js"></script>
 <script>   
   window.onload = function(){
  var g1 = new JustGage({
    id: "g1", 
    value: 150, 
    min: 0,
    max: 200,
    title: "PPM10",
    label: "ug/m3",
    customSectors: [{
     color : "#00ff00",
     lo : 0,
     hi : 120
   }, {
     color : "#ff0000",
     lo : 121,
     hi : 300
    }]
  });
   };
 </script>
</head>

<body>
 <div id="g1" style="width:200px; height:160px; display:inline-block;"></div>
</body>
</html>

และอีกตัวหนึ่งครับ
https://github.com/Mikhus/canv-gauge

ตัวนี้สามารถกำหนดค่าได้ค่อนข้างมาก และสามารถระบุค่าเป็นแบบ tag ของ html หรือเขียนเป็นโค้ดของ JavaScript ก็ได้

ตัวอย่างโค้ดแบบ html

<!doctype html>
<html>
<head>
 <title>Canv-gauge</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
 <script src="gauge.min.js"></script>
</head>

<body>
 <canvas width="200" height="200"
  data-type="canv-gauge"
  data-title="PPM10"
  data-value="100"
  data-units="ug/m3"
  data-max-value="300"
  data-major-ticks="0 100 200 300"
  data-highlights="0 120 #0f0, 120 300 #f00"
 ></canvas>
</body>
</html>

ลองเลือกใช้กันดูครับ

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

Wednesday, October 23, 2013

Phonegap + jQuery Mobile + Android

Saturday, October 12, 2013

JavaScript Gauge