ลองเล่น Linux LXLE

มีคอมเก่าอยู่ครับ อายุประมาณหกเจ็ดปี อยากลองเอามาเล่นใหม่ โดยกะว่าจะใช้งานทั่วไป ใช้พิมพ์งาน Word คำนวณ Excel เล่นเน็ต ดูหนัง ฟังเพลง เขียนโปรแกรม JAVA ฯลฯ เริ่มจะเยอะ ยกเว้นเล่นเกมส์

สเปกที่มีอยู่ก็ประมาณ
CPU Centrino Duo
RAM 1 GB
HDD 100 GB
USB 2.0 สามารถกำหนด BIOS ให้บูตผ่าน USB ได้ (พึ่งรู้เหมือนกัน)
CD/DVD drive
แบตเสื่อม แต่เสียบสายใช้งานได้อยู่
OS เดิม Windows XP

ของเดิมก็ใช้งานได้อยู่ ติดแค่ว่ามันหน่วงบ้าง เพราะลง Firewall + Antivirus และเกรงว่า XP กำลังจะเป็นเป้าหมายด้านความปลอดภัย

เลยเลือกหา OS ที่จะลงใหม่โดยอยากได้ของฟรี ทำงานได้เร็วๆ ไม่หน่วงมาก แต่ไม่ถึงขั้นกับ UI ดูไม่ได้ พอเข้าไปดูใน distrowatch.com ก็เห็นว่าตามสถิติ Page Hits ที่ผ่านมา 6 เดือน เจ้า Linux Mint ยังคงเป็นผู้นำ ตามมาด้วย Ubuntu แต่ความนิยมไม่ใช่วัตถุประสงค์ของเรานี่นา เราต้องการใช้เครื่องเก่า งั้นก็ไปค้นหาดีกว่าโดยใช้ keyword คือประเภท Old computers ผลลัพธ์ก็คือ

LXLE (อะไรอ่ะ) ได้รับความนิยมมาอันดับ 1 และในเว็บตัวเองคือ www.lxle.net บรรยายตัวเองว่า Revive that old PC! อืม น่าสนใจว่าโม้หรือเปล่า เอามาลองสักหน่อย

ว่าแล้วก็ไปโหลดทันใด ซึ่งบังคับให้โหลดแบบ torrent เท่านั้น (ไม่เข้าใจ เว็บที่ให้เก็บไฟล์ฟรีมีเยอะแยะ) ซึ่งเค้าก็มีเหตุผลของเค้าอยู่แต่ขี้เกียจอ่าน

โหลดมาเสร็จได้ไฟล์ iso ก็จะติดตั้งผ่าน USB drive ขั้นตอนแรกเลย ก็ต้อง format มันใหม่ให้เป็น FAT32 จากนั้นก็ไปโหลดตัวช่วยคือ http://unetbootin.sourceforge.net/ เพื่อคัดลอกไฟล์จาก iso ที่โหลดมาไปยัง USB drive และทำให้มันบูตได้

เมื่อเตรียมการเสร็จ ก็เสียบ USB drive เข้ากับคอมเก่า แล้วเปิดเครื่อง มีเมนูให้เลือกติดตั้ง แล้วก็กำหนดค่าเล็กน้อย ใช้เวลาไม่เกินครึ่งชั่วโมงก็เสร็จ

จากนั้นก็เป็นการลองใช้งาน มีข้อสังเกตเบื้องต้นดังนี้
ข้อดี
-ติดตั้งง่าย หาอุปกรณ์ที่มีอยู่ในเครื่องเช่น Network card และ sound ได้เอง ไม่ต้องลง drivers เพิ่ม
-บูตใช้เวลาไม่ถึง 1 นาทีก็พร้อมใช้งาน
-สวย (เกี่ยวไหมนี่) UI ดี มีหลายโหมดการใช้งานให้เลือกว่าจะเป็นแบบ Windows หรือ Mac ทำนองนี้ มี Wallpaper สวยๆมาให้เป็นร้อยแบบ (มีรูปเมืองไทยด้วย)
-มีตัวคอยบอกการใช้งานทรัพยากรให้เห็น ซึ่งถ้าข้อมูลถูกต้อง ตั้งแต่ใช้งานมาวันกว่าๆ นี้ ยังไม่เคยเห็น CPU หรือ RAM ของระบบถูกใช้ถึง 50% เลย (เพราะเล่นแต่เน็ต กับพิมพ์งาน 555) แต่แทบไม่เห็นการกระตุกหรือช้าจากการใช้งานทั่วไป (ไม่นับเน็ตช้านะครับ)
-มีซอฟต์แวร์ที่จำเป็นมาให้พร้อม เล่นเน็ตมี Firefox ใช้งานเอกสารมี Libre Office ฯลฯ แทบจะไม่ต้องหาลงเอง ถ้าจะลงเองก็มี Software Center ของ lubuntu ให้

ข้อสังเกต (อาจรวมข้อด้อยด้วยมั้ง)
-มีซอฟต์แวร์เกินความจำเป็นแถมมาให้มากไป เช่น เกมส์
-หาไอคอนระบุภาษาไม่เจอ ตอนนี้ก็ยังหาวิธีให้แสดงผลภาษาปัจจุบันไม่ได้ 
-switch ภาษาอังกฤษไทยลำบาก ตอนแรกเซ็ตให้ใช้ Grave ได้ ตอนนี้ทำไม่ได้เฉยเลย สงสัยเรายังไม่เข้าใจพอ เลยต้องใช้ Alt+Left Shift ไปก่อน
-หาได้แล้วครับ แต่ยุ่งยากสักหน่อย อันดับแรกต้องไปที่ System Tools/Synaptic Package Manager แล้วค้นหา iBus จากนั้นติดตั้ง ibus-m17n เพิ่มเติม แล้วไปที่ Preferences/Input Method Switcher แล้วเลือก iBus จากนั้นรีสตาร์ทเครื่อง แล้วไปที่ Preferences/Keyboard Input Methods มันจะขึ้น iBus Preferences ให้เราเลือก Input Method แล้วเลือกภาษาตามรูป

จากนั้น ในหน้า General ให้เลือกดังนี้ สังเกตว่าในส่วนของ Next input method เราจะสามารถกำหนดได้ว่าจะใช้แป้นอะไรในการเลือกภาษาครับ

ก็น่าจะเกิดไอคอนภาษา ด้านขวาล่างของจอครับ
แต่อย่างไรก็ตาม มันก็ยังดูขัดๆอยู่เวลาพิมพ์ เพราะมันจะมีเส้นใต้ขีดเป็นแนวในการพิมพ์ให้ รู้สึกแปลกๆครับ และหากใช้ตัว Grave เป็นตัวเปลี่ยนภาษา มันก็จะติดตัว ` หรือ _ มาด้วย ต้องเลือกตัวอื่นที่กดแล้วไม่เป็นตัวอักษรแทน เช่น Window Key

-ปรับความสว่างหน้าจอไม่ได้ มีซอฟต์แวร์ให้ปรับ แต่ทำแล้วก็ไม่เห็นการเปลี่ยนแปลง ปรับได้นะครับ อยู่ที่ Preferences/Brightness
-ตัว Software Center เหมือนขาดบางอย่างไป เช่น OpendJDK-jdk ก็ไม่มี แล้วจะเขียน JAVA ยังไง ต้องไปติดตั้งผ่าน terminal เอง

ถ้าเจออะไรจะมาเขียนเพิ่มนะครับ

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

ปิดท้ายด้วยรูปหน้าจอครับ

jQuery Mobile กับปัญหาการคลิกเอง (Firing twice / Firing multiple times)

เขียน jQuery Mobile กับ Cordova อยู่ เจอปัญหาปุ่มถูกคลิกเอง คลิกหลายๆครั้งด้วย ทำให้กระโดดไปหน้าอื่นทั้งๆที่ยังไม่ได้คลิก

ไปค้นดูครับ คนเจอปัญหาเยอะแยะ เช่น
http://stackoverflow.com/questions/14411532/all-jquery-mobile-events-firing-twice
http://stackoverflow.com/questions/10794181/jquery-mobile-tap-event-triggered-for-twice

และมีหลายวิธีแก้เหลือเกิน เช่น
1. เปลี่ยน event สำหรับการแตะ จาก tap เป็น click คือให้ใช้

$("#btt").off().on("click",function(){
 //do something
})

2. ใช้ off ปิด event ก่อนหน้า แล้วตามด้วย on เช่น

$("#btt").off().on("tap",function(){
      //off then on
});

หรือ

$("#btt").off("tap").on("tap",function(){
      //off then on
});

3. ย้าย script ไปไว้ระหว่างแท็ก head ไม่ใช่ส่วน body

4. เพิ่ม event.preventDefault(); เช่น

$("#btt").on("tap",function(event){
    event.preventDefault();
    //other codes
});

5. วางลำดับการอ้างถึง JavaScript และแทรก script ต่อไปนี้ลงไป

<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script>
 $(document).on("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.defaultTransition = 'none';
 });   
</script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>  
<script src="js/index.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

และอีกมากมาย

ส่วนตัวผมเองเจอปัญหากับ tap แล้วแค่พอเปลี่ยนเป็น click ก็หาย

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

$(document).on("pagecreate","#pageID",function(){
    //begin code here
});

ส่วนตัวแปรที่ต้องการอัพเดททุกครั้ง เช่น เพื่อการแสดงผล ให้เอาไว้ใน

$(document).on("pagebeforeshow","#pageID",function(){
    //begin code here
});

ไม่ควรเอา event สำหรับปุ่มไว้ใน page event: pagebeforeshow เพราะทุกครั้งที่กลับมาที่หน้านี้ ผมเข้าใจว่าปุ่มมันเหมือนจะถูกกำหนด event สองครั้งซ้อน เมื่อเรากดปุ่มก็เลยเหมือนกดสองครั้ง

ถ้าใครเจอปัญหานี้ ลองวิธีแก้ต่างๆข้างต้นดูครับ

jQuery Mobile กับ Apache Cordova จะวางลำดับกันอย่างไร

เคยสงสัยเหมือนผมไหมครับว่าถ้าเราใช้ jQuery Mobile กับ Apache Cordova จะวางลำดับการเริ่มโปรแกรมอย่างไร เพราะ

jQuery Mobile ให้เริ่มด้วย

$(document).on("pagecreate","#pageID",function(){
    //begin code here
});

แต่ Cordova บอกให้เริ่มด้วย

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    //begin code here
}

เชื่อใครดีล่ะ

ในเน็ตก็มีคนสอบถามกันเยอะครับ เหมือนว่าคำตอบที่เป็นที่ยอมรับอยู่ในนี้ http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together

ถ้าเอาแบบลูกทุ่ง ส่วนตัวผมคิดว่ามีหลักของตัวเองคือ
1. หน้าไหนไม่มีการใช้คุณสมบัติของ Cordova เช่น ไม่ได้ใช้ Cordova events, plugin ก็ไม่ต้อง include ไฟล์ cordova.js, cordova_plugin.js ใช้แบบ jQuery Mobile เลย คือใช้การเริ่มแบบ jQuery

2. หน้าที่ใช้คุณสมบัติของ Cordova ให้  include ไฟล์ cordova.js, cordova_plugin.js และเริ่มแบบนี้

$(document).on("pagecreate","#pageID",function(){
    document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady(){
    //begin code here
}

เป็นการลองแบบคาดการณ์ดูนะครับ ไม่รู้ว่าจะมีปัญหาอะไรที่ยังไม่ทราบไหม

การเพิ่ม plug-in ให้กับ Cordova project

Apache Cordova ตั้งแต่รุ่น 3.0 มา ได้แยกส่วนของ plug-in ออกจากตัวโค้ดหลัก ทำให้โปรแกรมเมอร์ต้องติดตั้ง plug-in แยกต่างหาก ซึ่งก็มีข้อดีและข้อยุ่งยาก ข้อดีที่ผมเห็นก็คือ นักพัฒนาสามารถเลือกที่จะเพิ่ม ลบ อัพเดท plug-in ให้กับโปรเจคของตนเองได้ โดยไม่ต้องมี plug-in ทั้งหมดอยู่ด้วยกันเหมือนแต่ก่อน และทำให้ผู้ที่สนใจพัฒนา plug-in เองสามารถแลกเปลี่ยนและแจกจ่าย plug-in ได้ง่ายขึ้น ผ่านเว็บ http://plugins.cordova.io/

ส่วนข้อยุ่งยากคือ มันไม่สามารถติดตั้ง plug-in เองได้ง่ายๆ จริงแล้ว plug-in หลักๆสามารถไปดาวน์โหลดได้ที่ https://www.apache.org/dist/cordova/plugins/ แต่ผมลองพยายามติดตั้งแล้ว ไม่สำเร็จ ลองไปแกะโค้ดที่ติดตั้งผ่านเครื่องมืออื่น ก็พบว่ายุ่งยากพอสมควร

เลยตัดสินใจกลับมาทำตามคู่มือ
วิธีแรก ถ้าเราติดตั้ง Cordova แบบแรก (คือเลือก platform) ให้ใช้ plugman เข้าช่วย
วิธีที่สอง ถ้าเราติดตั้ง Cordova แบบที่สองคือผ่าน npm ก็ติดตั้ง plug-in ง่ายๆได้เลย

สรุปแล้ว ถ้าติดตั้งแบบเลือก platform ต้องติดตั้ง plugman ต่อ ซึ่งตัวนี้ก็ต้องติดตั้งผ่าน npm อยู่ดี สรุปแล้วยังไงก็ต้องทำกระบวนการติดตั้งแบบวิธีที่สองโดยติดตั้ง npm และ plugman ให้เสร็จก่อน ตามนี้ (ไม่ต้องติดตั้ง cordova ก็ได้)

จากนั้น
กรณีแรก
ไม่ติดตั้ง Cordova แต่ดาวน์โหลดตัว platform มา เช่น Android ก็เปิด command prompt เรียก setpath.bat ที่เคยทำไว้ในบทความก่อนหน้านี้ สมมติว่าโปรเจคเราอยู่ที่ D:\mobile\code\hello

จากนั้นใช้คำสั่งในรูปแบบ
plugman install --platform --project --plugin
เช่น ถ้าต้องการติดตั้ง plugin ชื่อ geolocation สำหรับบอกพิกัดของอุปกรณ์ ก็จะใช้คำสั่ง
plugman install --platform android --project D:\mobile\code\hello --plugin org.apache.cordova.geolocation

ก็เป็นอันเรียบร้อยแล้วครับ

กรณีที่สอง

ติดตั้ง Cordova แล้ว เปิด command prompt เรียก setpath.bat ที่เคยทำไว้ในบทความก่อนหน้านี้ ย้ายไปยังโฟลเดอร์ของโปรเจค เช่น D:\mobile\code\hello แล้วก็ใช้คำสั่งง่ายๆ คือ

cordova plugin add org.apache.cordova.geolocation

ก็เสร็จแล้วครับ

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่สอง: ลองทดสอบโค้ด jQuery Mobile)

ต่อจากตอนที่แล้ว หลังจากสร้าง Cordova Project แบบ multi-platform และได้ทดสอบกับ Android platform แล้ว ตอนนี้เราจะลองทำการเปลี่ยนโค้ด โดยเพิ่ม jQuery Mobile เหมือนกับ ตัวอย่างนี้ กันครับ

ไปที่โปรเจค D:\mobile\code\multi\www แล้วแก้ไขไฟล์ index.html ดังต่อไปนี้

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/jquery.mobile-1.4.4.min.js"></script>
        <script src="cordova.js"></script>
 <script src="js/index.js"></script>
    </head>
 
    <body>
        <div data-role="page" id="pageHome">
            <div data-role="header">
                <h3>Header</h3>
            </div>
            <div data-role="main" class="ui-content">
                <button id="bttOK" class="ui-btn ui-btn-inline">OK</button>
            </div>
            <div data-role="footer">
                <h3>Footer</h3>
            </div>
        </div>       
    </body>
</html>

และแก้ไขไฟล์ index.js ในโฟลเดอร์ js ดังนี้

$(document).on("pagecreate","#pageHome",function(){
 document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady(){
 $("#bttOK").on("tap",function(){
  alert("Hello World!");
 });
}

อย่าลืมคัดลอกไฟล์ jquery และ jquery mobile ทั้ง .js และ .css ไปไว้ยังโฟลเดอร์ js และ css ตามลำดับด้วยครับ

จากนั้นลองทดสอบ run เลยก็ได้ครับ สมมติว่าตอนนี้เราอยู่ที่โฟลเดอร์ของโปรเจค เช่น D:\mobile\code\multi ก็ใช้คำสั่ง

cordova run android

ก็น่าจะได้ผลลัพธ์เหมือนตัวอย่างก่อนหน้านี้เช่นเดียวกัน

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่สอง: ลองสร้างโปรเจค)

ตอนที่ผ่านมาเราติดตั้ง Cordova แบบ multi-platform ซึ่งจะสามารถสร้างโปรเจคได้โดยใช้ Command Line Interface (CLI)

ก่อนอื่นขอลองอธิบายรูปแบบการสร้างโปรเจคของวิธีนี้ก่อน ว่าทำไมมันถึงสนับสนุน multi-platform

หลักการคือเมื่อสร้างโปรเจคด้วย CLI มันจะสร้างโปรเจคกลางๆไว้ ไม่มี platform เลย เราต้องเพิ่ม platform เข้าไปเอง การเพิ่ม platform ก็คือการสำเนาโปรเจคหลักไปเป็นโปรเจคสำหรับ platform นั้นๆ เช่น Android, iOS เป็นต้น

เราเริ่มด้วยการเปิด command prompt แล้วไปที่ D:\mobile แล้วเรียกไฟล์ setpath.bat ที่เคยสร้างไว้ก่อนนี้

ในที่นี้เราจะสร้างโปรเจคไว้ที่ D:\mobile\code ให้อยู่ในโฟลเดอร์ multi และมีชื่อโปรเจคว่า MyMulti จึงพิมพ์ว่า
cordova create D:\mobile\code\multi com.example.multi MyMulti

กระบวนการนี้ต้องต่อเน็ตเพื่อให้ cordova ดาวน์โหลด template มา ใช้เวลาแป๊บนึงครับ ก็จะมีโฟลเดอร์ D:\mobile\code\multi เกิดขึ้น

ต่อไปก็ต้องเพิ่ม platform ที่ต้องการเข้าไปครับ จะกี่ platform ก็ได้แล้วแต่ว่าเครื่องคอมเรารองรับไหม ในที่นี้จะทดสอบเฉพาะ Android ครับ

เพื่อความสะดวก เราจะใช้ command prompt ย้ายไปที่โฟลเดอร์ของโปรเจคที่เราพึ่งสร้างขึ้น โดยพิมพ์ cd D:\mobile\code\multi แล้วพิมพ์
 cordova platform add android
ซึ่งในที่นี้อาจจะเจอข้อผิดพลาดระบุว่า "Error: Please install Android target "android-19"." ทั้งนี้เนื่องจากไฟล์ template ของ Android ถูกกำหนดไว้ที่ level 19 (KitKat) แต่ Android SDK ของเราเป็น level 20 ซึ่งเป็นปัญหาเดียวกับบทความตอนที่ 2 วิธีแก้คือ
1. เรียก SDK Manager เพื่อเพิ่ม API level 19
หรือ
2. แก้ที่เครื่องเราเอง ไปที่ C:\Users\user\.cordova\lib\npm_cache\cordova-android\3.6.4\package\framework แล้วแก้ไขไฟล์ project.properties โดยเปลี่ยนบรรทัด target=android-19 เป็น target=android-20
ในที่นี้เราจะใช้วิธีที่ 2 ครับ

เมื่อแก้ไขไฟล์และบันทึกแล้ว เรียกคำสั่งเดิม คือ
cordova platform add android
อีกครั้งครับ

ในโฟลเดอร์ D:\mobile\code\multi ที่มีโปรเจคที่เราสร้างขึ้น โค้ดหลักจะอยู่ใต้โฟลเดอร์ www ครับ ส่วนโค้ดของแต่ละ platform จะอยู่ในโฟลเดอร์ platforms อีกทีหนึ่ง

ตามคู่มือ หากต้องการแก้ไขไฟล์ให้แก้เฉพาะที่โฟลเดอร์ www เพราะไฟล์จะถูกสำเนาไปให้แต่ละ platform ตอน build โปรเจคโดยอัตโนมัติ

หากเราต้องการ build โปรเจคโดยใช้ CLI สำหรับ Android แล้วเราต้องการ 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 NODE_MODULES=%NODE_PATH%\node_modules
set NPM_CONFIG_PREFIX=%NODE_PATH%
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%;%NODE_MODULES%;%ANT_HOME%\bin

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

จากนั้นไปที่ D:\mobile\code\multi แล้วใช้คำสั่ง
cordova build
ซึ่งจะ build ให้ทุก platform
หรือ ถ้าต้องการ build เฉพาะ Android ให้พิมพ์
cordova build android
ซึ่งขั้นตอนนี้จะเป็นการสำเนาไฟล์จากโฟลเดอร์ www ไปยังโฟลเดอร์ platforms\android\assets\www ซึ่งเป็น Android platform ตามที่เราสั่งด้วย

แล้วถ้าจะ run เพื่อดูผลลัพธ์
สำหรับ emulator เช่น AVD ให้ใช้
cordova emulate android
สำหรับ เครื่องจริง หรือ emulator เช่น genymotion ให้ใช้
cordova run android

หมายเหตุ คำสั่ง run จะ build โปรเจคใหม่เสมอ ถ้าไม่ต้องการ build แต่ต้องการรันเฉยๆ ให้ใช้คำสั่ง
cordova run android -- --nobuild

ตอนต่อไป เราจะลองเพิ่ม jQuery mobile ครับ

อ้างอิง
http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

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

คราวที่แล้วเราติดตั้ง Cordova แบบ platform-centered โดยเน้น Android คราวนี้เราจะมาลองติดตั้งแบบ Cross-platform โดยใช้ command-line interface (CLI) กันครับ

ก่อนอื่น สมมติว่าเรามีโฟลเดอร์ D:\mobile และในนั้นมี D:\mobile\adt-bundle D:\mobile\nodejs แล้วเหมือนบทความแรกนะครับ

เพื่อที่จะติดตั้ง module อื่นๆของ nodejs ได้ เราจะใช้ module ที่ชื่อว่า npm (Node Package Manager) ซึ่งถ้าติดตั้ง nodejs โดยใช้ installer ก็จะมีตัวนี้มาให้โดยอัตโนมัติ แต่เนื่องจากเราพยายามจะทำให้มัน portable ให้มากที่สุด เราจะดาวน์โหลดมาติดตั้งเองจาก http://nodejs.org/dist/npm/ เลือกไฟล์ zip เวอร์ชันล่าสุดก็แล้วกันนะครับ สมมติว่าชื่อ npm-4.1.12.zip

จากนั้นก็คัดลอกไฟล์นี้ไปไว้ยัง D:\mobile\nodejs แล้วแตกไฟล์นี้ออกมาเลยครับ ก็จะมีไฟล์ใหม่คือ npm.cmd และ โฟลเดอร์ node_modules ขึ้นครับ

ปกติ npm จะสร้าง cache ไว้ที่ C:\Users\username\AppData\Roaming แต่เมื่อเราต้องการให้มันเป็น portable ได้มากขึ้น เราจะกำหนด cache folder ใหม่ดังนี้
- สร้างโฟลเดอร์ชื่อ D:\mobile\nodejs\node_modules\npm\npm-cache
- ไปที่ command prompt แล้วย้ายไปที่ D:\mobile พิมพ์คำสั่ง npm config set cache D:\mobile\nodejs\node_modules\npm\npm-cache --global แล้วกด Enter (คำสั่งนี้ต้องเรียกใช้ทุกครั้งก่อนติดตั้ง module ใหม่ โดยใช้ npm) อย่าพึ่งปิด command prompt นี้นะครับ

แก้ไขไฟล์ D:\mobile\setpath.bat ที่เคยทำไว้ในบทความแรกดังนี้

:: set Android home and path, Nodejs path
set ANDROID_HOME=%~dp0adt-bundle\sdk
set NODE_PATH=%~dp0nodejs
set NODE_MODULES=%NODE_PATH%\node_modules
set NPM_CONFIG_PREFIX=%NODE_PATH%
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\build-tools;%NODE_PATH%;%NODE_MODULES%

กลับไปที่ command prompt ที่เปิดค้างไว้ แล้วเรียก setpath.bat

ตอนนี้เราพร้อมที่จะติดตั้ง cordova แล้วครับ ที่ command prompt ใช้คำสั่ง npm install -g cordova
ซึ่ง -g หมายถึงให้ติดตั้งแบบ global ครับ การติดตั้งต้องใช้เน็ต และใช้เวลาพอสมควรครับ ตอนนี้เราพร้อมที่จะใช้งาน cordova เพื่อสร้าง project ในแพลตฟอร์มต่างๆแล้วครับ

ขั้นตอนเสริม (ไม่จำเป็นก็ได้)
เราสามารถติดตั้ง module เพิ่มเติมชื่อ plugman ได้ครับ โมดูลนี้จะช่วยในการติดตั้ง plug-in ต่างๆให้กับ cordova project ในกรณีที่เราใช้กระบวนการติดตั้งแบบแรก (platform-centered)
หากจะติดตั้ง plugman ให้ใช้คำสั่งใน command prompt (ถ้าเปิดใหม่อย่าลืม set npm cache ด้วยนะครับ) ดังนี้
npm install -g plugman
เช่นเดิมครับ ต้องการติดตั้งผ่านเน็ตและใช้เวลาพอควร

ตอนต่อไปจะทำการสร้าง cordova project สำหรับ multi-platform ต่อไปครับ

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่หนึ่ง: ลองทดสอบโค้ด jQuery Mobile)

ตอนก่อนหน้านี้เราติดตั้ง Apache Cordova และทำการสร้าง Android project ไปแล้ว คราวนี้เราจะมาลองแก้ไขสักนิดเพื่อให้โปรแกรมเราใช้กับ jQuery Mobile ได้

ก่อนอื่นใช้ Eclipse เปิดโปรเจคที่เราสร้างขึ้นเดิมที่ชื่อ HelloWorld

เลือกโฟลเดอร์ assets/www

คัดลอกไฟล์ jQuery, jQuery mobile มาไว้ที่ไดเรกทอรี js และ ไฟล์ css มาไว้ที่ไดเรกทอรี css และสามารถลบไฟล์บางส่วนที่ไม่ต้องการออก จนได้ประมาณดังรูป

แก้ไขไฟล์ index.html ดังต่อไปนี้

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/jquery.mobile-1.4.4.min.js"></script>
        <script src="cordova.js"></script>
  <script src="js/index.js"></script>
    </head>
 
    <body>
        <div data-role="page" id="pageHome">
            <div data-role="header">
                <h3>Header</h3>
            </div>
            <div data-role="main" class="ui-content">
                <button id="bttOK" class="ui-btn ui-btn-inline">OK</button>
            </div>
            <div data-role="footer">
                <h3>Footer</h3>
            </div>
        </div>
    </body>
</html>

แก้ไขไฟล์ index.js ในโฟลเดอร์ js ดังนี้

$(document).on("pagecreate","#pageHome",function(){
 document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady(){
 $("#bttOK").on("tap",function(){
  alert("Hello World!");
 });
}

เชื่อมต่อกับอุปกรณ์ หรือ emulator แล้วคลิกขวาที่ project เลือก Run as android application เพื่อดูผลลัพธ์ ซึ่งน่าจะได้ตามรูปครับ

เมื่อคลิกที่ปุ่ม OK น่าจะแสดงผลดังนี้ครับ

ในส่วนที่เหลือเราก็สามารถแก้ไขโค้ดได้ตามสะดวกแล้วครับ