เรียนรู้ฟรี วิธีเริ่มต้นสร้าง Mobile App ด้วย HTML และ PhoneGap/Cordova 2018
การสร้าง Mobile แอพด้วย HTML5 และ PhoneGap/Cordova เป็นเรื่องที่ไม่ยาก และไม่ง่ายจนเกินไป จำเป็นมากๆ ที่ต้องมีพื้นฐานการสร้าง Web พอเขียนพออ่านภาษา HTML, CSS, และ Javascript ได้บ้างนะครับ
เนื้อหาหลายๆ ส่วนในเพจนี้ เอาไว้ให้คุณที่สนใจ รวมถึงพี่น้องที่มาอบรมกับผมใน “หลักสูตรอบรม สร้าง Mobile App ด้วย HTML5, Angular 6 และ Ionic Framework 4” ไว้ อ้างอิงหลังจากจบอบรมแล้ว เพราะเนื้อหาบางส่วนมันโคตรเทคนิคเลย ผมเลยเอามาฝากไว้ที่นี่ ถ้าชอบก็แชร์ให้เพื่อนๆ ได้มาสนุกกับการสร้าง Mobile App ด้วยนะครับ
เปิดอบรมสร้างแอพ iOS และ Android ด้วย HTML5, PhoneGap 6, และ Ionic Framework 4
เหมาะสำหรับผู้เริ่มต้น ทำจริง, เข้าใจง่าย, ออกแบบโดยโค้ชพล นักพัฒนาและที่ปรึกษาด้าน Cross Platform Technology กว่า 5 ปี
เนื้อหา
- เริ่มต้นสร้างแอพ iOS ด้วย HTML5 และ PhoneGap 6
- เริ่มต้นสร้างแอพ Android ด้วย HTML5 และ PhoneGap 6
- รวม Link โปรแกรมและไฟล์ที่คุณใช้ได้ใน PhoneGap 6
1. เริ่มต้นสร้างแอพ iOS ด้วย HTML5 และ PhoneGap/Cordova 6
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 6
โปรแกรม 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 เท่านั้น
- Android Developer Tools (ADT) – ใช้ในการทดสอบแอพ และแปลงโปรเจคเป็น Android Application Package (APK)
- Java Development Kit (JDK)
- Ant
อบรมสร้างแอพ iOS และ Android ด้วย HTML5, PhoneGap, และ Ionic Framework 2
สำหรับผู้เริ่มต้นที่ต้องการเรียนรู้การพัฒนาโมบายล์แอพพลิเคชั่น ทำจริง, เข้าใจง่าย, ออกแบบโดยโค้ชพล นักพัฒนาและวิทยากรด้าน Cross Platform Technology กว่า 5 ปี
47 Comments. Leave new
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] Edge Animate CC Training หลักสูตรอบรม Adobe Muse CC Training Learn. สร้าง Mobile App ด้วย HTML5 และ PhoneGap Blog […]
[…] […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] […]
[…] ติดตามเนื้อหาอื่นๆ สำหรับการเริ่มต… หรือสนใจมาฝึกอบรมกับผมก็ดูรายละเอียดคอร์สและวันเวลาได้ทีนี่ครับ […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] HTML5 Mobile Application อย่าง PhoneGap, Cordova, หรือ Ionic framework จะแลกเปลี่ยนข้อมูลกับ Web […]
[…] สร้าง Mobile App ด้วย HTML5 และ PhoneGap […]
[…] วันนี้โค้ชพลจะมาคุยเรื่องระบบปฏิบัติการใหม่ของ Apple นั่นคือ “iOS 8″ และการพัฒนาโมบายล์แอพพลิเคชั่นด้วย HTML, CSS, และ Javascript โดยใช้ PhoneGap/Cordova ใครยังไม่เคยรู้จัก PhoneGap และ Cordova ให้ไปศึกษาในวิดีโอที่โค้ชพลทำไว้ที่นี่ […]
[…] ชัดเจนว่าสำหรับคุณที่ต้องการนำ PhoneGap ไปใช้สร้าง Mobile Application ด้วย HTML/CSS/Javascript ยังคงสามารถใช้งาน PhoneGap ได้เหมือนเดิม และสามารถ download ติดตั้งได้จากหน้า website ของ PhoneGap เหมือนเดิม (ดูวิธีการติดตั้ง PhoneGap บนเครื่อง Windows แล…) […]
[…] ใครที่ยังไม่คุ้นเคยกับการพัฒนาแอพด้วย PhoneGap/Cordova มาเรียนกันผมได้ที่นี่ […]
[…] ดูเนื้อหารวมเรื่อง PhoneGap ได้ที่ nextflow.in.th/phonegap […]
[…] การใช้ HTML5, PhoneGap, Cordova สร้างแอพ iOS และ Android […]
[…] […]
[…] พอดีกำลังจะไปอบรมสร้างแอพ iOS และ Android ด้วย HTML5 และ PhoneGap/Cor… ที่บริษัท Samtel มีนักเรียนท่านหนึ่งรายงานเข้ามาว่า ติด error ประหลาด ระหว่างการติดตั้ง PhoneGap CLI และ Cordova CLI โดย Error มีเนื้อหาประมาณนี้ […]
[…] กับการทำแอพ iOS และ Android ด้วย HTML5 และ PhoneGap ได้ที่นี่ครับ […]
[…] นอกนั้นก็เป็นการอัพเดตตัว plug-in พื้นฐานทั้งหมดให้เป็นเวอร์ชั่นล่าสุดครับ (โดยเฉพาะพวก Local Storage, Camera, Geolocation ที่หลายๆ คนมาอบรมกันไป) […]
[…] HTML5, PhoneGap, และ Ionic Framework (ใหม่สุดๆ) […]
[…] เรียนสร้างแอพ Android และ iOS ด้วย HTML5 ได้ที่ http://nextflow.in.th/phonegap/ […]
[…] สนใจเรื่องทำ Mobile App ด้วย HTML5 กับ PhoneGap/Cordova คลิกเริ่มต้น… […]
[…] เรียนพื้นฐาน PhoneGap/Cordova […]
[…] ใครอยากเรียนรู้การใช้งาน PhoneGap/Cordova เบื้องต้นคลิกดูที่นี่ได้ครับ […]
[…] บางคนจะเจอปัญหานี้ตอนติดตั้งโปรแกรมในเครื่องเพื่อมาเรียนทำ Mobile App ด้วย PhoneGap/Cordova หรือ Angular JS และ Ionic Framework กับผม ซึ่งวิธีแก้สามารถทำได้ […]
[…] เริ่มต้นพัฒนาแอพ iOS และ Android ด้วย HTML 5 และ… […]
[…] Android โดยใช้ HTML 5, Cordova, Ionic Framework ช่วงกลางปีนี้มาอัพเดตให้ Android […]
[…] เรียนสร้างแอพ Android และ iOS ด้วย HTML5 คลิกที่นี่เลย http://nextflow.in.th/phonegap/ […]
[…] อยากรู้ว่าจะช่วยให้เราพัฒนาแอพพลิเคชั่นแบบ Cross-platform ด้วย PhoneGap/Co… หรือ Ionic Framework ง่ายขึ้นขนาดไหน หรือรู้สึกไม่ดียังไง […]