đồ án ứng dụng nestjs và flutter xây dựng ứng dụng e shoppingcart cho thương mại điện tử bán quần áo

GIỚI THIỆU TỔNG QUAN

Thông tin người thực hiện

20522122 Nguyễn Thái Tuấn 20522122@gm.uit.edu.vn

20521366 Mai Phạm Quốc Hưng 20521366@gm.uit.edu.vn

Bảng 1 1 Thông tin người thực hiện

Tổng quan đề tài

Trong những năm gần đây, thương mại điện tử dần trở thành một xu thế, hay nói đúng hơn là một “lẽ thường”, một sự hiện diện rất thân thuộc với cuộc sống hiện đại Mỗi một cơ sở kinh doanh mở ra thì đều gắn mình với ít nhất một nền tảng thương mại điện tử: cơ sở cung cấp các mặt hàng tiêu dùng thì mở cửa hàng trên Shopee, Lazada; cung cấp thức ăn đồ uống thì có mặt trên Grab Food; một số thì chọn TikTok Shop để bắt kịp xu hướng

Riêng đối với các nhãn hàng thời trang như H&M hay Uniqlo thì thường lựa chọn thành lập các cửa hàng bán lẻ kết hợp với xây dựng kênh bán hàng online gồm website và ứng dụng di động thay vì tham gia vào một sàn thương mại điện tử có sẫn Lý do có lẽ là vì các nhãn hàng trên đã có tệp khách hàng riêng và việc xây dựng một hệ thống E-Commerce của riêng họ giúp tránh bị phụ thuộc không cần thiết vào các sàn thương mại, giúp giảm chi phí, tăng lợi nhuận, cũng như cung cấp những tính năng, lợi ích, khuyến mãi riêng cho khách hàng của họ Đồng thời, với sự bùng nổ của công nghệ (AI, AR, VR,…) trong những năm gần đây, việc có một nền tảng thương mại điện tử riêng là cần thiết để nhãn hàng có thể phát triển những tính năng mới dựa trên những công nghệ trên để thu hút khách hàng về cho mình

Như vậy, một hệ thống E-commerce được thiết kế và xây dựng riêng cho một hãng thời trang thực chất không phải là bài toán mới nhưng cũng không hề lỗi thời, mà trái lại còn là một bài toán rất thiết thực với nhiều tiềm năng cho tương lai.

Vì những lí do trên, nhóm quyết định chọn đề tài “Ứng dụng NestJS và Flutter xây dựng ứng dụng E-ShoppingCart cho thương mại điện tử bán quần áo” cho đồ án của mình Nhóm cho rằng để tài này là phù hợp trong việc giúp nhóm hệ thống hóa những kiến thức và kĩ năng mình đã thu thập được thành một nền tảng vững chắc cho việc giải quyết các bài toán thực tế trong kỹ thuật phần mềm.

Trong đồ án lần này, nhóm sẽ tập trung nghiên cứu về các tính năng cần có đối với ứng dụng thương mại điện tử bán quần áo cho người dùng cuối cũng như cho quản lý, nhân viên thuộc nhãn hãng Đồng thời nhóm cũng nghiên cứu các công nghệ cần thiết để thực hiện các tính năng ấy ở phía Front-end (cụ thể là trong lập trình ứng dụng mobile), Back-end, Database, và Deployment.

Nhóm sẽ tiến hành nghiên cứu các tính năng cần có cho ứng dụng của mình bằng cách tham khảo các ứng dụng hiện nay trên thị trường như Uniqlo, H&M (đối với ứng dụng cho người dùng cuối) và các nền tảng quản lý thương mại điện tử như Saleor (đối với ứng dụng cho nhân viên của nhãn hàng) Đồng thời, nhóm đi vào nghiên cứu cách thiết kế luồng chạy của hệ thống để thực hiện từng tính năng trên, cũng như các công cụ và cách cài đặt, xử lý bằng các công nghệ mà nhóm sử dụng như Flutter, NestJS, Flask…

Về kết quả, nhóm mong muốn có được một hệ thống tương đối hoàn chỉnh với các thành phần cần thiết của một hệ thống thương mại điện tử Đồng thời, nhóm hi vọng gặt hái được cho mình nhiều kiến thức ở khía cạnh xây dựng hệ thống cũng như có được một góc nhìn tổng thể đối với các bài toán trong kỹ thuật phần mềm Nhóm cũng mong muốn sau đồ án này, kỹ năng của mỗi thành viên trong lập trình, sử dụng các nền tảng, dịch vụ trong kỹ thuật phần mềm, sử dụng các công cụ hỗ trợ nói chung,cũng như đối với các công nghệ sở trường của mình nói riêng cũng được cải thiện và trở nên vững vàng.

Công cụ sử dụng

Trong quá trình xây dựng hệ thống, nhóm đã sử dụng phần mềm và công cụ sau:

 Visual Studio Code: IDE hỗ trợ xây dựng ứng dụng

 Postman: Hỗ trợ kiểm thử các API và xem Postman như là một người dùng cuối.

 PgAdmin4: là một công cụ quản lý CSDL mã nguồn mở được phát triển để quản lý và tương tác với CSDL PostgreSQL pgAdmin4 cung cấp một giao diện đồ họa dễ sử dụng để quản lý các CSDL PostgreSQL.

 Docker: Công cụ đóng gói các stack của ứng dụng.

 Miniconda3: Phiên bản nhỏ gọn hơn của Anaconda – Nền tảng quản lý package và môi trường ảo cho Python chuyên dụng cho việc phát triển các phần mềm Học máy và Khoa học Dữ liệu.

 Mermaid: Công cụ chuyên dụng cho việc vẽ các sơ đồ, bảng biểu bằng cách render các đoạn text Markdown.

 StarUML: Công cụ chuyên dụng cho việc vẽ các sơ đồ UML.

 Notion: Quản lý công việc, Ghi chép thông tin, thảo luận.

KIẾN THỨC NỀN TẢNG

Flutter

Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và Android trong khoảng thời gian ngắn Flutter hoạt động với những code sẵn có được sử dụng bởi các lập trình viên, các tổ chức Ngày càng phát triển, ngày nay Flutter còn có thể xây dựng các ứng dụng có thể hoạt động trên cả nền tảng nhúng và web một cách nhanh chóng Flutter hoàn toàn miễn phí và là mã nguồn mở nên ngày càng được tin dung bởi các doanh nghiệp và lập trình viên trên toàn thế giới, tạo nên một cộng đồng phát triển đi cùng với hệ sinh thái hỗ trợ framework tốt, hứa hẹn sẽ là một trong những framework được ưu tiên lựa chọn bởi lập trình viên di động trong tương lai gần

2.1.2 Tính năng nổi bật của Flutter

 Flutter là một cross platform framework, sử dụng ngôn ngữ lập trình Dart đơn giản, dễ học.

 Hỗ trợ phát triển ứng dụng di động nhanh chóng.

 Giao diện người dùng đẹp, có thể biến đổi linh hoạt.

 Flutter hỗ trợ cho nhiều widget khác nhau.

 Trên nhiều nền tảng có thể thể hiện nhiều UI khác nhau.

 Hiệu năng của ứng dụng cao, đáp ứng nhu cầu của người dùng.

 Flutter là bộ Open-Source SDK nên cộng đồng Developer có thể cùng tham gia để phát triển ứng dụng.

 Giao diện đẹp, sắc nét, cung cấp nhiều widget với nhiều sự lựa chọn.

 Viết code ứng dụng nhanh hơn với hỗ trợ Hot Reload trong quá trình viết, có thể cập nhật ứng dụng rất nhanh khi source code của bạn thay đổi mà không cần build lại.

 Trải nghiệm Native hay độ mượt ứng dụng tốt như Native nhờ có ngôn ngữ Dart hỗ trợ AOT, compile nhanh hơn, cải thiện startup time và performance.

 Code một lần chạy được trên cả hai hệ điều hành iOS và Android với cùng một Database.

 Cộng đồng hỗ trợ và thư viện hạn chế hơn so với Native SDK do Flutter mới được phát hành vào năm 2017 nên cộng đồng của nó chưa mở rộng bằng các nền tảng Native.

 Kích thước file lớn do cấu trúc của Flutter SDK có chứa các thư viện xử lý trên cả iOS và Android.

2.1.4 Pattern áp dụng trong dự án (Domain Driven Design)

Hình 2 2 Cấu trúc phân lớp trong D.D.D Được phát triển bởi Eric Evans vào những năm 2000 và được xuất bản trong cuốn sách

"Domain-Driven Design: Tackling Complexity in the Heart of Software" [2] DDD được sinh ra để giải quyết những thách thức trong việc phát triển các ứng dụng phức tạp, đặc biệt là những ứng dụng có yêu cầu về kỹ thuật cao và khả năng mở rộng.

Khi phát triển các dự án có độ phức tạp cao, lập trình viên và các chuyên gia về lĩnh vực của dự án có thể gặp những khó khăn trong việc trao đổi và đọc kiến trúc dự án.

Do đó, D.D.D đề xuất việc lấy domain model làm tiêu chuẩn, hay được hiểu là lấy kiến trúc chức năng dự án làm tiêu chuẩn Sẽ đồng nhất trong cách gọi tên, đặt tên giữa thực tế và việc code; đưa ngôn ngữ lập trình gần nhất với cách hiểu ngoài thực tế.

Trong D.D.D, Entity được xem như một Object Model nhưng có thể thay đổi một vài thứ (kiểu dữ liệu, biến, hàm…) để có thể phù hợp với giao diện và logic sử dụng ở ứng dụng Không giống với Object Model sẽ là phản ánh hoàn toàn lại những giá trị (kiểu dữ liệu, tên biến, giá trị…) nhận từ api, bộ nhớ cache Các đối tượng cũng được yêu cầu tuân thủ quy tắc bất biến - Immutable, không được sửa đổi các giá trị trong một đối tượng, thay vào đó là tạo ra đối tượng mới thông qua hàm copyWith (…) với một vài tham số đầu vào tương ứng giá trị cần thay đổi.

Hình 2.3 Thực tế cấu trúc dự án đối với Driven D

NestJS

NestJS là một framework Node.js hiện đại và mạnh mẽ, được xây dựng trên cơ sở TypeScript và lấy cảm hứng từ Angular Với cấu trúc modular và sự linh hoạt, NestJS giúp xây dựng ứng dụng server-side hiệu quả và dễ bảo trì Trong báo cáo này, em sẽ tìm hiểu về các khái niệm cơ bản, các thành phần chính và ưu điểm của NestJS.

2.2.2 Các khái niệm cơ bản

NestJS sử dụng khái niệm mô-đun để tổ chức mã nguồn Một ứng dụng NestJS có thể bao gồm nhiều mô-đun, giúp tạo ra một cấu trúc rõ ràng và dễ quản lý.

Hình 2 3 NestJS tổ chức theo module

Mỗi mô-đun tập trung vào một phần cụ thể của ứng dụng, đóng gói controllers, providers và các thành phần khác Điều này tạo ra một cấu trúc rõ ràng, giúp quản lý mã nguồn dễ dàng và tăng tính tái sử dụng Mô-đun còn cho phép thiết lập các dependency và liên kết chúng, giúp xây dựng ứng dụng với sự tổ chức và mở rộng dễ dàng.

Controllers là thành phần xử lý các yêu cầu đến từ client Chúng sử dụng decorator để đánh dấu và định nghĩa các endpoint.

Hình 2 4 Minh họa về Controller

Providers là các thành phần chịu trách nhiệm xử lý business logic Chúng có thể là service, repository hoặc bất kỳ đối tượng nào khác cần thiết.

Hình 2 6 Đoạn code sử dụng prodvider

NestJS hỗ trợ middleware, giúp thực hiện các chức năng trung gian trước khi yêu cầu đến controller.

Hình 2 8 Đoạn code minh họa sử dụng middeware

Interceptors là các đoạn mã thực hiện trước hoặc sau khi controller xử lý yêu cầu.Chúng có thể được sử dụng để ghi log, thêm xác thực, hay thậm chí biến đổi dữ liệu trả về.

Hình 2 9 Hình ảnh minh họa Interceptor

Trong đồ án lần này, chúng em sử dụng Interceptor để biến đổi tất cả các dữ liệu trả về thành một dạng đồng nhất.

 Scalability (Khả năng mở rộng): Nhờ vào cấu trúc modular, NestJS dễ mở rộng khi ứng dụng phát triển.

 TypeScript Support (Hỗ trợ TypeScript): Sử dụng TypeScript giúp phát hiện lỗi sớm và cung cấp IntelliSense, tăng khả năng bảo trì mã nguồn.

 Angular-like Structure (Cấu trúc giống Angular): Đối với những người làm quen với Angular, việc sử dụng NestJS sẽ trở nên dễ dàng hơn.

 Built-in Testing Utilities (Tiện ích kiểm thử tích hợp): NestJS cung cấp các công cụ kiểm thử tích hợp, giúp đảm bảo chất lượng mã nguồn.

Trong báo cáo này, chúng em đã xem xét những khái niệm cơ bản của NestJS và tìm hiểu về cách nó giúp xây dựng ứng dụng Node.js hiệu quả Với sự linh hoạt, khả năng mở rộng và hỗ trợ TypeScript, NestJS là một lựa chọn mạnh mẽ cho việc phát triển các dự án web server-side Đối với người phát triển, việc nắm vững NestJS mang lại sự tiện lợi và hiệu quả trong quá trình phát triển ứng dụng.

Amazon Web Service

Amazon Web Services (AWS) là một nền tảng đám mây hàng đầu, cung cấp các dịch vụ đa dạng giúp phát triển, triển khai và quản lý ứng dụng một cách linh hoạt và hiệu quả Trong báo cáo này, chúng ta sẽ tập trung vào một số dịch vụ quan trọng như Amazon S3, ECS (Elastic Container Service), ECR (Elastic Container Registry), CodeBuild và CodePipeline.

Amazon S3 là dịch vụ lưu trữ đám mây với khả năng mở rộng không giới hạn Sử dụng S3, người dùng có thể lưu trữ và truy xuất dữ liệu từ bất kỳ đâu trên thế giới, tạo nền tảng lý tưởng cho lưu trữ dữ liệu, ảnh, video và sao lưu

2.3.2.2 Amazon ECS (Elastic Container Service)

ECS là dịch vụ quản lý và triển khai các container Docker trên AWS Với ECS, người phát triển có thể dễ dàng xây dựng, chạy và quản lý ứng dụng containerized một cách linh hoạt và hiệu quả.

2.3.2.3 Amazon ECR (Elastic Container Registry)

ECR cung cấp một registry quản lý container cho việc lưu trữ, quản lý và triển khai hình ảnh Docker Nó tích hợp chặt chẽ với ECS, tạo ra một luồng làm việc liền mạch từ việc xây dựng container đến triển khai chúng.

CodeBuild là dịch vụ xây dựng tự động giúp tự động hóa quy trình xây dựng mã nguồn từ mã nguồn (source) đến gói triển khai có thể triển khai trên nền tảng AWS hoặc các môi trường khác.

CodePipeline là dịch vụ liên tục triển khai và triển khai tự động Nó cho phép tạo ra các ống dẫn (pipelines) để tự động hóa quy trình tích hợp mã nguồn, kiểm thử và triển khai ứng dụng.

2.3.3 Ưu điểm và ứng dụng thực tế

 Linh họạt và Mở Rộng: AWS cung cấp một hệ sinh thái linh hoạt và có khả năng mở rộng, phù hợp với các ứng dụng từ nhỏ đến lớn.

 Tiết Kiệm Chi Phí: Dịch vụ trả theo sử dụng giúp tối ưu chi phí, chỉ trả tiền cho những tài nguyên thực sự sử dụng.

 Bảo Mật và Tuân Thủ: AWS đảm bảo môi trường đám mây an toàn và tuân thủ các tiêu chuẩn bảo mật hàng đầu.

 Tích Hợp Liền Mạch: Các dịch vụ như S3, ECS, ECR, CodeBuild và

CodePipeline tích hợp chặt chẽ, tạo ra một quy trình làm việc hiệu quả và liền mạch.

Tổng kết, kiến thức về nền tảng AWS, đặc biệt là các dịch vụ như S3, ECS, ECR,CodeBuild và CodePipeline, là quan trọng để xây dựng và quản lý các ứng dụng đám mây một cách hiệu quả Với sự linh hoạt, mở rộng và tích hợp sâu rộng, AWS là lựa chọn hàng đầu cho việc phát triển và triển khai ứng dụng trong môi trường đám mây.

Flask

Flask là một “microframework” cho việc xây dựng các ứng dụng web bằng Python So với các framework khác thì Flask cực kỳ gọn nhẹ vì chỉ bao gồm các thành phần cốt lõi nhất cho việc xây dựng một ứng dụng web Như vậy Flask sẽ không bao gồm các thành phần thường thấy trong các framework khác như lớp abstraction để giao tiếp với Database, ORM.

2.4.2 Các thông tin quan trọng

Flask được gọi là một microframework vì nó cực kỳ nhẹ, chỉ cung cấp các công cụ cơ bản và cần thiết để xây dựng ứng dụng web cơ bản, và gần như không có bất kỳ một dependency nào đến một thư viện hay tool bên ngoài 2 dependency duy nhất của Flask là plugin Werkzeug (một thư viện utility WSGI) và jinja2 (một template engine).

2.4.2.2 Flask cực kỳ linh hoạt

Flask có đưa ra gợi ý nhưng không gò bó lập trình viên phải sử dụng một kiến trúc hay thư viện cụ thể nào Đồng thời, cộng đồng của Flask cũng cực kỳ lớn mạnh và lập trình viên có thể tìm được rất nhiều extension để cài đặt thêm vào và sử dụng với Flask.

2.4.2.3 Flask là web framework phổ biến nhất cho Python

Theo khảo sát của Stack Overflow năm 2023, thì Flask vẫn là web framework phổ biến nhất trong số các web framework cho Python, phổ biến hơn Django và FastAPI.

2.4.3 Các tính năng chính của Flask

- Môi trường development với debugger.

- Xử lý các RESTFUL requests.

- Sử dụng các Jinja template để xây dựng ứng dụng web.

- Hỗ trợ bảo mật cookie.

- Tương thích với Google App Engine.

- Có nhiều Extensions để thêm vào Flask nhằm thêm tính năng.

2.4.4 Ưu điểm và Nhược điểm

 Linh hoạt: Flask chỉ cung cấp những phần cốt lõi nhất cho lập trình ứng dụng web nên không bị phụ thuộc vào thư viện cụ thể nào Lập trình viên hoàn toàn có thể sử dụng Flask chung với nhiều thư viện, công cụ tùy biến khác nhau

 Đơn giản và dễ học: Flask tương đối dễ học và dễ sử dụng vì framework gần như không có dependencies nào, và tài liệu chính cho Flask thì cực kỳ đầy đủ.

 Dễ mở rộng: Dù Flask chỉ cung cấp các phần cốt lỗi, vẫn có rất nhiều extension được cộng đồng Flask cung cấp để lập trình viên mở rộng ứng dụng của họ

 Ít tính năng mặc định: Điểm mạnh cũng là điểm yếu của Flask, vì Flask thiếu nhiều tính năng mặc định mà các framework khác có, lập trình viên cũng phải tự đi tìm các extension và thư viện ngoài để bù vào

 Không phù hợp với hệ thống lớn, phức tạp: Vì Flask chỉ là một microframework, việc sử dụng Flask trong một hệ thống sẽ đòi hỏi phía lập trình viên phải tự config và tinh chỉnh rất nhiều

Flask là một framework gọn nhẹ và dễ dàng sử dụng khi cần xây dựng một web application cho Python Với sự linh hoạt cũng như khả năng mở rộng, Flask là một lựa chọn tốt khi lập trình viên cần một web application không quá phức tạp.

Pre-trained ResNet-50

Pre-trained model là một mô hình máy học đã được huấn luyện trước trên một tập dữ liệu lớn Thông thường, các mô hình này được đào tạo trên tập dữ liệu có tính tổng quát cao, thường rất lớn và đa dạng, để học các đặc trưng tổng quát và phức tạp.

Bởi vì quá trình huấn luyện một mô hình có thể mất rất nhiều thời gian và tài nguyên tính toán, khi một mô hình đã được đào tạo hoàn chỉnh, trạng thái của nó, hay còn gọi là "trọng số" (weights), được lưu trữ Sau đó, các mô hình này có thể được sử dụng trực tiếp cho nhiều tác vụ khác nhau: có thể là bản thân tác vụ ban đầu mà mô hình được huấn luyện, hoặc nó có thể được fine-tuned (tinh chỉnh) trên một tập dữ liệu khác cho một tác vụ cụ thể.

Một số ưu điểm của việc sử dụng pre-trained models bao gồm:

 Transfer Learning (Học chuyển giao): Lập trình viên có thể sử dụng pre-trained model để áp dụng vào các tác vụ khác mà họ cần xử lý => Đặc biệt hữu ích khi có ít dữ liệu huấn luyện cho tác vụ mới.

 Tiết kiệm thời gian và tài nguyên: Việc sử dụng pre-trained models giúp tiết kiệm thời gian và tài nguyên so với việc huấn luyện mô hình từ đầu.

 Hiệu suất cao ngay từ đầu: Pre-trained models thường đã học được nhiều đặc trưng phức tạp từ dữ liệu lớn, giúp chúng có khả năng đưa ra dự đoán chất lượng cao ngay từ khi đầu, chứ không cần phải đợi đến huấn luyện cho tác vụ cụ thể.

 Ứng dụng trong nhiều tác vụ: Pre-trained models thường được huấn luyện trên tập dữ liệu tổng quát, đa dạng, khiến cho các model này rất linh hoạt và có thể được sử dụng trong nhiều tác vụ khác nhau.

Các pre-trained model phổ biến bao gồm các mô hình như ResNet, VGG, Inception, và các mô hình trong lĩnh vực xử lý ngôn ngữ tự nhiên như BERT, GPT.

Hình 2 17 Kiến trúc mô hình ResNet-50

ResNet-50 là một mô hình mạng CNN (Convolutional Neural Network – Mạng tích chập) thuộc họ ResNet (Residual Networks), được giới thiệu bởi Microsoft Research vào năm 2015 ResNet-50 là một trong những mô hình nổi tiếng trong lĩnh vực thị giác máy tính và nhận diện hình ảnh, đặc biệt là trong các tác vụ như nhận diện vật thể, phân loại ảnh.

ResNet-50 được huấn luyện trên tập dữ liệu ImageNet nổi tiếng gồm trên 14 triệu tấm ảnh được gắn nhãn thuộc nhiều phân loại khác nhau (Động vật, Đồ dùng cá nhân, Sản phẩm thời trang…).

Theo nghiên cứu, ResNet-50 mang lại độ chính xác cao hơn các mô hình tương tự như AlexNet, VGG19 khi sử dụng trong các hệ thống khuyến nghị sản phẩm thời trang.

Khi đưa đầu vào là một (hoặc nhiều) hình ảnh sản phẩm thời trang vào mô hình ResNet-50 thì đầu ra là các vector đặc trưng thể hiện các đặc trưng của từng sản phẩm. Tổng hợp tất các vector đặc trưng của tất cả các sản phẩm tạo thành một không gian vector mà ở đó, các sản phẩm tương đồng với nhau sẽ có các vector đặc trưng nằm

“gần” nhau trong không gian vector Khi đó ta có thể lấy ra được danh sách các sản phẩm tương đồng với một sản phẩm bất kỳ bằng cách sử dụng một số công thức tính khoảng cách giữa các vector đặc trưng như Euclidean Distance, Cosine Similarity, Jaccard Similarity

Keras là một thư viện mã nguồn mở dành cho ngôn ngữ lập trình Python, được sử dụng để xây dựng và huấn luyện mô hình neural network Keras phổ biến vì Keras cung cấp nhiều API ở mức high-level cho người dùng, cho phép xây dựng và huấn luyện các mô hình neural network nhanh hơn và dễ dàng hơn một số thư viện khác nhưTensorFlow hay PyTorch Keras cũng bao gồm nhiều pre-trained models như VGG19,ResNet-50…

Việc sử dụng một pre-trained model, cụ thể ở đây là ResNet-50 mang lại nhiều lợi ích như giảm thời gian chi phí xây dựng một mô hình từ đầu nhưng vẫn mang lại hiệu quả tốt Trong đó, Keras là một thư viện mạnh mẽ hỗ trợ việc xây dựng và sử dụng các mô hình pre-trained như ResNet-50.

XÂY DỰNG HỆ THỐNG

Giới thiệu chung về bài toán

Trong đồ án này nhóm hướng tới giải quyết bài toán trong khuôn khổ: Một hãng thời trang (Uniqlo, H&M) cần xây dựng một hệ thống E-Commerce của riêng họ nhằm phục vụ tệp khách hàng của họ mà không cần phụ thuộc vào một sàn thương mại điện tử nói chung nào Như vậy, hệ thống này được một hãng thời trang xây dựng chỉ để bản thân hãng thời trang ấy sử dụng nhằm quảng bá và phục vụ cho một mình tệp khách hàng của hãng ấy.

Bài toán có thể chia ra làm 2 bài toán nhỏ:

- Xây dựng ứng dụng cho người dùng cuối nhằm quảng bá, thu hút và phục vụ các khách hãng của hãng thời trang.

- Xây dựng ứng dụng quản lý thương mại điện tử giành cho nhân viên thuộc nhãn hàng ấy sử dụng. Đối với ứng dụng giành cho phía khách hàng, hệ thống phải đáp ứng được các yêu cầu của một ứng dụng E-Commerce: Cho phép người xem các danh mục sản phẩm, Xem danh sách sản phẩm, Tìm kiếm sản phẩm, Xem chi tiết sản phẩm, Thêm sản phẩm vào danh sách yêu thích, Thêm sản phẩm vào giỏ hàng, Xem giỏ hàng, Đặt hàng, Thanh toán, Nhận thông báo, và Theo dõi đơn hàng Đồng thời, ứng dụng cần có thêm một số tính năng tiện ích để thu hút khách hàng sử dụng ứng dụng. Đối với ứng dụng giành cho phía nhân viên, hệ thống cần đáp ứng yêu cầu của một ứng dụng quản lý thương mại điện tử: Quản lý nhân viên, Quản lý sản phẩm, Quản lý phân loại sản phẩm, Quản lý biến thể sản phẩm, Quản lý quyền hạn, Quản lý nhóm quyền hạn, Quản lý đơn hàng Đồng thời, vì nhãn hàng thời trang thường có cửa hàng offline, ứng dụng cũng cần cấp cung tính năng để tạo đơn hàng khi khách đến mua hàng trực tiếp tại cửa hàng.

3.1.2 Hướng giải quyết Để giải quyết bài toán trên, nhóm quyết định chọn:

- Flutter để xây dựng ứng dụng (frontend) cho khách hàng và ứng dụng cho nhân viên nhãn hàng.

- NestJS để xây dựng backend cho hệ thống.

- PostgreSQL làm cơ sở dữ liệu của hệ thống.

- Flask, Keras để xây dựng hệ khuyến nghị đơn giản cho hệ thống.

3.1.3 Công cụ, công nghệ sử dụng

 Back-end: NestJS, TypeScript, JWT, Mailer, AWS S3, ECS, ECR, Codebuild, CodePipeline, Python, Flask, Keras.

Ngoài ra các công cụ, công nghệ khác được sử dụng đã được đề cập ở 1.3

Clothnest app: https://github.com/cloth-nest/cloth-nest-app

Clothnest backend: https://github.com/cloth-nest/cloth-nest-be

Clothnest recommendation: https://github.com/cloth-nest/cloth-nest-recommendation Clothnest admin: https://github.com/cloth-nest/clothnest-app-admin

Phân tích yêu cầu

Hình 3 1 Sơ đồ Use Case

Tên use-case Đăng nhập (Khách hàng)

Mô tả Người dùng đăng nhập vào hệ thống để quản lý giỏ hàng, tài khoản và mua hàng

Sự kiện kích hoạt Người dùng mở ứng dụng Điều kiện trước Không có Điều kiện sau Người dùng đăng nhập thành công vào ứng dụng

Luồng chính 1 Người dùng nhập email, mật khẩu

2 Người dùng nhấn Sign in

3 Hệ thống xác thực người dùng

4 Người dùng đăng nhập thành công

Luồng thay thế 1a Người dùng nhấn chọn Automation Login

2a Người dùng được tự động đăng nhập vào lần tới mở ứng dụng

Luồng ngoại lệ 3b Hệ thống trả về kết quả không thành công vì người dùng nhập sai mật khẩu hoặc vì tài khoản không tồn tại 4b Người dùng nhận được thông báo đăng nhập thất bại

Bảng 3 1 Đặc tả Use Case Đăng nhập (Khách hàng)

Tên use-case Đăng ký

Mô tả Người dùng đăng ký tài khoản để quản lý giỏ hàng, tài khoản và mua hàng

Sự kiện kích hoạt Người dùng di chuyển đến màn hình “Đăng ký” Điều kiện trước Không có Điều kiện sau Người dùng đăng ký tài khoản thành công

Luồng chính 1 Người dùng nhập họ tên, email, mật khẩu

2 Người dùng nhấn Sign up

3 Hệ thống gửi mã xác nhận về email

4 Người dùng nhập mã xác nhận

5 Người dùng đăng ký thành công

Luồng thay thế 4a Mã xác nhận hết hạn sử dụng

5a Người dùng nhấn Gửi lại mã 6a Người dùng nhập mã xác nhận

7a Người dùng đăng ký thành công

Luồng ngoại lệ 3b Hệ thống trả về kết quả không thành công vì đã có tài khoản với email tương tự 4b Người dùng nhận được thông báo đăng ký thất bại

Bảng 3 2 Đặc tả Use Case Đăng ký

Tên use-case Quên mật khẩu

Mô tả Người dùng quên mật khẩu và cần lấy lại mật khẩu

Sự kiện kích hoạt Người dùng nhấn “Forgot Password” Điều kiện trước Không có Điều kiện sau Người dùng cài đặt lại mật khẩu thành công

Luồng chính 1 Người dùng nhập email

2 Hệ thống gửi mã xác nhận về email

3 Người dùng nhập mã xác nhận

4 Người dùng xác nhận thành công

5 Người dùng nhập mật khẩu mới

6 Hệ thống reset mật khẩu cho người dùng

Luồng thay thế 3a Mã xác nhận hết hạn sử dụng

4a Người dùng nhấn Gửi lại mã 5a Người dùng nhập mã xác nhận

6a Người dùng xác nhận thành công

Luồng ngoại lệ 1b Hệ thống trả về lỗi vì tài khoản chưa được đăng ký

2b Người dùng nhận được thông báo cài đặt lại mật khẩu thất bại

Bảng 3 3 Đặc tả Use Case Quên mật khẩu

3.2.1.2.4 Xem danh sách loại sản phẩm

Tên use-case Xem danh sách loại sản phẩm

Mô tả Người dùng cần xem danh sách các loại sản phẩm (quần, áo, mũ, giày….)

Sự kiện kích hoạt - Người dùng đăng nhập thành công

- Người dùng nhấn “Use without sign in” ở màn hình “Đăng nhập” Điều kiện trước Không có Điều kiện sau Danh sách các loại sản phẩm được hiển thị cho người dùng

Luồng chính 1 Người dùng đăng nhập thành công

2 Hệ thống trả về danh sách tất cả các loại sản phẩm có trong hệ thống

3 Hệ thống trả về danh sách các phân loại con của phân loại mặc định

4 Ứng dụng hiển thị danh sách các loại sản phẩm và các phân loại con của loại sản phẩm mặc định được hiển thị đầu tiên

Luồng thay thế Không có

Luồng ngoại lệ Không có

Bảng 3 4 Đặc tả Use Case Xem danh sách loại sản phẩm

3.2.1.2.5 Xem danh sách sản phẩm

Tên use-case Xem danh sách sản phẩm

Mô tả Người dùng cần xem danh sách các sản phẩm thuộc một phân loại nhất định

Sự kiện kích hoạt Người dùng chọn một phân loại sản phẩm Điều kiện trước Không có Điều kiện sau Danh sách các sản phẩm thuộc một phân loại được hiển thị cho người dùng

Luồng chính 1 Người dùng chọn một loại sản phẩm

2 Hệ thống trả về danh sách các sản phẩm thuộc loại sản phẩm trên

3 Ứng dụng hiển thị danh sách các sản phẩm thuộc loại sản phẩm tương ứng

Bảng 3 5 Đặc tả Use Case Xem danh sách sản phẩm

3.2.1.2.6 Thêm sản phẩm vào danh sách yêu thích

Tên use-case Thêm sản phẩm vào danh sách yêu thích

Mô tả Người dùng cần thêm một số sản phẩm vào danh sách yêu thích khi chưa muốn mua liền sản phẩm ấy hoặc sản phẩm ấy tạm thời hết hàng

Sự kiện kích hoạt Người dùng nhấn chọn thêm một sản phẩm vào danh sách yêu thích Điều kiện trước Ít nhất một sản phẩm đang được hiển thị trên ứng dụng Điều kiện sau Sản phẩm được thêm vào danh sách yêu thích của người dùng

Luồng chính 1 Người dùng nhấn chọn một sản phẩm để thêm vào danh sách yêu thích

2 Hệ thống truy xuất sản phẩm tương ứng và thêm vào danh sách yêu thích của người dùng

3 Ứng dụng cập nhật UI để thể hiện đã thêm sản phẩm vào danh sách yêu thích

Luồng thay thế 1a Người dùng nhấn chọn một sản phẩm đã có trong danh sách yêu thích 2a Hệ thống bỏ sản phẩm ra khỏi danh sách

3a Hệ thống cập nhật UI

Bảng 3 6 Đặc tả Use Case Thêm sản phẩm vào danh sách yêu thích

3.2.1.2.7 Xem chi tiết sản phẩm

Tên use-case Xem chi tiết sản phẩm

Mô tả Người dùng cần biết các thông tin chi tiết của một sản phẩm

Sự kiện kích hoạt Người dùng nhấn chọn một sản phẩm trong danh sách sản phẩm Điều kiện trước Ít nhất một sản phẩm đang được hiển thị trên ứng dụng Điều kiện sau Thông tin chi tiết của sản phẩm được hiển thị cho người dùng

Luồng chính 1 Người dùng chọn một sản phẩm trong danh sách sản phẩm

2 Hệ thống truy xuất sản phẩm tương ứng và trả về các thông tin như: các thông tin chung của sản phẩm, các biến thể của sản phẩm (màu sắc, kích cỡ), số lượng của từng biến thể

3 Hệ thống trả về danh sách các sản phẩm tương tự

4 Ứng dụng hiển thị chi tiết sản phẩm cho người dùng

Bảng 3 7 Đặc tả Use Case Xem chi tiết sản phẩm

3.2.1.2.8 Xem các sản phẩm được đề xuất

Tên use-case Xem các sản phẩm được đề xuất

Mô tả Người dùng cần xem các sản phẩm tương tự với một sản phẩm bất kỳ

Sự kiện kích hoạt Người dùng nhấn chọn một sản phẩm trong danh sách sản phẩm Điều kiện trước Người dùng đang xem thông tin một sản phẩm Điều kiện sau Danh sách các sản phẩm tương ứng với một sản phẩm được hiển thị cho người dùng

Luồng chính 1 Người dùng chọn một sản phẩm trong danh sách sản phẩm

2 Hệ thống trích xuất đặc trưng của sản phẩm thông qua hình ảnh của sản phẩm

3 Hệ thống truy xuất các sản phẩm với các đặc trưng tương ứng bằng một mô hình máy học

4 Hệ thống trả về danh sách các sản phẩm tương ứng

5 Ứng dụng hiển thị chi danh sách sản phẩm tương ứng cho người dùng

Bảng 3 8 Đặc tả Use Case Xem các sản phẩm được đề xuất

3.2.1.2.9 Thêm sản phẩm vào giỏ hàng

Tên use-case Thêm sản phẩm vào giỏ hàng

Mô tả Người dùng cần thêm một số sản phẩm vào giỏ hàng để mua hàng

Sự kiện kích hoạt Người dùng nhấn chọn thêm một sản phẩm vào giỏ hàng Điều kiện trước Người dùng phải đăng nhập trước đó Điều kiện sau Sản phẩm được thêm vào giỏ hàng của người dùng

Luồng chính 1 Người dùng xem chi tiết một sản phẩm

2 Người dùng nhấn chọn thêm sản phẩm vào giỏ hàng

3 Hệ thống truy xuất sản phẩm tương ứng và thêm vào giỏ hàng của người dùng

4 Ứng dụng hiển thị thông báo đã thêm sản phẩm

Luồng thay thế 2a Người dùng nhấn chọn thêm sản phẩm vào giỏ hàng và mua ngày

3a Hệ thống thêm sản phẩm vào giỏ hàng của người dùng

4a Ứng dụng di chuyển đến màn hình Giỏ hàng

Bảng 3 9 Đặc tả Use Case Thêm sản phẩm vào giỏ hàng

Tên use-case Xem giỏ hàng

Mô tả Người dùng cần xem giỏ hàng để chuẩn bị cho việc đặt đơn hàng

Sự kiện kích hoạt - Người dùng nhấn button cart

- Người dùng nhấn chọn thêm một sản phẩm vào giỏ hàng và mua liền Điều kiện trước Người dùng phải đăng nhập trước đó Điều kiện sau Giỏ hàng của người dùng được hiển thị

Luồng chính 1 Người dùng nhấn vào button cart

2 Hệ thống truy xuất các sản phẩm có trong giỏ hàng của người dùng gồm: thông tin chung của sản phẩm, số lượng trong kho, số lượng trong giỏ hàng và trả về các thông tin trên

3 Ứng dụng hiển thị giỏ hàng của người dùng với danh sách các sản phẩm và số lượng.

Luồng thay thế 1a Người dùng nhấn vào button cart khi chưa đăng nhập

2a Màn hình Đăng nhập được hiển thị 3a Người dùng đăng nhập thành công 4a Giỏ hàn của người dùng được hiển thị

Luồng ngoại lệ 1b Người dùng nhấn vào button cart khi chưa đăng nhập

2b Màn hình Đăng nhập được hiển thị 3b Người dùng đăng nhập thất bại 4b Ứng dụng hiện thông báo đăng nhập thất bại

Bảng 3 10 Đặc tả Use Case Xem giỏ hàng

Tên use-case Tạo đơn hàng

Mô tả Người dùng cần đặt hàng sau khi đã lựa được các sản phẩm ưng ý

Sự kiện kích hoạt Người dùng nhấn Checkout tại màn hình Giỏ hàng Điều kiện trước Giỏ hàng phải có ít nhất một sản phẩm còn hàng Điều kiện sau Đơn hàng được đặt thành công

Luồng chính 1 Người dùng nhấn vào button Checkout

2 Hệ thống truy xuất các thông tin như địa chỉ nhận hàng mặc định, thông tin người nhận hàng

3 Hệ thống tính toán tổng số tiền cần thành toán và trả về kết quả

4 Ứng dụng hiển thị các thông tin về địa chỉ nhận hàng, số tiền cần thanh toán, hình thức thanh toán

5 Người dùng chọn hình thức thanh toán và nhấn Checkout

6 Người dùng tiến hành thanh toán bằng hình thức thanh toán tương ứng

7 Hệ thống tạo đơn hàng với trạng thái đã thanh toán và trả về kết quả

8 Ứng dụng hiển thị thông báo người dùng đã tạo đơn hàng thành công

Luồng thay thế 8a Người dùng thóa ứng dụng trước khi thanh toán

9a Đơn hàng được tạo với trạng thái “Chưa thanh toán”

Luồng ngoại lệ 8b Người dùng thanh toán thất bại

9b Ứng dụng hiển thị thông báo người dùng thanh toán thất bại

Bảng 3 11 Đặc tả Use Case Tạo đơn hàng

Tên use-case Thanh toán

Mô tả Người dùng cần thanh toán cho một đơn hàng

Sự kiện kích hoạt Người dùng nhấn Checkout tại màn hình Giỏ hàng Điều kiện trước Người dùng có cài đặt các phần mềm cần thiết cho phương thức thanh toán tương ứng trên thiết bị Điều kiện sau Đơn hàng được thanh toán thành công

Luồng chính 1 Người dùng nhấn vào button Checkout trên màn hình Đặt hàng

2 Người dùng tiến hành thanh toán ứng dụng của phương thức tương ứng

3 Ứng dụng của phương thức tương ứng trả về kết quả thành công

4 Hệ thống lưu trạng thái của đơn hàng là đã thanh toán và trả về kết quả

5 Ứng dụng hiển thị thông báo đã thanh toán thành công cho đơn hàng

Luồng ngoại lệ 3b Ứng dụng thanh toán trả về kết quả thanh toán thất bại

4b Hệ thống lưu trạng thái đơn hàng thành “Chưa thanh toán” và trả về kết quả

5b Ứng dụng hiển thị thông báo thanh toán thất bại

Bảng 3 12 Đặc tả Use Case Thanh toán

Tên use-case Theo dõi đơn hàng

Mô tả Người dùng cần theo dõi một đơn hàng mình đã tạo

Sự kiện kích hoạt Người dùng nhấn chọn một đơn hàng trong lịch sử đặt hàng Điều kiện trước Người dùng đã đăng nhập và đã có đặt ít nhất 1 đơn hàng thành công Điều kiện sau Thông tin đơn hàng được hiển thị cho người dùng

Luồng chính 1 Người dùng nhấn xem Lịch sử đặt hàng

2 Hệ thống truy xuất danh sách các đơn hàng của người dùng và trả về kết quả

3 Người dùng nhấn chọn một đơn hàng

4 Hệ thống truy xuất thông tin đơn hàng tương ứng như trạng thái, danh sách sản phẩm, số tiền thanh toán và trả về kết quả

5 Ứng dụng hiển thị thông tin đơn hàng cho người dùng

Luồng thay thế 2a Hệ thống truy xuất danh sách các đơn hàng, nhận thấy lịch sử trống và trả về kết quả

3a Ứng dụng cập nhật UI để thể hiện lịch sử đơn hàng trống

Bảng 3 13 Đặc tả Use Case Theo dõi đơn hàng

3.2.1.2.14 Quét mã QR sản phẩm

Tên use-case Quét mã QR sản phẩm

Mô tả Người dùng cần biết thông tin về một sản phẩm qua mã

QR code có trên sản phẩm ấy

Thiết kế

Hình 3 12 Tổng quan về kiến trúc

Tên trường Kiểu dữ liệu Mô tả/ Ghi chú

Id Integer Định danh user

Email String Email của user, duy nhất

First_name String Tên user

Last_name String Tên họ user

Is_super_user Boolean Mô tả user này có phải là root hay không?

Is_staff_user Boolean Mô tả user này có phải là nhân viên hay không?

Is_active Boolean Mô tả tài khoản user còn hoạt động hay không?

Password String Mật khẩu của user, đã được mã hóa

Date_joined Date Ngày tham gia vào hệ thống

Last_login Date Thời gian cuối cùng user đăng nhập

Avatar String Link ảnh avatar

Gender Enum string Giới tính

Phone String Số điện thoại

Refresh_token String Mã code dùng để duy trì phiên đăng nhập

Firebase_token String Dùng để firebase notify đến app

Id Integer Định danh user

Email String Email của user, duy nhất

First_name String Tên user

Last_name String Tên họ user

Province_code Integer Mã địa chỉ tỉnh

Province_name String Tên tỉnh

District_code Integer Mã địa chỉ quận, huyện

District_name String Tên quận huyện

Ward_code String Mã địa chỉ phường, xã

Ward_name String Tên phường, xã

Detail String Địa chỉ chi tiết

Is_address_profile Boolean Có phải địa chỉ riêng

Phone String Số điện thoại

Id Integer Định danh Product

Name String Tên sản phẩm

Description String Mô tả sản phẩm

Id Integer Định danh ProductVariant

Sku String Mã định danh bằng chuỗi sản phẩm

Name String Tên sản phẩm

Order Integer Số thứ tự sản phẩm

Id Integer Định danh ProductImage

Order Integer Số thứ tự sản phẩm

Id Integer Định danh Warehouse

Name String Tên warehouse/shop

Id Integer Định danh warehouseStock

Variant_id Integer Khóa ngoại tham chiếu đến bảng ProductVariant

Warehouse_id Integer Khóa ngoại tham chiếu đến bàng Warehouse

Id Integer Định danh permission

Code_name String Mã code định danh permission

Id Integer Định danh cart

User_id Integer Khóa ngoại tham chiếu đến bảng User

Variant_id Integer Khóa ngoại tham chiếu đến bảng ProductVariant

Quantity Integer Số lượng sản phẩm

Id Integer Định danh Order

User_id Integer Khóa ngoại tham chiếu đến bảng User

Address_id Integer Khóa ngoại tham chiếu đến bảng Address

Status String Enum Trạng thái đơn hàng

Total Numeric Giá trị tổng đơn hàng

Delivery_date Date Ngày giao

Shipping_fee Numeric Phí ship

Phone String Số điện thoại người mua hàng

Delivery method String enum Phương thức giao hàng

Payment method String enum Phương thức thanh toán

Payment status String enum Trạng thái thanh toán

3.3.3 Thiết kế giao diện người dùng

3.3.3.1 Ứng dụng cho khách hàng

Hình 3 13 Màn hình Splash Screen (Khách hàng)

Hình 3 14 Màn hình Đăng nhập (Khách hàng)

STT Tên Thành phần Loại Mô tả/Ghi chú

1 Email TextField Email của người dùng

2 Password TextField Mật khẩu của người dùng

3 Automation Login Checkbox Tự động đăng nhập vào lần tới sử dụng ứng dụng

4 Forget Password Text Button Quên mật khẩu

6 Register Text Button Đi đến màn hình Đăng ký

7 Using without sign in Text Button Sử dụng ứng dụng mà không cần đăng nhập

Bảng 3 26 Mô tả màn hình Đăng nhập (Khách hàng)

Hình 3 15 Màn hình Đăng ký (Khách hàng)

1 First Name TextField Tên của người dùng

2 Last Name TextField Họ của người dùng

3 Email TextField Email của người dùng

4 Password TextField Mật khẩu của người dùng

5 Sign up Button Đăng ký tài khoản

6 Login Text Button Đi đến màn hình Đăng nhập

Bảng 3 27 Mô tả màn hình Đăng ký (Khách hàng)

3.3.3.1.4 Màn hình Xác nhận tài khoản

Hình 3 16 Màn hình Xác nhận tài khoản (Khách hàng)

1 Code Verify TextField Nhập mã code được gửi tới email của người dùng để xác nhận tài khoản

Bảng 3 28 Mô tả màn hình Xác nhận tài khoản (Khách hàng)

3.3.3.1.5 Màn hình Danh mục loại sản phẩm

Hình 3 17 Màn hình Doanh mục loại sản phẩm (Khách hàng)

1 Search Bar TextField Di chuyển đến màn hình Tìm kiếm sản phẩm

2 QR Code Icon Button Di chuyển màn hình Quét QR Code của sản phẩm

Categories Tab Chuyển đến loại sản phẩm tương ứng

Category List Danh sách các phân loại con của phân loại sản phẩm hiện tại

Rounded Card Hiển thị hình ảnh và tên phân loại con

Bảng 3 29 Mô tả màn hình Doanh mục loại sản phẩm (Khách hàng)

3.3.3.1.6 Màn hình Danh sách sản phẩm

Hình 3 18 Màn hình Danh sách sản phẩm (Khách hàng)

1 Back Icon Button Di chuyển về màn hình danh mục loại sản phẩm

2 Product Category Text Tên phân loại sản phẩm hiên tại

Categories Tab Danh sách các phân loại con của phân loại sản phẩm hiện tại

4 Products Amount Text Số lượng sản phẩm (sau khi đã áp dụng các bộ lọc)

5 Sort Button Sắp xếp các sản phẩm

6 Filter Text Button Lọc sản phẩm

7 Filter Criteria Dropdown Lọc sản phẩm theo tiêu chí cụ thể

8 Products List Danh sách sản phẩm

9 Product Item Card Hiển thị tên, hình ảnh, màu sắc, đánh giá chung của sản phẩm

10 Add to Wishlist Icon Button Thêm sản phẩm vào danh sách yêu thích

Bảng 3 30 Mô tả màn hình Danh sách sản phẩm (Khách hàng)

3.3.3.1.7 Màn hình Lọc sản phẩm

Hình 3 19 Màn hình Lọc sản phẩm (Khách hàng)

1 Filter Criteria Text Loại tiêu chí lọc sản phẩm

2 Filter Option Checkbox Các tiêu chí để lọc sản phẩm

3 Apply Button Áp dụng bộ lọc

Bảng 3 31 Mô tả màn hình Lọc sản phẩm (Khách hàng)

3.3.3.1.8 Bottom Sheet Sắp xếp sản phẩm

Hình 3 20 Bottom Sheet Sắp xếp sản phẩm (Khách hàng)

Selection Tiêu chí sắp xếp sản phẩm

Bảng 3 32 Mô tả bottom sheet Sắp xếp sản phẩm (Khách hàng)

3.3.3.1.9 Màn hình Tìm kiếm sản phẩm

Hình 3 21 Màn hình Tìm kiếm sản phẩm (Khách hàng)

1 Search Bar TextField Nhập tên sản phẩm cần tìm

2 History Search Chip Các tìm kiếm gần đây

Categories Tab Danh sách loại sản phẩm thường được tìm kiếm

Categories List Danh sách các phân loại con của loại sản phẩm được chọn

Bảng 3 33 Mô tả màn hình Tìm kiếm sản phẩm (Khách hàng)

3.3.3.1.10 Màn hình Kết quả tìm kiếm sản phẩm

Hình 3 22 Màn hình Kết quả tìm kiếm sản phẩm (Khách hàng)

1 Search Bar TextField Nhập tên sản phẩm cần tìm/Xóa query hiện tại

2 Search Results List Danh sách kết quả tìm kiếm

Item Card Hiển thị hình ảnh, tên, số lượng và giá tiền của sản phẩm

4 Add to wish list Icon Button Thêm sản phẩm vào danh sách yêu thích

Bảng 3 34 Mô tả màn hình Kết quả tìm kiếm sản phẩm (Khách hàng)

3.3.3.1.11 Màn hình Danh sách sản phẩm yêu thích

Hình 3 23 Màn hình Danh sách sản phẩm yêu thích (Khách hàng)

1 Item Amount Text Số lượng sản phẩm trong danh sách

2 Favorite Items List Danh sách sản phẩm yêu thích

3 Favorite Item Card Hiển thị hình ảnh, tên, số lượng và giá tiền của sản phẩm

4 Remove from wish list Icon Button Bỏ sản phẩm khỏi danh sách yêu thích

Bảng 3 35 Mô tả màn hình Danh sách sản phẩm yêu thích (Khách hàng)

3.3.3.1.12 Màn hình Quét mã QR Sản phẩm

Hình 3 24 Màn hình Quét mã QR Sản phẩm (Khách hàng)

1 Back Icon Button Quay lại màn hình trước đó

Card Quét mã QR Code của Sản phẩm

3 Scan History List Danh sách các sản phẩm người dùng đã quét mã QR trước đó

Bảng 3 36 Mô tả màn hình Danh sách sản phẩm yêu thích (Khách hàng)

3.3.3.1.13 Màn hình Chi tiết sản phẩm

Hình 3 25 Màn hình Chi tiết sản phẩm (Khách hàng)

1 Back Icon Button Quay lại màn hình trước đó

2 Item Images Pager Danh sách các hình ảnh sản phẩm

3 Variant Selection Chọn biến thể sản phẩm (kích cỡ, màu sắc)

4 Buy Now Button Thêm sản phẩm vào giỏ hàng và đi đến

5 Add to Cart Icon Button Thêm sản phẩm vào giỏ hàng

6 Add to Wish List Icon Button Thêm sản phẩm vào danh sách yêu thích

7 Relate Items List Danh sách các phẩm tương tự

Bảng 3 37 Mô tả màn hình Chi tiết sản phẩm (Khách hàng)

Hình 3 26 Màn hình Giỏ hàng (Khách hàng)

1 Item Amount Text Số lượng sản phẩm trong giỏ hàng

2 Cart Items List Danh sách sản phẩm trong giỏ hàng

Hiển thị hình ảnh, tên, giá tiền của sản phẩm và số lượng hiện có trong giỏ hàng

Tăng/Giảm số lượng sản phẩm có trong giỏ

5 Checkout Button Đi đến màn hình Đặt hàng

Bảng 3 38 Mô tả màn hình Giỏ hàng (Khách hàng)

Hình 3 27 Màn hình Đặt hàng (Khách hàng)

1 Destination Card Thông tin địa chỉ nhận hàng của khách hàng

2 Cost Text Danh sách các chi phí và tổng số tiền cần thanh toán

3 Shipping Method Dropdown Chọn hình thức vận chuyển

4 Checkout Button Tiến hành đặt hàng

Bảng 3 39 Mô tả màn hình Đặt hàng (Khách hàng)

3.3.3.1.16 Màn hình Lịch sử đặt hàng

Hình 3 28 Màn hình Lịch sử đặt hàng (Khách hàng)

1 Orders List Danh sách các đơn hàng đã đặt

Hiển thị ngày tạo đơn hàng, địa chỉ vận chuyển, tổng số tiền thanh toán, và trạng thái đơn hàng

Bảng 3 40 Mô tả màn hình Lịch sử đặt hàng (Khách hàng)

3.3.3.1.17 Màn hình Chi tiết đơn hàng

Hình 3 29 Màn hình Chi tiết đơn hàng (Khách hàng)

1 Back Icon Button Quay lại màn hình Lịch sử đặt hàng

Hiển thị các thông tin chung của đơn hàng: Tình trạng, Ngày tạo đơn, Ngày tạo đơn, Địa chỉ vận chuyển

3 Items List Danh sách các sản phẩm đã đặt và số lượng

4 Payment Card Thông tin các chi phí và tổng số tiền đã thanh toán cho đơn hàng

Bảng 3 41 Mô tả màn hình Chi tiết đơn hàng (Khách hàng)

3.3.3.1.18 Màn hình Quản lý tài khoản

Hình 3 30 Màn hình Quản lý tài khoản (Khách hàng)

1 Avatar Image Hình ảnh Avatar của khách hàng

2 Customer Name Text Tên khách hàng

3 Notification List Item Di chuyển đến màn hình Danh sách thông báo

4 Edit Profile List Item Di chuyển đến màn hình Chỉnh sửa

5 Saved Address List Item Di chuyển đến màn hình Danh sách địa chỉ

6 App Version List Item Phiên bản hiện tại của ứng dụng

Notification Switch Điều chỉnh cài đặt: Nhận thông báo

8 Dark Theme Switch Điều chỉnh cài đặt: Sử dụng Dark

9 Language Text Button Điều chỉnh cài đặt: Ngôn ngữ của ứng dụng

10 Log out Button Đăng xuất

Bảng 3 42 Mô tả màn hình Quản lý tài khoản (Khách hàng)

3.3.3.1.19 Màn hình Danh sách địa chỉ

Hình 3 31 Màn hình Danh sách địa chỉ (Khách hàng)

1 Back Icon Button Quay về màn hình Quản lý tài khoản

2 Add home address List Item Thêm địa chỉ nhà ở khách hàng

3 Add company address List Item Thêm địa chỉ cơ quan khách hàng

4 Add new address List Item Di chuyển đến màn hình Thêm địa chỉ

Danh sách các địa chỉ của người dùng: Gồm chi tiết địa chỉ, tên người nhận và số điện thoại người nhận

Bảng 3 43 Mô tả màn hình Danh sách địa chỉ (Khách hàng)

3.3.3.1.20 Màn hình Thêm địa chỉ

Hình 3 32 Màn hình Thêm địa chỉ (Khách hàng)

1 Email TextField Email người nhận hàng

2 First Name TextField Tên người nhận hàng

3 Last Name TextField Họ người nhận hàng

4 Phone TextField Số điện thoại người nhận hàng

5 Province Dropdown Chọn tỉnh/thành phố cho địa chỉ

6 District Dropdown Chọn huyện cho địa chỉ

7 Ward Dropdown Chọn phường/xã cho địa chỉ

8 Street TextField Nhập số, tên đường cho địa chỉ

9 Done Button Tạo địa chỉ

Bảng 3 44 Mô tả màn hình Thêm địa chỉ (Khách hàng)

3.3.3.2 Ứng dụng cho nhân viên

Hình 3 33 Màn hình chính (Nhân viên)

1 Avatar Image Hình ảnh nhân viên

2 Employee Name Text Tên nhân viên

3 Hide Icon Button Ẩn Navigation Drawer

Danh sách các hạng mục cần quản lý: Sản phẩm, Loại sản phẩm, Đơn hàng,

Management Area Card Một số hạng mục quản lý phổ biến: Sản phẩm, Quyền hạn, Nhân viên

Bảng 3 45 Mô tả màn hình chính (Nhân viên)

3.3.3.2.2 Màn hình Danh sách chủng loại sản phẩm

Hình 3 34 Màn hình Danh sách chủng loại sản phẩm (Nhân viên)

1 Create Category Image Di chuyển đến màn hình Tạo chủng loại sản phẩm

2 Categories Table Thông tin của phân loại gồm tên, số lượng loại sản phẩm con, số lượng sản phẩm thuộc chủng loại

Bảng 3 46 Mô tả màn hình Danh sách chủng loại sản phẩm (Nhân viên)

3.3.3.2.3 Màn hình Thêm chủng loại sản phẩm

Hình 3 35 Màn hình Thêm chủng loại sản phẩm (Nhân viên)

1 Back Icon Button Di chuyển về màn hình Danh sách phân loại sản phẩm

2 Category Name TextField Nhập tên chủng loại sản phẩm

3 Image Icon Button Upload ảnh đại diện chủng loại sản phẩm

4 Add Category Button Thêm chủng loại

Bảng 3 47 Mô tả màn hình Thêm chủng loại sản phẩm (Nhân viên)

3.3.3.2.4 Màn hình Danh sách loại sản phẩm

Hình 3 36 Màn hình Danh sách loại sản phẩm (Nhân viên)

1 Back Icon Button Quay lại màn hình chính

Type Text Button Hiện dialog Thêm loại sản phẩm

3 Product Types Table Danh sách các loại sản phẩm gồm id và tên của loại sản phẩm

Bảng 3 48 Mô tả màn hình Danh sách loại sản phẩm (Nhân viên)

3.3.3.2.5 Dialog Thêm loại sản phẩm

Hình 3 37 Dialog Thêm loại sản phẩm (Nhân viên)

Name TextField Nhập tên loại sản phẩm

2 Back Button Hủy việc thêm loại sản phẩm

3 Save Button Thêm loại sản phẩm

Bảng 3 49 Mô tả dialog Thêm loại sản phẩm (Nhân viên)

3.3.3.2.6 Màn hình Danh sách sản phẩm

Hình 3 38 Màn hình Danh sách sản phẩm (Nhân viên)

1 Create Product Text Button Di chuyển đến màn hình Thêm sản phẩm

Danh sách tất cả các sản phẩm và thông tin sản phẩm: Tên, hình ảnh, loại sản phẩm, mô tả

Bảng 3 50 Mô tả màn hình Danh sách sản phẩm (Nhân viên)

3.3.3.2.7 Màn hình Thêm sản phẩm

Hình 3 39 Màn hình Thêm sản phẩm (Nhân viên)

1 Back Icon Button Di chuyển về màn hình Danh sách sản phẩm

2 Product Type Dropdown Chọn loại sản phẩm

3 Product Category Dropdown Chọn chủng loại sản phẩm

4 Product Name TextField Nhập tên sản phẩm

Description TextField Nhập mô tả sản phẩm

6 Product Attribute Dropdown Chọn thuộc tính của sản phẩm

7 Create Product Button Thêm sản phẩm

Bảng 3 51 Mô tả màn hình Thêm sản phẩm (Nhân viên)

3.3.3.2.8 Màn hình Danh sách thuộc tính sản phẩm

Hình 3 40 Màn hình Danh sách thuộc tính sản phẩm (Nhân viên)

1 Create Attribute Text Button Hiên dialog Thêm thuộc tính sản phẩm

Danh sách tất cả các thuộc tính sản phẩm và thông tin thuộc tính: id và tên thuộc tính

Bảng 3 52 Mô tả màn hình Danh sách thuộc tính sản phẩm (Nhân viên)

3.3.3.2.9 Dialog Thêm thuộc tính sản phẩm

Hình 3 41 Dialog Thêm thuộc tính sản phẩm (Nhân viên)

Name TextField Nhập tên thuộc tính sản phẩm

2 Back Button Hủy việc thêm thuộc tính sản phẩm

3 Save Button Thêm thuộc tính sản phẩm

Bảng 3 53 Mô tả dialog thêm thuộc tính sản phẩm (Nhân viên)

3.3.3.2.10 Màn hình Danh sách nhóm quyền hạn

Hình 3 42 Màn hình Danh sách thuộc tính sản phẩm (Nhân viên)

1 Back Button Di chuyển về màn hình chính

Group Text Button Di chuyển đến màn hình Thêm nhóm quyền hạn

Danh sách tất các nhóm quyền hạn và thông của từng nhóm: tên nhóm và số lượng nhân viên thuộc nhóm

Bảng 3 54 Mô tả màn hình Danh sách quyền hạn (Nhân viên)

3.3.3.2.11 Màn hình Thêm nhóm quyền hạn

Hình 3 43 Màn hình Thêm nhóm quyền hạn (Nhân viên)

1 Back Button Di chuyển về màn hình Danh sách nhóm quyền hạn

2 Group Name TextField Nhập tên nhóm quyền hạn

3 Permissions Checkbox Chọn danh sách các quyền được bao gồm trong nhóm quyền hạn đang tạo

Group Button Thêm nhóm quyền hạn

Bảng 3 55 Mô tả màn hình Thêm nhóm quyền hạn (Nhân viên)

3.3.3.2.12 Màn hình Danh sách nhân viên

Hình 3 44 Màn hình Danh sách nhân viên (Nhân viên)

1 Back Button Di chuyển về màn hình chính

Member Table Hiện dialog Gửi lời mời đến nhân viên

Danh sách tất các nhân viên và thông của từng nhân viên: Tên, email và trạng thái

Bảng 3 56 Mô tả màn hình Danh sách nhân viên (Nhân viên)

3.3.3.2.13 Dialog Gửi lời mời đến nhân viên

Hình 3 45 Dialog Gửi lời mời đến nhân viên (Nhân viên)

1 First Name TextField Tên nhân viên mới

2 Last Name TextField Họ nhân viên mới

3 Email TextField Email nhân viên mới

4 User active Checkbox Cài đặt trạng thái cho nhân viên

5 Permission Group Checkbox Các nhóm quyền hạn mà nhân viên mới được thêm vào

6 Back Button Hủy việc gửi lời mới

7 Send invite Button Gửi lời mời đến email của nhân viên

Bảng 3 57 Mô tả dialog Gửi lời mời đến nhân viên (Nhân viên)

3.3.3.2.14 Màn hình Danh sách giao dịch

Hình 3 46 Màn hình Danh sách giao dịch (Nhân viên)

1 Import Order Text Button Di chuyển đến màn hình Nhập đơn hàng

2 Transactions List Danh sách các giao dịch

Hiển thị thông tin của một giao dịch: Trạng thái, ngày tạo, tổng số tiền thanh toán, người tạo giao dịch

Bảng 3 58 Mô tả màn hình Danh sách giao dịch (Nhân viên)

3.3.3.2.15 Màn hình Chi tiết giao dịch

Hình 3 47 Màn hình Chi tiết giao dịch (Nhân viên)

1 Back Icon Button Di chuyển về màn hình Danh sách giao dịch

Các thông tin chung của giao dịch: Trạng thái, khách hàng, ngày tạo, địa chỉ nhận hàng

3 Products List Danh sách các sản phẩm gồm: Hình ảnh, tên, số lượng, giá

4 Cost Card Thông tin các chi phí và tổng số tiền thanh toán

5 Complete Order Button Hoàn thành giao dịch

6 Cancel Order Button Hủy giao dịch

Bảng 3 59 Mô tả màn hình Chi tiết giao dịch (Nhân viên)

Hình 3 48 Màn hình Thống kê (Nhân viên)

1 Revenue Text Tổng doanh thu của cửa hàng

2 Transactions Card Thống kê các giao dịch: số lượng, phân nhóm giao dịch theo trạng thái

3 User Text Tổng số lượng khách hàng

4 Product Text Tổng số lượng sản phẩm

5 View Detail Button Di chuyển đến màn hình Chi tiết thống kê

Bảng 3 60 Mô tả màn hình Thống kê (Nhân viên)

3.3.3.2.17 Màn hình Chi tiết thống kê

Hình 3 49 Màn hình Chi tiết thống kê (Nhân viên)

1 Back Icon Button Di chuyển về màn hình Thống kê

2 Time Period Dropdown Chọn khoảng thời gian để xem thống kê

3 Overview Card Tổng quan thông tin về doanh thu, số lượng giao dịch

4 Detail Chart Chi tiết tỷ trọng của các giao dịch theo trạng thái

Bảng 3 61 Mô tả màn hình Chi tiết thống kê (Nhân viên)

3.3.4.1 Môi trường triển khai ứng dụng

 Hệ điều hành: Microsoft Windows 10

 Processer: Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz 1.19 GHz

3.3.4.2 Ngôn ngữ và công cụ

3.3.4.2.1 Ngôn ngữ viết ứng dụng

 Ứng dụng được viết trên ngôn ngữ server là NodeJS (Typescript)

3.3.4.2.2 Công cụ quản lí mã nguồn

 Công cụ quản lí mã nguồn: Github

3.3.4.2.2 Công cụ kiểm thử API

 Công cụ kiểm thử API: Postman

Định dạng
Số trang	121
Dung lượng	4,94 MB