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

เริ่มต้นเรียนรู้สร้างแอพด้วย Google Flutter

เข้าใจการใช้งานคอร์ส

วิธีการใช้งานระบบเรียนออนไลน์เบื้องต้น (2:43)

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

รู้จักกับ Flutter (2:54)
รู้จักกับภาพรวมขั้นตอนการสร้าง Mobile Application เบื้องต้น (3:48)
ทำความเข้าใจความแตกต่างของของ Mobile Application กับ Web Application (5:10)
ทดสอบกันหน่อย 😉. เริ่มต้นกับ Flutter และการสร้าง Mobile App

การติดตั้งโปรแกรมที่จะใช้งาน

ติดตั้ง Visual Studio Code และส่วนเสริมที่เขียนโค้ดได้ง่ายขึ้น (2:34)

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

คำแนะนำเบื้องต้น สำหรับคนใช้ Windows
ดาวน์โหลด Flutter SDK สำหรับ Windows (1:24)
การติดตั้งและตั้งค่า Flutter SDK บน Windows (4:11)
การติดตั้ง Git Client (5:36)
การทดสอบการติดตั้ง Flutter SDK (2:08)
วิธีติดตั้ง Android Studio และ Android SDK บน Windows (7:42)
วิธีตั้งค่า Path ของ Android SDK บน Windows (4:13)
ทดสอบกันหน่อย 😉. การติดตั้งโปรแกรมที่จะใช้งาน

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

คำแนะนำเบื้องต้นสำหรับคนใช้ macOS
ดาวน์โหลด และติดตั้ง Flutter SDK บน macOS (5:21)
วิธีตั้งค่า Path ของ Flutter SDK สำหรับคนใช้ Zshell (8:52)
วิธีตั้งค่า Path ของ Flutter SDK สำหรับคนใช้ Bash shell (6:57)
ติดตั้ง Android Studio และ Android SDK บน macOS (3:36)
วิธีตั้งค่า Path ของ Android SDK บน macOS (6:41)
วิธีการติดตั้ง Xcode (1:07)

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

การใช้งานคำสั่ง Flutter doctor เช็คความพร้อมของระบบ (2:15)
วิธีสร้างโปรเจค Flutter (5:10)
เทคนิค: สร้างโปรเจคแบบไม่ใช้ตัวช่วย (3:01)
รู้จักกับโครงสร้างของโปรเจค (2:35)
ทดสอบกันหน่อย 😉 การสร้างแอพแรก และทำความเข้าใจโครงสร้างของโปรเจค

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

วิธีสร้าง Android Virtual Device (6:43)
ทดสอบแอพพลิเคชั่นบน Android Virtual Device (3:52)
ทดสอบกันหน่อย 😉 การทดสอบแอพพลิเคชั่นบน Android Emulator
ทำความเข้าใจการทดสอบแอพบนอุปกรณ์ Android (1:47)
การปลดล๊อค Developer Option ให้ Android ต่อกับ VSCode ได้ (1:47)
แนวทางการหา และติดตั้ง USB Driver (0:37)
การเชื่อมต่อระบบ Windows เข้ากับอุปกรณ์พกพา (1:25)

ทดสอบแอพพลิเคชั่น iOS

ข้อควรรู้เกี่ยวกับการทดสอบแอพ iOS
การรัน iOS Simulator (0:39)
การรันแอพพลิเคชั่นทดสอบบน iOS Simulator (3:41)
การรันแอพบนอุปกรณ์ iOS - การเชื่อมต่อครั้งแรก (0:52)
การรันแอพบนอุปกรณ์ iOS - การกำหนด Team Profile (1:35)
การรันแอพบนอุปกรณ์ iOS - การตรวจสอบ Apple ID และกำหนด Bundle Identifier (2:53)
แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - ลืมปลดล๊อคเครื่อง (0:56)
แก้ไขปัญหาที่พบในการทดสอบแอพบนอุปกรณ์ iOS - Maximum Limited App for free profile reach (2:27)

การกำหนดชื่อแอพ และ App Icon

วิธีเปลี่ยนชื่อแอพพลิเคชั่น Android ใน Flutter (2:46)
วิธีเปลี่ยนชื่อแอพพลิเคชั่น iOS ใน Flutter (2:12)
แนะนำเว็บรวม Package สำหรับ Flutter (1:50)
วิธีติดตั้ง Package ของ Google Flutter (2:03)
รู้จักกับระบบ Icon ใน Android (2:32)
วิธีสร้างไอคอนให้แอพ Android (4:22)
วิธีสร้างไอคอนให้แอพ iOS (2:46)
ทดสอบกันหน่อย 😉 การกำหนดชื่อแอพใหม่ และ App Icon

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

แนะนำก่อนเริ่ม Workshop
การเตรียมโปรเจคให้พร้อม (3:56)
รู้จักกับ function Main() (2:49)
รู้จักกับ Widget ชิ้นส่วนสำคัญของแอพพลิเคชั่นใน Flutter (4:01)
การประกาศใช้งาน Widget ในภาษา Dart (2:54)
รู้จักกับคำสั่ง Import และการใช้งาน Widget ตัวแรก (5:03)
สร้างโครงแอพ ด้วย MaterialApp Widget (6:32)
ทำความเข้าใจ new keyword หายไปไหนจากภาษา Dart (2:19)
เทคนิคการเขียนใช้งาน Widget หลายตัวซ้อนกัน (3:05)
สร้างโครงหน้าแอพด้วย Scaffold Widget (4:50)
กำหนด Theme ให้แอพพลิเคชั่น ผ่าน theme property (4:05)
ทดสอบกันหน่อย 😉 เริ่มต้นแอพแรกของเรา

เริ่มสร้างแอพ Number Counter สร้างและจัดการ User Interface

แนะนำ Stateless และ Stateful Widget แบบเข้าใจง่าย (6:08)
สร้าง Stateless Widget ตัวแรกของเรากัน (4:23)
สร้าง Stateful Widget ตัวแรกของเรากัน (4:56)
วิธีใช้งาน Center Widget (6:16)
รู้จักวิธีเริ่มใช้งาน Column Widget (5:36)
วิธีกำหนดขนาด และสีสันของข้อความด้วย TextStyle (2:12)
รู้จักและใช้งานปุ่มลอยได้ Floating Action Button (8:01)
แทรกค่าตัวนับ ใช้งานใน Text Widget (4:48)
รู้จักกับการสร้าง Interactivity ใน Widget (2:16)
กำหนดการทำงานของโปรแกรม จาก Event ของปุ่มลอยได้ (4:23)
รู้จักกับการทำงานของ State (2:25)
อัพเดตหน้าแอพ ด้วย setState() method (4:26)
อธิบาย: ทำไมเราควรเขียนโค้ดไว้ใน setState() (4:44)
เทคนิค: เขียน method แบบฝัง หรือแยกจาก Widget ดี? (3:46)
ทดสอบกันหน่อย 😉 แอพ Number Counter

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

แนะนำก่อนเริ่มเวิร์คชอป
ดาวน์โหลดไฟล์ zip ของโปรเจคนี้
การคืนสภาพโปรเจคให้กับ Flutter Package (4:15)
การเตรียม Column Widget (1:30)
การสร้าง List Widget จากโค้ดภาษา Dart (4:19)
สร้าง function สำหรับสร้าง List Widget และปรับใช้งาน (5:42)
ใช้ ListView เบื้องต้นกัน (1:46)
ใช้ ListTile กับ ListView แบบ custom function (4:02)
รู้จักกับ constructor method ของ ListView (2:23)
สร้าง ListView ด้วยวิธีมาตรฐานกับ ListView.Builder (10:59)
สร้าง Class Contact สำหรับเก็บข้อมูลผู้ติดต่อ (2:00)
เทคนิค: วิธีการเขียนกำหนด Constructor parameter แบบย่อ (2:57)
เรียกใช้งาน Class contact ในไฟล์ main (3:36)
ทดสอบกันหน่อย 😉 แอพ Contact List 1

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

แนะนำการ Debug Application (3:30)
ใช้โหมด Run และ Breakpoint (9:39)
การจัดการ Breakpoint (Youtube) (2:22)

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

รู้จักกับการจัดเก็บข้อมูลแบบ List (3:03)
ประกาศตัวแปร List (1:50)
ใช้ข้อมูล List กับ ListView.builder (6:10)
เพิ่มรูปภาพเข้าไปใน Project (2:31)
กำหนด pubspec เพื่อโหลดไฟล์รูปภาพเข้าแอพ (เรียกว่า Assets) (4:17)
รู้จักกับ Image Widget (1:15)
ใส่รูปภาพใน ListTile (5:42)
ใช้ onTap ใน ListTile (1:50)
ติดตั้ง package: url-launchers (1:05)
ทำให้กดเลือก และโทรออกกัน (2:14)
ทดสอบกันหน่อย 😉 แอพ Contact List 2

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

แนะนำแอพ COVID-19 Today ส่วนที่ 1 (1:32)
รู้จักกับการทำงานระหว่าง Web API และ Mobile App (2:30)
ดู Web API ของกรมควบคุมโรค (1:44)
ดาวน์โหลดโปรเจคจาก Github (1:08)
คืนสภาพโปรเจคที่ดาวน์โหลดมา (1:32)
ใช้ ListView และ ListTile สร้าง Layout (3:16)
ใช้งาน initState method รันโค้ดก่อน method build (2:54)
ติดตั้ง Http Package (1:13)
รู้จักกับการทำงานแบบ Asynchronous ในแอพพลิเคชั่น (4:57)
รู้จักวิธีใช้งาน Asynchronous ในภาษา Dart (4:11)
สร้าง Async method (2:54)
รู้จักกับ Future (3:09)
เรียกข้อมูลจาก Web API ด้วย HTTP (5:20)
สร้างไฟล์ Class สำหรับเก็บข้อมูล JSON (1:55)
รู้จักกับ QuickType.io (3:40)
วิธีใช้งานโค้ดจาก quicktype.io (2:19)
แปลง JSON เป็น object ตัวแปรใน State (3:59)
อัพเดต Widget ด้วยการ Setstate (4:27)
ตามหาต้นเหตุของ error confirmed null (6:11)
ให้ Dart เลือกแสดงค่าอื่นแทน null โดยใช้ ?? operator (2:40)
เก็บงาน แสดงจำนวนผู้ป่วยที่หายแล้ว ยังอยู่ในโรงพยาบาล และเสียชีวิต (3:08)

แอพ Covid19 Today ส่วนที่ 2

แนะนำแอพ COVID-19 Today ส่วนที่ 2 (1:33)
เพิ่ม LinearProgressIndicator ลงใน Column (6:06)
ใช้ If else ควบคุมการแสดง LinearProgressIndicator (9:58)
ประกาศใช้งาน FutureBuilder ในหน้าแอพ (7:29)
การใช้ builder และ snapshot แสดง widget ตามการทำงานของ async method (14:53)
การใช้งาน data จาก snapshot (9:26)
สร้างตัวแสดงยอดสถิติของเราเอง (12:19)
กำหนดและจัดเรียงยอดสถิติใน Widget (10:08)
สร้าง Widget StatBox เพื่อใช้ซ้ำ (5:25)
กำหนดค่า property ให้ Widget เพื่อใ้ช้งาน (9:18)
กำหนดหน้าตาของ StatBox และใช้ข้อมูล (6:12)
แทนที่ยอดสถิติเดิม ด้วย Statbox (7:15)
สร้างระยะห่างระหว่าง Widget ใน Column ด้วย SizedBox (2:12)
ติดตั้ง package สำหรับการแสดงจำนวนหลักพัน (2:05)
จัด Format ตัวเลขหลักพันด้วย NumberFormat (4:52)
กำหนดสิทธิ์ Permission เพื่อเชื่อมต่ออินเตอร์เน็ตเวลาทำงานจริง (3:15)

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

รู้จักกับภาพรวม การส่งแอพเผยแพร่บน App Store และ Play Store (3:18)
รู้จักกับวิธีที่สโตร์ระบุตัวตนของแอพเรา (4:29)
รู้จักกับขั้นตอนสำคัญในการยืนยันความเป็นเจ้าของแอพของเรา (2:54)
Link สำหรับเข้าไปสมัคร Developer Account ของทั้ง 2 ระบบ

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

การติดตั้ง Flutter Automation package สำหรับการสร้างไฟล์ Android (1:06)
การสร้างไฟล์ Key store สำหรับ Android (4:04)
ตรวจดูไฟล์ key properties และ build.gradle ที่โดนแก้ไขด้วย Flutter Automation (3:33)
การสร้างไฟล์ Android App Bundle (AAB) (2:16)
วิธีการสร้างไฟล์ Android Application Package (APK) แบบต่างๆ (2:06)

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

เปิดไฟล์ Xcode Workspace และเช็ค Bundle Identifier (2:07)
สร้าง Bundle ID บน Apple Developer Program (2:55)
วิธีสั่ง Archive โปรเจคด้วย Xcode และแสดงใน Organizer (3:04)
วิธี Validate Archive ด้วย Organizer (3:27)
วิธีสร้างโปรไฟล์ของ App เราบน App Store Connect (5:04)
การ Validate App หลังจากสร้างโปรไฟล์ App บน App Store Connect (1:26)
วิธีสั่ง Distribute App จาก Organizer (2:20)
วิธีเลือก Build ให้กับโปรไฟล์ App ใน Apple store connect (2:46)

แอพ My Timeline ส่วนที่ 1

แนะนำแอพ My Timeline (2:57)
Clone โปรเจค (1:29)
เพิ่ม Icon Button ใน App Bar (3:13)
รู้จักกับ Navigation และระบบ Route (2:05)
เขียนเรียกใช้ Navigator เพื่อสร้างการเปิดหน้าเพจ (5:07)
สร้าง และแนะนำการจัดเก็บหน้า New Post Page (3:02)
ใช้ Widget New Post Page กับคำสั่ง Navigator push (2:37)
รู้จักกับ Form และการรับข้อมูล (2:29)
สร้างแบบฟอร์มในหน้า New Post Page (3:10)
สร้างปุ่มสำหรับยืนยันการสร้างโพส (1:19)
กางปุ่มให้ชิดขอบหน้าจอด้านล่าง (5:29)
จัดรูปแบบ TextFormField (5:36)
กำหนดกลไกปุ่มโพส ให้เปิดย้อนกลับมาหน้าแรกได้ (2:30)
สร้าง ListView สำหรับแสดงโพส (1:54)
เริ่มต้นสร้าง Widget สำหรับแสดงโพส (3:21)
กำหนดสีและขนาด Text เพื่อกำหนดความสำคัญ (3:47)
สร้างช่องแบ่งระหว่างโพสใน ListView (6:54)
ปรับ ListView ให้หร้อมสำหรับการใช้กับข้อมูลจริง (1:45)

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

แนะนำส่วนที่ 2
รู้จักกับ State Management (3:20)
รู้จักกับ State Management- Provider (2:51)
ติดตั้ง Package Provider (1:51)
รู้จักกับ Provider (1:38)
สร้าง Provider สำหรับข้อมูล Posts (2:55)
สร้าง get method เพื่อให้ส่วนอื่น เข้าถึงข้อมูลใน Provider (1:13)
เขียนสร้าง fat arrow function ครั้งแรก (3:42)
สร้างฟังก์ชั่นเพื่ออัพเดตข้อมูลใน Provider (2:07)
รู้จักกับ Multiple Provider (1:30)
กำหนด MultiProvider ครอบ Widget ที่ต้องการในแอพ (5:58)
ปรับการตั้งค่า Provider เป็นรูปแบบ Fat Arrow Function (2:53)
รู้จักกับ Consumer (1:38)
ประกาศ Consumer เพื่อใช้ข้อมูลจาก Provider ในการอัพเดตข้อมูล (8:10)
ทดสอบการทำงานของ Provider และ Consumer ตอนเริ่มการทำงานของแอพ (3:12)
สร้างกลไกการตรวจสอบข้อมูลใน Form ด้วย FormKey (6:37)
สร้าง Validator Function ในการตรวจสอบข้อมูลของ TextFormField (7:58)
เช็คความยาวต่ำสุดของข้อความที่กรอกใน TextFormField (3:53)
ใช้ TextEditingController ในการดึงข้อความออกจาก TextFormField (5:32)
เพิ่มข้อความใหม่ ลงไปเก็บไว้ใน Provider (5:21)
ทดสอบการทำงานของ Provider ในการเพิ่มข้อมูลเข้า List (7:49)
ใช้ Template ที่เราออกแบบให้ ListView กับข้อมูลจาก Provider (4:39)
กำหนดให้โพสใหม่แสดงเป็นรายการแรกใน List (4:10)

แอพ My Timeline ส่วนที่ 3 - ใช้วันเวลา DateTime

แนะนำส่วนที่ 3
สร้าง Post Class เป็นตัวแทนข้อมูลโพสในระบบ (2:40)
ปรับ Provider ให้มาใช้ Post Class แทนข้อความแบบเดิม (6:11)
ปรับให้ ListView ใช้ข้อมูลในรูปแบบของ Post แทนข้อความ (4:45)
ติดตั้ง package time ago (1:27)
ทำให้ Post สามารถแสดงข้อความบอกช่วงเวลาที่สร้างโพสกับปัจจุบันได้ (7:55)
เรียกใช้ข้อความ time ago จากข้อมูล Post (6:15)
โหลดข้อความภาษาไทยให้กับ TimeAgo Package (3:11)
แปลงช่วงเวลาที่โพสเอาไว้ เป็นภาษาไทย (5:35)

แอพ My Timeline ส่วนที่ 4 - เริ่มใช้งานฐานข้อมูลภายในแอพ

แนะนำส่วนที่ 4
เข้าใจความสำคัญของฐานข้อมูลแบบเก็บภายในแอพ (Local Database) (3:13)
เข้าใจรูปแบบการเก็บและเรียกใช้ฐานข้อมูลภายในแอพ (3:43)
เข้าใจแนวคิดการจัดเก็บข้อมูลแบบ NoSQL (3:04)
ติดตั้ง package Sembast และ path_provider (2:30)
สร้างไฟล์ตัวแทนในการจัดการกับฐานข้อมูลโดยตรง (2:33)
รู้จักกลไกการเข้าถึงไฟล์ในแอพ (3:36)
สร้างคำสั่งที่ใช้ในการเปิดไฟล์ฐานข้อมูล (7:55)
เรียกใช้ dbFactory เพื่อเตรียมเชื่อมต่อไปที่ไฟล์ database (1:37)
ทำการสั่งเปิดการเชื่อมต่อ เพื่อเอาตัวแทนของ Database มาเตรียมใช้ในแอพ (4:00)
สร้าง function save สำหรับการบันทึกข้อมูล (2:49)
รู้จักกับการจัดเก็บข้อมูลอย่างเป็นระเบียบ ภายในไฟล์ Database (1:58)
การใช้ StoreFactory อ้างอิงถึงชุดข้อมูลที่อยู่ใน Database (7:51)
เรียนใช้คำสั่งบันทึกข้อมูล ใน Post Provider (3:28)
ทดสอบการทำงานของ save function (12:13)
การสั่งปิดการเชื่อมต่อไปที่ฐานข้อมูล เมื่อใช้งานเสร็จแล้ว (1:46)
ย้ายส่วนสร้าง JSON ไปไว้ใน PostModel (5:44)
วิธีสั่งอ่านข้อมูลจาก Database (6:00)
ทดลองเรียกใช้งานคำสั่ง loadAllPosts (4:36)
เข้าใจการทำงานของ Record Snapshot (2:41)
เขียนคำสั่งแปลงข้อมูลจาก Record ของ Database เป็นข้อมูล Post (7:45)
ทดสอบคำสั่งแปลงข้อมูลจาก Database เป็นข้อมูล Post (5:46)
แปลงข้อความ DateTime จาก Database กลับเป็นข้อมูลที่ใช้ได้ในแอพ (2:40)
ทดสอบการแปลงข้อมูล DateTime จาก Database มาใช้ในแอพ (4:49)
โหลดข้อมูล Post จาก Database มาไว้ใน Provider หลังจากบันทึกโพสแล้ว (3:56)
แนะนำขั้นตอนการโหลดข้อมูลตอนเปิดแอพ (2:12)
สร้างคำสั่งโหลดข้อมูล Post มาไว้ใน Provider (3:38)
เรียกข้อมูลจาก Database ตอนเปิดหน้าแรก (6:00)
การสั่งเรียงข้อมูลก่อนเอากลับมาจาก Database (Sort) (6:29)
ทดสอบ การสั่งเรียงข้อมูล SortOrder (2:28)

แอพ My Timeline ส่วนที่ 5 - เรียนรู้ และสร้างเมนูแบบ Tab ใช้งาน

แนะนำส่วนที่ 5
เข้าใจการทำงานของ Tab Navigator (1:35)
แยกส่วนหน้า HomePage ออกมาเป็น Widget ของตัวเอง (5:37)
เทคนิคการเข้าถึงโค้ด และการสั่งเปิด dialog แบบ full screen (5:25)
ทดลองสร้าง TabController และ TabBarView (6:08)
สร้าง Tab menu (5:32)
กำหนดหน้า HomePage ให้กับ Tab แรก (2:00)
ปรับ Tab Menu ให้เป็นหน้า Setting (1:22)
สร้างหน้า Setting และกำหนดใส่ใน Tab Menu (4:06)
สร้างคำสั่งลบข้อมูล Post ใน Database (5:02)
อัพเดตข้อมูลใน Provider หลังจากล้างข้อมูลใน Database แล้ว (2:56)
เรียกใช้คำสั่งลบข้อมูลจากหน้า Setting Page (1:59)
ทดสอบการลบข้อมูล และสังเกตจุดบกพร่องของแอพ (1:40)
แนะนำคำสั่ง ShowDialog (5:16)
วิธีสร้าง AlertDialog และการใส่ปุ่มควบคุม (5:38)
สร้างคำสั่งปิด และล้างข้อมูลเมื่อกดยืนยันจาก Dialog (4:19)

แอพ My Timeline ส่วนที่ 6 - การสลับไปใช้ SQLite ของ Sembast

แนะนำส่วนที่ 6
เข้าใจการจัดเก็บข้อมูลแบบ SQLite ของ Sembast (2:03)
ติดตั้ง Package Sqflite และ sembast_sqflite (1:15)
เข้าใจการสืบทอดคุณสมบัติของ Class (Inheritance) (2:31)
สร้าง Class ที่สืบทอดคุณสมบัติ PostDB (2:32)
เขียน override คำสั่ง openDatabase ให้เปิดใช้งานแบบ SQLite (11:19)
รู้จัก และทำความเข้าใจการ refactor (3:23)
ลอง Refactor โค้ดที่เรียกใช้ PostDB ใน Provider (5:23)
ลอง Refactor ปรับการประกาศชื่อ PostDB ใหม่ (2:57)
ลองส่งต่อชื่อ Database จาก PostDBSQLite ไปให้ PostDB ในฐานะ super class (3:06)
สลับใช้งาน PostDB SQLite แทน PostDB ใน PostProvider (2:01)

แอพ My Timeline ส่วนที่ 7 - การสลับใช้ฐานข้อมูล SQLite แบบสมบูรณ์

แนะนำส่วนที่ 7
รู้จักกับการจัดเก็บข้อมูลใน SQLite (2:29)
รู้จักกับภาษา SQL ในการจัดการข้อมูล Database (1:38)
สร้างไฟล์จัดการข้อมูลด้วยภาษา SQL (2:25)
สร้างส่วนการเปิดไฟล์ Database ด้วยภาษา SQL (4:40)
วิธีแก้ไขปัญหาการเรียกใช้ชื่อ method ซ้ำกันจาก package และของเราเอง (4:50)
รันคำสั่งสร้าง table ในฐานข้อมูลหลังจากสร้างไฟล์เสร็จ (6:10)
สร้างคำสั่ง save, loadAllPost และ ClearData (3:57)
ใช้ภาษา SQL เพิ่มข้อมูลลง Database (7:18)
ใช้ภาษา SQL อ่านข้อมูลขึ้นมาจาก Database และการเพิ่ม id (6:22)
แปลงข้อมูลที่ได้จาก Database ให้อยู่ในรูปแบบตัวแปร Post (6:27)
การลบข้อมูลใน SQLite ด้วยคำสั่ง SQL (2:21)
สลับจากการใช้งานฐานข้อมูลแบบ NoSQL เป็น SQLite (2:41)

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

แนะนำแอพแสกน ส่วนที่ 1
เตรียมโปรเจค (3:44)
สร้างปุ่ม Scan แบบลอยได้ด้วยตัวเอง กับ FloatingActionButton (13:05)
ติดตั้ง flutter_barcode_scanner package (2:12)
กำหนดค่าเพิ่มเติมในโปรเจคแอพ iOS เพื่อให้สามารถใช้งาน package ได้ (6:42)
กำหนดค่าขออนุญาตให้กล้องถ่ายรูป Camera Usage Description ในไฟล์ Info.plist ของแอพ iOS (2:17)
เขียนคำสั่งเรียกใช้ barcode scanner จากการกดปุ่มแสกน (5:53)
ทดสอบแสกน Barcode สินค้า และ QR Code (5:22)
กำหนดสี, ข้อความปุ่มยกเลิก, และการเปิดใช้งาน flash (5:37)
สร้าง Card UI เพื่อเตรียมแสดงข้อมูลที่ได้จากการแสกน (7:31)
ปรับขนาด Card UI ด้วย Sized Box (3:26)
นำข้อมูลที่แสกนได้ มาแสดงใน Card (5:39)
จัดการกรณีผู้ใช้ยกเลิกการแสกน (4:30)

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

แนะนำแอพแสกน ส่วนที่ 2
รู้จักกับ URL Scheme (2:24)
รู้จักกับ URL Scheme ของ Youtube (1:20)
วิธีตรวจเช็ค link YouTube จาก QR code (3:26)
ทดสอบการอ่านลิ้งค์ Youtube จาก QR Code (2:30)
แสดงปุ่มเปิดแอพ Youtube ถ้าพบว่าเป็น link Youtube (5:58)
ติดตั้งแพคเกจ url_launcher (1:42)
เขียนคำสั่งเปิดแอพ Youtube จากลิ้งค์ที่แสกนได้จาก QR Code (2:25)
ทดสอบเปิดคลิปวิดีโอบนแอพ Youtube จาก link ที่แสกนได้จาก QR Code (1:59)
วิธีเปิดคลิปวิดีโอ Youtube จาก Link ที่แสกนได้บนแอพ iOS (6:07)
รู้จักกับ URL Scheme ของแอพ Line (0:57)
แสดงปุ่มเปิดแอพ LINE ถ้าพบว่าเป็น link เกี่ยวข้องกับ LINE (7:10)
ทดสอบเปิดแอพ LINE จากลิ้งค์ที่แสกนได้จาก QR Code (2:45)

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

แนะนำ Workshop
ดาวน์โหลด และตั้งค่าโปรเจค (1:17)
สร้าง tab menu (4:01)
สร้างหน้าลงทะเบียน (2:57)
วาง Layout ของแบบฟอร์มลงทะเบียน (8:00)
สร้างส่วนสำหรับกดถ่าย และแสดงรูปผู้ลงทะเบียน (3:37)
รู้จักกับการใช้งาน InkWell Widget (1:41)
สร้างเอฟเฟค Ink และ InkWell สำหรับบริเวณถ่ายรูปลงทะเบียน (7:30)
รู้จักกับปัญหา Bottom Overflow ที่เกิดจากการเรียกใช้ Keyboard (2:05)
ทดสอบการกรอกแบบฟอร์ม และปัญหา Overflow (1:25)
แก้ไขปัญหา Bottom Overflow ด้วย SingleChildScrollView (3:31)
สร้าง Class สำหรับเก็บข้อมูล จากแบบฟอร์มลงทะเบียน (2:06)
สร้าง FormKey เพื่อควบคุมการทำงานของ Form Widget (1:40)
การดึงข้อมูลออกจาก TextFormField มาใช้งาน (0:40)
วิธีเก็บข้อมูลจาก Form ทั้งหมด ลง Object ด้วย onSaved ของ TextFormField (5:30)
ทดสอบเก็บข้อมูลจากแบบฟอร์มด้วย onSave (5:22)
ทบทวน การตรวจสอบข้อมูลด้วย Validator (0:56)
ติดตั้ง package form_field_validator (1:17)
ตรวจจับข้อมูลที่ไม่ได้กรอกลงแบบฟอร์มด้วย RequiredValidator (6:34)
ตรวจจับการกรอก email ผิดรูปแบบ ด้วย EmailValidator และ MultiValidator (5:41)
แสดงแป้นคีย์บอร์ดสำหรับพิมพ์อีเมลล์ (2:49)

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

รู้จักกับ Firebase (4:29)
วิธีลงทะเบียนเข้าใช้งานระบบ Firebase (1:21)
รู้จักกับรูปแบบของโปรเจค Firebase (2:10)
วิธีสร้างโปรเจค Firebase ใหม่สำหรับใช้งานกับแอพพลิเคชั่น (1:42)
รู้จักกับการนำระบบ Firebase มาใช้งานในโปรเจคโมบายล์แอพพลิเคชั่น Flutter ของเรา (1:32)
ติดตั้ง package Firebase_core (1:00)
วิธีการตั้งค่าใช้งาน Firebase บนระบบ Android (7:52)
วิธีการตั้งค่าใช้งาน Firebase บนระบบ iOS (8:00)
รู้จักการรองรับ กลไกเริ่มต้นการทำงานของ Firebase ด้วย Future Builder (2:08)
เริ่มต้นใช้งาน Firebase ด้วย FutureBuilder (13:20)
การเปิดใช้งาน Cloud FireStore บนโปรเจค Firebase (2:29)
ติดตั้ง cloud_firestore (0:58)
เรียกใช้งาน Cloud Firestore เพื่อบันทึกข้อมูลในหน้าลงทะเบียน (5:55)
ทดสอบการบันทึกข้อมูลลง Cloud Firestore (2:55)
ล้างแบบฟอร์มเมื่อบันทึกข้อมูลเสร็จ (2:45)

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

รู้จักกับการทำงานของระบบกล้องถ่ายรูปที่เรียกใช้ได้ผ่านแอพ (2:26)
รู้จักกับ Permission (3:51)
ติดตั้ง package image_picker (0:57)
การตั้งค่าแอพ Android สำหรับการใช้งานกล้องถ่ายรูป (1:35)
การตั้งค่าแอพ iOS สำหรับการใช้งานกล้องถ่ายรูป (1:42)
วิธีเรียกใช้งานกล้องถ่ายรูป ด้วย Image Picker และเช็คที่อยู่ของไฟล์ (4:32)
ทดสอบการใช้งานกล้องถ่ายรูปในแอพ Flutter (6:28)
แสดงรูปภาพที่ถ่ายได้ ด้วย Image Widget (8:18)
ทดสอบการทำงานหลังจากถ่ายรูป และกลับเข้ามาในแอพ (3:53)

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

รู้จักกับแนวทางในการจัดการไฟล์ในแอพพลิเคชั่น (2:09)
รู้จักกับ Firebase Cloud Storage (2:07)
ติดตั้ง pacakge firebase_storage (0:32)
วิธีสร้าง storage bucket บน Firebase (1:30)
รู้จักกับคำสั่งการใช้งาน Cloud Storage และอัพโหลดไฟล์ (4:19)
สร้างและเรียก function สำหรับอัพโหลดไฟล์รูปขึ้น Firebase Cloud Storage (5:33)
ทดสอบถ่ายและอัพโหลดรูปภาพขึ้น Firebase Cloud Storage (4:23)
กำหนด Rule สำหรับอัพโหลดไฟล์แบบไม่ต้อง login บน Firebase Cloud Storage (3:40)
ทดสอบอัพโหลดไฟล์รูปขึ้น Cloud Storage (2:23)
การกำหนดที่อยู่ของไฟล์ที่อัพโหลด (4:20)
แสดงป๊อปอัพสถานะการจัดเก็บข้อมูล (7:06)
ป้องกันการปิดป๊อปอัพโดยผู้ใช้ (4:18)
เคลียร์ข้อมูลรูปภาพหลังอัพโหลดเสร็จแล้ว (4:19)
ทำการบันทึกชื่อไฟล์ไปที่ firestore เพื่อเชื่อมโยงไฟล์รูปกับข้อมูลผู้ลงทะเบียน (3:23)

Teach online with

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

เนื้อหาเลคเชอร์ถูกล๊อคไว้

ถ้าคุณลงทะเบียนแล้ว, คุณต้องลงชื่อเข้าใช้.

ลงทะเบียนเพื่อปลดล๊อค