Khởi tạo dự án
- Tạo thư mục dự án Ebook2LateX
- Khởi tạo Git
- Tạo file: .gitignore
- Tạo repo trên Github
Cài đặt cơ sở dữ liệu
- Cài đặt PostgreSQL
- Tạo database
- Cấu hình chuỗi kết nối trong tập tin .env
- Tạo các bảng dữ liệu
- Nhập dữ liệu mẫu
Cấu hình Backend
- Cài đặt FastAPI và SQLAlchemy. Kết nối thành công từ Python đến PostgreSQL để sẵn sàng ghi dữ liệu
Cấu hình Frontend
Docker hóa môi trường phát triển
- Tạo Dockerfile cho Backend: Định nghĩa môi trường chạy Python, cài đặt các thư viện OCR và FastAPI
- Tạo Dockerfile cho Frontend: Định nghĩa môi trường chạy Node.js để build ứng dụng React
- Tạo docker-compose.yml: Đây là "nhạc trưởng" điều phối 3 dịch vụ: db: Chạy hình ảnh của PostgreSQL; backend: Chạy mã FastAPI; frontend: Chạy mã React
3.2 Xây dựng "Parse tool" (Xử lý PDF & OCR)
Giai đoạn này tập trung vào việc giải quyết yêu cầu [FR1]
[GD2.1] Trích xuất hình ảnh từ PDF: Sử dụng thư viện PyMuPDF để đọc tập tin PDF và cắt ra các vùng chứa công thức toán học
[GD2.2] Tích hợp Model OCR: Cài đặt mô hình pix2tex (LaTeX-OCR) vào thư mục services/
[GD2.3] Tạo API xử lý: Viết endpoint trong FastAPI để nhận tập tin PDF từ người dùng, chạy qua quy trình OCR và trả về chuỗi ký tự LaTeX
3.3 Phát triển Giao diện và Logic đồng bộ
Giai đoạn này hiện thực hóa yêu cầu [FR2] về tính tương tác
[GD3.1] Khởi tạo Frontend: Sử dụng React (Vite) và Tailwind CSS để dựng giao diện cơ bản gồm khu vực tải tập tin và khu vực biên tập
[GD3.2] Tích hợp MathLive: Nhúng thành phần <math-field> vào ứng dụng để hiển thị công thức trực quan
[GD3.3] Lập trình đồng bộ hai chiều:
+ Tạo State latexContent trong React
+ Viết logic để khi sửa ô văn bản (LaTeX raw), công thức trong MathLive tự động cập nhật
+ Ngược lại, khi sửa bằng biểu tượng trong MathLive, nội dung text LaTeX cũng thay đổi tương ứng
3.4 Hoàn thiện quy trình dữ liệu (Submit)
Kết nối các thành phần lại để hoàn tất yêu cầu [FR3]
[GD4.1] Kết nối Front-End và Back-End: Sử dụng thư viện axios để gửi nội dung LaTeX cuối cùng từ giao diện về API của FastAPI
[GD4.2] Xử lý lưu trữ: Backend nhận dữ liệu và sử dụng SQLAlchemy để lưu bản ghi vào PostgreSQL
3.5 Kiểm thử và Triển khai
[GD5.1] Kiểm thử (Testing): Thử nghiệm với các tập tin PDF toán học có độ phức tạp khác nhau để tinh chỉnh model OCR
[GD5.1] Đóng gói dự án: Viết tập tin docker-compose.yml để có thể chạy toàn bộ hệ thống (Web, API, DB) chỉ bằng một câu lệnh
3.6 Bài tập và câu hỏi
Bài tập 1. Các công cụ sau đây được dùng để làm gì?
- Git
- Github
- .gitignore
- PostgreSQL
- SQLAlchemy
- FastAPI
- React
- Docker
Câu hỏi 3.1 Trong lập trình, công cụ Git được sử dụng để làm gì?
A. Để thiết kế giao diện người dùng cho trang web
B. Để quản lý các phiên bản mã nguồn và theo dõi lịch sử thay đổi của dự án
C. Để chạy các ứng dụng Python trên môi trường đám mây
D. Để lưu trữ dữ liệu người dùng dưới dạng bảng
Câu 2: Docker là công cụ được dùng với mục đích gì?
A. Dùng để viết mã nguồn Python nhanh hơn
B. Dùng để tạo ra các "container" giúp đóng gói ứng dụng và môi trường chạy một cách nhất quán
C. Dùng để quản lý các câu hỏi trắc nghiệm trong cơ sở dữ liệu
D. Dùng để kết nối máy tính với mạng Internet toàn cầu
Câu 3: PostgreSQL thuộc loại công cụ nào dưới đây?
A. Một thư viện dùng để tạo giao diện
B. Một khung làm việc (Framework) để xây dựng API
C. Một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) dùng để lưu trữ dữ liệu
D. Một công cụ dùng để đẩy mã nguồn lên mạng cho người khác xem
-----