Ứng dụng NoSQL với React

Chuyên đề 01 • Bài giảng ThS Lê Thanh Sơn

Nền Tảng Cơ Sở Dữ Liệu NoSQL Dành Cho Ứng Dụng Di Động

MongoDB Community & Compass

Cơ sở dữ liệu (Database) là kho lưu trữ và điều phối dữ liệu cốt lõi của một hệ thống số. Đối với lập trình viên React & React Native, mô hình NoSQL dạng tài liệu (Document-based) là bước chuẩn bị hoàn hảo nhất nhờ sự tương thích tự nhiên với cấu trúc dữ liệu JSON trong JavaScript.

1. Database

Hệ thống lưu trữ cấp cao nhất (Container) chứa toàn bộ các Collection con (ví dụ: studio, ThanhSonStudioDB).

2. Collection

Tập hợp các Document cùng miền nghiệp vụ, tương đương với Table trong SQL nhưng không ép buộc schema cứng nhắc.

3. Document

Bản ghi dữ liệu cụ thể dạng BSON/JSON, tương đương Row trong SQL. Luôn sở hữu một trường khóa chính độc nhất _id.

4. Field

Cặp thuộc tính Key - Value bên trong Document. Giá trị có thể là string, number, boolean, array hoặc object con lồng nhau.

Bảng Ánh Xạ Thuật Ngữ Giữa SQL Và NoSQL (MongoDB / Firestore)

Đặc tính / Khái niệm	Cơ sở dữ liệu Quan Hệ (RDBMS / SQL)	Cơ sở dữ liệu Phi Quan Hệ (NoSQL / MongoDB)
Nơi chứa tổng	Database	Database
Cấu trúc nhóm	Table (Bảng với cột định sẵn)	Collection (Không ép cấu trúc cột)
Đơn vị bản ghi	Row / Record (Hàng)	Document (BSON / JSON Object)
Thuộc tính dữ liệu	Column (Cột cố định kiểu)	Field (Key-Value linh hoạt)
Khóa chính nhận dạng	PRIMARY KEY (id tự tăng hoặc UUID)	_id (ObjectId tự sinh trong MongoDB)

Hệ Thống Thao Tác CRUD Trực Tiếp Trên MongoDB Shell (mongosh)

Trong MongoDB, mọi thao tác truy vấn đều tuân thủ cú pháp cốt lõi: db.<Tên_Collection>.<Hành_động>(). Các ví dụ thực hành được thầy Lê Thanh Sơn biên soạn trực tiếp theo bối cảnh quản lý Studio chụp ảnh cưới:

C • insertOne (Thêm 1 dịch vụ)

use("studio");
db.DichVu.insertOne({
  maDichVu: "DV01",
  tenDichVu: "Chụp ảnh cưới ngoại cảnh Tây Ninh",
  giaTien: 5500000,
  trangThai: true
});

C • insertMany (Thêm nhiều dịch vụ)

db.DichVu.insertMany([
  { maDichVu: "DV02", tenDichVu: "Thuê váy cưới cao cấp", giaTien: 1200000 },
  { maDichVu: "DV03", tenDichVu: "Trang điểm cô dâu", giaTien: 800000, khuyenMai: "Tặng kèm hoa cài tóc" }
]);

R • find (Truy vấn dữ liệu)

// Lấy toàn bộ document
db.DichVu.find({});

// Lọc dịch vụ có giá tiền > 1.000.000 VNĐ
db.DichVu.find({ giaTien: { $gt: 1000000 } });

U & D • updateOne & deleteOne

// Cập nhật: Tham số 1 (Bộ lọc), Tham số 2 ($set)
db.DichVu.updateOne(
  { maDichVu: "DV01" },
  { $set: { giaTien: 6000000 } }
);

// Xóa 1 document theo mã dịch vụ
db.DichVu.deleteOne({ maDichVu: "DV03" });

Chuyên đề 02 • Bài giảng ThS Lê Thanh Sơn

Làm Quen Với ReactJS & Kiến Trúc Component

Vite + ESLint + JSX

ReactJS tổ chức giao diện theo tư duy khối độc lập (Component-based). Để sẵn sàng cho việc kết nối NoSQL sau này, lập trình viên cần hiểu sâu cách vận hành của Props (luồng dữ liệu truyền từ cha xuống con, chỉ đọc) và State (trạng thái nội bộ thay đổi được kích hoạt re-render giao diện).

Quy Trình Khởi Tạo Dự Án React Bằng Vite (Chuẩn WebStorm / VS Code)

Bước 1: Tạo dự án

npm create vite@latest ten-du-an -- --template react

Tại hộp thoại chọn Linter, khuyên dùng ESLint để kiểm tra lỗi tiêu chuẩn.

Bước 2: Cài đặt packages

cd ten-du-an
npm install

Cài đặt các gói phụ thuộc lõi của React, React-DOM và công cụ build Vite.

Bước 3: Chạy Local Server

npm run dev

Mở trình duyệt truy cập http://localhost:5173/ với tính năng Hot Reload (HMR).

5 Ứng Dụng Component Cốt Lõi (Slide Bài 2)

1. Tái sử dụng nút bấm với Props CustomButton

function CustomButton(props) {
  return (
    <button style={{ backgroundColor: props.color, padding: '10px', margin: '5px' }}>
      {props.title}
    </button>
  );
}

export default function App() {
  return (
    <div>
      <CustomButton title="Đăng nhập" color="blue" />
      <CustomButton title="Đăng ký" color="green" />
      <CustomButton title="Hủy bỏ" color="red" />
    </div>
  );
}

2. Ẩn / Hiện Mật Khẩu (Toggle State) PasswordField

import { useState } from 'react';

export default function PasswordField() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <div>
      <input 
        type={isVisible ? "text" : "password"} 
        placeholder="Nhập mật khẩu..." 
      />
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "Ẩn" : "Hiện"} Mật khẩu
      </button>
    </div>
  );
}

3. Render Danh Sách Với Map & Key ProductList

export default function ProductList() {
  const products = [
    { id: 1, name: "Điện thoại iPhone", price: 1000 },
    { id: 2, name: "Tai nghe Airpods", price: 200 },
    { id: 3, name: "MacBook Pro", price: 2500 }
  ];
  return (
    <ul>
      {products.map(item => (
        <li key={item.id}>
          {item.name} - Giá: ${item.price}
        </li>
      ))}
    </ul>
  );
}

4. Xử Lý Giỏ Hàng (State Không Bị Âm) CartItem

import { useState } from 'react';

export default function CartItem() {
  const [quantity, setQuantity] = useState(1);
  const handleDecrease = () => {
    if (quantity > 0) setQuantity(quantity - 1);
  };
  return (
    <div>
      <p>Số lượng trong giỏ: {quantity}</p>
      <button onClick={handleDecrease}> - Giảm </button>
      <button onClick={() => setQuantity(quantity + 1)}> + Tăng </button>
    </div>
  );
}

Chuyên đề 03 • Bài giảng ThS Lê Thanh Sơn

Ứng Dụng Firebase Firestore Với ReactJS (Hướng Tới React Native)

Firebase Web SDK v9+ Modular

ReactJS và React Native dùng chung tư duy luồng dữ liệu (State, Props, JSX) và dùng chung 100% Firebase Web SDK. Các kỹ năng tương tác với Firestore trên ReactJS sẽ được chuyển tiếp trọn vẹn khi bạn xây dựng ứng dụng di động iOS/Android.

Cấu Hình Kết Nối File src/firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyBW2k1nqt8mZu9utCl78j0h516WIrfuwew",
  authDomain: "quan-ly-studio.firebaseapp.com",
  projectId: "quan-ly-studio",
  storageBucket: "quan-ly-studio.firebasestorage.app",
  messagingSenderId: "21000373325",
  appId: "1:21000373325:web:a0cff6c6dc352718ccc804"
};

// Khởi tạo Firebase App
const app = initializeApp(firebaseConfig);

// Khởi tạo dịch vụ Cloud Firestore
export const db = getFirestore(app);

10 Kỹ Thuật Firestore Lõi Giảng Viên Đã Hướng Dẫn

Bài 1: Đọc dữ liệu (Read) với getDocs và useEffect

Kéo danh sách công việc từ collection tasks về hiển thị trên giao diện thông qua State.

const fetchTasks = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "tasks"));
    const taskList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    setTasks(taskList);
  } catch (error) {
    console.error("Lỗi khi tải dữ liệu:", error);
  }
};

Bài 2: Thêm mới dữ liệu (Create) với addDoc

await addDoc(collection(db, "tasks"), {
  title: title,
  completed: false,
  priority: "Cao"
});

Bài 3: Cập nhật trạng thái hoàn thành với updateDoc

const taskRef = doc(db, "tasks", taskId);
await updateDoc(taskRef, {
  completed: !currentStatus
});

Bài 4: Xóa tài liệu với deleteDoc

const taskRef = doc(db, "tasks", taskId);
await deleteDoc(taskRef);

Bài 5: Truy vấn có điều kiện (Query & where)

const q = query(
  collection(db, "tasks"),
  where("completed", "==", false)
);
const querySnapshot = await getDocs(q);

Bài 6: Lắng nghe theo thời gian thực (Real-time onSnapshot)

Đặc biệt quan trọng: Có hàm dọn dẹp (cleanup function) return () => unsubscribe() để ngăn tràn bộ nhớ trong React Native.

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, "tasks"), (snapshot) => {
    const liveData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    setTasks(liveData);
  });
  return () => unsubscribe();
}, []);

Bài 7: Phân trang dữ liệu (Pagination với limit và startAfter)

const q = query(
  collection(db, "tasks"), 
  orderBy("title"), 
  startAfter(lastDoc), 
  limit(5)
);

Bài 8: Truy vấn phức hợp (Compound Queries nhiều điều kiện)

const q = query(
  collection(db, "tasks"),
  where("completed", "==", false),
  where("priority", "==", "Cao"),
  orderBy("createdAt", "desc")
);

Bài 9: Xử lý giao dịch hàng loạt (Batch Writes an toàn)

const batch = writeBatch(db);
taskIdsArray.forEach(id => {
  const taskRef = doc(db, "tasks", id);
  batch.update(taskRef, { completed: true });
});
await batch.commit(); // Hoàn tất cùng lúc hoặc rollback toàn bộ nếu lỗi

Bài 10: Truy xuất Bộ sưu tập con (Subcollection lồng nhau)

// Truy cập: collection "users" -> document của user hiện tại -> subcollection "orders"
const ordersRef = collection(db, "users", currentUserId, "orders");
const snapshot = await getDocs(ordersRef);

Chuyên đề 04 • Bài giảng ThS Lê Thanh Sơn

Xác Thực Người Dùng (Firebase Auth) & Bảo Mật Dữ Liệu Theo UID

Firebase Auth + Firestore Security

Định danh người dùng là mắt xích bắt buộc trong ứng dụng thực tế. Thay vì lưu dữ liệu chung chạ, mỗi bản ghi trong NoSQL sẽ được đánh dấu với userId: auth.currentUser.uid, kết hợp hàm gác cổng onAuthStateChanged để quản trị phiên làm việc mượt mà.

Cập Nhật Xuất Cả Database Và Auth (src/firebase.js)

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth"; // 1. Bổ sung getAuth

const firebaseConfig = { /* ...cấu hình từ Firebase Console */ };
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth(app); // 2. Xuất biến auth dùng toàn dự án

1. Đăng ký tài khoản (Sign Up)

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from './firebase';

const handleRegister = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("Đã tạo user với UID:", userCredential.user.uid);
  } catch (error) {
    if (error.code === 'auth/email-already-in-use') {
      alert("Email này đã được đăng ký!");
    } else if (error.code === 'auth/weak-password') {
      alert("Mật khẩu phải tối thiểu 6 ký tự!");
    }
  }
};

2. Đăng nhập & Vô hiệu hóa nút khi Loading

import { signInWithEmailAndPassword } from "firebase/auth";

const handleLogin = async (e) => {
  e.preventDefault();
  setIsLoading(true); // Chống click nhiều lần
  try {
    const user = await signInWithEmailAndPassword(auth, email, password);
    alert(`Xin chào, ${user.user.email}!`);
  } catch (error) {
    alert("Sai email hoặc mật khẩu!");
  } finally {
    setIsLoading(false);
  }
};

3. Duy trì phiên đăng nhập & Đăng xuất

import { onAuthStateChanged, signOut } from "firebase/auth";

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user); // Tự động phát hiện user hoặc null
    setInitializing(false);
  });
  return () => unsubscribe();
}, []);

const handleLogout = async () => {
  await signOut(auth);
};

4 & 5. Gắn userId & Lắng nghe Realtime theo UID

// Thêm công việc gắn kèm UID và giờ máy chủ
await addDoc(collection(db, "tasks"), {
  title: title,
  userId: auth.currentUser.uid,
  userEmail: auth.currentUser.email,
  createdAt: serverTimestamp()
});

// Chỉ lắng nghe công việc của riêng người dùng
const q = query(
  collection(db, "tasks"),
  where("userId", "==", auth.currentUser.uid)
);
onSnapshot(q, (snapshot) => { /* Cập nhật UI */ });

Phòng Thí Nghiệm Ảo

Interactive Labs: NoSQL & ReactJS Trong Trình Duyệt

Mô phỏng tức thì

Bạn có thể trực tiếp thêm, sửa, xóa các dịch vụ studio và công việc thực tế, đồng thời kiểm tra hoạt động của Component React (State, Props, Giỏ hàng, Đổi giao diện) ngay tại đây mà không cần cài đặt môi trường ngoài.

Lab 1: Giả Lập NoSQL Collection (DichVu / Tasks)

Mô phỏng thao tác: insertOne, find, updateOne, deleteOne

_id / Document ID	Tên Dịch Vụ	Giá Tiền (VNĐ)	Mức Ưu Tiên	Trạng Thái	Hành Động

Demo Giỏ Hàng (State Logic không bị âm)

CartItem.jsx

Sản phẩm: Combo Album Cưới Trọn Gói (8.500.000 đ)

Số lượng trong giỏ: 1

Tổng tiền tạm tính: 8.500.000 VNĐ

Demo Theme Switcher (Conditional Styling)

ThemeSwitcher.jsx

Đảo trạng thái isDarkMode để đổi màu Component con:

Chế độ hiện tại: Giao diện Tối (Dark Mode)

Cấu trúc themeStyle: { backgroundColor: isDarkMode ? '#1e293b' : '#f8fafc' }

Nền tảng NoSQL & Tích hợp
ReactJS đến React Native Chuyên Nghiệp

ThS Lê Thanh Sơn