หมายเหตุ ในการเรียนสามารถใช้เครื่อง Windows หรือ Mac อย่างใดอย่างหนึ่งก็ได้
เนื้อหาจะใช้ Ionic Framework รุ่นล่าสุด (ปัจจุบันเวอร์ชั่น 3.x.x) ในการเรียนรู้ แต่จะมีการพูดถึงเวอร์ชั่นก่อนหน้าด้วย
Module 1: รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- แนวคิดการพัฒนาแอพแบบ Cross Platform ทั้ง Android และ iOS
- ทำความเข้าใจแนวคิดของ Cordova framework
- ทำความเข้าใจแนวคิดของ Ionic framework
Module 2: การติดตั้งและเตรียมระบบ
- ระบบและโปรแกรมที่ใช้บน Windows
- ระบบและโปรแกรมที่จะใช้บน Mac
- การติดตั้ง Microsoft Visual Studio Code สำหรับเขียนโปรแกรม
- การลงส่วนเสริม (Extension) ให้กับ Visual Studio Code
- วิธีติดตั้ง JDK (Java Development Kit)
- การกำหนด (config) Path ของ JDK
- วิธีติดตั้ง Node JS บน Windows
- วิธีติดตั้ง Node JS บน MacOS
- วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ Windows
- วิธีติดตั้ง Git และกำหนดค่าเริ่มต้น สำหรับ MacOS
- วิธีการติดตั้ง Android Studio และการ Config Path บน Windows
- วิธีการติดตั้ง Android Studio และการ Config Path บน Mac OS
- การติดตั้ง Cordova และ Ionic framework
- ลง 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
- วิธีแสดงแอพแบบ 2 แพลตฟอร์มบน Ionic Serve
Module 4: พื้นฐาน Angular , TypeScript และ Sass สำหรับ Ionic
- พื้นฐาน Angular
- Angular Module
- Angular Decorators
- Angular Components
- พื้นฐาน TypeScript
- ชนิดข้อมูลของ TypeScript และการประกาศตัวแปร
- พื้นฐาน Sass (Syntactically Awesome StyleSheets)
- แนวทางประยุกต์ใช้งาน Angular + TypeScript + Sass กับ Ionic 3
Module 5: การสร้างหน้า Page , Basic Navigation และการส่งข้อมูลระหว่างเพจ (Passing Data)
- การใช้คำสั่ง Ionic CLI สร้าง Page
- ทดลองสร้างเพจใหม่ พร้อมแก้ไขเมนู
- พื้นฐานการใช้งาน Navigation
- การ Push หน้าเพจขึ้นมาแสดง
- การ Pop หน้าเพจ
- การกำหนดเพจให้เป็น root page
- การส่งข้อมูลระหว่างหน้าเพจ (Passing Data between Pages)
- การปรับแต่งรูปแบบการเปลี่ยนหน้าเพจ (Configuring Page Transitions)
- ทำความเข้าใจวงจรการทำงานของเพจ (Page Lifecycle) ใน Ionic
Module 6: Ionic Components
- การออกแบบหน้าแอพพลิเคชั่นด้วย Component ที่ Ionic เตรียมไว้
- เรียนรู้การใช้งาน Component ขั้นประยุกต์
- การสร้างเพจแบบ Master Detail
- การใช้งาน HTTP Services และ Provider ใน 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 component ในโปรเจ็กต์ที่ clone มา
- การ add และ commit อัตโนมัตใน VS Code
Module 8: การเก็บข้อมูลแบบ Local ด้วย Ionic Storage
- การติดตั้ง Storage
- ขั้นตอนการใช้งานและเก็บข้อมูลแบบ Key/Value
- การใช้งาน Ionic Storage เพื่อเก็บข้อมูลแบบฐานข้อมูล (SQLite) แสดง เพิ่ม ลบ แก้ไข
- การใช้งาน Ionic View สำหรับทดสอบบนเครื่องจริง
Module 9: การใช้งาน web API (httpclient) แบบ RESTful Web Service
- สร้าง Web API ด้วย PHP framework อย่างง่ายๆ
- ดึงข้อมูลจากฐานข้อมูล MySQL มาแสดงผลใน Web API
- วิธีแสดงผลข้อมูลจาก Web API เป็น JSON
- เรียกใช้งาน API ด้วย Angular 5 Restful API/Web Services และ RxJS
- การจัดการข้อมูลได้จาก Web API ด้วย Observable
- การดึงข้อมูลจาก Web Service มาแสดงผลใน Listviews
- การเพิ่มตัวช่วย Loading แสดงหน้าจอโหลดข้อมูล
- การเพิ่ม Component Pull to refresh เพื่ออัพเดทข้อมูลใหม่
- การปรับแต่งการ Scroll ข้อมูลให้มีประสิทธิภาพด้วย VirtualScroll
Module 10: การใช้งาน Ionic Native
- กำหนด Runtime Permission
- การติดต่อกับกล้องถ่ายภาพ (Camera)
- การเขียนคำสั่งเรียกใช้งานกล้องถ่ายภาพ
- การเลือกภาพจาก gallery
- การอัพโหลดภาพที่ถ่ายขึ้น Server
- การใช้งาน Barcode และ QR Code Scanner
- การใช้งาน InAppBrowser
- การใช้งาน Toasts
Module 11: การปรับแต่งรายละเอียดของแอพพลิเคชั่น
- การปรับแต่งไอคอน (Icon) และ Splash Screen ของแอพ
- การปรับเปลี่ยนชื่อและไอดีของแอพ
- การปรับแต่งการแสดงผลแอพ แนวตั้ง หรือแนวนอนตามต้องการ
Module 12: แนวทางการ Publish App ขึ้น Store
- การตั้งค่า Bundle ID, App Name, เลขเวอร์ชันใหักับ App
- การลดขนาดไฟล์รูปภาพก่อน Build App
- การปรับแต่ง Icon และ Splash Screen ก่อนขึ้น Store
- การ Publish to Google Play Store
- การ Publish to Apple AppStore
Bonus พิเศษส่งท้าย
- แถม Template Ionic สำหรับแอพอ่านข่าว แอพร้านอาหาร และแอพถ่ายภาพแสดงแกลอรี่
- แถมไฟล์ภาพ Icon และ Splash Screen ที่ออกแบบจาก Photoshop (PSD)