(Đồ án hcmute) xây dựng ứng dụng di động đa nền tảng bán sách sử dụng framework flutter

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG BÁN SÁCH SỬ DỤNG FRAMEWORK FLUTTER GVHD: PHẠM CÔNG THIỆN SVTH: ĐÀO NGỌC HÙNG MSSV:16110096 SVTH: NGUYỄN THỊ VÂN ANH MSSV: 16110548 SKL0 7 Tp Hồ Chí Minh, tháng 07/2020 an 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 an 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 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên 1: Đào Ngọc Hùng MSSV 1: 16110096 Ngành: Công Nghệ Thông Tin Lớp: 16110ST2 Họ tên sinh viên 2: Nguyễn Thị Vân Anh MSSV 2: 16110548 Ngành: Công Nghệ Thông Tin Lớp: 16110ST4 Giảng viên hướng dẫn: Ths Phạm Công Thiện ĐT: 0988533468 Ngày nhận đề tài: 24/02/2020 Ngày nộp đề tài: 01/07/2020 Tên đề tài: Xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter Các số liệu tài liệu ban đầu: Nội dung thực đề tài: Tìm hiểu ngơn ngữ Dart dùng Framework Flutter, đánh giá ưu điểm nhược điểm Flutter Tìm hiểu tổng quan sở liệu Firebase – Firestore Xây dựng ứng dụng bán sách trực tuyến trang web quản lý cho nhà quản trị Sản phẩm: Một ứng dụng di động đa tảng bán sách sử dụng Framework Flutter, trang web quản lý đơn giản cho nhà quản trị i an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên 1: Đào Ngọc Hùng MSSV 1: 16110096 Họ tên sinh viên 2: Nguyễn Thị Vân Anh MSSV 2: 16110548 Ngành: Công Nghệ Thông Tin Tên đề tài: Xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter Họ tên Giáo viên hướng dẫn: Ths Phạm Công Thiện NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? ii an Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 Giáo viên hướng dẫn (Ký ghi rõ họ tên) iii an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: Đào Ngọc Hùng MSSV 1: 16110096 Họ tên sinh viên 2: Nguyễn Thị Vân Anh MSSV 2: 16110548 Ngành: Công Nghệ Thông Tin Tên đề tài: Xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter Họ tên Giáo viên phản biện: Ths Đinh Công Đoan NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? iv an Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo viên phản biện (Ký ghi rõ họ tên) v an 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ả cịn hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng tơi mong nhận bảo, nhận xét Thầy Cô người dùng Nhóm sinh viên thực vi an 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, toá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 - Hoà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 an 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 Ý nghĩa Loại 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 an 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 an 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 Ý nghĩa Loại 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 an 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 an 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 u thích STT Ý nghĩa Loại IconButton Quay hình trước Listview Danh sách sách danh mục IconButton Xố sách khỏi danh sách u thích 81 an 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 Ý nghĩa Loại IconButton Quay hình trước Listview Danh sách mã khuyến FlatButton Sao chép mã khuyến 82 an 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 an 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 yê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 an 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 an 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 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 TC_App_09 86 an 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 “Thêm vào yêu thơng báo người thích” dùng cần đăng nhập Pass vào yêu thích TC_App_10 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 an 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 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 quát 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 an 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 an 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 an S an K L 0 ... điểm Flutter Tìm hiểu tổng quan sở liệu Firebase – Firestore Xây dựng ứng dụng bán sách trực tuyến trang web quản lý cho nhà quản trị Sản phẩm: Một ứng dụng di động đa tảng bán sách sử dụng Framework. .. Tên đề tài: Xây dựng ứng dụng di động đa tảng bán sách sử dụng Framework Flutter Các số liệu tài liệu ban đầu: Nội dung thực đề tài: Tìm hiểu ngơn ngữ Dart dùng Framework Flutter, đánh giá ưu... Minh, tháng 07 năm 2020 an 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