Hồ Chí Minh, ngày 01 tháng 07 năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Ngành: Công nghệ Thông tin Tên đề tài: XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG CỬA HÀNG BÁN LINH KIỆN ĐIỆN TỬ SỬ DỤNG
KHẢO SÁT HIỆN TRẠNG
Phân tích hiê ̣n trạng
Thương mại điện tử toàn cầu đang bùng nổ mạnh, và Việt Nam là một trong những nước có mức sử dụng điện thoại di động cao hàng đầu Theo báo cáo từ Picodi, cứ 10 giao dịch thì có tới 8 giao dịch được thực hiện qua internet mỗi ngày trong năm 2019, cho thấy xu hướng gia tăng thanh toán và mua sắm trực tuyến tại Việt Nam và trên toàn cầu.
Ngày nay, bên cạnh những món đồ da dụng được mua hàng ngày, các linh kiện và thiết bị điện tử ngày càng được khách hàng tin tưởng và tiêu thụ mạnh hơn Vì thế, nhu cầu xây dựng một website bán linh kiện và thiết bị điện tử trở nên thiết yếu để đáp ứng xu hướng mua sắm trực tuyến trên thị trường Nhóm đã quyết định chọn đề tài “Xây dựng và thiết kế website bán linh kiện và thiết bị điện tử” với mục tiêu tạo ra một sản phẩm có thể đáp ứng đầy đủ nhu cầu của thị trường hiện nay, đồng thời tối ưu hóa trải nghiệm người dùng và hiệu quả kinh doanh thông qua nội dung tối ưu SEO và giao diện thân thiện với người dùng.
Với đầy đủ chức năng, tính đóng gói tối ưu và giao diện nổi bật, cho phép thao tác dễ dàng, nhóm quyết định chọn phongvu.vn làm tài liệu tham khảo cho đề tài lần này.
Phân tích yêu cầu
1.2.1 Yêu cầu chức năng nghiê ̣p vụ:
- Người dùng: tên, email, mật khẩu
Thông tin sản phẩm được trình bày đầy đủ với các trường: tên sản phẩm, giá tiền, bảo hành, nhãn hiệu, mô tả và nội dung chi tiết, kèm hình ảnh minh họa để người mua có cái nhìn toàn diện Loại sản phẩm cho biết phân loại, trong khi số lượng sản phẩm cho biết số lượng tồn kho và số lượng đã bán phản ánh hiệu suất kinh doanh Trạng thái sản phẩm đã xoá được quản lý để kiểm soát hiển thị trên cửa hàng và hệ thống, đồng thời tối ưu cho SEO thông qua việc kết hợp các từ khóa liên quan như tên sản phẩm, nhãn hiệu, mô tả và hình ảnh.
- Loại sản phẩm: tên loại.
- Đơn hàng: thông tin người mua, địa chỉ, giỏ hàng, số lượng, giá, tổng giá, trạng thái đơn hàng, chi phí giao hàng.
- Sản phẩm: Theo mô ̣t tiêu chuẩn nào đó.
- Đơn hàng: Theo mô ̣t tiêu chuẩn nào đó.
- Loại sản phẩm: Theo mô ̣t tiêu chuẩn nào đó.
- Tính tổng tiền khi mua sản phẩm.
1.2.2 Bảng yêu cầu chức năng nghiê ̣p vụ:
STT Công viê ̣c Chức năng Quy định Ghi chú
1 Đăng nhâ ̣p và đăng kí
Lưu trữ Người QTV hoă ̣c người dùng phải đăng nhâ ̣p để sử dụng phần mềm, nếu người dùng chưa có tài khoản thì có thể đăng ký.
Lưu trữ QTV có thể thêm, xoá, sửa sản phẩm.
3 Tính tiền Tính toán Tính tổng tiền khi người dùng checkout sản phẩm
4 Tra cứu thông tin về sản phẩm
Tra cứu Việc tìm thông tin sản phẩm dựa trên thông tin tên sản phẩm, loại sản phẩm.
Bảng 1 Bảng yêu cầu chức năng nghiệp vụ
1.2.3 Bảng yêu cầu chức năng hê ̣ thống:
STT Nội dung Mô tả chi tiết Ghi chú
- Quản trị viên: được phép sử dụng tất cả các chức năng
- Người dùng chỉ được sử dụng ở tầng giao diện người dùng gồm các chức năng cơ bản sau: đăng kí, đăng nhập, xem hoặc mua sản phẩm…
Bảng 1 Bảng yêu cầu chức năng hệ thống
CƠ SỞ LÝ THUYẾT
MongoDB
MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL (*) hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++.
MongoDB là một cơ sở dữ liệu đa nền tảng hoạt động dựa trên hai khái niệm chính là Collection và Document, mang lại hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng để đáp ứng nhu cầu quản lý dữ liệu và phát triển ứng dụng.
2.1.1 Ưu điểm của của Mongo DB
MongoDB có khả năng làm việc với schema linh hoạt hơn so với các hệ quản trị cơ sở dữ liệu có schema cứng Schema được sinh ra để nhóm các đối tượng vào một cụm dễ quản lý, ví dụ như tạo một schema tên là Students chỉ chứa những trường liên quan đến sinh viên Trong khi đó một collection trong MongoDB có thể chứa nhiều document khác nhau, và mỗi document có thể có số trường, nội dung và kích thước khác nhau, tạo nên tính linh hoạt cao cho dữ liệu mà không bị ràng buộc bởi một cấu trúc thống nhất cho toàn bộ collection.
Cấu trúc của một đối tượng rõ ràng.
Không có các Join phức tạp.
Khả năng mở rộng cực lớn của MongoDB cho phép mở rộng dữ liệu một cách linh hoạt mà không phải lo đến các vấn đề như khóa ngoại, khóa chính hay kiểm tra ràng buộc Nhờ các cơ chế replication và sharding được MongoDB hỗ trợ, việc mở rộng trở nên thuận lợi, đồng bộ và phân phối dữ liệu hiệu quả trên nhiều nút máy chủ Nhờ đó, doanh nghiệp có thể thích ứng với khối lượng dữ liệu ngày càng lớn và tối ưu hóa hiệu suất hệ thống.
Việc sử dụng bộ nhớ trong để lưu giữ cửa sổ làm việc giúp truy cập dữ liệu nhanh hơn và tối ưu hóa hiệu suất làm việc Cập nhật được thực hiện nhanh gọn nhờ cơ chế cập nhật tại chỗ (in-place update), mang lại quá trình cập nhật mượt mà và hiệu quả.
2.1.2 Nhược điểm của của Mongo DB
Dữ liệu được caching, lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn
Như đã đề cập ở trên, mọi thay đổi đối với dữ liệu mặc định chưa được ghi ngay vào ổ cứng, vì vậy khi xảy ra mất điện đột xuất khả năng mất dữ liệu là rất cao và có thể ảnh hưởng đến tính toàn vẹn của hệ thống.
MongoDB là một hệ quản trị cơ sở dữ liệu mới ra đời và phát triển chưa lâu, nên hiện tại vẫn chưa thể hỗ trợ đầy đủ các tính năng bảo mật dữ liệu ở mức hoàn chỉnh và ổn định như các hệ quản trị cơ sở dữ liệu đi trước Vì vậy, khi triển khai MongoDB, cần cân nhắc bổ sung các biện pháp bảo mật ngoài nền tảng để đảm bảo an toàn dữ liệu và nâng cao độ tin cậy cho hệ thống.
(*): NoSQL là một dạng CSDL mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi là Not-Only SQL CSDL này được phát triển trên Javascript Framework với kiểu dữ liệu JSON (Cú pháp của JSON là “key: value”) NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS về tốc độ, tính năng,khả năng mở rộng, memory cache…
ExpressJS
Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng. Để có thể áp dụng công nghệ này cho đề tài, nhóm sẽ sử dụng Expressjs để phát triển các services là các Rest API Mục đích của việc dùng Rest API là vì chúng ta có thể dễ dàng phát triển hệ thống trên nhiều nền tảng khác không chỉ riêng cho việc viết web trực tuyến, đồng thời như đã nói ở trên về công dụng của Microservices thì phát triển hệ thống như thế này là sẽ chia hệ thống ra thành 2 thành phần đó là server và client Server ở đây chính là các services được chia nhỏ ra với ExpressJS Framework, ở đây xử lý dữ liệu sau đó sẽ trả dữ liệu có ích về cho Client hiển thị cho người dùng.
React
React là một thư viện JavaScript nguồn mở để xây dựng giao diện người dùng (UI) và các thành phần UI phức tạp Được duy trì bởi Facebook và một cộng đồng rộng lớn gồm các nhà phát triển và công ty cá nhân, React có thể làm nền tảng để phát triển các ứng dụng web và di động với hiệu suất và khả năng tái sử dụng giao diện.
NodeJS
Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng Internet có khả năng mở rộng, đặc biệt là máy chủ web Nền tảng này được triển khai bằng C và C++, sử dụng động cơ JavaScript V8 và một vòng lặp sự kiện bất đồng bộ để xử lý nhiều kết nối đồng thời với hiệu suất cao Nhờ khả năng lập trình bằng JavaScript, Node.js cho phép phát triển nhanh các ứng dụng web và API quy mô lớn, đồng thời dễ dàng mở rộng khi tải trọng tăng lên.
JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng.
Node.js ra đời nhờ những đóng góp của các lập trình viên đầu tiên của JavaScript, những người mở rộng ngôn ngữ vốn chỉ có thể thực thi trên trình duyệt thành một nền tảng có thể thực thi độc lập trên máy tính Việc chuyển đổi này cho phép JavaScript được dùng cho phát triển phía máy chủ và các ứng dụng máy tính, giúp xử lý I/O và tải công việc ở mức cao một cách hiệu quả Nhờ đó, Node.js nhanh chóng trở thành công cụ chủ lực cho phát triển server-side và các ứng dụng thời gian thực, đồng thời mở ra hệ sinh thái phong phú cho việc tối ưu hiệu suất và khả năng mở rộng của các dự án công nghệ.
NodeJS hoạt động giống với trình duyệt hiện đại và được chạy trên V8 JavaScript engine, công cụ giúp trình duyệt dịch và thực thi JavaScript Bên cạnh đó, NodeJS cung cấp một loạt thư viện và API riêng biệt không có sẵn trong V8 engine, hỗ trợ xây dựng ứng dụng phía máy chủ hiệu quả và linh hoạt.
PHÂN TÍCH TRANG WEB
Thành phần dữ liệu
Phần front-end của một trang web là lớp giao diện người dùng, nơi người dùng tương tác với nội dung và chức năng của trang Tất cả những gì bạn nhìn thấy khi duyệt web—from font chữ và màu sắc đến menu xổ xuống, thanh trượt và hiệu ứng động—được tạo ra bằng sự kết hợp của HTML, CSS và JavaScript, được trình duyệt xử lý và hiển thị trên thiết bị của người dùng Front-end đảm bảo trải nghiệm người dùng trực quan, nhanh nhạy và dễ sử dụng bằng cách tổ chức nội dung với HTML, bố trí và phong cách bằng CSS, và thêm tương tác động bằng JavaScript.
Nó sẽ thực hiện việc nhận và gửi dữ liệu giữa giao diện người dùng với Server thông qua các API.
Quy trình xử lý dữ liệu bắt đầu từ việc nhận dữ liệu gửi từ Client và lưu trữ chúng vào Database Dữ liệu thô được lấy từ Database, sau đó được xử lý để làm sạch và biến đổi thành các thông tin có ích nhằm hiển thị trên UI Cuối cùng, dữ liệu tối ưu hóa được trả về cho Client để hiển thị trên giao diện người dùng và phục vụ các thao tác tiếp theo.
3.2.1.1 Users (_id, name, email, password, addresses, role, cart, isBlock, createdAt, updatedAt)
T Tên Cột Kiểu Miền Dữ Liệu Ý Nghĩa
1 _id ObjectID Khóa chính Mã ID của user.
2 Name String Tên của user
3 Email String Địa chỉ email của người dung
4 Password String Mật khẩu của người dung
5 Addresses String Danh sách địa chỉ người dung
7 isBlock Boolean Trạng thái user
8 createdAt Date Ngày tạo user
9 updatedAt Date Ngày cập nhật user
Bảng 3 Bảng Users
3.2.1.2 Products (_id, title, prices, warranty, brand, description, content, images, category, quantity, sold, isDelete, createdAt, updatedAt)
T Tên Cột Kiểu Miền Dữ Liệu Ý Nghĩa
1 _id ObjectID Khóa chính Mã ID của sản phẩm.
2 Title String Tên của sản phẩm
3 Prices Number Giá sản phẩm
4 Warranty String Hạn bảo hành sản phẩm
6 Description String Mô tả sản phẩm
7 Content String Nội dung sản phẩm
9 Category String Loại sản phẩm
10 Quantity Number Số lượng sản phẩm
11 Sold Number Số sản phẩm đã bán
12 isDelete Boolean Trạng thái sản phẩm (Đã xoá)
13 createdAt Date Ngày tạo sản phẩm
14 updatedAt Date Ngày cập nhật sản phẩm
Bảng 3 Bảng Products 3.2.1.3 Categories (_id, name, createdAt, updatedAt)
T Tên Cột Kiểu Miền Dữ Liệu Ý Nghĩa
1 _id ObjectID Khóa chính Mã ID của loại sản phẩm.
2 Name String Tên của loại sản phẩm
3 createdAt Date Ngày tạo sản phẩm
4 updatedAt Date Ngày cập nhật sản phẩm
Bảng 3 Bảng Categories
3.2.1.4 Checkout (_id, userId, name, email, address, cart, status, payments, tax, deliveryCharges, createdAt, updatedAt)
T Tên Cột Kiểu Miền Dữ Liệu Ý Nghĩa
1 _id ObjectID Khóa chính Mã ID của đơn hàng.
2 userId String Mã người mua
3 Name String Tên người mua
4 Email String Email người mua
5 Address String Địa chỉ người mua
7 Status Boolean Trạng thái đơn hàng
8 Total Number Tổng đơn hàng
9 Payments String Trạng thái thanh toán
10 Tax Number Thuế đơn hàng
11 deliveryCharges String Chi phí giao hàng
12 createdAt Date Ngày tạo đơn hàng
13 updatedAt Date Ngày cập nhật
Bảng 3 Bảng Checkout
Thiết kế dữ liệu
Sơ đồ thiết kế dữ liệu
Hình 3 Thiết kế dữ liệu
MÔ HÌNH HOÁ YÊU CẦU VÀ PHÂN TÍCH HỆ THỐNG
Các tác nhân và chức năng
Tên tác nhân Chức năng
- Xem lịch sử đặt hàng
Quản trị viên - Đăng nhập
- Quản lý loại sản phẩm
Bảng 4 Bảng các tác nhân và chức năng
4.1.1 Mô tả chi tiết từng chức năng của các tác nhân:
4.1.1.1 Mô tả chức năng của quản trị viên:
STT Chức năng Mô tả
1 Đăng nhập Đăng nhập vào hệ thống
2 Thêm sản phẩm QTV sẽ thêm sản phẩm mới
QTV có quyền cập nhật sản phẩm nếu có sản phẩm có sai sót
4 Xoá sản phẩm QTV sẽ xoá sản phẩm khi không kinh doanh mặt hàng đó nữa
5 Thêm loại sản phẩm QTV có quyền thêm loại sản phẩm
QTV có quyền xoá loại sản phẩm
7 Tìm kiếm sản phẩm QTV có quyền tìm kiếm sản phẩm
QTV sẽ xác nhận đơn hàng khi người dùng đã check out
9 Xem người dùng QTV có quyền xem những khách hàng đã sử dụng website
10 Thống kê Thống kê sản phẩm đã bán, doanh thu theo một tiêu chuẩn nào đó
11 Khuyến mãi Quản lý chính sách khuyến mãi theo loại sản phẩm
Bảng 4 Bảng mô tả chức năng của quản trị viên
4.1.1.2 Mô tả chức năng của khách:
12 Đăng kí Đăng kí tài khoản
13 Xem sản phẩm Khách có thể xem, tìm kiếm sản phẩm, lọc sản phẩm, sắp xếp sản phẩm
Bảng 4 Bảng mô tả chức năng của khách
4.1.1.3 Mô tả chức năng của khách hàng:
14 Đăng nhập Đăng nhập vào website
15 Xem sản phẩm Khách hàng có thể xem, tìm kiếm sản phẩm, lọc sản phẩm, sắp xếp sản phẩm
16 Lấy lại mật khẩu Lấy lại mật khẩu nếu người dùng quên mật khẩu
17 Quản lý giỏ hàng Người dùng quản lý giỏ hàng của mình
18 Đặt hàng Đặt hàng khi khách hàng đã thêm món hàng vào giỏ hàng
19 Thanh toán Thanh toán bằng cách liên kết với tài khoản paypal
20 Xem các sản phẩm liên quan đến sản phẩm khác
Khi xem sản phẩm, người dùng có thể xem các sản phẩm có liên quan đến loại sản phẩm người dùng đang xem.
21 Cập nhật thông tin Khách hàng có thể tự cập nhật thông tin cá nhân
Bảng 4 Bảng mô tả chức năng của khách hàng
Sơ đồ use-case
Hình 4 Sơ đồ tổng quát của hệ thống
Hình 4 Biểu đồ usecase đăng kí đăng nhập
Hình 4 Biểu đồ uscase tìm kiếm sản phẩm
Hình 4 Biểu đồ usecase quản lí đơn hàng
Hình 4 Biểu đồ usecase mua hàng của khách hàng
Hình 4 Sơ đồ thống kê
4.2.2.1 Đặc tả use-case đăng nhập
Mô tả Cho phép đăng nhập vào hệ thống.
Tác nhân kích hoạt Người dùng, admin
Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống
(1)Click vào nút đăng nhập
(3)Nhấn nút “Đăng Nhập” hoặc nhấn Enter
(4)Nếu đăng nhập thất bại, sẽ có thông báo lỗi
(5)Nếu đăng nhập thành công thì có thể thực hiện được các tác vụ được cho phép.
Luồng sự kiện rẽ nhánh:
- Thành viên đăng nhập không thành công: hệ thống báo quá trình đăng nhập không thành công Chọn đăng ký hay đăng nhập lại.
- Hệ thống yêu cầu nhập lại tên và mật khẩu Nếu đồng ý quay trở lại bước 2 UC kết thúc.
- Thành viên đăng nhập thành công có thể sử dụng các chức năng mà hệ thống cung cấp.
Bảng 4 Đặc tả use case đăng nhập
4.2.2.2 Đặc tả use-case đăng ký
Mô tả Cho phép khách xem đăng ký làm thành viên của hệ thống.
Tác nhân kích hoạt Khách xem
Tiền điều kiện Chưa có tài khoản
(1)Vào trang chủ của website
(2)Chọn Login sau đó chọn Register trong giao diện Login
(3)Tiến hành nhập thông tin khách hàng muốn thêm vào, bao gồm : tên, email, password.
(4)Nhập xong bấm nút “Register”
(5)Nếu thêm thành công, thông tin đọc giả sẽ được cập nhật vào CSDL và hiển thị thông báo “Đăng kí thành công”.
(6) Nếu thêm thất bại, thông báo lỗi và quay lại bước 3. Thành viên đăng nhập thành công có thể sử dụng các chức năng mà hệ thống cung cấp.
Bảng 4 Đặc tả use case đăng ký
4.2.2.3 Đặc tả use-case thanh toán
Mô tả Khách hàng muốn thanh toán sản phẩm đã đưa và giỏ hàng
Tác nhân kích hoạt Khách hàng
Tiền điều kiện Đã đăng nhập thành công và đã có sản phẩm trong giỏ hàng
(1)Click vào biểu tượng giỏ hàng
(2)Điều chỉnh số lượng các sản phẩm trong giỏ hàng.
Khách hàng kiểm tra lại đầy đủ các thông tin: tên, địa chỉ và số điện thoại; nhập địa chỉ giao hàng và xác nhận thời gian giao hàng mong muốn, đồng thời chọn hình thức thanh toán giữa chuyển khoản và tiền mặt để hoàn tất đơn hàng.
(4)Nếu thành công sẽ có thông báo trên màn hình:” Đã thanh toán thành công” UC kết thúc.
(5)Ngược lại thì thông báo:” Thanh toán thất bại” Quay lại bước 3.
Bảng 4 Đặc tả use case thanh toán 4.2.2.4 Đặc tả use-case tìm kiếm sản phẩm
Use Case Tìm Kiếm Sản Phẩm
Mô tả Cho phép tìm kiếm thông tin của sản phẩm
Tác nhân kích hoạt Khách hàng, quản trị viên
Tiền điều kiện Sản phẩm cần tìm phải có trong CSDL
(1)Người dung chọn mục tìm kiếm.
(2)Chọn tìm kiếm theo tên, tìm theo nhà cung cấp, tìm theo giá.
(3)Bấm nút Search hoặc enter
(4)Hệ thống báo kết quả tìm kiếm Kết thúc UC.
Bảng 4 Đặc tả use case tìm kiếm sản phẩm
4.2.2.5 Đặc tả use-case thêm sản phẩm
Use Case Thêm Sản Phẩm
Mô tả Thêm sản phẩm mới vào trang web
Tác nhân kích hoạt Admin
Tiền điều kiện Admin phải đăng nhập thành công
(1)Click vào Products trong trang admin
(3)Thêm các thông tin của sản phẩm
(4)Sau khi điền đầy đủ thông tin, chọn Save
(5)Xuất hiện sản phẩm mới nếu thêm thành công, nếu không thì thông báo lỗi.
Bảng 4 Đặc tả use case thêm sản phẩm
Use Case Xóa Sản Phẩm
Mô tả Khi cửa hàng không kinh doanh sản phẩm đó nữa
Tác nhân kích hoạt Admin
Tiền điều kiện Sản phẩm cần xóa phải có trong CSDL
(1)Click vào Product trong trang admin
(2)Chọn sản phẩm cần xóa.
(4)Sản phẩm sẽ mất nếu xóa thành công, nếu không thì thông báo lỗi.
Bảng 4 Đặc tả use case xoá sản phẩm
4.2.2.6 Đặc tả use-case xem sản phẩm
Use Case Xem Sản Phẩm
Mô tả Cho phép tìm kiếm thông tin của sản phẩm
Tác nhân kích hoạt Khách hàng, quản trị viên
(1)Người dung chọn sản phẩm cần xem.
(2)Hệ thống hiển thị thông tin về sản phẩm được chọn.
Bảng 4 Đặc tả use case xem sản phẩm 4.2.2.7 Đặc tả use-case xem thông tin cá nhân
Use Case Xem Thông Tin Cá Nhân
Mô tả Cho phép thành viên thay đổi thông tin đăng ký.
Tác nhân kích hoạt Khách hàng, quản trị viên
Tiền điều kiện Thành viên phải đăng nhập vào hệ thống.
(1)Thành viên chọn chức năng xem thông tin cá nhân.
(2) Hệ thống hiển thị form thông tin với các thông tin của khách hàng.
Bảng 4 Đặc tả use case xem thông tin cá nhân
4.2.2.8 Đặc tả use-case thêm giỏ hàng
Use Case Thêm giỏ hàng
Mô tả Cho phép khách hàng đưa sản phẩm đã chọn vào giỏ hàng.
Tác nhân kích hoạt Khách hàng
Tiền điều kiện Sản phẩm đã được chọn.
(1)Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng
(2)Nếu chưa chọn sản phẩm mà nhấn nút thêm vào giỏ hàng thì thực hiện luồng rẽ nhánh A1
(3)- Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng
(5)Luồng rẽ nhánh A1: chưa chọn sản phẩm cần mua
- Hệ thống thông báo sản phẩm chưa được chọn
- Hiển thị sản phẩm để khách hàng chọn
- Quay lại bước 1 của luồng sự kiện chính.
Bảng 4 Đặc tả use case thêm vào giỏ hàng 4.2.2.9 Đặc tả use-case xác nhận đơn hàng
Use Case Xác nhận đơn hàng
Mô tả UC cho phép nhân viên nhận đơn hàng và giao hàng theo yêu cầu.
Tác nhân kích hoạt Nhân viên hệ thống.
Tiền điều kiện Thành viên phải đăng nhập vào hệ thống.
(1)Nhân viên nhận được đơn hàng cần thực hiện.
(2)Thay đổi trạng thái đơn hàng.
(3)Gửi thông tin phản hồi.
Bảng 4 Đặc tả use case nhận và giao hàng
4.2.2.10 Đặc tả use-case cập nhật thông tin sản phẩm
Use Case Cập Nhật Thông Tin Sản Phẩm
Mô tả Khi có sai sót thông tin khi thêm sản phẩm hoặc sửa đổi thông tin sản phẩm
Tác nhân kích hoạt Admin
Tiền điều kiện Phải có sản phẩm cần chỉnh sửa trong CSDL
(1)Click vào Product trong trang admin
(2)Chọn sản phẩm cần chỉnh sửa thông tin.
(3)Click icon “Edit” để chỉnh sửa
(4)Tiến hành sửa các thông tin cần thiết cho sản phẩm.
(5)Sửa xong bấm nút “Save”
Khi người dùng sửa thông tin sản phẩm thành công, dữ liệu sẽ được cập nhật vào CSDL và hệ thống hiển thị thông báo "Sửa thông tin sản phẩm thành công"; ngược lại, nếu chỉnh sửa thất bại, hệ thống sẽ hiện thông báo lỗi và cho phép người dùng nhập lại thông tin để thử chỉnh sửa lần nữa.
Bảng 4 Đặc tả use case cập nhật thông tin sản phẩm 4.2.2.11 Đặc tả use-case thêm loại sản phẩm
Use Case Thêm Loại Sản Phẩm
Mô tả Thêm loại sản phẩm mới vào trang web
Tác nhân kích hoạt Admin
Tiền điều kiện Admin đã đăng nhập thành công
(1)Click vào Category trong trang admin
(3)Thêm các thông tin của sản phẩm
(4)Sau khi điền đầy đủ thông tin, chọn Save
(5)Thông báo “created category” nếu thêm loại sản phẩm thành công, nếu không thì thông báo lỗi.
Bảng 4 Đặc tả use case thêm loại sản phẩm
4.2.2.12 Đặc tả use-case xoá loại sản phẩm
Use Case Xóa Loại Sản Phẩm
Mô tả Khi cửa hàng không kinh doanh loại sản phẩm đó nữa
Tác nhân kích hoạt Admin
Tiền điều kiện Loại sản phẩm cần xóa phải có trong CSDL
(1)Click vào Category trong trang admin
(2)Chọn loại sản phẩm cần xóa.
(4)Thông báo “deleted category” nếu xóa loại sản phẩm thành công, nếu không thì thông báo lỗi.
Bảng 4 Đặc tả use case xoá loại sản phẩm 4.2.2.13 Đặc tả use-case cập nhật thông tin loại sản phẩm
Use Case Cập Nhật Thông Tin Loại Sản Phẩm
Mô tả Khi có sai sót thông tin khi thêm loại sản phẩm hoặc sửa đổi thông tin loại sản phẩm
Tác nhân kích hoạt Admin
Tiền điều kiện Phải có loại sản phẩm cần chỉnh sửa trong CSDL
(1)Click vào Category trong trang admin
(2)Chọn loại sản phẩm cần chỉnh sửa thông tin.
(3)Click “Edit” để chỉnh sửa
(4)Tiến hành sửa các thông tin cần thiết cho loạisản phẩm.
(5)Sửa xong bấm nút “Save”
Khi chỉnh sửa loại sản phẩm thành công, thông tin được cập nhật vào cơ sở dữ liệu (CSDL) và hệ thống sẽ hiển thị thông báo thành công Ngược lại, nếu chỉnh sửa thất bại, hệ thống sẽ hiển thị thông báo lỗi và yêu cầu người dùng nhập lại thông tin để thử lại.
Bảng 4 Đặc tả use case cập nhật loại sản phẩm
4.2.2.14 Đặc tả use-case quên mật khẩu
Use Case Quên Mật Khẩu
Mô tả Cho phép thay đổi mật khẩu tài khoản của thành viên.
Tác nhân kích hoạt Thành viên
Tiền điều kiện Đã có tài khoản và mật khẩu đăng nhập không đúng
(1)Vào trang chủ của website
(2)Chọn Login sau đó chọn Forgot my password trong giao diện Login.
(3)Tiến hành nhập email đã sử dụng để đăng ký tài khoản.
(4)Nhập xong bấm nút “submit”.
(5)Đăng nhập vào tài khoản email và kiểm tra hộp thư.
Nhấn vào liên kết nhận được để tới giao diện đổi mật khẩu, sau đó nhập mật khẩu mới và xác nhận mật khẩu mới Nếu xác nhận thành công, hệ thống sẽ hiển thị thông báo “Đổi mật khẩu thành công” Quay về trang đăng nhập và đăng nhập lại để hoàn tất quy trình UC kết thúc.
(7) Nếu thất bại, thông báo lỗi và quay lại bước 2.
Thành viên đăng nhập thành công có thể sử dụng các chức năng mà hệ thống cung cấp.
Bảng 4 Đặc tả use case quên mật khẩu
Biểu đồ hoạt động
Hình 4 Biểu đồ hoạt dộng đăng ký thành viên 4.3.2 Đăng nhập vào hệ thống:
Hình 4 Biểu đồ hoạt dộng đăng nhập hệ thống
Hình 4 Biểu đồ hoạt động đổi mật khẩu
Hình 4 Biểu đồ hoạt động tìm kiếm sản phẩm
Hình 4 Biểu đồ hoạt động xem sản phẩm 4.3.6 Xem giỏ hàng:
Hình 4 Biểu đồ hoạt động xem giỏ hàng
4.3.7 Xem thông tin cá nhân:
Hình 4 Biểu đồ hoạt động xem thông tin cá nhân
THIẾT KẾ GIAO DIỆN
Trang người dùng
- Có các input để người dùng nhập thông tin đăng nhập.
- Button “Login” để người dùng đăng nhập vào trang web.
- Button “Register” để người dùng đăng kí tài khoản.
- Có các input để người dùng nhập thông tin đăng kí.
- Button “Register” để người dùng đăng kí tài khoản.
- Button “Login” để người dùng đăng nhập nếu đã có tài khoản.
- Chứa các chức năng của khách hàng.
- Chứa textbox để tìm kiểm sản phẩm.
- Có icon giỏ hàng để người dùng đã đăng nhập có thể mua sản phẩm.
- Chứa tất cả các loại sản phẩm trong cửa hàng.
- Thanh “Filter” cho phép khách hàng tìm sản phẩm theo loại.
- Thanh “SortBy” cho phép khách hàng xem sản phẩm theo một tiêu chuẩn nào đó.
Hình 5 Trang sản phẩm 5.1.5 Trang chi tiết sản phẩm
Hình 5 Trang chi tiết sản phẩm
5.1.6 Trang danh sách địa chỉ khách hàng
- Hiển thị danh sách sản phẩm.
- Button “X” cho phép người dùng xoá địa chỉ đã chọn.
- “ADD New Address” cho phép người dùng thêm một địa chỉ mới.
Hình 5 Trang danh sách địa chỉ khách hàng
- Button “+”, “-” cho phép người dùng chỉnh số lượng sản phẩm.
- Button “X” cho phép người dùng xoá sản phẩm không muốn chọn.
- Button “Checkout” cho phép người dùng tiếp tục mua hàng.
- Danh sách địa chỉ cho phép người dùng chọn địa chỉ giao hàng.
- Input “Your Discount Code” cho phép người dùng chọn mã giảm giá.
- Button “Order” cho phép người dùng dặt hàng thanh toán tại nhà.
- Button “Paypal” cho phép người dùng đặt hàng thanh toán online.
5.1.9 Trang xem lịch sử giao dịch
- Button Cancel cho phép người dùng huỷ hàng khi hàng chưa được xác nhận.
- “ViewDetail” cho phép người dùng xem chi tiết đơn hàng.
Trang quản trị người dùng
- Hiển thị các thống kê của cửa hàng.
5.2.2 Trang quản lý người dùng
- Hiển thị thông tin của khách hàng.
- Button “BlockAcount” sẽ khoá tài khoản khách hàng nếu vi phạm chính sách của cửa hàng.
5.2.3 Trang quản lý sản phẩm
- Button “Create Product” cho phép tạo một sản phẩm mới.
- Icon “Edit” cho phép sửa thông tin sản phẩm
- Icon “X” cho phép xoá sản phẩm.
- Button “Prev/Next” có chức năng phân trang
Hình 5 Trang quản lý sản phẩm
5.2.4 Trang quản lý loại sản phẩm
- Input “Search” cho phép người dùng tìm kiếm loại sản phẩm.
- Input “Category” cho phép người dùng thêm/sửa loại sản phẩm
Hình 5 Trang quản lý loại sản phẩm
5.2.5 Trang quản lý đơn hàng
- Icon “Export Bill” cho phép người quản trị xuất đơn hàng khi gọi điện xác nhận thành công
- “ViewDetail” cho phép người dùng xem chi tiết đơn hàng.
Hình 5 Trang quản lý đơn hàng5.2.6 Trang chi tiết đơn hàng
- Button “Bill” dùng để in hoá đơn.
Hình 5 Trang xuất hoá đơn
Để cài đặt ứng dụng
Máy có cài đặt NodeJS
Máy phải có Git Bash
6.1.1 Các bước cài đặt Ở bài hướng dẫn này, nhóm sử dụng IDE là Visual Studio Code
Clone hoặc download project từ link github: https://github.com/sttinh99/client (bên phía client) https://github.com/sttinh99/API-TLCN (bên server)
Sau khi giải nén, sẽ được hai thư mục là client và API-TLCN
Mở hai thư mục đó lên bằng visual studio code ta sẽ được giao diện như sau:
Hình 6 Giao diện visual studio code (client)
Hình 6 Giao diện visual studio code (server)
Trong trường hợp máy chủ chưa có file env, hãy tạo một file có tên env và điền đầy đủ các thông tin như hình minh hoạ dưới đây File env được tạo ra để bạn có thể cấu hình các tham số môi trường cơ bản cho dự án một cách dễ dàng hơn, giúp quá trình triển khai và vận hành trên máy chủ diễn ra suôn sẻ.
Tại mỗi giao diện ta mở terminal bằng cách:
From the top taskbar, open the integrated terminal by selecting Terminal > New Terminal or by pressing Ctrl+Shift+`, and once the Command Line window appears, run npm install to install any missing libraries and dependencies your project needs.
Hình 6 Màn hình Intergrate Command Line (client)
Hình 6 Màn hình Intergrate Command Line (server)
Tại giao diện phía client chạy lệnh “npm start” ta sẽ được kết quả như sau.
Hình 6 Màn hình Intergrate Command Line (client)
Tại giao diện phía server chạy lệnh “npm run dev” ta sẽ được kết quả như sau.
Hình 6 Màn hình Intergrate Command Line (server)
Kiểm thử phần mềm
Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu.
Description Test steps Expected Output Result
1 Đăng ký tài khoản user
1 Nhâ ̣p các thông tin yêu cầu trên màn hình: họ tên, email, mật khẩu
2 Nhấn nút Đăng ký Đăng ký thành công chuyển sang màn chính với thông tin đã đăng ký
2 Kiểm tra những trường hợp không diền đầy đủ
1 Bỏ trống một trong các trường và nhấn đăng ký
Yêu cầu nhâ ̣p lại thông tin
3 Kiểm tra nhâ ̣p email đã tồn tại trong hê ̣ thống
1 Nhâ ̣p các thông tin yêu cầu trên và nhâ ̣p email đã tồn tại trong hê ̣ thống
Hê ̣ thống không cho tạo tài khoản vì email đã tồn tại và yêu cầu phải nhâ ̣p lại
4 Kiểm tra mật khẩu 1 Nhâ ̣p các thông tin yêu cầu trên
2 Nếu độ dài mật khẩu