Hướng Dẫn Xây Dựng Ứng Dụng FastAPI với MongoDB

Giới thiệu

Gần đây, tôi đã xây dựng một ứng dụng danh sách mua sắm tương tác đơn giản có khả năng lưu trữ dữ liệu vĩnh viễn. Tôi đã sử dụng FastAPI cho backend và MongoDB cho cơ sở dữ liệu.

FastAPI là một framework Python hiện đại, hiệu suất cao để xây dựng API, trong khi MongoDB là một cơ sở dữ liệu NoSQL linh hoạt hoàn hảo cho việc lưu trữ các tài liệu dạng JSON.

Mục tiêu

Mục tiêu của bài viết này là hướng dẫn bạn từng bước xây dựng một ứng dụng web sử dụng FastAPI và MongoDB. Qua đó, bạn sẽ học được cách thiết lập dự án, kết nối FastAPI với MongoDB, tạo các endpoint API, xây dựng giao diện frontend và chạy ứng dụng.

Bước 1: Thiết lập Dự án

Tôi bắt đầu bằng cách tạo một thư mục dự án:

shopping_demo/
│
├─ main.py         # Backend FastAPI
├─ requirements.txt
├─ venv/           # Môi trường ảo Python
└─ frontend/
    ├─ index.html
    └─ style.css

Tạo một môi trường ảo và cài đặt các gói cần thiết:

python -m venv venv
.\venv\Scripts\activate      # Windows
pip install fastapi uvicorn pymongo

Bước 2: Kết nối FastAPI với MongoDB

Tôi đã sử dụng MongoDB Atlas cho lưu trữ đám mây:

1. Đăng ký tại MongoDB Atlas
2. Tạo một cluster miễn phí
3. Thêm một người dùng cơ sở dữ liệu và whitelist địa chỉ IP của tôi
4. Sao chép chuỗi kết nối

Dưới đây là mã để kết nối FastAPI với MongoDB:

from pymongo import MongoClient
from fastapi import FastAPI

MONGO_URI = "mongodb+srv://<username>:<password>@cluster0.mongodb.net/shopping_db?retryWrites=true&w=majority"
client = MongoClient(MONGO_URI)
db = client["shopping_db"]
collection = db["items"]

app = FastAPI()

Bước 3: Tạo API Endpoints

Tôi cần các endpoint cho các thao tác CRUD cơ bản:

from pydantic import BaseModel
from typing import List
from bson import ObjectId
from fastapi import HTTPException

class ItemBase(BaseModel):
    name: str
    quantity: int
    bought: bool = False

def item_helper(item) -> dict:
    return {
        "id": str(item["_id"]),
        "name": item["name"],
        "quantity": item["quantity"],
        "bought": item["bought"]
    }

@app.get("/items", response_model=List[ItemBase])
def list_items():
    items = collection.find()
    return [item_helper(i) for i in items]

@app.post("/items", response_model=ItemBase)
def create_item(item: ItemBase):
    result = collection.insert_one(item.dict())
    new_item = collection.find_one({"_id": result.inserted_id})
    return item_helper(new_item)

Tôi cũng đã thêm các endpoint PUT và DELETE để cập nhật và xóa các mục.

Bước 4: Xây dựng Giao diện Frontend

Giao diện frontend là một trang HTML đơn giản với JavaScript để lấy dữ liệu từ API:

<ul id="itemList"></ul>

<script>
async function fetchItems() {
    const res = await fetch("http://127.0.0.1:8000/items");
    const items = await res.json();
    const list = document.getElementById("itemList");
    list.innerHTML = "";
    items.forEach(item => {
        const li = document.createElement("li");
        li.textContent = `${item.name} - ${item.quantity}`;
        list.appendChild(li);
    });
}
fetchItems();
</script>

• Thêm một form để thêm mục mới.
• Các nút để xóa hoặc đánh dấu mục đã mua một cách động.

Bước 5: Tạo kiểu dáng với CSS

body { 
  font-family: Arial; 
  background: #f7f7f7; 
  padding: 20px; 
}

ul { 
  list-style: none; 
  padding: 0; 
}

li { 
  background: white; 
  margin: 8px 0; 
  padding: 10px; 
  border-radius: 6px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Bước 6: Chạy Ứng Dụng

Chạy máy chủ FastAPI:

python -m uvicorn main:app --reload

• Mở index.html trong trình duyệt của bạn
• Tương tác với danh sách mua sắm của bạn
• Những thay đổi được lưu trữ trong MongoDB

Cách hoạt động của ứng dụng

User → Frontend (HTML + JS) → FastAPI → MongoDB → Frontend cập nhật

• Giao diện frontend lấy và hiển thị các mục một cách động
• Các thao tác thêm, cập nhật hoặc xóa được gửi đến các endpoint FastAPI
• FastAPI cập nhật MongoDB, giữ dữ liệu được lưu trữ vĩnh viễn

Kết luận

Dự án này đã giúp tôi học cách tích hợp FastAPI với MongoDB cho một ứng dụng web thực tế. Một số điểm chính:

• FastAPI là nhanh chóng, trực quan và dễ sử dụng cho các API
• MongoDB giúp dễ dàng lưu trữ dữ liệu dạng JSON
• Một giao diện frontend đơn giản có thể tương tác động với backend

Bước tiếp theo:

• Thêm xác thực người dùng
• Triển khai ứng dụng lên đám mây (Heroku / Railway)
• Cải thiện giao diện frontend với React hoặc Tailwind CSS

Tóm lại:
👋 Cảm ơn bạn đã đọc! Nếu bạn thích hướng dẫn này, hãy theo dõi tôi trên DEV để cập nhật thêm nhiều dự án, hướng dẫn và mẹo về Python, FastAPI và phát triển web.

Tài liệu tham khảo:

• Tài liệu FastAPI
• MongoDB Atlas