Đồ án ứng dụng mua bán đa nền tảng

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ỨNG DỤNG MUA BÁN ĐA NỀN TẢNG GIẢNG VIÊN HƯỚNG DẪN Th.S TRẦN ANH DŨNG NHĨM THỰC HIỆN: Vũ Đình Khoa: 19521705 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Lời đầu tiên, nhóm chúng em xin gửi lời cảm ơn sâu sắc đến tập thể quý thầy cô trường Đại học Công Nghệ Thông Tin, đặc biệt giảng viên ngành Kỹ thuật Phần mềm trang bị cho chúng em có kiến thức vững để thực đồ án lần Chúng em chân thành cảm ơn Ths.Trần Anh Dũng giúp đỡ chúng em suốt trình học tập thực đồ án, quan tâm, giảng dạy tận tình thầy cô hỗ trợ chúng em nhiều thời gian vừa qua qua chúng em học hỏi nhiều kiến thức Một lần nhóm xin gửi lời cảm ơn sâu sắc đến quý thầy Ngồi ra, xin cảm ơn đến tất đóng góp thành viên nhóm, người chăm hoàn thành nhiệm vụ hạn để đồ án hồn thiện cách đầy đủ Trong trình thực đồ án “Ứng dụng mua bán đa tảng”, nhóm chúng em kết hợp kiến thức thầy trao đổi truyền đạt để cố gắng hoàn thành đồ án cách tốt Tuy nhiên, kiến thức thân cịn hạn chế, khơng tránh khỏi có sai sót Chính thế, nhóm chúng em mong nhận quan tâm, góp ý cô để chúng em tiếp thu thêm kinh nghiệm, kiến thức đồ án lần này, để đồ án hồn thiện đầy đủ Qua rút kinh nghiệm đồ án Sự góp ý q thầy học quý báu hành trang để chúng em tiếp tục thực đồ án sau Lời cuối cùng, nhóm chúng em xin chúc q thầy thật nhiều sức khoẻ niềm vui để tiếp tục giảng dạy truyền đạt thật nhiều kiến thức bổ ích đến sinh viên khác Chúng em xin chân thành cảm ơn! Mục lục TÓM TẮT ĐỒ ÁN ĐỀ CƯƠNG CHI TIẾT Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Phạm vi nghiên cứu .7 Chương KIẾN THỨC NỀN TẢNG 2.1 Flutter NodeJS .8 FireBase .9 Chương Sơ đồ kiến trúc phần mềm 3.2 Trình bày thiết kế 10 Chương ĐẶC TẢ USECASE 10 4.1 Sơ đồ Usecase 10 4.2 Danh sách Usecase 11 Chương THIẾT KẾ CƠ SỞ DỮ LIỆU 12 5.1 Sơ đồ logic 12 5.2 Danh sách bảng 12 Chương THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 13 6.1 Danh sách hình 13 6.2 Mô tả chi tiết hình 13 Chương TỔNG KẾT 27 7.1 Kết đạt 27 7.2 Hướng phát triển 28 TÀI LIỆU THAM KHẢO 28 TÓM TẮT ĐỒ ÁN Đề tài “Ứng dụng mua sắm đa tảng” giúp việc mua bán, trao đổi sản phẩm trở nên dễ dàng tiện lợi thông qua việc thao tác qua điện thoại website, giúp tiện ích mua sắm nâng lên tầm cao mới, người dùng thoải mái lựa chọn, tin dùng sản phẩm chất lượng Đề tài việc thấy bất tiện việc trao đổi, mua bán hàng hóa khoảng cách địa lý, phương thức toán, tin tưởng lẫn nhau, hay việc hạn chế lựa chọn sản phẩm mua sắm mua bán sản phẩm trực tiếp Nhận thấy vấn đề đó, ứng dụng mua bán đa tảng đời Nhờ việc phân tích yêu cầu, đánh giá thực trạng, đánh giá việc bảo trì sản phẩm nâng cấp sản phẩm ngày tốt hơn, để thích ứng tính sản phẩm thay đổi mà không làm ảnh hưởng nhiều tới work flow hình có Team chọn Framework Flutter cho Front-end, sử dụng IDE Visual Studio, với kiến trúc MVVM sử dụng Bloc để quản lý State, quản lý liệu MongoDb sử dụng Nodejs để xây dựng Back-end Tuy nhiên q trình thực hiện, có vần đề trình xây dựng Back-end, nên cố gắng xây dựng phát triển lại cấu trúc hệ thống, sử dụng MVC để phát triện nhanh chóng, chọn firebase realtime databases để ứng dụng hoàn thành kịp tiến độ Nội dung báo cáo trình bày chương: - Chương 1: Mở đầu Trình bày sơ thực trạng, nhu cầu thực tế Xác định phạm vi đề tài - Chương 2: Kiến thức tảng Giới thiệu, trình bày kiến thức, cơng nghệ nhóm sử dụng - Chương 3: Sơ đồ kiến trúc phần mềm Trình bày kiến trúc phần mềm thiết kế thơng qua tìm hiểu phát triển - Chương 4: Thiết kế database Trình bày sơ đồ database ứng dụng - Chương 5: Thiết kế sơ đồ use case Trình bày sơ đồ use case - Chương 6: Thiết kế UI/UX Giới thiệu qua giao diện người dùng app - Chương 7: Cài đặt kiểm thử Cài đặt ứng dụng, kiểm thử ứng dụng báo cáo, sửa lỗi - Chương 8: Tổng kết kiến thức đạt được, hướng phát triển ứng dụng ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng ứng dụng mua bán đa tảng TÊN ĐỀ TÀI (tiếng Anh): multiple platform e-commerce application Cán hướng dẫn: ThS Trần Anh Dũng Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 15/06/2023 Sinh viên thực hiện: Vũ Đình Khoa-19521705 Mục tiêu đề tài: 1.1 Bối cảnh chọn đề tài: Trong q trình phát triển xã hội cơng nghệ thơng tin phát triển mạnh mẽ ngày thâm nhập sâu, trở thành công cụ hỗ trợi đắc lực cho người lĩnh vực Đặc biệt ứng dụng phần mềm với nhiều chương trình ứng dụng có hiệu Thay quản lý thơng tin trang web,ứng dụng máy tính, nhiều sàn giao dịch thương mại điện tử thiết kế ứng dụng (Application, viết tắt App) chạy smartphone để tiện cho người mua lẫn người bán Các nhà kinh doanh thương mại điện tử cho rằng, App công cụ mua sắm hữu hiệu thị trường Việt Nam có 35 triệu smartphone hoạt động Hiện xu hướng mua sắm điện thoại di động ngày tăng, số lượng hàng hoá bán qua app ngày đẩy mạnh Nhờ có app bán hang mà nhiều người dung có thói quen mua sắm app, nhu cầu mua sắm thực app Do đó, chúng em muốn xây dựng ứng dụng bán hàng smartphone để tìm hiểu hình thức mua sắm đại Mục Tiêu: − Tìm hiểu xây dựng ứng dụng bán hàng online: + Có chức ứng dụng bán hang + Đem lại thuận tiện cho người dùng Phạm Vi: − Phạm vi môi trường: Di động chạy hệ điều hành Android IOS − Phạm vi chức + Chức đăng ký, đăng nhập tài khoản + Chức thêm, xố, sửa giỏ hang + Chức tìm kiếm sản phẩm + Chức danh mục lọc sản phẩm + Chức quản lý mặt hàng Đối tượng nghiên cứu: − Những người dùng có nhu cầu mua bán hàng hoá online Phương pháp thực hiện:  Phương pháp làm việc:  Làm việc nhóm thành viên thông qua phương thức online offline hướng dẫn giảng viên hướng dẫn  Phương pháp nghiên cứu:  Phân tích nhu cầu sử dụng đối tượng người dùng  Nghiên cứu tài liệu công nghệ liên quan  Phương pháp cơng nghệ:  Tìm hiểu xây dựng API tích hợp vào sở liệu  Thiết kế ứng dụng đẹp mắt phù hợp với người dùng  Xây dựng giao diện ứng dụng dùng cho tảng Android IOS dựa theo thiết kế sẵn  Quản lý sources code qua github  Sử dụng Microsoft Office 360 để quản lý tài liệu Nền tảng công nghệ:  Front-end: Flutter  Back-end: Nodejs  Database: MongoDB  Visual Studio Code  Android Studio Kết mong đợi:  Ứng dụng có chức mua bán  Ngồi cịn có số chức bên bán hàng thêm sản phẩm, liệt kê danh sách sản phẩm, thống kê doanh thu, bên mua hàng có xem chi tiết sản phẩm, giỏ hàng  Ứng dụng mượt mà, không lỗi Hướng phát triển đề tài:  Thêm tính stream hỏi đáp nhanh, tư vấn bán hàng qua video meeting, tập trung tiện lợi với người sử dụng  Giao diện đa dạng, phối màu hợp lý, animation mượt mà  Tăng tốc xử lý chức ứng dụng Kế hoạch làm việc: Thời gian thực từ ngày 28/3/2023 đến ngày 15/06/2023 Nhóm chia thành giai đoạn cụ thể:  Giai đoạn 1: Thiết kế giao diện, xây dựng UI, Thiết kế Database, xây dựng API Gồm Sprint: Sprint Thời gian Công việc dự kiến Sprint 28/3/2023 – 31/3/2023 Đăng ký đề tài Tìm hiểu xác định phạm vi, hướng phát triển đề tài Tìm hiểu phân tích yêu cầu nghiệp vụ đề tài Viết tài liệu, đề cương chi tiết Sprint 1/4/2023 – 7/4/2023 Tìm hiểu cơng nghệ Thiết kế giao diện Xây dựng CSDL Sprint 8/4/2023 – 22/4/2023 Lập trình giao diện ứng dụng Xây dựng API Tạo data giả cho kiểm thử Sprint 23/4/2023 – 30/4/2023 Kiểm thử lại giao diện thiết kế Đổ data giả vào database Xem xét tính lập trình thêm có tính cần mở rộng  Giai đoạn 2: Liên kết API với xử lý UI để hồn thiện tính ứng dụng Gồm sprint Sprint Thời gian Công việc dự kiến Sprint 1/5/2023 – 5/5/2023 Kiểm thử API, hoàn chỉnh API để chuẩn bị liên kết UI Sprint 6/5/2023 – 27/5/2023 Liên kết API với UI thông qua bloc Kiểm tra lỗi logic fix review (nếu có) Sprint 27/5/2023 – 30/5/2023 Kiểm thử toàn diện ứng dụng, fix review logic bug  Giai đoạn 3: Triển khai, viết báo cáo,… Sprint Thời gian Công việc dự kiến Sprint 1/6/2023 – 5/6/2023 Build release, feedback, review Sprint 5/6/2023 – 10/6/2023 Viết doc, chuẩn bị báo cáo Chương MỞ ĐẦU 1.1 Lý chọn đề tài Để giải vấn đề thời gian, việc áp dụng công nghệ thông tin vào mua sắm giải pháp tiện lợi hiệu Với ứng dụng chợ trực tuyến, người dùng dễ dàng lựa chọn mua sắm sản phẩm tốt đảm bảo chất lượng từ nhà cung cấp tin cậy Họ tiết kiệm thời gian cơng sức so với việc phải mua sắm truyền thống Tạo ứng dụng thương mại điện tử (e-commerce app) độc đáo hấp dẫn để thu hút người dùng, giúp doanh nghiệp nhỏ cá nhân tiếp cận với khách hàng cách dễ dàng thuận tiện Tận dụng kỹ bán hàng bạn để xây dựng quảng bá sản phẩm ứng dụng, tạo trải nghiệm mua sắm tiện lợi đáng tin cậy cho khách hàng Đảm bảo ứng dụng bạn có tính tương tác cao, giao diện thân thiện hỗ trợ tốn an tồn để thu hút người mua tạo lịng tin từ phía khách hàng Các công nghệ nghiên cứu:  Font-end: Flutter  Back-end: NodeJS  Database: FireBase  Tools: Visual Studio Code, GitHub 1.1.1 Đối tượng sử dụng đề tài hướng đến: Tất người có nhu cầu mua sắm thực phẩm, nhu yếu phẩm muốn tiết kiệm thời gian chợ muốn gợi ý ăn cho bữa ăn Quản trị viên cung cấp nhu cầu mua bán thực phẩm, vận chuyển cho khách hàng, hỗ trợ tư vấn 1.2 Phạm vi nghiên cứu 1.2.1 Phạm vi môi trường: Ứng dụng di động 1.2.2 Phạm vi chức năng:  Người dùng o Chức đăng nhập, đăng ký tài khoản o Chức tìm kiếm thực phẩm o Đề xuất sản phẩm cửa hàng o Chức thêm, xóa, sửa thực phẩm giỏ hàng o Chức toán đơn hàng o Chức theo dõi sản phẩm tốn Hình 5.1: Trang đăng nhập 6.2.2 Đăng ký tài khoản Mô tả: Nhập thông tin để đăng ký tài khoản Chức năng:  Nhập thông tin đăng ký  Chọn đăng ký 14 Hình 6.2: Trang Đăng ký 6.2.3 Trang chủ Mơ tả: Hiển thị lời chào, giới thiệu app Chức năng:  Xem sản phẩm theo chủ đề  Chọn sản phẩm 15 Hình 6.3: Trang chủ 6.2.4 Trang chi tiết sản phẩm Mô tả: Hiển thị danh sách sản phẩm gợi ý danh mục sản phẩm Chức năng:  Chọn chi tiết sản phẩm  Chọn xem danh mục sản phẩm  Xem lượt đánh giá  Đặt hàng  Lựa chọn tùy chọn sản phẩm 16 17 Hình 6.5: Trang chi tiết sản phẩm 6.2.5 Trang thơng báo Mơ tả: Nhập thơng tin để tìm sản phẩm Chức năng:  Xem thông báo app 18 Hình 6.6: Trang thơng báo 6.2.6 Trang tìm kiếm Mơ tả: Hiển thị thông tin sản phẩm giỏ hàng Chức năng:  Tìm kiếm sản phẩm  Nhấn vào sản phẩm tìm 19 Hình 6.6: Trang tìm kiếm 6.2.7 Giỏ hàng Mơ tả: Hiển thị thơng tin chi tiết sản phẩm Chức năng:  Xem sản phẩm giỏ hàng  Xem tổng tiền phải trả  Chọn phương thức tốn 20 Hình 6.7: Trang chi tiết sản phẩm 6.2.8 Trang theo dõi đơn hàng Mô tả: Hiển thị thông tin sản phẩm cảu cửa hàng thông tin chi tiết cửa hàng Chức năng:  Theo dõi trạng thái hàng đặt 21 Hình 6.8: Trang theo dõi đơn hàng 6.2.9 Trang theo dõi đường vận chuyển Mô tả: Chọn thông tin cần thiết để đặt đơn hàng Chức năng:  Xem đường vận chyển đơn hàng 22 Hình 6.9: Trang đặt hàng 6.2.10 Trang feedback Mô tả: Hiển thị đặt hàng thành công Chức năng:  Nhập đánh giá cá nhân 23 Hình 6.10: Trang đánh giá 6.2.11 Trang thơng tin cá nhân Mơ tả: Hiển thị danh sách ăn từ nguyên liệu chọn Chức năng:  Xem thơng tin tài khoản 24 Hình 6.11: Trang thông tin tài khoản 6.2.12 Trang cài đặt thông báo Mơ tả: Hiển thị chi tiết ăn gợi ý bao gồm nguyên liệu ăn Chức năng:  Cài đặt thơng báo hệ thống 25 Hình 6.12: Trang thông báo 6.2.13 Trang trung tâm giúp đỡ Mô tả: Hiển thị thông tin tài khoản mục để quản lý tài khoản Chức năng:  Hiển thị giúp đỡ, trả lời câu hỏi khách hàng 26 Hình 6.13: Trang thơng tin tài khoản Chương TỔNG KẾT 7.1 Kết đạt  Học kiến thức Bloc, kiến trúc phần mềm  Hiểu kết nối API thông qua bloc  Quản lý thời gian hiệu  Cải thiện kỹ lập trình 7.1.1 Hạn chế 27  Các tính chưa tối ưu tốt nên ứng dụng chạy chậm  Chưa học cách quản lý code team hiệu quả, có risk người team từ bỏ  Code chưa clean 7.2 Hướng phát triển Sau q trình thực hiện, nhóm nhận thấy cịn nhiều hạn chế đồ án cịn cải thiện mở rộng thêm Cụ thể số hướng phát triển sau đây: - Về ứng dụng ● Hoàn thành thêm chức cho admin: o Chức thêm, xóa, sửa thực phẩm, cửa hàng, mã giảm giá o Chức báo cáo thống kê ứng dụng ● Hoàn thành thêm chức cho user: o Thêm phương thức tốn khác chuyển khoản o Tích hợp google map theo dõi q trình giao hàng ● Tích hợp thêm tính để quản lý việc quản lý đồng tiền app - Về cách quản lý file code: ● Tập trung code cleaner: o Chia hàm, đặt tên cách hợp lý o Comment dịng code có nhiều logic ● Quản lý file hiệu quả: o Chia file theo screen để dễ dàng tìm kiếm sửa đổi file TÀI LIỆU THAM KHẢO [1] Flutter: https://flutter.dev/ [2] Bloc: https://bloclibrary.dev/#/ [3] Kết nối bloc với API: https://baoflutter.com/flutter-tutorial-lap-trinh-flutter- voi-server-api/ [4] Kết nối tổ chức với flutter bloc: https://tradacongnghe.com/2023/02/02/cau- truc-to-chuc-project-flutter-su-dung-bloc/ [5] FireBase: https://firebase.google.com/ 28