Flutter 3 Full Stack Workshop

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

• Section 1: การเตรียมเครื่องมือและความพร้อม
• Section 2: การปรับแต่งข้อมูลแอพที่สร้างขึ้น
• Section 3: เข้าใจการทำงานกับ State พื้นฐานใน Flutter
• Section 4: Flutter Layout ที่สำคัญสำหรับผู้เริ่มต้น
• Section 5: โครงสร้างโปรเจ็กต์รองรับงานขนาดใหญ่ขึ้น
• Section 6: การใช้งานฐานข้อมูล MySQL ผ่าน API (Node JS)
• Section 7: การอัพโหลดไฟล์ภาพผ่าน API (Node JS)
• Section 8: Workshop CRUD ข้อมูลสินค้าจาก NodeJS API
• Section 9: จัดการ State ด้วย Provider
• Section 10: จัดการ State และ Route ด้วย GetX
• Section 11: การทำแอพให้รองรับหลายภาษา
• Section 12: การเตรียมความพร้อมแอพและอัพโหลดขึ้น Store

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

Section 1: การเตรียมเครื่องมือและความพร้อม

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

Section 2: การปรับแต่งข้อมูลแอพที่สร้างขึ้น

• การเปลี่ยนชื่อแอพและ id ของแอพ
• การเปลี่ยน icon ของแอพทั้ง android และ ios
• การเปลี่ยนภาพหน้าจอเริ่มต้น (Splash screen) บน android และ ios
• วิธีติดตั้ง package ต่างๆ เข้ามาใน google flutter
• ทดสอบเรียกใช้ package และการนำไปใช้งานที่อื่น

Section 3: เข้าใจการทำงานกับ State พื้นฐานใน Flutter

• State คืออะไรใน flutter
• รู้จักและทำงานกับ Widget แบบ StatelessWidget
• รู้จักและทำงานกับ Widget แบบ StatefulWidget
• การเขียนฟังก์ชันใน StatelessWidget / StatefulWidget และเรียกใช้งาน
• ปัญหาของ state ใน flutter และแนวทางการจัดการในอนาคต

Section 4: Flutter Layout ที่สำคัญสำหรับผู้เริ่มต้น

• แนวทางการออกแบบแอพ layout ที่จำเป็น
• รู้จัก Center Widget และการนำมาใช้งาน
• รู้จัก Container Widget และการใช้งาน
• การใช้งาน BoxDecoration ร่วมกับ Container widget
• การใช้ Row และ Column Widget
• การจัดวาง layout ด้วย Stack Widget
• การใช้งาน Expanded ขยายขนาดพื้นที่ให้อัตโนมัติ
• การใช้าน SizedBox Widget
• การประยุกต์ใช้ Align Widget ที่น่าสนใจ
• แก้ปัญหาการแสดงผลในอุปกรณ์ด้วย SafeArea Widget
• การจัดการกับรูปภาพและ assets ต่างๆ ใน flutter
• การใช้งาน Icon ใน flutter
• การเพิ่มฟอนต์และเรียกใช้งานในแอพ flutter

Section 5: โครงสร้างโปรเจ็กต์รองรับงานขนาดใหญ่ขึ้น

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

Section 6: การใช้งานฐานข้อมูล MySQL ผ่าน API (Node JS)

• เชื่อมต่อ API กับฐานมูล MySQL
• อ่านข้อมูลจาก MySQL ผ่าน API
• เพิ่ม ลบ แก้ไข ข้อมูลใน MySQL ผ่าน API

Section 7: การอัพโหลดไฟล์ภาพผ่าน API (Node JS)

• ติดตั้ง library multer ใน NodeJS สำหรับอัพโหลดไฟล์และรูปภาพ
• ทดสอบอัพโหลดไฟล์ภาพผ่าน API ของ Node.JS
• ลบไฟล์ที่อัพโหลดผ่าน API

Section 8: Workshop CRUD ข้อมูลสินค้าจาก NodeJS API

• ติดตั้ง Library Dio ใน Flutter สำหรับอ่านข้อมูลจาก http
• Config Dio อ่าน Token จาก JWT และ Sharepreference
• อ่านข้อมูลสินค้ามาแสดงใน List View และ Grid View (สามารถสลับการแสดงผลได้)
• เพิ่มรายการใหม่ผ่าน Form พร้อมอัพโหลดไฟล์ภาพสินค้าโดยดึงจาก Gallery หรือถ่ายจากกล้องได้
• สามารถ Crop รูปตามขนาดที่ต้องการได้
• แก้ไขรายการสินค้าที่ต้องการ พร้อมอัพโหลดไฟล์รูปใหม่และลบรูปเก่าออกได้
• ลบรายการสินค้าที่ต้องการออกได้

Section 9: จัดการ State ด้วย Provider

• เรียนรู้ปัญหาการจัดการ State Management ใน flutter เบื้องต้น
• การจัดการปัญหา state ด้วย Provider สำหรับผู้เริ่มต้น
• การแยกส่วน class การทำงานของ provider ให้เหมาะสมต่อการเรียกใช้งานในโปรเจ็กต์ขนาดใหญ่ขึ้น

Section 10: จัดการ State และ Route ด้วย GetX

• รู้จัก GetX
• การติดตั้งและเรียกใช้งาน
• การจัดการ State
• การจัดการ Route
• การจัดการ Dependency
• ทำแอบให้รองรับหลายภาษา
• เปลี่ยน Theme
• เชื่อมต่อ Rest API ด้วย Get Connect
• เก็บข้อมูลลงเครื่องด้วย Get Storage

Section 11: การทำแอพให้รองรับหลายภาษา

• การเตรียมโปรเจ็กต์ flutter สำหรับรองรับหลายภาษา (Prepare Your Project)
• เพิ่ม 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)

Section 12: การเตรียมความพร้อมแอพและอัพโหลดขึ้น Store

• Preparing the Code
• Preparing the App Configuration
• Preparing Third-Party Services
• Adding Icons & Splash Screens
• Publishing Android Apps
• Publishing iOS Apps

ตัวอย่าง Workshop Flutter 3 Full Stack (Mobile Application)

ตัวอย่าง Workshop NodeJS Rest API TypeScript (Backend API)