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

สวัสดีครับ

[us_single_image image=”5759″ size=”full” animate=”hfc”]

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

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

[us_cta title=”เปิดอบรมสร้างแอพ iOS และ Android ด้วย HTML5, PhoneGap 6, และ Ionic Framework 4″ controls=”bottom” btn_link=”url:http%3A%2F%2Fwp.me%2FP2kPae-1Oj|||” btn_label=”ดูรายละเอียด” btn_size=”18px” second_button=”1″ btn2_link=”url:https%3A%2F%2Fnextflow.typeform.com%2Fto%2FLalQCq|||” btn2_label=”จัดอบรมโทร 083-071-3373″ btn2_style=”outlined” btn2_color=”white” btn2_size=”18px”]เหมาะสำหรับผู้เริ่มต้น ทำจริง, เข้าใจง่าย, ออกแบบโดยโค้ชพล นักพัฒนาและที่ปรึกษาด้าน Cross Platform Technology กว่า 5 ปี
[/us_cta]
[us_separator]

เนื้อหา

  1. เริ่มต้นสร้างแอพ iOS ด้วย HTML5 และ PhoneGap 6
  2. เริ่มต้นสร้างแอพ Android ด้วย HTML5 และ PhoneGap 6
  3. รวม Link โปรแกรมและไฟล์ที่คุณใช้ได้ใน PhoneGap 6

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

iPhone5s by Janitors - flickr

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 สามารถดูได้จากที่นี่

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

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

windows-8

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

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

โดยโปรแกรมที่เราใช้เขียนโปรเจค สามารถเลือกใช้ได้ตั้งแต่

  1. Visual Studio Code
  2. Visual Studio 2017
  3. Sublime Text

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

PhoneGap Visual System

โปรแกรม Editor เทพๆ ช่วยให้เราเขียน code ได้ง่ายๆ

  • Visual Studio Code – เบา สบาย และมากด้วยความสามารถจาก ส่วนเสริม Extension นับร้อย ปัจจุบันโค้ชพลให้ในการสอนเนื้อหาคอร์สล่าสุด Angular 2 และ Ionic 2
  • Visual Studio 2017 สำหรับสาย .NET ผู้ไม่อยากเปลี่ยนโปรแกรม สามารถดาวน์โหลดมาใช้งานได้เลย
  • 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 มาติดตั้ง

3. พิเศษเฉพาะ Android เท่านั้น

 

[us_cta title=”อบรมสร้างแอพ iOS และ Android ด้วย HTML5, PhoneGap, และ Ionic Framework 2″ controls=”bottom” btn_link=”url:http%3A%2F%2Fwp.me%2FP2kPae-1Oj|||” btn_label=”ดูรายละเอียด” btn_color=”contrast” second_button=”1″ btn2_link=”url:https%3A%2F%2Fnextflow.typeform.com%2Fto%2FLalQCq|||” btn2_label=”จัดอบรม โทร 083-071-3373″ btn2_style=”outlined” btn2_color=”contrast”]สำหรับผู้เริ่มต้นที่ต้องการเรียนรู้การพัฒนาโมบายล์แอพพลิเคชั่น ทำจริง, เข้าใจง่าย, ออกแบบโดยโค้ชพล นักพัฒนาและวิทยากรด้าน Cross Platform Technology กว่า 5 ปี[/us_cta]
Loading Facebook Comments ...