Xây Dựng Ứng Dụng Tương Tác với FastAPI và ReactJS

happywriter

12 months ago

Tại Sao Chọn FastAPI và ReactJS?

FastAPI là một framework Python mạnh mẽ và hiệu suất cao, lý tưởng cho phát triển backend với yêu cầu phục vụ nhanh chóng. Nó hỗ trợ các tiêu chuẩn mới nhất như đồng bộ không blocking và tự động sinh tài liệu API.

ReactJS, với khả năng tạo giao diện người dùng nhanh và mượt mà, mang lại trải nghiệm người dùng hiện đại nhờ Virtual DOM và kiến trúc component hóa, giúp dễ dàng quản lý trạng thái ứng dụng.

Thiết Lập Môi Trường và Bắt Đầu với Backend FastAPI

Trước khi bắt đầu, cần cài đặt môi trường Python với FastAPI thông qua pip. Để cài đặt FastAPI, bạn có thể sử dụng lệnh dưới đây:

pip install fastapi[all]

FastAPI cho phép định nghĩa rõ ràng các endpoint API cùng với loại dữ liệu được xử lý. Điều này giúp bạn có thể khai báo dễ dàng các request body, query parameters, và path parameters. Bên cạnh đó, FastAPI còn cung cấp khả năng xác thực và quản lý errors thông qua các exception handlers, giúp bạn kiểm soát tốt hơn trong quá trình phát triển ứng dụng.

Không chỉ dừng lại ở đó, FastAPI còn tự động sinh tài liệu API cho các endpoint mà bạn đã định nghĩa bằng cách sử dụng OpenAPI. Điều này rất hữu ích cho việc giao tiếp với các bên thứ ba hoặc tạo ra tài liệu cho dự án của bạn.

Để bắt đầu, bạn cần cài đặt FastAPI và SQLAlchemy. Bạn có thể làm điều này bằng cách sử dụng pip:

pip install fastapi[all] sqlalchemy

Sau khi cài đặt xong, hãy tạo một file Python mới, ví dụ main.py và định nghĩa các route để quản lý CRUD. Dưới đây là ví dụ về cách tạo một API đơn giản:

from fastapi import FastAPI, HTTPException
from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker, Session

DATABASE_URL = "sqlite:///./test.db"

engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
Base = declarative_base()

class Item(Base):
    __tablename__ = "items"
    id = Column(Integer, primary_key=True, index=True)
    name = Column(String, index=True)

Base.metadata.create_all(bind=engine)

app = FastAPI()

@app.post("/items/")
def create_item(item: Item):
    with SessionLocal() as session:
        session.add(item)
        session.commit()
        session.refresh(item)
    return item

@app.get("/items/{item_id}")
def read_item(item_id: int):
    with SessionLocal() as session:
        item = session.query(Item).filter(Item.id == item_id).first()
    if item is None:
        raise HTTPException(status_code=404, detail="Item not found")
    return item

@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    with SessionLocal() as session:
        db_item = session.query(Item).filter(Item.id == item_id).first()
        if db_item is None:
            raise HTTPException(status_code=404, detail="Item not found")
        db_item.name = item.name
        session.commit()
        session.refresh(db_item)
    return db_item

@app.delete("/items/{item_id}")
def delete_item(item_id: int):
    with SessionLocal() as session:
        db_item = session.query(Item).filter(Item.id == item_id).first()
        if db_item is None:
            raise HTTPException(status_code=404, detail="Item not found")
        session.delete(db_item)
        session.commit()
    return {"detail": "Item deleted"}

Đoạn code trên định nghĩa các route cho các thao tác CRUD trên Item. Bạn có thể thử nghiệm với API này bằng cách sử dụng các công cụ như Postman hoặc cURL.

Sau khi đã có API cơ bản, bạn có thể tích hợp nó với ứng dụng frontend của mình để thực hiện các thao tác tương tác với cơ sở dữ liệu một cách mượt mà.

Xây Dựng Giao Diện Người Dùng Với ReactJS

Với ReactJS, bạn cần tạo một dự án mới bằng create-react-app, thiết lập các cấu trúc cơ bản của component để quản lý trạng thái và hiệu ứng động. Redux hoặc Context API có thể được sử dụng để quản lý trạng thái toàn cục một cách hiệu quả.

Để xây dựng các thành phần chính của giao diện người dùng, đầu tiên chúng ta sẽ tạo một component mới cho trang chính. Component này sẽ là nơi hiển thị dữ liệu mà chúng ta lấy từ backend. Chúng ta sẽ sử dụng Axios để gửi yêu cầu đến API của FastAPI và nhận dữ liệu trả về.

Hãy bắt đầu với một ví dụ đơn giản. Đầu tiên, hãy cài đặt Axios bằng lệnh:

npm install axios

Sau khi đã cài đặt Axios, chúng ta sẽ tạo một component gọi là HomePage:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const HomePage = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://localhost:8000/api/data');
                setData(response.data);
            } catch (error) {
                console.error('Có lỗi xảy ra khi lấy dữ liệu:', error);
            }
            setLoading(false);
        };
        fetchData();
    }, []);

    if (loading) return Đang tải dữ liệu...;

    return (
        
            Dữ liệu từ API:
            
                {data.map(item => (
                    {item.name}
                ))}
            
        
    );
};

export default HomePage;

Trong code này, chúng ta sử dụng hook useEffect để gọi API khi component được mount. Khi nhận được dữ liệu, chúng ta lưu trữ nó trong state data và hiển thị trên giao diện.

Cuối cùng, chúng ta cũng cần tạo một navigation để điều hướng giữa các trang khác nhau. Sử dụng react-router-dom để cấu hình routing:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import OtherPage from './OtherPage';

const App = () => {
    return (
        
            
                
                
            
        
    );
};

export default App;

Với cấu hình này, khi người dùng truy cập vào địa chỉ root, họ sẽ thấy dữ liệu từ API hiển thị trên trang chính. Bạn có thể tạo thêm các trang khác và điều hướng giữa chúng một cách dễ dàng.

Tích Hợp và Tối Ưu Hóa Ứng Dụng FastAPI và ReactJS

Để đảm bảo rằng frontend (ReactJS) có thể giao tiếp với backend (FastAPI) mà không gặp phải các hạn chế về bảo mật, chúng ta cần cấu hình CORS (Cross-Origin Resource Sharing). CORS là một cơ chế mà trình duyệt sử dụng để cho phép hoặc từ chối các yêu cầu AJAX từ một tên miền khác.

Trong FastAPI, bạn có thể dễ dàng cấu hình CORS bằng cách sử dụng package fastapi.middleware.cors. Đầu tiên, bạn cần cài đặt thư viện starlette nếu chưa có:

pip install starlette

Sau đó, bạn có thể thêm middleware CORS vào ứng dụng FastAPI như sau:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],  # hoặc danh sách các tên miền cụ thể
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*'],
)

Với đoạn mã trên, ứng dụng FastAPI của bạn sẽ cho phép tất cả các tên miền gửi yêu cầu HTTP tới. Đừng quên điều chỉnh allow_origins nếu bạn muốn giới hạn các nguồn gốc trong môi trường sản xuất để tăng cường bảo mật.

Trong ReactJS, bạn có thể sử dụng Axios để thực hiện các yêu cầu đến API FastAPI. Đầu tiên, bạn cần cài đặt axios:

npm install axios

Sau khi cài đặt xong, bạn có thể sử dụng Axios để gửi yêu cầu GET đến backend:

import axios from 'axios';

async function fetchData() {
    try {
        const response = await axios.get('http://localhost:8000/your-endpoint');
        console.log(response.data);
    } catch (error) {
        console.error('Có lỗi xảy ra:', error);
    }
}

Với mã lệnh trên, bạn đã có thể tương tác với API FastAPI một cách dễ dàng. Điều này cho phép frontend và backend hoạt động ăn khớp và đồng bộ, mang lại trải nghiệm người dùng tốt nhất.

Lazy loading là một kỹ thuật giúp cải thiện tốc độ tải của ứng dụng bằng cách chỉ tải các thành phần khi chúng cần thiết. Với ReactJS, bạn có thể dễ dàng triển khai lazy loading bằng cách sử dụng hàm React.lazy() kết hợp với Suspense. Điều này có nghĩa là các component sẽ chỉ được tải khi người dùng cần truy cập vào chúng, từ đó giảm thiểu số lượng mã phải tải ngay từ đầu.

Cùng với lazy loading, việc áp dụng mã hóa HTTP sẽ giúp bảo mật dữ liệu giữa client và server. Bằng cách chuyển đổi tất cả các yêu cầu HTTP sang HTTPS, bạn sẽ bảo đảm rằng dữ liệu được truyền tải một cách an toàn.

Tiếp theo, tối ưu hóa asset là điều cần thiết để giảm kích thước tài nguyên như hình ảnh, javascript và css. Hãy sử dụng các công cụ nén tài nguyên như Webpack hoặc Gulp để xử lý trước khi triển khai.

Cuối cùng, cache browser đóng vai trò quan trọng trong việc cải thiện tốc độ tải trang. Bằng cách sử dụng cache, trình duyệt có thể lưu trữ các tài nguyên đã tải xuống, giúp giảm thiểu những lần tải lại không cần thiết khi người dùng truy cập lại trang. Bạn có thể sử dụng các header HTTP như Cache-Control để thiết lập thời gian sống của cache.

Tại Sao Chọn FastAPI và ReactJS?

Thiết Lập Môi Trường và Bắt Đầu với Backend FastAPI

Xây Dựng Giao Diện Người Dùng Với ReactJS

Dữ liệu từ API:

Tích Hợp và Tối Ưu Hóa Ứng Dụng FastAPI và ReactJS

SHARE BÀI VIẾT NÀY