Flutter 3 Workshop (สำหรับผู้เริ่มต้น)

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 ของปี 2023

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

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

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

Module 4: การออกแบบ Layout แบบต่างๆ

• การวาง 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 เพื่อนำไปใช้งาน

• การเปลี่ยนภาพ Icon ของแอพ
• การเปลี่ยนชื่อและแพคเกจของแอพ
• การ Sign app สำหรับ Android และ iOS
• การ Configuration ส่วนต่างๆ ของแอพใน Android และ iOS ก่อนทำการ Build
• การ Building app สำหรับการ Release ทั้ง Android และ iOS