AVDucktionary - Từ Điển Anh-Việt

Mục lục

• Giới thiệu
• Tính năng
• Cài đặt
• Sử dụng
• Công nghệ sử dụng
• Cấu trúc dự án
• Đóng góp
• Lời cảm ơn

Giới thiệu

AVDucktionary là một dự án cá nhân website từ điển Anh-Việt, được thiết kế để hỗ trợ người dùng tra cứu, học tập và quản lý từ vựng tiếng Anh một cách hiệu quả. Với giao diện thân thiện và nhiều tính năng hữu ích, AVDucktionary không chỉ là một từ điển thông thường mà còn là một công cụ học tập toàn diện.

Tính năng

Người dùng

• Tra cứu từ điển: Tìm kiếm từ với gợi ý tự động, bao gồm nghĩa, phiên âm, loại từ và ví dụ.
• Từ vựng yêu thích: Lưu trữ và quản lý danh sách từ yêu thích.
• Ghi chú từ vựng: Thêm ghi chú riêng cho từng từ.
• Lịch sử tra cứu: Xem lại các từ đã tra cứu trước đó.
• Flashcard: Học từ mới bằng phương pháp thẻ ghi nhớ.
• Quiz: Kiểm tra kiến thức với bài trắc nghiệm tương tác (Anh-Việt và Việt-Anh).
• Quản lý tài khoản: Đăng ký, đăng nhập, cập nhật thông tin cá nhân.

Quản trị viên

• Quản lý người dùng: Thêm, sửa, xóa và xem thông tin người dùng.

Backend hỗ trợ

• Dịch từ Anh sang Việt với thông tin chi tiết (phiên âm IPA, loại từ, định nghĩa).
• Cung cấp dữ liệu từ file data.txt chứa hàng nghìn từ tiếng Anh và bản dịch tiếng Việt.

Cài đặt

Yêu cầu hệ thống

• Node.js (phiên bản 16 trở lên) và npm hoặc yarn (cho frontend).
• Java (cho backend).
• Maven (cho backend).
• Cơ sở dữ liệu: SQL server hoặc MySQL (tùy cấu hình backend).

Các bước cài đặt

1. Clone dự án về máy:

git clone https://github.com/lamduck2005/AVDucktionary.git
cd AVDucktionary

2. Cài đặt frontend:

cd AVDucktionary_FE
npm install

3. Cấu hình môi trường frontend:

   • Tạo file .env trong thư mục AVDucktionary_FE.
   • Thêm đường dẫn API backend:

     VITE_API_URL=http://localhost:8080/api
     

4. Cài đặt backend:

cd ../AVDucktionary_BE
./mvnw clean install

5. Khởi chạy backend:

./mvnw spring-boot:run

6. Khởi chạy frontend:

cd ../AVDucktionary_FE
npm run dev

• Sau khi hoàn tất, truy cập ứng dụng tại http://localhost:5173 (hoặc cổng mặc định của Vite).

Sử dụng

Đăng ký và đăng nhập

1. Truy cập /register để tạo tài khoản mới.
2. Đăng nhập tại /login bằng email và mật khẩu.

Tra cứu từ điển

• Nhập từ vào thanh tìm kiếm ở trang chủ.
• Chọn từ trong danh sách gợi ý để xem chi tiết (nghĩa, phiên âm, loại từ, ví dụ).

Quản lý từ vựng

• Nhấn "❤️ Thích" để thêm từ vào danh sách yêu thích.
• Thêm ghi chú cá nhân trong phần chi tiết từ.
• Xem lịch sử tra cứu tại trang "Lịch sử".

Học từ vựng

• Dùng Flashcard để học từ mới.
• Làm Quiz để kiểm tra kiến thức (chế độ Anh-Việt hoặc Việt-Anh).

Quản trị viên

• Đăng nhập bằng tài khoản admin.
• Truy cập /admin/user-management để quản lý người dùng (thêm, sửa, xóa).

Công nghệ sử dụng

Frontend

• Framework: Vue.js 3 (Composition API).
• Build Tool: Vite.
• Routing: Vue Router.
• UI Framework: Bootstrap 5.
• HTTP Client: Axios.
• Notifications: SweetAlert2.
• Code Quality: ESLint, Prettier.
• Module Format: ES Modules.

Backend

• Ngôn ngữ: Java.
• Framework: Spring Boot.
• Build Tool: Maven.
• Database: H2 hoặc MySQL.
• ORM: JPA/Hibernate.
• API: REST API.

Cấu trúc dự án

AVDucktionary/
├── AVDucktionary_FE/     # Frontend
│   ├── public/           # Tài nguyên tĩnh
│   ├── src/
│   │   ├── assets/       # Hình ảnh, font chữ
│   │   ├── components/   # Vue components
│   │   │   └── admin/    # Components cho Admin
│   │   ├── router/       # Cấu hình Vue Router
│   │   ├── services/     # API services
│   │   ├── utils/        # Hàm tiện ích
│   │   ├── App.vue       # Component gốc
│   │   └── main.js       # Entry point
│   ├── .env              # Biến môi trường
│   ├── index.html        # HTML template
│   ├── package.json      # Dependencies frontend
│   └── vite.config.js    # Cấu hình Vite
├── AVDucktionary_BE/     # Backend
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── example/
│   │   │   │           └── avducktionary/
│   │   │   │               ├── controller/
│   │   │   │               ├── model/
│   │   │   │               ├── repository/
│   │   │   │               └── service/
│   │   │   └── resources/
│   │   │       ├── application.properties
│   │   │       └── data.txt   # Dữ liệu từ điển
│   │   └── test/
│   └── pom.xml           # Cấu hình Maven
└── README.md             # File README chung

Lời cảm ơn

• Cảm ơn cộng đồng Vue.js, Bootstrap và Spring Boot đã cung cấp các công cụ tuyệt vời.
• Đặc biệt cảm ơn SweetAlert2 vì thư viện thông báo đẹp mắt.
• Cảm ơn tất cả các bạn đã góp ý và hỗ trợ dự án.

---

© 2025 AVDict. All rights reserved.