Xây dựng ứng dụng bán hàng trên thiết bị di động sử dụng flutter framework g

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 KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG ỨNG DỤNG BÁN HÀNG TRÊN THIẾT BỊ DI ĐỘNG SỬ DỤNG FLUTTER FRAMEWORK GVHD : TS LÊ VĂN VINH SVTH: TRẦN THÁI TUẤN THÁI DUY LINH SKL009842 Tp Hồ Chí Minh, tháng 6/2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG BÁN HÀNG TRÊN THIẾT BỊ DI ĐỘNG SỬ DỤNG FLUTTER FRAMEWORK GVHD: TS Lê Văn Vinh Sinh viên thực hiện: Trần Thái Tuấn 18110230 Thái Duy Linh 18110145 Tp Hồ Chí Minh, tháng 06 năm 2022 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 18 tháng 06 năm 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Trần Thái Tuấn MSSV: 18110230 Ngành: Công nghệ thông tin Họ tên sinh viên: Thái Duy Linh Lớp: 18110CLST2 MSSV: 18110145 Ngành: Công nghệ thông tin Giáo viên hướng dẫn: TS Lê Văn Vinh Lớp: 18110CLST3 Ngày nhận đề tài: Ngày nộp đề tài: Tên đề tài: Xây dựng ứng dụng bán giày điện thoại di động Các số liệu, tài liệu ban đầu: Khảo sát trạng thông qua ứng dụng thương mại điện tử phổ biến áp dụng thông tin tìm vào đồ án Nội dung thực đề tài:  Xây dựng ứng dụng di động cho phép khách hàng đặt hàng trực tuyến từ cửa hàng  Xây dựng trang web quản lí để quản lí thơng tin xác nhận đơn đặt hàng khách hàng Sản phẩm: Website quản lí ứng dụng đặt hàng điện thoại di động cửa hàng giày TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tê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 18 tháng 06 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: Trần Thái Tuấn MSSV: 18110230 Họ tên sinh viên: Thái Duy Linh MSSV: 18110145 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng ứng dụng bán giày điện thoại di động Giáo viên hướng dẫn: TS 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… 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ày18 tháng 06 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: Trần Thái Tuấn MSSV: 18110230 Họ tên sinh viên: Thái Duy Linh MSSV: 18110145 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng ứng dụng bán giày điện thoại 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 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Đào tạo Chất Lượng cao – Ngành Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn sâu sắc Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình nhóm chúng em suốt trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nhiệm yêu cầu thực tế xã hội thông qua việc học trường thực tập công ty Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Lê Văn Vinh tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thơi thúc chúng em hồn thành đề tài Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hồn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy (cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm thực Thái Duy Linh – 18110145 Trần Thái Tuấn – 18110230 MỤC TIÊU Tính cấp thiết đề tài Cuộc sống người ngày phát triển nhờ công nghệ khoa học công nghệ phần mềm Song, nhu cầu sống người ngày tăng cao, việc mua sắm hoạt động người ý nhiều Việc người có điện thoại di động khơng cịn chuyện q khó khăn nên việc mua sắm trực tuyến dần người tuyên dùng Đối với người việc sở hữu cho đôi giày giúp họ bảo vệ đơi chân giúp họ có ngoại hình bên trang nhã, lịch thiệp Đại dịch Covid-19 yêu cầu giãn cách, phong tỏa, hạn chế tiếp xúc làm doanh nghiệp người tiêu dùng trở nên khó khăn phải giao dịch với cách trực tiếp Nên việc tạo ứng dụng trực tuyến giúp người mua sắm, sở hữu cho đơi giày việc cần thiết Đối tượng nghiên cứu Dự án có ba đối tượng cơng nghệ sử dụng nhu cầu khách hàng ứng dụng mua sắm, công việc cần thiết để quản lý + Đầu tiên cơng nghệ sử dụng ứng dụng di dộng xây dựng ngôn ngữ Dart framework Flutter, web quản lí xây dựng Vue Nuxtjs, cuối phần backend xây dựng Nodejs kết hợp với hệ quản trị sở liệu MongoDb (NoSQL) + Nhu cầu khách hàng ứng dụng mua sắm: để xây dụng ứng dụng nhiều khách hàng sử dụng u thích việc đầu tiền cần phải biết nhu cầu khách hàng sử dụng ứng dụng + Công việc quản lý: ứng dụng mua sắm trực tuyết có phần mềm admin để quản lý Phần mềm giúp cho doanh nghiệp kiểm sốt thống kê thơng tin cần thiết để doanh nghiệp theo dõi cửa hàng Phạm vi nghiên cứu Ứng dụng sử dụng cho cửa hàng bán giày, giúp cho cửa hàng bán hàng cách tốt mùa dịch giúp cho khách hàng tiếp cận sản phẩm từ cửa hàng khuyến cửa hàng để từ đưa định mua hàng sở hữu sản phẩm cửa hàng Phương pháp nghiên cứu Tìm hiểu học hỏi thêm thư viện lý thuyết ngôn ngữ Dart, framework flutter, Vue, Nuxtjs, Nodejs, MongoDb thông qua tài liệu trang web thống, video khóa học trực tuyến Tham khảo ứng dụng mua sắm trực tuyến xây dựng nhiều người sử dụng trước shoppee, lazada KHÓ KHĂN VÀ ĐỀ XUẤT Khó khăn STT Khắc phục Flutter UI frameword nên việc Tìm hiểu đọc tài liệu tìm hiểu triển khai gặp nhiều khó khăn video ngơn ngữ Nodejs ngôn ngữ nhiều thành viên nhóm chưa biết nhiều ngôn ngữ nên việc code chưa tốt Chưa thành thục việc truy vấn truy Đọc doc giảng xuất liệu từ mongoDb web Các thành viên nhóm cịn yếu Dành thời gian tìm hiểu code kinh nghiệm nên việc fix bug code nhiều cịn gặp nhiều khó khăn dẫn đến việc chậm trễ so với kế hoạch Khả sử dụng cơng cụ lưu trữ Tìm hiểu câu lệnh CLI sử quản lý (github) code yếu dụng App hổ trợ git desktop Các thành viên nhóm làm nên Sắp xếp lịch trình thời cịn hạn chế thời gian để tìm hiểu gian nghỉ ngơi hợp lí xây dựng ứng dụng MỤC LỤC DANH MỤC HÌNH VẼ I DANH MỤC BẢNG IV KẾ HOẠCH THỰC HIỆN VI PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT FLUTTER 1.1 Flutter gì? 1.2 Lý sử dụng Flutter gì? 1.3 Ưu điểm nhược điểm Flutter 2 DART 2.1 Khái niệm ngơn ngữ lập trình Dart 2.2 Tại lại chọn ngôn ngữ Dart 2.3 Vài nét Dart 3 NODEJS 3.1 Nodejs gì? 3.2 Ưu điểm 3.3 Nhược điểm 4 VUEJS 4.1 Vuejs gì? 4.2 Lịch sử đời NUXTJS 5.1 Nuxtjs gì? 5.2 Cách thức làm việc MONGODB 6.1 MongoDB gì? 6.2 Ưu điểm MongoDB 6.3 Nhược điểm MongoDB FIREBASE 7.1 Firebase gì? 7.2 Ưu điểm Firebase 7.3 Nhược điểm Firebase 7.4 Nhóm cơng cụ phát triển CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU KHẢO SÁT HIỆN TRẠNG 1.1 App Tiki Hình 3.64: Trang Thương hiệu 121 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ CÀI ĐẶT 1.1 Flutter Thực theo bước sau: o Cài đặt Flutter Framework đường dẫn sau https://docs.flutter.dev/get-started/install o Cài đặt Android Studio Visual Code o Tải source code đường dẫn GitHub sau: https://github.com/blackbee2000/shoes-shop-app/tree/linhtd o Mở project vừa tải link Hình 4.1: Soure code sau tải o Click chọn Terminal tool công cụ IDE dang sử dụng (Android Studio Visual Code) o Nhập lệnh sau: flutter pub get (để thực việc cài đặt package dự án) 122 o Sau thực cài đặt thành công package Có thể mở máy ảo android gắm trực tiếp thiết bị thật vào bắt đầu “Run” project o Đối với project dành cho Client sử dụng thiết bị di động (Máy ảo thiết bị Thật) để Build dự án 1.2 NuxtJs + Vuejs (Element UI) Thực theo bước sau: o Cài đặt Visual Code o Cài đặt set up project theo hướng dẫn https://nuxtjs.org/fr/docs/get-started/installation/ o Tải source code đường dẫn GitHub sau: https://github.com/blackbee2000/shoes-shop-webadmin?fbclid=IwAR00dwS_6kYnuXfd8Ha6JD6kcV4RJ_IRrqufmV nbbsmtvo2OdKI_koV7Fx4 Hình 4.2: Soure code Nuxt + Vue sau tải o Mở project vừa tải link o Click chọn Terminal Visual Code o Nhập lệnh sau: yarn install (để thực việc cài đặt package dự án) o Nhập lệnh yarn run dev thực chạy dự án 1.3 Nodejs + Express Thực cài đặt theo bước sau: 123 o Cài đặt Visual Code o Cài đặt set up môi trường nodejs theo hướng dẫn https://www.tutorialspoint.com/nodejs/nodejs_environment_setup.ht m o Cài đặt Express câu lệnh: npm install -g express o Tải source code theo đường dẫn sau: https://github.com/chopper985/shoes_shop_app.git Hình 4.3: Soure code NodeJs + Express sau tải o Mở project vừa tải link o Click chọn Terminal Visual Code o Nhập lệnh sau: npm i(để thực việc cài đặt package dự án) o Nhập lệnh npm start thực chạy dự án KIỂM THỬ 2.1 Test chức đăng nhập khách hàng 124 Hình 4.4: Testcase đăng nhập khách hàng 2.2 Test chức đăng ký khách hàng Hình 4.5: Testcase đăng ký khách hàng 2.3 Test chức đăng xuất khách hàng 125 Hình 4.6: Testcase đăng xuất khách hàng 2.4 Test chức tìm kiếm sản phẩm theo thương hiệu Hình 4.7: Testcase tìm kiếm sản phẩm theo thương hiệu 2.5 Testcase chức tìm kiếm sản phẩm theo tên sản phẩm 126 Hình 4.8: Testcase tìm kiếm sản phẩm theo tên sản phẩm 2.6 Testcase chức cập nhật thơng tin cá nhân Hình 4.9: Testcase cập nhật thông tin cá nhân 2.7 Testcase chức thêm số lượng sản phẩm giỏ hàng 127 Hình 4.10: Testcase thêm số lượng sản phẩm giỏ hàng 2.8 Testcase chức cập nhật số lượng sản phẩm khơng giỏ hàng Hình 4.11: Testcase cập nhật số lượng sản phẩm không giỏ hàng 2.9 Testcase chức xóa sản phẩm khỏi giỏ hàng 128 Hình 4.12: Testcase xóa sản phẩm khỏi giỏ hàng 2.10 Testcase chức Hủy đơn hàng đặt 129 Hình 4.13: Testcase hủy đơn hàng đặt 2.11 Testcase chức Xem thơng tin chi tiết blog Hình 4.14: Testcase Xem thông tin chi tiết blog 2.12 Testcase chức Xem sản phẩm u thích Hình 4.15: Testcase Xem sản phẩm yêu thích 130 PHẦN KẾT LUẬN 131 KẾT QUẢ ĐẠT ĐƯỢC - Nâng cao khả làm việc nhóm, thảo luận phân chia cơng việc - thành viên nhóm Học thêm cơng nghệ mới: Flutter, Vuejs, Nodejs, Nuxtjs, Firebase Hoàn thành ứng dụng đề dẫn giáo viên hướng dẫn - Rèn luyện kĩ tìm kiếm giải tình lỗi ƯU ĐIỂM Sau trình học hỏi nghiên cứu xây dựng ứng dụng bán giày Nhóm chúng em thấy ưu điểm đề tài, cụ thể là: - Đã tìm hiểu sử dụng thành cơng công nghệ vào đề tài - Cơ sở liệu cập nhật liên tục với thông tin - Giao diện đơn giản, dễ sử dụng trình duyệt máy tính điện thoại số thiết bị khác NHƯỢC ĐIỂM - Chưa áp dụng google map - Chưa đăng nhập google, facebook HƯỚNG PHÁT TRIỂN - Thêm tính mới: So sánh sản phẩm, nhắn tin với cửa hàng, bình luận sản phẩm thêm số trò chơi đơn giản cho khách hàng - Phát triển thêm ứng dụng thuộc hệ thống phía Shipper - Phát triển ứng dụng client, shipper dựa tàng Andoird IOS - Tối ưu hóa code trải nghiệm người dùng 132 TÀI LIỆU THAM KHẢO [1] Trang doc flutter: https://docs.flutter.dev/get-started/install [2] Trang web ITNavi: https://itnavi.com.vn/blog/flutter-la-gi/?amp [3] Trang chủ ngơn ngữ flutter: https://flutter.dev/?gclsrc=aw.ds&gclid=CjwKCAjw77WVBhBuEiwAJYoJIEsnuCwOEYWyw mdDjwvqcdpTRc88FtTHZc-XX74WtFS2560R8hoC6M4QAvD_BwE [4] Trang chủ ngơn ngữ nodejs: https://nodejs.org/en/ [5] Wikipedia ngơn ngữ nodejs: https://vi.wikipedia.org/wiki/Node.js [6] Trang web w3schools: https://www.w3schools.com/nodejs/nodejs_intro.asp [7] Trang doc vuejs: https://docs.microsoft.com/en-us/windows/devenvironment/javascript/vue-on-windows [8] Trang chủ vuejs: https://vuejs.org/ [9] Trang Wikipedia vuejs: https://vi.wikipedia.org/wiki/Vue.js [10] Trang chủ mongoDb: https://www.mongodb.com/ [11] Trang topdev giới thiệu mongoDb: https://topdev.vn/blog/mongodb-la-gi/ [12] Trang Wikipedia mongoDb : https://vi.wikipedia.org/wiki/MongoDB [13] Trang doc nuxtjs: https://nuxtjs.org/docs/get-started/installation/ 133 PHỤ LỤC Link web admin: https://shop-shoes-nuxtjs.herokuapp.com/ Link tải tệp apk: https://drive.google.com/drive/folders/1xBRRuCYPTfq8tnbmInmwLbbH6vcmoA1I ?usp=sharing Link source code app mobile: https://github.com/blackbee2000/shoes-shop-app/tree/linhtd Link source code web: https://github.com/blackbee2000/shoes-shop-webadmin?fbclid=IwAR00dwS_6kYnuXfd8Ha6JD6kcV4RJ_IRrqufmVnbbsmtvo2Od KI_koV7Fx4 Link source code backend: https://github.com/chopper985/shoes_shop_app.git 134 S K L 0