Chương 5.Xây dựng ứng dụng trả lời câu hỏi sử dụng Rails
5.1. Phát biểu bài toán
Xây dựng một ứng dụng web sử dụng Rails. Ứng dụng cho phép người chơi trả lời câu hỏi (Quiz) thuộc nhiều lĩnh vực như: thức ăn & đồ uống, lịch sử, nhạc, TV & phim, kiến thức chung, khoa học và tự nhiên, thể thao, giải trí.
Trong mỗi 1 lần chọn lĩnh vực người chơi sẽ có 10 câu hỏi, sau khi trả lời xong số điểm của người chơi sẽ được tính, mỗi câu trả lời đúng sẽ được tính 1 điểm. Dựa vào Quiz App (polymer-topeka.appspot.com) để xây dựng. Dưới đây là một số hình ảnh về Quiz App này:
5.2. Xác định yêu cầu
Ứng dụng sẽ có chức năng: đăng ký, đăng nhập, đăng xuất, sửa thông tin dành cho người dùng.
Admin có thể thêm, sửa, xóa câu hỏi, câu trả lời.
- Ứng dụng tự động sinh ra 10 câu hỏi trong lĩnh vực người dùng chọn.
- Tự động tính điểm và thống kê 10 người có điểm cao nhất.
- Sử dụng framework Rails.
5.3. Giải pháp
5.3.1. Chiến lược phát triển
Chiến lược phát triển ứng dụng được lựa chọn đó là Phát triển tăng dần. Cụ thể là:
- Phát triển dựa trên ý tưởng.
- Làm đủ yêu cầu kỹ thuật rồi tạo các chức năng.
- Thử những ý tưởng rồi thu thập thông tin phản hồi và tiếp tục phát triển.
- Đòi hỏi có sự hợp tác chặt chẽ của người dùng.
- Trong quá trình phát triển, việc thường xuyên show cho khách hàng quan sát có thể giúp khách hàng xác định cái thực sự mình mong muốn. Điều này làm giảm công sức và chi phí phát sinh.
5.3.2. Giải pháp cụ thể
Quy trình phát triển ứng dụng gồm 3 bước như sau:
- Xác định các use case
Use case là danh sách các hành động hoặc các bước sự kiện thể hiện sự tương tác giữa tác nhân và hệ thống. Dựa vào phần xác định yêu cầu của ứng dụng Quiz App đã nêu ở trên, ta có thể xây dựng biểu đồ use case cho Quiz App (như ở hình dưới). Thực tế ứng dụng có thể không tuân theo biểu đồ này 100% nếu có sự thay đổi phù hợp hơn.
Biểu đồ use case cho Quiz App
• Xác định luồng làm việc giữa các trang
Khi làm một trang web chúng ta phải luôn hiểu người dùng sẽ di chuyển giữa các trang như thế nào, từ đó thiết kế chúng một cách hợp lí.
Giai đoạn đầu của phát triển tất nhiên chưa thể đầy đủ, hợp lí được. Chúng ta nên chú trọng vào những thứ quan trọng cần làm ngay và phác họa trình tự các hành động mà hiện tại ta thấy hợp lí.
Để làm việc này chúng ta có thể vẽ tay hoặc vẽ trên máy bằng những phần mềm chuyên dụng.
Dưới đây là sơ đồ luồng làm việc giữa các trang ở mức đơn giản. Một số hướng đi giữa các trang được bỏ qua do đã được nhắc đến, nhằm làm sơ đồ dễ nhìn hơn
• Xác định thiết kế cơ sở dữ liệu
Có thể chưa cần sử dụng sơ đồ đầy đủ, chi tiết ở đây. Cũng chưa cần nói về tables, keys, …Đây có thể chỉ là thiết kế ban đầu của cơ sở dữ liệu, vì trong quá trình phát triển ứng dụng nó sẽ phải được điều chỉnh phù hợp hơn.
Được xây dựng dựa trên use case và các luồng làm việc
Từ những điều trên và quá trình thực hiện, ta xác định rằng cơ sở dữ liệu cho
Quiz App sẽ gồm các bảng chính sau:
Users: lưu thông tin người dùng
Quizzes: lưu thông tin các câu hỏi
Categories: lưu thông tin về các chủ đề của câu hỏi
Choices: lưu thông tin các câu trả lời của câu hỏi
Từ đó, thiết kế chi tiết cho cơ sở dữ liệu được xây dựng, kết quả là sơ đồ như hình dưới:
Thiết kế cơ sở dữ liệu
Ngoài ra, ta cần chú ý Rails là một back-end framework chỉ chuyên xử lý phần server chứ không chú trọng giao diện. Khi xây dựng ứng dụng web Rails thường dùng kèm theo front-end framework để tăng sự tương tác với người dùng. Ở đây ta sử dụng Bootstrap (đã đề cập ở phần V.2)
5.4. Mã nguồn xử lý
5.4.1 Quản lý câu hỏi(thêm – sửa - xóa)
- Hiển thị danh sách tất cả các câu hỏi
Khi admin lựa chọn phần hiển thị danh sách câu hỏi bằng việc click chọn nút “Show Quizzes” từ trình duyệt browser sẽ gửi yêu cầu đến file routes.rb ở đây sẽ xác định request mà người dùng gửi đến dạng post/get và gọi đến controller để xử lý và đẩy dữ liệu hiển thị ra file view
Thêm một câu hỏi mới:
Khi bấm vào nút “Add Quizzes ” sẽ hiển thị form thêm một câu hỏi mới
Code khi thêm câu hỏi
Form thêm một câu hỏi mới
Sau khi điền đầy đủ thông tin của một câu hỏi và bấm vào nút “Add quizzes” sẽ gửi yêu cầu đến routes.rb từ file này sẽ gọi đến phần xử lý trong controller với phương thức là “create”. Tại đây sẽ nhận dữ liệu gửi từ form lên và được lưu vào một mảng “data_quiz” là dữ liệu sẽ được lưu vào bảng “Quizzes”. Sau khi dữ liệu về câu hỏi được thêm để thêm lựa chọn đáp án cho câu hỏi vào bảng Choices chúng ta cần quiz_id của câu hỏi vừa thêm ở bảng Quizzes cùng với từng đáp án lựa chọn A, B, C, D. Mảng “data_choice_a”, “data_choice_b”, “data_choice_c”, “data_choice_d” tương ứng với dữ liệu sẽ được lưu vào bảng Choice là những lựa chọn trả lời của câu hỏi mà chúng ta vừa thêm.
Chỉnh sửa câu hỏi: Trong phần hiển thị danh sách câu hỏi, admin click chọn câu hỏi muốn chỉnh sửa thông tin(mục “Edit” có biểu tượng là cây bút). Sau đó nội dung của câu hỏi sẽ được hiển thị và admin có thể chỉnh sửa, thay đổi tùy ý
Sau khi đã thay đổi thông tin click chọn nút “Edit quizzes” sẽ gửi yêu cầu đến routes.rb từ file này sẽ gọi đến phần xử lý trong controller với phương thức là “update” . Tại đây sẽ nhận dữ liệu gửi từ form lên và lưu vào một mảng “data_quiz” mảng này sẽ lưu dữ liệu sẽ được update khi có bất cứ thay đổi nào của câu hỏi ứng với bảng Quizzes. Ứng với câu hỏi là những đáp án lựa chọn cũng sẽ được cập nhật và trả về dòng thông báo nếu thành công và ngược lại sẽ thông báo lỗi.
Xóa câu hỏi
Admin lựa chọn câu hỏi muốn xóa bỏ trong phần hiển thị danh sách các câu hỏi, sẽ gửi yêu cầu đến file routes.rb
Gọi đến phương thức “del” trong phần quizzes_controller. Với :quiz_id nhận được sẽ thực hiện xử lý xóa câu hỏi
5.4.2 Trả lời câu hỏi và tính điểm
Người dùng đăng nhập vào hệ thống và click chọn các danh mục câu hỏi trong phần “Subject”
Ứng với mỗi danh mục sẽ có những câu hỏi và khi chọn vào mỗi danh mục sẽ random ngẫu nhiên 5 câu hỏi trong những câu hỏi thuộc những danh mục mà bạn đã chọn sau đó bạn sẽ trả lời từng câu hỏi
Nếu như bạn không check đầy đủ đáp án sẽ thông báo lỗi và không tính điểm cho những câu hỏi đã trả lời
Sau khi trả lời hết các câu hỏi người dùng sẽ click chọn nút “Send answer” để xem đáp án của câu hỏi và tính điểm cho những câu trả lời đúng. Mỗi câu hỏi sẽ có đáp án trả lời đúng ứng với mỗi câu và sẽ so sánh với đáp án của người trả lời để tính điểm nếu trả lời đúng 1 câu sẽ được cộng 1 điểm, trả lời sai sẽ không được cộng điểm.
