đồ án xây dựng website bán mỹ phẩm tích hợp phân tích thành phần hóa học trong mỹ phẩm

Chúng em mong rằng sẽ nhận được những đóng góp và nhận xét chân thành từ thầy, từ các bạn sinh viên và người dùng trong quá trình sử dụng phần mềm để phần mềm ngày càng hoàn thiện hơn nữ

GIỚI THIỆU

Đặt vấn đề

Hiện nay, nhiều cửa hàng vẫn vận hành chủ yếu theo phương thức thủ công, dựa nhiều vào kinh nghiệm của đội ngũ nhân viên Với khối lượng hàng hóa nhập xuất ngày càng lớn, công tác quản lý tồn kho và mua bán tiêu tốn rất nhiều thời gian và công sức, đồng thời độ chính xác không cao Điều này dẫn đến các sai sót và thiệt hại cho cửa hàng, ảnh hưởng đến hiệu quả kinh doanh.

Giải pháp

Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một sản phẩm phần mềm hỗ trợ công tác quản lý, bán hàng và mua hàng trực tuyến Sản phẩm nhằm tối ưu quy trình vận hành, nâng cao hiệu quả quản lý tồn kho, đơn hàng và thanh toán, đồng thời cải thiện trải nghiệm khách hàng Với mục tiêu trở thành giải pháp công nghệ toàn diện cho doanh nghiệp, phần mềm chú trọng giao diện người dùng thân thiện, tích hợp các chức năng quản lý kho, quản lý bán hàng, quản lý mua hàng và báo cáo phân tích dữ liệu Trong quá trình phát triển, nhóm đã đạt được một số kết quả đáng kể, cho thấy tiềm năng và lợi thế cạnh tranh của sản phẩm so với các giải pháp hiện có, đồng thời gợi ý hướng phát triển tiếp theo để mở rộng thị trường.

Ứng dụng bán mỹ phẩm trực tuyến và tích hợp phân tích thành phần hóa học trong mỹ phẩm đã được triển khai trên thiết bị di động và nhóm đã mở rộng sang nền tảng website với đề tài xây dựng website mua bán mỹ phẩm tích hợp phân tích thành phần hóa học, nhằm đồng bộ hóa hoạt động kinh doanh Phần mềm kết hợp nền tảng website với phiên bản di động sẽ đáp ứng nhu cầu hiện đại hóa hệ thống quản lý và bán hàng, thay thế công tác quản lý thủ công và nâng cao trải nghiệm mua sắm trực tuyến cho người dùng trên nhiều nền tảng.

Mục tiêu

Xây dựng một phần mềm hỗ trợ cửa hàng trong công tác quản lý sản phẩm và trạng thái đơn hàng, đồng thời cung cấp một ứng dụng mua sắm đáp ứng nhu cầu của khách hàng Giải pháp này đặc biệt dành cho kinh doanh mỹ phẩm, tối ưu hóa quản lý danh mục sản phẩm, tồn kho và theo dõi tiến trình đơn hàng theo thời gian thực Ứng dụng mua sắm tích hợp giúp nâng cao trải nghiệm khách hàng, tăng khả năng tương tác và cải thiện tỷ lệ chuyển đổi trên các kênh bán hàng Với tính năng tự động thông báo trạng thái đơn hàng, báo cáo bán hàng và phân tích hành vi người mua, phần mềm hỗ trợ cửa hàng tối ưu hóa quy trình vận hành, tiết kiệm chi phí và đẩy mạnh doanh thu.

Phần mềm hoạt động đa nền tảng với phiên bản trên thiết bị di động và trên website

Xây dựng giao diện phần mềm một cách trực quan, sinh động, dễ sử dụng, thẩm mỹ

Các xử lý thành phần hoạt động một cách mượt mà để mang đến trải nghiệm thú vị và tiện ích cho người dùng.

TỔNG QUAN

Tổng quan về đồ án

• Tên tiếng việt: “Xây dựng website mua bán mỹ phẩm tích hợp phân tích thành phần hóa học trong mỹ phẩm”

2.1.2 Link github quản lý source code

- Link github website dành cho khách hàng: https://github.com/Lamduy0807/Website-GreenBeauty.git

- Link github ứng dụng dành cho quản trị viên: https://github.com/Lamduy0807/Website-admin-greenbeauty.git

- Link github Backend: https://github.com/Lamduy0807/GreenBeautyBackend.git

Công nghệ sử dụng

Quá trình xây dựng đồ án đã sử dụng những công nghệ sau:

2.2.1 Ngôn ngữ lập trình Java-scripts

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

• HTML: Giúp bạn thêm nội dung cho trang web

• CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web

• JavaScript: Cải thiện cách hoạt động của trang web

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ cải thiện tính năng của website đến chạy game và phát triển phần mềm trên nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng được chia sẻ rộng rãi nhờ sự cống hiến của cộng đồng, đặc biệt là GitHub.

Hình 1 Ngôn ngữ Javascript

2.2.1.1 Lịch sử hình thành javaScripts

JavaScript được Brendan Eich tạo ra trong vòng 10 ngày vào tháng 9 năm 1995 khi làm việc tại Netscape Ban đầu ngôn ngữ này có tên gọi Mocha, sau đó đổi thành LiveScript và cuối cùng trở nên JavaScript như chúng ta biết ngày nay Phiên bản đầu tiên của JavaScript bị Netscape độc quyền và có những tính năng hạn chế, nhưng ngôn ngữ này đã không ngừng phát triển nhờ sự đóng góp của cộng đồng lập trình viên trên toàn thế giới.

Vào năm 1996, tên gọi chuẩn cho JavaScript được công nhận là ECMAScript ECMAScript 2 được phát hành vào năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999 Từ đó, ngôn ngữ này không ngừng phát triển và ngày nay đã trở thành JavaScript, hoạt động trên mọi trình duyệt và trên các thiết bị từ di động đến máy tính để bàn.

JavaScript là một ngôn ngữ luôn phát triển và đã trở thành công cụ không thể thiếu trong bộ công cụ của các chuyên viên lập trình web Tính đến năm 2016, JavaScript đã được sử dụng trên khoảng 92% website, cho thấy sự phổ biến và tầm ảnh hưởng của nó trong phát triển web hiện đại Chỉ trong vòng 20 năm, từ một ngôn ngữ lập trình riêng biệt, JavaScript đã trở thành công cụ quan trọng nhất để xây dựng các ứng dụng web tương tác và tối ưu trải nghiệm người dùng Nếu bạn đang dùng Internet, chắc chắn bạn đã từng sử dụng JavaScript trên một trang web nào đó.

2.2.1.2 Ưu nhược điểm của javaScripts Ưu điểm của Javascript

JavaScript cho phép bạn thao tác với người dùng ở phía client và tách biệt các phiên làm việc giữa các trình duyệt khác nhau Ví dụ, khi hai người dùng mở hai trình duyệt khác nhau, mỗi người có một phiên xử lý JavaScript riêng, hoạt động độc lập và không ảnh hưởng lẫn nhau.

• Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile

• Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm

Đây là một ngôn ngữ dễ bị lộ mã nguồn và dễ bị khai thác bảo mật trên web Hacker có thể chèn và thực thi mã từ khung console của trình duyệt, khiến trình duyệt đánh giá đoạn mã đó là hợp lệ và cho phép gửi các yêu cầu tới máy chủ một cách dễ dàng, dẫn tới nguy cơ rò rỉ thông tin và xâm nhập hệ thống nếu không được kiểm soát Để bảo vệ ứng dụng, cần tăng cường bảo mật ở cả phía client và server, vô hiệu hóa các thao tác script ngoài ý muốn, áp dụng các biện pháp ngăn chặn XSS, đảm bảo xác thực và phân quyền chặt chẽ, đồng thời cập nhật vá bảo mật và kiểm tra lỗ hổng định kỳ.

JavaScript framework là một bộ thư viện được xây dựng trên ngôn ngữ lập trình JavaScript, nhằm cung cấp các công cụ và kiến trúc giúp phát triển ứng dụng nhanh chóng và hiệu quả hơn Mỗi framework được thiết kế để phục vụ cho một lĩnh vực nhất định: Angular và React chuyên về frontend, Node.js chuyên về backend, còn jQuery là một thư viện mạnh mẽ để xử lý DOM HTML và CSS.

Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:

• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page

• NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime

• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile

• ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications)

• jQuery: Một thư viện rất mạnh về hiệu ứng

• ReactJS: Một thư viện viết ứng dụng web

• Và còn nhiều thư viện khác

ReactJS là một thư viện JavaScript được Facebook phát triển, nổi lên trong những năm gần đây với xu hướng Single Page Application (SPA) Điển hình cho sức ảnh hưởng của nó là Facebook sử dụng React trong production, và Instagram được viết hoàn toàn bằng React.

React hỗ trợ xây dựng các thành phần giao diện có tính tương tác cao, có trạng thái và có thể tái sử dụng Trong khi nhiều framework khác cố gắng theo đuổi một mô hình MVC hoàn chỉnh, React nổi bật với sự đơn giản và khả năng phối hợp dễ dàng với các thư viện JavaScript khác.

2.2.2.2 Cách thức hoạt động của ReactJs

React cho phép nhúng mã HTML vào trong mã JavaScript thông qua JSX, cho phép lồng ghép HTML và JavaScript một cách liền mạch Nhờ JSX, các đoạn HTML có thể được tích hợp ngay trong JavaScript, giúp kết nối giữa logic và giao diện trở nên dễ hiểu và trực quan hơn Sự kết hợp này làm cho các component trong React trở nên dễ đọc, dễ bảo trì và tối ưu cho việc phát triển giao diện người dùng.

React dễ sử dụng vì hoạt động dựa trên cơ chế kết hợp giữa HTML và JavaScript, nên rất quen thuộc và dễ tiếp cận với những ai đã nắm vững kiến thức về phát triển web Với cú pháp JSX và mô hình component-based, bạn có thể xây dựng giao diện người dùng một cách trực quan, tái sử dụng các thành phần và quản lý trạng thái một cách có tổ chức Nhờ Virtual DOM và tối ưu hoá hiệu suất, mã nguồn dễ bảo trì và mở rộng cho các dự án lớn Bên cạnh đó, hệ sinh thái phong phú và cộng đồng React hỗ trợ tối ưu hóa SEO và triển khai SSR/CSR để cải thiện khả năng hiển thị trên các công cụ tìm kiếm.

Javascript Bên cạnh đó, bạn có thể thêm code vào hàm render một cách dễ dàng mà không cần nối chuỗi

Hiệu suất cao với DOM ảo là một trong những ưu điểm nổi bật của React React cập nhật quá trình DOM và tự sinh ra các Virtual DOM, sau đó lưu trữ chúng trong bộ nhớ để tối ưu hóa quá trình render Cơ chế này cho phép cập nhật tự động của Virtual DOM ngay khi DOM thực tế có thay đổi, giúp giảm thiểu thao tác với DOM và đảm bảo tốc độ của ứng dụng không bị gián đoạn Nhờ DOM ảo, React mang lại hiệu suất tối ưu và trải nghiệm người dùng mượt mà trên các ứng dụng web.

React cung cấp khả năng tạo các component có thể tái sử dụng, cho phép các component đã phát triển có thể mang sang các ứng dụng khác mà vẫn duy trì chức năng không đổi Việc tái sử dụng component giúp giảm mã lặp, tăng tính nhất quán cho giao diện và đẩy nhanh quá trình phát triển frontend, đặc biệt với kiến trúc dựa trên component.

Thân thiện với SEO là yếu tố quan trọng giúp React gặt hái nhiều thành công, bởi hầu hết các công cụ khác chưa tối ưu SEO như nó React mang lại khả năng xây dựng giao diện người dùng (UI) có thể được các công cụ tìm kiếm truy cập dễ dàng Bên cạnh đó, tốc độ của React cũng là một lợi thế rất lớn trong việc cải thiện SEO.

ReactJS chỉ phục vụ cho tầng View, là thư viện của Facebook giúp render giao diện người dùng Vì vậy ReactJS sẽ không có phần Model và Controller, và phải kết hợp với các thư viện khác để xây dựng một ứng dụng đầy đủ theo mô hình MVC ReactJS cũng không có tính năng two-way binding hay Ajax tích hợp sẵn; để xử lý dữ liệu và gọi API, bạn cần bổ sung các công cụ phụ trợ và framework phù hợp.

• Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

PHÂN TÍCH, THIẾT KẾ

Cơ sở dữ liệu

Hình 4 Sơ đồ lớp

3.1.2 Chi tiết các thuộc tính

STT Thuộc tính Kiểu dữ liệu Diễn giải

1 Id String ID của từng người dùng

2 Email String Email đăng ký tài khoản của người dùng

3 Password String Password của tài khoản người dùng

4 Is_verified Boolean Người dùng đã xác nhận email đăng ký hay chưa

5 Is_active Boolean Tài khoản người dùng có hoạt động hay không

6 Is_staff Boolean Phân quyền tài khoản người dùng

7 Create_at DateTime Thời gian tạo tài khoản

8 Update_at DateTime Thời gian update thông tin

9 Avt Image Avatar người dùng

10 Name String Tên người dùng

11 Phone String Số điện thoại người dùng

13 Orders Int Số lượng đơn hàng đã đặt

Bảng 1 Bảng chi tiết các thuộc tính của class User

1 Id String Id của sản phẩm

2 Name String Tên sản phẩm

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

4 Price Float Giá sản phẩm

5 Sold Int Số lượng đã bán

6 Quantity Int Số lượng sản phẩm trong kho

7 Instruction String Hướng dẫn sử dụng sản phẩm

8 Ingredients String Thành phần sản phẩm

9 Origin String Xuất xứ sản phẩm

10 isActive Boolean Sản phẩm có đang hoạt động hay không

11 Category Int Loại sản phẩm

12 isFlashsale Boolean Sản phẩm có đang giảm giá hay không

13 Pricesale Float Giá sản phẩm khi đang được giảm giá

14 Imagepresent Image Hình ảnh đại diện sản phẩm

Bảng 2 Bảng chi tiết các thuộc tính của class Product

1 Id String Id Loại sản phẩm

2 Name String Tên loại sản phẩm

3 Producttype String Loại hình sản phẩm

4 Imagecategory Image Hình ảnh của loại sản phẩm

Bảng 3 Bảng chi tiết các thuộc tính của class ProductCategory

2 Name String Tên loại sản phẩm

Bảng 4 Chi tiết thuộc tính của class ProductType

2 img Image Hình ảnh sản phẩm

3 Product Int Id sản phẩm

Bảng 5 Bảng chi tiết các thuộc tính của class ProductImage

1 Id String Id đánh giá

2 Dayandtime DateTime Thời gian đánh giá

3 Rattingpoint Int Điểm đánh giá

4 Rattingcomment String Nội dung đánh giá

5 Img Image Hình ảnh đính kèm

7 User Int ID người dùng

Bảng 6 Bảng chi tiết các thuộc tính của class Rating

1 Id String Id yêu thích

2 Product_id Int Id sản phẩm yêu thích

3 Customer_id Int Id người dùng

Bảng 7 Bảng chi tiết các thuộc tính của class LoveList

1 Id String Id chất hóa học

3 Levelofsafe Int Chỉ số an toàn

4 Description String Mô tả công dụng của chất

5 Slug String Slug của tên chất

Bảng 8 Bảng chi tiết các thuộc tính của class Ingedient

Bảng 9 Bảng chi tiết các thuộc tính của class Provinces

Bảng 10 Bảng chi tiết các thuộc tính của class Districts

1 Id String Id quận/ xã

2 Name String Tên quận/ xã

Bảng 11 Bảng chi tiết các thuộc tính của class Wards

1 Id String Id thông tin vận chuyện

2 User Int Id người dùng

5 Ward Int Id quận/ xã

6 Address String Địa chỉ chi tiết nơi ở như số nhà/tên đường

7 Fulladdress String Địa chỉ đầy đủ bao gồm số nhà/tên đường + xã/phường + quận/huyện + tỉnh/thành

8 Defauladdress String Địa chỉ mà người dùng chọn làm mặc định

9 Phone String Số điện thoại người nhận

10 Receivename String Tên người nhận

11 Receivegender String Giới tính người nhận

Bảng 12 Bảng chi tiết các thuộc tính của class Delivery

1 Id String Id đơn hàng

2 Datecreate DateTime Ngày khởi tạo đơn hàng

3 Daterecieve DateTime Ngày nhận hàng

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

5 cancelationReason String Nguyên nhân hủy đơn

6 User Int Id người dùng

7 Delivery Int Id thông tin vận chuyển

Bảng 13 Bảng chi tiết các thuộc tính của class Order

1 Id String Id chi tiết đơn hàng

2 Order Int Id đơn hàng

4 Quantities Int Số lượng sản phẩm

5 isRating Boolean Đơn hàng đã được đánh giá chưa

Bảng 14 Bảng chi tiết các thuộc tính của class DetailOrder

1 Id String Id giỏ hàng

3 isSelections Boolean Có được chọn không

4 Quantities Int Số lượng sản phẩm được chọn

Bảng 15 Bảng chi tiết các thuộc tính của class Cart

2 Img Image Hình ảnh của banner

Bảng 16 Bảng chi tiết các thuộc tính của class Banner

Yêu cầu chức năng

Hình 5 Sơ đồ use case

STT Tên tác nhân Mô tả

1 Khách hàng Khách hàng sử dụng website mua mỹ phẩm

2 Admin Quản trị viên của hệ thống, xử lý các nghiệp vụ của phía người bán

Bảng 17 Mô tả tác nhân

STT Tên Chức Năng Mô tả

1 Đăng ký Đăng ký tài khoản mới

2 Đăng nhập Đăng nhập vào ứng dụng

3 Đổi mật khẩu Đổi mật khẩu đăng nhập tài khoản website

4 Quên mật khẩu Cho phép người dùng gửi yêu cầu đặt lại mật khẩu mới

5 Thiết lập tài khoản Người dùng cập nhật các thông tin như họ tên, ngày sinh, giới tính, ảnh đại diện

6 Tìm kiếm sản phẩm Chức năng cho phép khách hàng tìm kiếm sản phẩm theo tên

7 Thêm vào giỏ hàng Thêm sản phẩm muốn mua vào giỏ hàng

8 CRUD địa chỉ nhận hàng

Hỗ trợ các thao tác thêm, đọc, sửa, xóa địa chỉ giao hàng

9 Đặt hàng Người dùng chọn mua sản phẩm

10 Thêm vào mục yêu thích

Chức năng cho phép người dùng thêm sản phẩm vào mục yêu thích và có thể xem lại vào những lần truy cập sau

11 Đánh giá Chức năng cho phép khách hàng đánh giá về chất lượng và trải nghiệm về sản phẩm

12 Theo dõi đơn hàng Người dùng có thể theo dõi trạng thái của đơn hàng như chờ xác nhận, đang lấy hàng, đang giao…

13 Tra cứu thành phần Tra cứu mức độ an toàn của thành phần hóa học trong mỹ phẩm đối với da

14 Khóa tài khoản Chức năng cho phép quản trị viên khóa một tài khoản khi tỉ lệ hủy đơn cao

15 CRUD sản phẩm Hỗ trợ các thao tác thêm, đọc, sửa, xóa thông tin sản phẩm

16 Cập nhật trạng thái đơn hàng

Quản trị viên có thể cập nhật trạng thái của đơn hàng như chờ xác nhận, đang lấy hàng, đang giao…

Bảng 18 Mô tả use case

Đặc tả use case

Tên use case Đăng ký

Mô tả Use case cho phép khách hàng đăng ký tài khoản website

Tác nhân Khách hàng Điều kiện trước Truy cập vào ứng dụng Điều kiện sau Một tài khoản mới được tạo và lưu vào DB

Email xác nhận được gửi đến khách hàng

Các yêu cầu đặc biệt Email phải đúng định dạng

Password có ít nhất 6 ký tự, gồm các chữ cái từ A-Z ,các số và có thể chứa kí tự đặc biệt Retype Password phải giống với Password vừa nhập

Bảng 19 Đặc tả UC1_Đăng ký

Hình 6 Sơ đồ hoạt động UC1_Đăng ký

Tên use case Đăng nhập

Mô tả Use case này cho phép người dùng đăng nhập vào website để thực hiện các thao tác yêu cầu xác thực danh tính Tác nhân tham gia gồm Admin và khách hàng Điều kiện trước là người dùng đã có tài khoản trên website Điều kiện sau là sau khi đăng nhập, người dùng có thể thực hiện các thao tác cần xác thực danh tính.

Ngoại lệ Nếu nhập sai tài khoản hoặc mật khẩu sẽ được yêu cầu nhập lại, hoặc người dùng có thể chọn “Quên mật khẩu”

Bảng 20 Đặc tả UC2_Đăng nhập

Hình 7 Sơ đồ hoạt động UC2_Đăng nhập

Tên use case Đổi mật khẩu

Use case: Đổi mật khẩu cho tài khoản trên website cho phép Admin và khách hàng thay đổi mật khẩu nhằm tăng cường bảo mật tài khoản Tác nhân tham gia là Admin và khách hàng Điều kiện trước: người dùng đã đăng nhập vào website Điều kiện sau: mật khẩu mới được cập nhật thành công vào cơ sở dữ liệu (DB) và người dùng nhận được thông báo xác nhận.

Các yêu cầu đặc biệt Không có

Bảng 21 Đặc tả UC3_Đổi mật khẩu

Hình 8 Sơ đồ hoạt động UC3_Đổi mật khẩu

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

Mô tả Use case: cho phép người dùng yêu cầu đặt lại mật khẩu khi bị quên, nhằm khôi phục quyền truy cập một cách an toàn và nhanh chóng Tác nhân tham gia bao gồm Admin và khách hàng Điều kiện trước là người dùng đã có tài khoản trên website Điều kiện sau là mật khẩu mới được cập nhật vào cơ sở dữ liệu (DB) và người dùng có thể đăng nhập bằng mật khẩu mới sau khi xác thực thành công.

Bảng 22 Đặc tả UC4_Quên mật khẩu

Hình 9 Sơ đồ hoạt động UC4_Quên mật khẩu

UC5_Thiết lập tài khoản

Tên use case Thiết lập tài khoản

Mô tả Use case cho phép người dùng thiết lập các thông tin của tài khoản

Tác nhân Admin, Khách hàng Điều kiện trước Đã đăng nhập vào hệ thống Điều kiện sau Thông tin tài khoản được cập nhật

Hình 10 Sơ đồ hoạt động UC5_Thiết lập tài khoản

UC6_Tìm kiếm sản phẩm

Tên use case Tìm kiếm sản phẩm

Mô tả Use case cho phép người dùng tìm kiếm sản phẩm

Tác nhân Khách hàng Điều kiện trước Người dùng bấm vào thanh tìm kiếm Điều kiện sau Hiển thị nội dung lọc được bằng nội dung tìm kiếm

Bảng 24 Đặc tả UC6_Tìm kiếm sản phẩm

UC7_Thêm vào giỏ hàng

Tên use case Thêm vào giỏ hàng

Mô tả Use case cho phép người dùng thêm sản phẩm vào giỏ hàng

Tác nhân Khách hàng Điều kiện trước Không có Điều kiện sau Cập nhật thông tin sản phẩm mới thêm vào giỏ hàng lên DB

Bảng 25 Đặc tả UC7_Thêm vào giỏ hàng

Hình 12 Sơ đồ hoạt động UC7_Thêm vào giỏ hàng

UC8_CRUD địa chỉ nhận hàng

Tên use case CRUD địa chỉ nhận hàng

Mô tả Use case cho phép người dùng có thể thêm, xóa, sửa, xem địa chỉ nhận hàng

Tác nhân Khách hàng Điều kiện trước Đăng nhập với quyền của khách hàng Điều kiện sau Cập nhật thông tin lên DB

Bảng 26 Đặc tả UC8_CRUD địa chỉ nhận hàng

Tên use case Đặt hàng

Mô tả Use case cho phép khách hàng đặt mua sản phẩm

Tác nhân Khách hàng Điều kiện trước Đã đăng nhập vào hệ thống Điều kiện sau Trả về kết quả đặt hàng, lưu dữ liệu vào DB

Bảng 27 Đặc tả UC9_Đặt hàng

Hình 14 Sơ đồ hoạt động UC9_Đặt hàng

UC10_Thêm vào mục yêu thích

Tên use case Thêm mục yêu thích

Mô tả Use case cho phép người dùng thêm sản phẩm vào mục yêu thích để có thể dễ dàng xem lại sản phẩm

Khách hàng là tác nhân tham gia chính trong quá trình xem chi tiết sản phẩm trên nền tảng Điều kiện trước là người dùng bấm vào một sản phẩm để xem màn hình Chi tiết sản phẩm Điều kiện sau là hệ thống sẽ cập nhật dữ liệu mục yêu thích lên DB, lưu lại các sản phẩm được người dùng quan tâm.

Bảng 28 Đặc tả UC10_Thêm mục yêu thích

Hình 15 Sơ đồ hoạt động UC10_Thêm mục yêu thích

UC11_Đánh giá sản phẩm

Tên use case Đánh giá

Mô tả Use case cho phép người dùng đánh giá về sản phẩm

Tác nhân Khách hàng Điều kiện trước Khách hàng đã mua sản phẩm và xác nhận đã nhận hàng Điều kiện sau Cập nhật dữ liệu đánh giá lên DB và hiển thị công khai khi vào xem chi tiết sản phẩm

Bảng 29 Đặc tả UC11_Đánh giá

Hình 16 Sơ đồ hoạt động UC11_Đánh giá

UC12_Theo dõi đơn hàng

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

Mô tả Use case cho phép khách hàng theo dõi trạng thái đơn hàng đang ở giai đoạn nào

Trong quy trình đánh giá sản phẩm trên website, tác nhân chính là khách hàng Điều kiện trước là khách hàng phải đã đặt mua sản phẩm trên website để bảo đảm tính xác thực của đánh giá Điều kiện sau là sau khi khách hàng mua hàng, hệ thống sẽ cập nhật dữ liệu đánh giá lên cơ sở dữ liệu (DB) và cho phép đánh giá được hiển thị công khai khi người dùng xem chi tiết sản phẩm.

Bảng 30 Đặc tả UC12_Theo dõi đơn hàng

Hình 17 Sơ đồ hoạt động UC12_Theo dõi đơn hàng

UC13_Tra cứu thành phần

Khách hàng là tác nhân chính trong quy trình đánh giá sản phẩm Điều kiện trước là khách hàng đã mua sản phẩm và xác nhận đã nhận hàng để đảm bảo tính xác thực cho mỗi đánh giá Điều kiện sau là sau khi đánh giá được gửi, hệ thống sẽ cập nhật dữ liệu đánh giá lên DB và hiển thị công khai khi người dùng xem chi tiết sản phẩm.

Bảng 31 Đặc tả UC13_Tra cứu thành phần

Hình 18 Sơ đồ hoạt động UC13_Tra cứu thành phần

Vai trò của tác nhân Admin là quản lý quy trình đánh giá sản phẩm Điều kiện trước khi một đánh giá được lưu trữ và hiển thị là khách hàng phải từng mua sản phẩm và xác nhận đã nhận hàng Điều kiện sau là hệ thống sẽ cập nhật dữ liệu đánh giá lên cơ sở dữ liệu (DB) và cho phép hiển thị công khai đánh giá đó khi người dùng xem chi tiết sản phẩm.

Bảng 32 Đặc tả UC14_Khóa tài khoản

Hình 19 Sơ đồ hoạt động UC14_Khóa tài khoản

Tên use case CRUD sản phẩm

Trong hệ thống, tác nhân Admin chịu trách nhiệm quản lý đánh giá sản phẩm Điều kiện trước là khách hàng đã mua sản phẩm và xác nhận đã nhận hàng, đảm bảo tính xác thực của đánh giá Điều kiện sau là sau khi xác nhận, hệ thống sẽ cập nhật dữ liệu đánh giá lên cơ sở dữ liệu (DB) và cho phép đánh giá đó được hiển thị công khai khi người dùng xem chi tiết sản phẩm Quy trình này giúp tăng tính tin cậy của đánh giá và hỗ trợ người mua có nhận định chính xác khi xem chi tiết sản phẩm.

Bảng 33 Đặc tả UC15_CRUD sản phẩm

Hình 20 Sơ đồ hoạt động UC15_CRUD sản phẩm

UC16_Cập nhật trạng thái đơn hàng

Tên use case Cập nhật trạng thái đơn hàng

Mô tả Use case cho phép admin cập nhật các trạng thái của đơn hàng là

Chờ xác nhận, Chờ lấy hàng, Đang giao

Trong quy trình của tác nhân Admin, điều kiện trước khi đăng nhập vào hệ thống là phải có tồn tại ít nhất một đơn hàng Sau khi đăng nhập và xác nhận điều kiện này, hệ thống sẽ cập nhật dữ liệu lên cơ sở dữ liệu (DB) và đồng thời tải dữ liệu đã cập nhật lên giao diện để hiển thị cho người dùng.

Bảng 34 Đặc tả UC16_Cập nhật trạng thái đơn hàng

Hình 21 Sơ đồ hoạt động UC16_Cập nhật trạng thái đơn hàng

Thiết kế giao diện

Hình 22 Giao diện đăng ký

Hình 23 Giao diện đăng nhập

Hình 24 Giao diện quên mật khẩu

Hình 25 Giao diện thiết lập tài khoản

Hình 26 Giao diện trang chủ của khách hàng

Hình 27 Giao diện tìm kiếm sản phâm

Hình 28 Giao diện chi tiết sản phẩm

Hình 29 Giao diện thêm vào giỏ hàng

Hình 30 Giao diện giỏ hàng

3.4.10 CRUD địa chỉ nhận hàng

Hình 31 Giao diện CRUD địa chỉ nhận hàng

Hình 32 Giao diện xác nhận đặt hàng

Hình 33 Giao diện sản phẩm yêu thích

Hình 34 Giao diện danh mục sản phẩm

Hình 35 Giao diện đánh giá sản phẩm

Hình 36 Giao diện tra cứu thành phần

Hình 37 Giao diện trạng thái đơn hàng

Hình 38 Giao diện trang chủ (admin)

Hình 39 Giao diện danh sách sản phẩm

Hình 40 Giao diện CRUD sản phẩm

BẢNG PHÂN CÔNG CÔNG VIỆC

Tên và MSSS Công việc thực hiện Mức độ đóng góp Đánh giá Lâm Nguyễn Bửu

• Chức năng quên mật khẩu

• Chức năng Chỉnh sửa tài khoản

• Chức năng theo dõi đơn hàng

• Chức năng tra cứu thành phần

• Chức năng đánh giá sản phẩm

• App admin (CRUD sản phẩm, banner, trạng thái đơn hàng)

• Thiết kế cơ sở dữ liệu

• Chức năng xem sản phẩm

• Chức năng Thêm vào giỏ hàng

• Chức năng Thêm vào mục yêu thích

• Chức năng tìm kiếm sản

• Chức năng lọc sản phẩm

Bảng 35 Phân công công việc

NHẬN XÉT VÀ HƯỚNG PHÁT TRIỂN

Nhận xét

Nhóm đề tài đã vận dụng ReactJS và thực hiện thành thạo việc xây dựng đồ án, cho ra một website thương mại điện tử với nhiều chức năng hữu ích Website hỗ trợ người dùng lựa chọn hàng hóa phù hợp theo nhu cầu cá nhân thông qua gợi ý sản phẩm, phân chia theo mục và tìm kiếm sản phẩm tiện lợi Người dùng có cái nhìn trực quan về sản phẩm thông qua các bình luận và đánh giá từ những người đã mua và trải nghiệm Đặc biệt, để hỗ trợ lựa chọn sản phẩm phù hợp với làn da và tránh kích ứng, ứng dụng nhấn mạnh chức năng phân tích thành phần, một điểm nhấn quan trọng cho người dùng làn da nhạy cảm.

5.1.2 Đánh giá về ứng dụng

• Website có giao diện đơn giản, bố cục rõ ràng, trực quan, dễ tiếp cận, kết hợp các animation sinh động với người dùng

• Trang web với tốc độ tải trang nhanh

• Thông tin sản phẩm đầy đủ, rõ ràng, giúp người truy cập có thể tìm hiểu được thông tin một cách dễ dàng

• Tích hợp chức năng đánh giá sản phẩm, người dùng dễ dàng chia sẻ và tiếp nhận thông tin về sản phẩm

• Tích hợp khả năng phân tích thành phần, giảm thiểu rủi ro khi sử dụng sản phẩm

• Tích hợp công cụ cho người quản trị dữ liệu có thể thêm dữ liệu

• Website còn trong giai đoạn hoàn thiện về mặt trải nghiệm người dùng

• Dữ liệu và hình ảnh còn hạn chế.

Hướng phát triển và mở rộng

- Tiếp tục phát triển ứng dụng theo hướng thương mại hóa

- Khảo sát người dùng để hoàn thiện chức năng hiện có và phát triển thêm chức năng mới

- Phát triển công cụ hỗ trợ người quản trị cơ sở dữ liệu

- Phát triển giao diện và nâng cao trải nghiệm người dùng

YÊU CẦU CÀI ĐẶT

Nhằm đảm bảo phần mềm có thể hoạt động một cách hiệu quả nhất, điện thoại của người dùng cần phải đạt các tối thiểu các yêu cầu sau

Hệ điều hành (Android) Tối thiểu Android 9 trở lên

RAM Tối thiểu 512MB trở lên

Dung lượng bộ nhớ (Memory) Tối thiểu 256MB trở lên

Tốc độ bộ xử lý (Processor) Tối thiểu 1.00 GHz trở lên

Bảng 36 Yêu cầu cài đặt

Định dạng
Số trang	59
Dung lượng	2,61 MB