Preview unavailable

เริ่มต้นกับ Flutter และการสร้าง Mobile App

• รู้จักกับ Flutter

• รู้จักกับภาพรวมขั้นตอนการสร้าง Mobile Application เบื้องต้น

• ทำความเข้าใจความแตกต่างของของ Mobile Application กับ Web Application

• ทดสอบกันหน่อย

วิธีติดตั้งโปรแกรมสำหรับคนใช้ Windows

• หมายเหตุ สำหรับคนที่ต้องการทดสอบแอพบนระบบ iOS และ iOS Simulator

• วิธีติดตั้ง Chocolatey1

• วิธีติดตั้ง Java Development Kit (JDK)3

• วิธีติดตั้ง Flutter SDK บน Windows

• การติดตั้ง Git Client

• วิธีติดตั้ง Android Studio บน Windows

• ติดตั้ง Visual Studio Code

วิธีติดตั้งโปรแกรมสำหรับคนใช้ MacOS

• การติดตั้ง Homebrew8

• วิธีติดตั้ง Java Development Kit ด้วย Homebrew

• วิธีติดตั้ง Flutter SDK ผ่าน Homebrew2

• ติดตั้ง Android Studio และ Android SDK บน macOS

• ใช้ Flutter Doctor ตรวจความเรียบร้อยของระบบ Android และวิธีแก้ปัญหา1

• วิธีการติดตั้ง Xcode

• วิธีการติดตั้ง CocoaPods

• ติดตั้ง Visual Studio Code บน Mac (ใช้ได้ทั้งเครื่อง Intel และ M1/M2) 2

การสร้างแอพแรก และทำความเข้าใจโครงสร้างของโปรเจค

• เช็คความพร้อมของระบบ ด้วยคำสั่ง Flutter doctor6

• วิธีสร้างโปรเจคแอพ Flutter ด้วยโปรแกรม Visual Studio Code3

• เทคนิค: สร้างโปรเจคแบบไม่ใช้ตัวช่วย3

• รู้จักกับโครงสร้างของโปรเจค

การทดสอบแอพพลิเคชั่นบน Android ทั้งแบบ Emulator และอุปกรณ์จริง

• วิธีสร้าง Android Virtual Device2

• ทดสอบแอพพลิเคชั่นบน Android Virtual Device7

• ทำความเข้าใจการทดสอบแอพบนอุปกรณ์ Android

• การปลดล๊อค Developer Option ให้ Android ต่อกับ VSCode ได้

• แนวทางการหา และติดตั้ง USB Driver

• การเชื่อมต่อระบบ Windows เข้ากับอุปกรณ์พกพา

การทดสอบแอพพลิเคชั่นบนอุปกรณ์ iOS

• ข้อควรรู้เกี่ยวกับการทดสอบแอพ iOS

• การรัน iOS Simulator

• การรันแอพพลิเคชั่นทดสอบบน iOS Simulator6

• การรันแอพบนอุปกรณ์ iOS - การเชื่อมต่อครั้งแรก

• การรันแอพบนอุปกรณ์ iOS - การกำหนด Team Profile

• การรันแอพบนอุปกรณ์ iOS - การตรวจสอบ Apple ID และกำหนด Bundle Identifier

• การแก้ไขปัญหาที่พบบ่อย

• แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - ลืมปลดล๊อคเครื่อง

• แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - Maximum Limited App for free profile reach

การกำหนดชื่อแอพ และไอคอนของแอพ

• วิธีเปลี่ยนชื่อแอพพลิเคชั่น Android ใน Flutter

• วิธีเปลี่ยนชื่อแอพพลิเคชั่น iOS ใน Flutter

• แนะนำเว็บรวม Package สำหรับ Flutter

• วิธีติดตั้ง Package ของ Google Flutter3

• รู้จักกับระบบ Icon ใน Android

• วิธีสร้างไอคอนให้แอพ Android4

• วิธีสร้างไอคอนให้แอพ iOS

เขียนแอพตัวแรกของเรากัน

• ก่อนเริ่มต้น2

• มาเริ่มต้นจากบรรทัดแรกกัน

• จุดเริ่มต้นของแอพกับ function Main()2

• รู้จักกับ Widget ชิ้นส่วนสำคัญของแอพพลิเคชั่นใน Flutter

• วิธีเขียนประกาศใช้งาน Widget ในภาษาโปรแกรม Dart

• รู้จักกับคำสั่ง Import และการใช้งาน Widget ตัวแรก

• กำหนดโครงสร้างของแอพ ด้วย MaterialApp Widget

• ทำความเข้าใจ new keyword หายไปไหนจากภาษา Dart

• เทคนิคการเขียนใช้งาน Widget หลายตัวซ้อนกัน

• สร้างโครงหน้าแอพด้วย Scaffold Widget

• กำหนด Theme ให้แอพพลิเคชั่น ผ่าน theme property3

เริ่มสร้างแอพ NUMBER COUNTER

• แนะนำ Stateless และ Stateful Widget แบบเข้าใจง่าย2

• สร้าง Stateless Widget ตัวแรกของเรากัน

• สร้าง Stateful Widget ตัวแรกของเรากัน

• วิธีใช้งาน Center Widget

• รู้จักวิธีเริ่มใช้งาน Column Widget

• วิธีกำหนดขนาด และสีสันของข้อความด้วย TextStyle

• รู้จักและใช้งานปุ่มกด

• แทรกค่าตัวนับ ใช้งานใน Text Widget

• รู้จักกับการสร้าง Interactivity ใน Widget

• กำหนดการทำงานของโปรแกรม จาก Event ของปุ่มกด

• รู้จักกับการทำงานของ State

• อัพเดตหน้าแอพ ด้วย setState() method

• อธิบาย: ทำไมเราควรเขียนโค้ดไว้ใน setState()

• เทคนิค: เขียน method แบบฝัง หรือแยกจาก Widget ดี?

แอพ Contact List แบบง่าย

• แนะนำก่อนเริ่มเวิร์คชอป

• ดาวน์โหลดไฟล์ zip ของโปรเจคนี้

• การคืนสภาพโปรเจคให้กับ Flutter Package

• การเตรียม Column Widget

• การสร้าง List Widget จากโค้ดภาษา Dart3

• สร้าง function สำหรับสร้าง List Widget และปรับใช้งาน

• ใช้ ListView เบื้องต้นกัน

• ใช้ ListTile กับ ListView แบบ custom function

• รู้จักกับ constructor method ของ ListView

• สร้าง ListView ด้วยวิธีมาตรฐานกับ ListView.Builder

• สร้าง Class Contact สำหรับเก็บข้อมูลผู้ติดต่อ

• เทคนิค: วิธีการเขียนกำหนด Constructor parameter แบบย่อ

• เรียกใช้งาน Class contact ในไฟล์ main

การตรวจสอบ และดูการทำงานของโค้ดในแอพพลิเคชั่น (Debugging)

• แนะนำการ Debug Application

• ใช้โหมด Run และ Breakpoint

• การจัดการ Breakpoint

โปรเจค Contact List ตอน 2

• รู้จักกับการจัดเก็บข้อมูลแบบ List

• วิธีประกาศตัวแปร List

• ใช้ข้อมูล List ด้วยคำสั่ง ListView.builder

• วิธีเพิ่มรูปภาพเพื่อนำมาใช้งานใน Project

• กำหนด pubspec เพื่อโหลดไฟล์รูปภาพเข้าแอพ (เรียกว่า Assets)

• รู้จักกับ Image Widget

• วิธีแสดงรูปภาพใน ListTile Widget

• ตอบสนองกับการกดเลือก โดยใช้ onTap() ใน ListTile

• ติดตั้ง package - url-launchers

• ทำให้แอพโทรออกไปที่เบอร์ในรายการ List กัน

แอพ Covid 19 Today

• แนะนำแอพ COVID-19 Today ส่วนที่ 1

• รู้จักกับการทำงานระหว่าง Web API และ Mobile App

• ดู Web API ของกรมควบคุมโรค

• ดาวน์โหลดโปรเจคจาก Github

• คืนสภาพโปรเจคที่ดาวน์โหลดมา

• ใช้ ListView และ ListTile สร้าง Layout

• ใช้งาน initState method รันโค้ดก่อน method build

• ติดตั้ง Http Package

• รู้จักกับการทำงานแบบ Asynchronous ในแอพพลิเคชั่น

• รู้จักวิธีใช้งาน Asynchronous ในภาษา Dart

• สร้าง Async method

• รู้จักกับ Future

• เรียกข้อมูลจาก Web API ด้วย HTTP

• สร้างไฟล์ Class สำหรับเก็บข้อมูล JSON

• รู้จักกับ QuickType.io

• วิธีใช้งานโค้ดจาก quicktype.io

• แปลง JSON เป็น object ตัวแปรใน State

• อัพเดต Widget ด้วยการ Setstate

• ตามหาต้นเหตุของ error confirmed null

• ให้ Dart เลือกแสดงค่าอื่นแทน null โดยใช้ ?? operator

• เก็บงาน แสดงจำนวนผู้ป่วยที่หายแล้ว ยังอยู่ในโรงพยาบาล และเสียชีวิต

แอพ Covid-19 Today ส่วนที่ 2

• แนะนำแอพ COVID-19 Today ส่วนที่ 2

• เพิ่ม LinearProgressIndicator ลงใน Column

• ใช้ If else ควบคุมการแสดง LinearProgressIndicator

• ประกาศใช้งาน FutureBuilder ในหน้าแอพ

• การใช้ builder และ snapshot แสดง widget ตามการทำงานของ async method

• การใช้งาน data จาก snapshot

• สร้างตัวแสดงยอดสถิติของเราเอง

• กำหนดและจัดเรียงยอดสถิติใน Widget

• สร้าง Widget StatBox เพื่อใช้ซ้ำ

• กำหนดค่า property ให้ Widget เพื่อใช้งาน

• กำหนดหน้าตาของ StatBox และใช้ข้อมูล

• แทนที่ยอดสถิติเดิม ด้วย Statbox

• สร้างระยะห่างระหว่าง Widget ใน Column ด้วย SizedBox

• ติดตั้ง package สำหรับการแสดงจำนวนหลักพัน

• จัด Format ตัวเลขหลักพันด้วย NumberFormat

• กำหนดสิทธิ์ Permission เพื่อเชื่อมต่ออินเตอร์เน็ตเวลาทำงานจริง

เข้าใจภาพรวมของการเผยแพร่แอพ บน Store ต่างๆ (App Distribution)

• รู้จักกับภาพรวม การส่งแอพเผยแพร่บน App Store และ Play Store

• รู้จักกับวิธีที่สโตร์ระบุตัวตนของแอพเรา

• รู้จักกับขั้นตอนสำคัญในการยืนยันความเป็นเจ้าของแอพของเรา

• Link สำหรับเข้าไปสมัคร Developer Account ของทั้ง 2 ระบบ

การสร้างไฟล์แอพพลิเคชั่นสำหรับทำไปใช้งานบน Play Store

• การติดตั้ง Flutter Automation package สำหรับการสร้างไฟล์ Android

• การสร้างไฟล์ Key store สำหรับ Android

• ตรวจดูไฟล์ key properties และ build.gradle ที่โดนแก้ไขด้วย Flutter Automation

• การสร้างไฟล์ Android App Bundle (AAB)2

• วิธีการสร้างไฟล์ Android Application Package (APK) แบบต่างๆ

วิธีสร้างไฟล์แอพ iOS และส่งขึ้น App Store

• เปิดไฟล์ Xcode Workspace และเช็ค Bundle Identifier

• สร้าง Bundle ID บน Apple Developer Program

• วิธีสั่ง Archive โปรเจคด้วย Xcode และแสดงใน Organizer

• วิธี Validate Archive ด้วย Organizer

• วิธีสร้างโปรไฟล์ของ App เราบน App Store Connect

• การ Validate App หลังจากสร้างโปรไฟล์ App บน App Store Connect

• วิธีสั่ง Distribute App จาก Organizer

• วิธีเลือก Build ให้กับโปรไฟล์ App ใน Apple store connect

แอพ My Timeline

• แนะนำแอพ My Timeline

• เตรียมพร้อมโปรเจค

• เพิ่ม Icon Button ใน App Bar

• รู้จักกับ Navigation และระบบ Route

• เขียนเรียกใช้ Navigator เพื่อสร้างการเปิดหน้าเพจ

• สร้าง และแนะนำการจัดเก็บหน้า New Post Page

• ใช้ Widget New Post Page กับคำสั่ง Navigator push

• รู้จักกับ Form และการรับข้อมูล

• สร้างแบบฟอร์มในหน้า New Post Page

• สร้างปุ่มสำหรับยืนยันการสร้างโพส

• กางปุ่มให้ชิดขอบหน้าจอด้านล่าง

• จัดรูปแบบ TextFormField

• กำหนดกลไกปุ่มโพส ให้เปิดย้อนกลับมาหน้าแรกได้

• สร้าง ListView สำหรับแสดงโพส

• เริ่มต้นสร้าง Widget สำหรับแสดงโพส

• กำหนดสีและขนาด Text เพื่อกำหนดความสำคัญ

• สร้างช่องแบ่งระหว่างโพสใน ListView

• ปรับ ListView ให้หร้อมสำหรับการใช้กับข้อมูลจริง

แอพ My Timeline ส่วนที่ 2 - เริ่มเรียนรู้จัดการแอพ ด้วย State Management Provider

• แนะนำส่วนประกอบสำคัญของ My Timeline ส่วนที่ 2

• รู้จักกับ State Management

• รู้จักกับ State Management- Provider

• ติดตั้ง Package Provider

• รู้จักกับ Provider

• สร้าง Provider สำหรับข้อมูล Posts

• สร้าง get method เพื่อให้ส่วนอื่น เข้าถึงข้อมูลใน Provider

• เขียนสร้าง fat arrow function ครั้งแรก

• สร้างฟังก์ชั่นเพื่ออัพเดตข้อมูลใน Provider

• รู้จักกับ Multiple Provider

• กำหนด MultiProvider ครอบ Widget ที่ต้องการในแอพ

• ปรับการตั้งค่า Provider เป็นรูปแบบ Fat Arrow Function

• รู้จักกับ Consumer

• ประกาศ Consumer เพื่อใช้ข้อมูลจาก Provider ในการอัพเดตข้อมูล

• ทดสอบการทำงานของ Provider และ Consumer ตอนเริ่มการทำงานของแอพ

• สร้างกลไกการตรวจสอบข้อมูลใน Form ด้วย FormKey

• สร้าง Validator Function ในการตรวจสอบข้อมูลของ TextFormField

• เช็คความยาวต่ำสุดของข้อความที่กรอกใน TextFormField

• ใช้ TextEditingController ในการดึงข้อความออกจาก TextFormField

• เพิ่มข้อความใหม่ ลงไปเก็บไว้ใน Provider

• ทดสอบการทำงานของ Provider ในการเพิ่มข้อมูลเข้า List

• ใช้ Template ที่เราออกแบบให้ ListView กับข้อมูลจาก Provider

• กำหนดให้โพสใหม่แสดงเป็นรายการแรกใน List

แอพแสกนบาร์โค้ด และคิวอาร์โค้ด (BARCODE & QR CODE)

• แนะนำแอพแสกน ส่วนที่ 2

การเรียกใช้งานแอพ YOUTUBE กับแอพ LINE จาก QR CODE ที่แสกนได้ในแอพ

• แนะนำแอพแสกน ส่วนที่ 2

• รู้จักกับ URL Scheme

• รู้จักกับ URL Scheme ของ Youtube

• วิธีตรวจเช็ค link YouTube จาก QR code

• ทดสอบการอ่านลิ้งค์ Youtube จาก QR Code

• แสดงปุ่มเปิดแอพ Youtube ถ้าพบว่าเป็น link Youtube

• ติดตั้งแพคเกจ url_launcher

• เขียนคำสั่งเปิดแอพ Youtube จากลิ้งค์ที่แสกนได้จาก QR Code

• ทดสอบเปิดคลิปวิดีโอบนแอพ Youtube จาก link ที่แสกนได้จาก QR Code

• วิธีเปิดคลิปวิดีโอ Youtube จาก Link ที่แสกนได้บนแอพ iOS

• รู้จักกับ URL Scheme ของแอพ Line

• แสดงปุ่มเปิดแอพ LINE ถ้าพบว่าเป็น link เกี่ยวข้องกับ LINE

• ทดสอบเปิดแอพ LINE จากลิ้งค์ที่แสกนได้จาก QR Code

แอพลงทะเบียน PART 1 - สร้างแบบฟอร์มสำหรับรับข้อมูล

• แนะนำ Workshop

• คำสั่งโคลนโปรเจค git clone https://github.com/teerasej/nextflow-flutter-registration-app-public.git

• สร้าง tab menu2

• สร้างหน้าลงทะเบียน

• วาง Layout ของแบบฟอร์มลงทะเบียน

• สร้างส่วนสำหรับกดถ่าย และแสดงรูปผู้ลงทะเบียน

• รู้จักกับการใช้งาน InkWell Widget

• สร้างเอฟเฟค Ink และ InkWell สำหรับบริเวณถ่ายรูปลงทะเบียน

• รู้จักกับปัญหา Bottom Overflow ที่เกิดจากการเรียกใช้ Keyboard

• ทดสอบการกรอกแบบฟอร์ม และปัญหา Overflow

• แก้ไขปัญหา Bottom Overflow ด้วย SingleChildScrollView

• สร้าง Class สำหรับเก็บข้อมูล จากแบบฟอร์มลงทะเบียน

• สร้าง FormKey เพื่อควบคุมการทำงานของ Form Widget

• การดึงข้อมูลออกจาก TextFormField มาใช้งาน

• วิธีเก็บข้อมูลจาก Form ทั้งหมด ลง Object ด้วย onSaved ของ TextFormField

• ทดสอบเก็บข้อมูลจากแบบฟอร์มด้วย onSave

• ทบทวน การตรวจสอบข้อมูลด้วย Validator

• ติดตั้ง package form_field_validator

• ตรวจจับข้อมูลที่ไม่ได้กรอกลงแบบฟอร์มด้วย RequiredValidator

• ตรวจจับการกรอก email ผิดรูปแบบ ด้วย EmailValidator และ MultiValidator

• แสดงแป้นคีย์บอร์ดสำหรับพิมพ์อีเมลล์

แอพลงทะเบียน PART 2 - การจัดเก็บข้อมูลไว้ที่ฝั่ง SERVER ด้วย FIREBASE

• รู้จักกับ Firebase

• วิธีลงทะเบียนเข้าใช้งานระบบ Firebase

• รู้จักกับรูปแบบของโปรเจค Firebase

• วิธีสร้างโปรเจค Firebase ใหม่สำหรับใช้งานกับแอพพลิเคชั่น

• รู้จักกับการนำระบบ Firebase มาใช้งานในโปรเจคโมบายล์แอพพลิเคชั่น Flutter ของเรา

• ติดตั้ง package Firebase_core

• วิธีการตั้งค่าใช้งาน Firebase บนระบบ Android

• วิธีการตั้งค่าใช้งาน Firebase บนระบบ iOS

• รู้จักการรองรับ กลไกเริ่มต้นการทำงานของ Firebase ด้วย Future Builder

• เริ่มต้นใช้งาน Firebase ด้วย FutureBuilder

• การเปิดใช้งาน Cloud FireStore บนโปรเจค Firebase

• ติดตั้ง cloud_firestore

• เรียกใช้งาน Cloud Firestore เพื่อบันทึกข้อมูลในหน้าลงทะเบียน

• ทดสอบการบันทึกข้อมูลลง Cloud Firestore

• ล้างแบบฟอร์มเมื่อบันทึกข้อมูลเสร็จ

แอพลงทะเบียน PART 3 - ถ่ายรูปผู้ลงทะเบียน

• รู้จักกับการทำงานของระบบกล้องถ่ายรูปที่เรียกใช้ได้ผ่านแอพ

• รู้จักกับ Permission

• ติดตั้ง package image_picker

• การตั้งค่าแอพ Android สำหรับการใช้งานกล้องถ่ายรูป

• การตั้งค่าแอพ iOS สำหรับการใช้งานกล้องถ่ายรูป

• วิธีเรียกใช้งานกล้องถ่ายรูป ด้วย Image Picker และเช็คที่อยู่ของไฟล์

• ทดสอบการใช้งานกล้องถ่ายรูปในแอพ Flutter

• แสดงรูปภาพที่ถ่ายได้ ด้วย Image Widget

• ทดสอบการทำงานหลังจากถ่ายรูป และกลับเข้ามาในแอพ

แอพลงทะเบียน PART 4 - อัพโหลดและจัดการไฟล์รูปภาพบน FIREBASE

• รู้จักกับแนวทางในการจัดการไฟล์ในแอพพลิเคชั่น

• รู้จักกับ Firebase Cloud Storage

• ติดตั้ง package - firebase_storage

• วิธีสร้าง storage bucket บน Firebase

• รู้จักกับคำสั่งการใช้งาน Cloud Storage และอัพโหลดไฟล์

• สร้างและเรียก function สำหรับอัพโหลดไฟล์รูปขึ้น Firebase Cloud Storage

• ทดสอบถ่ายและอัพโหลดรูปภาพขึ้น Firebase Cloud Storage

• กำหนด Rule สำหรับอัพโหลดไฟล์แบบไม่ต้อง login บน Firebase Cloud Storage

• ทดสอบอัพโหลดไฟล์รูปขึ้น Cloud Storage

• การกำหนดที่อยู่ของไฟล์ที่อัพโหลด

• แสดงป๊อปอัพสถานะการจัดเก็บข้อมูล

• ป้องกันการปิดป๊อปอัพโดยผู้ใช้

• เคลียร์ข้อมูลรูปภาพหลังอัพโหลดเสร็จแล้ว

• ทำการบันทึกชื่อไฟล์ไปที่ firestore เพื่อเชื่อมโยงไฟล์รูปกับข้อมูลผู้ลงทะเบียน