ติดตั้งและพัฒนา Android app โดยใช้ Cordova บน Windows และ Netbeans

บทความนี้จะสมมุติว่าคุณได้ติดตั้ง Netbeans แล้วนะครับ หากยังไม่ติดตั้งขอให้ไปดาวน์โหลดมาติดตั้งก่อน ที่ http://netbeans.org

ติดตั้ง Java

ขั้นตอนนี้หากคุณได้ติดตั้งไปแล้ว ให้ตรวจสอบอีกทีว่าได้เพิ่ม Variable ของ Windows ที่ชื่อ JAVA_HOME หรือยังนะครับ

1. ดาวน์โหลด Java JDK
2. ดำเนินการติดตั้งโดยอ่านและทำตามคำแนะนำที่หน้าจอ

เพิ่มค่า Variable ของ Windows

1. คลิกขวาที่ไอคอน Computer ที่หน้าจอ
2. เลือก Properties
3. คลิกที่ Advanced system settings
4. คลิกที่ Environment variables
5. ไม่ว่าจะเพิ่มในส่วน User variables หรือ System variables ส่วนใดก็ได้ ให้ตรวจสอบดูว่ามีค่า Varaible ที่ชื่อ JAVA_HOME หรือไม่ หากมีแล้วให้ข้ามขั้นตอนนี้ไปได้เลย หากยังไม่มีให้ดำเนินการขั้นตอนต่อไป
6. คลิกที่ New
7. Variable name ให้ใส่ JAVA_HOME ส่วน Variable value ให้ใส่ตำแหน่งไปยังโฟลเดอร์ที่ติดตั้ง Java เช่น C:\Program Files\Java\jdk1.8.0_11
8. กด OK ทั้งหมด

---

ติดตั้ง Android SDK

1. ดาวน์โหลด Android SDK โดยเลือกที่ GET THE SDK FOR AN EXISTING IDE
2. ติดตั้งโดยอ่านและทำตามคำแนะนำที่หน้าจอ
3. เปิด SDK Manager จาก start menu
4. ติ๊กเลือก Package ที่ต้องการแล้วกด Install จากนั้นรอจน Install เสร็จค่อยดำเนินการขั้นตอนต่อไป

เพิ่มค่า Variable ของ Windows

1. ค้นหาตำแหน่งที่คุณติดตั้ง Android SDK เช่น C:\Users\[my-pc-username]\AppData\Local\Android\android-sdk โดย [my-pc-username] คือชื่อ username ในเครื่องของคุณ. ทั้งนี้ตำแหน่งนี้อาจถูกติดตั้งใน Program files ก็ได้ กรุณาตรวจสอบอย่างละเอียดก่อนดำเนินการขั้นต่อไป
2. คลิกขวาที่ไอคอน Computer ที่หน้าจอ
3. เลือก Properties
4. คลิกที่ Advanced system settings
5. คลิกที่ Environment variables
6. สำรวจที่ Variable ที่ชื่อ Path จากทั้งสองที่ (User, System) หากไม่มีตำแหน่งโฟลเดอร์ไปยัง platform-tools และ tools ให้เพิ่มเข้าไปดังนี้
   1. ใส่เครื่องหมาย ; ต่อท้ายจากรายการที่มีอยู่
   2. ใส่ตำแหน่งโฟลเดอร์ไปยัง platform-tools เช่น C:\Users\[my-pc-username]\AppData\Local\Android\android-sdk\platform-tools
   3. ใส่ตำแหน่งโฟลเดอร์ไปยัง tools เช่น C:\Users\[my-pc-username]\AppData\Local\Android\android-sdk\tools
7. กด OK ทั้งหมด

จากขั้นตอนด้านบนนี้จะทำให้คุณสามารถเรียกใช้คำสั่ง adb ได้จากทุกๆที่ครับ

กำหนดตำแหน่ง Android SDK Location ให้กับ Netbeans

1. เปิด Netbeans
2. คลิกที่เมนู Tools > Options
3. คลิกที่แท็บ Miscellaneous
4. คลิกที่แท็บย่อย Mobile platforms
5. Browse หรือกำหนดตำแหน่งที่คุณติดตั้ง Android SDK เช่น C:\Users\[my-pc-username]\AppData\Local\Android\android-sdk
6. กด OK เพื่อบันทึกค่า

---

ติดตั้ง Ant

Ant คือเครื่องมือที่จะช่วยในการ build project ในแบบ --release ของจริงออกมานะครับ ดาวน์โหลดได้ที่ http://ant.apache.org/bindownload.cgi หากคุณจะใช้แค่ Netbeans ในการ build เพื่อทดสอบรันใน emulator, device ก็ไม่ต้องลง ให้ข้ามขั้นนี้ไปเลย. แต่หากคุณจะ build งานจริงๆออกมา คุณไม่สามารถใช้ Netbeans ทำได้ (อาจได้นะ แต่ผมหาไม่เจอแฮะ) คุณต้องสั่ง build ผ่านคำสั่ง cordova build android --release ซึ่งหากทำไปโดยไม่ได้ติดตั้ง Ant มันจะแจ้ง error กันเต็มหน้าเลยล่ะครับ.

1. แตกไฟล์ในซิปออก แล้ววางไว้ใน folder เช่น C:\apache-ant

เพิ่มค่า Variable ของ Windows

1. คลิกขวาที่ไอคอน Computer ที่หน้าจอ
2. คลิกที่ Advanced system settings
3. คลิกที่ Environment variables
4. สำรวจที่ Variable ที่ชื่อ Path จากทั้งสองที่ (User, System) หากไม่มีตำแหน่งโฟลเดอร์ไปยัง apache-ant ให้เพิ่มเข้าไปดังนี้
5. ใส่เครื่องหมาย ; ต่อท้ายจากรายการที่มีอยู่
6. ใส่ตำแหน่งโฟลเดอร์ไปยัง C:\apache-ant;
7. กด OK ทั้งหมด

---

ติดตั้ง Cordova

Cordova คือระบบที่ช่วยสร้าง Mobile app จาก HTML, CSS, JavaScript โดยสามารถสร้างได้ข้ามระบบไม่ว่าจะ Android, IOS, Windows. ทั้งนี้ก่อนติดตั้ง Cordova หากคุณได้ติดตั้ง Node.js ไว้แล้ว ผมแนะนำให้ติดตั้งตามคำสั่งจะง่ายกว่า

ติดตั้งโดยคำสั่งจาก Node.js

1. เปิด Command prompt ขึ้นมา
2. พิมพ์คำสั่ง npm install -g cordova ขั้นตอนนี้จะนานสักนิดหนึ่ง
3. รอจนกระบวนการติดตั้งสำเร็จจึงดำเนินการขั้นต่อไป

หากคุณจะติดตั้งโดยไม่ผ่าน Node.js ขอให้ทำการดาวน์โหลดจากลิ้งค์ Cordova ด้านบนและแตกไฟล์ต่างๆด้วยตนเอง

---

ทดสอบการทำงาน

ในขั้นต่อไปหลังติดตั้งต่างๆครบแล้ว ให้ทำการทดสอบการทำงาน โดยจะดำเนินการตั้งแต่เริ่มต้นดังต่อไปนี้

สร้าง Android device

1. เปิด AVD Manager ขึ้นมา
2. ที่แท็บ Andriod Virtual Devices ให้คลิกที่ปุ่ม Create...
3. กำหนดชื่อ AVD Name ให้เข้าใจได้ จากนั้นเลือก Device ตามต้องการ
4. Target ที่แนะนำคือ Google API - API Level 16
5. ติ๊ก Hardware keyboard present เพื่อใช้คีย์บอร์ดจากเครื่อง PC
6. เลือก No skin
7. กำหนด Camera หน้าและหลังตามต้องการ
8. Memory RAM กำหนดไม่เกิน 768 (แนะนำที่ 700) และ VM Heap แนะนำที่ 128
9. Internal Storage กำหนดที่ 1000 Mib หรือมากกว่านี้ตามต้องการ
10. SD Card กำหนดที่ 500 Mib หรือมากกว่านี้ตามต้องการ
11. ติ๊ก Use Host GPU เพื่อให้ระบบทำงานได้ลื่นและเร็วขึ้น
12. กด OK เพื่อบันทึก

รัน Android device หรือ Android emulator

1. เปิด AVD Manager ขึ้นมา
2. คลิกเลือก Android device ที่เราได้สร้างไว้แล้ว
3. คลิกที่ปุ่ม Start...
4. จะขึ้นหน้าต่างที่มีตัวอักษร android อยู่สักครู่ (ความนานแต่ละเครื่องจะต่างกัน บางเครื่องนานมาก บางเครื่องนานไม่มาก แต่นาน)
5. เมื่อโหลดสำเร็จจะเข้าหน้าจอ Android ครับ

หน้าตาเมื่อโหลด Android emulator เสร็จแล้ว

สร้าง Android project ใน Netbeans

1. เปิดโปรแกรม Netbeans
2. กดปุ่ม New Project หรือคีย์บอร์ด Ctrl+Shift+N
3. Categories: เลือก HTML 5 Projects: เลือก Cordova Application แล้วกด Next
4. กำหนดตำแหน่งและชื่อโปรเจ็คให้เรียบร้อย แล้วกด Next
5. Site Template ให้เลือก Cordova Hello World แล้วกด Next 2 ครั้ง โดยจะข้ามขั้นเลือก JavaScripts File ไป
6. กำหนด Application ID และ Application Name แล้วกด Finish

ทดลองรัน app ใน Android emulator

ถึงขั้นตอนนี้ระบบจะเปิดหน้า index.html มาให้เรา หากไม่เปิดให้เราไปเปิดด้วยตัวเองนะครับ.

เปิด Android emulator ที่สร้างไว้ ถ้ายังไม่ได้เปิด

ที่ปุ่มเมนูด้านบน กดลูกศรลงแล้วเลือก Cordova (Android Emulator) (อย่าเลือกผิดนะครับ) จากนั้นกดปุ่มสามเหลี่ยมสีเขียว (Run Project).

Netbeans จะทำการประมวลผลสักครู่แล้วจะเปิดหน้าจอ Android emulator ขึ้นมา. ระบบจะรันแอพ Hello World นี้ทันที ซึ่งถือว่าสำเร็จในการติดตั้ง.

จากนี้ถือว่าคุณพร้อมแล้วที่จะเริ่มพัฒนาแอพบนมือถือครับ ขอให้โชคดี.