เรียนรู้ฟรี วิธีเริ่มต้นสร้าง Mobile App ด้วย HTML และ PhoneGap/Cordova 4

สวัสดีครับ

การสร้าง Mobile แอพด้วย HTML5 และ PhoneGap/Cordova เป็นเรื่องที่ไม่ยาก และไม่ง่ายจนเกินไป จำเป็นมากๆ ที่ต้องมีพื้นฐานการสร้าง Web พอเขียนพออ่านภาษา HTML, CSS, และ Javascript ได้บ้างนะครับ

เนื้อหาหลายๆ ส่วนในเพจนี้ เอาไว้ให้คุณที่สนใจ รวมถึงพี่น้องที่มาอบรมกับผมในหลักสูตรสนุกๆ 2 วัน “สร้าง Mobile App ด้วย HTML5 และ PhoneGap 4″ ไว้ อ้างอิงหลังจากจบอบรมแล้ว เพราะเนื้อหาบางส่วนมันโคตรเทคนิคเลย ผมเลยเอามาฝากไว้ที่นี่ ถ้าชอบก็แชร์ให้เพื่อนๆ ได้มาสนุกกับการสร้าง Mobile App ด้วยนะครับ

เรียนรู้แบบ Workshop

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

ดูรายละเอียด ติดต่ออบรมนอกสถานที่

เนื้อหา

1. เริ่มต้นสร้างแอพ iOS ด้วย HTML5 และ PhoneGap/Cordova 4

1.1 เตรียมตัวสำหรับ iOS Application

ว่าแล้วก็มาเตรียมเครื่อง Mac เราให้พร้อมกับการพัฒนา iOS แอพด้วย PhoneGap กัน

ทำไมต้องสมัคร iOS Developer Program?

คำถามนี้เหมือนกับคำถามที่ว่า “ถ้าจะทำอาหารขาย ต้องไปเช่าที่ตลาดไหม?” App Store ก็เหมือนตลาด Apple คือคนคุมตลาด เราอาจจะฝึกทำกับข้าวที่บ้านก่อน กินเอง อร่อยเอง แต่ก็ไม่มีสิทธิ์เอามาลองทำที่ขายจริง (iPhone และ iPad) หรือขายเอาตังค์ได้จริงๆ (Upload ขึ้น App Store) นั่นแหละครับ

ดังนั้นถ้าต้องการจะทำแอพหากินจริงๆ ไม่ใช่แค่ลองเฉยๆ ก็สมัครเลยครับ เป็นตัวเลือกเดียว และแนะนำว่าตอนมาเรียนกับผม ถ้าต้องการทำแอพบน iOS device จริงๆ ต้องสมัครให้เรียบร้อย เพราะจะใช้เวลาดำเนินการไม่แน่นอน ล่วงหน้าซักอาทิตย์ก็ดี

ถ้าไม่สมัคร iOS Developer Program จะทำ iOS App ได้อยู่หรือเปล่า?

ไม่สมัครก็ยังพัฒนาได้ครับ แต่พัฒนาบน Simulator (โปรแกรมจำลองการทำงานของ iOS หน้าต่างน่ารัก คล้าย iPhone หรือ iPad) นะ นั่นคือเราจะไม่สามารถเอา App ลงไปลองเล่นใน iOS Device หรือเอาไปขายบน App Store ได้ ทางเดียวคือเสีย $99 เหรียญให้ Apple ตามขั้นตอนที่นี่นะ

1.2 วิธีนำ App ออกจาก XCode พร้อมส่งเข้า App Store

เมื่อแอพสุกงอมพร้อมออกสู่ตลาดแล้ว (เหมือนกล้วยเลยเนอะ) เป็นเวลาที่เราจะเอาแอพที่เราฟูมฟักเป็นอย่างดี เทสแล้วเทสอีก ส่งให้ผู้บริโภคที่ถือ iOS Device กันเป็นล้านๆ คน แต่เหมือนส่งกล้วยออกนอกนั่นแหละครับ เราจะยัดกล้วนลงถุงก๊อปแก๊ปก็ไม่ได้เพราะ Apple พิถีพิถันเรื่องนี้มาก ต้องมีขั้นตอนการแพ็คกล่องคุณภาพสูง เพื่อให้เข้ากับตลาดคุณภาพของเขา

ผมสรุปวิธีเอาไว้ให้เราทำตามได้ง่ายๆ ที่นี่ครับ

1.2 เตรียมตัวสำหรับการสร้างแอพ Android บน OS X

สำหรับการเตรียมเครื่อง Mac ให้พร้อมสร้าง Android app ด้วย PhoneGap สามารถดูได้จากที่นี่

ปัญหาที่อาจฟลุ๊คเจอ และวิธีแก้

ปัญหาที่เกิดกับ Android และ PhoneGap บน OS X Mavericks 10.9
ถ้าใครอัพเดตมาใช้ OS X Mavericks 10.9 จะพบปัญหาตอน platform add android ครับ นั่นคือ Ant หาย ดูคำแนะนำการแก้ไขได้ที่นี่

2. สำหรับผู้ที่มี Windows

ถ้าเรามี Windows นั่นหมายความว่าเราไม่สามารถจะสั่งให้ PhoneGap สร้าง iOS App ในเครื่องของเราได้ครับ (น้ำตาไหลพราก) แต่เราก็จะมี Android และ Windows Phone มาใช้งานแทนกันได้

ถ้าต้องการสร้าง Android app บน Windows ก็มาเตรียมเครื่องกันก่อน

3. รวม Link โปรแกรมและไฟล์ที่คุณใช้ได้ใน PhoneGap/Cordova 4

Web Editor ช่วยเขียน code

Adobe Dreamweaver CC – สนับสนุน JQuery, JQuery Mobile เต็มรูปแบบ, Live Preview, และ PhoneGap Build
Bracket.io และ Edge Code CC – ฟรี, เร็ว, เบา, หน้าตาเรียบง่ายสำหรับการเขียน code ล้วนๆ (คนชอบ code จะฟิน) ติดตั้ง plugin ได้, มีโหมด Live Preview, Quick Editเรียนรู้วิธีใช้งาน Bracket และ Edge Code CC ฟรีๆ กับโค้ชพลที่นี่

Environment และ SDK ต่างๆ

1. SDK พื้นฐาน

NodeJS – สำหรับติดตั้ง PhoneGap CLI และ Cordova CLI

2. พิเศษเฉพาะ iOS เท่านั้น

XCode – ใช้ในการทดสอบแอพ iOS ใน simulator และบน iOS Device (iPhone/iPad/iPod Touch) และมีหน้าที่ในการแปลงโปรเจคเป็นไฟล์ iOS Applicatoin Archive (IPA) สำหรับอัพขึ้น Apple App Store
XCode Command Line Tools – สำหรับให้ PhoneGap และ Cordova CLI เรียกใช้งาน ต้องใช้ Apple ID ในการเข้าไป download เข้าไปแล้วให้ค้นหาคำว่า “Command Line Tools” และ download มาติดตั้ง