Hệ Thực Hành Tập Tính Toán Bốn Cơ Bản: Kiến Trúc và Triển Khai Kỹ Thuật

Hệ Thực Hành Tập Tính Toán Bốn Cơ Bản: Kiến Trúc và Triển Khai Kỹ Thuật

Bài viết này trình bày chi tiết về kiến trúc kỹ thuật, triển khai các chức năng cốt lõi và các thách thức kỹ thuật cùng giải pháp trong quá trình phát triển hệ thống thực hành tính toán bốn cơ bản. Hệ thống áp dụng kiến trúc tách biệt giữa frontend và backend, cung cấp nền tảng thực hành toán học tương tác cho người dùng, bao gồm nhiều module chức năng và thiết kế trải nghiệm người dùng được chăm chút.

Vì có nhiều chức năng cần phát triển, chúng tôi đã mời bạn thứ ba tham gia hoàn thành chức năng sổ bài tập sai. 2352615 Tiêu Hướng Dân Thiết kế kiến trúc phần mềm, phát triển backend, phát triển trang web 2352619 Hứa Dực Trình Thiết kế UI sổ bài tập sai, phát triển chức năng sổ bài tập sai 2352635 Lý Thành Thiết kế trang tính toán bốn cơ bản, triển khai chức năng tính toán, kiểm tra và sửa lỗi phần mềm

Link thử nghiệm website: https://calculator-mgkhyvko3-xiangyunxiaos-projects.vercel.app Cần FQ để truy cập, tác giả chưa có tên miền tại Trung Quốc

Tổng quan Kiến trúc Hệ thống

Stack Công nghệ Frontend

  • HTML5/CSS3: Xây dựng giao diện người dùng responsive
  • JavaScript Nguyên bản: Triển khai logic tương tác frontend
  • LocalStorage API: Lưu trữ dữ liệu cục bộ

Stack Công nghệ Backend

  • Python: Triển khai logic nghiệp vụ cốt lõi
  • Flask: Framework web nhẹ
  • Flask-CORS: Xử lý chia sẻ tài nguyên giữa các nguồn gốc khác nhau

Sơ đồ Kiến trúc Hệ thống

+------------------+      +------------------+      +------------------+
|                  |      |                  |      |                  |
|  Giao diện người  | <--> |  Máy chủ Flask   | <--> |  Trình tạo đề   |
|  dùng (HTML/JS/  |      |  (server.py)     |      |  toán (math_gen)|
|   CSS)           |      |                  |      |                  |
|                  |      |                  |      |                  |
+------------------+      +------------------+      +------------------+
         ^                        ^                         ^
         |                        |                         |
         v                        v                         v
+------------------+      +------------------+      +------------------+
|                  |      |                  |      |                  |
|  Hệ thống xác    |      |  Hệ thống quản   |      |  Hệ thống kiểm  |
|  thực người dùng |      |  lý bài tập sai |      |  tra hàng ngày  |
|  (auth.js)       |      |  (wrong_problems)|      |  (user.js)      |
|                  |      |                  |      |                  |
+------------------+      +------------------+      +------------------+

Chi tiết các Module Cốt lõi

1. Trình tạo Đề Toán học

Trình tạo đề toán học(math_generator.py) là thành phần cốt lõi của hệ thống, chịu trách nhiệm tạo ra các đề bài tính toán bốn cơ bản.

Triển khai Kỹ thuật

  • Tạo số ngẫu nhiên: Sử dụng module random của Python để tạo số và toán tử ngẫu nhiên
  • Xử lý ưu tiên toán tử: Triển khai logic ưu tiên nhân chia trước cộng trừ
  • Xác thực tính hợp lệ của đề bài: Đảm bảo kết quả của đề bài là số nguyên và trong phạm vi hợp lý
  • Tạo đề bài trước: Tạo trước 1000 đề bài khi khởi động hệ thống để tăng tốc độ phản hồi
  • Kiểm soát hạt giống: Hỗ trợ tạo tập đề bài cố định thông qua tham số hạt giống, phục vụ chức năng đề bài theo bộ
# Ví dụ thuật toán tạo đề bài cốt lõi
def create_math_problem(self):
    while True:
        numbers = self.create_random_numbers()
        operators = [random.choice(list(self.operators.keys())) for _ in range(2)]
        
        # Xử lý ưu tiên toán tử
        try:
            mul_div_index = -1
            if '*' in operators or '/' in operators:
                mul_div_index = operators.index('*') if '*' in operators else operators.index('/')
            
            if mul_div_index == 0:
                result = self.operators[operators[0]](numbers[0], numbers[1])
                result = self.operators[operators[1]](result, numbers[2])
            elif mul_div_index == 1:
                result = self.operators[operators[1]](numbers[1], numbers[2])
                result = self.operators[operators[0]](numbers[0], result)
            else:
                result = self.operators[operators[0]](numbers[0], numbers[1])
                result = self.operators[operators[1]](result, numbers[2])
        except:
            continue
        
        if self.validate_result(result):
            problem_str = f"{numbers[0]} {operators[0]} {numbers[1]} {operators[1]} {numbers[2]}"
            return problem_str, int(result)

2. Máy chủ Web

Hệ thống sử dụng framework Flask(server.py) để xây dựng máy chủ web nhẹ, cung cấp API giao tiếp RESTful.

Các API chính

Điểm cuối Phương thức Chức năng
/create\_problems GET Tạo số lượng đề bài yêu cầu
/get\_random\_problem GET Lấy đề bài ngẫu nhiên (dùng cho kiểm tra hàng ngày)
/get\_problem\_sets GET Lấy danh sách bộ đề và trạng thái hoàn thành
/add\_wrong\_problem POST Thêm bài tập sai
/get\_wrong\_problems GET Lấy danh sách bài tập sai của người dùng
/mark\_set\_completed POST Đánh dấu bộ đề đã hoàn thành

3. Hệ thống Xác thực Người dùng

Hệ thống xác thực người dùng(auth.js và user.js) triển khai chức năng đăng ký, đăng nhập và quản lý phiên làm việc.

Triển khai Kỹ thuật

  • Lưu trữ cục bộ: Sử dụng LocalStorage API của trình duyệt để lưu trữ dữ liệu người dùng
  • Quản lý phiên: Duy trì trạng thái đăng nhập và thông tin phiên làm việc hiện tại
  • Mã hóa dữ liệu: Trong ứng dụng thực tế nên mã hóa mật khẩu (hiện đang ở phiên bản demo)
// Ví dụ logic đăng nhập người dùng
login_user(username, password) {
    // Kiểm tra người dùng có tồn tại không
    if (!this.user_accounts[username]) {
        return { success: false, message: 'Người dùng không tồn tại' };
    }

    // Kiểm tra mật khẩu có đúng không
    if (this.user_accounts[username].password !== password) {
        return { success: false, message: 'Mật khẩu không đúng' };
    }

    // Thiết lập người dùng hiện tại
    this.current_user = this.user_accounts[username];
    localStorage.setItem(CURRENT_USER_KEY, JSON.stringify(this.current_user));
    return { success: true, message: 'Đăng nhập thành công', user: this.current_user };
}

4. Hệ thống Sổ Bài Tập Sai

Hệ thống sổ bài tập sai(wrong_problems.js) là chức năng hỗ trợ học tập quan trọng, giúp người dùng ghi nhớ và ôn tập các bài tập sai.

Triển khai Kỹ thuật

  • Lưu trữ bài tập sai: Lưu trữ dữ liệu bài tập sai của người dùng trên server
  • Quản lý trạng thái: Theo dõi trạng thái luyện tập của bài tập sai (chưa luyện, đã luyện, đã thành thạo)
  • Tính năng sắp xếp: Hỗ trợ sắp xếp bài tập theo thời gian, độ khó và nhiều tiêu chí khác
  • Thao tác hàng loạt: Hỗ trợ chọn nhiều bài tập để luyện tập hoặc xóa cùng lúc

5. Hệ thống Kiểm tra Hàng ngày

Hệ thống kiểm tra hàng ngày(DailyCheckManager trong user.js) triển khai chức năng签到 và vận may hàng ngày của người dùng.

Triển khai Kỹ thuật

  • Xử lý ngày tháng: Sử dụng Date API của JavaScript để xử lý ngày và giờ
  • Tính ngày liên tục: Tính số ngày người dùng liên tục kiểm tra
  • Tạo vận may ngẫu nhiên: Tạo vận may và các việc nên/không nên ngẫu nhiên
  • Bài tập thử thách hàng ngày: Mỗi lần kiểm tra tạo một bài tập thử thách ngẫu nhiên
// Ví dụ logic tính ngày kiểm tra liên tục
calculate_consecutive_days() {
    if (!this.is_user_logged_in()) {
        return 0;
    }

    const user_id = this.get_user_id();
    if (!this.daily_checks[user_id] || this.daily_checks[user_id].length === 0) {
        return 0;
    }

    // Lấy lịch sử kiểm tra và sắp xếp
    const check_dates = [...this.daily_checks[user_id]].sort();
    let consecutive_days = 1;
    let current_date = new Date(check_dates[check_dates.length - 1]);

    // Bắt đầu từ ngày gần nhất, kiểm tra ngược lại để xem có liên tục không
    for (let i = check_dates.length - 2; i >= 0; i--) {
        const prev_date = new Date(check_dates[i]);
        const diff_days = Math.floor((current_date - prev_date) / (1000 * 60 * 60 * 24));
        
        if (diff_days === 1) {
            consecutive_days++;
            current_date = prev_date;
        } else if (diff_days > 1) {
            break;
        }
    }

    return consecutive_days;
}

Thiết kế Giao diện Frontend

Bố cục Responsive

Hệ thống sử dụng thiết kế responsive, thích ứng với các thiết bị có kích thước khác nhau:

  • Bố cục Flexbox: Bố cục container linh hoạt, tự thích ứng với các kích thước màn hình khác nhau
  • Media query: Tối ưu hóa hiển thị cho các kích thước thiết bị khác nhau
  • Đơn vị tương đối: Sử dụng đơn vị tương đối (như em, %) để đảm bảo tỷ lệ giao diện hài hòa

Thiết kế Tương tác Người dùng

  • Phản hồi tức thì: Hiển thị phản hồi đúng/sai ngay sau khi người dùng trả lời
  • Chỉ tiến độ: Hiển thị tiến độ hiện tại và tình trạng hoàn thành
  • Hiệu ứng hoạt hình: Sử dụng chuyển tiếp và hoạt hình CSS để tăng trải nghiệm người dùng
  • Hỗ trợ bàn phím: Hỗ trợ nhập liệu và gửi bằng bàn phím, tăng hiệu quả thao tác

Màu sắc Chủ đạo

  • Màu chủ đạo: Sử dụng màu xanh lá cây (#4CAF50) làm màu chủ đạo, truyền tải thông điệp tích cực, phát triển
  • Màu tương phản: Sử dụng màu đỏ (#f44336) làm gợi ý lỗi, tạo tương phản rõ ràng
  • Màu trung tính: Sử dụng tông màu xám (#f5f5f5, #333) làm nền và chữ, cung cấp trải nghiệm đọc thoải mái

Luồng Dữ liệu và Quản lý Trạng thái

Quản lý Trạng thái Frontend

Hệ thống sử dụng JavaScript nguyên bản để quản lý trạng thái frontend, bao gồm:

  1. Trạng thái người dùng: Trạng thái đăng nhập, thông tin người dùng hiện tại
  2. Trạng thái luyện tập: Đề bài hiện tại, tiến độ trả lời, tỷ lệ đúng
  3. Trạng thái bài tập sai: Danh sách bài tập sai, trạng thái luyện tập, đánh giá độ khó

Lưu trữ Dữ liệu

  • LocalStorage: Lưu trữ thông tin người dùng, lịch sử kiểm tra và trạng thái bài tập sai
  • Lưu trữ Server: Lưu trữ bộ đề, bài tập sai và tình trạng hoàn thành

Giao tiếp giữa các Module

  • Sự kiện lắng nghe: Sử dụng cơ chế lắng nghe sự kiện để giao tiếp giữa các module
  • Hàm callback: Xử lý kết quả thao tác bất đồng bộ thông qua hàm callback
  • Chia sẻ trạng thái: Trạng thái quan trọng (như ID người dùng) được chia sẻ giữa các module

Thách thức Kỹ thuật và Giải pháp

1. Kiểm soát Chất lượng Đề bài Tạo ra

Thách thức: Đề bài tạo ra cần đảm bảo kết quả là số nguyên và độ khó phù hợp.

Giải pháp:

  • Triển khai logic xác thực đề bài nghiêm ngặt, đảm bảo kết quả là số nguyên và trong phạm vi hợp lý
  • Xử lý đặc biệt với phép chia, đảm bảo có thể chia hết
  • Tạo trước nhiều đề bài và lọc, nâng cao chất lượng đề bài

2. An toàn Dữ liệu Người dùng

Thách thức: Đảm bảo lưu trữ và truyền tải dữ liệu người dùng an toàn.

Giải pháp:

  • Sử dụng LocalStorage để lưu trữ dữ liệu người dùng, tránh tấn công kịch bản giữa các trang
  • Trong môi trường sản xuất thực tế, nên triển khai mã hóa mật khẩu và truyền tải HTTPS
  • Triển khai quản lý phiên và kiểm soát quyền trên server

3. Hỗ trợ Chức năng Offline

Thách thức: Đảm bảo chức năng cơ bản có sẵn khi mạng không ổn định.

Giải pháp:

  • Logic tạo đề bài cục bộ làm phương án dự phòng
  • Lưu trữ dữ liệu quan trọng cục bộ, giảm phụ thuộc vào server
  • Triển cơ chế thử lại lỗi, tăng ổn định hệ thống

Tối ưu Hiệu suất

Tối ưu Frontend

  • Nén tài nguyên: Nén file CSS và JavaScript để giảm thời gian tải
  • Tải chậm: Tải tài nguyên không quan trọng chậm, tăng tốc độ hiển thị màn hình đầu tiên -Ủy quyền sự kiện**: Sử dụng ủy quyền sự kiện để giảm số lượng listener
  • Tối ưu thao tác DOM: Thao tác DOM hàng loạt, giảm sắp xếp và vẽ lại

Tối ưu Backend

  • Tạo đề bài trước: Tạo đề bài trước khi khởi động hệ thống, giảm tính toán thời gian thực
  • Cơ chế cache: Cache dữ liệu thường dùng, giảm tính toán trùng lặp
  • Xử lý bất đồng bộ: Sử dụng xử lý bất đồng bộ cho các thao tác không chặn, tăng hiệu suất đồng thời

Kế hoạch Mở rộng Tương lai

  1. Đồng bộ hóa đám mây: Triển khai đồng bộ hóa dữ liệu người dùng trên đám mây, hỗ trợ sử dụng trên nhiều thiết bị
  2. Đề xuất thông minh: Dựa trên bài tập sai và tình hình luyện tập, đề xuất nội dung luyện tập thông minh
  3. Chức năng xã hội: Thêm bảng xếp hạng và thách thức bạn bè, tăng tương tác xã hội
  4. Nhiều dạng bài tập: Mở rộng hỗ trợ phân số, số thập phân, đại số và nhiều dạng toán học khác
  5. Phân tích dữ liệu: Triển khai trực quan hóa dữ liệu luyện tập, giúp người dùng hiểu tiến độ học tập

Thẻ: python Flask JavaScript HTML5 CSS3

Đăng vào ngày 1 tháng 6 lúc 23:47

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn