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

Thursday, November 13, 2014

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

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

Tuesday, October 28, 2014

ติดตั้ง 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