Flutter advanced (ขั้นสูง)

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

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

• การออกแบบด้วย Material Advanced Components
• การออกแบบแอพส่วนของ iOS ด้วย Cupertino (Building a Cupertino app with Flutter for iOS)
• การทำแอพให้รองรับหลายภาษา (Localization and Multi Language in flutter)
• การใช้งานฐานข้อมูลภายในแอพด้วย SQLite (Using SQLite in Flutter)
• การอัพโหลดไฟล์ภาพผ่าน API (Upload Images To REST API)
• การทำงานกับ Google Firebase (Firestore CRUD in Flutter)
• ทำระบบ Chat แบบเรียลไทม์ (Realtime chat with firebase in flutter)
• การอัพโหลดรูปภาพด้วย firebase (Firebase Image Upload)
• พัฒนาระบบแจ้งเตือน (Push Notifications in Flutter using Firebase)
• เขียนระบบด้วยโครงสร้างแบบ MVC (Flutter  MVC design pattern)
• จัดการ State ด้วย Bloc (State management with Bloc)
• การบันทึกเสียงใน flutter (Flutter Audio Recorder)
• การเล่นวิดีโอ (Flutter Video Player)
• การเขียนระบบเชื่อมต่อกับ Youtube API (Flutter YouTube API and Video Player)
• การติดต่อกับอุปกรณ์และเซ็นเซอร์ต่างๆ บนมือถือ (Flutter with Device API)
• การเตรียมความพร้อมแอพและอัพโหลดขึ้น Store (Build and published app to store)

Module 1: การออกแบบด้วย Material Advanced Components

• ติดตั้ง flutter และกำหนดสภาพแวดล้อม (Set up your Flutter environment)
• เพิ่มส่วนของ backdrop เมนู (Add the backdrop menu)
• เพิ่มการทำรูปทรงต่างๆ (Add a shape)
• เพิ่มการทำ motion (Add motion)
• เพิ่มเมนูส่วน back layer (Add a menu on the back layer)
• เพิ่มไอคอนแสดงแบรนด์ของแอพ (Add a branded icon)

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

Module 2: การออกแบบแอพส่วนของ iOS ด้วย Cupertino (Building a Cupertino app with Flutter for iOS)

• ติดตั้ง flutter และกำหนดสภาพแวดล้อม (Set up your Flutter environment)
• สร้างและกำหนดค่าเริ่มต้นสำหรับ Cupertino (Create the initial Cupertino app)
• กำหนดโครงสร้างของแอพเป็น 3 แท็บ (Create structure for a 3-tab app)
• เพิ่มส่วนการจัดการ State (Add state management)
• ใช้ list view แสดงรายการ (List products for sale)
• ทำส่วนการค้นหาข้อมูลใน List (Add product search)
• ปรับแต่งส่วนของข้อมูลลูกค้า (Add customer info)
• เพิ่มส่วนการแสดงวันเวลา (Add date picker)
• เพิ่มส่วนการเลือกข้อมูลใน List (Add selected items for purchase)

Module 3: การทำแอพให้รองรับหลายภาษา (Localization and Multi Language in flutter)

• การเตรียมโปรเจ็กต์ 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)
• ปรับแต่งการแสดงผลให้เหมาะสมในงานจริง (Custom for your app)

Module 4: การใช้งานฐานข้อมูลภายในแอพด้วย SQLite (Using SQLite in Flutter)

• การใช้ SQLite ใน flutter เบื้องต้น ติดตั้ง plugin SQFLITE (SQLite in Flutter: SQFLITE plugin)
• สร้างส่วนของ model (Implementing Model Class)
• สร้างส่วนของ helper สำหรับทำเรียกดู เพิ่ม ลบ แก้ไข(Creating DatabaseHelper Class: CRUD Operation)
• เชื่อมต่อฐานข้อมูลกับส่วนแสดงผล (Connect database to UI)
• ปรับแต่างการแสดงข้อมูลจาก SQLite ในส่วนการแสดงผล (Custom to display data to UI)

Module 5: การอัพโหลดไฟล์ภาพผ่าน API (Upload Images To REST API)

• สร้างโปรเจ็กต์สำหรับใช้ทดสอบการอัพโหลดรูป (Prepare and create project)
• เพิ่ม package สำหรับการจัดการ network และจัดการไฟล์ใน pubspect.yaml (Install the dependencies in pubspec.yaml)
• กำหนด layout สำหรับเลือกไฟล์ภาพ (Create layout for add image)
• เรียกใช้งาน image_picker (Adding the Image Picking Feature)
• เขียน Rest API ส่วน backend ด้วย Laravel สำหรับอัพโหลดไฟล์ภาพ (Backend Setup To Handle The Image Upload Process)
• เขียน Logic ส่วนการอัพโหลดไฟล์รูปใน flutter (Implementing The Image Upload Feature)

Module 6: การทำงานกับ Google Firebase (Firestore CRUD in Flutter)

• สร้างโปรเจ็กต์ flutter (Creating a New Firebase Project)
• ติดตั้ง firebase ลงใน project android (Android Firebase Project Setup)
• ติดตั้ง firebase ลงใน project iOS (iOS Firebase Project Setup)
• Firebase Flutter Packages Setup (iOS & Android)
• Registering Users with Firebase using FirebaseAuth
• Authenticating Users with FirebaseAuth
• Showing a Spinner while the User Waits
• Saving Data into Cloud Firestore
• Listening for Data from Firebase using Streams
• Update Data into Cloud Firestore
• Delete Data into Cloud Firestore
• Turning Streams into Widgets Using the StreamBuilder
• Cloud Firestore Authorisation and Security Rules

Module 7: ทำระบบ Chat แบบเรียลไทม์ (Realtime chat with firebase in flutter)

• Creating an Authentication Form
• Connecting Auth Form & Auth Screen
• Implementing Authentication
• Storing Extra User Data
• Finishing Authentication & Logout
• Adding Firebase Security Rules
• Listening to Chat Messages
• Sending & Ordering Chat Messages
• Creating a Basic Chat Bubble Widget
• Improving the Chat Bubbles
• Testing on Multiple Devices
• Displaying User Names

Module 8: การอัพโหลดรูปภาพด้วย firebase (Firebase Image Upload)

• Adding an Image Picker
• Preparing File Upload & Validating Images
• Uploading Images
• Improving Image Upload
• Running on a Real iOS Device
• Displaying Images

Module 9: พัฒนาระบบแจ้งเตือน (Push Notifications in Flutter using Firebase)

• Creating a Firebase project
• Integrating the firebase_messaging package
• Android-specific configurations
• iOS-specific configuration
• Initializing the packages in Dart-Code
• Sending Notifications with the Firebase console

Module 10: เขียนระบบด้วยโครงสร้างแบบ MVC (Flutter  MVC design pattern)

• What is the MVC Design Pattern?
• The MVC Approach
• Install package for mvc
• Create project with mvc structure
• The Controller
• The Model
• The View

Modlue 11: จัดการ State ด้วย Bloc (State management with Bloc)

• What is BLoC pattern?
• Concepts for Bloc Events, States, Transition
• Implementing the BLoC pattern
• Creating Events
• Creating BLoC
• Creating the UI
• Running the app

Module 12: การบันทึกเสียงใน flutter (Flutter Audio Recorder)

• Install project and add package flutter_sound 
• Config on iOS
• Subscriptions
• Default uri path
• Creating instance.
• Starting recorder with listener.
• Stop recorder
• Start player
• Stop player
• Pause player
• Resume player
• Seek player
• Setting volume

Module 13: การเล่นวิดีโอ (Flutter Video Player)

• Setup flutter project
• Add package video_player in pubspect.yaml
• Implement for video player
• Custom to display video in view
• Test on real device

Module 14: การเขียนระบบเชื่อมต่อกับ Youtube API (Flutter YouTube API and Video Player)

• Create flutter project and add "youtube_player_flutter" dependencies
• Config to iOS in Info.plist
• Create project and enable api in google developer console
• Get Youtube Data API Key
• Create Model in flutter
• Create Video modal
• Create api service
• Display video in listview
• Play video in screen UI

Module 15: การติดต่อกับอุปกรณ์และเซ็นเซอร์ต่างๆ บนมือถือ (Flutter with Device API)

• WebView 
• Bluetooth 
• Calendar
• File Picker
• Battery
• NFC Reader

Module 16: การเตรียมความพร้อมแอพและอัพโหลดขึ้น Store (Build and published app to store)

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