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

ตัวอย่าง workshop บางส่วนในหลักสูตรนี้

รายละเอียดเนื้อหาการอบรม

Module 1: แนะนำภาพรวมการพัฒนา Mobile Application

• เข้าใจรูปแบบการพัฒนาแอพพลิเคชั่นบน mobile แบบต่างๆ
• แนะนำแนวทางพัฒนาแอพแบบ Cross Platform
• รู้จัก Google Flutter framework กับการพัฒนาแอพแบบ Cross Platform
• สิ่งที่ต้องรู้และข้อควรระวังต่างๆ ในการพัฒนาแอพในรูปแบบต่างๆ

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

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

Module 3: เริ่มต้นกับ Flutter และการสร้าง Mobile Application

• เริ่มต้นสร้างโปรเจ็กต์ใหม่ใน flutter
• รู้จักโครงสร้างของโปรเจ็กต์พื้นฐาน
• ทดสอบรันโปรเจ็กต์ผ่าน Emulator ของ Android และ Simulator บน iOS
• ทดสอบรันโปรเจ็กต์บนอุปกรณ์จริง

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

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

Module 5: เขียนแอพนับจำนวนตัวเลข (Counter)

• การเตรียมโปรเจ็กต์ให้พร้อม
• แนะนำฟังก์ชันการทำงานเริ่มต้นใน Flutter
• รู้จัก Widget ใน flutter และการประกาศใช้งาน
• ทำความรู้จักโครงสร้างแอพด้วย MaterialApp Widget อย่างละเอียด
• รู้จัก Scaffold Widget สำหรับสร้างหน้าแอพอย่างละเอียด พร้อมการปรับแต่งค่าและคุณสมบัติต่างๆ ที่จำเป็นต้องรู้
• การกำหนด Theme ให้แอพที่สร้างขึ้น

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

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

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

      Module 8: แนวทางการขึ้นโครงสร้างโปรเจ็กต์รองรับงานขนาดใหญ่ขึ้น

      Module 9: workshop การออกแบบแอพวัดค่า BMI ของร่างกาย

      Module 10: workshop แอพบันทึกข้อมูลเบอร์โทรศัพท์ (Contact list)

      Module 11: การตรวจสอบการทำงาน (Debugging) ของแอพ

      Module 12: การเขียนแอพเชื่อมต่อ Web API ภายนอก

      • • State คืออะไรใน flutter
        • รู้จักและทำงานกับ Widget แบบ StatelessWidget
        • รู้จักและทำงานกับ Widget แบบ StatefulWidget
        • การเขียนฟังก์ชันใน StatelessWidget / StatefulWidget และเรียกใช้งาน
        • ปัญหาของ state ใน flutter และแนวทางการจัดการในอนาคต
        • การจัดวางโครงสร้างไฟล์ต่างๆ เพื่อรองรับโปรเจ็กต์ที่มีขนาดใหญ่ขึ้นในอนาคต
        • การแบ่งส่วนการแสดงผล แยกไฟล์ screen , theme, style, model, services และ widget ต่างๆ เป็นส่วนย่อยๆ
        • การเรียกใช้งานซ้ำจากส่วนต่างๆ ที่สร้างไว้
        • การสร้างไฟล์เก็บข้อมูลค่าคงที่ (constant) และ global variable ต่างๆ ในโปรเจ็กต์ พร้อมการเรียกใช้งาน
        • นำโครงสร้างที่ได้ไปใช้ซ้ำกับโปรเจ็กต์อื่นๆ ได้
        • ออกแบบแอพด้วย layout ที่ได้เรียนมา
        • การปรับแต่ง Witget ต่าง ๆ (Custom flutter widget)
        • เรียนรู้การใช้งาน GestureDetector Widget
        • การใช้งาน Slider Widget
        • การสร้างแอพมากว่า 1 หน้าจอ และการทำ Routing เปลี่ยนหน้าจอไปมา
        • การเขียนเงื่อนไขตรวจสอบการแสดงผลของ UI
        • การออกแบบหน้าจอ Login ด้วย Textfile, Password field และปุ่มกดต่างๆ
        • การสร้างหน้า List View , List tile พร้อมการใส่ Event ให้สามารถกดดูรายละเอียดภายในได้
        • การดึงภาพมาแสดงใน List view
        • การแสดง Icon ต่าง ๆ ใน Listview
        • การปรับแต่ง ListView ให้เหมาะสมกับการทำงาน
        • แนะนำวิธีการ Debug Application flutter
        • การเซ็ต breakpoint และการรันตาม step
        • การจัดการ breakpoint และการไล่ดูปัญหาต่างๆ ที่เกิดขึ้น
        • เรียนรู้การทำงานของ Web API
        • เรียกดูข้อมูล Web API จากภายนอก
        • สร้างโปรเจ็กต์ดึงข้อมุล API จากกรมควบคุมโรค เพื่อดึงสถิติ Covid 19
        • ใช้ ListView และ ListTile สร้าง Layout
        • ติดตั้ง package ที่จำเป็นสำหรับการทำงานกับ http
        • เรียนรู้การทำงานแบบ Asynchonous ในภาษา Dart
        • การเรียกข้อมูลจาก Web API ด้วย HTTP
        • สร้างไฟล์ Class สำหรับเก็บข้อมูล JSON (model)
        • การแปลง JSON เป็น Object ตัวแปรใน State
        • แก้ปัญหากรณีมีค่าเป็น null
        • ปรับแต่งแอพพลิเคชั่นให้มีความสวยงาม เช่นใส่ loading ใส่พื้นหลัง เป็นต้น