Tuesday, October 28, 2014

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (ภาค Intro)

ผมเคยใช้งาน Apache Cordova 2.9 มาก่อน ตอนนั้นติดตั้งง่ายมากๆ แค่ดาวน์โหลดไฟล์ zip มา แล้วใช้ NetBeans 7.4 beta (เป็นเวอร์ชันเดียวที่ใช้กับตัว Cordova 2.9 ได้ง่ายๆเลย) แทบไม่ต้องตั้งค่าอะไร

พอ Cordova ขึ้นหลัก 3 (ปัจจุบันเวอร์ชันล่าสุดที่เขียนคือ 4.0.0) ผมก็อยากลองเหลือเกิน แต่ติดด้วยมันต้องลงนั่นลงนี่ลงโน่น ซึ่งความจริงมันก็ไม่ซับซ้อนเกินไป แต่ด้วยความที่ไม่ชอบจะไปลงโปรแกรมบนเครื่องเยอะๆ และบางครั้งต้องไปใช้เครื่องที่ไม่มีสิทธิ์เป็น Admin เลยยังไม่อยากจะลองเวอร์ชันใหม่

ต่อมา มีข่าวเรื่องความปลอดภัยของ Cordova ตั้งแต่เวอร์ชัน 3.5.0 ลงไป (สำหรับ Android เท่านั้น platform อื่นไม่มีปัญหา) ข่าวนี้ครับ ทำให้ผมต้องตัดสินใจอัพเดทตัวเองไปหาเวอร์ชันล่าสุด

ด้วยความเข้าใจแบบงูๆปลาๆว่า Cordova รุ่นใหม่ๆนี้ออกแบบมาให้รองรับการเปลี่ยนแปลงได้ง่าย คือ สามารถอัพเดทตัวเองได้ เพิ่มลดplugin เพิ่มลด platform ฯลฯ เลยต้องอาศัย web service เป็นหลัก แต่สำหรับคนที่ไม่มีเน็ตตลอดหรือเน็ตเน่าก็น่าจะมีทางออกด้วย เลยออกแบบให้ติดตั้งได้สองวิธีคือ
1. ดาวน์โหลดไปจัดการเอง (แยกเป็น platform ไป เช่น Android, iOS ฯลฯ) การเพิ่ม/ลด/แก้ไข/อัพเดท platform และ plug-in ต้องทำเองหมด (บางอย่างก็ยุ่งยากพอสมควร T_T)
2. ติดตั้งและอัพเดทผ่านเว็บ (เพิ่ม/ลด platform ใน project ได้ตามต้องการ นั่นคือ project เดียวแต่ build ได้หลาย platform) เพิ่ม/ลดและอัพเดท plug-in ได้สะดวก

ขั้นตอนการเตรียมความพร้อม
ทั้งสองวิธีต้องการ Nodejs ครับ ไปดาวน์โหลดได้ที่ http://nodejs.org/download/ บนวินโดวส์มีทั้ง 32 และ 64 bits ในที่นี้เราอยากให้มันเป็น portable ได้มากที่สุด ให้เลือกที่เป็น Windows Binary (node.exe) นะครับ ย้ายไฟล์นี้ไปไว้ในโฟลเดอร์ที่เราเตรียมไว้เช่น D:\mobile\nodejs

ต่อมา ถ้าใครยังไม่มี Android SDK สามารถไปดาวน์โหลด Eclipse ADT Bundle ได้ที่ https://developer.android.com/sdk/index.html เช่นเดียวกันมีเวอร์ชัน 32 และ 64 bits นะครับ จากนั้นให้แตกไฟล์นี้ไว้ใน D:\mobile แล้วเปลี่ยนชื่อโฟลเดอร์ให้ง่ายๆหน่อยเป็น D:\mobile\adt-bundle ประมาณนี้

---------------------------------
ส่วนนี้เป็นตัวเลือกนะครับ จะทำหรือไม่ก็ได้
เพื่อความสมบูรณ์ของ ADT ก็ไปอัพเดทกันซะหน่อยนะครับ ลองเรียกไฟล์ D:\mobile\adt-bundle\SDK Manager.exe ดู


ตัวล่าสุดที่ผมโหลดมามี API level 20 คือ 4.4W (สนับสนุน Android Wear) แต่ก็มี level 21 คือ Android 5.0 Lollipop มาให้ลองแล้ว ในที่นี้เราจะยึดอยู่กับ level 20 เหมือนเดิมครับ ยังไม่ต้องโหลดเพิ่มก็ได้ จากนั้นก็ Install update packages ไปตามเรื่องตามราว (นานพอควร)

Eclipse ที่มีมาให้กับ ADT Bundle นี้เป็นรุ่น Juno ซึ่งยังไม่มี package ด้านการแก้ไฟล์ html เลย เราต้องลงเพิ่มสักหน่อย ลองเรียก eclispe จาก D:\mobile\adt-bundle\eclipse\eclipse.exe ถ้าเจอปัญหา Failed to Create Java Virtual Machine ให้ไปแก้ไขไฟล์ eclipse.ini ลองลดเมมลงโดยแก้บรรทัดสุดท้ายที่ว่า -Xmx1024m เป็น -Xmx512m ดูครับ จากนั้นเมื่อเข้าโปรแกรมได้แล้ว เลือกเมนู Help/Install new software เลือกประมาณดังรูป (รอนานหน่อยครับ)
---------------------------------

ท้ายสุดละ เราจะสร้าง batch file เพื่อกำหนด path ให้โปรแกรมต่างๆสามารถหากันเจอและทำให้เราใช้งานโปรแกรมได้ง่าย ลองสร้างไฟล์ setpath.bat ไว้ใน D:\mobile\ แล้วบันทึกคำสั่งเหล่านี้ลงไป

set ANDROID_HOME=%~dp0adt-bundle\sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%~dp0nodejs

กว่าจะเตรียมเรียบร้อยก็เหงื่อตกพอสมควร ตอนต่อไปเราจะลองวิธีติดตั้ง cordova แบบที่หนึ่งคือ โหลดไปจัดการเองครับ

No comments:

Post a Comment