Hướng Dẫn Firebase Cho Người Mới Bắt Đầu

Nguồn: Fireship, Dịch: Huy Hoàng

Dec 04, 2025

Trong bài này, mình sẽ hướng dẫn bạn xây dựng một ứng dụng web cực kỳ đơn giản bằng Firebase – hoàn toàn từ đầu, chỉ dùng JavaScript thuần (không framework).
Nếu bạn trước giờ chỉ làm với React, Angular hay Vue thì đây là cơ hội rất tốt để hiểu Firebase hoạt động thế nào “từ gốc”.

Ngoài ra, mình sẽ giải thích tại sao Firebase lại là lựa chọn số 1 của mình thay vì AWS hay Heroku.

Firebase là gì?

Bạn có thể hiểu Firebase là một dạng Backend-as-a-Service.
Tức là bạn không cần tự làm backend, Firebase làm gần như tất cả giúp bạn:

Firebase bao gồm:

Một “container” chứa tài nguyên của Google Cloud Platform
(database, storage, hosting, functions, authentication…)
Một bộ SDK cho phép bạn tương tác với chúng từ:
- Web
- Android
- iOS
- Unity
- NodeJS
- v.v...

Vì sao nên chọn FireBase

Firebase không trả tiền để mình nói tốt về họ đâu, mình chỉ là một khách hàng hài lòng thôi :))

Theo quan điểm cá nhân của mình, Firebase là con đường nhanh nhất để bạn đưa ứng dụng đến tay người dùng. Firebase làm được điều này bằng cách đơn giản hóa gần như toàn bộ công việc backend của bạn.

Với một lập trình viên độc lập, điều này được thể hiện qua 3 điểm chính:

1. Trải nghiệm lập trình tuyệt vời

2. Giảm thiểu tối đa chi phí cloud

3. Tối đa hóa số lượng tính năng bạn có thể triển khai trong mỗi giờ làm việc

Firebase miễn phí cho những dự án nhỏ, đơn giản, sau đó chi phí tăng dần theo lưu lượng sử dụng.
Mô hình giá này dễ đoán hơn nhiều so với Heroku, nơi bạn phải trả tiền cho server chuyên dụng và sẽ lọt vào mức giá rất cao khi ứng dụng vượt quá mức dùng tối thiểu.

AWS thì có một kho dịch vụ khổng lồ và là nền tảng cloud mở hàng đầu hiện nay, nhưng trải nghiệm lập trình lại kém hơn.
Giao diện AWS trông như được xây dựng bằng Twitter Bootstrap phiên bản đầu tiên, và điều quan trọng hơn là các dịch vụ của họ thường rời rạc, khó ghép nối và khó sử dụng hiệu quả.

Firebase thì ngược lại:
Đó là một nền tảng tích hợp chặt chẽ, đi theo triết lý “chất lượng hơn số lượng”.

1. Hosting và Triển khai (Hosting and Deployment)

Bạn có thể sử dụng bất kỳ IDE nào, nhưng trong hướng dẫn này mình sẽ dùng VSCode.
Yêu cầu duy nhất khác là bạn cần cài đặt NodeJS và NPM trên máy tính của mình.

Đầu tiên chúng ta sẽ khởi tạo một thư mục rỗng và mở terminal lên.

Open a blank vscode project — Tạo dự án mới.

Tạo một Dự án Mới (Create a New Project)

Mỗi dự án Firebase là một container chứa hạ tầng đám mây của Google Cloud Platform (GCP), chẳng hạn như cơ sở dữ liệu, kho lưu trữ tệp, máy chủ hosting, và nhiều thành phần khác.

Create a new project from the Firebase Console — Tạo một dự án mới từ Firebase Console

Khởi tạo và Chạy ứng dụng (Initialize and Serve an App)

Cài Firebase CLI

npm install -g firebase-tools

Sau đó khởi tạo hosting

firebase init hosting

Chọn những tùy chọn mặc định. Sau khi xong, Firebase sẽ tạo:

public/
firebase.json

Chạy thử app

firebase serve

Bạn sẽ thấy trang HTML mặc định của Firebase Hosting.

The default page generated by Firebase Hosting — Trang mặc định được tạo bởi Firebase Hosting

Nhưng bạn có muốn thấy ứng dụng của mình trên internet thực tế không? Hãy triển khai nó bằng cách chạy.

firebase deploy

Và thế là xong – bạn đã có website:

Có SSL
Có CDN
Sẵn sàng cho user thật

Rất ít nền tảng nào deploy nhanh và “mượt” như Firebase.

2. Xác thực người dùng

Giờ mình hướng dẫn bạn tạo đăng nhập bằng Google OAuth trong chưa đến 10 dòng code.

signInWithPopup, Phương thức này sẽ lưu một JSON Web Token vào trình duyệt để xác định người dùng.

function googleLogin() {
    const provider = new firebase.auth.GoogleAuthProvider();
    
    firebase.auth().signInWithPopup(provider)
        
            .then(result => {
                const user = result.user;        
            })  
}

<button onclick=”googleLogin()”>
  Login with Google
</button>

Sau khi chạy, Firebase tự:

Đăng nhập Google
Lưu token user
Tạo user trong Authentication Console

Bạn không phải code backend.

3. Cloud Firestore (Database realtime)

Nền tảng của ứng dụng Firebase là cơ sở dữ liệu. Bạn có thể đọc một tài liệu trong cơ sở dữ liệu bằng cách (1) tạo tham chiếu đến tài liệu đó và (2) gọi onSnaphot(). Thao tác này không chỉ đọc tài liệu mà còn đăng ký nhận cập nhật theo thời gian thực - một tính năng cực kỳ mạnh mẽ nếu ứng dụng của bạn cung cấp phản hồi theo thời gian thực cho người dùng.

Ví dụ đọc 1 document realtime:

const db = firebase.firestore();

// Reference the document
const myPost = db.collection(’products’).doc(’CGl2Obsqagfm1DguguLS’);

// Listen to realtime changes 
myPost.onSnapshot(doc => {

  const data = doc.data();

})

Ví dụ query danh sách sản phẩm:

Firestore cũng có các phương thức mạnh mẽ để truy xuất và lọc các tập hợp tài liệu. Nếu muốn lấy tất cả các sản phẩm có giá lớn hơn 23, chúng ta có thể thực hiện truy vấn trông như sau where(’price’, ‘>=’, 23).

const productsRef = db.collection(’products’);

const query  = productsRef.where(’price’, ‘>=’, 23)

query.onSnapshot(products => {

  products.forEach(doc => {
      const data = doc.data();
  })
});

4. Firebase Storage (upload file)

Về nguyên tắc, lưu trữ tương tự như cơ sở dữ liệu - tạo tham chiếu đến đường dẫn tệp, sau đó đọc, cập nhật hoặc xóa tệp đó.

Đoạn code dưới đây sẽ đẩy tệp của bạn từ trình duyệt vào kho lưu trữ.

<input type=”file” onchange=”uploadFile(this.files)”>

function uploadFile(files) {
    const storageRef = firebase.storage().ref();
    const imgRef = storageRef.child(’horse.jpg’);

    const file = files.item(0);

    const task = imgRef.put(file)

    // successful upload
    task.then(snapshot => {
        const url = snapshot.downloadURL
    })

    // monitor progress
    task.on(’state_changed’, snapshot => {
        console.log(snapshot)

    })
}

Chạy đoạn code này và bạn sẽ thấy file được lưu trữ trong cloud Firebase.

5. Cloud Functions – server backend theo yêu cầu

Firebase Functions cho phép bạn viết backend mà không cần duy trì server.

Khởi tạo hàm

Các hàm đám mây là một môi trường NodeJS riêng biệt, vì vậy đừng nhầm lẫn chúng với code frontend của bạn. Bạn có thể khởi tạo môi trường này trong dự án của mình bằng cách chạy:

firebase init functions

Hàm Firestore đơn giản

Đoạn code Cloud Function dưới đây sẽ “lắng nghe” (listen) sự thay đổi của collection products trong Firestore.
Cụ thể: mỗi khi có một tài liệu mới được tạo trong collection này, hàm sẽ tự động được kích hoạt và chạy.

exports.sendMessage: đây là tên hàm mà chúng ta tự đặt.
.document(’products/{productId}’).onCreate: nghĩa là hàm sẽ chạy ngay khi Firestore phát hiện có một document mới được thêm vào products.
{productId} là biến động đại diện cho ID của tài liệu vừa được tạo.
return productRef.update(...): bạn nhớ phải return một Promise trong callback của Cloud Function.
Firebase dựa vào Promise này để biết khi nào hàm chạy xong.

Nói cách khác: khi bạn thêm một sản phẩm mới vào Firestore → hàm này sẽ tự động chạy → cập nhật thêm một trường mới vào tài liệu đó.

const functions = require(’firebase-functions’);

const admin = require(”firebase-admin”);
admin.initializeApp();


exports.sendMessage = functions.firestore
    .document(’products/{productId}’)
    .onCreate(event => {

    const docId = event.params.productId;

    const name = event.after.data().name;

    const productRef = admin.firestore().collection(’products’).doc(docId)

    return productRef.update({ message: `Nice ${name}! - Love Cloud Functions`})

});

Bây giờ hãy triển khai function đó

firebase deploy --only functions

Qua toàn bộ bài viết này, mình hy vọng bạn đã hình dung được một cách rõ ràng rằng với Firebase, việc xây dựng một ứng dụng web từ “con số 0” trở nên dễ dàng hơn rất nhiều — bạn không cần phải lo lắng nhiều về server, cấu hình backend, hay hạ tầng phức tạp. Chúc bạn xây được nhiều ứng dụng hay, hiệu quả — và học được thật nhiều từ Firebase!

NoCode Việt Nam

Discussion about this post

Ready for more?