Flutter workshop:ระบบสั่งอาหารผ่านคิวอาร์โค้ด (Quick Orders)

Name: Flutter workshop:ระบบสั่งอาหารผ่านคิวอาร์โค้ด (Quick Orders)
Rating: 3.9 (12 reviews)

เรียนรู้การสร้างเว็บแอปพลิเคชัน (Progressive Web Application) ด้วย Flutter และ Cloud Firestore

Created bySatit Rianpit

Last updated 9/2020

Thai

What you'll learn

เรียนรู้การสร้างเว็บแอปพลิเคชันด้วย Flutter
เรียนรู้การใช้งานฐานข้อมูล Cloud Firestore
เรียนรู้การใช้งาน Firebase Authentication
เรียนรู้การนำเว็บขึ้น Firebase Hosting
เรียนรู้การสร้างเว็บแบบ PWA ด้วย Flutter

Course content

20 sections • 108 lectures • 31h 41m total length

ตั้งค่า Flutter เพื่อรองรับการใช้งานเว็บ19:44
Flow การทำงานของแอป Quick Orders ในฝั่งของลูกค้า7:46

การออกแบบหน้าจอหลักของเว็บแอปพลิเคชัน4:07
การสร้างหน้าจอหลักของเว็บแอปพลิเคชัน (Ep.1)23:46
การสร้างหน้าจอหลักของเว็บแอปพลิเคชัน (Ep.2)20:42
การสร้างหน้าจอหลักของเว็บแอปพลิเคชัน (Ep.3)10:09
การสร้าง Widget สำหรับแท็บรายการสินค้า (Mockup)8:17
การสร้าง Widget รายการสินค้าแนะนำ (EP.1)27:37
การสร้าง Widget รายการสินค้าแนะนำ (EP.2)24:59
การสร้าง Widget หมวดหมู่สินค้า17:53
การสร้าง Widget รายการสินค้า26:49
เพิ่ม Font6:32

สร้าง Project และกำหนดค่า Cloud Firestore11:09
การออกแบบตารางสินค้า และ การเชื่อมต่อ Cloud Firestore (EP.1)20:46
การออกแบบตารางสินค้า และ การเชื่อมต่อ Cloud Firestore (EP.2)19:06
การแสดงข้อมูลสินค้าแนะนำ28:51
การแสดงข้อมูลหมวดหมู่สินค้า23:51
การสร้างลิสต์แสดงรายการสินค้าจาก Cloud Firestore (EP.1)21:20
การสร้างลิสต์แสดงรายการสินค้าจาก Cloud Firestore (EP.2)21:19

สร้างหน้าจอสั่งอาหาร (EP.1)27:59
สร้างหน้าจอสั่งอาหาร (EP.2)24:00
ออกแบบฐานข้อมูลสำหรับเก็บรายละเอียดการสั่งอาหาร (EP.1)7:24
ออกแบบฐานข้อมูลสำหรับเก็บรายละเอียดการสั่งอาหาร (EP.2)24:23
การออกแบบฐานข้อมูลสำหรับเก็บ Order10:59
การออกออร์เดอร์เพื่อทดสอบ28:21
บันทึกข้อมูลออร์เดอร์ลง Cloud Firestore16:26
การออกแบบหน้าจอรายการอาหารที่สั่ง35:52
แสดงรายการอาหารที่ลูกค้าสั่ง36:21

ออกแบบหน้าจอ Chat สำหรับลูกค้า34:30
ออกแบบฐานข้อมูลเพื่อเก็บข้อมูล Chat ระหว่างลูกค้ากับพนักงาน4:59
แสดงข้อความ Chat จาก Cloud Firestore (EP.1)20:45
แสดงข้อความ Chat จาก Cloud Firestore (EP.2)31:13
การส่งข้อความ18:45
เรียกพนักงาน11:37

ออกแบบหน้าจอรายการชำระเงิน (EP.1)13:49
ออกแบบหน้าจอรายการชำระเงิน (EP.2)16:20
แสดงรายการสินค้าที่ต้องชำระเงินจากฐานข้อมูล Cloud Firestore23:01
เรียกพนักงานเก็บเงิน26:09

กำหนดค่า Firebase Authentication8:03
ออกแบบหน้าจอล๊อกอิน24:53
การล๊อกอินกับ Firebase Authentication15:55
Mockup หน้าจอหลักของ Admin5:44
สร้างหน้าจอหลักสำหรับ Admin (Coding)24:27
ตรวจสอบสถานะการล๊อกอินของผู้ใช้งาน และ การล๊อกเอาท์ (Logout)11:53
การสร้างเพจสำหรับแท็บต่างๆ ในหน้าหลักของ Admin10:15

Mockup สำหรับหน้าจอออก Order ลูกค้า3:24
สร้าง UI สำหรับออกออเดอร์ให้ลูกค้า (Coding)19:17
การจัดการโต๊ะสำหรับออกออเดอร์ (EP.1)21:41
การจัดการโต๊ะสำหรับออกออเดอร์ (EP.2) และการออกออเดอร์21:50
สร้าง Routing สำหรับหน้าจอของ Admin22:22
สร้าง QR Code18:12
การสร้าง QR Code จากลิงค์ของเว็บไซต์ และการสร้างเพจรับ QR Code34:59
การสร้างเมนู (BottomSheet) สำหรับจัดการโต๊ะ20:48
คิดเงินลูกค้า32:53
แสดงรายการอาหารที่ลูกค้าสั่ง9:52

แก้ไข BUG การแสดงข้อมูลกรณียังไม่มี Order Id10:43
การทำงานของหน้าจอลูกค้าเรียก (เรียกนักงาน) (EP.1)11:39
การทำงานของหน้าจอลูกค้าเรียก (เรียกพนักงาน) (EP.2 - Coding)11:16
การดึงข้อมูลจาก Cloud Firestore และการอัปเดทสถานะ20:20

Requirements

มีความรู้พื้นฐานเกี่ยวกับ Flutter
มีความรู้พื้นฐานเกี่ยวกับ Progressive Web Application
มีความรู้พื้นฐานเกี่ยวกับ Firebase (Cloud Firestore, Authentication, Hosting)

Description

เนื้อหาในคอร์สนี้เป็นการทำ Workshop สำหรับ Flutter นะครับ โดยนำ Flutter มาพัฒนาเว็บแอปพลิเคชัน ซึ่งเป็นแบบ PWA (Progrressive Web Application) โดยฐานข้อมูลใช้ Cloud Firestore เน้นการออกแบบใช้งานกับเว็บเป็นหลักนะครับ แต่ในเนื้อหาตอนท้ายๆ จะมีการทำเป็น Native แอปพลิเคชันให้ด้วยนะครับ

การทำงานของแอปตัวนี้เป็นการสั่งอาหารผ่าน QR Code ลูกค้าที่เข้ามาที่ร้านจะทำการสแกน QR Code เพื่อทำการสั่งอาหาร โดนตัวแอปจะมีระบบหลังบ้านที่จะคอยตรวจสอบออเดอร์ของลูกค้า และมีระบบการเรียกพนักงาน และ Chat กับพนักงานได้ด้วย

มีระบบรายงานแสดงยอดขายในแต่ละวัน มีระบบสรุปรายการอาหารที่สั่ง มีระบบแสดงสถานะรายการออเดอร์ที่สั่ง

Who this course is for:

ผู้ที่สนใจการสร้างแอป หรือ เว็บ ด้วย Flutter
ผู้ที่สนใจอยากได้แอปไปใช้งาน

Flutter workshop:ระบบสั่งอาหารผ่านคิวอาร์โค้ด (Quick Orders)

What you'll learn

Explore related topics

Course content

มีความรู้พื้นฐานเกี่ยวกับ Flutter2 lectures • 28min

ออกแบบหน้าจอหลัก (ฝั่งลูกค้า)10 lectures • 2hr 51min

การใช้งาน Cloud Firestore7 lectures • 2hr 26min

การสั่งอาหาร9 lectures • 3hr 32min

สร้าง Chat สำหรับติดต่อพนักงาน6 lectures • 2hr 2min

การชำระเงิน4 lectures • 1hr 19min

การใช้งาน Firebase Authentication สำหรับ Admin7 lectures • 1hr 41min

การออก Order10 lectures • 3hr 25min

จัดการออเดอร์ลูกค้า5 lectures • 1hr 41min

จัดการระบบเรียกพนักงาน4 lectures • 54min

Requirements

Description

Who this course is for: