ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KHOA HỌC KHOA CÔNG NGHỆ THÔNG TIN KHOÁ 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.
ĐẠ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 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, người với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho em thời gian học tập 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 buổi trao đổi Trong thời gian học tập thực hành hướng dẫn thầy, em tiếp thu nhiều kiến thức bổ ích Mặc dù cố gắng hoàn thiện đồ án với tất nỗ lực, nhiên, bước đầu vào thực tế, tìm hiểu xây dựng đồ án 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ắn không tránh khỏi thiếu sót Em mong nhận quan tâm, thơng cảm đóng góp quý báu thầy bạn để đồ án hồn thiện Một lần nữa, em xin chân thành cảm ơn ln mong nhận đóng góp Q thầy Sau cùng, em xin kính chúc thầy cô Khoa Công nghệ thông tin dồi sức khoẻ, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Trân trọng! Huế, tháng 05 năm 2022 Sinh viên thực Hà Xuân Nghĩa DANH MỤC HÌNH ẢNH Hình 1.1 Sơ đồ Use Case hoạt động tổng quát ứng dụng Hình 2.1 Sơ đồ thể chức đăng nhập người dùng Hình 2.2 Sơ đồ thể chức đăng ký tài khoản người dùng Hình 2.3 Sơ đồ thể chức reset mật 10 Hình 2.4 Sơ đồ thể chức thêm đánh giá .11 Hình 2.5 Sơ đồ thể chức hiển thị đánh giá 12 Hình 2.6 Sơ đồ thể chức thêm, xoá bookmark 13 Hình 2.7 Sơ đồ thể chức tìm kiếm đánh giá 14 Hình 2.8 Sơ đồ thể chức lọc đánh giá 15 Hình 2.9 Sơ đồ thể chức cập nhật ảnh đại diện 16 Hình 2.10 Sơ đồ thể chức cập nhật ảnh bìa .17 Hình 2.11 Sơ đồ thể chức xem chi tiết đánh giá 18 Hình 2.12 Sơ đồ thể chức hiển thị danh sách bookmark 19 Hình 2.13 Sơ đồ thể chức thêm bạn bè .20 Hình 2.14 Sơ đồ thể chức đồng ý kết bạn 21 Hình 2.15 Sơ đồ thể chức nhắn tin với bạn bè 22 Hình 2.16 Sơ đồ thể chức 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 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 đánh giá .47 Hình 3.10 Màn hình chi tiết đá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 DANH MỤC BẢNG BI Bảng 1.1 Các use case hệ thống .4 Bảng 3.1 Bảng đặc tả chi tiết hình splash 25 Bảng 3.2 Bảng đặc tả chi tiết hình đăng nhập 28 Bảng 3.3 Bảng đặc tả chi tiết hình đăng ký tài khoản .31 Bảng 3.4 Bảng đặc tả chi tiết hình Reset mật 33 Bảng 3.5 Bảng đặc tả chi tiết hình Trang chủ 36 Bảng 3.6 Bảng đặc tả chi tiết hình group 38 Bảng 3.7 Đặc tả chi tiết hình Bookmark 40 Bảng 3.8 Đặc tả chi tiết hình Profile 45 Bảng 3.9 Đặc tả chi tiết hình Thêm đánh giá .49 Bảng 3.10 Đặc tả chi tiết hình chi tiết đánh giá 51 Bảng 3.11 Bảng đặc tả chi tiết hình hiển thị danh sách bạn bè 53 Bảng 3.12 Bảng đặc tả chi tiết 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 hình nhắn tin 57 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 1.1 Thực trang tính cần thiết đề tài 1.2 Mục tiêu, phạm vi nghiên cứu .2 1.2.1 Mục tiêu 1.2.2 Phạm vi nghiên cứu 1.2.3 Cấu trúc khoá luận 1.3 Phân tích chức hệ thống 1.3.1 Mơ hình Use case hệ thống .3 CHƯƠNG 2: THIẾT KẾ HỆ THỐNG 2.1 Lựa chọn công nghệ .8 2.1.1 Flutter Framework 2.1.1.1 Flutter 2.1.1.2 Nhưng tính bật Flutter 2.1.2 Firebsae 2.1.2.1 Firebase .8 2.1.2.2 Ưu điểm hạn chế Firebase 2.2 Thiết kế chức hệ thống 2.2.1 Đăng nhập 2.2.2 Đăng ký 10 2.2.3 Quên mật .12 2.2.4 Tạo đánh giá .13 2.2.5 Hiển thị đánh giá 14 2.2.6 Thêm, xoá bookmark .15 2.2.7 Tìm kiếm 16 2.2.8 Lọc đánh giá 17 2.2.9 Cập nhật avatar 18 2.2.10 Cập nhật ảnh bìa 19 2.2.11 Hiển thị chi tiết đá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 đá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 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 đánh giá 48 3.10 Màn hình chi tiết đá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 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 tính cần thiết đề tài Hiện nay, tình hình dịch căng thẳng, sở giáo dục, nhà trường đẩy sang học, dạy online cho học sinh, sinh viên trẻ em mầm non Đối với học sinh, sinh viên tiếp thu vượt qua thời gian học sinh tiểu học đặc biệt trẻ em mầm non khoảng thời gian khó khăn, dẫn tới bố mẹ phải quan tâm dạy cho nhiều hơn, điều khó khăn bố mẹ có cơng việc bận rộn khơng có thời gian dạy cho Vì động lực mục tiêu đề 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é” xây dựng nhằm mục đích tạo ứng dụng giúp bố mẹ thuận tiện dễ dàng việc dạy cho lứa tuổi mầm non, tiểu học 1.2.2 Phạm vi nghiên cứu Các module xây dụng mức nhằm chứng minh tính khả thi ứng dụng 1.2.3 Cấu trúc khoá luận Với mục tiêu phạm vi nghiên cứu đề tài trên, nội dung khoá luận gồm phần sau đây: - Chương 1: Tổng quan phần tích chức đề 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 phát triển ứng dụng “Website Quiz cho bé” 1.3 Phân tích chức hệ thống Hệ thống hỗ trợ chức sau: * Người dùng(User): - Đăng nhập: Cho phép người dùng đăng nhập tài khoản mật - Đăng ký: Cho phép người dùng tạo tài khoản - Đăng xuất: Cho phép người dùng đăng xuất 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 số thông tin thay đổi - Tìm kiếm Quiz: Cho phép người dùng tìm kiếm Quiz theo tên - Làm Quiz: Người dùng làm Quiz theo có sẵn website: + Xem câu hỏi chọn câu trả lời + Nghe câu hỏi chọn câu trả lời + Làm Quiz luyện phát âm tiếng Anh - Xem Quiz gợi ý - Xem tất Quiz - Lưu Quiz làm với điểm số - Xem lại Quiz làm - Làm lại cập nhật lại điểm số với Quiz làm * Người quản lý website (Admin): - Đăng nhập: Cho phép Admin đăng nhập tài khoản mật - Đăng xuất: Cho phép Admin đăng xuất khỏi website - Quản lý Account: Cho phép Admin quản lý Account với 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 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 thao tác: xem, thêm, sửa, xóa, tìm kiếm 1.3.1 Mơ hình Use case hệ thống Các actor hệ thống: - Người dùng: tác nhân thực việc thêm, xem, tìm kiếm đánh giá truy cấp Bảng 3.9 Đặc tả chi tiết hình Profile 3.9 Màn hình tạo đánh giá Hình 3.9 hình tạo dánh giá Hình 3.26 Màn hình thêm đánh giá Đặc tả chi tiết hình (Xem hình 3.9): Screen Content Item Type Mô tả Country DropDownButto n Nhấn nút để chọn quốc gia Category DropDownButto n Nhấn nút để chọn thể loại Button Nhấn để chọn ảnh đánh giá Place TextFeild Nhập vào địa điểm viết About Photo TextFeild Nhập vào nội dung đánh giá Share Button Nhấn vào để chia đánh giá Take Photo Button Nhấn vào để chụp ảnh Choose From Gallery Button Nhấn vào để chọn ảnh Cancel Button Nhấn vào để tắt PopUp Choose Picture Screen Actions Tên hành động Mô tả Thành công Thất bại Nhấn vào button “Country” Sau người dùng nhấn vào button “Country” chọn quốc gia đăng Hiển thị tên quốc gia Khơng hiển thị lỗi Nhấn vào button “Category” Sau người dùng nhấn vào button “Category” chọn thể loại đăng Hiển thị thể loại người dùng chọn Khơng hiển thị lỗi Nhấn vào Sau người Hiển thị Không button “Choose Picture” dùng nhấn vào button MenuPopUp hiển thị MenuPopUp Nhấn vào button “Take Photo” Sau người dùng nhấn vào button hệ thống mở giao diện camera lên để người dùng chụp ảnh Nếu người dùng chọn ảnh chụp, hiển thị ảnh chụp button “Choose Picture” Nếu người dùng không chọn ảnh chụp Trở hình tạo đăng Nhấn vào button “Choose From Gallery” Sau người dùng nhấn vào button hệ thống mở giao diện thư viện ảnh điện thoại Nếu người dùng chọn ảnh hiển thị ảnh chọn button “Choose Picture” Nếu người dùng không chọn ảnh chụp Trở hình tạo đăng Nhập Place Người dùng nhập vào place Hiển thị nội dung nhập Không thông báo lỗi Nhập vào About photo Người dùng nhập vào about photo Hiển thị nội dung nhập Không thông báo lỗi Nhấn vào button “Share” Sau người dùng nhấn vào button “Share” hệ thống tiến hành thêm đánh giá Xố tồn nội dung mà người dùng nhập trước thơng báo thành công Bảng 3.10 Đặc tả chi tiết hình Thêm đánh giá Thơng báo lỗi 3.10 Màn hình chi tiết đánh giá Hình 3.10 hình chi tiết đánh giá Hình 3.27 Màn hình chi tiết đánh giá Đặc tả chi tiết hình (Xem hình 3.10): Screen Content Item Type Mô tả Button Nhấn nút để trở Button Nhấn để thêm vào danh sách bookmark ImageView Hiển thị số lượt xem đánh giá Screen Actions Tên hành động Mô tả Nhấn vào button Nhấn vào button Nhấn vào button Người dùng nhấn vào button Thành công Thất bại Trở hình trước Thêm bai đánh giá vào danh sách bookmark thay đổi thành Nếu khơng thành cơng giữ nguyễn hình ảnh cũ Bảng 3.11 Đặc tả chi tiết hình chi tiết đánh giá 3.11 Màn hình danh sách bạn bè Hình 3.11 hình hiển thị danh sách bạn bè Hình 3.28 Màn hình hiển thị danh sách bạn bè Đặc tả chi tiết hình (Xem hình 3.11): Screen Content Item Type Mơ tả Button Nhấn nút để trở Add friend Button Nhấn nút để gửi yêu cầu kết bạn Email TextField Trường để nhập email người dùng khác Chat Button Nhấn nút để chuyển sang hình chat List bạn bè ListView Danh sách bạn bè Screen Actions Tên hành động Mô tả Thành công Nhấn nút Người dùng nút Trở trang cá nhân Nhập email Người dùng nhập email Hiển thị email Nhấn nút “Add friend” Nhấn nút “Chat” Sau người dùng nút “Add friend” hệ thống kiểm tra email gửi yêu cầu kết bạn đến email Người dùng nhấn nút “Chat” Hiển thị thơng báo thành công Thất bại Không thông báo lỗi Hiển thị thơng báo lỗi Chuyển sang hình nhắn tin Bảng 3.12 Bảng đặc tả chi tiết hình hiển thị danh sách bạn bè 3.12 Màn hình danh sách yêu cầu kết bạn Hình 3.12 hình hiển thị danh sách yêu cầu kết bạn Hình 3.29 Màn hình hiển thị danh sách yêu cầu kết bạn Đặc tả chi tiết hình (Xem hình 3.12): Screen Content Item Type Mô tả Button Nhấn nút để trở Accept Button Nhấn để đồng ý yêu cầu kết bạn List yêu cầu kết bạn ListView Danh sách yêu cầu kết bạn Screen Actions Tên hành động Mô tả Thành công Nhấn nút Người dùng nút Trở trang cá nhân Nhấn nút “Accept” Người dùng nhấn nút “Accept” Hiển thị thơng báo thành cơng xố item khỏi danh sách yêu cầu kết bạn Thất bại Hiển thị thông báo lỗi Bảng 3.13 Bảng đặc tả chi tiết hình hiển thị danh sách yêu cầu kết bạn 3.13 Màn hình nhắn tin Hình 3.13 nhắn tin Hình 3.30 Màn hình nhắn tin Đặc tả chi tiết hình (Xem hình 3.13): Screen Content Item Type message… List tin nhắn Type Mô tả Button Nhấn nút để trở Button Nhấn để gửi tin nhắn TextField Trường nhập nội dung tin nhắn ListView Danh sách tin nhắn Screen Actions Tên hành động Mô tả Thành công Nhấn nút Người dùng nút Trở trang cá nhân Nhấn nút Người dùng nhấn nút Hiển thị tin nhắn lên danh sách tin nhắn Người dùng nhập nội dung tin nhắn Hiển thị nội dung tin nhắn trường nhập nội dung Nhập nội dung tin nhắn Thất bại Hiển thị thông báo lỗi Bảng 3.14 Bảng đặc tả chi tiết hình nhắn tin KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận Sau hồn thành khố luận mang lại số kết sau: - Xây dựng phần mềm “Xây dựng ứng dụng di động đánh giá, chia địa điểm du lịch” Flutter Framework - Tìm hiểu biết cách sử dụng Firebase Hướng phát triển Vì thời gian thực khóa luận hạn chế, nên ứng dụng hoàn thành tồn nhiều thiếu sót, với mục tiêu xây dựng ứng dụng chia sẻ, đánh giá địa điểm du lịch nên em có số mong muốn phát triển thêm dự án sau : - Phát triển thêm chức chia sẻ, like, comment - Phát triển số giao diện cho ứng dụng để ứng dụng đẹp mắt, thu hút -Đưa ứng dụng vào chạy thực tế Đây ý kiến em hướng phát triển dự án để hoàn thành ứng dụng tốt Em mong nhận đánh giá góp ý thầy ý kiến để em xem xét, tích lũy kinh nghiệm phát triên không ứng dụng mà ứng dụng khác với mục tiêu hướng tới người mà em mong muốn Em xin chân thành cảm ơn TÀI LIỆU THAM KHẢO [1] Firebase Document Documentation | Firebase (google.com) [2] Flutter Framework document Flutter documentation - Flutter [3] Thư viện Firebase core firebase_core | Flutter Package (pub.dev) [4] Thư viện Firebase auth firebase_auth | Flutter Package (pub.dev) [5] Thư viện Firebase storage firebase_storage | Flutter Package (pub.dev) [6] Thư viện Firebase database firebase_database | Flutter Package (pub.dev) ... quan phần tích chức đề 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 phát triển ứng dụng ? ?Website Quiz cho bé? ?? 1.3 Phân tích chức... tiêu Đề tài ? ?Xây dựng website Quiz cho bé? ?? xây dựng nhằm mục đích tạo ứng dụng giúp bố mẹ thuận tiện dễ dàng việc dạy cho lứa tuổi mầm non, tiểu học 1.2.2 Phạm vi nghiên cứu Các module xây dụng mức... 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, người với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho em thời gian học tập trường Em