เริ่มต้นเรียนรู้วิธีสร้าง Mobile App ด้วย HTML5 และ PhoneGap แบบสบายๆ

อ่านก่อน

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

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

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

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 ก็มาเตรียมเครื่องกันก่อน