พัฒนาแอพแบบ Cross Platform สำหรับ Android และ iOS ด้วย Ionic Framework พื้นฐานถึงขั้นกลาง
หลักสูตรพัฒนาแอพแบบ Cross Platform สำหรับ Android และ iOS ด้วย Ionic Framework พื้นฐานถึงขั้นกลาง เป็นการอบรมสร้างแอปแบบ Hybrid ด้วย HTML, CSS และ TypeScript ร่วมกับ Angular, Ionic และ Capacitor เหมาะกับ Web Developer, Mobile Developer และโปรแกรมเมอร์ จบแล้วอัปโหลดแอปของตัวเองขึ้น App Store และ Play Store ได้
- ระยะเวลา24 ชั่วโมง · 4 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
Ionic Framework เป็นหนึ่งในเครื่องมือที่กำลังได้รับความนิยมอย่างสูงในการพัฒนาแอพแบบ Hybrid โดยใช้เทคโนโลยีของเว็บไซต์ในการออกแบบและสร้างแอพพลิเคชั่นของเราขึ้นมา นั่นหมายความว่า เราสามารถใช้ภาษา HTML, CSS และ JavaScript พื้นฐานทั่วไปมาสร้างแอพพลิเคชั่นได้ทันที โดยรองรับทั้ง Android และ iOS และ Windows Phone ในการพัฒนาครั้งเดียว
ทำให้เราสามารถลดเวลาในการพัฒนาลงไปได้อย่างมาก อีกทั้งตัว Ionic framework เองมีการใช้ Command-line interface (CLI) เข้ามาช่วยในการจัดการดูแลบริการต่างๆ ในการสร้างหน้า หรือ การติดตั้งให้ง่ายขึ้นอีกด้วย และถ้าต้องการเข้าถึงฟีเจอร์ที่เป็น Native ก็จะเข้าถึงผ่าน Runtime ของ Cordova ที่สำคัญสามารถใช้โค้ดเดียวกันรันทีเดียวสองแพลตฟอร์มได้เลย iOS และ Android
เขียนครั้งเดียว ได้ทั้ง Android และ iOS เรียน 24 ชั่วโมงจบ ครบทุกประเด็น สำหรับมือใหม่จนถึงขั้นใช้งานจริง
สิ่งที่คุณจะได้รับ
- เข้าใจแนวคิดของการพัฒนาแอพแบบ Hybrid ทั้ง iOS และ Android
- เข้าใจศักยภาพและขีดจำกัดของเทคโนโลยี Ionic Framework และ Capacitor
- สามารถเขียน Mobile App ด้วยภาษา HTML, CSS และ JavaScript/TypeScript รวมถึงใช้งาน Angular, Ionic Framework และ Capacitor ในการพัฒนา Mobile App
- สามารถออกแบบ และสร้าง UI ของ Mobile App ที่ใช้งานได้ง่ายและสวยงาม
- สามารถสร้าง Mobile App ที่จัดการข้อมูลใน MySQL Database
- สามารถสร้าง Mobile App ที่รับส่งข้อมูลกับ Web Service ได้
- เรียนรู้การใช้งาน Capacitor Plugin เพื่อควบคุมกล้องและความสามารถของอุปกรณ์ iOS และ Android ได้
- สามารถอัปโหลด Mobile App ของตัวเองขึ้น App Store และ Play Store ได้
หลักสูตรนี้เหมาะสำหรับ
- บุคคลทั่วไป
- Programmer
- Web Developer
- Web Master
- Mobile Developer
- IT Manager
- ผู้ที่ต้องการใช้ Web technology สร้าง hybrid mobile application ที่นำไปใช้งานได้บน iOS และ Android
พื้นฐานของผู้เข้าอบรม
- ใช้งานคอมพิวเตอร์พื้นฐานบนระบบปฏิบัติการวินโดว์หรือ mac ได้
- มีประสบการณ์ด้านการทำงานกับ HTML, CSS, และ Javascript
- ใช้งานอินเตอร์เน็ตและเว็บไซต์พื้นฐานได้
- ไม่จำเป็นต้องเคยทำ Mobile App มาก่อน
- ไม่จำเป็นต้องเคยใช้ JQuery หรือ Angular Framework มาก่อน
หัวข้อการฝึกอบรม
หมายเหตุ ในการเรียนสามารถใช้เครื่อง Windows หรือ Mac อย่างใดอย่างหนึ่งก็ได้ (การ Build และทดสอบแอพบน iOS ต้องใช้เครื่อง Mac)
เนื้อหาใช้ Ionic Framework รุ่นปัจจุบันร่วมกับ Angular และ Capacitor
Module 1 รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- แนวคิดการพัฒนาแอพแบบ Cross Platform ทั้ง Android และ iOS
- ทำความเข้าใจแนวคิดของ Capacitor (Native Runtime ที่มาแทน Cordova)
- ทำความเข้าใจแนวคิดของ Ionic framework
Module 2 การติดตั้งและเตรียมระบบ
- ระบบและโปรแกรมที่ใช้บน Windows
- ระบบและโปรแกรมที่จะใช้บน Mac
- การติดตั้ง Microsoft Visual Studio Code สำหรับเขียนโปรแกรม
- การลงส่วนเสริม (Extension) ให้กับ Visual Studio Code รวมถึง Ionic Extension
- วิธีติดตั้ง Node.js บน Windows
- วิธีติดตั้ง Node.js บน macOS
- วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ Windows
- วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ macOS
- วิธีการติดตั้ง Android Studio (มี JDK มาให้ในตัว) และการ Config Path บน Windows
- วิธีการติดตั้ง Android Studio (มี JDK มาให้ในตัว) และการ Config Path บน macOS
- การติดตั้ง Ionic CLI และ Capacitor
- ลง Driver ADB interface บน Windows สำหรับเชื่อมต่อกับ Smart Phone Android
Module 3 รู้จักกับ Ionic Framework
- แนะนำเวอร์ชันของ Ionic และความแตกต่าง
- ระบบและโปรแกรมที่ใช้ใน Ionic framework
- ทำความรู้จัก Ionic CLI
- สร้างโปรเจ็กต์แรกใน Ionic framework
- ทำความเข้าใจโครงสร้างของโปรเจกต์ Ionic
- คำสั่งรัน Web server: ionic serve
- ทดสอบใช้งาน Ionic Serve
- วิธีพรีวิวหน้าตาแอพแบบ iOS และ Android ในเบราว์เซอร์
Module 4 พื้นฐาน Angular, TypeScript และ Sass สำหรับ Ionic
- พื้นฐาน Angular
- Angular Standalone Components (แทน NgModule)
- Angular Decorators
- Angular Components
- พื้นฐาน TypeScript
- ชนิดข้อมูลของ TypeScript และการประกาศตัวแปร
- พื้นฐาน Sass (Syntactically Awesome StyleSheets)
- แนวทางประยุกต์ใช้งาน Angular + TypeScript + Sass กับ Ionic
Module 5 การสร้างหน้า Page, Navigation และการส่งข้อมูลระหว่างเพจ (Passing Data)
- การใช้คำสั่ง Ionic CLI สร้าง Page
- ทดลองสร้างเพจใหม่ พร้อมแก้ไขเมนู
- พื้นฐานการนำทางด้วย Angular Router และ ion-router-outlet
- การไปยังหน้าถัดไปด้วย navigateForward
- การย้อนกลับด้วย navigateBack
- การกำหนดหน้าเริ่มต้นด้วย navigateRoot
- การส่งข้อมูลระหว่างหน้าเพจด้วย Route Parameter
- การปรับแต่งรูปแบบการเปลี่ยนหน้าเพจ (Page Transitions)
- ทำความเข้าใจวงจรการทำงานของเพจ (Page Lifecycle) ใน Ionic
Module 6 Ionic Components
- การออกแบบหน้าแอพพลิเคชันด้วย Component ที่ Ionic เตรียมไว้
- เรียนรู้การใช้งาน Component ขั้นประยุกต์
- การสร้างเพจแบบ Master Detail
- การใช้งาน Angular Service และ HttpClient ใน Ionic
- การสร้างแบบฟอร์ม
- การตรวจสอบความถูกต้องของข้อมูล (Validations)
- การเพิ่มข้อมูลไปที่ส่วน Backend
Module 7 การใช้งาน Git Version Control กับ Ionic
- การ Config โปรแกรม git ก่อนเริ่มใช้งาน
- การ init git ในโปรเจ็กต์ Ionic
- การ Add ข้อมูลเข้า git ผ่านโปรแกรม VS Code
- การ Commit ข้อมูลใน VS Code
- การส่งข้อมูล (push) ขึ้น GitHub / Bitbucket
- การ Clone Project Ionic จาก GitHub / Bitbucket มาใช้งาน
- การติดตั้ง Node module ในโปรเจ็กต์ที่ clone มา
- การ add และ commit อัตโนมัติใน VS Code
Module 8 การเก็บข้อมูลแบบ Local ด้วย Ionic Storage
- การติดตั้ง Ionic Storage
- ขั้นตอนการใช้งานและเก็บข้อมูลแบบ Key/Value
- การเก็บข้อมูลแบบฐานข้อมูล SQLite ด้วย Capacitor Plugin แสดง เพิ่ม ลบ แก้ไข
- การทดสอบบนเครื่องจริงด้วย Capacitor (npx cap run) และ Live Reload
Module 9 การใช้งาน web API (HttpClient) แบบ RESTful Web Service
- สร้าง Web API ด้วย PHP framework อย่างง่ายๆ
- ดึงข้อมูลจากฐานข้อมูล MySQL มาแสดงผลใน Web API
- วิธีแสดงผลข้อมูลจาก Web API เป็น JSON
- เรียกใช้งาน RESTful API ด้วย Angular HttpClient และ RxJS
- การจัดการข้อมูลได้จาก Web API ด้วย Observable
- การดึงข้อมูลจาก Web Service มาแสดงผลใน List
- การเพิ่มตัวช่วย Loading แสดงหน้าจอโหลดข้อมูล
- การเพิ่ม Component Pull to refresh เพื่ออัปเดตข้อมูลใหม่
- การปรับแต่งการ Scroll ข้อมูลให้มีประสิทธิภาพด้วย Infinite Scroll และ Angular CDK Virtual Scroll
Module 10 การใช้งาน Capacitor Plugins
- กำหนด Runtime Permission
- การติดต่อกับกล้องถ่ายภาพด้วย Camera Plugin
- การเขียนคำสั่งเรียกใช้งานกล้องถ่ายภาพ
- การเลือกภาพจาก gallery
- การอัปโหลดภาพที่ถ่ายขึ้น Server
- การใช้งาน Barcode และ QR Code Scanner ผ่าน Capacitor Plugin
- การเปิดหน้าเว็บภายในแอพด้วย Browser Plugin
- การใช้งาน Toast
Module 11 การปรับแต่งรายละเอียดของแอพพลิเคชัน
- การสร้างไอคอน (Icon) และ Splash Screen ของแอพด้วย Capacitor Assets
- การปรับเปลี่ยนชื่อและไอดีของแอพ
- การปรับแต่งการแสดงผลแอพ แนวตั้ง หรือแนวนอนตามต้องการ
Module 12 แนวทางการ Publish App ขึ้น Store
- การตั้งค่า Bundle ID, App Name, เลขเวอร์ชันให้กับ App
- การลดขนาดไฟล์รูปภาพก่อน Build App
- การปรับแต่ง Icon และ Splash Screen ก่อนขึ้น Store
- การ Publish to Google Play Store
- การ Publish to Apple App Store
13 Bonus พิเศษส่งท้าย
- แถม Template Ionic สำหรับแอพอ่านข่าว แอพร้านอาหาร และแอพถ่ายภาพแสดงแกลเลอรี
- แถมไฟล์ภาพ Icon และ Splash Screen ที่ออกแบบจาก Photoshop (PSD)
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
Capacitor คืออะไร ทำงานร่วมกับ Ionic อย่างไร
Capacitor คือ Native Runtime ที่นำเว็บแอปซึ่งเขียนด้วย HTML, CSS และ JavaScript หรือ TypeScript ไปรันเป็นแอปบน Android และ iOS พร้อมเปิดให้เรียกความสามารถของเครื่อง เช่น กล้อง ไฟล์ และการแจ้งเตือน ผ่าน Plugin ส่วน Ionic Framework เป็นชุด UI Component ที่หน้าตาและการใช้งานเหมือนแอปมือถือ เมื่อใช้ร่วมกันจึงเขียนโค้ดชุดเดียวแล้ว Build ได้ทั้งสองแพลตฟอร์ม
แอปแบบ Hybrid ต่างจากแอป Native อย่างไร
แอป Native เขียนแยกตามแพลตฟอร์ม เช่น Kotlin สำหรับ Android และ Swift สำหรับ iOS จึงเข้าถึงความสามารถของเครื่องได้เต็มที่ แต่ต้องดูแลโค้ดสองชุด ส่วนแอป Hybrid เขียนด้วยเทคโนโลยีเว็บชุดเดียวแล้วรันใน WebView ผ่าน Runtime อย่าง Capacitor ทำให้พัฒนาเร็วและนักพัฒนาเว็บเริ่มได้ทันที แต่งานกราฟิกหนักหรือฟีเจอร์ที่ผูกกับระบบปฏิบัติการมาก ๆ อาจทำได้จำกัดกว่า
นำแอปขึ้น Google Play และ App Store มีขั้นตอนอย่างไร
เริ่มจากตั้งชื่อแอป Bundle ID และเลขเวอร์ชัน เตรียมไอคอนและ Splash Screen ให้ครบ ลดขนาดไฟล์รูปภาพ จากนั้น Build เว็บแอปแล้วซิงก์เข้าโปรเจกต์ Native ด้วย Capacitor ฝั่ง Android ให้สร้างไฟล์แอปที่ลงลายเซ็นใน Android Studio แล้วอัปโหลดผ่าน Google Play Console ส่วน iOS ต้อง Build และส่งแอปจากเครื่อง Mac ผ่าน App Store Connect เพื่อรอการตรวจก่อนเผยแพร่
หลักสูตร Ionic Framework พื้นฐานถึงขั้นกลาง เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับ Web Developer, Mobile Developer, โปรแกรมเมอร์ และผู้ที่อยากใช้เทคโนโลยีเว็บสร้างแอปบน Android และ iOS ควรมีประสบการณ์ HTML, CSS และ JavaScript และใช้คอมพิวเตอร์ Windows หรือ Mac ได้ ไม่จำเป็นต้องเคยทำแอปมือถือหรือเคยใช้ Angular มาก่อน เพราะหลักสูตรปูพื้น Angular, TypeScript และ Sass ให้ก่อน
เรียนจบหลักสูตร Ionic Framework พื้นฐานถึงขั้นกลาง แล้วทำอะไรได้บ้าง
เขียนแอปด้วย Angular, Ionic และ Capacitor สร้างหน้าและการนำทาง ดึงข้อมูลจาก RESTful API ที่ต่อกับ MySQL เก็บข้อมูลในเครื่องด้วย Ionic Storage และ SQLite ใช้กล้องและสแกน QR Code ผ่าน Capacitor Plugin และอัปโหลดแอปของตัวเองขึ้น App Store และ Play Store ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ต้องเตรียมเครื่องอะไรมาเรียน ใช้ Windows หรือ Mac ได้ไหม
ใช้ได้ทั้ง Windows และ Mac แต่การ Build และทดสอบแอปบน iOS ต้องใช้เครื่อง Mac เนื้อหาใช้ Ionic Framework รุ่นปัจจุบันร่วมกับ Angular และ Capacitor ในหลักสูตรจะติดตั้งเครื่องมือทีละขั้น ได้แก่ Visual Studio Code, Node.js, Git, Android Studio ซึ่งมี JDK มาในตัว, Ionic CLI และ Capacitor รวมถึง Driver ADB บน Windows สำหรับเชื่อมต่อมือถือ Android