đồ án 2 xây dựng website cửa hàng phụ kiện thú cưng

GIỚI THIỆU ĐỀ TÀI

Đặt vấn đề

Ngày nay, số lượng người yêu động vật là rất lớn nên nhu cầu mua sắm cho thú cưng của họ cực kỳ nhiều Bên cạnh đó, xu hướng thị trường bây giờ là mua sắm trực tuyến, người mua có thể tiến hành mua sắm ở bất kỳ vị trí nào, thời gian nào Hiện nay có nhiều website bán hàng cho thú cưng nhưng ít nơi có thể đáp ứng đủ nhu cầu hiện tại.

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 website cửa hàng phụ kiện thú cưng

Mục tiêu đề tài

- Thiết kế giao diện đẹp mắt, bắt mắt và dễ sử dụng

- Cung cấp đầy đủ thông tin về sản phẩm

- Đảm bảo tính năng an toàn và bảo mật

- Tối ưu hóa công cụ tìm kiếm

- Tích hợp tính năng đánh giá

Đối tượng sử dụng

Pescue hướng đến các khách hàng có và sẽ có nhu cầu mua hàng cho thú cưng và cửa hàng cho thú cưng có nhu cầu mở rộng thị trường thương mại điện tử.

Công cụ sử dụng

-Công cụ dùng để phân tích, thiết kế: Figma, draw.io, StarUML

-Công cụ phát triển: Visual Studio Code, IntelliJ

-Công cụ quản lý dự án: Github, Zalo

-Công cụ soạn thảo văn bản: Microsoft Word

-Công cụ deploy: Railway, Vercel

-Công cụ lưu trữ dữ liệu: Cloudinary, PostgreSQL

Phương pháp nghiên cứu

-Tìm hiểu các phương pháp hiện có.

-Tham khảo các Website cửa hàng thú cưng và xác định các tính năng chung cần có.

-Tìm hiểu các công nghệ sử dụng cho đề tài.

-Triển khai theo kế hoạch sẵn có.

-Kiểm thử và sửa lỗi (nếu có).

-Thiết kế giao diện, cơ sở dữ liệu.

Phạm vi môi trường

-Triển khai ứng dụng trên môi trường Website

Công nghệ sử dụng

- Các ngôn ngữ lập trình và công nghệ phát triển website: HTML, CSS,

-Các framework hỗ trợ: Angular, Spring Boot.

-Cơ sở dữ liệu: PostgreSQL

TỔNG QUAN

Tổng quan về đồ án

Website Pescue Shop là một cửa hàng trực tuyến bán phụ kiện cho thú cưng, cung cấp đầy đủ tính năng cần thiết của một website thương mại điện tử bao gồm cho cả người dùng lẫn người bán hàng Với giao diện thân thiện, dễ tiếp cận người dùng.

2.1.1 Mô tả quy trình thực hiện các công việc chính

● Bước 1: Xác định các yêu cầu:

- Phân tích khả thi quy mô thực hiện.

- Tìm hiểu quy trình nghiệp vụ.

- Tham khảo và trải nghiệm các ứng dụng liên quan.

- Khảo sát người dùng qua mạng.

● Bước 2: Thiết kế hệ thống:

- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan.

● Bước 3: Thiết kế dữ liệu

- Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm bảo được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về mặt truy xuất và lưu trữ

- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của phần mềm

- Xây dựng sơ đồ logic cụ thể của phần mềm

● Bước 4: Thiết kế giao diện

- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm

- Mô tả các đối tượng trên từng màn hình

- Xác định những chức năng hiển thị trên từng màn hình

● Bước 5: Code và kiểm thử

- Code trình bày theo mô hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu.

- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

Cơ sở lý thuyết

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

● Figma là một ứng dụng web, cho phép người dùng truy cập và làm việc trên trình duyệt mà không cần cài đặt phần mềm.

● Nó cung cấp môi trường làm việc đám mây, giúp người dùng lưu trữ và chia sẻ dự án dễ dàng.

● Figma hỗ trợ các tính năng như thiết kế giao diện, tạo wireframe, tạo prototype và quản lý thư viện.

● Người dùng có thể tạo mới dự án hoặc mở dự án đã tồn tại trên Figma.

● Figma cung cấp một giao diện dễ sử dụng, với các công cụ vẽ và chỉnh sửa các yếu tố trên giao diện.

● Người dùng có thể tạo component (thành phần) để tái sử dụng và duy trì tính nhất quán trên toàn bộ dự án.

● Figma cũng hỗ trợ tính năng cộng tác đồng thời, cho phép nhiều người dùng làm việc trên cùng một dự án và theo dõi sự thay đổi trong thời gian thực.

● Truy cập và làm việc trực tuyến, không cần cài đặt phần mềm.

● Dễ sử dụng, với giao diện thân thiện và các công cụ mạnh mẽ.

● Hỗ trợ cộng tác đồng thời, giúp đội ngũ làm việc chung một cách hiệu quả.

● Cho phép chia sẻ và gửi mời người dùng khác để xem, chỉnh sửa hoặc phản hồi.

● Cần kết nối internet để truy cập và làm việc.

● Có thể hạn chế một số tính năng so với các ứng dụng thiết kế giao diện truyền thống.

● Phiên bản miễn phí của Figma có giới hạn băng thông lưu trữ và số lượng dự án.

2.2.2 Ngôn ngữ lập trình TypeScript

TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các ứng dụng lớn và phức tạp Nó kế thừa nhiều khái niệm từ Java và C#,TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type Nó còn được bổ sung thêm lớp hướng đối tượng mà điều này không có ở Javascript.

Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng một file và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của JavaScript và mở rộng nó bằng một loạt tính năng mới Nhờ đó mà hiệu năng làm việc được tăng lên đáng kể.

2.2.2.1 Lịch sử hình thành TypeScript

TypeScript là một dự án kéo dài hơn 3 năm của Microsoft nhằm tạo ra một ngôn ngữ để mở rộng JavaScript Giúp nó trở nên phù hợp hơn với những ứng dụng lớn, nhưng vẫn quen thuộc với cấu trúc ngôn ngữ JS hiện tại để mọi người có thể học nhanh hơn Trưởng nhóm dự án này là Anders Hejlsberg, cha đẻ của C#, Turbo Pascal và Delphi.

2.2.2.2 Ưu nhược điểm của TypeScript Ưu điểm của Typescript:

● Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framework lớn.

● Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kế thừa, đóng gói, constructor, abstract, interface, implement, override…v.v

● Cách tổ chức code rõ ràng hơn, hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều lập trình viên có thể làm việc cùng nhau một cách dễ dàng hơn.

● Hỗ trợ các tính năng mới nhất của Javascript TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6).

● Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộng đồng hỗ trợ rất lớn.

● Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn

Vì là một ngôn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi những request lên server một cách dễ dàng.

Angular là một mã nguồn mở viết bằng TypeScript và được sử dụng để thiết kế giao diện web (front – end) Angular được xây dựng, phát triển từ những năm

2009 và đang duy trì cho đến nay bởi Google Đây được xem là framework front end mạnh mẽ và chuyên dụng dành cho các lập trình viên sử dụng HTML cao cấp.

Angular được ứng dụng rộng rãi để xây dựng các project Single Page Application (ứng dụng trang đơn) Hiện tại, version stable của Angular là Angular

17 (released on November 17, 2023) với TypeScript 3.6 và 3.7.

Hiện nay, Angular được các công ty lớn lựa chọn sử dụng như: Upwork, Forbes, General Motors,… Đây sẽ là cơ hội việc làm rất lớn nếu bạn sử dụng thành thạo Angular Tuy nhiên, trước đó bạn cần nắm vững các kiến thức nền tảng về JavaScript, CSS và HTML, cách làm việc với kiến trúc Model-View-Controller (MVC).

●Angular được các chuyên gia đánh giá cao, mã nguồn này giúp các Single Page Application làm việc dễ dàng, nhanh chóng.

●Nhờ khả năng Binding data lên trên các nền tảng HTML nên code front-end thường rất thân thiện với người dùng.

●Bạn có thể thuận tiện Unit Test.

●Component có thể tái sử dụng dễ dàng hơn.

●Angular có khả năng hỗ trợ cho các lập trình viên có thể viết code được ít hơn cùng với nhiều chức năng hơn Từ đó giúp tiết kiệm thời gian lập trình và tăng hiệu suất công việc.

●AngularJS tương thích với nhiều nền tảng khác nhau Bạn có thể dùng được trên nhiều loại trình duyệt khác nhau cả trong máy tính và thiết bị điện thoại di động.

●Tính bảo mật: Bản chất của Angular là một framework front-end Thông thường, tính bảo mật của front-end thường không cao bằng back-end. Chính vì thế, bạn cần xây dựng một hệ thống kiểm tra dữ liệu sao cho việc trả về được tốt nhất khi sử dụng API.

●Khả năng an toàn: Website có thể trở nên không an toàn nếu bạn sử dụng một số trình duyệt sở hữu tính năng Disable JavaScript

2.2.4.1 Tổng quan về Spring Boot

Spring Spring Boot là một extension của Spring Framework giúp các lập trình viên loại bỏ các bước cấu hình phức tạp mà Spring bắt buộc Spring Boot là dự án phát triển bởi ngôn ngữ Java (JAV) trong hệ sinh thái Spring framework.

Java Spring Boot (Spring Boot) là một công cụ giúp phát triển ứng dụng web và microservices bằng Spring Framework nhanh hơn và dễ dàng hơn.

● Hội tụ đầy đủ các tính năng của Spring framework.

● Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năng chạy bằng java-jar nhờ các dependency starter.

● Dễ dàng deploy vì các ứng dụng server được nhúng trực tiếp vào ứng dụng để tránh những khó khăn khi triển khai lên môi trường production mà không cần thiết phải tải file WAR.

ĐẶC TẢ USE CASE

Sơ đồ Use case

Danh sách Use case

User Đăng nhập Cho phép đăng nhập để sử dụng hệ thống Đăng ký Cho phép đăng ký để sử dụng hệ thống với quyền người dùng Xem hàng Người dùng có thể xem danh sách các mặt hàng hiện có trong shop, có thể tìm kiếm và lọc theo từng điều kiện cụ thểThêm vào giỏ hàng Người dùng có thể thêm mặt hàng vào giỏ hàng để tiếp tục mua hàng Mua ngay Người dùng có thể tiến hành thanh toán ngay lập tức mà không cần vào giỏ hàng Thanh toán Người dùng có 2 hình thức thanh toán cho hoá đơn là chuyển khoản (thông qua cổng thanh toán điện tử VNPay) và thanh toán khi nhận hàng (COD) Lịch sử mua hàng Người dùng có thể xem lại lịch sử mua hàng của mình Viết đánh giá Người dùng có thể viết đánh giá cho sản phẩm mình đã mua

Nhắn tin Nhắn tin với trại cứu trợ để trao đổi trong quá trình nhận nuôi Quản lý thông tin cá nhân

Chỉnh sửa thông tin cá nhân và gửi yêu cầu làm trại cứu trợ

Admin quản lý thông tin các mặt hàng trong hệ thống

Quản lý nhập hàng Admin tiến hành nhập hàng, xem lại lịch sử nhập hàng, số lượng và giá tiền hàng nhập

Quản lý đơn hàng Admin quản lý đơn hàng từ người dùng

Quản lý phiếu giảm giá

Admin quản lý phiếu giảm giá, cung cấp cho người dùng để người dùng sử dụng khi thanh toán hoá đơn tại cửa hàng

Thống kê Admin thống kê lại doanh thu và nhập hàng theo thời gian cụ thể

Bảng 1: Danh sách Use Case

Đặc tả Use case

Tên Use case Đăng nhập

Mô tả Cho phép đăng nhập sử dụng hệ thống

Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm chọn đăng nhập Điều kiện tiên quyết (Pre-

Nhập tài khoản đã được đăng ký trước đó Điều kiện kết quả (Post-

Conditions) Đăng nhập thành công và vào màn hình chính

1 Hệ thống hiển thị màn hình đăng nhập

2 Người dùng nhập tài khoản, mật khẩu và nhấn nút đăng nhập.

3 Hệ thống xác nhận tài khoản và mật khẩu đúng theo yêu cầu.

4 Hệ thống xác nhận dữ liệu nhập vào trùng với dữ liệu trong Database.

5 Xác nhận thành công, hệ thống chuyển tới trang chủ.

3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.

4a Hệ thống xác nhận dữ liệu nhập không trùng khớp với dữ liệu trong Database Use case trở về với bước 2.

Tên Use case Đăng ký

Mô tả Cho phép đăng ký để sử dụng hệ thống với quyền người dùng Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm chọn đăng ký Điều kiện tiên quyết (Pre-

Nhập thông tin để đăng ký tài khoản Điều kiện kết quả (Post-

Conditions) Đăng ký thành công và vào màn hình đăng nhập để tiếp tục

1 Hệ thống hiển thị màn hình đăng ký

2 Người dùng thông tin và nhấn nút đăng ký.

3 Hệ thống xác nhận thông tin nhập đúng theo yêu cầu.

4 Hệ thống gửi mã OTP đến email được cung cấp từ người dùng

5 Người dùng nhập OTP xác nhận để kích hoạt tài khoản

6 Hệ thống xác nhận dữ liệu nhập vào trùng với dữ liệu trong Database.

7 Xác nhận thành công, hệ thống chuyển tới trang chủ.

3a Hệ thống xác nhận tài khoản và mật khẩu không đúng theo yêu cầu Use case trở về với bước 2.

4a Hệ thống xác nhận dữ liệu nhập không trùng khớp với dữ liệu trong Database Use case trở về với bước 2.

Sự kiện kích hoạt (Trigger) Bấm chọn đăng ký

Tên Use case Xem hàng

Mô tả Người dùng có thể xem danh sách các mặt hàng hiện có trong shop, có thể tìm kiếm và lọc theo từng điều kiện cụ thể Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm vào Product trên thanh menu Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

Xem được danh sách các mặt hàng trong hệ thống

1 Hệ thống hiển thị trang danh sách mặt hàng

2 Người dùng chọn một sản phẩm

3 Hệ thống hiển thị màn hình chi tiết sản phẩm

4 Người dùng chọn size và màu (nếu có), bấm mua hàng hoặc thêm vào giỏ hàng

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

Mô tả Thêm hàng vào giỏ

Sự kiện kích hoạt (Trigger) Vào trang Chi tiết sản phẩm Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập Thành công vào hệ thống Điều kiện kết quả (Post-

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

1 Người dùng chọn size và màu (nếu có)

2 Bấm nút thêm vào giỏ hàng

3 Hệ thống thông báo thêm vào giỏ thành công

Bảng 5 Usecase Thêm vào giỏ hàng

Tên Use case Mua ngay

Mô tả Thực hiện mua ngay một sản phẩm

Sự kiện kích hoạt (Trigger) Bấm nút mua ngay Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập vào hệ thống Điều kiện kết quả (Post-

Chuyển đến trang thanh toán hoá đơn

1 Vào trang chi tiết sản phẩm

2 Người dùng chọn size và màu (nếu có)

4 Hệ thống chuyển sang màn hình thanh toán hoá đơn

Tên Use case Nhắn tin

Mô tả Nhắn tin với trại cứu trợ để trao đổi trong quá trình nhận nuôi Người thực hiện (Actor) User

Sự kiện kích hoạt (Trigger) Bấm vào nút nhắn tin Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập vào hệ thống thành công và có gửi yêu cầu nhận nuôi đến một bé thú nuôi bất kỳ Điều kiện kết quả (Post-

Có thể nhắn tin với trại cứu trợ

1 Bấm vào nút nhắn tin

3.3.7 Quản lý thông tin cá nhân

Tên Use case Quản lý thông tin cá nhân

Mô tả Chỉnh sửa thông tin cá nhân

Sự kiện kích hoạt (Trigger) Vào trang thông tin cá nhân Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công Điều kiện kết quả (Post-

Thông tin được thay đổi

1 Hiển thị trang thông tin cá nhân

3 Hệ thống hiển thị bảng chi tiết các mặt hàng có trong hoá đơn tương ứng

- Chỉnh sửa thông tin cá nhân

4 Bấm nút chỉnh sửa thông tin

6 Bấm xác nhận để lưu thông tin Kịch bản thay thế

(Alternative Flow) 6a Nhập thông tin không hợp lệ hệ thống không gửi yêu cầu Trở lại bước 3

Bảng 8 Usecase Quản lý thông tin cá nhân

Tên Use case Thanh toán hoá đơn

Mô tả Thanh toán hoá đơn

Sự kiện kích hoạt (Trigger) Vào trang Thanh toán hoá đơn (Check out) Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công, đang mua hàng Điều kiện kết quả (Post-

Gửi thông tin hoá đơn đến Admin

1 Người dùng nhập thông tin nhận hàng

2 Chọn mã giảm giá (nếu có)

3 Chọn hình thức thanh toán

4 Nếu người dùng chọn hình thức thanh toán trực tuyến, chuyển đến màn hình thanh toán của VNPay, nếu người dùng chọn thanh toán khi nhận hàng, trở về màn hình lịch sử thanh toán Kịch bản thay thế

Bảng 9 Usecase Thanh toán hoá đơn

Tên Use case Đánh giá sản phẩm

Mô tả Thêm bài viết đánh giá sản phẩm đã mua

Sự kiện kích hoạt (Trigger) Bấm vào nút viết đánh giá Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công, đã mua hàng Điều kiện kết quả (Post-

Viết đánh giá sản phẩm

1 Hiển thị form viết đánh giá cho sản phẩm

2 Người dùng nhập vào số điểm đánh giá (min = 1 và max = 5) và nội dung đánh giá sản phẩm

3 Bấm nút Viết đánh giá

4 Hệ thống cập nhập lại thông tin và thông báo đến cho người dùng

7a Nhập thông tin không hợp lệ hệ thống không gửi về thông tin Trở lại bước 6

15a Nhập thông tin không hợp lệ Hệ thống báo lỗi. Trở về bước 14

Bảng 10 Usecase Đánh giá sản phẩm

Tên Use case Quản lý sản phẩm

Mô tả Quản lý các mặt hàng có trong hệ thống

Người thực hiện (Actor) Admin

Sự kiện kích hoạt (Trigger) Bấm vào trang Quản lý hàng Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công với tài khoản Admin Điều kiện kết quả (Post-

Quản lý thông tin mặt hàng

1 Hiển thị danh sách mặt hàng

2 Bấm vào nút Thêm sản phẩm

3 Hệ thống hiển thị màn hình thêm sản phẩm

4 Người dùng điền thông tin sản phẩm

- Sửa thông tin sản phẩm

6 Bấm vào sản phẩm cần chỉnh sửa

7 Hệ thống hiển thị chi tiết sản phẩm

8 Người dùng tiến hành thay đổi thông tin

Kịch bản thay thế (Alternative Flow)

Bảng 11 Usecase Quản lý sản phẩm

3.3.11 Quản lý phiếu giảm giá

Tên Use case Quản lý phiếu giảm giá

Mô tả Quản lý phiếu giảm giá có trong hệ thống

Sự kiện kích hoạt (Trigger) Bấm vào trang Quản lý Voucher Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công với tài khoản Admin Điều kiện kết quả (Post-

Quản lý thông tin phiếu giảm giá, thêm và sửa thông tin phiếu giảm giá

1 Hiển thị danh sách các phiếu giảm giá đang có trong hệ thống

2 Điền thông tin phiếu giảm giá

- Sửa thông tin phiếu giảm giá

5 Hiển thị thông tin chi tiết của phiếu giảm giá

6 Người dùng sửa thông tin

Bảng 12 Usecase Quản lý phiếu giảm giá

Tên Use case Quản lý đơn hàng

Mô tả Tiếp nhận và xử lý các đơn hàng từ user

Sự kiện kích hoạt (Trigger) Vào phần Quản lý đơn hàng Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công bằng tài khoản Admin Điều kiện kết quả (Post-

Kiểm tra và cập nhật tình trạng các đơn đặt hàng

1 Hiển thị trang Danh sách đặt hàng

2 Bấm vào đơn đặt hàng

3 Hệ thống hiển thị chi tiết thông tin của đơn đặt hàng

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

Bảng 13 Usecase Quản lý đặt hàng

Tên Use case Thống kê

Mô tả Hiển thị các thông tin doanh thu và

Sự kiện kích hoạt (Trigger) Vào phần giao diện Thống kê Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công bằng tài khoản Admin Điều kiện kết quả (Post-

Các yêu cầu được xử lý hiển thị lên màn hình

1 Bấm vào trang Thống kê

2 Hệ thống hiển thị mặc định thống kê trong tuần hiện tại

3 Người dùng chọn loại hiển thị cho thông tin thống kê: theo tuần, tháng, năm hoặc phạm vi ngày cụ thể

4 Hệ thống hiển thị doanh thu, chỉ số nhập hàng, mặt hàng được xem nhiều, mặt hàng best seller Kịch bản thay thế

PHÂN TÍCH HỆ THỐNG

Kiến trúc hệ thống

Client Server: là mô hình mạng máy tính gồm có 2 thành phần chính đó là máy khách (client) và máy chủ (server) Server chính là nơi giúp lưu trữ tài nguyên cũng như cài đặt các chương trình dịch vụ theo đúng như yêu cầu của client. Ngược lại, Client bao gồm máy tính cũng như các loại thiết bị điện tử nói chung sẽ tiến hành gửi yêu cầu đến server.

Hình 8 Mô hình Client – Server

Client chính là khách hàng sử dụng dịch vụ Nó có thể là một tổ chức hay cá nhân cụ thể nào đó Và khi khái niệm này được sử dụng trong lĩnh vực kỹ thuật số thì cũng mang ý nghĩa tương tự như vậy Trong Client Server thì Client chính là một máy tính (Host) Chúng có khả năng nhận thông tin từ nhà cung cấp và sử dụng dịch vụ cụ thể (Server).

Hiển Server là từ dùng để nói về một máy chủ hoặc một phương tiện được sử dụng để phục vụ các dịch vụ nào đó Khi khái niệm này được sử dụng trong lĩnh vực công nghệ thì Server là một máy tính từ xa Chúng có chức năng là cung cấp các thông tin (dữ liệu) cho một dịch vụ cụ thể nào đó hoặc quyền truy cập đối với dịch vụ. Ưu điểm của kiến trúc Client Server:

● Tập trung: Tất cả mọi thông tin cần thiết đều sẽ được đặt ở một vị trí duy nhất.

● Bảo mật: Tất cả các dữ liệu đều sẽ được bảo vệ một cách tối đa nhờ vào hệ thống kiến trúc tập trung của mạng.

● Khả năng mở rộng: Mô hình mạng kết nối Client Server có khả năng mở rộng vô cùng tốt Chỉ cần người dùng cần sử dụng bất cứ lúc nào thì họ cũng có thể tăng được số lượng tài nguyên của mình.

● Khả năng truy cập: Tất cả mọi Client đều có khả năng đăng nhập được vào hệ thống mạng máy tính

Nhược điểm của kiến trúc Client Server:

● Tắc nghẽn lưu lượng: Trong trường hợp có quá nhiều Client tạo request từ cùng một Server thì nó có thể sẽ làm cho kết nối chậm hơn

● Chi phí: Chi phí được sử dụng để thiết lập và bảo trì Server trong Client

Server thường sẽ khá cao

● Độ bền: Client Server là mạng tập trung chính vì thế, khi Server chính xảy ra sự cố hoặc bị nhiễu thì cũng đồng nghĩa với việc toàn bộ hệ thống mạng sẽ bị gián đoạn

THIẾT KẾ DỮ LIỆU

Sơ đồ Logic

Hình 9 Sơ đồ Cơ sở dữ liệu

Mô tả chi tiết các kiểu dữ liệu Bảng User

STT Tên thuộc tính Kiểu Ghi chú

1 userId String Id của người dùng

2 userEmail String Tài khoản email của người dùng

3 userPhoneNo String SĐT của người dùng

4 isSocial String Loại tài khoản người dùng

5 userFirstName String Họ của người dùng

6 userLastName String Tên của người dùng

7 userRoles String[] Quyền của người dùng

8 userAvatar String Hình đại diện của người dùng

9 status String Trạng thái tài khoản

10 memberPoint Integer Điểm người dùng

Bảng 15 Bảng thuộc tính User

1 productId String ID của sản phẩm

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

3 subCategoryId String Tên thể loại phụ

4 price Long Giá sản phẩm

5 brandId String ID của nhãn hàng

6 detail String Chi tiết sản phẩm

7 description String Miêu tả sản phẩm

8 avgRating String Rating trung bình

9 productImage array Danh sách hình sản phẩm

Bảng 16 Bảng thuộc tính Product

1 categoryId String ID của loại hàng

2 categoryName String Tên của loại hàng

3 status String Trạng thái của loại hàng

Bảng 17 Bảng thuộc tính Category

1 subCategoryId String ID của loại hàng phụ

2 categoryId String ID của loại hàng

String Tên loại hàng phụ

Bảng 18 Bảng thuộc tính Sub_Category

1 varietyId String ID của variety

2 productId String ID của sản phẩm

5 status String Trạng thái sản phẩm

Bảng 19 Bảng thuộc tính Variety

1 attributeId String ID của thuộc tính

2 attributeType String Loại thuộc tính

3 attributeValue String Giá trị thuộc tính

Bảng 20 Bảng thuộc tính Variety_Attribute

1 varietyId String Id của variety

2 attributeId String ID của thuộc tính

Bảng 21 Bảng thuộc tính Varieties_Attributes

1 importInvoiceId String ID của hoá đơn nhập hàng

2 userId String ID của người nhập hàng

3 createdDate Date Ngày nhập hàng

4 totalPrice Long Tổng giá trị đơn hàng

Bảng 22 Bảng thuộc tính Import_Invoice

1 importInvoiceId String Id của hoá đơn nhập hàng

2 varietyId String Id của variety

Bảng 23 Bảng thuộc tính Import_Item

1 cartId String ID của giỏ hàng

2 userId String ID của người dùng

Bảng 24 Bảng thuộc tính Cart

1 cartId String ID của giỏ hàng

2 varrietyId String ID của variety

4 totalItemPrice Long Tổng giá sản phẩm

5 isSelected Boolean Có được chọn để thanh toán không

Bảng 25 Bảng thuộc tính Cart_Item

1 invoiceId String ID của hóa đơn

2 userId String ID của người mua hàng

3 createdDate Date Ngày tạo hóa đơn

4 totalPrice Long Tổng giá đơn hàng

5 discountPrice Long Giá được giảm

6 finalPrice Long Giá người dùng phải trả

7 voucherId String ID của voucher

Bảng 26 Bảng thuộc tính Invoice

1 invoiceId String ID của hóa đơn

2 varietyId String ID của variety

Bảng 27 Bảng thuộc tính Invoice_Item

1 chatRoomID String ID của phòng chat

2 user1 User Người chat thứ nhất

3 user2 User Người chat thứ nhất

Bảng 28 Bảng thuộc tính FundTransaction

1 messageID String ID của đoạn hội thoại

2 chatRoomID String ID của phòng chat

3 senderID String ID người gửi đoạn hội thoại

4 recipientID String ID người nhận đoạn hội thoại

5 content String Nội dung đoạn hội thoại

6 timestamp Date Ngày gửi đoạn hội thoại

7 messageStatus String Trạng thái đoạn hội thoại

Bảng 29 Bảng thuộc tính ChatMessage

1 voucherId String ID của phiếu giảm giá

2 type String Loại phiếu giảm giá

3 createdDate Date Ngày tạo phiếu giảm giá

4 value Long Giá trị phiếu giảm giá

5 price Long Điểm hội viên cần để sử dụng

6 maxValue Long Giá trị tối đa của phiếu giảm giá

7 minInvoiceValue Long Giá trị tối thiểu để sử dụng phiếu giảm giá

8 status String Trạng thái phiếu giảm giá

Bảng 30 Bảng thuộc tính Voucher

1 otpId String ID của otp

3 createdDate Date Ngày tạo OTP

4 expiry Date Ngày hết hạn OTP

6 userId String ID của người dùng

Bảng 31 Bảng thuộc tính OTP

3 objectId String Mã đối tượng

4 objectType String Loại đối tượng

Bảng 32 Bảng thuộc tính ViewAuditLog

4 locale String Vị trí user

6 stackTrace String Stacktrace của lỗi

7 url String Endpoint gây lỗi

Bảng 33 Bảng thuộc tính ErrorLog

THIẾT KẾ GIAO DIỆN

Danh sách các màn hình

Bảng 30 Bảng Danh sách các màn hình

Mô tả màn hình

Hình 8 Màn hình đăng nhập

Hình 9 Màn hình đăng nhập Admin page

6.2.1.2 Mô tả cách sử dụng và xử lý

STT Biến cố Xử lý

1 Email/ Mật khẩu Nhập thông tin email, mật khẩu

2 Đăng nhập Đăng nhập vào hệ thống

Bảng 31 Mô tả cách sử dụng màn hình Đăng nhập

6.2.2.1 Giao diện 6.2.2.2 Mô tả cách sử dụng và xử lý

1 Email/ Mật khẩu/Họ và tên/Số điện thoại

Nhập thông tin email, mật khẩu, họ và tên, số điện thoại để đăng ký tài khoản

2 Đăng ký Đăng ký tài khoản vào hệ thống

3 Đăng nhập bằng google Đăng nhập hệ thống bằng tài khoản google

Bảng 32 Mô tả cách sử dụng màn hình Đăng ký

Hình 10 Màn hình Trang chủ

1 Sản phẩm best seller Chuyển sang màn hình chi tiết sản phẩm khi click vào

2 Thanh tìm kiếm Thực hiện tìm kiếm sản phẩm theo keyword người dùng nhập vào

Bảng 33 Mô tả cách sử dụng màn hình Trang chủ

Hình 11 Màn hình Sản phẩm

1 Search box Nhập thông tin sản phẩm muốn tìm kiếm

2 Category Chọn Category muốn filter

3 Brand Chọn brand muốn filter

4 Sản phẩm Chọn để chuyển sang màn hình chi tiết sản phẩm

Bảng 34 Mô tả cách sử dụng màn hình Sản phẩm

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

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

1 Thông tin sản phẩm Hiển thị các thông tin của sản phẩm

2 Nút Buy now Thực hiện chuyển sang màn hình thanh toán hoá đơn với sản phẩm hiện được chọn

Thêm sản phẩm đang được chọn vào giỏ hàng

Bảng 35 Mô tả cách sử dụng màn hình Chi tiết sản phẩm

Hình 13 Màn hình Giỏ hàng

Hình 14 Màn hình thông tin thanh toán

1 Nhập thông tin người nhận hàng

Nhập thông tin người nhận hàng, thông tin cơ bản được tự động điền với thông tin của người dùng hiện tại

2 Voucher Chọn voucher giảm giá cho hoá đơn

Hiển thị các mặt hàng có trong hoá đơn, thông tin các loại phí cho hoá đơn

4 Nhập thông tin thanh toán (nếu người dùng chọn hình thức thanh toán trực tuyến)

Nhập thông tin thanh toán của cổng VNPay

Bảng 37 Mô tả cách sử dụng màn hình Thanh toán

6.2.7 Màn hình Trang chủ Admin

Hình 16 Màn hình Trang chủ Admin

1 Tìm kiếm thông tin bài cứu trợ

Tìm kiếm thông tin bài cứu trợ

Bảng 38 Mô tả cách sử dụng màn hình Trang chủ Admin

Hình 18 Màn hình tin nhắn

1 Tìm kiếm Tìm kiếm người nhận tin nhắn bằng tên

2 Danh sách người nhận tin nhắn

Danh sách người nhận tin nhắn

3 Đoạn tin nhắn Đoạn tin nhắn giữa người nhận và người gửi

4 Nhập tin nhắn Nhập tin nhắn và ấn gửi hoặc

Enter để gửi tin nhắn đến người nhận

Hình 19 Mô tả cách sử dụng màn hinh Tin nhắn

6.2.9 Màn hình Thông tin cá nhân

Hình 20 Màn hình Thông tin cá nhân

1 Thông tin tài khoản Hiện thị thông tin tài khoản hiện tại

Lịch sử các hoá đơn đã mua trong cửa hàng

Chi tiết các mặt hàng trong hoá đơn đã mua

4 Cập nhật thông tin Cập nhật lại thông tin đã chỉnh sửa trong các trường thông tin tài khoản ở trên

Bảng 39 Mô tả cách sử dụng màn hình Thông tin cá nhân

Hình 21 Màn hình Đăng ký trại cứu trợ

1 Nhập nội dung và điểm đánh giá

2 Gửi đánh giá Gửi đánh giá

Bảng 40 Mô tả cách sử dụng màn hình Đánh giá

6.2.11 Màn hình Quản lý sản phẩm

Hình 22 Màn hình Quản lý sản phẩm

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

1 Danh sách sản phẩm Danh sách các sản phẩm có trong hệ thống

2 Tìm kiếm Tìm kiếm các sản phẩm

3 Thông tin chi tiết sản phẩm

Thông tin chi tiết sản phẩm

4 Sửa thông tin sản phẩm

Sửa thông tin sản phẩm

Tạo mới một sản phẩm

Bảng 41 Mô tả cách sử dụng màn hình Quản lý sản phẩm

6.2.12 Màn hình Quản lý nhập hàng

Hình 24 Màn hình Quản lý nhập hàng

1 Thêm mới Thêm mới một đợt nhập hàng

2 Tìm kiếm Tìm kiếm đợt nhập hàng

3 Danh sách nhập hàng Danh sách các đợt nhập hàng trong hệ thống

Bảng 41 Mô tả cách sử dụng màn hình Quản lý nhập hàng

6.2.13 Màn hình Chi tiết nhập hàng

Hình 25 Màn hình Chi tiết nhập hàng

1 Thông tin chung mặt hàng

Các thông tin cơ bản của mặt hàng

2 Thông tin chi tiết Thông tin chi tiết của sản phẩm nhập gồm số lượng và đơn giá

Bảng 42 Mô tả cách sử dụng màn hình Quản lý nhập hàng

6.2.14 Màn hình Quản lý đặt hàng

Hình 26 Màn hình Quản lý đặt hàng

1 Tìm kiếm Tìm kiếm đơn đặt hàng

Danh sách các đơn đặt hàng

3 Chi tiết đơn đặt hàng

Thông tin đơn đặt hàng, tình trạng đơn hàng

4 Nút Cancel Huỷ đơn đặt hàng, đặt về trạng thái

5 Nút Confirm Xác nhận đơn hàng, tiến hành gửi hàng, đặt về trạng thái COMPLETE

Bảng 43 Mô tả cách sử dụng màn hình Quản lý đặt hàng

6.2.15 Màn hình Quản lý voucher

Hình 27 Màn hình Quản lý voucher

Danh sách các voucher hiện có trong hệ thống

2 Nút Add Mở hộp thoại thêm mới voucher

Thông tin chi tiết voucher

Thêm mới voucher với thông tin được nhập vào

Bảng 44 Mô tả cách sử dụng màn hình Quản lý voucher

Hình 28 Màn hình Thống kê

1 Biểu đồ Biểu đồ hiển thị doanh thu và thông tin nhập hàng theo thời gian được chọn

2 Option Lựa chọn hiển thị biểu đồ theo tuần, tháng, năm hoặc phạm vi ngày cụ thể

Nếu Option được chọn là SPECIFICDAY thì phần chọn ngày sẽ được hiện, cho phép người dùng chọn một phạm vi ngày cụ thể trong tháng

Bảng 45 Mô tả cách sử dụng màn hình Thống kê

CÀI ĐẶT VÀ THỬ NGHIỆM

Môi trường cài đặt

7.1.1 Môi trường cài đặt và thử nghiệm

-Môi trường Local: Github, IntelliJ, VS Code

-Deploy Back-end: Railway, Vercel

- Sau khi hoàn thành việc phát triển và thử nghiệm website để đảm bảo rằng nó hoạt động đúng và không có lỗi Sau khi kiểm thử các tính năng và cơ chế bảo mật, tất cả đều hoạt động đúng mục đích

NHẬN XÉT VÀ KẾT LUẬN

Kết quả đạt được

● Hiểu và nắm được các kiến thức về quy trình phát triển website

● Nắm rõ hơn về HTML, CSS và các framework như Angular để thiết kế giao diện website và phát triển phía Front-end

● Nắm rõ hơn về Spring Boot để phát triển phía Back-end

● Làm quen với SQL database

● Có cơ chế bảo mật API

● Giao diện người dùng thân thiện, dễ sử dụng

● Đầy đủ các chức năng cơ bản

Hạn chế

● Chưa đào sâu vào các chức năng: Các chức năng chỉ dừng ở mức có thể sử dụng được và hoạt động hiệu quả Tuy nhiên, các chức năng tiện ích vẫn cần được cải tiến thêm để nâng cao trải nghiệm người dùng

● Vì chưa được dùng cho mục đích thương mại nên chức năng kiểm tra trạng thái và vị trí đơn hàng khi được chuyển đi chưa được thực hiện

● Giao diện còn đơn giản: Giao diện vẫn chỉ dừng ở mức thân thiện với người dùng, vẫn còn có thể phát triển thêm đến mức độ tiện ích cho người dùng.

Hướng phát triển

● Mở rộng tính năng: Bổ sung các tính năng mới như tạo các gian hàng cho các nhà bán hàng trung gian, phân cấp nhà bán hàng

● Phát triển ứng dụng di động: Xây dựng phiên bản ứng dụng di động của

"Pescue Shop" để đáp ứng nhu cầu người dùng trên các thiết bị di động,tạo sự thuận tiện và trải nghiệm khi sử dụng của người dùng tốt hơn

Định dạng
Số trang	97
Dung lượng	9,24 MB