ỨNG DỤNG DECEE CHỦ đề e COMMERCE

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 ĐỀ TÀI: ỨNG DỤNG DECEE CHỦ ĐỀ E-COMMERCE GVHD: ThS.Huỳnh Tuấn Anh Sinh viên thực hiện: ● Đặng Ngọc Duy - 18520655 ● Đỗ Ngọc Cường - 18520542 TP.Hồ Chí Minh, tháng 12 năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… LỜI CẢM ƠN Nhóm em xin gửi lời cảm ơn tới thầy Huỳnh Tuấn anh tận tình trực tiếp giảng dạy nhóm chúng em, lời góp ý truyền đạt thầy góp phần ảnh hưởng lớn tới định hướng đồ án nhóm em kỳ định hướng tương lai nhóm chúng em Trong q trình thực hiện, q trình làm báo cáo, nhóm chúng em khó lịng tránh khỏi sai sót, chúng em mong thầy bỏ qua đóng góp thầy kinh nghiệm để nhóm em hoàn thiện đồ án vào lần sau Một lần em xin chân thành gửi lời cảm ơn thầy Chúng em xin chân thành cảm ơn! Nhóm nghiên cứu Tp Hồ Chí Minh, tháng 12 năm 2021 MỤC LỤC I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm Tổng quan đề tài 2.1 Bài toán thực tế 2.2 Tổng quan đề tài 2.3 Phạm vi nghiên cứu 2.4 Nội dung nghiên cứu 2.5 Kết hướng tới Công cụ sử dụng Source code 6 6 6 7 7 II CÔNG NGHỆ SỬ DỤNG Flutter Dart 1.1 Khái niệm 1.2 Tại lại chọn Flutter Dart 1.3 Kiến trúc Flutter 1.4 Một số khái niệm Flutter 1.5 Clean Architecture 1.5.1 Ưu điểm 1.5.2 Nhược điểm Hệ thống NET 2.1 Khái niệm 2.2 Tại lại chọn NET 2.3 Kiến trúc MVC NET 8 8 10 12 14 14 14 14 15 15 III XÂY DỰNG HỆ THỐNG Phân tích yêu cầu hệ thống 1.1 Xác định vấn đề 1.2 Xác định phạm vi toán 1.2.1 Vấn đề người 1.2.2 Vấn đề quản lý 1.2.3 Vấn đề mua hàng 1.3 Xác định bên liên quan 1.4 Xác định không gian địa lý hoạt động thuộc tính khơng gian 1.5 Xác định mối quan hệ vật việc khơng gian tốn: 1.5.1 Sơ đồ cấu tổ chức 16 16 16 17 17 18 18 19 19 19 19 1.5.2 Mô tả nghiệp vụ view 4+1 1.5.2.1 Use Case view 1.5.2.2 Process view 1.5.2.3 Implementation view 1.5.2.4 Deployment view 1.5.2.5 Logical view 1.6 Phạm vi kiến thức để giải toán (chuyên mơn, nghiệp vụ) 1.7 Xác định loại tốn 1.8 Tổ chức thực Thiết kế hệ thống 2.1 Mô tả kiến trúc 2.1.1 Scenarios 2.1.2 Logical views 2.1.3 Process views 2.1.4 Deployment view 2.1.5 Physical view 2.2 Các mục tiêu ràng buộc kiến trúc 2.2.1 Phía máy chủ 2.2.2 Phía khách hàng 2.2.3 Bảo mật 2.2.4 Tính bền bỉ 2.2.5 Độ tin cậy / Tính khả dụng 2.2.6 Hiệu suất 2.2.7 Khả portable tái sử dụng 2.2.8 Công cụ phát triển 2.2.9 Schedule 2.3 Use-case view 2.4 Đặc tả use-case 2.4.1 Các use-case liên quan tới người dùng 2.4.1.1 Người dùng đăng nhập 2.4.1.2 Người dùng thay đổi thông tin cá nhân 2.4.1.3 Người dùng tạo đơn hàng 2.4.1.4 Thanh toán 2.4.2 Các use-case liên quan tới Supplier 2.4.2.1 Supplier quản lý Sản phẩm 2.4.2.2 Quản lý thông tin sản phẩm 2.5 UML Diagram 2.5.1 Context Diagram 20 20 20 21 21 21 21 21 21 24 24 24 24 24 24 25 25 25 25 25 26 26 26 26 27 27 30 30 30 30 32 33 33 34 34 35 38 38 2.5.2 Sequence Diagram 2.5.2.1 Người dùng tạo đơn hàng 2.5.2.2 Người dùng toán giỏ hàng 2.5.2.3 Người dùng thêm sản phẩm 2.5.2.4 Quản lý giá thành 2.5.3 Activity Diagram 2.5.3.1 Người dùng tạo đơn hàng 2.5.3.2 Thanh tốn 2.5.3.3 Quản lý thơng tin sản phẩm 2.5.3.4 Quản lý thông tin giá thành Thiết kế sở liệu Thiết kế kiến trúc hệ thống Thiết kế giao diện 39 39 39 40 40 41 41 42 42 43 43 44 44 IV KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Hướng phát triển 50 50 54 V TÀI LIỆU THAM KHẢO 55 I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm MSSV Họ tên Email 18520542 Đỗ Ngọc Cường 18520542@gm.uit.edu.vn 18520655 Đặng Ngọc Duy 18520655@gm.uit.edu.vn Tổng quan đề tài 2.1 Bài toán thực tế Các ứng dụng Ecommerce trước khơng cịn xa lạ với Tiki, Shopee, Lazada, … Các ứng dụng thành cơng nhờ việc tối đa hóa mảng cung cấp ứng dụng 2.2 Tổng quan đề tài Nhóm đề kế hoạch phát triển ứng dụng di động để phục vụ cho việc mua sắm cho người dùng ứng dụng Decee giải cho vấn đề E-shop cung cấp dụng cụ người dùng tương tác sử dụng để bn bán Người chủ cửa hàng đưa lên sản phẩm mong muốn, người dùng phổ thơng kiếm mặt hàng mua mặt hàng Cùng với hệ thống admin hệ thống đảm bảo giá phải người dùng ln khơng bị lừa đảo, kèm theo yếu tố bảo mật đảm bảo thông tin người dùng khơng bị lộ ngồi 2.3 Phạm vi nghiên cứu Phạm vi toán bao gồm nghiệp vụ ứng dụng ứng dụng E-commerce hỗ trợ việc mua sắm trực tuyến Ứng dụng không sâu vào nghiệp vụ nhập kho, quản lý nhân viên 2.4 Nội dung nghiên cứu Các dịch vụ liên quan đến E-commerce với tính ứng dụng buôn bán hàng hóa trực tuyến Ứng dụng giúp cho chủ cửa hàng trực tuyến quản lý hàng hóa mình, đồng thời nơi cho người dùng phổ thơng mua hàng hóa với trải nghiệm tốt mua hàng online 2.5 Kết hướng tới Chủ shop: ứng dụng hỗ trợ chủ cửa hàng quản lý hàng hóa cách tiện lợi, nhanh chóng, tạo coupon để thu hút người dùng Về phía khách hàng phổ thơng: Ứng dụng hỗ trợ mua hàng trực tuyến với quy trình nhanh chóng, đơn giản, theo dõi tình trạng đơn hàng cách chi tiết, nâng cao trải nghiệm người dùng với giao diện tiện dụng dễ sử dụng Công cụ sử dụng Trong q trình xây dựng phần mềm, nhóm sử dụng phần mềm sau: ● Visual Studio IDE: IDE hỗ trợ xây dựng ứng dụng liên quan tới NET (server) ● Visual Studio Code: hỗ trợ xây dựng ứng dụng giao diện người dùng (Flutter) ● Mysql server management: hỗ trợ nhóm lưu trữ liệu thao tác sở liệu Source code Frontend: https://github.com/pmn2wodee/project_2 Backend: https://github.com/TrDayken/Project-2-School II CÔNG NGHỆ SỬ DỤNG Flutter Dart 1.1 Khái niệm Flutter Google giới thiệu người giới ứng dụng di động Là SDK Google dành cho thiết bị di động giúp developers designers xây dựng nhanh chóng ứng dụng dành cho thiết bị di động (Android, iOS) Flutter dự án mã nguồn mở giai đoạn thử nghiệm Flutter bao gồm Reactive framework công nghệ hiển thị 2D (2D rendering engine)và công cụ phát triển (development tool) Các thành phần làm việc giúp ta thiết kế, xây dựng, test, debug ứng dụng 1.2 Tại lại chọn Flutter Dart Các nhà phát triển Google nơi khác sử dụng Dart để tạo ứng dụng chất lượng cao, quan trọng cho iOS, Android web Với tính nhắm đến phát triển phía khách hàng, Dart phù hợp cho ứng dụng di động web Dart giúp bạn tạo trải nghiệm đẹp, chất lượng cao tất hình, với: ● Một ngơn ngữ tối ưu hóa cho client ● Framework mạnh mẽ ● Công cụ linh hoạt 1.3 Kiến trúc Flutter Flutter thiết kế hệ thống nhiều lớp, mở rộng Nó tồn dạng loạt thư viện độc lập mà thư viện phụ thuộc vào lớp bên Khơng có lớp có quyền truy cập đặc quyền vào lớp bên phần mức khung thiết kế để trở thành tùy chọn thay ❖ Embedder Platform-specific: Đối với hệ điều hành bản, ứng dụng Flutter đóng gói giống ứng dụng gốc khác Embedder Platform-specific cung cấp điểm nhập; phối hợp với hệ điều hành để truy cập vào dịch vụ hiển thị bề mặt, khả truy cập đầu vào; quản lý vòng lặp kiện tin nhắn Trình nhúng viết ngơn ngữ phù hợp với tảng: Java C ++ cho Android, Objective-C / Objective-C ++ cho iOS macOS, C ++ cho Windows Linux Sử dụng công cụ nhúng, mã Flutter tích hợp vào ứng dụng có dạng mơ-đun mã toàn nội dung ứng dụng Flutter bao gồm số trình nhúng cho tảng mục tiêu chung ❖ Flutter Engine: 2.5.3 Activity Diagram 2.5.3.1 Người dùng tạo đơn hàng 41 2.5.3.2 Thanh toán 2.5.3.3 Quản lý thông tin sản phẩm 42 2.5.3.4 Quản lý thông tin giá thành Thiết kế sở liệu Quan hệ sở liệu 43 Thiết kế kiến trúc hệ thống Kiến trúc hệ thống Frontend giao tiếp trực tiếp với backend api thông qua dịch vụ api client Cùng với hệ thống bloc tạo linh động cho việc cập nhật data hứng liệu Hệ thống sử dụng NET nơi cung cấp dịch vụ api Ở API đổ qua luồng balancer NET gọi qua controller api tương ứng, từ controller gọi tới service sử dụng model để giao tiếp với database Sau trình backend gửi gói tin mà bên frontend yêu cầu Thiết kế giao diện Link Figma 44 Onboarding Register 45 Login Home 46 Detail (1) Detail (2) 47 Collection DrawerNavigation 48 ListPage Cart 49 IV KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt 50 51 52 53 Nhóm xây dựng phát triển ứng dụng phù hợp cho việc giải tốn e-commerce cịn có nhiều hạn chế cịn vài chỗ có lỗi Nhóm hiểu quy trình nghiệp vụ để củng cố cho dự án sau phát triển thêm đồ án Hướng phát triển Trong tương lai nhóm cố gắng nghiên cứu công nghệ web frontend khác (React JS) để có hội đưa ứng dụng lên tảng web tiếp cận tập người dùng lớn mở rộng kinh doanh Đồng thời đưa giải pháp để mở rộng server chịu tải nhiều server kèm theo giải pháp tốn online cho dịch vụ để đề tài gần gũi với ứng dụng E-commerce thực tế 54 V TÀI LIỆU THAM KHẢO [1] https://tiki.vn/ ( trang buôn bán điện tử tiki) [2] https://dotnet.microsoft.com/en-us/download/dotnet-framework ( trang tài liệu NET) [3] https://flutter.dev/ ( trang tài liệu flutter) [4] https://viblo.asia/ 55 ... phải override lại lớp build để render widget Class main extends Statelesswidget @override Widget build (buildcontext context) Stateless widget tự thay đổi widget cha thay đổi stateless widget khởi... dụng stateful Widget StateLess Widget Stateless Widget loại widget tĩnh khơng thể tự thay đổi mà hiển thị sau render 11 Để tạo Stateless Widget cần phải kế thừa từ lớp StateLess widget flutter... state cần render phải override phương thức build state với cú pháp @override Widget build(buildcontext context) Và cuối để đổi state widget cập nhật thơng qua phương thức setState() widget Các