Skip to main content

แนะนำ Vue และ Firebase

vue-firebase-intro สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video

แนะนำ Course ทั้งหมดกันก่อนว่าจะทำอะไรบ้าง

Course นี้เราจะนำพาทุกคนมาทำเว็บไซต์เว็บหนึ่งที่จะมีทั้งส่วนของหน้าบ้าน (Frontend) และหลังบ้าน (Backend) โดยที่

  • ส่วนของหน้าบ้าน เราจะใช้ Vue Framework
  • ส่วนของหลังบ้าน เราจะใช้ Firebase เป็นตัวจัดการทั้งหมด
  • และจบ Course ด้วยการลองทดสอบ deploy project ขึ้นใช้งานจริงๆกัน

Vue คืออะไร ?

Vue คือ Javascrip framework ที่ใช้สำหรับการสร้าง user interfaces ของฝั่ง Frontend ซึ่งสร้างอยู่บนพื้นฐานของ HTML, CSS และ Javascript

  • มีตัวช่วยในเรื่องของการจัดการตัวแปร (declarative)
  • ทุกอย่างทำเป็น component base (เดี๋ยวจะมีเล่าใน session ต่อไป) ซึ่งเอาจริงๆ ถือเป็นพื้นฐานเกือบทุก Frontend Framework ในปัจจุบัน

เหตุผลที่ผมเลือก Vue มาสอน

  • เป็น Framework ที่ผมคุ้นมือที่สุด (เนื่องจากใกล้เคียงกับงานที่ใช้อยู่ปัจจุบัน)
  • document อ่านง่าย, มีตัวอย่างอยู่มากมายบน Internet

ในเอกสารของผมจะไม่ลง detail ใน concept vue มาก (จะหยิบแค่ keyword สำคัญมา) เนื่องจาก Vue นั้นเขียน document ของตัวเองดีอยู่แล้ว

Vue document https://vuejs.org/guide/introduction.html

ตัวอย่าง code vue (ตามเอกสาร Vue)

ส่วน javascript

import { createApp, ref } from 'vue'

createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')

ส่วน template

<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>

Firebase คืออะไร ?

Firebase คือ platform ที่ถูกพัฒนาโดย Google ที่ทำการรวมเครื่องมือสำหรับช่วยการพัฒนา web, app ให้สามารถทำงานได้ง่ายขึ้น

  • Firebase มีเครื่องมือที่ช่วยทำให้การพัฒนา, deploy และการจัดการ application ทั้ง web, app มีประสิทธิภาพขึ้นได้
  • Firebase มีหมดตั้งแต่ Backend service, authentication, storage, hosting, analytics = ใช้ Firebase สามารถจบ project ยั้นขึ้นงานได้เลย

ตัวอย่าง Service Firebase

firebase-product-example

Ref: https://medium.com/codingurukul/introduction-to-firebase-f9f6ccc8a785

เช่น

  • Firebase Realtime database คือ database ที่เก็บ JSON ที่สามารถเก็บข้อมูล และ sync แบบ realtime ได้
  • Firestore คือ database scalable NoSQL cloud database ที่สามารถเก็บและ sync data แบบ realtime ได้ (คล้ายๆกับ Realtime database แต่ไอเดียการเก็บต่างกัน)
  • Firebase Authenticaion คือ Backend service SDK ที่สามารถทำให้นักพัฒนาสามารถเพิ่มเรื่อง Login และการ Authentication ของ application เข้าไปได้ (โดยไม่ต้องสร้าง Authentication service เอง)
  • Firebase Cloud function คือ Backend service ที่สามารถ run backend หลังบ้านสำหรับจัดการตาม Event database หรือ สามารถ HTTPS requests อย่าง api ออกมาผ่าน cloud functions ได้ (อารมณ์คล้ายๆ Express ของ node)
  • Firebase Storage คือ cloud storage ที่สามารถเก็บไฟล์, ภาพ, วิดีโอไว้บน Cloud ได้
  • Firebase Hosting คือ Hosting ที่สามารถ deploy static website ได้

และอื่นๆอีกหลาย product สามารถอ่านเพิ่มเติมได้ที่ https://firebase.google.com/products-build

เราจะแบ่ง Session นี้กันยังไงบ้าง

  • ในช่วงตอนที่ 2 - 9 จะเน้นไปที่ Vue Concept เป็นหลัก (รวมถึง Tailwind และ Daisy UI)
  • ในช่วงตอนที่ 10 - 17 จะเน้นไปที่ Firebase ผสมกับ Concept การรวมใน Vue รวมกัน

หลังจบ Session ที่ 9 หากใครอยากใช้ Vue ถึงต่อ API ผมคิดว่าหัวข้อพื้นฐานเพียงพอสำหรับการใช้ในงานพัฒนาได้แล้ว (หากไม่ได้ใช้ Firebase เป็น Backend)

ผลลัพธ์ของ Course นี้จะได้ออกมาประมาณไหนบ้าง

เราจะเรียก Project ที่เรากำลังจะทำนี้ว่า Easy E-commerce

นี่คือแผนที่ของ Course ทั้งหมด (ตั้งแต่ vue ถึง firebase) นี่จะเป็นภาพใหญ่ก่อน เดี๋ยวเราจะมาค่อยๆแงะกันอีกทีว่าแต่ละชิ้นคืออะไรบ้าง

intro-04

โดยเราจะแบ่งเว็บออกเป็น 2 ฝั่งคือ

1. ฝั่งหน้าเว็บ E-commerce

intro-2

Feature ที่จะทำทั้งหมดฝั่งหน้าเว็บ

  • หน้าหลัก
    • แสดง สินค้าทั้งหมด
    • ค้นหาสินค้าได้
    • เพิ่มสินค้าลงตะกร้าได้
  • หน้าจัดการ profile
  • หน้าตะกร้าสินค้า
    • เพิ่มจำนวนสินค้าในตะกร้าได้
    • ถ้า login = สามารถจำตะกร้าได้
  • หน้า checkout
    • สามารถใส่ที่อยู่จัดส่ง
    • กดชำระเงินได้ (placeorder)
  • หน้า success
    • สามารถไปชำระเงินผ่าน payment gateway แล้วแสดง success หรือ fail ออกมาได้

2. ฝั่ง Admin ที่ควบคุมหน้าเว็บ (Backoffice)

intro-3

Feature ที่จะทำทั้งหมดฝั่งหน้า Backoffice

  • หน้า login สำหรับเข้ามาสู่ admin (ด้วย email, password)
  • หน้าจัดการ Inventory (Product)
    • สามารถเพิ่มประเภทสินค้าได้
    • สามารถเพิ่มจำนวน / ลดจำนวนสินค้าได้
    • สามารถ เปิด / ปิด การแสดงผลสินค้าได้
  • หน้าจัดการ User ได้
    • สามารถปรับ role ของ user ให้สามารถเข้าหน้า admin ได้
    • สามารถช่วย user แก้ไข profile ได้ (ด้วยสิทธิ admin)
  • หน้าจัดการ Order
    • สามารถแสดง Order ทั้งหมดที่สั่งซื้อได้
    • สามารถระบุ status ได้ว่าจัดส่งสำเร็จแล้วหรือไม่

เราจะทำอะไรกันใน Session นี้ก่อนดี

  • สำหรับหัวข้อ Intro นี้เราจะเริ่มพาทุกคนเริ่มต้นจากการ setup Vue ก่อน อันเป็นสิ่งแรกที่เราจะสร้างขึ้นมา
  • สำหรับ Firebase เราจะแนะนำกันอีกทีใน Session ของ Firebase (ตอนที่ 10 เป็นต้นไป)