เรียนรู้การใช้งาน Firebase สำหรับพัฒนาเว็บแอพพลิเคชั่น

4 min readApr 8, 2024

Firebase เป็นบริการของ Google ที่ให้บริการเกี่ยวกับการจัดการระบบหลังบ้าน (Backend Services) โดยรวบรวมเครื่องมือต่าง ๆ สำหรับอำนวยความสะดวกแก่นักพัฒนาแอพพลิเคชั่น ทั้งในส่วนของ Mobile Application, Web Application เป็นต้น

การใช้บริการของ Firebase ช่วยลดภาระและระยะเวลาในการพัฒนาระบบหลังบ้านเองและทำให้พัฒนาแอพพลิเคชั่นได้อย่างมีประสิทธิภาพมากยิ่งขึ้น

ตัวอย่างบริการของ Firebase

Realtime Database , Cloud Firestore (บริการฐานข้อมูล)
Authentication (บริการเกี่ยวกับการจัดการผู้ใช้งาน)
Cloud Message (บริการเกี่ยวกับระบบแจ้งเตือน)
Cloud Storage (บริการเกี่ยวกับไฟล์)
Hosting (บริการเกี่ยวกับการเผยแพร่แอพพลิเคชั่น)
Performance Monitoring & Google Analytic (วิเคราะห์ประสิทธิภาพ
การทำงานของแอพพลิเคชั่น)

จัดการฐานข้อมูลด้วย Firebase

ฐานข้อมูลใน Firebase จะแบ่งออกเป็น 2 รูปแบบ ได้แก่

Realtime Database เป็นบริการฐานข้อมูลที่สามารถจัดเก็บข้อมูลและซิงค์ข้อมูลแบบเรียลไทม์ เหมาะสำหรับใช้งานแบบทั่วไป
Cloud Firestore เป็นบริการฐานข้อมูลแบบใหม่ ใช้เก็บข้อมูลและอัพเดตข้อมูลแบบเรียลไทม์ พร้อมระบบค้นหาอย่างมีประสิทธิภาพและสามารถปรับขนาดอัตโนมัติตามปริมาณข้อมูลที่ใช้งานเพิ่มขึ้น (Horizontal-Scaling)

Cloud Firestore (บริการฐานข้อมูล)

Cloud Firestore เป็นฐานข้อมูลบนคลาวด์ที่มีเสถียรภาพและรองรับการทำงานกับฐานข้อมูลขนาดใหญ่ สามารถคิวรี่ข้อมูลได้อย่างรวดเร็วและเป็นฐานข้อมูลในรูปแบบ “NOSQL”

มีการเก็บข้อมูลในรูปแบบของ JSON และมีการซิงค์ข้อมูลกับทุกอุปกรณ์ที่เชื่อมต่อแบบอัตโนมัติ รองรับการทำงานแบบ Offline รวมถึงมีการกำหนดกฎเกณฑ์ (Security Rules) สำหรับกำหนดสิทธิ์เข้าถึงข้อมูลได้

โครงสร้างของ Firestore

มีองค์ประกอบอยู่ 3 ส่วน ได้แก่

Database เป็นส่วนที่ใช้เก็บ Collection หรือชุดข้อมูล
Collection หรือชุดข้อมูลเทียบได้กับตารางในฐานข้อมูลเชิงสัมพันธ์
Documents เอกสารที่จัดเก็บข้อมูลของคู่คีย์ (Key) และค่า (Value)

https://www.alachisoft.com/nosdb/why-nosql.html

ตัวอย่างโค้ดการใช้งาน Firebase & Cloud Firestore

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Cloud-Firestore Tutorial</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container my-3">
        <h2 class="text-center">Firebase Cloud-Firestore</h2>
        <form id="addForm">
            <div class="form-group">
                <label for="name">ชื่อ</label>
                <input type="text" class="form-control" name="name">
            </div>
            <div class="form-group">
                <label for="age">อายุ</label>
                <input type="text" class="form-control" name="age">
            </div>
            <div class="form-group my-3">
                <button type="submit" class="btn btn-success">บันทึก</button>
            </div>
        </form>
        <hr>
        <table class="table table-bordered" id="table">
            <tr>
                <th>ชื่อ</th>
                <th>อายุ</th>
                <th>ลบข้อมูล</th>
            </tr>
        </table>
    </div>
    <script src="app.js" type="module"></script>
</body>
</html>

app.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getFirestore , collection , getDocs,addDoc,deleteDoc,doc} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js";
const firebaseConfig = {
  apiKey: "AIzaSyA7-zewvkgi7TSlJ1Q0YwiPtDENaEKXGkU",
  authDomain: "basic-firebase-web.firebaseapp.com",
  projectId: "basic-firebase-web",
  storageBucket: "basic-firebase-web.appspot.com",
  messagingSenderId: "658042343144",
  appId: "1:658042343144:web:664ff1587e79b904c0035d",
  measurementId: "G-KJ9K42ZHNL"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app)
const table = document.getElementById("table") 
const form = document.getElementById("addForm")

async function getEmployees(db){
    const empCol = collection(db,'employees')
    const empSnapshot = await getDocs(empCol)
    return empSnapshot
}

function showData(employee){
    const row = table.insertRow(-1)
    const nameCol = row.insertCell(0)
    const ageCol = row.insertCell(1)
    const deleteCol = row.insertCell(2)
    nameCol.innerHTML = employee.data().name
    ageCol.innerHTML = employee.data().age

    //สร้างปุ่มลบ
    let btn =document.createElement('button')
    btn.textContent="ลบข้อมูล"
    btn.setAttribute('class','btn btn-danger')
    btn.setAttribute('data-id',employee.id)
    deleteCol.appendChild(btn)
    btn.addEventListener('click',(e)=>{
        let id = e.target.getAttribute('data-id');
        deleteDoc(doc(db,'employees',id))
    })
}

//ดึงกลุ่ม document
const data = await getEmployees(db)
data.forEach(employee=>{
    showData(employee)
})

//ดึงข้อมูลจากแบบฟอร์ม
form.addEventListener('submit',(e)=>{
    e.preventDefault()
    addDoc(collection(db,'employees'),{
        name:form.name.value,
        age:form.age.value
    })
    form.name.value=""
    form.age.value=""
    alert("บันทึกข้อมูลเรียบร้อย")
})

Authentication (การจัดการผู้ใช้งาน)

Authentication เป็นบริการที่ใช้สำหรับตรวจสอบสิทธิ์การเข้าใช้งานและการยืนยันตัวตนของผู้ใช้ระบบ เช่น ระบบลงทะเบียนผู้ใช้ , Login / Logout เป็นต้น

จุดเด่นของ Firebase Authentication

มีระบบจัดการข้อมูลสมาชิก โดยไม่ต้องเขียนโค้ดฝั่ง Server
มีความปลอดภัยสูง
รองรับระบบ Log-in ได้หลายแบบ เช่น E-mail / Password , Google , Facebook , Microsoft , Apple เป็นต้น

ตัวอย่างโค้ดการใช้งาน Firebase & Authentication

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Authentication</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container my-3">
        <div id="form-area">
            <h2>สร้างบัญชีผู้ใช้</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" placeholder="ป้อนอีเมลของคุณ" name="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" placeholder="ป้อนรหัสผ่านของคุณ" name="password" class="form-control">
                </div>
                <div class="form-group my-3">
                    <button type="submit" class="btn btn-primary">ลงทะเบียน</button>
                </div>
            </form>
            <hr>
            <h2>เข้าสู่ระบบ</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" placeholder="ป้อนอีเมลของคุณ" name="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" placeholder="ป้อนรหัสผ่านของคุณ" name="password" class="form-control">
                </div>
                <div class="form-group my-3">
                    <button type="submit" class="btn btn-success">เข้าสู่ระบบ</button>
                </div>
            </form>
        </div>
        <div id="profile">
            <h3 id="welcome">สวัสดีผู้ใช้ระบบ</h3>
            <button id="logout" class="btn btn-success">ออกจากระบบ</button>
        </div>
    </div>
    <script src="app.js" type="module"></script>
</body>
</html>

app.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import {getAuth,createUserWithEmailAndPassword,onAuthStateChanged,signOut,signInWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js";
const firebaseConfig = {
  apiKey: "AIzaSyA7-zewvkgi7TSlJ1Q0YwiPtDENaEKXGkU",
  authDomain: "basic-firebase-web.firebaseapp.com",
  projectId: "basic-firebase-web",
  storageBucket: "basic-firebase-web.appspot.com",
  messagingSenderId: "658042343144",
  appId: "1:658042343144:web:664ff1587e79b904c0035d",
  measurementId: "G-KJ9K42ZHNL"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app)

const form = document.getElementById("registerForm")
const formarea = document.getElementById("form-area")
const profile = document.getElementById("profile")
const welcome = document.getElementById("welcome")
const logout=document.getElementById("logout")
const loginForm = document.getElementById("loginForm")

form.addEventListener("submit",(e)=>{
    e.preventDefault()
    const email = form.email.value
    const password = form.password.value
    createUserWithEmailAndPassword(auth,email,password)
    .then((result)=>{
        alert("สร้างบัญชีผู้ใช้เรียบร้อย")
    }).catch((error)=>{
        alert(error.message)
    })
})

onAuthStateChanged(auth,(user)=>{
    //login
    if(user){
        profile.style.display="block"
        formarea.style.display="none"
        welcome.innerText=`ยินดีต้อนรับ ${user.email}`
    }else{
        profile.style.display="none"
        formarea.style.display="block"
    }
})
logout.addEventListener("click",(e)=>{
    signOut(auth).then(()=>{
        alert("ออกจากระบบเรียบร้อย")
    }).catch((error)=>{
        alert(error.message)
    })
})

loginForm.addEventListener("submit",(e)=>{
    e.preventDefault()
    const email = loginForm.email.value
    const password = loginForm.password.value
    signInWithEmailAndPassword(auth,email,password)
    .then((result)=>{
        alert("ลงชื่อเข้าใช้เรียบร้อย")
    }).catch((error)=>{
        alert(error.message)
    })
})

Cloud Storage (บริการเกี่ยวกับไฟล์)

Cloud Storage เป็นบริการเกี่ยวกับการจัดการไฟล์ โดยอนุญาตให้อัพโหลดและดาวน์โหลดไฟล์ประเภทต่างๆได้อย่างปลอดภัย

จุดเด่นของ Firebase Cloud Storage

รองรับไฟล์หลายรูปแบบ ไฟล์ภาพ เสียงและวิดีโอ ไฟล์รูปแบบอื่นๆ
มีความปลอดภัยสูง
รองรับการทำงานหลาย Platform (iOS, Android,Web)
ใช้งานสะดวก ระหว่างอัพโหลดสามารถยกเลิกหรือหยุดการทำงานชั่วคราวได้ โดยไม่ทำให้ไฟล์เสียหาย
ขยายพื้นที่จัดเก็บไฟล์อัตโนมัติตามปริมาณการใช้งานที่เพิ่มขึ้น
พัฒนาแอพพลิเคชั่นได้อย่างรวดเร็ว โดยไม่ต้องเสียเวลาเขียนโค้ดฝั่ง Server

Hosting (การเผยแพร่แอพพลิเคชั่น)

ถ้าต้องการนำเว็บแอพพลิเคชั่นไปเผยแพร่บนอินเทอร์เน็ตจะต้องหาพื้นที่สำหรับเก็บไฟล์ไว้กับผู้ให้บริการเว็บโฮสติ้งต่างๆ ซึ่งมีทั้งแบบฟรีและแบบชำระเงินใน Firebase ก็มีบริการนี้เช่นเดียวกันโดยมีชื่อว่า “Firebase Hosting”

จุดเด่นของ Firebase Hosting

มีความปลอดภัย
ใช้คำสั่งเพียงบรรทัดเดียว สามารถเผยแพร่เว็บไซต์ได้เลย
รองรับเว็บแบบ Static และ Dynamic
เข้าถึงได้ทั่วโลก
อัพเกรดเวอร์ชั่นและย้อนคืนเวอร์ชั่นได้

เนื้อหาที่เกี่ยวข้อง

ช่องทางการสนับสนุน
🎓คอร์สเรียน Udemy | 🛒ซื้อของผ่าน Shopee

🌎 ติดตามข่าวสารเพิ่มเติมได้ที่
Facebook | YouTube | TikTok