เข้าใจการใช้งานคอร์ส
เริ่มต้นกับ Flutter และการสร้าง Mobile App
การติดตั้งโปรแกรมที่จะใช้งาน
วิธีติดตั้งโปรแกรมสำหรับคนใช้ 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)
การสร้างแอพแรก และทำความเข้าใจโครงสร้างของโปรเจค
การทดสอบแอพพลิเคชั่นบน 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)
โปรเจค 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)
การสร้างไฟล์แอพพลิเคชั่นสำหรับทำไปใช้งานบน 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)
