Đang tải... (xem toàn văn)
(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter(Đồ án tốt nghiệp) Xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG BÁN SÁCH SỬ DỤNG FRAMEWORK FLUTTER SVTH 1: ĐÀO NGỌC HÙNG MSSV 1: 16110096 SVTH 2: NGUYỄN THỊ VÂN ANH MSSV 2: 16110548 KHĨA: K16 NGÀNH: CƠNG NGHỆ THƠNG TIN GVHD: Th.S PHẠM CƠNG THIỆN Tp Hồ Chí Minh, tháng 07 năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG BÁN SÁCH SỬ DỤNG FRAMEWORK FLUTTER SVTH 1: ĐÀO NGỌC HÙNG MSSV 1: 16110096 SVTH 2: NGUYỄN THỊ VÂN ANH MSSV 2: 16110548 KHÓA: K16 NGÀNH: CÔNG NGHỆ THÔNG TIN GVHD: Th.S PHẠM CÔNG THIỆN Tp Hồ Chí Minh, tháng 07 năm 2020 LỜI CẢM ƠN Chúng xin chân thành cảm ơn hướng dẫn tận tình suốt thời gian qua thầy Phạm Công Thiện, giáo viên khoa Công Nghệ Thông Tin, trường Đại học Sư Phạm Kỹ Thuật Tp HCM Thầy định hướng, góp ý cung cấp cho nhiều kiến thức lĩnh vực chúng tơi bắt đầu thực khóa luận tốt nghiệp, đồng thời xin cảm ơn Trường Đại học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh giáo viên khoa Đào tạo Chất Lượng Cao, ngành Công Nghệ Thông Tin trường tạo cho chúng tơi có điều kiện thuận lợi để thực tốt khóa luận Dù cố gắng hồn thành khóa luận tốt nghiệp u cầu, thời gian hạn hẹp khả hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng mong nhận bảo, nhận xét Thầy Cơ người dùng Nhóm sinh viên thực vi TĨM TẮT Tính cấp thiết đề tài Theo hướng phát triển thời đại mua hàng online trở nên thông dụng Người tiêu dùng dễ dàng tiếp cận thông tin sản phẩm từ nhiều nguồn khác Đặc biệt, có trang web, ứng dụng cung cấp dịch vụ so sánh giá sản phẩm hỗ trợ người tiêu dùng tốt việc mua hàng qua mạng Xu hướng đại hóa, cơng nghiệp hóa phát triển với cấp số nhân giây, đôi tiến vượt bậc công nghệ, đặc biệt ngành công nghệ thông tin Việc ứng dụng tiến công nghệ thông tin giúp đời sống người phát triển mặt tinh thần, lẫn vật chất, hạn chế tối đa việc ảnh hưởng đến môi trường mặt hạn hẹp không gian thời gian việc tiếp cận lượng lớn thơng tin Chính nhóm chọn đề tài “Xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter” cho khoá luận tốt nghiệp Mục tiêu để tài - Tìm hiểu ngơn ngữ Dart, Flutter, sở liệu Firebase – Firestore để áp dụng vào xây dựng ứng dụng - Phân tích, thiết kế xây dựng ứng dụng hỗ trợ việc mua sách, trang web quản lý, mua bán sách trực tuyến - Ứng dụng có chức sau: Khách trước đăng nhập dùng chức xem trang chủ, thơng tin sách, tìm kiếm sách, thêm vào giỏ hàng Khách đăng nhập có chức trước đăng nhập có thêm tính bình luận sách, tốn, quản lý tài khoản cá nhân Đối tượng nghiên cứu - Tập trung nghiên cứu cơng nghệ Flutter, Firebase - Hồn thành ứng dụng di động bán sách online sử dụng Flutter lưu trữ liệu sở liệu Firebase – Firestore Phương pháp nghiên cứu Để hồn thành đề tài chúng tơi cần phải áp dụng kiến thức sau: - Nắm vững kiến thức phân tích thiết kế dự án - Tìm hiểu tài liệu sở liệu Firebase - Firestore - Tìm hiểu ngôn ngữ Dart Framework Flutter - Khảo sát ứng dụng liên quan đến đề tài vii MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN vi TÓM TẮT vii Tính cấp thiết đề tài vii Mục tiêu để tài vii Đối tượng nghiên cứu vii Phương pháp nghiên cứu vii MỤC LỤC viii DANH MỤC CÁC BẢNG BIỂU xii DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ xvi CHƯƠNG 1: TỔNG QUAN 1.1 Khảo sát trạng 1.2 Xác định yêu cầu 1.2.1 Giới thiệu chung ứng dụng 1.2.2 Mô tả chức 1.2.3 Mô tả phi chức 1.3 Lược đồ Usecase 1.3.1 1.4 Lược đồ Usecase tổng quan Mô tả chi tiết Usecase 1.4.1 Mô tả Usecase Đăng nhập 1.4.2 Mô tả Usecase Đăng Ký 1.4.3 Mô tả Usecase Quên mật 10 viii 1.4.4 Mô tả Usecase Xem hình giới thiệu 10 1.4.5 Mô tả Usecase Xem trang chủ 11 1.4.6 Mô tả Usecase Xem thông tin sách 11 1.4.7 Mơ tả Usecase Bình luận, đánh giá sách 12 1.4.8 Mô tả Usecase Thêm sách yêu thích 12 1.4.9 Mơ tả Usecase Tìm kiếm sách 13 1.4.10 Mô tả Usecase Xem danh mục sách 13 1.4.11 Mô tả Usecase Xem giỏ hàng 14 1.4.12 Mô tả Usecase Quản lý giỏ hàng 14 1.4.13 Mô tả Usecase Thêm sách vào giỏ hàng 15 1.4.14 Mô tả Usecase Cập nhật giỏ hàng 15 1.4.15 Mô tả Usecase Sửa giỏ hàng 16 1.4.16 Mơ tả Usecase Xố giỏ hàng 16 1.4.17 Mơ tả Usecase Thanh tốn 17 1.4.18 Mô tả Usecase Xem tiêu điểm sách 17 1.4.19 Mô tả Usecase Phản hồi Báo lỗi 18 1.4.20 Mô tả Usecase Xem thông báo 18 1.4.21 Mô tả Usecase Xem trang cá nhân 19 1.4.22 Mô tả Usecase Sửa thông tin cá nhân 19 1.4.23 Mô tả Usecase Quản lý đơn hàng 20 1.4.24 Mô tả Usecase Đăng xuất 20 1.4.25 Mô tả Usecase Xem danh sách sách yêu thích 21 1.4.26 Mô tả Usecase Đổi mật 21 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 22 2.1 Tổng quan Framework Flutter 22 2.1.1 Flutter gì? 22 ix 2.1.2 Lịch sử phát triển 22 2.1.3 Đặc điểm 22 2.1.4 Kiến trúc Flutter 23 2.1.5 Ưu điểm nhược điểm 24 2.1.6 So sánh Flutter với React Native 25 2.2 Tổng quan Firebase [6] 27 2.2.1 Firebase gì? 27 2.2.2 Lịch sử phát triển Firebase? 27 2.2.3 Lợi ích sử dụng Firebase 27 2.2.4 Điểm yếu Firebase 28 2.2.5 Một số dịch vụ Firebase cung cấp 28 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 34 3.1 Thiết kế phần mềm 34 3.1.1 Lược đồ lớp 34 3.1.2 Lược đồ Sequence 35 3.2 Thiết kế liệu 38 3.2.1 Lược đồ sở liệu 38 3.2.2 Các Collection 47 3.3 Thiết kế giao diện 57 3.3.1 Màn hình ứng dụng 57 CHƯƠNG 4: KẾT QUẢ SO SÁNH, THỰC NGHIỆM, PHÂN TÍCH, TỔNG HỢP 84 4.1 Cài đặt ứng dụng 84 4.2 Kiểm thử ứng dụng 84 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 88 5.1 Những kết đạt 88 5.2 Ưu điểm đề tài 88 x 5.3 Hạn chế đề tài 88 5.4 Hướng phát triển 89 TÀI LIỆU THAM KHẢO 90 xi DANH MỤC CÁC BẢNG BIỂU Bảng 1.1: Mô tả tác nhân Bảng 1.2: Mô tả chức khách hàng .4 Bảng 1.3: Mô tả chức admin .7 Bảng 1.4: Mô tả Usecase Đăng nhập Bảng 1.5: Mô tả Usecase Đăng ký .9 Bảng 1.6: Mô tả Usecase Quên mật 10 Bảng 1.7: Mơ tả Usecase Xem hình giới thiệu 10 Bảng 1.8: Mơ tả Usecase Xem hình trang chủ 11 Bảng 1.9: Mô tả Usecase Xem thông tin sách 11 Bảng 1.10: Mơ tả Usecase Bình luận, đánh giá sách .12 Bảng 1.11: Mơ tả Usecase Thêm sách u thích 12 Bảng 1.12: Mơ tả Usecase Tìm kiếm sách .13 Bảng 1.13: Mô tả Usecase Xem danh mục sách 13 Bảng 1.14: Mô tả Usecase Xem giỏ hàng 14 Bảng 1.15: Mô tả Usecase Quản lý giỏ hàng 14 Bảng 1.16: Mô tả Usecase Thêm sách vào giỏ hàng 15 Bảng 1.17: Mô tả Usecase Cập nhật giỏ hàng 15 Bảng 1.18: Mô tả Usecase Sửa giỏ hàng 16 Bảng 1.19: Mơ tả Usecase Xố giỏ hàng 16 Bảng 1.20: Mơ tả Usecase Thanh tốn .17 xii Bảng 1.21: Mô tả Usecase Xem tiêu điểm sách .17 Bảng 1.22: Mô tả Usecase Phản hồi báo lỗi 18 Bảng 1.23: Mô tả Usecase Xem thông báo 18 Bảng 1.24: Mô tả Usecase Xem trang cá nhân .19 Bảng 1.25: Mô tả Usecase Sửa thông tin cá nhân 19 Bảng 1.26: Mô tả Usecase Quản lý đơn hàng 20 Bảng 1.27: Mô tả Usecase Đăng xuất 20 Bảng 1.28: Mô tả Usecase Xem danh sách sách u thích .21 Bảng 1.29: Mơ tả Usecase Đổi mật 21 Bảng 2.1: Tóm tắt so sánh Flutter React Native 26 Bảng 2.2: Giới hạn áp dụng Firebase Firestore 30 Bảng 2.3: Firebase SDK Authentication 32 Bảng 3.1: Bảng thuộc tính Advertisement 47 Bảng 3.2: Bảng thuộc tính DanhMucCollection 47 Bảng 3.3: Bảng thuộc tính SachCollection 48 Bảng 3.4: Bảng thuộc tính ReviewCollection 49 Bảng 3.5: Bảng thuộc tính FeedbackCollection 50 Bảng 3.6: Bảng thuộc tính FeedbackDetailCollection .50 Bảng 3.7: Bảng thuộc tính NotificationsCollection 50 Bảng 3.8: Bảng thuộc tính SearchCollection .51 Bảng 3.9: Bảng thuộc tính SuggestionBookCollection .51 xiii 3.3.1.20 Màn hình Xác nhận đơn hàng Hình 3.44: Màn hình Xác nhận đơn hàng Ý nghĩa: Xác nhận đơn hàng đặt đơn hàng Các đối tượng hình Bảng 3.34: Mơ tả đối tượng hình Xác nhận đơn hàng STT Loại Ý nghĩa Button Quay lại hình chọn phương thức tốn Button Xác nhận toán, tạo đơn hàng phương thức toán Thu tiền giao hàng, chuyển sang hình ứng dụng Momo chọn phương thức tốn Momo 77 3.3.1.21 Màn hình Thơng tin cá nhân Hình 3.45: Màn hình Thơng tin cá nhân Ý nghĩa: Hiển thị thông tin cá nhân chỉnh sửa thơng tin Các đối tượng hình Bảng 3.35: Mơ tả đối tượng hình Thông tin cá nhân STT Ý nghĩa Loại IconButton Quay hình trước NetworkImage Hiển thị hình ảnh TextFormField Tên người dùng TextFormField Giới tính người dùng TextFormField Ngày sinh người dùng FlatButton Đổi mật tài khoản FlatButton Cập nhật thông tin người dùng 78 3.3.1.22 Màn hình Quản lý đơn hàng Hình 3.46: Màn hình Quản lý đơn hàng Ý nghĩa: Quản lý đơn hàng đặt Các đối tượng hình Bảng 3.36: Mơ tả đối tượng hình Quản lý đơn hàng STT Loại Ý nghĩa IconButton Quay hình trước Cotainer Hiển thị thông tin đơn hàng IconButton Huỷ đơn hàng (Nếu đơn hàng trạng thái “Đã tiếp nhận”) 79 3.3.1.23 Màn hình Thơng báo Hình 3.47: Màn hình Thơng báo Ý nghĩa: Hiển thị thông báo Các đối tượng hình Bảng 3.37: Mơ tả đối tượng hình Thơng báo STT Ý nghĩa Loại IconButton Quay hình trước Listview Danh sách thơng báo 80 3.3.1.24 Màn hình Danh sách sách u thích Hình 3.48: Màn hình Danh sách sách u thích Ý nghĩa: Hiển thị danh sách sách yêu thích Các đối tượng hình Bảng 3.38: Mơ tả đối tượng hình Danh sách sách yêu thích STT Loại Ý nghĩa IconButton Quay hình trước Listview Danh sách sách danh mục IconButton Xoá sách khỏi danh sách yêu thích 81 3.3.1.25 Màn hình Khuyến Hình 3.49: Màn hình Khuyến Ý nghĩa: Hiển thị danh sách mã khuyến tài khoản Các đối tượng hình Bảng 3.39: Mơ tả đối tượng hình Khuyến STT Loại Ý nghĩa IconButton Quay hình trước Listview Danh sách mã khuyến FlatButton Sao chép mã khuyến 82 3.3.1.26 Màn hình Góp ý báo lỗi Hình 3.50: Màn hình Góp ý & Báo lỗi Ý nghĩa: Hiển thị hình báo cáo lỗi Các đối tượng hình Bảng 3.40: Mơ tả đối tượng hình Góp ý báo lỗi STT Ý nghĩa Loại Quay hình trước IconButton DropDownFormField Danh sách lỗi TextField Mô tả chi tiết lỗi FlatButton Gửi 83 CHƯƠNG 4: KẾT QUẢ SO SÁNH, THỰC NGHIỆM, PHÂN TÍCH, TỔNG HỢP 4.1 Cài đặt ứng dụng Thiết bị cài ứng dụng bắt buộc phải đáp ứng yêu cầu sau: - Thiết bị chạy hệ điều hành Android phiên 7.0 (Nougat) trở lên - Thiết bị chạy hệ điều hành IOS phiên IOS 10 trở lên Tải ứng dụng link chọn cài đặt: https://drive.google.com/drive/folders/1NGB7iEoUHa0TIQ8wmkarFIuzMBMMGS Ej?usp=sharing 4.2 Kiểm thử ứng dụng Bảng 4.1: Bảng kiểm thử chức trang người dùng ID Test Case Description Test steps Kiểm tra tính Sử dụng ứng chọn danh dụng lần đầu mục yêu thích tải Chọn TC_App _01 danh mục mà người dùng Expected Output Chọn thành cơng danh mục u thích sách danh mục Pass chọn hiển thị muốn hiển thị trang chủ trang chủ TC_App_03 Result hình Kiểm tra chức Nhập thông tin Đăng ký thành công đăng ký hợp lệ chọn chuyển sang người dùng vào button hình đăng nhập Pass “Đăng Ký” Sau đăng nhập tài khoản vừa đăng 84 ký chuyển sang hình OTP nhập Nhập xác mã OTP sang chuyển hình trang chủ Kiểm tra chức Chọn vào button Đăng nhập thành TC_App_02 đăng nhập “Đăng Nhập” công, chuyển sang người dùng nhập hình trang chủ email mật người dùng Pass Chọn vào button đăng nhập Facebook Google Kiểm tra chức Chọn TC_App_03 mục Đăng xuất tài đăng xuất “Đăng xuất ” khoản, chuyển Pass khách hàng hình hình Cá Nhân Welcome Kiểm tra tính Chọn mục quên Tin nhắn TC_App_04 quên mật mật hình Đăng Nhập sau nhập email chọn button “Xác nhận” gửi tới mail người dùng vừa nhập Người dùng vào Pass mail nhấn vào đường dẫn xác nhận đổi mật 85 Kiểm tra thông Chọn sách Hiển thị thông TC_App_05 tin sách hiển thị hình trang tin chi tiết khớp với sách chủ sách chọn Pass người dùng chọn Kiểm tra chức Chọn “Xem tất Hiển thị danh sách TC_App_06 hiển thị cả” danh sách sách mục danh mục Pass thuộc danh mục TC_App_07 Kiểm tra chức Nhập tên sách Hiển thị danh sách tìm kiếm vào tìm kiếm sách tên có từ Pass sách giống với nội dung người dùng nhập Kiểm tra tính Chọn Sách thêm TC_App_08 thêm sách sách nhần vào vào hình giỏ vào giỏ hàng button “Thêm hàng Pass sách vào giỏ hàng” Kiểm tra tính Chọn sách Nếu chưa đăng đánh giá chọn mục nhập thông báo sách “Đánh giá sách” người dùng cần đăng nhập TC_App_09 Nếu đăng nhập Pass người dùng chọn số tương ứng bình luận sau chọn button gửi để đăng tải Bình luận 86 người dùng đăng tải Kiểm tra tính Chọn sách Nếu người dùng thêm sách chọn mục chưa đăng nhập vào yêu thích TC_App_10 “Thêm vào u thơng báo người thích” dùng cần đăng nhập Pass Nếu đăng nhập sách thêm vào u thích TC_App_11 Kiểm tra chỉnh sửa thơng tin cá nhân tài khoản Chọn button “Edit” hình chỉnh sửa thơng tin cá nhân Nhập nội dung nhấn button “OK” Thông tin tài khoản người dùng chỉnh sửa với thông tin Pass vừa nhập Cập nhật thơng tin hình 87 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Những kết đạt Tuy thời gian thực đề tài khơng thực dài nhóm tích lũy nhiều kinh nghiệm quý báu làm hành trang cho sau Nhờ giúp đỡ nhiệt tình Giáo viên hướng dẫn với cố gắng, nhóm đạt kết sau: - Hiểu quy trình xây dựng ứng dụng thực hành cơng việc làm nhóm - Đáp ứng thực yêu cầu công việc giao hạn - Nâng cao khả nghiên cứu, bổ sung kiến thức công nghệ - Hoàn thành xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter với đầy đủ chức xác định ban đầu 5.2 Ưu điểm đề tài Qua trình thực đề tài, nhóm rút ưu điểm: - Nhóm sử dụng nhiều công nghệ hỗ trợ lập trình mạnh mẽ - Thường xuyên tiếp xúc với ứng dụng bán sách trực tuyến giúp nhóm có nhìn tổng quan để áp dụng vào ứng dụng đề tài - Giao diện đơn giản, thân thiện với người dùng, phân chia theo danh mục giúp người dùng dễ dàng việc tìm kiếm - Mỗi sách có phần đánh giá bình luận người dùng giúp người mua sách có nhìn tổng qt trước mua sách 5.3 Hạn chế đề tài Bên cạnh ưu điểm đề tài đạt được, tồn hạn chế sau: - Còn số chức nhóm giai đoạn phát triển: quản lý thông báo người dùng, 88 5.4 Hướng phát triển Mặc dù tồn hạn chế nêu với tâm nhóm, đề tài thời gian tới có nhiều điểm cải tiến tích cực nâng cấp, cụ thể là: - Tích hợp nhiều phương thức tốn khác - Tích hợp với bên giao hàng thứ ba - Thêm chức vòng quay may mắn 89 TÀI LIỆU THAM KHẢO [1] Marco L Napoli (2019), “Beginning Flutter: A Hands On Guide to App Development” The Wiley Network, pp 25 - 26 [2] Flutter Documentation: https://flutter.dev/docs/resources/technical-overview [3] Flutter vs React Native: A Developer’s Perspective: https://nevercode.io/blog/flutter-vs-react-native-a-developersperspective/#:~:text=Flutter%20engine%20has%20most%20of,which%20results%2 0in%20poor%20performance [4] Firebase Documentation: https://firebase.google.com/docs?hl=vi 90 S K L 0