ĐẠI HỌC HUẾ
TRƯỜNG ĐẠI HỌC KHOA HỌC
KHOA CÔNG NGHỆ THÔNG TIN


KHỐ LUẬN
TỐT NGHIỆP ĐẠI HỌC
NGÀNH CƠNG NGHỆ THƠNG TIN

Đề tài:

XÂY DỰNG WEBSITE QUIZ CHO BÉ

Sinh viên thực hiện: HÀ XUÂN NGHĨA
Khoá: K42
Giáo viên hướng dẫn: TRẦN NGUYÊN PHONG

Huế, 05 - 2022
1


LỜI CẢM ƠN
Em xin gửi đến Quý thầy cô ở Khoa Công nghệ thông tin – Trường Đại học
Khoa Học Huế lời biết ơn sâu sắc nhất, những người đã cùng với tri thức và tâm
huyết của mình để truyền đạt vốn kiến thức quý báu cho em trong thời gian học tập
tại trường.
Em xin chân thành cảm ơn Thầy Trần Nguyên Phong đã tận tâm hướng dẫn
em qua những buổi trao đổi. Trong thời gian học tập và thực hành dưới sự hướng
dẫn của thầy, em đã tiếp thu được rất nhiều kiến thức bổ ích.
Mặc dù đã rất cố gắng hoàn thiện đồ án với tất cả sự nỗ lực, tuy nhiên, do
bước đầu đi vào thực tế, tìm hiểu và xây dựng đồ án trong thời gian có hạn, kiến

thức cịn hạn chế, nhiều bỡ ngỡ, nên đồ án “Xây dựng website quiz cho bé” chắc
chắn sẽ khơng tránh khỏi những thiếu sót. Em rất mong nhận được sự quan tâm,
thơng cảm và những đóng góp q báu của các thầy cô và các bạn để đồ án này
được hoàn thiện hơn.
Một lần nữa, em xin chân thành cảm ơn và ln mong nhận được sự đóng
góp của Q thầy cơ.
Sau cùng, em xin kính chúc các thầy cô trong Khoa Công nghệ thông tin dồi
dào sức khoẻ, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền
đạt kiến thức cho thế hệ mai sau.
Trân trọng!

Huế, tháng 05 năm 2022
Sinh viên thực hiện

Hà Xuân Nghĩa

2


DANH MỤC HÌNH ẢNH
Hình 1.1. Sơ đồ Use Case hoạt động tổng quát của ứng dụng.............................2
Hình 2.1. Sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng............8
Hình 2.2. Sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng......9
Hình 2.3. Sơ đồ tuần tự thể hiện chức năng reset mật khẩu..............................10
Hình 2.4. Sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.................11
Hình 2.5. Sơ đồ tuần tự thể hiện chức năng hiển thị các bài đánh giá..............12
Hình 2.6. Sơ đồ tuần tự thể hiện chức năng thêm, xố bookmark....................13
Hình 2.7. Sơ đồ tuần tự thể hiện chức năng tìm kiếm bài đánh giá..................14
Hình 2.8. Sơ đồ tuần tự thể hiện chức năng lọc bài đánh giá.............................15
Hình 2.9. Sơ đồ tuần tự thể hiện chức năng cập nhật ảnh đại diện...................16

Hình 2.10. Sơ đồ tuần tự thể hiện chức năng cập nhật ảnh bìa.........................17
Hình 2.11. Sơ đồ tuần tự thể hiện chức năng xem chi tiết bài đánh giá............18
Hình 2.12. Sơ đồ tuần tự thể hiện chức năng hiển thị danh sách bookmark....19
Hình 2.13. Sơ đồ tuần tự thể hiện chức năng thêm mới bạn bè.........................20
Hình 2.14. Sơ đồ tuần tự thể hiện chức năng đồng ý kết bạn............................21
Hình 2.15. Sơ đồ tuần tự thể hiện chức năng nhắn tin với bạn bè....................22
Hình 2.16. Sơ đồ tuần tự thể hiện chức năng cập nhật view..............................23
Hình 3.1. Màn hình Splash....................................................................................24
Hình 3.2. Màn hình Login.....................................................................................26
Hình 3.3. Màn hình đăng ký tài khoản................................................................29
Hình 3.4. Màn hình reset mật khẩu......................................................................32
Hình 3.5. Màn hình trang chủ...............................................................................34
Hình 3.6. Màn hình group.....................................................................................37
Hình 3.7. Màn hình Bookmark.............................................................................39
Hình 3.8. Màn hình trang cá nhân.......................................................................42
Hình 3.9. Màn hình thêm mới bài đánh giá.........................................................47
3


Hình 3.10. Màn hình chi tiết bài đánh giá...........................................................50
Hình 3.11. Màn hình hiển thị danh sách bạn bè..................................................52
Hình 3.12 Màn hình hiển thị danh sách yêu cầu kết bạn...................................54
Hình 3.13. Màn hình nhắn tin...............................................................................56

4


DANH MỤC BẢNG BI
Bảng 1.1. Các use case của hệ thống.......................................................................4
Bảng 3.1. Bảng đặc tả chi tiết màn hình splash...................................................25

Bảng 3.2. Bảng đặc tả chi tiết màn hình đăng nhập...........................................28
Bảng 3.3. Bảng đặc tả chi tiết màn hình đăng ký tài khoản...............................31
Bảng 3.4. Bảng đặc tả chi tiết màn hình Reset mật khẩu...................................33
Bảng 3.5. Bảng đặc tả chi tiết màn hình Trang chủ............................................36
Bảng 3.6. Bảng đặc tả chi tiết màn hình group...................................................38
Bảng 3.7. Đặc tả chi tiết màn hình Bookmark.....................................................40
Bảng 3.8. Đặc tả chi tiết màn hình Profile...........................................................45
Bảng 3.9. Đặc tả chi tiết màn hình Thêm bài đánh giá.......................................49
Bảng 3.10. Đặc tả chi tiết màn hình chi tiết bài đánh giá...................................51
Bảng 3.11. Bảng đặc tả chi tiết màn hình hiển thị danh sách bạn bè................53
Bảng 3.12. Bảng đặc tả chi tiết màn hình hiển thị danh sách yêu cầu kết bạn.
..................................................................................................................................55
Bảng 3.13. Bảng đặc tả chi tiết màn hình nhắn tin.............................................57

5


MỤC LỤC
Y
CHƯƠNG 1: TỔNG QUAN VÀ PHÂN TÍCH CHỨC NĂNG HỆ THỐNG
ỨNG DỤNG DI ĐỘNG ĐÁNH GIÁ, CHIA SẺ ĐỊA ĐIỂM DU LỊCH..............7
1.1. Thực trang và tính cần thiết của đề tài.............................................................7
1.2. Mục tiêu, phạm vi nghiên cứu.........................................................................2
1.2.1. Mục tiêu.....................................................................................................2
1.2.2. Phạm vi nghiên cứu...................................................................................2
1.2.3. Cấu trúc của khoá luận..............................................................................2
1.3. Phân tích chức năng hệ thống..........................................................................2
1.3.1. Mơ hình Use case của hệ thống.................................................................3
CHƯƠNG 2: THIẾT KẾ HỆ THỐNG..................................................................8
2.1. Lựa chọn công nghệ.........................................................................................8

2.1.1. Flutter Framework.....................................................................................8
2.1.1.1. Flutter là gì..........................................................................................8
2.1.1.2. Nhưng tính năng nổi bật của Flutter....................................................8
2.1.2. Firebsae......................................................................................................8
2.1.2.1. Firebase là gì.......................................................................................8
2.1.2.2. Ưu điểm và hạn chế của Firebase........................................................9
2.2. Thiết kế chức năng của hệ thống.....................................................................9
2.2.1. Đăng nhập..................................................................................................9
2.2.2. Đăng ký....................................................................................................10
2.2.3. Quên mật khẩu.........................................................................................12
2.2.4. Tạo mới bài đánh giá...............................................................................13
2.2.5. Hiển thị bài đánh giá................................................................................14
2.2.6. Thêm, xoá bookmark...............................................................................15
2.2.7. Tìm kiếm..................................................................................................16
2.2.8. Lọc bài đánh giá......................................................................................17
2.2.9. Cập nhật avatar........................................................................................18
6


2.2.10. Cập nhật ảnh bìa....................................................................................19
2.2.11. Hiển thị chi tiết bài đánh giá..................................................................20
2.2.12. Hiển thị danh sách bookmark................................................................21
2.2.13. Thêm bạn bè..........................................................................................22
2.2.14. Đồng ý kết bạn.......................................................................................23
2.2.15. Nhắn tin với bạn bè................................................................................24
2.2.16. Cập nhật view của bài đánh giá.............................................................25
CHƯƠNG 3: CÀI ĐẶT VÀ PHÁT TRIỂN ỨNG DỤNG..................................26
3.1. Màn hình splash.............................................................................................26
3.2. Màn hình đăng nhập......................................................................................28
3.3. Màn hình đăng ký..........................................................................................31

3.4. Màn hình Reset mật khẩu..............................................................................34
3.5. Màn hình Home.............................................................................................36
3.6. Màn hình Category........................................................................................39
3.7. Màn hình Bookmark......................................................................................41
3.8. Màn hình Profile............................................................................................43
3.9. Màn hình tạo mới bài đánh giá......................................................................48
3.10. Màn hình chi tiết bài đánh giá.....................................................................52
3.11. Màn hình danh sách bạn bè..........................................................................54
3.12. Màn hình danh sách yêu cầu kết bạn...........................................................56
3.13. Màn hình nhắn tin........................................................................................58
TÀI LIỆU THAM KHẢO.....................................................................................61

7


CHƯƠNG 1: TỔNG QUAN VÀ PHÂN TÍCH CHỨC NĂNG HỆ THỐNG
ỨNG DỤNG DI ĐỘNG ĐÁNH GIÁ, CHIA SẺ ĐỊA ĐIỂM DU LỊCH
1.1. Thực trạng và tính cần thiết của đề tài
Hiện nay, tình hình dịch vẫn đang căng thẳng, các cơ sở giáo dục, nhà trường
đẩy sang học, dạy online cho học sinh, sinh viên và ngay cả trẻ em mầm non. Đối
với học sinh, sinh viên có thể tiếp thu và vượt qua được thời gian này nhưng đối
với học sinh tiểu học và đặc biệt là trẻ em mầm non đây là khoảng thời gian rất khó
khăn, dẫn tới bố mẹ phải quan tâm và chỉ dạy cho con cái nhiều hơn, điều đó thì rất
khó khăn đối với những bố mẹ có cơng việc bận rộn khơng có thời gian chỉ dạy
cho con mình. Vì vậy đây chính là động lực và mục tiêu của đề tài khoá luận “Xây
dựng website Quiz cho bé”.
1.2. Mục tiêu, phạm vi nghiên cứu
1.2.1. Mục tiêu
Đề tài “Xây dựng website Quiz cho bé” được xây dựng nhằm mục đích tạo
ra ứng dụng giúp bố mẹ thuận tiện và dễ dàng hơn trong việc dạy cho con đang còn

là lứa tuổi mầm non, tiểu học.
1.2.2. Phạm vi nghiên cứu
Các module chỉ được xây dụng ở mức cơ bản nhằm chỉ chứng minh tính khả
thi của ứng dụng.
1.2.3. Cấu trúc của khố luận
Với mục tiêu và phạm vi nghiên cứu của đề tài được chỉ ra ở trên, nội dung
của khoá luận sẽ gồm các phần sau đây:
- Chương 1: Tổng quan và phần tích chức năng của đề tài “Website Quiz cho
bé”.
- Chương 2: Thiết kế hệ thống ứng dụng “Website Quiz cho bé”.
- Chương 3: Cài đặt và phát triển ứng dụng “Website Quiz cho bé”.
1.3. Phân tích chức năng hệ thống
Hệ thống sẽ hỗ trợ các chức năng sau:

8


9


* Người dùng(User):
- Đăng nhập: Cho phép người dùng đăng nhập bằng tài khoản và mật khẩu.
- Đăng ký: Cho phép người dùng tạo mới tài khoản.
- Đăng xuất: Cho phép người dùng đăng xuất ra khỏi website.
- Cập nhật thông tin cá nhân: cho phép người dùng cập nhật lại 1 số thơng
tin có thể thay đổi.
- Tìm kiếm Quiz: Cho phép người dùng tìm kiếm Quiz theo tên.
- Làm bài Quiz: Người dùng làm Quiz theo các bài có sẵn trên website:
+ Xem câu hỏi và chọn câu trả lời
+ Nghe câu hỏi và chọn câu trả lời

+ Làm các bài Quiz về luyện phát âm tiếng Anh
- Xem các bài Quiz gợi ý.
- Xem tất cả các bài Quiz.
- Lưu bài Quiz đã làm với điểm số.
- Xem lại các bài Quiz đã làm.
- Làm lại và cập nhật lại điểm số với các bài Quiz đã làm.
* Người quản lý website (Admin):
- Đăng nhập: Cho phép Admin đăng nhập bằng tài khoản và mật khẩu.
- Đăng xuất: Cho phép Admin đăng xuất ra khỏi website.
- Quản lý Account: Cho phép Admin quản lý Account với các thao tác: xem,
thêm, sửa, xóa, tìm kiếm.
- Quản lý Quiz: Cho phép Admin quản lý Quiz với các thao tác: xem, thêm,
sửa, xóa, tìm kiếm.
- Quản lý Question: Cho phép Admin quản lý Question với các thao tác:
xem, thêm, sửa, xóa, tìm kiếm.
1.3.1. Mơ hình Use case của hệ thống
Các actor của hệ thống:
- Người dùng: là tác nhân thực hiện việc thêm, xem, tìm kiếm các bài đánh
giá.


Biểu đề Use case của hệ thống (Xem hình 1.1):

Hình 1.1. Sơ đồ Use Case hoạt động tổng quát của ứng dụng.
Đặc tả Use case:
- Tên Use Case: Use Case Hoạt động tổng quát của ứng dụng:
- Mô tả ngắn gọn: Use Case Tổng quát của ứng dụng mô tả các chức năng
chính của hệ thống dành cho Người dùng.
- Actor:
 Người dùng: là tác nhân thực hiện việc đăng nhập, đăng xuất,

thêm, tìm kiếm,…


- Tiền điều kiện:
 Người dùng phải đăng nhập, hoặc đăng ký nếu như chưa có tài
khoản.
 Người dùng có thể reset lại mật khẩu nếu như quên mật khẩu.
- Hậu điều kiện:








Người dùng có thể xem các cái đánh giá.
Người dùng có thể tạo mới bài đánh giá.
Người dùng có thể cập nhật profile.
Người dùng có thể nhắn tin, kết bạn.
Người dùng có thể tìm kiếm.
Người dùng có thể lọc bài đánh giá.
Người dùng có thể thêm, xố bookmark.

- Các use case của ứng dụng ( Xem bảng 1.1).
STT

Use Case

Mục đích


1

Đăng nhập

Đăng nhập vào ứng dụng.

2

Đăng xuất

Đăng xuất khỏi ứng dụng.

3

Reset mật
khẩu

Reset lại mật khẩu.

4

Thêm vào
bookmark

Thêm mới bài đánh giá vào
danh sách bookmark.

5


Xố
bookmark

Xố bài đánh giá khỏi danh
sách bookmark.

6

Tìm kiếm

Tìm kiếm bài đánh giá dự
theo tên địa điểm.

7

Lọc bài post

8

Xem bài
post

Hiển thị chi tiết bài đánh giá.

9

Tạo mới bài
post

Tạo mới bài đánh giá.


10

Xem các bài
post phổ biến

Lọc bài đánh giá dựa theo
nhưng option mà người dùng
chọn.

Hiển thị các bài post có số
lượng người xem từ lơn  thấp.


11

Thay đổi
ảnh đại diện

Thay đổi ảnh đại diện của
người dùng.

12

Thay đổi
ảnh bìa

Thay đổi ảnh bìa của người
dùng.


13

Hiển thị các
bài đăng của
mình

Hiển thị danh sách các hình
ảnh của người dùng đó.

14

Nhắn tin

Nhắn tin với bạn bè.

15

Kết bạn

Kết bạn với bạn bè thông qua
email.

16

Đồng ý kết
bạn

Chấp nhận yêu cầu kết bạn.

Bảng 1.1. Các use case của hệ thống.

- Kịch bản chính:
 Người dùng đăng ký tài khoản.
 Người dùng đăng nhập vào hệ thống.
 Người dùng xem danh sách các bài đánh giá, xem chi tiết các
bài đánh giá
 Ngươì dùng thêm vào danh sách bookmark, xoá khỏi danh sách
bookmark.
 Người dùng tạo mới bài đánh giá.
 Người dùng xem danh sách các hình ảnh của bài nhưng bài
đánh giá của người dùng.
 Người dùng cập nhật hình đại diện, hình nền.
 Người dùng vào danh sách bạn bè, kết bạn, nhắn tin với bạn bè.
 Người dùng vào danh sách yêu cầu kết bạn, đồng ý yêu cầu kết
bạn.
 Người dùng đăng xuất khỏi hệ thống.
Use Case kết thúc.
- Kịch bản phụ:
 Ứng dụng tự động cập nhật lại danh sách bài đánh giá.
- Các biến thể:


 Tại màn hình tìm kiếm, người dùng có thể tìm kiếm các bài
đánh giá.
 Tại màn hình tìm kiếm, người dùng có thể sử dụng bộ lọc đề
lọc bài đánh giá.


CHƯƠNG 2: THIẾT KẾ HỆ THỐNG
2.1. Lựa chọn công nghệ
2.1.1. Flutter Framework

2.1.1.1. Flutter là gì
Flutter là UI Framework của Google để tạo ra các giao diện chất lượng cao
đa nền tảng (IOS, Android, Web, Desktop, …) trong khoảng thời gian ngắn, được
Google cho ra mắt bản chính thức vào tháng 12 năm 2018 tại sự kiện Flutter Live.
Flutter hoàn toàn miễn phí và cũng là mã nguồn mở.
Flutter sử dụng ngôn ngữ DART cũng do Google phát triển ( Dart là ngơn
ngữ thuần OOP, nó được sử dụng để xây dựng các ứng dụng duyệt web, server,
desktop và thiết bị di động).
2.1.1.2. Nhưng tính năng nổi bật của Flutter
Flutter có những tính năng nổi bật như sau:
- Mạnh về hiệu ứng, hiệu suất ứng dụng cao.
- Phát triển úng dụng nhanh chóng ( Fast Development): Tính năng hot
reload của Flutter giúp bạn nhanh chóng và dễ dàng thử nghiệm, xây dựng giao
diện người dùng, thêm tính năng và sửa lỗi nhanh hơn. Trải nghiệm tải lại lần thứ
hai mà không làm mất trạng thái, trên emulator, simulator và device cho iOS và
Android.
- UI linh hoạt và biểu cảm ( Expressive and Flexible UI): Thảo mãn người
dùng với các widget build-in đẹp mắt cảu Flutter theo Material Deisgn() và
Cupertino(iOS - flavor), tự nhận thức được nền tảng.
- Native Performance: Các widget cảu flutter kết hợp các sự khác biệt của
các nền tảng, ví dụ như scrolling, navigation, icons, font để cung cấp một hiệu
năng tốt nhất.
2.1.2. Firebsae
2.1.2.1. Firebase là gì
Firebase là dịch vụ cơ sở dữ liệu hoạt động dựa trên nền tảng
đám mấy – cloud. Kèm theo đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google.
Chức năng chính là giúp người dùng lập trình ứng dụng bằng cách đơn giản hoá
các thao tác với cơ sở dữ liệu.
Cụ thể là những giao diện lập trình ứng dụng API đơn giản.
Mục đích nhằm tăng số lượng người dùng và thu nhiều lợi nhuận hơn.



Đặc biệt, còn là dịch vụ đa năng và bảo mật cực tốt, Firebase hỗ
trợ cả hai nền tảng Android và iOS. Khơng có gì khó hiểu khi nhiều lập trình viên
chọn Firebase làm nền tảng đầu tiên để xây dựng ứng dụng cho hàng triệu người
dùng trên toàn thế giới.
2.1.2.2. Ưu điểm và hạn chế của Firebase
- Ưu điểm khi dùng Firebase:










Tạo tài khoản và sử dụng dễ dàng.
Tốc độ phát triển nhanh.
Nhiều dịch vụ trong một nền tảng.
Được cung cấp bơi Google.
Tập trung vào phát triển giao diện người dùng.
Firebase khơng có mát chủ.
Tạo lưu lượng truy cập.
Theo dõi lỗi.
Sao lưu.

- Hạn chế khi dùng Firebase.
Không phải là mã nguồn mở.

Người dùng khơng có quyền truy cập mã nguồn.
Firebase không hoạt động ở nhiều quốc gia.
Chỉ hoạt động với Cơ sở dữ liệu NoSQL.
Tốc độ truy vấn chậm.
Không phải tất cả các dịch vụ của Firebase đều
miễn phí.
 Firebase khá đắt và giá không ổn định.
 Chỉ chạy trên Google Cloud.







2.2. Thiết kế chức năng của hệ thống
2.2.1. Đăng nhập
Mô tả chức năng: Người dùng đăng nhập ứng dụng bằng email và mật
khẩu.


Hình 2.1 là sơ đồ tuần tự thể hiện chức năng đăng nhập của người
dùng.

Hình 2.2. Sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng.


2.2.2. Đăng ký
Mô tả chức năng: Người dùng đăng ký tài khoản mới với email, số
điện thoại, mật khẩu.

Hình 2.2 là sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người
dùng.

Hình 2.3. Sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng.


2.2.3. Quên mật khẩu
Mô tả chức năng: Người dùng reset mật khẩu.
Hình 2.3 là sơ đồ tuần tử thể hiện chức năng reset mật khẩu nếu người
dùng quên mật khẩu.

Hình 2.4. Sơ đồ tuần tự thể hiện chức năng reset mật khẩu.


2.2.4. Tạo mới bài đánh giá
Mô tả chức năng: Người dùng tạo bài viết đánh giá mới.
Hình 2.4 là sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.

Hình 2.5. Sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.


2.2.5. Hiển thị bài đánh giá
Mô tả chức năng: Hiển thị các bài đánh giá cho tất cả người dùng.
Hình 2.5 là sơ đồ tuần tự thể hiện chức năng hiển thị các bài đánh giá.

Hình 2.6. Sơ đồ tuần tự thể hiện chức năng hiển thị các bài đánh giá.


2.2.6. Thêm, xố bookmark
Mơ tả chức năng: Người dùng có thể thêm hoặc xố bài viết ra khỏi

danh sách bookmark.
Hình 2.6 là sơ đồ tuần tự thể hiện chức năng thêm, xố bookmark.

Hình 2.7. Sơ đồ tuần tự thể hiện chức năng thêm, xoá bookmark.


2.2.7. Tìm kiếm
Mơ tả chức nang: Người dùng tìm kiếm bài đánh giá thơng qua nội
dung tìm kiếm.
Hình 2.7 là sơ đồ tuần tự thể hiện chức năng tìm kiếm bài đánh giá.

Hình 2.8. Sơ đồ tuần tự thể hiện chức năng tìm kiếm bài đánh giá.


2.2.8. Lọc bài đánh giá
Mô tả chức năng: Người dùng lọc bài viết thơng qua những option có
sẳn trong ứng dụng.
Hình 2.8 là sơ đồ tuần tự thể hiện chức năng lọc bài đánh giá.

Hình 2.9. Sơ đồ tuần tự thể hiện chức năng lọc bài đánh giá.


2.2.9. Cập nhật avatar
Mô tả chức năng: Người dùng cập nhật lại ảnh đại diện.
Hình 2.9 là sơ đồ tuần tự thể hiện chức năng cập nhật ảnh đại diện.

Hình 2.10. Sơ đồ tuần tự thể hiện chức năng cập nhật ảnh đại diện.