Tìm hiểu về flutter và xây dựng ứng dụng bán mỹ phẩm

1 Admin Người chịu trách nhiệm quản lý, điều hành hệ thống phần mềm 2 Người dùng Người trực tiếp sử dụng phần mềm 3.3 Danh sách các Use-case 1 Đăng nhập Dùng tài khoản đã tạo đăng nhậ

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn:

ThS THÁI THỤY HÀN UYỂN Sinh viên thực hiện:

Bùi Thanh Phú 19522018

 Tp Hồ Chí Minh, 3/2022 

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

……., ngày…… tháng……năm 2022

Người nhận xét (Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN Trước khi đi vào nội dung phần báo cáo đồ án, lời nói đầu tiên em xin chân thành gửi lời cảm ơn đến ThS THÁI THUỴ HÀN UYỂN – Giảng viên môn ĐỒ ÁN 1– người đã truyền đạt các kiến thức trên lớp, hướng dẫn và cung cấp các yêu cầu hướng

về người dùng dựa trên thực tế, tạo điều kiện cho em thực hiện và đồng thời nhận xét, góp ý để đồ án của em trở nên hoàn thiện hơn Đây là những kiến thức rất bổ ích, là nền tảng và là những sự hỗ trợ em trong quá trình mới bắt đầu tìm hiểu về cách lập trình với Flutter, với ngôn ngữ Dart để em có thể hoàn thiện được đồ án này tốt nhất có thể Những lời chia sẻ, hướng dẫn đầy nhiệt tình của cô là động lực quý báu để em có thể vượt qua những khó khăn khi tìm hiểu và thực hiện đề tài

Đồng thời, em cũng muốn gửi lời cảm ơn sâu sắc đến những người đã hỗ trợ em trong quá trình thực hiện đồ án này, không chỉ là những người bạn đã tạo điều kiện thuận lợi và động viên em rất nhiều, mà đặc biệt là những anh chị trong khoa Công nghệ Phần mềm vì đã góp ý, chia sẻ những kinh nghiệm quý báu về môn học cũng như các kiến thức khác có liên quan

Trong quá trình thực hiện, do kiến thức và kinh nghiệm còn nhiều hạn chế, khó

có thể tránh khỏi những sai sót Vì vậy, em rất mong nhận được những lời góp ý quý báu từ cô để em có thể ngày càng hoàn thiện không chỉ là đồ án hiện tại, các đồ án môn học sắp tới, đồng thời đây cũng là những hành trang góp phần hoàn thiện bản thân em trong tương lai

Một lần nữa xin chân thành cám ơn cô!

Nhóm thực hiện Trường Đại học Công nghệ Thông tin, tháng 6 năm 2022

1.3.2 Các chức năng chính của Firebase được nghiên cứu áp dụng vào đồ án: 12

3.4.5 Đặc tả Use-case “Hiển thị sản phẩm theo hạng mục” 25 3.4.6 Đặc tả Use-case “Thông tin chi tiết sản phẩm” 25 3.4.7 Đặc tả Use-case “Thêm sản phẩm vào giỏ hàng” 25

3.4.10 Đặc tả Use-case “Xem danh sách yêu thích” 27

3.4.13 Đặc tả Use-case “Thay đổi, cập nhật địa chỉ giao hàng” 29 3.4.14 Đặc tả Use-case “Xem danh sách đơn hàng đã đặt” 29

3.4.17 Đặc tả Use-case “Cập nhật thông tin tài khoản” 31

3.4.20 Đặc tả Use-case “Thêm nhãn hàng/thương hiệu mới” 33 3.4.21 Đặc tả Use-case “Cập nhật nhãn hàng/thương hiệu” 34

3.4.25 Đặc tả Use-case “Xem chi tiết đơn đặt hàng” 36 3.4.26 Đặc tả Use-case “Cập nhật trạng thái đơn đặt hàng” 37

3.4.28 Đặc tả Use-case “Cập nhật thông tin cửa hàng” 38

4.2.2 Tìm kiếm / Hiển thị sản phẩm theo các hạng mục / Xem thông tin sản phẩm: 49

4.2.7 Xem danh sách đơn hàng / Xóa đơn hàng / Xem chi tiết đơn hàng (User): 52 4.2.8 Cập nhật thông tin tài khoản – Thay đổi mật khẩu: 53

4.2.10 Thêm thương hiệu/nhãn hàng – Cập nhật thương hiệu/nhãn hàng: 54

4.2.14 Xem thông tin cửa hàng - Cập nhật thông tin cửa hàng: 56

5.3.2.1 Màn hình Danh sách nhãn hàng/thương hiệu: 80

6.3.2.1 Nhược điểm: 92

Phần 1: Tìm hiểu về Flutter Chương 1: Tìm hiểu về Flutter

hỗ trợ một số tính năng của lập trình hướng đối tượng như class, interface, Mỗi một class (lớp) định nghĩa cho một loại đối tượng Một class bao gồm những nội dung sau đây:

- Các thuộc tính (Fields)

- Các hàm Getter và setter

- Hàm khởi tạo (Constructor)

- Phương thức (Function)

Ưu điểm của Dart:

- Năng suất: Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn giản nhưng mạnh mẽ Type-safe giúp bạn xác định sớm các lỗi tinh tế Dart

có các thư viện cốt lõi và một hệ sinh thái gồm hàng ngàn package

- Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động

và web

- Di động: Dart biên dịch thành mã ARM và x86, để các ứng dụng di động của Dart có thể chạy tự nhiên trên iOS, Android và hơn thế nữa Đối với các ứng dụng web, chuyển mã từ Dart sang JavaScript

- Dễ gần: Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ vào cú pháp và định hướng đối tượng không gây ngạc nhiên của nó Nếu bạn đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày

- Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản

lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget

UI, thông qua phân bổ đối tượng nhanh và GC Dart hỗ trợ lập trình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream

1.2.1 Đặc điểm nổi bật

Fast Development: Tính năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút Ngoài ra Hot Reload còn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS

Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling

Native Performance: Các widget của fluter kết hợp các sự khác biệt của các nền tảng ví dụ như scrolling, navigation, icons, font để cung cấp một hiệu năng tốt nhất tới iOS và Android

1.2.2 Lí do nên sử dụng Flutter

Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụng Android, bạn nên cân nhắc thử Flutter của Google, một framework dựa trên ngôn ngữ lập trình Dart

Các ứng dụng được xây dựng với Flutter hầu như không thể phân biệt với những ứng dụng được xây dựng bằng cách sử dụng Android SDK, cả về giao diện và hiệu suất Hơn nữa, với những tinh chỉnh nhỏ, chúng có thể chạy trên thiết bị iOS Chạy ở 60 fps, giao diện người dùng được tạo ra với Flutter thực thi tốt hơn nhiều so với những ứng dụng được tạo ra với các framework phát triển đa nền tảng khác chẳng hạn như React Native và Ionic

Phát triển ứng dụng nhanh chóng: Tính năng hot reload giúp bạn nhanh chóng

và dễ dàng thử nghiệm, xây dựng giao diện người dùng, thêm tính năng và sửa lỗi

nhanh hơn Trải nghiệm tải lại lần thứ hai, mà không làm mất trạng thái, trên emulator, simulator và device cho iOS và Android

Giao diện người dùng đẹp và thu hút: Thỏa mãn người dùng của bạn với các widget built-in đẹp mắt của Flutter theo Material Design và Cupertino (iOS- flavor), các giao diện lập trình ứng dụng (API) chuyển động phong phú, scroll tự nhiên mượt mà và tự nhận thức được nền tảng

Framework hiện đại: Dễ dàng tạo giao diện người dùng của bạn với framework hiện đại của Flutter và tập hợp các platform, layout và widget phong phú Giải quyết các thách thức giao diện người dùng khó khăn của bạn với các API mạnh

mẽ và linh hoạt cho 2D, animation, gesture, hiệu ứng và hơn thế nữa

1.3.2 Các chức năng chính của Firebase được nghiên cứu áp dụng vào đồ

án:

1.3.2.1 Firebase Cloud Storage:

Firebase Cloud Storage hỗ trợ việc quản lý, chia sẻ các content người dùng upload lên như ảnh, video; cũng như sử dụng những tài nguyên ấy cho ứng dụng của bạn

Data được lưu trữ trong Google Cloud Storage buckets, và có thể được access

từ server

1.3.2.2 Firebase Realtime Database:

Firebase Realtime Database là dịch vụ lưu trữ và đồng bộ dữ liệu người dùng thời gian thực Có hỗ trợ cho Android, IOS, Web, C++, Unity và Xamarin Người dùng có thể lưu trữ và lấy dữ liệu từ máy chủ rất dễ dàng

1.3.2.3 Firebase Authentication:

Firebase Authentication là chức năng dùng để xác thực người dùng bằng Password, số điện thoại hoặc tài khoản Google, Facebook hay Twitter, vv… Firebase Authentication giúp thực hiện việc chia sẻ ID giữa các ứng dụng, giúp người dùng dễ dàng tiếp cận sản phẩm hơn Vì thế, nó là một chức năng rất quý 1.3.2.4 Ưu điểm:

Tạo tài khoản và sử dụng dễ dàng

Tốc độ phát triển nhanh

Nhiều dịch vụ trong một nền tảng

Được cung cấp bởi Google

Tập trung vào phát triển giao diện người dùng

Firebase không có máy chủ

Machine Learning

Tạo lưu lượng truy cập

Theo dõi lỗi và sao lưu

1.3.2.5 Nhược điểm:

Không phải là mã nguồn mở

Người dùng không có quyền truy cập mã nguồn

Firebase không hoạt động ở nhiều quốc gia

Chỉ hoạt động với Cơ sở dữ liệu NoSQL

Truy vấn chậm tùy vào tốc độ Internet và độ phức tạp của các thao tác truy xuất

dữ liệu

Không phải tất cả các dịch vụ Firebase đều miễn phí

Firebase chỉ ổn định và thực sự tiện dụng khi người dùng trả phí để sử dụng Chỉ chạy trên Google Cloud

Phần 2: Xây dựng ứng dụng bán mỹ phẩm

Chương 1: Thông tin chung

1.1 Tên đề tài : Ứng dụng bán mỹ phẩm

1.2 Môi trường phát triển ứng dụng: Dart, Android-IOS

Hệ điều hành: Microsoft Windows, Linux

Hệ quản trị cơ sở dữ liệu: Firebase

Công cụ thiết kế giao diện: Figma

Công cụ phân tích thiết kế: Draw.io

Công cụ xây dựng ứng dụng: Android Studio

Ứng dụng tham khảo: Hasaki, Shopee,

1.3 Thông tin nhóm

1 19522018 Bùi Thanh Phú 19522018@gm.uit.edu.vn

Chương 2: Phát biểu bài toán

2.1 Trình bày khảo sát hiện trạng

Với tốc độ tăng trưởng đáng kinh ngạc về khoa học và kĩ thuật hiện nay, song song cùng với các cuộc cách mạng công nghiệp 4.0 và 5.0, chất lượng cuộc sống của từng cá nhân trong xã hội không ngừng được cải thiện và nâng cao Như một kết quả hiển nhiên, nhu cầu được giải trí cũng không phải là một ngoại lệ Có thể nói, các thiết bị điện tử ngày nay được xem là những thiết bị không chỉ hỗ trợ, giúp đỡ cho con người trong nhiều mục đích khác nhau mà bên cạnh đó chúng còn

là các công cụ giải trí, cải thiện và nâng cao chất lượng cuộc sống Đặc biệt là các thiết bị di động thông minh, chúng cung cấp cho người dùng vô số các ứng dụng, các tiện ích công nghệ đáp ứng được nhiều nhu cầu sử dụng khác nhau cũng như các trải nghiệm công nghệ mới

Không chỉ dừng lại ở nhu cầu giải trí, việc mua bán trao đổi qua các ứng dụng

di động ngày càng phát triển và phổ biến Cụ thể, các ứng dụng Bán hàng trực tuyến sẽ dần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởi tính ưu việt mà những ứng dụng này mang lại được như: nhanh hơn,

rẻ hơn, tiện dụng hơn, hiệu quả hơn và không bị giới hạn không gian và thời gian Đặc biệt, trong giai đoạn phòng và chống dịch Covid-19 vô cùng căng thẳng và khó khăn như hiện nay, dưới sự chỉ đạo của Nhà nước về các quy định giãn cách

xã hội, hạn chế tụ tập đông người, cũng như hạn chế các hoạt động mua bán trực tiếp, điều này đã ảnh hưởng rất nhiều đến trải nghiệm của người dùng đối với các nhu cầu hằng ngày, trong đó có nhu cầu thiết yếu về làm đẹp, cụ thể là mỹ phẩm Nhận thấy điều đó, cùng với vị trí và vai trò của thời đại công nghệ 5.0, em quyết định làm ỨNG DỤNG BÁN MỸ PHẨM TRỰC TUYẾN– BE BEAUTY

để trở thành phương tiện kết nối từ xa với khách hàng trong việc đặt, mua mỹ phẩm Ứng dụng này không những có thể đảm bảo an toàn sức khỏe cho người dùng mà còn có thể đáp ứng được các nhu cầu cần thiết về cung và cầu đối với

mặt hàng mỹ phẩm, về nhu cầu làm đẹp của mỗi người và cũng như về việc duy trì hoạt động kinh doanh của cửa hàng

2.1.1 Nhu cầu thực tế của đề tài

Ứng dụng bán mỹ phẩm trực tuyến kinh doanh các mặt hàng mỹ phẩm bao gồm nhiều loại sản phẩm, nhiều thương hiệu, nhiều kết cấu sản phẩm cũng như dành cho nhiều loại da hay nhu cầu làm đẹp khác nhau Trong bối cảnh công nghệ đang ngày càng chiếm ưu thế và đóng vai trò to lớn trong các hoạt động kinh tế lẫn cuộc sống con người hiện nay, đặc biệt là tình hình dịch bệnh Covid ảnh hưởng các hoạt động kinh doanh, một số cửa hàng sẽ gặp khó khăn trong việc kinh doanh nếu không chuyển đổi sang một mô hình mới để tiếp cận từ xa đến người dùng Khi

đó, các cửa hàng sẽ phải giải quyết bài toán liên quan đến quản lý số lượng mặt hàng, đơn hàng và hoạt động bán hàng trên môi trường trực tuyến cũng như tạo điều kiện cho khách hàng trải nghiệm và tiến hành các hoạt động giao dịch giữa khách hàng với cửa hàng Vì vậy, ứng dụng trước hết là phải giải quyết được các vấn đề trên

2.2 Xác định các yêu cầu hệ thống

Tạo ra ứng dụng với tính năng bán hàng mỹ phẩm

Giúp người dùng có thể tìm kiếm sản phẩm thích hợp và đáp ứng nhu cầu của người dùng

Quản lý lưu trữ tất cả thông tin cần thiết cho hệ thống (thông tin về người dùng, quà tặng, đơn hàng-tình trạng đơn hàng, sản phẩm và danh mục)

Tìm kiếm, truy xuất các thông tin cần để xử lý một cách tức thời

Chức năng đăng nhập, đổi mật khẩu, xem thông tin cá nhân

Đáp ứng được lưu lượng truy xuất lớn

Giao diện trực quan, thân thiện với người dùng

2.2.1 Các yêu cầu của hệ thống

Xây dựng hệ thống giao diện thân thiện và dễ sử dụng

Xây dựng các tính năng bán hàng Phân loại các sản phẩm theo danh mục, thương hiệu, bán chạy nhất, hàng

Xây dựng tính năng danh sách yêu thích giúp người dùng có thể xem lại các sản phẩm yêu thích

Xây dựng hệ thống Trang cá nhân cho User:

- Ứng dụng có nút để người dùng chọn ảnh làm Avatar

- Ứng dụng có bảng tình trạng đơn hàng giúp người dùng có thể theo dõi

và nắm bắt được tình trạng vận chuyển của đơn hàng

- Ứng dụng có tính năng hiển thị lịch sử mua hàng

- Thay đổi thông tin cá nhân như địa chỉ, số điện thoại

Xây dựng chức năng tìm kiếm:

- Ứng dụng cho phép người dùng tìm kiếm sản phẩm mình cần

Xây dựng chức năng đánh giá, bình luận sản phẩm:

- Ứng dụng cho phép người dùng đánh giá cũng như gửi bình luận về sản phẩm đã mua Giúp những người sắp mua khác có thể hiểu hơn về sản phẩm

Xây dựng chức năng chat: Giúp người dùng khi cần trao đổi thông tin về sản phẩm hoặc có nhu cầu liên hệ Admin

Chương 3: Mô hình Use-case 3.1 Sơ đồ Use-case

3.2 Danh sách các Actor

1 Admin Người chịu trách nhiệm quản lý, điều hành hệ thống

phần mềm

2 Người dùng Người trực tiếp sử dụng phần mềm

3.3 Danh sách các Use-case

1 Đăng nhập Dùng tài khoản đã tạo đăng nhập vào hệ thống

2 Đăng xuất Thoát tài khoản khỏi hệ thống

hạng mục

Hiển thị danh sách theo cách hạng mục như thương hiệu, loại sản phẩm, …

Hiển thị chi tiết các thông tin về sản phẩm như tên sản phẩm, thương hiệu, kết cấu, xuất xứ, loại da, mô tả, vv…

10 Xem danh sách yêu thích Xem danh sách các sản phẩm đã chọn yêu thích

đơn hàng

Xác nhận các thông tin trên đơn hàng, có thể thay đổi thông tin đơn hàng như địa chỉ giao hàng, số điện thoại, tên người nhận

thái chưa xác nhận từ bên cửa hàng)

17 Cập nhật thông tin tài khoản Cập nhật thông tin tài khoản như họ tên, số điện thoại,

địa chỉ, vv…

hàng

hàng, tên chủ cửa hàng, địa chỉ cửa hàng, vv…

22 Thêm thương hiệu Thêm thương hiệu/nhãn hàng mới

giao đi)

hàng, địa chỉ cửa hàng, số điện thoại, vv…

3.4 Đặc tả Use-case

3.4.1 Đặc tả Use-case “Đăng nhập”

Mô tả Khách hàng/Chủ cửa hàng đăng nhập vào ứng dụng thông qua tài khoản đã tạo trước

đó Tác nhân Khách hàng/Chủ cửa hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng/Chủ cửa hàng yêu cầu

mở màn hình Đăng nhập

2 Hiển thị màn hình đăng nhập

3 Nhập tên tài khoản, mật khẩu Chọn nút Đăng nhập

4 Kiểm tra tên tài khoản và mật khẩu

5 Chuyển đến màn hình trang chủ tùy theo vai trò đăng nhập là Khách hàng hay Chủ cửa hàng

A1 Sai tài khoản, mật khẩu

2 Chọn tài khoản Facebook/Google muốn đăng nhập

3 Chuyển đến màn hình trang chủ dành cho Khách hàng Điều kiện

7 Người dùng xác thực thông qua mail

đã gửi đến email người dùng đăng ký

8 Thông báo đăng ký tài khoản thành công

Luồng thay

thế

A1 Sai định dạng các thông tin đã nhập

5 Yêu cầu nhập lại đúng định dạng các thông tin sai định dạng A2 Email đã được đăng ký cho một tài khoản khác

6 Hệ thống yêu cầu người dùng đăng ký bằng email khác A3 Người dùng chưa xác thực tài khoản và hết thời gian xác thực

7 Tài khoản sẽ không được tạo Điều kiện

trước Phải có email hợp lệ

Điều kiện

sau Tạo tài khoản trên hệ thống và thông báo đã đăng ký tài khoản thành công

3.4.3 Đặc tả Use-case “Đăng xuất”

Mô tả Khách hàng/Chủ cửa hàng đăng xuất tài khoản khỏi ứng dụng

2 Đăng xuất tài khoản khỏi ứng dụng

3 Hiển thị trang đăng nhập Luồng thay

2 Hiển thị danh sách các sản phẩm phù hợp với giá trị tìm kiếm người dùng đã nhập

3.4.5 Đặc tả Use-case “Hiển thị sản phẩm theo hạng mục”

Mô tả Khách hàng/Chủ cửa hàng chọn các hạng mục như loại sản phẩm, thương hiệu/nhãn

hàng để màn hình hiển thị danh sách mỹ phẩm tương ứng Tác nhân Khách hàng/Chủ cửa hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng/Chủ cửa hàng chọn tên một loại sản phẩm

2 Hiển thị danh sách các mỹ phẩm tương ứng với loại sản phẩm đã chọn

Luồng thay

thế

A1 Hiển thị sản phẩm theo hạng mục thương hiệu/nhãn hàng

1 Khách hàng/Chủ cửa hàng chọn tên thương hiệu/nhãn hàng

2 Hiển thị danh sách các sản phẩm tương ứng với thương hiệu/nhãn hàng đã chọn Điều kiện

trước Khách hàng/Chủ cửa hàng đã đăng nhập vào ứng dụng

Điều kiện

sau Hiển thị danh sách các sản phẩm ứng với hạng mục đã chọn

3.4.6 Đặc tả Use-case “Thông tin chi tiết sản phẩm”

Mô tả Khách hàng/Chủ cửa hàng xem chi tiết các thông tin của sản phẩm như tên mỹ phẩm,

tên thương hiệu/nhãn hàng, loại sản phẩm, xuất xứ, giá vv…

2 Hiển thị màn hình Thông tin sản phẩm ứng với sản phẩm đã chọn

3 Khách hàng/Chủ cửa hàng chọn các nội dung muốn xem ứng với từng tab layouts trên màn hình

4 Hiển thị nội dung liên quan sản phẩm ứng với tên tab layout đã chọn

sau Hiển thị trang Thông tin sản phẩm

3.4.7 Đặc tả Use-case “Thêm sản phẩm vào giỏ hàng”

Mô tả Khách hàng chọn số lượng sách muốn mua và thêm vào giỏ hàng

Tác nhân Khách hàng

Hành vi của tác nhân Hành vi của hệ thống

Luồng

chính

1 Khách hàng đang ở màn hình Thông tin sản phẩm ứng với sản phẩm đã chọn

2 Khách hàng chọn số lượng muốn mua

3 Khách hàng chọn thêm sản phẩ vào giỏ hàng

4 Kiểm tra số lượng hiện tại trong kho ứng với số lượng của sản phẩm Khách hàng chọn xem có đáp ứng được không

5 Thêm sản phẩm kèm theo số lượng Khách hàng muốn mua vào giỏ hàng Thông báo thêm thành công

2 Khách hàng chọn biểu tượng trái tim 3 Đổi màu trái tim sang đỏ và thêm sản

phẩm Khách hàng đã tim vào danh sách yêu thích Thông báo đã thêm sản phẩm vào danh sách yêu thích

2 Khách hàng chọn vào biểu tượng trái tim

3 Đổi màu trái tim sang xám và bỏ sản phẩm này khỏi danh sách yêu thích Thông báo đã bỏ sản phẩm đã chọn khỏi danh sách yêu thích

sau Bỏ sản phẩm khỏi danh sách yêu thích

3.4.10 Đặc tả Use-case “Xem danh sách yêu thích”

Mô tả Khách hàng xem danh sách các sản phẩm đã yêu thích / đã tim

2 Hiển thị màn hình Danh sách sản phẩm yêu thích

sau Hiển thị màn hình Danh sách sản phẩm yêu thích

3.4.11 Đặc tả Use-case “Xem giỏ hàng”

Mô tả Khách hàng xem danh sách các sản phẩm đã thêm ở trong giỏ hàng

Tác nhân Khách hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng chọn biểu tượng Giỏ hàng ở trang chủ hoặc trong màn hình Thông tin sản phẩm

2 Hiển thị màn hình Giỏ hàng chứa các sản phẩm kèm số lượng mà Khách hàng đã thêm vào

Mô tả Khách hàng xác nhận thông tin đơn hàng hoặc thực hiện thao tác cập nhật thông tin

đơn hàng nếu có nhu cầu trước khi chốt đơn hàng Tác nhân Khách hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng đang ở màn hình Giỏ hàng

2 Khách hàng chọn Checkout 4 Hiển thị màn hình Xác nhận đơn hàng

5 Khách hàng giữ nguyên thông tin địa chỉ, số điện thoại, tên người nhận

Luồng thay

thế

A1 Khách hàng thay đổi địa chỉ có đã lưu trước đó

5 Khách hàng chọn phần nội dung địa chỉ

6 Ứng dụng hiển thị trang Thay đổi địa chỉ

7 Khách hàng chọn một trong số những địa chỉ đã lưu

8 Hệ thống cập nhật lại địa chỉ của đơn hàng và trở lại màn hình Xác nhận đơn hàng, kèm theo cập nhật giá giao hàng ứng với khoảng cách đã tính được

A2 Khách hàng thay đổi địa chỉ với một địa chỉ mới

5 Khách hàng chọn phần nội dung địa chỉ

6 Ứng dụng hiển thị trang Thay đổi địa chỉ

7 Khách hàng chọn thêm địa chỉ mới

9 Khách hàng nhập tên người nhận, số điện thoại và địa chỉ mới (có thể thông qua map hoặc button Current Location)

10 Hệ thống cập nhật lại địa chỉ của đơn hàng và trở lại màn hình Xác nhận đơn hàng, kèm theo cập nhật giá giao hàng ứng với khoảng cách đã tính được

Điều kiện

trước

- Đã đăng nhập vào hệ thống

- Có ít nhất một sản phẩm trong đơn hàng Điều kiện

sau

Hiển thị thông tin đơn hàng ở màn hình Xác nhận đơn hàng, có thể thay đổi một số thông tin giao hàng nếu muốn

3.4.13 Đặc tả Use-case “Thay đổi, cập nhật địa chỉ giao hàng”

Mô tả Khách hàng chốt đơn hàng và gửi đơn hàng đến cửa hàng

2 Khách hàng chốt đơn hàng 3 Kiểm tra số lượng của từng sản phẩm

trong đơn hàng mà Khách hàng muốn mua xem liệu kho của cửa hàng có thể đáp ứng

4 Thông báo không thể đáp ứng được đơn hàng

5 Xóa đơn hàng và các sách trong giỏ hàng

6 Quay lại trang chủ Điều kiện

trước

- Đã đăng nhập vào hệ thống

- Có ít nhất một sản phẩm trong đơn hàng Điều kiện

sau

Thông báo chốt đơn hàng thành công và chuyển về trang chủ (nếu nhấp button trở về trang chủ)

3.4.14 Đặc tả Use-case “Xem danh sách đơn hàng đã đặt”

Mô tả Khách hàng xem danh sách các đơn hàng đã đặt lần lượt ở các trạng thái đơn hàng

như là đang chờ xác nhận, đang giao hàng, vv…

2.Chọn button Purchase Orders 3 Hiển thị màn hình Danh sách đơn hàng

4 Chọn các tab trạng thái các đơn hàng muốn xem

5 Hiển thị danh sách các đơn hàng người dùng đã đặt ứng với trạng thái đã chọn Luồng thay

thế Không có

Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Hiển thị danh sách các đơn hàng Khách hàng đã đặt

3.4.15 Đặc tả Use-case “Xem chi tiết đơn hàng”

Mô tả Khách hàng xem chi tiết các sản phẩm đã mua trong đơn hàng đã chọn

2 Chọn phần View more products trong một đơn hàng muốn xem

3 Hiển thị toàn bộ các sản phẩm đã mua trong đơn hàng

sau Hiển thị danh sách các sản phẩm Khách hàng đã mua trong đơn hàng

3.4.16 Đặc tả Use-case “Xoá đơn hàng”

Mô tả Khách hàng xóa đơn hàng

2 Chọn đơn hàng muốn xóa và chọn xóa

3 Hệ thống xóa đơn hàng Khách hàng đã chọn, thông báo xóa thành công và cập nhật danh sách đơn hàng sau khi đã xóa trên màn hình

3.4.17 Đặc tả Use-case “Cập nhật thông tin tài khoản”

Mô tả Khách hàng/Chủ cửa hàng cập nhật một số thông tin tài khoản như avatar, họ tên, số

điện thoại, địa chỉ, vv…

2 Hiển thị màn hình Thay đổi thông tin tài khoản

3 Điền, thay đổi các thông tin muốn cập nhật

4 Kiểm tra các giá trị xem có đúng định dạng, hợp lệ hay không

5 Cập nhật thông tin tài khoản trên hệ thống

và trên màn hình ứng dụng Thông báo cập nhật thông tin tài khoản thành công

Luồng thay

thế

A1 Nhập thông tin sai định dạng

5 Thông báo sai định dạng và yêu cầu nhập lại A2 Thay đổi mật khẩu

1 Khách hàng/Chủ cửa hàng chọn Đổi mật khẩu

2 Ứng dụng hiển thị màn hình Đổi mật khẩu

3 Khách hàng/Chủ cửa hàng nhập mật khẩu hiện tại, mật khẩu mới

4 Kiểm tra mật khẩu hiện tại có đúng hay không, kiểm tra định dạng các giá trị mật khẩu, nếu đúng thì tiếp tục thực hiện bước 5, nếu không thì thông báo lỗi và quay lại bước 3

5 Hệ thống cập nhật mật khẩu tài khoản và thông báo đã cập nhật thành công

A3 Khách hàng thay đổi địa chỉ mặc định trong số các địa chỉ đã lưu trước đó

3 Khách hàng chọn Thay đổi địa chỉ

4 Ứng dụng hiển thị trang Thay đổi địa chỉ

5 Khách hàng chọn một trong số những địa chỉ đã lưu

6 Hệ thống cập nhật lại địa chỉ mặc định của Khách hàng A4 Khách hàng thay đổi địa chỉ với một địa chỉ mới

3 Khách hàng chọn Thay đổi địa chỉ

4 Ứng dụng hiển thị trang Thay đổi địa chỉ

5 Khách hàng chọn thêm địa chỉ mới

6 Khách hàng nhập tên người nhận, số điện thoại và địa chỉ mới (có thể thông qua map hoặc button Current Location)

7 Hệ thống cập nhật lại địa chỉ mặc định của Khách hàng và trở lại màn hình Thay đổi địa chỉ

Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Cập nhật thông tin tài khoản của Khách hàng/Chủ cửa hàng

3.4.18 Đặc tả Use-case “Thay đổi mật khẩu”

Mô tả Thực hiện trao đổi từ xa giữa Chủ cửa hàng và Khách hàng

2 Nếu tài khoản đang đăng nhập là Khách hàng thì sẽ hiển thị màn hình Chat trao đổi tin nhắn giữa Khách hàng và Chủ cửa hàng Ngược lại nếu là Chủ cửa hàng đang đăng nhập, sẽ hiển thị danh sách các Khách hàng

đã nhắn tin với cửa hàng

3 Chủ cửa hàng chọn Khách hàng muốn nhắn tin

4 Hiển thị màn hình Chat trao đổi tin nhắn giữa Chủ cửa hàng và Khách hàng

3.4.19 Đặc tả Use-case “Thêm review - rating”

Mô tả Khách hàng xem các thông tin của cửa hàng như họ tên chủ cửa hàng, địa chỉ cửa

hàng, số điện thoại cửa hàng, tên cửa hàng, vv…

Tác nhân Khách hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Khách hàng chọn Thông tin cửa hàng ở màn hình Profile

2 Hiển thị màn hình Thông tin cửa hàng

sau Hiển thị màn hình Thông tin cửa hàng

3.4.20 Đặc tả Use-case “Thêm nhãn hàng/thương hiệu mới”

Mô tả Chủ cửa hàng thêm sản phẩm mới bao gồm các thông tin như tên mỹ phẩm, tên thương

hiệu/nhãn hàng, xuất xứ, loại mỹ phẩm, loại da phù hợp sử dụng, giá, vv…

2 Chủ cửa hàng nhập thông tin sản phẩm muốn thêm Chọn Thêm

3 Kiểm tra các giá trị đã nhập hoặc đã chọn

A1 Sai định dạng thông tin sản phẩm

4 Thông báo sai định dạng thông tin và quay lại bước 2 Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Thêm sản phẩm vào cơ sở dữ liệu của hệ thống

3.4.21 Đặc tả Use-case “Cập nhật nhãn hàng/thương hiệu”

Mô tả Chủ cửa hàng cập nhật thông tin sản phẩm đang kinh doanh

2 Hiển thị màn hình Cập nhật sản phẩm

3 Chủ cửa hàng điền các thông tin của sản phẩm mà Chủ cửa hàng muốn cập nhật Chọn Cập nhật

4 Kiểm tra các giá trị đã nhập hoặc chọn

5 Cập nhật thông tin sản phẩm ứng với sản phẩm đã chọn trên hệ thống và thông báo đã cập nhật thành công

Luồng thay

thế

A1 Sai định dạng thông tin sản phẩm

5 Thông báo sai định dạng thông tin và quay lại bước 4 Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Cập nhật thông tin sản phẩm đã chọn trên hệ thống

3.4.22 Đặc tả Use-case “Thêm sản phẩm mới”

Mô tả Chủ cửa hàng thêm thương hiệu/nhãn hàng mới bao gồm các thông tin như tên thương

2 Chủ cửa hàng nhập thông tin thương hiệu/nhãn hàng muốn thêm Chọn Thêm

3 Kiểm tra các giá trị đã nhập

4 Thêm thương hiệu/nhãn hàng mới vào hệ thống và thông báo đã thêm thành công Luồng thay

thế

A1 Sai định dạng thông tin thương hiệu/nhãn hàng

4 Thông báo sai định dạng thông tin và quay lại bước 2 Điều kiện

trước Đã đăng nhập vào hệ thống

2 Hiển thị màn hình Cập nhật thương hiệu/nhãn hàng

3 Chủ cửa hàng điền các thông tin của thương hiệu/nhãn hàng mà Chủ cửa hàng muốn cập nhật Chọn Cập nhật

4 Kiểm tra các giá trị đã nhập

5 Cập nhật thông tin thương hiệu/nhãn hàng ứng với thương hiệu/nhãn hàng đã chọn trên

hệ thống và thông báo đã cập nhật thành công

Luồng thay

thế

A1 Sai định dạng thông tin thương hiệu/nhãn hàng

5 Thông báo sai định dạng thông tin và quay lại bước 4 Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Cập nhật thông tin thương hiệu/nhãn hàng đã chọn trên hệ thống

3.4.24 Đặc tả Use-case “Quản lý đơn đặt hàng”

Mô tả

Chủ cửa hàng xem danh sách toàn bộ các đơn đặt hàng của các Khách hàng ứng với các trạng thái lần lượt: Chưa xác nhận, Đang chuẩn bị, Đang giao hàng, Đã nhận hàng, Đã Rating, Đã hoàn thành, Đã hủy

Tác nhân Chủ cửa hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Chủ cửa hàng chọn Quản lý đơn đặt hàng – button Orders ở màn hình quản

lý

2 Hiển thị màn hình Danh sách đơn hàng chứa toàn bộ các đơn đặt hàng của các Khách hàng

3 Chủ cửa hàng chọn một tab trạng thái đơn hàng

4 Hiển thị danh sách toàn bộ các đơn hàng của các Khách hàng ứng với trạng thái đã chọn

Luồng thay

thế Không có

3.4.25 Đặc tả Use-case “Xem chi tiết đơn đặt hàng”

Mô tả Chủ cửa hàng xem chi tiết các sản phẩm đã mua trong đơn hàng của Khách hàng đã

chọn Tác nhân Chủ cửa hàng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Chủ cửa hàng đang ở màn hình Danh sách đơn hàng

2 Chọn đơn hàng muốn xem 3 Hiển thị danh sách các sản phẩm đã đặt

mua trong đơn hàng Luồng thay

3.4.26 Đặc tả Use-case “Cập nhật trạng thái đơn đặt hàng”

Mô tả

Chủ cửa hàng cập nhật trạng thái các đơn đặt hàng lần lượt theo thứ tự: Chưa xác nhận -> Đang chuẩn bị -> Đang giao hàng -> Đã nhận hàng -> Đã Rating -> Đã hoàn thành -> Đã hủy

2 Chọn đơn hàng muốn cập nhật trạng thái và chọn button Cập nhật

3 Cập nhật trạng thái đơn hàng theo thứ tự: Chưa xác nhận -> Đang chuẩn bị -> Đang giao hàng -> Đã nhận hàng -> Đã Rating -

> Đã hoàn thành -> Đã hủy

4 Cập nhật màn hình Dang sách đơn hàng chứa các đơn hàng ứng với trạng thái hiện tại đang chọn

sau Cập nhật trạng thái của đơn hàng đã chọn

3.4.27 Đặc tả Use-case “Xoá đơn hàng”

Mô tả Chủ cửa hàng xóa đơn hàng

2 Chọn đơn hàng muốn xóa và chọn button Xóa

3 Hệ thống xóa đơn hàng Chủ cửa hàng đã chọn, thông báo xóa thành công và cập nhật danh sách đơn hàng sau khi đã xóa trên màn hình

Điều kiện

sau Xóa đơn hàng đã chọn khỏi danh sách các đơn hàng

3.4.28 Đặc tả Use-case “Cập nhật thông tin cửa hàng”

Mô tả Chủ cửa hàng cập nhật các thông tin của cửa hàng như họ tên chủ cửa hàng, số điện

thoại cửa hàng, địa chỉ cửa hàng, vv…

2 Hiển thị màn hình Cập nhật thông tin cửa hàng

3 Điền các thông tin muốn cập nhật 4 Kiểm tra các thông tin đã nhập, chọn xem

đúng định dạng hay chưa

5 Cập nhật thông tin trên hệ thống và màn hình hiện tại Thông báo cập nhật thành công

Luồng thay

thế

A1 Sai định dạng thông tin

5 Thông báo sai định dạng và quay lại bước 3 Điều kiện

trước Đã đăng nhập vào hệ thống

Điều kiện

sau Cập nhật thông tin của cửa hàng trên hệ thống