Bối cảnh và vấn đề nghiên cứu

Trong chương trình đào tạo ngành Kỹ thuật Phần mềm thuộc Khoa Công nghệ Thông tin - Trường Đại học Hoa Sen, môn học Đồ án Thực tập Lập trình A giữ vai trò cầu nối giúp sinh viên chuyển hóa kiến thức lý thuyết đã tích lũy thành sản phẩm thực tế. Xuất phát từ tôn chỉ đào tạo gắn liền thực hành, nhóm nghiên cứu đã lựa chọn và thực hiện đề tài "Flags Quiz App" – một ứng dụng trò chơi trắc nghiệm quốc kỳ trên thiết bị di động. Bối cảnh thực tiễn cho thấy nhu cầu vừa giải trí vừa nâng cao kiến thức địa lý, nhận diện quốc kỳ các quốc gia trên thế giới là một nhu cầu học tập thường trực của người dùng ở nhiều độ tuổi khác nhau.

Mục tiêu và nhiệm vụ nghiên cứu cụ thể của đồ án bao gồm:

  1. Nghiên cứu và áp dụng quy trình phát triển ứng dụng di động đa nền tảng sử dụng thư viện/framework React Native và ngôn ngữ JavaScript.
  2. Thiết kế hoàn chỉnh giao diện người dùng (UI/UX) trực quan, hiện đại bằng công cụ Figma với bộ màu chuẩn hóa và bố cục tối ưu hóa trải nghiệm tương tác.
  3. Xây dựng cấu trúc cơ sở dữ liệu trên nền tảng đám mây Firebase để lưu trữ thông tin người dùng, danh mục câu hỏi, dữ liệu hình ảnh quốc kỳ và bảng xếp hạng thành tích.
  4. Triển khai các tính năng nghiệp vụ trò chơi: phân loại chế độ chơi (nhìn cờ đoán tên quốc gia và đọc tên quốc gia đoán cờ), phân cấp độ khó (từ Dễ, Trung bình đến Khó và Siêu khó theo khu vực địa lý), xáo trộn ngẫu nhiên câu hỏi/đáp án, tính điểm, đếm thời gian và xếp hạng tổng.
  5. Thực hiện quy trình kiểm thử chất lượng phần mềm để đảm bảo tính ổn định và tính chính xác của các luồng sự kiện chức năng.

Về đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Quy trình phân tích, thiết kế, lập trình và kiểm thử phần mềm ứng dụng di động dạng câu hỏi trắc nghiệm tương tác (Flags Quiz App).
  • Phạm vi không gian và nền tảng: Ứng dụng được đóng gói, chạy thử nghiệm trên hệ điều hành Android thông qua công cụ Expo Go và trình giả lập Android Studio; đối tượng người dùng hướng đến là đại chúng, không giới hạn độ tuổi.
  • Phạm vi thời gian: Đề án được triển khai trong thời gian 8 tuần của học kỳ (từ ngày 11/09/2023 đến ngày 23/12/2023).

Cơ sở lý thuyết và phương pháp

Đồ án vận dụng hệ thống lý thuyết nền tảng của kỹ thuật phần mềm kết hợp với các phương pháp phát triển hiện đại:

  • Lập trình hướng đối tượng (OOP): Vận dụng các nguyên lý đóng gói, trừu tượng hóa để xây dựng sơ đồ lớp (Class Diagram), phân định rõ các thực thể, thuộc tính và phương thức xử lý logic của trò chơi.
  • Mô hình quy trình phần mềm (Software Development Life Cycle): Lựa chọn mô hình tăng trưởng (Incremental Model). Với điều kiện thời gian và nhân lực giới hạn, nhóm thực hiện phát triển ứng dụng từng bước, bổ sung và hoàn thiện dần các tính năng qua từng phiên bản từ cốt lõi đến mở rộng.
  • Phương pháp phân tích và mô hình hóa: Sử dụng chuẩn ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng biểu đồ ca sử dụng (Use Case Diagram), biểu đồ trình tự (Sequence Flow) cho từng tác vụ và sơ đồ cấu trúc lớp đối tượng.
  • Phương pháp kiểm thử phần mềm: Áp dụng phương pháp kiểm thử thủ công (Manual Testing) theo từng kịch bản ca kiểm thử (Test Case) dựa trên tiêu chí đánh giá Đạt/Không đạt (Pass/Fail).
  • Nguồn dữ liệu: Dữ liệu hình ảnh cờ các quốc gia, tên nước và các tùy chọn câu hỏi được nhóm tổng hợp, chuẩn hóa và lưu trữ trực tuyến dạng NoSQL trên nền tảng Firebase Cloud Storage/Database, cùng các tài nguyên đồ họa mở từ Flaticon và Storyset.

Thiết kế và triển khai

Kiến trúc công nghệ và công cụ phát triển

Hệ thống được xây dựng trên nền tảng ngăn xếp công nghệ hiện đại, bao gồm:

  • Môi trường soạn thảo & Quản lý mã nguồn: Visual Studio Code (trình soạn thảo mã nguồn chính), Git (hệ thống quản lý phiên bản phân tán với các nhánh độc lập) và GitHub (lưu trữ repository, theo dõi lịch sử commit và cộng tác nhóm).
  • Nền tảng phát triển ứng dụng di động: React Native kết hợp JavaScript. Cơ chế vận hành của ứng dụng dựa trên ba luồng chính:
    • UI Thread (Chuỗi giao diện người dùng): Chịu trách nhiệm hiển thị và cập nhật giao diện trực tiếp cho người chơi.
    • Shadow Thread: Sử dụng thư viện React để tính toán bố cục (layout) giao diện.
    • JavaScript Thread: Luồng thực thi và xử lý toàn bộ mã logic của ứng dụng.
    • Hai luồng chính (Main Thread và JavaScript Thread) giao tiếp bất đồng bộ thông qua cầu nối (Bridge).
  • Công cụ thực thi & Biên dịch: Expo Go (cho phép kiểm thử trực tiếp trên thiết bị thực qua mã QR) và Android Studio (cung cấp trình giả lập và môi trường tối ưu hóa cho hệ điều hành Android).
  • Dịch vụ Backend & Cơ sở dữ liệu: Google Firebase (cung cấp cơ chế xác thực tài khoản Google Authentication và cơ sở dữ liệu NoSQL lưu trữ thời gian thực).
  • Thiết kế UI/UX: Figma hỗ trợ cộng tác trực tuyến đồng thời giữa các thành viên, chuẩn hóa bảng màu chủ đạo gồm trắng, đen và xanh lơ pha xám.

Mô hình hóa hướng đối tượng và lớp dữ liệu

Hệ thống bao gồm 1 Actor chính là "Người chơi" (User) và 3 lớp đối tượng trung tâm:

Tên lớp (Class) Danh sách thuộc tính Danh sách phương thức chính
Người chơi (User) Họ và tên, Email, Ảnh đại diện, Điểm cao nhất, Xếp hạng Dang nhap(), Dang xuat(), Thuc hien quiz(), Xem quiz(), Xem BXH(), Xem thong tin ca nhan()
Quiz Tên quiz, Mô tả Duyet tat ca quiz(), Duyet quiz theo ID()
QNA Tên câu hỏi, Đáp án đúng, Đáp án sai Duyet QNA theo quiz ID(), Chon dap an dung sai()

Cấu trúc cơ sở dữ liệu (Firebase NoSQL)

Dữ liệu trò chơi được phân chia theo hai chế độ chơi chính và cấu trúc thành các trường tài liệu cụ thể:

  1. Chế độ nhìn cờ đoán tên nước:
    • correct_answer: Chuỗi ký tự (String) chứa tên quốc gia chính xác.
    • img: Chuỗi ký tự (String) chứa đường dẫn URL hình ảnh quốc kỳ.
    • incorrect_answer: Mảng (Array) gồm 3 chuỗi ký tự chứa tên 3 quốc gia sai.
  2. Chế độ đọc tên nước đoán cờ:
    • question: Chuỗi ký tự (String) chứa tên quốc gia cần đố.
    • correct_answer: Chuỗi ký tự (String) chứa đường dẫn URL hình ảnh lá cờ đúng.
    • incorrect_answer: Mảng (Array) gồm 3 chuỗi ký tự chứa đường dẫn URL hình ảnh 3 lá cờ sai.

Thuật toán xáo trộn câu hỏi và đáp án

Để đảm bảo tính ngẫu nhiên cho mỗi lượt chơi, nhóm thiết kế thuật toán xáo trộn mảng:

shuffleArray = array => {
  // Logic xáo trộn ngẫu nhiên các phần tử trong mảng
};

// Gộp đáp án đúng và các đáp án sai rồi tiến hành xáo trộn vị trí hiển thị
allOptions = shuffleArray([
  ...question.incorrect_answers,
  question.correct_answer
]);
tempQuestions.push(question);
tempQuestions = shuffleArray([...tempQuestions]);
setCurrentQuestionIndex(0);

Nội dung chính theo từng chương

Chương 1: Giới thiệu chung

Chương này tổng quan về bối cảnh hình thành đề án tại Khoa Công nghệ Thông tin - Trường Đại học Hoa Sen, vai trò của học phần Đề án Thực tập Lập trình A, đồng thời xác định mục đích xây dựng một ứng dụng trắc nghiệm di động hữu ích nhằm củng cố kiến thức quốc kỳ thế giới. Tác giả thiết lập kế hoạch thực hiện theo tiến độ 8 tuần, phân chia trách nhiệm cụ thể giữa các thành viên:

  • Thành viên Trần Minh Quân: Đảm nhiệm thẩm định ý tưởng thiết kế, hỗ trợ sửa lỗi, thiết lập và cấu hình cơ sở dữ liệu Firebase.
  • Thành viên Phạm Ích Chuyên: Thiết kế giao diện trên Figma, lập trình các màn hình React Native, xây dựng bộ dữ liệu cho mức độ Khó và Siêu khó.
  • Thành viên Lê Quốc Duy (Lê Hoàng Duy): Thiết kế giao diện Figma, lập trình màn hình React Native, xây dựng dữ liệu cho mức độ Dễ và Trung bình.

Chương 2: Tìm hiểu về các công nghệ cần dùng

Nội dung chương 2 trình bày chi tiết về cơ sở lý thuyết và đặc tính kỹ thuật của toàn bộ công cụ, nền tảng được ứng dụng trong dự án:

  • Phân tích cơ chế hoạt động của trình soạn thảo mã nguồn Visual Studio Code và các tiện ích mở rộng (Extensions).
  • Khảo sát bộ công cụ Expo Go và Android Studio trong việc biên dịch, chạy thử nghiệm máy ảo và thiết bị thật.
  • Đánh giá vai trò của Figma trong quy trình thiết kế UX/UI vector trên nền tảng đám mây, hỗ trợ làm việc cộng tác từ xa.
  • Giới thiệu bản chất hệ thống quản lý phiên bản phân tán Git, so sánh với hệ thống tập trung (CVCS), các lệnh thao tác cốt lõi (git init, git add, git commit, git remote, git push) và dịch vụ lưu trữ mạng xã hội lập trình GitHub.
  • Nghiên cứu nền tảng Firebase (Google Cloud, NoSQL), phân tích luồng kiến trúc đa luồng của React Native (UI Thread, Shadow Thread, JavaScript Thread, Bridge) và ngôn ngữ lập trình JavaScript.
  • Giới thiệu kho ảnh biểu tượng vector Flaticon và minh họa hoạt cảnh Storyset phục vụ giao diện.

Chương 3: Xây dựng ứng dụng

Chương 3 tập trung vào khâu đặc tả yêu cầu và hiện thực hóa các chức năng của ứng dụng:

  • Đặc tả yêu cầu chức năng: Xác định các luồng ca sử dụng chính gồm: Đăng nhập bằng Google Account, Đăng xuất, Xem danh mục quiz, Thực hiện quiz (chọn chế độ, chọn độ khó, hiển thị đúng/sai, chuyển câu hỏi), Xem điểm và bảng xếp hạng tổng, Xem thông tin cá nhân.
  • Đặc tả yêu cầu phi chức năng: Xử lý truy xuất bất đồng bộ dữ liệu mạng đảm bảo hiệu năng tải mượt mà từ Firebase; thiết kế mã nguồn chuẩn hóa phục vụ khả năng mở rộng (thêm bộ quiz, sửa thông tin người dùng); đảm bảo khả năng sử dụng cao thông qua phong cách thiết kế tối giản, phông chữ lớn và bảng màu đơn sắc dễ đọc.
  • Mô hình hóa ứng dụng: Trình bày mô hình phát triển phần mềm tăng trưởng (Incremental Model), biểu đồ ca sử dụng (Use Case Diagram) và biểu đồ lớp đối tượng (Class Diagram).
  • Thiết kế giao diện: Xây dựng chi tiết hệ thống màn hình bao gồm Trang Login, Trang Home (với 3 nút chức năng: Chơi ngay, Thiết lập, Bảng xếp hạng), Trang chọn chế độ chơi, Trang chọn độ khó theo khu vực địa lý (Đông Nam Á, Châu Á, Châu Phi, Châu Mỹ), Màn hình chơi game (Nhìn cờ đoán tên và Đọc tên đoán cờ), Màn hình hiển thị kết quả và Màn hình bảng xếp hạng/thông tin cá nhân.

Chương 4: Thiết kế cơ sở dữ liệu

Nội dung chương trình bày chi tiết cấu trúc lưu trữ phi quan hệ NoSQL trên Firebase. Nhóm thiết kế mô hình dữ liệu tương ứng với 2 chế độ chơi và 3 phân cấp độ khó chính:

  • Cấp độ Dễ: Sử dụng các quốc kỳ phổ biến, quen thuộc với đại đa số người chơi (Việt Nam, Mỹ, Hàn Quốc, Thái Lan, Lào, Campuchia...).
  • Cấp độ Trung bình: Bổ sung xen kẽ các quốc gia ít phổ biến hơn hoặc ít xuất hiện trên truyền thông (Syria, Yemen, Liban, Israel, Argentina, Brazil, Chile, Columbia...).
  • Cấp độ Khó và Siêu khó: Mở rộng sang các quốc gia mới lạ tại các khu vực chuyên biệt như Châu Phi, Châu Mỹ nhằm thử thách tối đa trí nhớ và sự hiểu biết của người chơi.

Chương 5: Kiểm thử và sửa lỗi

Chương 5 thiết lập chiến lược kiểm thử chất lượng ứng dụng:

  • Phương pháp: Thực hiện kiểm thử thủ công (Manual Testing) từng bước trên thiết bị.
  • Tiêu chí: Trường hợp thử nghiệm được đánh giá Đạt (Pass) khi kết quả thực tế trùng khớp hoàn toàn với kết quả mong đợi.
  • Các hạng mục kiểm thử chính: Câu hỏi, Câu trả lời, Điểm số, Đăng nhập, Đăng xuất và Bảng xếp hạng. Báo cáo ghi nhận chi tiết 4 kịch bản kiểm thử (Test Case) cốt lõi của hệ thống.

Kết quả và đóng góp

Đồ án đã xây dựng thành công ứng dụng di động "Flags Quiz App" chạy trên hệ điều hành Android với đầy đủ các tính năng đặt ra. Kết quả kiểm thử chức năng được ghi nhận cụ thể qua bảng sau:

Mã kiểm thử Tên ca kiểm thử (Test Case) Hành động thực hiện Kết quả mong đợi Kết quả thực tế Trạng thái
Test Case 1 Đăng nhập Người dùng bấm vào nút đăng nhập Google Chuyển sang màn hình trang chủ Chuyển sang màn hình trang chủ Đạt
Test Case 2 Xem thông tin cá nhân Người dùng bấm vào nút "Setting" Chuyển sang màn hình trang cá nhân Chuyển sang màn hình trang cá nhân Đạt
Test Case 3 Xem bảng xếp hạng Bấm nút BXH và chọn chế độ xem theo từng loại Chuyển màn hình BXH, tải và hiển thị dữ liệu xếp hạng Chuyển màn hình BXH, tải và hiển thị dữ liệu chính xác Đạt
Test Case 4 Thực hiện quiz Bấm "Chơi ngay" $\rightarrow$ chọn loại $\rightarrow$ chọn độ khó $\rightarrow$ bấm "Play" $\rightarrow$ chọn đáp án $\rightarrow$ hoàn thành Chuyển các màn hình tương ứng, nạp câu hỏi, chấm điểm đúng/sai, hiện kết quả tổng kết Luồng chuyển tiếp mượt mà, chấm điểm chính xác, hiển thị popup kết quả Đạt

Về mặt đóng góp thực tiễn, đề án mang lại:

  1. Một sản phẩm phần mềm giáo dục - giải trí hoàn chỉnh, giúp người dùng rèn luyện khả năng ghi nhớ quốc kỳ và tên các quốc gia trên thế giới thông qua hình thức trắc nghiệm tương tác có tính điểm và xếp hạng.
  2. Quy trình hiện thực hóa hoàn chỉnh một dự án phần mềm di động quy mô nhỏ: từ giai đoạn lên ý tưởng, thiết kế UX/UI trên Figma, thiết lập cấu trúc NoSQL trên Firebase đến lập trình giao diện và logic bằng React Native/JavaScript.

Hạn chế và hướng nghiên cứu tiếp

Dựa trên phạm vi và nội dung được nhóm tác giả trình bày trong báo cáo, đồ án tồn tại một số hạn chế và hướng phát triển tiếp theo:

  • Hạn chế:

    • Quy trình kiểm thử mới chỉ dừng lại ở phương pháp thủ công (Manual Testing), chưa xây dựng bộ kiểm thử tự động (Automated Testing/Unit Test).
    • Ứng dụng phụ thuộc hoàn toàn vào kết nối mạng Internet liên tục để nạp dữ liệu từ Firebase, chưa tích hợp bộ nhớ đệm (local cache) để hỗ trợ chế độ chơi ngoại tuyến (offline).
    • Các chức năng xử lý logic và thuật toán ở mức căn bản, chưa có các tính năng tương tác người dùng nâng cao.

  • Hướng nghiên cứu và phát triển tiếp:

    • Phát triển tính năng cho phép người dùng tự tạo các bộ câu hỏi quiz cá nhân hóa và chia sẻ cho cộng đồng.
    • Bổ sung chức năng chỉnh sửa nội dung câu hỏi và tùy biến sâu thông tin hồ sơ người dùng (user profile).
    • Tối ưu hóa thuật toán và nâng cấp hệ thống máy chủ dữ liệu nhằm nâng cao hiệu năng khi mở rộng quy mô lượng người chơi đồng thời.

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo thiết thực dành cho sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và các lập trình viên mới bắt đầu:

  • Tài liệu tham khảo quy trình: Cung cấp mẫu phân tích yêu cầu phần mềm, xây dựng biểu đồ Use Case, biểu đồ Sequence và Class Diagram theo chuẩn công nghệ phần mềm cho một ứng dụng di động cơ bản.
  • Tài liệu triển khai kỹ thuật: Cung cấp hướng dẫn thực tế về việc tích hợp React Native với dịch vụ đám mây Firebase (xác thực tài khoản và cấu trúc NoSQL), kỹ thuật xáo trộn mảng câu hỏi ngẫu nhiên trong JavaScript và phương pháp đóng gói, chạy thử nghiệm bằng Expo Go.

Câu hỏi thường gặp

1. Đồ án sử dụng mô hình phát triển phần mềm nào và lý do lựa chọn là gì?
Đồ án sử dụng mô hình tăng trưởng (Incremental Model). Nhóm tác giả lựa chọn mô hình này vì đặc điểm phát triển ứng dụng từng bước một, liên tục bổ sung các tính năng mới vào phiên bản trước đó cho đến khi hoàn thiện, rất phù hợp với điều kiện hạn chế về mặt thời gian và nhân lực của nhóm sinh viên trong học phần 8 tuần.

2. Kiến trúc đa luồng của React Native được ứng dụng xử lý như thế nào?
React Native trong ứng dụng vận hành trên ba luồng độc lập: UI Thread (chịu trách nhiệm hiển thị và tương tác giao diện), Shadow Thread (sử dụng thư viện React để tính toán bố cục layout) và JavaScript Thread (nơi thực thi và xử lý mã logic JavaScript). Hai luồng chính tương tác và trao đổi dữ liệu với nhau thông qua một cầu nối bất đồng bộ (Bridge).

3. Cơ sở dữ liệu Firebase lưu trữ các thuộc tính nào cho hai chế độ chơi?
Trong Firebase, chế độ "Nhìn cờ đoán tên nước" lưu trữ các trường: correct_answer (chuỗi tên nước đúng), img (đường dẫn hình ảnh lá cờ) và incorrect_answer (mảng 3 tên nước sai). Chế độ "Đọc tên nước đoán cờ" lưu trữ: question (chuỗi tên quốc gia), correct_answer (đường dẫn hình ảnh lá cờ đúng) và incorrect_answer (mảng 3 đường dẫn hình ảnh lá cờ sai).

4. Bảng màu chủ đạo được thiết kế trên Figma cho ứng dụng gồm những màu nào?
Giao diện ứng dụng được nhóm tác giả thống nhất thiết kế tối giản, tập trung vào trải nghiệm thị giác hài hòa với bảng màu chủ đạo gồm màu trắng (#FFFFFF), màu đen (#000000) và tông màu xanh lơ pha xám (#A5C0C9).

5. Kết quả kiểm thử chức năng của ứng dụng đạt được mức độ nào?
Ứng dụng đã trải qua 4 kịch bản kiểm thử thủ công (Test Cases) bao gồm: Đăng nhập Google, Xem thông tin cá nhân/Setting, Xem bảng xếp hạng theo từng chế độ, và Thực hiện đầy đủ quy trình chơi Quiz (chọn chế độ, độ khó, tính điểm, hiện popup kết quả). Toàn bộ 4 ca kiểm thử đều đạt kết quả thực tế trùng khớp 100% với kết quả mong đợi (Trạng thái: Đạt).

Kết luận

Đồ án "Flags Quiz App" của nhóm sinh viên Khoa Công nghệ Thông tin - Trường Đại học Hoa Sen đã hoàn thành trọn vẹn mục tiêu xây dựng một ứng dụng trắc nghiệm quốc kỳ trên nền tảng di động Android. Thông qua việc kết hợp hiệu quả giữa framework React Native, ngôn ngữ JavaScript, công cụ thiết kế Figma và nền tảng đám mây Firebase, sản phẩm đảm bảo đầy đủ các tính năng tương tác, tính điểm ngẫu nhiên và xếp hạng người chơi ổn định. Công trình không chỉ phản ánh năng lực vận dụng lý thuyết kỹ thuật phần mềm vào thực tiễn mà còn là tài liệu tham khảo hữu ích cho các dự án phát triển phần mềm di động cùng quy mô.