XÂY DỰNG ỨNG DỤNG BÁN HÀNG TRÊN nền TẢNG DI ĐỘNG

ĐẠ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 XÂY DỰNG ỨNG DỤNG BÁN HÀNG TRÊN NỀN TẢNG DI ĐỢNG Sinh viên thực hiện: Châu Q́c Thắng - 18521385 Ngô Hiếu Tín – 18521498 Giảng viên hướng dẫn: ThS Huỳnh Tuấn Anh TP HỒ CHÍ MINH, 2021 MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1.Giới thiệu đề tài Thời đại công nghệ số 4.0, với phát triển vũ bão Internet, xu hướng kinh doanh trực tuyến hay bán hàng online đem lại hiệu kinh tế cho nhiều ngành nghề kinh doanh Việt Nam Các ứng dụng TMDT tảng di động ngày phổ biến nhiều người dùng có thể kể đến Shopee, Tiki, … mang lại tiện lợi nhanh chóng cho người mua hàng Ứng dụng hàng bán laptop đời để nắm bắt xu đó mua hàng toán trực tuyến 1.2.Lý chọn đề tài Nắm bắt yêu cầu nhóm lên kế hoạch xây dựng một ứng dụng quản lý cửa hàng ứng dụng bán laptop, trưng bày sản phẩm nhằm đáp ứng nghiệp vụ cửa hàng, đáp ứng nhu cầu tiện lợi cho khách hàng, khách hàng có thể xem mặt hàng trước ứng dụng, xem đánh giá, review sau đó định tiến hành đặt hàng toán trực tiếp 1.3.Mục tiêu Xây dựng một ứng dụng mua bán laptop trực tuyến với chức sau đây: - - Về phía người dùng: + Tìm kiếm, lọc sản phẩm + Xem đánh giá, chi tiết sản phẩm + Đọc viết giới thiệu sản phẩm + Đặt hàng toán ứng dụng Về phía chủ cửa hàng: + Quản lí sản phẩm + Quản lí xuất nhập kho + Quản lí khuyến + Quản lí đơn hàng + Quản lí nhân viên phân quyền + Quản lí tài khoản người dùng 1.4.Phương pháp thực hiện Thực đề tài theo bước: - Phân tích đề tài - Tham khảo ứng dụng tương tự có thị trường - Nghiên cứu công nghệ để áp dụng - Phát triển ứng dụng - Đưa cho một số người dùng sử dụng thử để lấy ý kiến phản hồi - Kiểm thử hồn thiện ứng dụng Những cơng nghệ được sử dụng: o Front-end: ● Flutter o Back-end: ● NodeJS/NestJS ● MongoDB 1.5.Ý nghĩa thực tiễn Tạo một ứng dụng lớn dành cho chuỗi cửa hàng dịch vụ bán lẻ phụ kiện, máy tính – laptop , người dùng có thể đặt hàng online thông qua ứng dụng 1.6 Kết quả dự kiến o Nắm được kiến thức Flutter, NestJS o Hiểu rõ khái niệm, cách thức hoạt động Repository Pattern o Áp dụng tất kiến thức nghiệp vụ tìm hiểu được xây dựng ứng dụng thương mại điện tử với tính chính: ● Xem sản phẩm, chi tiết sản phẩm ● Thêm sản phẩm vào giỏ hàng ● Đặt hàng ● Quản lý cửa hàng ● Báo cáo thống kê CHƯƠNG TÌM HIỂU CÁC CƠNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 2.1 Framework Nestjs 2.1.1 Giới thiệu Hình 1: Biểu tượng NestJS Nest (NestJS) một framework để xây dựng ứng dụng server-side Node.js hiệu quả, dể mở rộng Nó sử dụng ngữ bậc cao javascrip TypeScript (nhưng cho phép nhà phát triển sử dụng JavaScript túy) kết hợp tính chất OOP (Lập trình hướng đối tượng), FP (Lập trình chức năng) FRP (Lập trình phản ứng chức năng) Về chất Nest sử dụng framework máy chủ HTTP mạnh mẽ Express (mặc định) có thể tùy chọn cấu hình để sử dụng Fastify Nest cung cấp một tầng trừu tượng framework Node.js phổ biến (Express / Fastify), hỗ trợ API họ trực tiếp cho nhà phát triển Điều cho phép nhà phát triển tự sử dụng vô số mô-đun bên thứ ba có sẵn cho tảng Có thể hiểu tất package mà cài thêm sử dụng Express / Fastify có thể tích hợp dể dàng vào Nestjs 2.1.2 Triết lý Trong năm gần đây, nhờ có Node.js, JavaScript trở thành ngôn ngữ chung cho Frontend Backend Điều tạo dự án tuyệt vời Angular, React Vue, giúp cải thiện suất nhà phát triển cho phép tạo ứng dụng frontend nhanh, có thể mở rộng Tuy nhiên, có nhiều thư viện, công cụ tuyệt vời tồn cho Node, không có thư viện giải hiệu vấn đề chính kiến trúc Có hiểu chưa có mô hình phát triển dự án backend cố định như RubyOnRails Nest cung cấp một kiến trúc ứng dụng vượt trội cho phép nhà phát triển nhóm tạo ứng dụng có thể kiểm tra cao, có thể mở rộng dễ bảo trì NestJS tương thích với Typescript Javascript thuần, default Typescript Design Pattern xuyên suốt NestJS Dependency Injection, cú pháp NestJS giống Angular Nên bạn có kiến thức Angular thì việc bắt đầu với NesJS dễ dàng NestJS có nhiều module hỗ trợ bạn, từ việc hot reload, logger GraphQL, Websocket cqrs pattern, microservices, Bạn cần NestJS để làm tất mọi thứ Module microservices NestJS hỗ trợ đủ loại kết nối: RabbitMQ, gRPC, Kafka, Redis, một điều mình thích, mình cần tập trung vào code cho phần business, infra thì NestJS implement sẵn việc dùng 2.2 MongoDB 2.2.1 Giới thiệu Hình 7: Biểu tượng MongoDB MongoDB một hệ quản trị sở liệu mã nguồn mở, CSDL thuộc NoSql được hàng triệu người sử dụng MongoDB một database hướng tài liệu (document), liệu được lưu trữ document kiểu JSON thay vì dạng bảng CSDL quan hệ nên truy vấn nhanh Với CSDL quan hệ có khái niệm bảng, sở liệu quan hệ (như MySQL hay SQL Server ) sử dụng bảng để lưu liệu thì với MongoDB dùng khái niệm collection thay vì bảng So với RDBMS thì MongoDB collection ứng với table, document ứng với row , MongoDB dùng document thay cho row RDBMS Các collection MongoDB được cấu trúc linh hoạt, cho phép liệu lưu trữ không cần tuân theo một cấu trúc định Thông tin liên quan được lưu trữ để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB 2.2.2 Ứng dụng vào đề tài Sử dụng MongoDB làm hệ quản trị CSDL nhiệm vụ lữu trữ thông tin 2.3 Repository Pattern 2.3.1 Giới thiệu Thông thường thì phần truy xuất, giao tiếp với database năm rải rác code, bạn muốn thực một thao tác lên database thì phải tìm code tìm thuộc tính bảng để xử lý Điều gây lãng phí thời gian công sức nhiều Với Repository design pattern, thì việc thay đổi code không ảnh hưởng nhiều công sức chúng chỉnh sửa Một vài lí ta nên sử dụng Repository Pattern: - Một để thay đổi quyền truy cập liệu xử lý liệu - Một người chịu trách nhiệm cho việc ánh xạ bảng thành đối tượng - Tăng tính bảo mật rõ ràng ràng buộc cho code - Rất dễ dàng để thay một Repository với một implementation giả cho việc testing, vì vậy bạn không cần chuẩn bị một sở liệu có sẵn Hình 9: Mô hình Repository Pattern 2.3.2 Ứng dụng vào đề tài Repository Pattern lớp trung gian tầng Business Logic Data Access, giúp cho việc truy cập liệu chặt chẽ bảo mật Repository đóng vai một lớp kết nối tầng Business Model ứng dụng 2.4 Flutter 2.4.1 Giới thiệu Hình 10: Biểu tượng Flutter Có nhiều framework hỗ trợ phát triển một ứng dụng mobile Android cung cấp một framework dựa ngôn ngữ lập trình Java Kotlin iOS thì cung cấp framework dựa Objective-C / Swift Tuy nhiên hầu hết ứng dụng nay, hỗ trợ tảng Android iOS, đó lúc phát triển dự án khác với framework khác một công việc phức tạp lãng phí thời gian công sức Do đó người ta phát triển framework lập trình đa tảng để giải vấn đề Một framework phổ biến React Native được phát triển bới Facebook được sử dụng rộng rãi Tuy nhiên React Native thông qua API framework gốc Android hay iOS đó bị hạn chế tốc độ Như một phát triển tương lai, Flutter được phát triển bới chính Google, đơn vị sở hữu Android một đối trọng trực tiếp với React Native Thay vì gọi API framework gốc, Flutter tạo giao diện trực tiếp từ API hệ điều hành Nhờ đó ứng dụng chạy nhanh hơn, mượt mà đẹp Flutter cung cấp nhiều widgets (UI) thành phần đồ hoạ được thiết kế riêng Những đối tượng đồ hoạ được tối ưu phù hợp với môi trường mobile dễ dàng việc thiết kế HTML Cụ thể, ứng dụng Flutter sử dụng widget riêng Flutter widgets cung cấp animations (hiệu ứng) gestures (thao tác) riêng Ứng dụng được phát triển dựa logic reactive programming Mỗi Widget có nhiều trạng thái Bằng cách thay đổi trạng thái widget, Flutter tự động (reactive programming) so sánh trạng thái widget (cũ mới) để tạo thay đổi cần thiết thay vì khởi tạo lại đối tượng 2.4.2 Ứng dụng vào đề tài Sử dụng Flutter để xây dựng ứng dụng di động cho người dùng, hoạt động tảng Android iOS 2.5 Getx state management 2.5.1 Giới thiệu Theo Flutter, State thông tin có thể được đọc một cách đồng bộ Widget được xây dựng có thể thay đởi suốt vịng đời Widget Đối tượng State được tạo Flutter framework Để thay đổi Widget, bạn cần cập nhật trạng thái đối tượng hàm setState(), hàm nằm Stateful Widget Hàm setState() cài đặt thuộc tính đối tượng State cập nhật giao diện người dùng Mặc dù Flutter cung cấp phương thức widget cho việc quản lí state (InheritedWidget) một dự án lớn thì việc áp dụng cách quản lí state rắc rối phức tạp, code có nhiều boilerplate Vì vậy để giải việc này, cộng đồng sử dụng Flutter cho đời nhiều thư viện quản lí state khác Provider, BloC, Riverpod, thư viện phổ biến dễ sử dụng Getx Ngồi khả quản lí state, Getx cịn cung cấp API khác cho việc quản lí route (navigation), quản lí dependency Sử dụng Observable design pattern, Getx giúp Flutter chạy nhanh hơn, lắng nghe thay đổi giá trị Widget rebuild lại widget đó 2.5.2 Ứng dụng vào đề tài Sử dụng Getx để quản lí state cho ứng dụng, giảm thiểu số lượng boilerplate code giúp ứng dụng hoạt động mượt mà 2.6 Firebase Authentication 10 5.2.2 Màn hình trang chủ/bài viết sản phẩm 65 5.2.3 Màn hình hồ sơ cá nhân 66 5.2.4 Màn hình chi tiết sản phẩm 67 5.2.5 Màn hình giỏ hàng tốn 68 69 70 5.2.6 Màn hình đăng nhập trang admin 5.2.7 Màn hình trang chủ admin 71 5.2.8 Quản lý người dùng 5.2.9 Chỉnh sửa người dùng 72 5.2.10 Tạo người dùng 5.2.11 Quản lý nhân viên 73 5.2.12 Quản lý sản phẩm 74 5.2.13 Thêm sản phẩm 5.2.14 Chỉnh sửa sản phẩm 75 5.2.15 Quản lý đơn hàng 5.2.16 Chỉnh sửa đơn hàng 76 5.3 Thiết kế kiến trúc CHƯƠNG Tổng kết 6.1 Kết quả đạt Về mặt kỹ thuật công nghệ: - Đề tài nghiên cứu Flutter, NestJS, sử dụng MongoDB làm hệ quản trị sở liệu 77 - Hiểu được cách hoạt động kiến trúc MVVM ý nghĩa Repository Design Pattern ứng dụng vào đề tài - Nâng cao kỹ lập trình, giải vấn đề Về mặt sản phẩm: - Xây dựng thành công hệ thống quản lí ứng dụng bán latop - Giao diện đơn giản cho khách hàng đơn giản, dễ sử dụng với đầy đủ thông tin - Giao diện cho người quản trị trực quan, dễ tiếp cận sử dụng - Tạo ứng dụng hoàn chỉnh với nhiều tính hữu ích 6.2Thuận lợi khó khăn 6.2.1 Thuận lợi 6.2.2 Khó khăn 6.3 Hướng phát triển Cải tiến giao diện, đem lại thoải mái cho người dùng Bổ sung nhiều tính như: Gợi ý sản phẩm Chatbot hỗ trợ đặt hàng Cải thiện thêm nhiều tác vụ cho Khách hàng 78 TÀI LIỆU THAM KHẢO Flutter Firebase 79 ... khảo ứng dụng tương tự có thị trường - Nghiên cứu công nghệ để áp dụng - Phát triển ứng dụng - Đưa cho một số người dùng sử dụng thử để lấy ý kiến phản hồi - Kiểm thử hồn thiện ứng dụng. .. Nắm bắt yêu cầu nhóm lên kế hoạch xây dựng một ứng dụng quản lý cửa hàng ứng dụng bán laptop, trưng bày sản phẩm nhằm đáp ứng nghiệp vụ cửa hàng, đáp ứng nhu cầu tiện lợi cho khách hàng,... kinh doanh Việt Nam Các ứng dụng TMDT tảng di động ngày phổ biến nhiều người dùng có thể kể đến Shopee, Tiki, … mang lại tiện lợi nhanh chóng cho người mua hàng Ứng dụng hàng bán laptop