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

Thursday, November 13, 2014

การเพิ่ม 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

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

Sunday, November 2, 2014

ติดตั้ง 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 น่าจะแสดงผลดังนี้ครับ

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