Ứng dụng đặt hàng adidas

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ỨNG DỤNG ĐẶT HÀNG ADIDAS Nhóm sinh viên thực hiện: Bùi Thiện Nhân-19521927 Trần Hiếu Nghĩa-19521902 GIẢNG VIÊN HƯỚNG DẪN LÊ THANH TRỌNG TP HỒ CHÍ MINH, 2022 Lời cảm ơn Đầu tiên nhóm em xin gửi lời cảm ơn tới thầy Lê Thanh Trọng việc giúp lớp nói chung nhóm em nói riêng có khối kiến thức cần thiết môn học để phục vụ cho việc làm đồ án Trong suốt q trình học tập mơn này, nhóm em nhận nhiều tài liệu kiến thức mà thầy cung cấp để phục vụ cho mơn học Tuy nhiên q trình làm đồ án khơng thể tránh khỏi thiếu sót, nhóm em mong thầy thơng cảm coi học tương lai sau Các thành viên Nhận xét giảng viên ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… Revision History Name Date Reason For Changes Trần Hiếu Nghĩa 1/04/2022 Phiên Bùi Thiện Nhân 13/04/2022 Thêm sơ đồ, business Bùi Thiện Nhân 05/05/2022 Phiên thứ Trần Hiếu Nghĩa 23/05/2022 Sửa Use Case & Interface Bùi Thiện Nhân 07/06/2022 thêm Implementation, install Version V1.1 V1.2.1 V1.2 V1.2.1 V1.2.2 MỤC LỤC Chương GIỚI THIỆU CHUNG 10 1.1 Lý chọn đề tài 10 1.2 Tổng quan chức 10 1.2.1 Đối với phần đăng nhập, đăng ký đăng xuất 10 1.2.2 Đối với người sử dụng 11 Chương CƠ SỞ LÝ THUYẾT 12 2.1 Dart 12 2.2 Flutter 12 2.3 Provider 12 2.4 Đăng nhập bên thứ 13 2.5 NodeJs 13 2.6 Heroku 13 2.7 Postman 14 Chương XÂY DỰNG HỆ THỐNG 15 3.1 Xây dựng kiến trúc hệ thống 15 3.1.1 Áp dụng kiến trúc MVVM ứng dụng 15 3.1.2 Sơ đồ use case 17 3.1.3 ERD 18 3.1.4 Cơ sở liệu 18 3.1.4.1 User 18 3.1.4.2 UserAddress 18 3.1.4.3 Store 19 3.1.4.4 Product 19 3.1.4.5 ProductTypes 19 3.1.4.6 ProductCategory 20 3.1.4.7 OrderItem 20 3.1.4.8 Order 20 3.1.4.9 Promotion 21 3.1.4.10 AdBanner 21 3.2 Thiết kế giao diện 21 3.2.1 Màn hình splash 21 3.2.2 Màn hình PopularProduct 23 3.2.3 Màn hình Shop (Search) 26 3.2.4 Màn hình Store 29 3.2.5 Màn hình Product Category 32 3.2.6 Màn hình List Filtered Product 34 3.2.7 Màn hình Product Detail 36 3.2.8 Màn hình WishList 41 3.2.9 Màn hình Order 44 3.2.10 Màn hình Authenticate 52 3.2.11 Màn hình Order History 57 3.2.12 Màn hình Settings: 61 3.2.13 Màn hình chỉnh sửa, thêm User Address 71 Chương CÀI ĐẶT 79 4.1 Môi trường phát triển 79 4.2 Các thư viện sử dụng 80 Chương KẾT LUẬN 81 5.1 Kết đạt 81 5.1.1 Về UI/UX 81 5.1.2 Ưu điểm 81 5.1.3 Nhược điểm giải pháp 82 5.1.3.1 Các vấn đề hữu 82 5.1.3.2 Giải pháp 82 5.1.4 Hướng phát triển tương lai Chương TÀI LIỆU THAM KHẢO 82 82 TÓM TẮT ĐỒ ÁN ỨNG DỤNG ADIDAS - Ngôi nhà thể thao giày sneaker, ứng dụng adidas giúp bạn dễ dàng tiếp cận sản phẩm giày sneaker, đợt mắt thời trang theo mùa, môn thể thao, trang phục thiết bị phù hợp với phong cách cá nhân Nguồn cảm hứng, câu chuyện vận động viên ưu đãi độc quyền ứng dụng tầm tay bạn Các sản phẩm adidas tốt nhất, tinh tuyển cho bạn CHỈ MỘT ỨNG DỤNG ADIDAS NHIỀU LỢI ÍCH - Cập nhật trước, sở hữu sớm Từ tin tức vận động viên, dự án hợp tác trang phục đợt mắt hype, bạn khám phá tất với ứng dụng adidas - Nắm bắt tin tức mẫu giày sneaker - Mua sắm sản phẩm mắt adidas - Giành quyền truy cập đến ưu đãi, phần thưởng, quà tặng sản phẩm đặc biệt - Nhận thông báo sản phẩm giày sneaker & trang phục adidas yêu thích bạn giảm giá - Theo dõi đơn hàng lịch sử mua sắm để trả hàng dễ dàng TÌM NHANH CỬA HÀNG - Cập nhật, thông tin cửa hàng hãng ủy quyền từ Adidas có mặt quốc gia người dùng - Thông tin địa cửa hàng tích hợp với cơng cụ tìm kiếm, đường GoogleMap ADIDAS PHONG CÁCH THỂ THAO TỰ NHIÊN - Điều chỉnh dựa sở thích bạn, ứng dụng adidas cho phép bạn dễ dàng tạo phong cách Ba Sọc Và thể thao phong cách bạn, trang phục dịng Originals từ kho tàng adidas định hình phong cách cho ngày Với dòng trang phục cho nam, nữ trẻ em, adidas đổi qua mùa Chương GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài Hiện chi nhánh Adidas cửa hàng nhượng quyền, phép phân phối, bán lẻ sản phẩm hãng Adidas xuất ngày phổ biến Vì gian hàng, cửa hàng bắt đầu phân bổ, tập trung vào tệp lượng khách hàng định, để làm bật tiêu đề chi nhánh, cửa hàng Vì vậy, việc số cửa hàng thuộc hệ thống quản lý Adidas khơng có đầy đủ tồn sản phẩm Adidas để cung cấp cho người dùng Ngoài ra, thông tin khuyến mãi, mắt sản phẩm, kiện, cộng đồng,… thông báo cửa hàng, việc quảng cáo cần đến từ nhiều hướng tiếp cận, mạng xã hội cách truyền thông hiệu Hiểu nắm bắt vấn đề đó, nhóm chúng em mang đến giải pháp cho chuỗi cửa hàng việc quản lý để cửa hàng tiếp cận người tiêu dùng dễ dàng Các thông tin cửa hàng, thương hiệu, sản phẩm đưa đến cách đầy đủ xác Người dùng khơng cần bắt buộc phải ‘có mặt’ cửa hàng để tận hưởng khơng khí adidas Ứng dụng hỗ trợ đặt hàng quản lý sản phẩm Adidas giúp người dùng đặt hàng nhà biết hoạt động cửa hàng giúp chuỗi cửa hàng tiến gần với người tiêu dùng 1.2 Tổng quan chức 1.2.1 Đối với phần đăng nhập, đăng ký đăng xuất ● Người sử dụng đăng nhập đăng ký ba phương thức sau: ● Sử dụng email password ● Thông qua google 68 69 70 3.2.13.Màn hình chỉnh sửa, thêm User Address Màn hình hiển thị địa người dùng tạo Người dùng chỉnh sửa, thêm address Địa chọn từ API state, city, district,… tùy thuộc vào quốc gia người dùng (Hiện api Việt Nam update date-to-date, quốc gia khác chưa hoàn chỉnh) 71 72 73 74 75 76 77 78 Chương CÀI ĐẶT 4.1 - Môi trường phát triển Flutter từ phiên 2.10 trở lên Dart SDK từ 2.16.2 (stable) tích hợp tương ứng với Flutter IDE: VSCode, Android Studio phiên tùy thích Android SDK từ phiên 26 trở lên Emulator chạy Android 11, API 30 trở lên NodeJS phiên 16.5.1 79 4.2 Các thư viện sử dụng 80 Chương KẾT LUẬN 5.1 Kết đạt 5.1.1 Về UI/UX - Các layout, component (widget) thiết kế phù hợp với nội dung hiển thị Đơn giản cho người hiểu biết hay không hiểu biết công nghệ ứng dụng di động, phù hợp với nhiều lứa tuổi Các thông tin quảng cáo, thông tin sản phẩm làm bật để đưa đến thông tin rõ rang xác cho người dùng Các widget hiển thị theo tính năng, validate khả xảy lỗi Theme ứng dụng thiết kế đơn sắc với màu chủ đạo trắng đen, vừa đem lại đơn giản, vừa mang tính thời thượng, bật hình ảnh sản phẩm Splash screen mở lại ứng dụng build widget, Loading widget load liệu từ backend, server làm cho ứng dụng trở nên mượt mà Tăng trải nghiệm người dùng Các input validate trước post lên server Các lỗi, false validate value return popup thông báo để hiển thị cho người dùng Tăng trải nghiệm sử dụng ứng dụng Các mục chứa nhiều thông tin chia nhỏ, đặt widget thu/mở để hiển thị Giảm việc lượng thông tin đưa đến dài dịng, khơng có chủ đề Cho phép người dùng navigate đến ứng dụng GoogleMap, Messenger, Email,… Ngồi có tích hợp webview ứng dụng để người dùng navigate đến web mà Adidas cung cấp ứng dụng 5.1.2 Ưu điểm - Ứng dụng hoàn thiện giao diện cho screen hiển thị components details Ứng dụng hỗ trợ lưu trữ cho local server Mô hình sở liệu phân chia rõ ràng, hợp lý Dữ liệu cung cấp mức vừa đầy đủ Các liệu ràng buộc theo tính cụ thể Quản lý ổn thao tác, trường hợp sử dụng người dùng với ứng dụng Ứng dụng viết theo mơ hình kiến trúc MVVM, dễ quản lý cập nhật, nâng cấp Có thể sử dụng tính cung cấp google, facebook Có thể hiển thị, chuyển hướng sang ứng dụng khác cấp quyền (browser, ggmaps, phone, email, ) 81 5.1.3 Nhược điểm giải pháp 5.1.3.1 Các vấn đề hữu - - Mặc dù viết theo mô hình MVVM tinh chỉnh số phần, chưa thể áp dụng tối đa mơ hình vào ứng dụng chưa hồn tồn hồn thiện ứng dụng viết kiến trúc MVVM toàn phần Các liệu liên quan đến người dùng hạn chế Chưa tính nâng cao, ứng dụng cơng nghệ UX q trình đặt hàng chưa hồn thiện hồn tồn Các liệu chưa setup realtime 5.1.3.2 Giải pháp - Setup môi trường xây dựng để observe realtime data Structure project theo kiến trúc hoàn chỉnh Ứng dụng công nghệ Thêm nhiều liệu để kiểm thử hiệu ứng dụng 5.1.4 Hướng phát triển tương lai - Cố gắng tích hợp search engine, machine learning để xây dựng phần recommend, build banner quảng cáo Tích hợp AR vào viewing sản phẩm Realtime Data cho phần Order, Order tracking Xây dựng ứng dụng tích hợp cho admin (quản trị viên) để CRUD sản phẩm, duyệt đơn hàng Xây dựng mục event, community cho nhóm người dùng Hồn chỉnh chức hỗ trợ, cung cấp từ Facebook Chương TÀI LIỆU THAM KHẢO - Trang chủ thức Flutter: Flutter - Build apps for any screen Trang chủ thức Dart: Dart programming language | Dart Trang chủ thức NodeJS: Node.js (nodejs.org) Web chia sẻ thư viện sử dụng xây dựng Flutter app, Dart: Dart packages (pub.dev) 82 ... mặt’ cửa hàng để tận hưởng khơng khí adidas Ứng dụng hỗ trợ đặt hàng quản lý sản phẩm Adidas giúp người dùng đặt hàng nhà biết hoạt động cửa hàng giúp chuỗi cửa hàng tiến gần với người tiêu dùng... thơng tin địa lưu ứng dụng f) Xem lịch sử đơn hàng ● Người dùng xem lịch sử đơn hàng chi tiết đơn hàng đó(bao gồm tình trạng đơn hàng) g) Liên hệ ● Người dùng mở ứng dụng cài đặt máy để liên hệ... phong cách cá nhân Nguồn cảm hứng, câu chuyện vận động viên ưu đãi độc quyền ứng dụng tầm tay bạn Các sản phẩm adidas tốt nhất, tinh tuyển cho bạn CHỈ MỘT ỨNG DỤNG ADIDAS NHIỀU LỢI ÍCH - Cập nhật