หมายเหตุ ในการเรียนสามารถใช้เครื่อง Windows หรือ Mac อย่างใดอย่างหนึ่งก็ได้
เนื้อหาจะใช้ Ionic Framework รุ่นล่าสุด (ปัจจุบันเวอร์ชั่น 3.x.x) ในการเรียนรู้ แต่จะมีการพูดถึงเวอร์ชั่นก่อนหน้าด้วย
![รู้จักกับการพัฒนา Mobile Application แบบ Hybrid](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-cordova-mobile-applicaiton-hybrid-cross-platform-module1.jpg)
Module 1: รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- รู้จักกับการพัฒนา Mobile Application แบบ Hybrid
- แนวคิดการพัฒนาแอพแบบ Cross Platform ทั้ง Android และ iOS
- ทำความเข้าใจแนวคิดของ Cordova framework
- ทำความเข้าใจแนวคิดของ Ionic framework
![การติดตั้งและเตรียมระบบ](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-cordova-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%80%E0%B8%95%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%A1%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A-module2.jpg)
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
![รู้จักกับ Ionic Framework](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-Ionic-Framework-module3.jpg)
Module 3: รู้จักกับ Ionic Framework
- แนะนำเวอร์ชั่นของ Ionic และความแตกต่าง
- ระบบและโปรแกรมที่ใช้ใน Ionic framework
- ทำความรู้จัก Ionic CLI
- สร้างโปรเจ็กต์แรกใน Ionic framework
- ทำความเข้าใจโครงสร้างของโปรเจค Ionic
- คำสั่งรัน Web server: ionic serve
- ทดสอบใช้งาน Ionic Serve
- วิธีแสดงแอพแบบ 2 แพลตฟอร์มบน Ionic Serve
![พื้นฐาน Angular , TypeScript และ Sass สำหรับ Ionic](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/Angular-TypeScrip-Sass-for-Ionic-Module4.jpg)
Module 4: พื้นฐาน Angular , TypeScript และ Sass สำหรับ Ionic
- พื้นฐาน Angular
- Angular Module
- Angular Decorators
- Angular Components
- พื้นฐาน TypeScript
- ชนิดข้อมูลของ TypeScript และการประกาศตัวแปร
- พื้นฐาน Sass (Syntactically Awesome StyleSheets)
- แนวทางประยุกต์ใช้งาน Angular + TypeScript + Sass กับ Ionic 3
![การสร้างหน้า Page , Basic Navigation และการส่งข้อมูลระหว่างเพจ (Passing Data)](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/Ionic-Page-Basic-Navigation-Module5.jpg)
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
![Ionic Components](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/Ionic-Components-Module6.jpg)
Module 6: Ionic Components
- การออกแบบหน้าแอพพลิเคชั่นด้วย Component ที่ Ionic เตรียมไว้
- เรียนรู้การใช้งาน Component ขั้นประยุกต์
- การสร้างเพจแบบ Master Detail
- การใช้งาน HTTP Services และ Provider ใน Ionic
- การสร้างแบบฟอร์ม
- การตรวจสอบความถูกต้องของข้อมูล (Validations)
- การเพิ่มข้อมูลไปที่ส่วน Backend
![การใช้งาน Git Version Control กับ Ionic](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/Git-Version-Control-with-Ionic-Module7.jpg)
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
![การเก็บข้อมูลแบบ Local ด้วย Ionic Storage](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%81%E0%B9%87%E0%B8%9A%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%81%E0%B8%9A%E0%B8%9A-Local-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-Ionic-Storage-Module8.jpg)
Module 8: การเก็บข้อมูลแบบ Local ด้วย Ionic Storage
- การติดตั้ง Storage
- ขั้นตอนการใช้งานและเก็บข้อมูลแบบ Key/Value
- การใช้งาน Ionic Storage เพื่อเก็บข้อมูลแบบฐานข้อมูล (SQLite) แสดง เพิ่ม ลบ แก้ไข
- การใช้งาน Ionic View สำหรับทดสอบบนเครื่องจริง
![การใช้งาน web API (httpclient) แบบ RESTful Web Service](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-RESTful-Web-Service-Module9.jpg)
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
![การใช้งาน Ionic Native](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-Ionic-Native-Module11.jpg)
Module 10: การใช้งาน Ionic Native
- กำหนด Runtime Permission
- การติดต่อกับกล้องถ่ายภาพ (Camera)
- การเขียนคำสั่งเรียกใช้งานกล้องถ่ายภาพ
- การเลือกภาพจาก gallery
- การอัพโหลดภาพที่ถ่ายขึ้น Server
- การใช้งาน Barcode และ QR Code Scanner
- การใช้งาน InAppBrowser
- การใช้งาน Toasts
![การปรับแต่งรายละเอียดของแอพพลิเคชั่น](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/icon-splash-screen-ionic-module15.jpg)
Module 11: การปรับแต่งรายละเอียดของแอพพลิเคชั่น
- การปรับแต่งไอคอน (Icon) และ Splash Screen ของแอพ
- การปรับเปลี่ยนชื่อและไอดีของแอพ
- การปรับแต่งการแสดงผลแอพ แนวตั้ง หรือแนวนอนตามต้องการ
![แนวทางการ Publish App ขึ้น Store](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-publish-app-to-store-module20.jpg)
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
![Template Ionic สำหรับแอพร้านอาหาร](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-bonus-template-app.jpg)
![Template Ionic สำหรับแอพร้านอาหาร](https://www.itgenius.co.th/backend/assets/ckfinder/userfiles/images/ionic-bonus-template-app-food.jpg)
Bonus พิเศษส่งท้าย
- แถม Template Ionic สำหรับแอพอ่านข่าว แอพร้านอาหาร และแอพถ่ายภาพแสดงแกลอรี่
- แถมไฟล์ภาพ Icon และ Splash Screen ที่ออกแบบจาก Photoshop (PSD)