keyboard_tab Skip to content

Wiki

Vue Firebase Masterclass

คอร์สเรียนพาทุกคนทำ Project ผ่าน Vue และ Firebase ออกมา

79 บทเรียน17 บท

เริ่มต้น1 บท

  1. 1.1Vue Firebase Masterclass

ตอนที่ 1: Vue คืออะไร ? Firebase คืออะไร ?2 บท

  1. 2.1แนะนำ Vue และ Firebase
  2. 2.2แนะนำ เริ่มต้น Vue

ตอนที่ 2: Vue - Basic component, data binding, event, condition5 บท

  1. 3.1แนะนำ Vue Component และ Concept
  2. 3.2แนะนำ Data binding
  3. 3.3แนะนำ Event
  4. 3.4แนะนำ Condition และ Loop
  5. 3.5มาลองทำ Form register กัน

ตอนที่ 3: Vue - watch, computed, props, life cycle, multi component6 บท

  1. 4.1แนะนำ คุณสมบัติอื่นๆเพิ่มเติม ของ Vue Component
  2. 4.2รู้จักกับ computed properties
  3. 4.3แนะนำ watch และ watchEffect
  4. 4.4การ import Component และการส่ง properties
  5. 4.5Life cycle ใน component
  6. 4.6Workshop ประจำหัวข้อนี้

ตอนที่ 4: Vue - Vue router และ Pinia6 บท

  1. 5.1แนะนำ Router และ Pinia คืออะไร ?
  2. 5.2เริ่มต้นกับ Router
  3. 5.3ส่งข้อมูลผ่าน Params ใน Router
  4. 5.4เริ่มต้น Pinia
  5. 5.5เพิ่มเติม Pinia ด้วย Getters
  6. 5.6Workshop ประจำหัวข้อนี้

ตอนที่ 5: Vue - ทำ Todo List API และ Pinia2 บท

  1. 6.1มาลองทำ Todo List แบบต่อ API กัน
  2. 6.2Let's code แต่ละส่วนกัน

ตอนที่ 6: Vue + Tailwind - ใช้ tailwind และ Daisy UI แต่ง Todo List กัน6 บท

  1. 7.1รู้จักกับ Tailwind
  2. 7.2พาเล่น tailwind กัน
  3. 7.3การ customize tailwind
  4. 7.4รู้จักกับ Daisy UI
  5. 7.5ลอง Daisy UI Component
  6. 7.6มาแต่ง todo list กัน

ตอนที่ 7: Vue + Tailwind - เพิ่ม หน้าเว็บ ฝั่ง E - Commerce7 บท

  1. 8.1เริ่มทำ Easy commerce กัน !
  2. 8.2ทำส่วน Layout หลักของหน้าเว็บกัน
  3. 8.3ทำหน้าแสดงผลหลัก
  4. 8.4ทำหน้าจัดการ Profile
  5. 8.5ทำหน้าตะกร้าสินค้า
  6. 8.6ทำหน้า Checkout / Success
  7. 8.7สรุปเราทำอะไรกันไปบ้างแล้ว

ตอนที่ 8: Vue + Tailwind - เพิ่ม หน้าเว็บ Backoffice (สำหรับ Admin)7 บท

  1. 9.1มาต่อกันที่ฝั่ง Admin
  2. 9.2ทำส่วน Layout และ Login
  3. 9.3ทำหน้า Dashboard
  4. 9.4ทำหน้า Product Management
  5. 9.5ทำหน้า User Management
  6. 9.6ทำหน้า Order Management
  7. 9.7สรุปเราทำอะไรกันไปบ้างแล้ว

ตอนที่ 9: Vue + Firebase - ลง Firebase และติดตั้ง Firebase emulator4 บท

  1. 10.1มาทำส่วนหลังบ้านกันบ้าง
  2. 10.2ลง Firebase
  3. 10.3ลง Firebase Emulator
  4. 10.4ทดสอบระหว่าง Emulator และ Server

ตอนที่ 10: Vue + Firebase - เพิ่ม Login ฝั่ง User และ Admin ด้วย Firebase Authentication4 บท

  1. 11.1มาใส่ Login กัน
  2. 11.2Setup Firebase authentication
  3. 11.3ใส่ Login ฝั่ง User
  4. 11.4ใส่ Login ฝั่ง Admin

ตอนที่ 11: Vue + Firebase - เพิ่ม Firestore CRUD และ permission ด้วย Firestore Rule4 บท

  1. 12.1เริ่มใส่ Firestore ให้ครบกัน
  2. 12.2จัดการ user
  3. 12.3จัดการ CRUD product
  4. 12.4ใส่ Firestore rule

ตอนที่ 12: Vue + Firebase - จัดการ filter, sort ด้วย Firestore query4 บท

  1. 13.1แนะนำ query ใน Firestore
  2. 13.2เพิ่ม pagination ใน product
  3. 13.3ลองเพิ่ม placeorder ลดจำนวนสินค้า
  4. 13.4คำแนะนำเพิ่มเติม

ตอนที่ 13: Vue + Firebase - เพิ่ม Cloud storage upload ภาพ สินค้า (Admin) และ Profile (User)3 บท

  1. 14.1รู้จักกับ Cloud storage
  2. 14.2มาลองทำ upload ทั้ง 2 ฝั่ง
  3. 14.3เพิ่ม security rule

ตอนที่ 14: Vue + Firebase - เพิ่ม Cart ด้วย Firebase Realtime Database4 บท

  1. 15.1รู้จักกับ Realtime database
  2. 15.2เพิ่ม Realtime Database
  3. 15.3เพิ่ม Database ให้ตะกร้าสินค้า
  4. 15.4ความแตกต่างระหว่าง Realtime DB และ Firestore DB

ตอนที่ 15: Vue + Firebase - เพิ่ม Checkout ด้วย Cloud function4 บท

  1. 16.1รู้จักกับ Cloud function
  2. 16.2เพิ่ม Placeorder
  3. 16.3เพิ่ม Proxy และ checkout
  4. 16.4เพิ่ม security rule และหน้า Success

ตอนที่ 16: Vue + Omise - ต่อ Payment gateway และ Dashboard (Cloud Trigger)5 บท

  1. 17.1รู้จักกับ Payment gateway
  2. 17.2ปรับ Placeorder
  3. 17.3เพิ่ม webhook
  4. 17.4เพิ่ม ดู Order, Dashboard ที่ Backoffice
  5. 17.5ปิดท้ายด้วย Trigger

ตอนที่ 17: Vue + Firebase - deploy ทั้งหมดขึ้น Firebase5 บท

  1. 18.1มาสู่หัวข้อสุดท้าย การ Deploy งานขึ้น
  2. 18.2ปรับ Environment
  3. 18.3Deploy hosting
  4. 18.4เปิด billing และ deploy cloud function
  5. 18.5สรุปทั้งหมด

อ่านจบเล่ม Vue Firebase Masterclass แล้ว!

Mikelopster

แชร์และแบ่งปันเรื่องราวสาระน่ารู้ © 2026