จัดอบรม Flutter 2 Workshop (สำหรับผู้เริ่มต้น) โดยสถาบันไอทีจีเนียส

อบรมออนไลน์ (สอนสด)

12 - 27 มิถุนายน 2021

อาจารย์สามิตร โกยม

21 ชั่วโมง

ภาพรวมหัวข้อการอบรม

Module 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows
Module 2: อัพเดทสิ่งใหม่ๆ ในภาษา Dart 2.1x ของปี 2021
Module 3: การขึ้นโปรเจ็กต์ Flutter 2 เพื่อรองรับโปรเจ็กต์ขนาดใหญ่
Module 4: การออกแบบ Layout แบบต่างๆ ตามยุคสมัยของปี 2021
Module 5: การเตรียมระบบหลังบ้านสำหรับออก API ด้วย WordPress ล่าสุด
Module 6: ขึ้นโปรเจ็กต์ Workshop ระบบการดึงข่าวจาก API (News App)
Module 7: การทำระบบ Login ด้วย Facebook และ Google API
Module 8: การเขียน ListView ดึงข่าวแบบต่างๆ (Listview แนวตั้งและแนวนอน)
Module 9: การทำ Infinite scroll listview และ RefreshIndicator
Module 10: การทำระบบแจ้งเตือน Pushnotification ด้วย One Signal และ Firebase
Module 11: การทำแอพรองรับ 2 ภาษาขึ้นไป (Multi Language Support)
Module 12: การ Build และ Deployed โปรเจ็กต์บน Android และ iOS เพื่อนำไปใช้งาน

รายละเอียดหลักสูตร

Module 1: การเตรียมเครื่องมือและความพร้อมทั้งบน Mac และ Windows

วิธีการติดตั้งเครื่องมือและ flutter sdk บนระบบ Windows
วิธีการติดตั้งเครื่องมือและ flutter sdk บนระบบปฎิบัติการ MacOS
การทดสอบการทำงานทั้งบน Mac และ Windows
การติดตั้ง Visual Studio Code พร้อมส่วนเสริมที่จำเป็น
การสร้าง Emulator และ Simulator บน Android และ iOS
การใช้ flutter ตรวจเช็คความพร้อมของระบบ

Module 2: อัพเดทสิ่งใหม่ๆ ในภาษา Dart 2.1x ของปี 2021

รู้จัก sound null-safety ใน Dart V.2.x
การกำหนด typedef ใน Dart
การทำงานกับ Class และ Constructor
การเรียกใช้งาน Library ต่าง ๆ
การเขียนโปรแกรมแบบ Asynchronous Programming
การจัดการกับ Exceptions ใน Dart
เรียนรู้และจัดการกับ date and time ใน Dart

Module 3: การขึ้นโปรเจ็กต์ Flutter 2 เพื่อรองรับโปรเจ็กต์ขนาดใหญ่

การจัดวางโครงสร้างไฟล์ต่าง เพื่อรองรับโปรเจ็กต์ที่มีขนาดใหญ่ขึ้นในอนาคต
การแบ่งส่วนการแสดงผล แยกไฟล์ screen , theme, style, model, services และ widget ต่าง ๆ เป็นส่วนย่อย ๆ
การเรียกใช้งานซ้ำจากส่วนต่าง ๆ ที่สร้างไว้
การสร้างไฟล์เก็บข้อมูลค่าคงที่ (constant) และ global variable ต่าง ในโปรเจ๊ก พร้อมการเรียกใช้งาน
นำโครงสร้างที่ได้ไปใช้ซ้ำกับโปรเจ็กอื่น ๆ ได้

Module 4: การออกแบบ Layout แบบต่างๆ ตามยุคสมัยของปี 2021

การวาง Layout แบบ Bottomnav เมนู
การสร้าง Layout ร่วมกับเมนูด้านข้าง (Drawer Menu)
การสร้าง Layout ร่วมกับ Tabbar Menu
การปรับแต่ง Layout ให้รองรับทั้ง Mobile และ Tablet

Module 5: การเตรียมระบบหลังบ้านสำหรับออก API ด้วย WordPress ล่าสุด

การเซ็ตอัพ WordPress บนเว็บ Server เช่น Apache ผ่าน XAMPP
การเพิ่มหมวดหมู่และ Content บน WordPress สำหรับเรียกใช้งานผ่าน API
การเปิดใช้งาน API บน WordPress
การกำหนด Auth แบบ JWT บน WordPress Rest API

Module 6: ขึ้นโปรเจ็กต์ Workshop ระบบการดึงข่าวจาก API (News App)

แนะนำภาพรวมโปรเจ็กต์แสดงข่าวจาก Web API
ขึ้นโปรเจ็กต์แบบรองรับการจัดการ State ด้วย Provider
ออกแบบ Layout หลักในแอพประกอบด้วย Bottom Navigation , Drawer Menu, Tabbar Menu และ Listview สำหรับแสดงข่าวแบบต่าง ๆ ทั้งแนวตั้งและแนวนอน
สร้าง Model สำหรับใช้แสดงข่าว
สร้าง Server Rest API เพื่อดึงข่าวตามหมวดหมู่ ดึงรายละเอียดข่าว ออกมาแสดงบนแอพ

Module 7: การทำระบบ Login ด้วย Facebook และ Google API

การเตรียมความพร้อม Account Faebook เปิดใช้งานในส่วน Developer Console
สร้าง App ID ใน Facebook สำหรับนำมาผูกใน Flutter App
เขียนคำสั่งเชื่อมต่อกับ Facebook API
การเตรียมความพร้อม Account Google และเปิดใช้งาน Google Dev Console
สร้าง App ID ใน Google Console พร้อมตั้งค่าต่างๆ ที่จำเป็น
ทำการ Config Google App ID เข้ากับ Flutter แอพ
เขียนคำสั่งเชื่อมต่อกับ Google API

Module 8: การเขียน ListView ดึงข่าวแบบต่างๆ (Listview แนวตั้งและแนวนอน)

เรียนรู้แนวทางการออกแบบ ListView พื้นฐาน
การออกแบบ ListView ทั้งแนวตั้งและแนวนอน ในหน้าเดียวกัน พร้อมดึงข้อมูลจาก Web API มาแสดง
การปรับแต่ง List View ให้แสดงผลให้อย่างถูกต้อง ทั้งบน Mobile และ Tablet

Module 9: การทำ Infinite scroll listview และ RefreshIndicator

การดึงข่าวสารจำนวนมาก แบบมีการแบ่งส่วนการแสดงผลทีละชุด เมื่อผู้ใช้เลื่อนไปถึงจุดท้ายสุดให้โหลดเนื้อหาใหม่ มาเติมอัตโนมัติแบบ Infinite scroll listview
การอัพเดทหรือรีโหลดเนื้อหาโดยการใช้ RefreshIndicator คล้ายๆ กับ Pull to refresh ใน Android
การประยุกต์ใส่ทั้ง Infinite scroll listview และ RefreshIndicator ในเพจเดียวกัน

Module 10: การทำระบบแจ้งเตือน Pushnotification ด้วย One Signal และ Firebase

แนะนำ One Signal สำหรับทำ Pushnotification
สมัครและเปิดใช้งาน One Signal ฟรี
เชื่อมต่อ One Signal เข้ากับ Google Firebase
เขียนคำสั่งเชื่อมต่อกับ One Signal API ใน Flutter
เขียน Feature สำหรับให้ผู้ใช้สามารถเปิด/ปิด การแจ้งเตือนในแอพได้
ทดสอบระบบแจ้งเตือนทั้งบน iOS และ Android

Module 11: การทำแอพรองรับ 2 ภาษาขึ้นไป (Multi Language Support)

เพิ่ม package จัดการหลายภาษาลงในไฟล์ pubspec.yaml (Update pubspec.yaml)
การสร้าง json ไฟล์แยกภาษาที่ต้องการ (Create the language files)
สร้าง Delegate Class สำหรับจัดการเลือกภาษา (Create Delegate Class)
จัดการแสดงผลภาษาในส่วนของ UI (Translating text in the UI)
บันทึกข้อมูลภาษาที่เลือกไว้ลงในเครื่องด้วยการใช้ provider และ shared_preferences (changing App language manually)
ปรับแต่งการแสดงผลให้เหมาะสมในงานจริง (Custom for your app)

Module 12: การ Build และ Deployed โปรเจ็กต์บน Android และ iOS เพื่อนำไปใช้งาน