(Đồ án hcmute) xây dựng ứng dụng bán thực phẩm trên di động

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 BÁN THỰC PHẨM TRÊN DI ĐỘNG GVHD: TS LÊ VĂN NINH SVTH: PHẠM NGUYÊN PHÚ TÔ THỊ MỸ NHÂN SKL010548 Tp.Hồ Chí Minh, Năm 2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG BÁN THỰC PHẨM TRÊN DI ĐỘNG Giảng viên hướng dẫn: TS Lê Văn Vinh Sinh viên thực hiện: PHẠM NGUYÊN PHÚ 18110176 TƠ THỊ MỸ NHÂN 18110167 KHĨA: 2018 Ngành: CƠNG NGHỆ THƠNG TIN Thành phố Hồ Chí Minh, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG BÁN THỰC PHẨM TRÊN DI ĐỘNG Giảng viên hướng dẫn: TS Lê Văn Vinh Sinh viên thực hiện: PHẠM NGUYÊN PHÚ 18110176 TÔ THỊ MỸ NHÂN 18110167 KHĨA: 2018 Ngành: CƠNG NGHỆ THƠNG TIN Thành phố Hồ Chí Minh, tháng 12 năm 2022 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Phạm Nguyên Phú MSSV: 18110176 Họ tên sinh viên: Tô Thị Mỹ Nhân MSSV: 18110167 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng ứng dụng bán thực phẩm di động Nội dung thực hiện: Lý thuyết: - Tìm hiểu Flutter, Firebase, NodeJS - Tìm hiểu gắn API Thực hành: Xây dựng ứng dụng bán thực phẩm tươi sống, với tính sau: o Cho phép người dùng mua hàng hệ thống o Cho phép admin quản lý sản phẩm doanh thu Thời gian thực hiện: 15 tuần (Bắt đầu từ 7/9/2022 đến /12/2022) Chữ ký SV: …………………………………………………………… Chữ ký SV: …………………………………………………………… TRƯỞNG NGÀNH CNTT (Ký ghi rõ họ tên) TP.HCM, Ngày… tháng 12, năm 2022 GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) 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… tháng…năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Phạm Nguyên Phú MSSV: 18110176 Họ tên sinh viên: Tô Thị Mỹ Nhân MSSV: 18110167 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng ứng dụng bán thực phẩm di động Giáo viên hướng dẫn: Thầy Lê Văn Vinh 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? Đánh giá loại: Điểm: (Bằng Chữ: ) Tp Hồ Chí Minh, ngày… tháng 12 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) 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… tháng…năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Phạm Nguyên Phú MSSV: 18110176 Họ tên sinh viên: Tô Thị Mỹ Nhân MSSV: 18110167 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng ứng dụng bán thực phẩm di động Giáo viên phản biệ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? Đánh giá loại: Điểm: (Bằng Chữ: ) Tp Hồ Chí Minh, ngày… tháng 12 năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Để hồn thành báo cáo mơn học này, lời đầu tiên, nhóm chúng tơi xin bày tỏ lòng biết ơn chân thành sâu sắc đến giảng viên hướng dẫn: Thầy Lê Văn Vinh tận hình hướng dẫn chúng tơi suốt q trình nghiên cứu thực đề tài Chúng xin gửi lời cảm ơn đến quý thầy cô khoa Đào Tạo Chất Lượng Cao, quý thầy cô khoa Công Nghệ Thông Tin trang bị cho kiến thức kinh nghiệm quý giá trình học tập nhiệt tình giúp đỡ chúng tơi thực đề tài Chúng xin chân thành cảm ơn phòng thư viện cung cấp tài liệu tạo điều kiện thuận lợi để hồn thành khóa luận Mặc dù có nhiều cố gắng, thời gian có hạn, trình độ, kỹ thân nhiều hạn chế nên chắn khơng tránh khỏi hạn chế, thiếu sót Rất mong đóng góp, bảo, bổ sung thêm thầy cô bạn Chúng xin chân thành cảm ơn ! MỤC LỤC DANH MỤC CÁC BẢNG BIỂU I DANH MỤC CÁC HÌNH ẢNH III CHƯƠNG 1: PHẦN MỞ ĐẦU 1.1 LÝ DO CHỌN ĐỀ TÀI 1.2 MỤC TIÊU NGHIÊN CỨU 1.3 PHẠM VI NGHIÊN CỨU 1.4 PHƯƠNG PHÁP NGHIÊN CỨU CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 FLUTTER 2.2 DART 2.3 FIREBASE 2.4 NODEJS CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 3.1 KHẢO SÁT HIỆN TRẠNG 3.2 MÔ TẢ TỔNG THỂ 13 3.3 MƠ HÌNH HĨA U CẦU 13 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 33 4.1 LƯỢC ĐỒ LỚP 33 4.2 LƯỢC ĐỒ TUẦN TỰ 33 4.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 44 4.4 THIẾT KẾ GIAO DIỆN ỨNG DỤNG 48 CHƯƠNG 5: KIỂM THỬ 80 5.1 ĐĂNG KÍ 80 5.2 ĐĂNG NHẬP 82 5.3 THÊM SẢM PHẨM VÀO GIỎ HÀNG 85 5.4 XÓA SẢN PHẨM KHỎI GIỎ HÀNG 85 CHƯƠNG 6: TỔNG KẾT 87 6.1 KẾT QUẢ ĐẠT ĐƯỢC 87 6.2 ƯU ĐIỂM 87 6.3 NHƯỢC ĐIỂM 87 6.4 HƯỚNG PHÁT TRIỂN 87 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 88 7.1 DART 88 7.2 FLUTTER 88 7.3 NODEJS 88 7.4 FIREBASE 88 DANH MỤC CÁC BẢNG BIỂU Bảng Chức Người quản lý 13 Bảng Chức Khách hàng 14 Bảng Chức Khách vãng lai 15 Bảng Kịch Đăng nhập 16 Bảng Kịch Đăng xuất 17 Bảng Kịch Đăng ký 18 Bảng Kịch Xem sản phẩm 19 Bảng Kịch Xem chi tiết thông tin sản phẩm 19 Bảng Kịch Xem thông tin cá nhân 20 Bảng 10 Kịch Thay đổi thông tin cá nhân 21 Bảng 11 Kịch Quên mật 22 Bảng 12 Kịch Tìm kiếm sản phẩm 23 Bảng 13 Kịch Quản lý giỏ hàng 24 Bảng 14 Kịch Đặt hàng 25 Bảng 15 Kịch Quản lý sản phẩm Admin 26 Bảng 16 Kịch Quản lý loại sản phẩm Admin 27 Bảng 17 Kịch Xem tất đơn hàng 28 Bảng 18 Kịch Xem chi tiết đơn hàng Admin 28 Bảng 19 Kịch Thay đổi trạng thái đơn hàng Admin 29 Bảng 20 Kịch Thống kê theo loại sản phẩm 30 Bảng 21 Kịch Thống kê theo số lượng đơn hàng 30 Bảng 22 Kịch Tìm kiếm người dùng theo email 31 Bảng 23 Kịch Tìm kiếm người dùng theo số điện thoại 32 Bảng 24 Bảng mô tả Product 45 Bảng 25 Bảng mô tả Users 46 Bảng 26 Bảng mô tả Orders 47 Bảng 27 Bảng mô tả Cart-Item 48 Bảng 28 Bảng mô tả Category 48 Bảng 29 Bảng mô tả hình ứng dụng 48 Bảng 30 Bảng mô tả hình Đăng nhập 52 I 4.4.2.21 Màn hình Quản lý đơn hàng - Admin Hình 46 Giao diện hình Quản lý đơn hàng Bảng 50 Bảng mơ tả hình Quản lý đơn hàng No Name Ordered Required Type Icon Note Hiển thị tất đơn hàng có trạng thái Đã đặt hàng Delivering Icon Hiển thị tất đơn hàng có trạng thái Đang giao hàng Delivered Icon Hiển thị tất đơn hàng có trạng thái Đã đặt hàng Cancelled Icon Hiển thị tất đơn hàng có trạng thái Bị hủy 75 Timeline Text Hiển thị thời gian Đặt hàng số lượng sản phẩm đơn hàng Status Icon Hiển thị trạng thái đơn hàng Total Text Hiển thị tổng giá tiền đơn hàng 4.4.2.22 Màn hình Chi tiết đơn hàng - Admin Hình 47 Giao diện hình Chi tiết đơn hàng Bảng 51 Bảng mơ tả hình Chi tiết đơn hàng No Name Items Required Type Note Hiển thị tất sản phẩm có đơn hàng 76 Total Icon Hiển thị tổng tiền đơn hàng Name Icon Hiển thị tên người dùng đặt đơn hàng Payment Icon toán đơn hàng method Hiển thị phương thức Payment status Text Hiển thị trạng thái toán đơn hàng Change Status Save Dropdown Button Thay đổi trạng thái đơn hàng Lưu lại trạng thái đơn hàng vừa thay đổi 4.4.2.23 Màn hình Tìm kiếm người dùng - Admin Hình 48 Giao diện hình Tìm kiếm người dùng 77 Bảng 52 Bảng mơ tả hình Tìm kiếm người dùng No Name Required Type Note Email Radio Button Tìm kiếm theo email Phone Radio Button Tìm kiếm theo số điện thoại Keyword TextField Nhập từ khóa cần tìm kiếm User Text Hiển thị thông tin người Information True dùng tương ứng với từ khóa tìm kiếm 78 4.4.2.24 Màn hình Chi tiết cửa hàng - Admin Hình 49 Giao diện hình Chi tiết cửa hàng 79 CHƯƠNG 5: KIỂM THỬ 5.1 ĐĂNG KÍ 5.1.1 Nhập sai định dạng mail Bảng 53 Testcase Đăng kí thất bại: Nhập sai định dạng mail Test Scenario Đăng kí Test Case ID DK_01 Đăng kí nhập sai định dạng mail Test Priority High Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Environ Result Comments ment Mở app Màn hình As đăng kí Expected Nhập sai định Email: Hiển thị thông As dạng email emailtest tin vừa nhập Expected Nhập Display Hiển thị As trường name: mymy thơng tin vừa Expected cịn lại Phone: nhập mobile Passed mobile Passed mobile Passed mobile Passed 0912345678 Pass: 1234567 Nhấn Đăng kí As “Regrister” khơng thành Expected Đăng kí thất bại cơng thông báo nhập không định dạng mail 5.1.2 Đăng kí thành cơng Bảng 54 Testcase Đăng kí thành cơng 80 Test Scenario Đăng kí Test Case ID DK_02 Đăng kí thành cơng Test Priority High Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Environ Result Comments ment Mở app Màn hình As đăng kí Expected Nhập Display Hiển thị As trường name: mymy thông tin Expected Email: vừa nhập mobile Passed mobile Passed mobile Passed testemail@gm ail.com Phone: 0912345678 Pass: 1234567 Nhấn Đăng kí As “Regrister” thành cơng Expected Đăng kí thành cơng 5.1.3 Đăng kí email đăng kí trước Bảng 55 Testcase Đăng kí thất bại email đăng kí Đăng kí Test Case ID DK_03 Test Case Đăng kí email Test Priority High Description đăng kí trước Prerequisite Đã đăng kí email: Post-Requisite NA Test Scenario ID testemail@gmail.com Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Environ Result Comments ment 81 Mở app Màn hình As đăng kí Expected Nhập thơng Display Hiển thị As tin trường name: mymy thông tin Expected Email: vừa nhập mobile Passed mobile Passed mobile Passed testemail@gm ail.com Phone: 0912345678 Pass: 1234567 Nhấn Đăng kí thất As “Regrister” bại thơng Expected Đăng kí thành cơng báo email đăng kí trước 5.2 ĐĂNG NHẬP 5.2.1 Đăng nhập thành công Bảng 56 Testcase Đăng nhập thành công Test Scenario Đăng nhập Test Case ID DN_01 Nhập email password Test Priority Cao Tồn account Post-Requisite NA ID Test Case Description Prerequisite test123@gmail.com Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Environ Result Comments ment Mở app Màn hình Màn hình đăng nhập đăng nhập mobile Passed 82 Nhập Email: Đăng nhập Đăng nhập email mật test123@gmail thành công thành công com điều điều Mật khẩu: hướng sang hướng sang 123456 trang chủ trang chủ mobile Passed Đăng nhập thành công 5.2.2 Đăng nhập sai email password Bảng 57 Testcase Đăng nhập sai email pasword Test Scenario Đăng nhập Test Case ID DN_02 Nhập sai email password Test Priority High Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Environ Result Commen ment Mở app Màn hình đăng As nhập Expected Nhập Email: Hiển thị thông As email sai testemail@gm tin vừa nhập Expected mật ail.com Nhấn Đăng nhập thất As “Login” bại thông Expected ts mobile Passed mobile Passed mobile Passed mobile Passed Mật khẩu: 1234567 báo email mật không Nhập sai Email: Hiển thị thông As email testemail22@g tin vừa nhập Expected mật mail.com Mật khẩu: 123456 83 Nhấn Đăng nhập thất As “Login” bại thông Expected mobile Passed Đăng nhập thất báo email bại mật không 5.2.3 Đăng nhập để trống email Bảng 58 Testcase Đăng nhập để trống email Test Scenario Đăng nhập Test Case ID DN_03 Để trống email Test Priority High Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comments nment Mở app Màn hình Màn hình đăng nhập đăng nhập Để trống Email: “Hãy nhập “Hãy nhập email Password: email email nhập 123456 bạn ” bạn ” mobile Passed mobile Passed Đăng nhập thất bại mật 5.2.4 Đăng nhập để trống password Bảng 59 Testcase Đăng nhập để trống mật Test Scenario Đăng nhập Test Case ID DN_04 Để trống mật Test Priority High Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: 84 No Action Inputs Expected Actual Test Test Output Output Enviro Result Test Comments nment Mở app 5.3 Màn hình Màn hình đăng nhập đăng nhập Để trống Email: “Hãy nhập “Hãy nhập mật test123@gm mật mật nhập ail.com bạn ” bạn ” email Password: mobile Passed mobile Passed Đăng nhập thất bại THÊM SẢM PHẨM VÀO GIỎ HÀNG Bảng 60 Testcase Thêm sản phẩm vào giỏ hàng Test Scenario Quản lý giỏ hàng Test Case ID GH_01 Thêm sản phẩm vào giỏ hàng Test Priority High Đã đăng nhập vào hệ thống Post-Requisite NA ID Test Case Description Prerequisite Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comment nment Nhấn vào Màn hình Chi As sản phẩm tiết sản phẩm Expected Chọn Add Giỏ hàng xuất As to cart sản phẩm Expected s mobile Passed mobile Passed Thành công vừa thêm 5.4 XĨA SẢN PHẨM KHỎI GIỎ HÀNG Bảng 61 Testcase Xóa sản phẩm khỏi giỏ hàng Test Scenario Quản lý giỏ hàng Test Case ID GH_02 Xóa sản phẩm khỏi giỏ hàng Test Priority High Đã đăng nhập vào hệ thống Post-Requisite NA ID Test Case Description Prerequisite 85 Trong giỏ hàng tồn sản phẩm Test Execution Steps: No Action Inputs Expected Actual Test Test Test Output Output Enviro Result Comme nment Nhấn vào Màn hình Giỏ As biểu tượng hàng Expected Chọn icon Sản phẩm bị As Thùng rác xóa Expected nts mobile Passed mobile Passed giỏ hàng Thành công 86 CHƯƠNG 6: TỔNG KẾT 6.1 - KẾT QUẢ ĐẠT ĐƯỢC Xây dựng ứng dụng mua bán thực phẩm với tính - Xây dựng chức đề ra, đáp ứng nhu cầu ứng dụng bán hàng - Tìm hiểu sử dụng công nghệ sử dụng: Node JS Typescript Flutter - Giao diện chương trình thân thiện dễ sử dụng - Học hỏi công nghệ mới: Flutter, Nodejs biết cách ứng dụng vào đồ án môn học - Nâng cao kỹ làm việc, thảo luận nhóm, phân chia cơng việc thành viên nhóm - Hoàn thiện ứng dụng app số yêu cầu giảng viên đưa - Rèn luyện kỹ tự học, kỹ tìm kiếm tài liệu, kỹ tìm kiếm giải pháp để giải khúc mắc gặp phải trình thực đồ án 6.2 - ƯU ĐIỂM Giao diện thân thiện với người dùng, dễ sử dụng Hệ thống đáp ứng chức ứng dụng mua bán thực phẩm online - Người dùng mua quản lý đơn hàng cách dễ dàng, thuận tiện 6.3 NHƯỢC ĐIỂM - Chưa có áp dụng voucher, khuyến cho người dùng - Giao diện đơn giản, chưa đẹp mắt 6.4 HƯỚNG PHÁT TRIỂN Để ứng dụng hoạt động hiệu cần thêm số tính như: thêm feedback khách hàng sản phẩm, đánh giá sản phẩm theo thang điểm, đánh giá mức độ hài lịng khách hàng, tích điểm đổi quà,… 87 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 7.1 DART [1] https://viblo.asia/p/gioi-thieu-ngon-ngu-dart-ORNZqdv3K0n [2]https://source.vn/ngon-ngu-lap-trinhdart/#Khai_niem_ngon_ngu_lap_trinh_Dart_Flutter [3] https://200lab.io/blog/tu-hoc-ngon-dart-nhung-dieu-can-biet-truoc-khi-bat-dau/ [4] https://xuanthulab.net/lap-trinh-dart-flutter/ 7.2 FLUTTER [5] https://type.vn/flutter-cau-truc-cua-flutter-12772.ty [6] https://cafedev.vn/tu-hoc-flutter-kien-truc-cua-flutter/ [7] https://timviec365.vn/blog/flutter-la-gi-new12529.html [8]https://viblo.asia/p/hoc-flutter-tu-co-ban-den-nang-cao-phan-1-lam-quen-conang-flutter-4dbZNJOvZYM [9] https://fullstack.edu.vn/blog/tong-hop-cac-tai-lieu-hoc-flutter-tu-hoc.html [10] https://blog.itnavi.com.vn/flutter-la-gi/ 7.3 NODEJS [11] https://nodejs.org/en/ [12] https://vietnix.vn/nodejs-la-gi/ 7.4 FIREBASE [13] https://wiki.matbao.net/firebase-la-gi-giai-phap-lap-trinh-khong-can-backendtu-google/ 88 S K L 0