Vue Firebase Masterclass
บทเรียนสำหรับคนที่สนใจอยากเรียนรู้ Vue framework ประกอบกับการใช้งานคู่กับ Firebase เพื่อการ deploy งานจริง (แนะนำให้ดูเป็นฉบับวิดีโอก่อนอ่านเอกสาร เพื่อให้เกิดความเข้าใจที่ถ่องแท้ยิ่งขึ้น)
นี่คือหัวข้อทั้งหมดของเรา โดย
- Vue จะอยู่ในช่วงตอนที่ 2-8 (หากทำเพียงแค่ Frontend ต่อกับ API สามารถดูถึงเท่านี้ได้)
- Firebase จะอยู่ในช่วงตอนที่ 9-17
| ตอนที่ | หัวข้อ | วิดีโอ | เอกสาร |
|---|---|---|---|
| ตอนที่ 1 | Vue คือไร ? Firebase คือไร ? แล้วทำไมเราเอามาอยู่ด้วยกัน ? |  ดู video | อ่าน |
| ตอนที่ 2 | Vue - Basic component, data binding, event, condition |  ดู video | อ่าน |
| ตอนที่ 3 | Vue - watch, computed, props, life cycle component |  ดู video | อ่าน |
| ตอนที่ 4 | Vue - Vue Router และ Pinia |  ดู video | อ่าน |
| ตอนที่ 5 | Vue - TODO List และการจัดการระหว่าง API ด้วย Pinia |  ดู video | อ่าน |
| ตอนที่ 6 | Vue + Tailwind - ลง tailwind (และ Daisy UI) พร้อมตัวอย่าง |  ดู video | อ่าน |
| ตอนที่ 7 | Vue + Tailwind - เพิ่ม หน้าเว็บ ฝั่ง E - Commerce |  ดู video | อ่าน |
| ตอนที่ 8 | Vue + Tailwind - เพิ่ม หน้าเว็บ Backoffice (สำหรับ Admin) |  ดู video | อ่าน |
| ตอนที่ 9 | Vue + Firebase - ลง Firebase และติดตั้ง Firebase emulator |  ดู video | อ่าน |
| ตอนที่ 10 | Vue + Firebase - เพิ่ม Login ฝั่ง User และ Admin ด้วย Firebase Authentication |  ดู video | อ่าน |
| ตอนที่ 11 | Vue + Firebase - เพิ่ ม Firestore CRUD และ permission ด้วย Firestore Rule |  ดู video | อ่าน |
| ตอนที่ 12 | Vue + Firebase - จัดการ filter, sort ด้วย Firestore query |  ดู video | อ่าน |
| ตอนที่ 13 | Vue + Firebase - เพิ่ม Cloud storage upload ภาพ สินค้า (Admin) และ Profile (User) |  ดู video | อ่าน |
| ตอนที่ 14 | Vue + Firebase - เพิ่ม Cart ด้วย Firebase Realtime Database |  ดู video | อ่าน |
| ตอนที่ 15 | Vue + Firebase - เพิ่ม Checkout ด้วย Cloud function |  ดู video | อ่าน |
| ตอนที่ 16 | Vue + Omise - ต่อ Payment gateway และ Dashboard (Cloud Trigger) |  ดู video | อ่าน |
| ตอนที่ 17 | Vue + Firebase - deploy ทั้งหมดขึ้น Firebase hosting และการจัดการก่อนขึ้น Production |  ดู video | อ่าน |