• Hạn chế: Các website bán sách khác thường có giao diện với một ngôn ngữ, website trong nước hầu như không hỗ trợ việc vận chuyển sách cho người ở nước ngoài và các website ở nước ngoài
CÁC CÔNG NGHỆ SỬ DỤNG
Tổng quan về MERN Stack
MERN là một công nghệ stack mạnh mẽ giúp xây dựng ứng dụng web toàn diện, sử dụng các công nghệ như MongoDB, Express, React và Node.js Nhờ vào sự kết hợp này, các nhà phát triển có thể tạo ra những ứng dụng web động và tương thích với nhiều nền tảng khác nhau.
MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) dựa trên tài liệu, chuyên dùng để lưu trữ dữ liệu ứng dụng.
• Tầng hiện thị front-end (ReactJS): là một thư viện JavaScript để xây dựng các giao diện người dùng động và phản hồi nhanh
Tầng ứng dụng bao gồm hai thành phần chính: ExpressJS và NodeJS ExpressJS là một framework web mạnh mẽ được phát triển trên nền tảng Node.js, cung cấp các tính năng quan trọng như định tuyến, middleware và xử lý lỗi Trong khi đó, NodeJS là nền tảng cho phép xây dựng các ứng dụng web bằng ngôn ngữ JavaScript ở phía máy chủ, mang lại hiệu suất cao và khả năng mở rộng linh hoạt cho các dự án phát triển web.
MERN stack là một bộ công nghệ mạnh mẽ cho phát triển ứng dụng web, bao gồm MongoDB để lưu trữ dữ liệu, Express để xây dựng API và xử lý yêu cầu HTTP, React cho việc tạo giao diện người dùng động, và Node.js để triển khai ứng dụng trên phía máy chủ Sự kết hợp này mang lại một môi trường phát triển đơn giản và hiệu quả.
ReactJS
ReactJS là thư viện JavaScript mã nguồn mở, được Facebook phát triển, nhằm xây dựng giao diện người dùng (UI) phản hồi nhanh cho các ứng dụng web động Nhờ vào tính linh hoạt và hiệu suất cao, ReactJS đã trở thành một trong những công nghệ hàng đầu trong việc phát triển các ứng dụng web từ đơn giản đến phức tạp.
Một số tính năng và lợi ích chính:
ReactJS là một thư viện mạnh mẽ cho phép phát triển giao diện người dùng dựa trên các thành phần (Component) Việc sử dụng các thành phần giúp tái sử dụng mã, đồng thời chia nhỏ giao diện lớn thành những phần nhỏ hơn, từ đó dễ dàng quản lý và bảo trì hơn.
ReactJS sử dụng Virtual DOM, một cấu trúc dữ liệu giúp tối ưu hóa hiệu suất ứng dụng Virtual DOM là bản sao của DOM thực, cho phép ReactJS cập nhật giao diện nhanh chóng bằng cách chỉ thay đổi các thành phần thực sự đã thay đổi.
JSX là một tính năng của ReactJS cho phép kết hợp mã JavaScript và HTML trong cùng một tệp Việc sử dụng JSX giúp tạo ra các giao diện người dùng dễ đọc và dễ hiểu hơn.
• Hỗ trợ cho mobile: ReactJs cũng có thể được sử dụng để phát triển các ứng dụng di động với sự hỗ trợ của React Native
ReactJS đã trở thành một trong những công nghệ phổ biến nhất để xây dựng ứng dụng web động nhờ vào hàng nghìn thư viện và công cụ được phát triển nhằm hỗ trợ việc phát triển ứng dụng.
ExpressJS
ExpressJS là một framework phát triển ứng dụng web dựa trên Node.js, cung cấp các tính năng và công cụ giúp phát triển ứng dụng web một cách nhanh chóng và dễ dàng.
ExpressJS hỗ trợ định tuyến yêu cầu HTTP đến các URL cụ thể, cho phép thực hiện các thao tác như xử lý dữ liệu, truy xuất cơ sở dữ liệu và tạo phản hồi HTTP hiệu quả.
Middleware trong ExpressJS cho phép thực hiện các tác vụ như xác thực, nén dữ liệu và kiểm tra lỗi trước khi xử lý yêu cầu của người dùng, giúp cải thiện hiệu suất và bảo mật của ứng dụng.
• Template engine: ExpressJS cho phép sử dụng các trình biên tập template engine như EJS, Pug, để tạo ra các giao diện người dùng tương tác
• Static file server: ExpressJS có khả năng phục vụ các tệp tĩnh (hình ảnh, tài liệu, CSS…) cho các ứng dụng web
Với các tính năng nổi bật, ExpressJS là một trong những framework phát triển ứng dụng web phổ biến nhất, được ưa chuộng trong nhiều dự án Framework này hỗ trợ phát triển các ứng dụng web động, từ những trang web tĩnh đơn giản đến các ứng dụng web phức tạp với nhiều chức năng đa dạng.
MongoDB
MongoDB là một hệ thống cơ sở dữ liệu NoSQL mã nguồn mở, được phát triển bởi MongoDB Inc Hệ thống này sử dụng định dạng dữ liệu JSON để lưu trữ thông tin, thay vì áp dụng cấu trúc bảng và hàng như trong các cơ sở dữ liệu quan hệ truyền thống.
Một số tính năng và lợi ích chính:
MongoDB cung cấp khả năng lưu trữ tài liệu JSON với cấu trúc dữ liệu linh hoạt và nhiều kiểu dữ liệu khác nhau Điều này giúp việc lưu trữ và truy xuất dữ liệu trở nên dễ dàng và linh hoạt hơn so với các hệ quản trị cơ sở dữ liệu quan hệ truyền thống.
MongoDB cho phép phân tán dữ liệu trên nhiều nút máy chủ, giúp mở rộng hệ thống cơ sở dữ liệu và nâng cao khả năng xử lý.
MongoDB cung cấp tính năng kiểm soát phiên biển dữ liệu, giúp đảm bảo tính toàn vẹn và sự nhất quán của dữ liệu trong hệ thống.
MongoDB sở hữu tính năng tìm kiếm đa dạng, cho phép người dùng tìm kiếm dữ liệu theo nhiều tiêu chí khác nhau và định dạng kết quả tìm kiếm linh hoạt.
MongoDB hỗ trợ đa dạng các ngôn ngữ lập trình, giúp phát triển ứng dụng trên nhiều nền tảng khác nhau một cách linh hoạt và hiệu quả.
MongoDB là lựa chọn phổ biến cho các ứng dụng web và di động, đặc biệt trong các dự án cần mở rộng và xử lý lượng dữ liệu lớn Sự ưu tiên cho MongoDB so với MySQL xuất phát từ khả năng linh hoạt trong việc quản lý dữ liệu phi cấu trúc và khả năng mở rộng dễ dàng.
MongoDB mang lại tính linh hoạt vượt trội nhờ khả năng lưu trữ các tài liệu JSON với nhiều kiểu dữ liệu và cấu trúc khác nhau Điều này giúp việc lưu trữ và truy xuất dữ liệu trở nên dễ dàng và linh hoạt hơn so với MySQL, nơi mà cấu trúc bản cố định và các kiểu dữ liệu được xác định trước là một hạn chế lớn.
MongoDB cung cấp khả năng mở rộng linh hoạt, cho phép mở rộng dữ liệu trên nhiều nút máy chủ, từ đó nâng cao khả năng xử lý hệ thống cơ sở dữ liệu vượt trội hơn so với MySQL.
MongoDB nổi bật với tính năng tìm kiếm phong phú, cho phép người dùng tìm kiếm dữ liệu theo nhiều tiêu chí khác nhau và tùy chỉnh định dạng kết quả Trong khi đó, MySQL chỉ hỗ trợ tìm kiếm truyền thống thông qua các câu lệnh SQL.
NodeJS
Node.js là nền tảng phát triển dựa trên JavaScript, hỗ trợ xây dựng ứng dụng back-end và server-side trên máy chủ Với kiến trúc sự kiện và không đồng bộ, Node.js cho phép xử lý nhiều yêu cầu đồng thời một cách hiệu quả.
Một số đặc điểm và tính năng:
Node.js mang lại hiệu suất cao nhờ kiến trúc không đồng bộ và khả năng xử lý đồng thời các yêu cầu Được tối ưu hóa cho các tác vụ I/O nặng, Node.js giúp cải thiện tốc độ và hiệu suất của ứng dụng.
Node.js cho phép các nhà phát triển sử dụng JavaScript để xây dựng ứng dụng back-end, giúp đơn giản hóa quá trình phát triển cho những ai đã quen thuộc với ngôn ngữ này.
Node.js sở hữu một thư viện mở rộng đa dạng và phong phú, giúp các nhà phát triển dễ dàng và nhanh chóng xây dựng ứng dụng.
Node.js hỗ trợ đa dạng các giao thức và chuẩn như HTTP, TCP, DNS và TLS, giúp phát triển các ứng dụng back-end phức tạp và đáp ứng nhiều nhu cầu khác nhau.
Node.js cho phép triển khai và quản lý ứng dụng một cách dễ dàng, giúp các nhà phát triển và quản trị viên quản lý hiệu quả hơn.
Node.js là một công nghệ phổ biến cho phát triển ứng dụng web back-end, dịch vụ web và ứng dụng mạng Nó cũng được ứng dụng rộng rãi trong xử lý dữ liệu thời gian thực và các giải pháp IoT.
Lý do sử dụng NodeJS:
Node.js nổi bật với hiệu suất cao nhờ khả năng xử lý đồng thời và không đồng bộ, giúp tăng cường tốc độ và hiệu quả trong việc xử lý yêu cầu Điều này khiến Node.js trở thành lựa chọn lý tưởng cho các ứng dụng web thời gian thực và các ứng dụng mạng phức tạp.
Node.js sử dụng JavaScript, một ngôn ngữ lập trình phổ biến trong phát triển web, giúp giảm thời gian và chi phí đào tạo cho các nhà phát triển Việc áp dụng JavaScript cho phát triển back-end không chỉ tăng tính nhất quán mà còn dễ dàng bảo trì ứng dụng.
Node.js hỗ trợ đa nền tảng, cho phép chạy trên nhiều hệ điều hành như Windows, Linux và macOS Điều này giúp đơn giản hóa quá trình phát triển và triển khai ứng dụng trên các nền tảng khác nhau.
Node.js sở hữu một cộng đồng phát triển mạnh mẽ, mang đến nhiều thư viện và module mã nguồn mở miễn phí Sự hỗ trợ này giúp đơn giản hóa quá trình phát triển ứng dụng, đồng thời giảm thiểu thời gian và chi phí cho các dự án.
Node.js cung cấp công cụ quản lý gói phần mềm như npm, giúp các nhà phát triển dễ dàng và hiệu quả trong việc quản lý các module và thư viện sử dụng trong ứng dụng.
Node.js hỗ trợ đa dạng các giao thức và chuẩn như HTTP, TCP, DNS và TLS, cho phép phát triển các ứng dụng back-end phức tạp và đáp ứng nhiều yêu cầu khác nhau.
Node.js cho phép tích hợp linh hoạt với nhiều công nghệ khác như MongoDB, Redis, Elasticsearch và RabbitMQ, từ đó giúp tối ưu hóa thời gian và chi phí trong quá trình phát triển ứng dụng.
Node.js mang lại tính linh hoạt cao cho các nhà phát triển, cho phép họ tùy biến và mở rộng ứng dụng theo nhiều cách khác nhau Điều này giúp đáp ứng nhanh chóng và hiệu quả các yêu cầu và thay đổi từ khách hàng.
THU THẬP, PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU
Thu thập yêu cầu
Bảng 3.1: Bảng mô tả yêu cầu người dùng
Loại người dùng Yêu cầu tính năng với trang Web
Admin Website • Có thể truy cập vào hệ thống quản lý danh mục
• Có thể tùy chỉnh, cập nhật sản phẩm
• Đánh giá Website thường xuyên, nếu có vấn đề thì giải quyết nhanh chóng
User • Truy cập vào trang Web, xem được các sản phẩm sẵn có
• Có thể đăng nhập, cho sản phẩm vào giỏ hàng, thanh toán với các phương thức thanh toán hiện đại
• Tìm kiếm được sản phẩm ưng ý
• Bình luận và đánh giá sách
Guest • Truy cập vào trang Web, đọc các mô tả về sách.
Phân tích yêu cầu
1 Tìm kiếm sản phẩm: Khách hàng truy cập vào website, tìm kiếm sản phẩm theo tên
2 Xem thông tin sản phẩm: Khách hàng click vào sản phẩm để xem thông tin cụ thể về sản phẩm ( Tên, giá, hình ảnh, mô tả, nhận xét về sách, số lượng sách còn trong kho)
3 Thêm sản phẩm vào giỏ hàng: Khi khách muốn mua sản phẩm, khách hàng sẽ chọn số lượng sách mua và thực hiện thêm sản phẩm vào giỏ hàng
4 Xóa sản phẩm khỏi giỏ hàng: Trong trường hợp khách muốn giảm số lượng sách cần mua thì sẽ giảm số lượng sách xuống, còn nếu khách không muốn mua nữa, thì sẽ thực hiện xóa sản phẩm khỏi giỏ hàng
5 Đặt hàng: Sau khi hoàn thiện giỏ hàng, khách có thể thanh toán sản phẩm với thông tin địa chỉ được nhập từ phía khách hàng
6 Phương thức thanh toán: Khách chọn phương thức thanh toán, do là người ở nước ngoài nên sẽ có 2 phương thức là Paypal và Credit card
7 Place order: Khách sẽ check lại toàn bộ thông tin ở trang Place Order, sau đó nhấn Place Order để chuyển sang bước cuối: Thanh toán
8 Thanh toán: Ở đây khách sẽ thanh toán sản phẩm Sau khi chọn phương thức thanh toán, khách sẽ nhập thông tin và thanh toán
9 Liên hệ: Khi khách hàng cần liên hệ thì có thể email hoặc liên hệ trực tiếp qua số điện thoại
10 Bình luận: Khách hàng có thể đánh giá và bình luận về sách thông qua phương thức bình luận
11 Cập nhật tài khoản: Khách hàng có thể cập nhật tài khoản trong mục Profile ( thay đổi mật khẩu hoặc tên người dùng)
3.2.2 Yêu cầu phi chức năng
1 Giao diện đơn giản, dễ thao tác
2 Thao tác nhanh chóng, đơn giản, chính xác, hiệu quả
3 Tương thích ở cả điện thoại và máy tính
5 Hỗ trợ thanh toán trực tuyến.
Phân tích và đặc tả các ca sử dụng
3.3.1 Các tác nhân tham gia hệ thống
Trong quá trình phân tích yêu cầu, hệ thống có ba loại người dùng chính: user, guest và admin Mỗi loại người dùng đảm nhận những chức năng khác nhau, được thể hiện rõ trong bảng dưới đây.
Bảng 3.2: Bảng mô tả chức năng của các tác nhân
STT Tác nhân Chức năng của tác nhân
Guest là những tác nhân truy cập vào website nhưng chưa có tài khoản Guest có thể:
• Thực hiện đăng ký tài khoản
• Xem các nội dung trong web: danh mục sản phẩm, thông tin sản phẩm
• Thực hiện tìm kiếm sản phẩm: tìm kiếm bằng tên
User cũng là những tác nhân đã có tài khoản, truy cập vào website, và thực hiện được nhiều chức năng hơn Guest User có thể:
• Thực hiện đăng ký/đăng nhập
• Xem các nội dung trong web: danh sách sản phẩm, thông tin sản phẩm, thông tin người dùng, thông tin đơn hàng
• Thực hiện tìm kiếm, thêm bớt sản phẩm trong giỏ hàng
Admin là tác nhân giữ vai trò quản lý website, người điều hành và theo dõi mọi hoạt động của hệ thống Admin có thể:
• Xem các nội dung trong web: danh sách sản phẩm, thông tin sản phẩm
• Quản lý sản phẩm (thêm/bớt sản phẩm trên website)
3.3.2 Biểu đồ ca sử dụng tổng quát
• Biểu đồ ca sử dụng tổng quát website bán sách cho người nước ngoài
Hình 3.1: Biểu đồ ca sử dụng tổng quát về website bán sách
Dưới biểu đồ ca sử dụng tổng quát là các biểu đồ ca sử dụng mô tả các chức năng chính của hệ thống
• Biểu đồ ca sử dụng đăng ký, đăng nhập
Hình 3.2: Biểu đồ ca sử dụng đăng ký, đăng nhập
• Biểu đồ ca sử dụng “Tìm sách”
Hình 3.3: Biểu đồ ca sử dụng tìm sách
• Biểu đồ ca sử dụng “Đặt hàng”
Hình 3.4: Biểu đồ ca sử dụng đặt hàng
• Biểu đồ ca sử dụng “Quản lý thông tin cá nhân”
Hình 3.5: Biểu đồ ca sử dụng quản lý thông tin cá nhân
• Biểu đồ ca sử dụng “Quản lý sản phẩm”
Hình 3.6: Biểu đồ ca sử dụng quản lý sản phẩm
3.3.3 Đặc tả các ca sử dụng chính
3.3.3.1 Ca sử dụng “Đăng ký”
Bảng 3.3: Bảng đặc tả ca sử dụng đăng ký
Khách hàng muốn đăng ký tài khoản trên website bán sách có thể thực hiện dễ dàng Để tạo tài khoản mới, người dùng cần có một địa chỉ email hợp lệ Tác nhân trong quá trình này bao gồm cả khách (guest) và người dùng đã đăng ký (user).
1 Khách truy cập vào website, trên giao diện chính chọn “Đăng ký”
2 Hệ thống hiển thị giao diện đăng ký, khách nhập các thông tin về username, email, password rồi chọn “Register”
3 Hệ thống ghi nhận thông tin khách đăng ký và lưu vào database
4 Hệ thống hiển thị về màn hình chính Use case “Đăng ký” kết thúc Luồng sự kiện rẽ nhánh Nếu khách nhập thông tin không đầy đủ, hệ thống sẽ yêu cầu nhập lại
3.3.3.2 Ca sử dụng “Đăng nhập”
Bảng 3.4: Bảng đặc tả ca sử dụng đăng nhập
Mô tả Người dùng muốn “Đăng nhập” để truy cập vào website bán sách và tham gia mua hàng Tác nhân User và admin Điều kiện trước
Khách hàng và quản trị viên đã có tài khoản đăng nhập
1 Người dùng truy cập vào website, trên giao diện chính chọn “Đăng nhập”
2 Hệ thống hiển thị giao diện đăng nhập, khách nhập các thông tin về email, password rồi chọn “Login”
3 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập vào web
4 Hệ thống hiển thị về màn hình chính Use case “Đăng nhập” kết thúc
Luồng sự kiện rẽ nhánh
Nếu thông tin người dùng nhập bị sai, hệ thống sẽ hiển thị thông báo yêu cầu người dùng nhập lại
3.3.3.3 Ca sử dụng “Tìm sách”
Bảng 3.5: Bảng đặc tả ca sử dụng tìm sách
Mô tả Người dùng sử dụng “Tìm sách” để tìm kiếm sản phẩm mình mong muốn trên hệ thống Tác nhân User và admin Điều kiện trước
Người dùng và quản trị viên đã thực hiện đăng nhập vào hệ thống
1 Người dùng click chuột vào thanh tìm kiếm trên màn hình chính
2 Người dùng nhập tên đầu sách muốn tìm vào thanh tìm kiếm rồi chọn biểu tượng tìm kiếm nằm bên cạnh
3 Hệ thống thực hiện tìm kiếm dựa trên từ khóa người dùng cung cấp và hiển thị ra các đầu sách liên quan Use case “Tìm sách” kết thúc
Luồng sự kiện rẽ nhánh Hệ thống không tìm được sản phẩm nào
3.3.3.4 Ca sử dụng “Thêm sản phẩm vào giỏ”
Bảng 3.6: Bảng đặc tả ca sử dụng thêm sản phẩm
Mô tả Người dùng sử dụng “Thêm sản phẩm vào giỏ” để thêm sản phẩm mình muốn vào trong giỏ hàng Tác nhân User Điều kiện trước
Người dùng đã có tài khoản và thực hiện đăng nhập vào hệ thống
1 Trên giao diện chính, người dùng chọn sản phẩm mình muốn, hệ thống chuyển sang giao diện về thông tin sản phẩm
2 Người dùng điều chỉnh số lượng sản phẩm muốn mua rồi chọn thêm vào giỏ hàng Hệ thống chuyển sang giao diện giỏ hàng
Luồng sự kiện rẽ nhánh
TH1: Sau khi vào giao diện giỏ hàng, người dùng muốn tiếp tục mua sắm
Người dùng chọn “Continute Shopping” và hệ thống chuyển sang giao diện chính
TH2: Sau khi vào giao diện giỏ hàng, người dùng muốn thanh toán, lúc này sẽ chuyển sang use case “Thanh toán”
TH3: Sau khi vào giao diện giỏ hàng, người dùng muốn xóa sản phẩm
Người dùng chọn dấu x trên sản phẩm muốn xóa, hệ thống sẽ xóa sản phẩm đó khỏi giỏ hàng của người dùng
3.3.3.5 Ca sử dụng “Thanh toán”
Bảng 3.7: Bảng đặc tả ca sử dụng thanh toán
Mô tả Người dùng sử dụng “Thanh toán” để tiến hành đặt mua sản phẩm và trả tiền
Tác nhân User Điều kiện trước
Người dùng đã có tài khoản, đã thực hiện đăng nhập vào hệ thống và có ít nhất 1 sản phẩm trong giỏ hàng
1 Tại giỏ hàng, người dùng chọn “Checkout”, hệ thống hiển thị giao diện cập nhật địa chỉ giao hàng Tại đây người dùng nhập các thông tin về địa chỉ và mã bưu chính rồi chọn thanh toán
2 Hệ thống sẽ lưu giao dịch vào database và làm trống giỏ hàng người dùng
Luồng sự kiện rẽ nhánh
Nếu người dùng nhập thiếu thông tin, hệ thống sẽ gửi thông điệp yêu cầu người dùng nhập đầy đủ
3.3.3.6 Ca sử dụng “Cập nhật tài khoản”
Bảng 3.8: Bảng đặc tả ca sử dụng cập nhật tài khoản
Người dùng có thể sử dụng tính năng “Cập nhật tài khoản” để chỉnh sửa thông tin cá nhân của mình Để thực hiện điều này, người dùng cần có tài khoản và đã đăng nhập vào hệ thống.
1 Trên giao diện chính, người dùng click vào biểu tượng cá nhân của mình, chọn profile, hệ thống hiển thị giao diện trang cá nhân
2 Người dùng thực hiện thay đổi các thông tin về username, email, password rồi chọn “update profile”
3 Hệ thống lưu lại thông tin vào database, use case kết thúc
Luồng sự kiện rẽ nhánh
TH1: Người dùng đổi mật khẩu nhưng nhập mật khẩu xác nhận bị sai, hệ thống sẽ gửi thông báo lỗi cho người dùng để nhập lại mật khẩu
Khi người dùng không cập nhật tài khoản và chọn “orderlist”, hệ thống sẽ chuyển sang trường hợp sử dụng “Xem lịch sử đơn hàng”, hiển thị giao diện lịch sử mua hàng của người dùng.
3.3.3.7 Ca sử dụng “Thêm sản phẩm”
Bảng 3.9: Bảng đặc tả ca sử dụng quản lý sản phẩm
Mô tả Admin sử dụng “Thêm sản phẩm” để thêm sản phẩm mới vào trong website
Người dùng có tài khoản admin và đã đăng nhập vào hệ thống
1 Admin truy cập vào hệ thống, chọn “Create product” Hệ thống hiển thị giao diện thêm sản phẩm mới
2 Tại giao diện này admin nhập thông tin về tên, link ảnh, mô tả, đánh giá, giá và số lượng trong kho của sản phẩm rồi chọn “Add Product”
3 Hệ thống lưu lại thông tin của sách vào database, use case kết thúc
Luồng sự kiện rẽ nhánh
Nếu admin nhập thông tin không đầy đủ hệ thống sẽ gửi thông báo để admin nhập thêm thông tin
3.3.3.8 Ca sử dụng “Xóa sản phẩm”
Bảng 3.10: Bảng đặc tả ca sử dụng xóa sản phẩm
Mô tả Admin sử dụng “Xóa sản phẩm” để chọn và xóa sản phẩm khỏi website
Tác nhân Admin Điều kiện trước
Người dùng có tài khoản admin và đã đăng nhập vào hệ thống
1 Admin truy cập vào hệ thống, chọn Delete, hệ thống sẽ gửi thông báo hỏi bạn có muốn xóa sản phẩm này không
2 Admin chọn “Ok”, hệ thống thực hiện xóa toàn bộ thông tin về sản phẩm đó khỏi website Use case kết thúc
Luồng sự kiện rẽ nhánh
Admin chọn “Cancel”, use case kết thúc
3.3.3.9 Ca sử dụng “Chỉnh sửa thông tin sản phẩm”
Bảng 3.11: Bảng đặc tả ca sử dụng chỉnh sửa thông tin sản phẩm
Mô tả Admin sửa dụng “Chỉnh sửa thông tin sản phẩm” để chọn và sửa thông tin bị sai, thiếu, thay đổi của sản phẩm trong website
Tác nhân Admin Điều kiện Người dùng có tài khoản admin và đã đăng nhập vào hệ thống
1 Admin truy cập vào hệ thống, chọn “Edit”, hệ thống sẽ chuyển sang giao diện cập nhật sản phẩm
2 Tại giao diện này, admin tiến hành tùy chỉnh các thông tin về tên, link ảnh, mô tả, đánh giá, giá và số lượng trong kho của sản phẩm rồi chọn
3 Hệ thống lưu thông tin đã thay đổi của sản phẩm vào database và gửi thông báo hỏi admin có muốn quay lại giao diện chính không Use case kết thúc
Luồng sự kiện rẽ nhánh
Admin cập nhật thông tin không hợp lệ, hệ thống sẽ gửi thông báo để admin nhập lại.
Mô tả các biểu đồ hoạt động
3.4.1 Biểu đồ hoạt động đăng ký
Hình 3.7: Biểu đồ hoạt động đăng ký
3.4.2 Biểu đồ hoạt động đăng nhập
Hình 3.8: Biểu đồ hoạt động đăng nhập
3.4.3 Biểu đồ hoạt động tìm kiếm sản phẩm
Hình 3.9: Biểu đồ hoạt động tìm kiếm sản phẩm
3.4.4 Biểu đồ hoạt động thêm vào giỏ hàng
Hình 3.10: Biểu đồ hoạt động thêm vào giỏ hàng
3.4.5 Biểu đồ hoạt động xóa sản phẩm khỏi giỏ hàng
29 Hình 3.11: Biểu đồ hoạt động xóa sản phẩm khỏi giỏ hàng
3.4.6 Biểu đồ hoạt động thanh toán
Hình 3.12: Biểu đồ hoạt động thanh toán
3.4.7 Biểu đồ hoạt động admin quản lý sản phẩm
Quản lý sản phẩm trên website bao gồm ba hoạt động chính: thêm sản phẩm, xóa sản phẩm và chỉnh sửa sản phẩm Dưới đây là ba biểu đồ minh họa cho các hoạt động này.
• Biểu đồ hoạt động admin thêm sản phẩm
Hình 3.13: Biểu đồ hoạt động admin thêm sản phẩm
• Biểu đồ hoạt động admin xóa sản phẩm
Hình 3.14: Biểu đồ hoạt động admin chỉnh sửa sản phẩm
• Biểu đồ hoạt động admin chỉnh sửa sản phẩm
Hình 3.15: Biểu đồ hoạt động admin chỉnh sửa thông tin sản phẩm
• Biểu đồ hoạt động cập nhật tài khoản
Hình 3.16: Biểu đồ hoạt động cập nhật tài khoản
THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG
Thiết kế kiến trúc
Hệ thống áp dụng mô hình MVC (Model - View - Controller), một kiến trúc phân chia ứng dụng thành ba thành phần logic riêng biệt Mỗi thành phần đảm nhiệm một chức năng cụ thể, giúp tách biệt phần hiển thị và xử lý dữ liệu, từ đó nâng cao hiệu quả quản lý và phát triển ứng dụng.
Mô hình MVC gồm 3 phần:
• Model: chứa dữ liệu và logic liên quan
• View: trình bày dữ liệu, xử lý tương tác của người dùng
• Controller: liên kết giữa Model và View
Mô hình MVC hỗ trợ phát triển web bán sách hiệu quả nhờ cho phép các module và thành phần khác nhau được phát triển song song, tiết kiệm thời gian và nâng cao hiệu suất.
Biểu đồ tuần tự các ca sử dụng chính
4.2.1 Biểu đồ tuần tự user đăng nhập
Hình 4.2: Biểu đồ tuần tự user đăng nhập
4.2.2 Biểu đồ tuần tự user tìm kiếm sản phẩm
37 Hình 4.3: Biểu đồ tuần tự user tìm kiếm sản phẩm
4.2.3 Biểu đồ tuần tự user cập nhật tài khoản
38 Hình 4.4: Biểu đồ tuần tự user cập nhật tài khoản
4.2.4 Biểu đồ tuần tự user mua hàng
Hình 4.5: Biểu đồ tuần tự user mua hàng
4.2.5 Biểu đồ tuần tự admin quản lý sản phẩm
Hình 4.6: Biểu đồ tuần tự admin quản lý sản phẩm
Biểu đồ mô tả các thành phần của hệ thống
Hình 4.7: Biểu đồ mô tả các thành phần của hệ thống
Thiết kế cơ sở dữ liệu
• _id (ObjectId): định danh cho mỗi sản phẩm
• name (string): tên sản phẩm
• image (string): đường dẫn URL ảnh của sản phẩm
• description (string): mô tả sản phẩm
• rating (number): điểm đánh giá sản phẩm
• price (number): giá sản phẩm
• countInStock (number): số sản phẩm còn trong kho
Bài viết này trình bày thông tin về đánh giá sản phẩm, bao gồm các thành phần quan trọng như tên người đánh giá, điểm số đánh giá, nội dung bình luận và định danh của người dùng Mỗi đánh giá được xác định bằng một mã định danh riêng, giúp quản lý và theo dõi hiệu quả hơn.
• v (number): số lượng bài đánh giá của sản phẩm
• timestamp: thời gian cập nhật dữ liệu
• _id (ObjectId): định danh cho người dùng
• name (string): tên hiển thị của người dùng trên trang web
• email (string): email của người dùng
• password (string): mật khẩu của người dùng sau khi được mã hóa
• isAdmin (boolean): kiểm tra xem người dùng có phải là ADMIN hay không
• timestamp: thời gian cập nhật dữ liệu
• _id (ObjectId): định danh cho đơn hàng
• user (ObjectId): định danh cho người dùng đặt đơn hàng
The orderItems array consists of a list of products within an order, where each product is represented by several attributes: the name (string) identifies each product, the qty (number) indicates the quantity ordered, the image (string) provides the URL for the product's image, and the price (number) specifies the cost of each item Additionally, a unique product identifier (ObjectId) is assigned to each product, while another identifier (_id, ObjectId) is used to distinguish the details of each product within the order.
• shippingAddress (Object): thông tin về địa chỉ giao hàng o address (string): địa chỉ chi tiết (số nhà, phường, xã, …)
42 o city (string): tên thành phố o postalCode (string): mã bưu chính o country (string): tên quốc gia
• paymentMethod (string): hình thức thanh toán
• totalPrice (number): tổng số tiền
• isPaid (boolean): trạng thái đã trả tiền hay chưa
• isDelivered (boolean): trạng thái đã vận chuyển hay chưa
• timestamp: thời gian cập nhật dữ liệu
Thiết kế giao diện
Nhóm Rumi đã chọn màu tím làm chủ đạo cho thiết kế trang chủ website bán sách cho người nước ngoài, vì màu sắc này biểu trưng cho sự sáng tạo, thông thái và tự tin Thiết kế được tối ưu hóa để đảm bảo sự gọn gàng và dễ nhìn, tạo trải nghiệm tốt cho người dùng Dưới đây là mô tả về các giao diện chính của website.
4.5.1 Các giao diện chính dành cho người dùng
Trang chủ sẽ có hiển thị các thông tin về sản phẩm được chia theo từng trang, với hai nút REGISTER (Đăng ký) và LOGIN (Đăng nhập).
Hình 4.8: Giao diện trang chủ
Trang đăng nhập yêu cầu người dùng nhập email và mật khẩu để truy cập tài khoản Nếu chưa có tài khoản, người dùng có thể nhấn nút 'CREATE ACCOUNT' để chuyển đến trang đăng ký Lưu ý rằng email nhập vào phải đúng định dạng để đảm bảo quá trình đăng nhập thành công.
Hình 4.9: Giao diện đăng nhập
Trang đăng ký yêu cầu người dùng điền vào một mẫu thông tin để tạo tài khoản Người dùng cần cung cấp đầy đủ thông tin theo định dạng yêu cầu, chẳng hạn như địa chỉ email phải đúng kiểu (abc@gmail.com) Sau khi hoàn tất, nhấn vào nút “REGISTER” để hoàn tất quá trình đăng ký tài khoản thành công.
Hình 4.10: Giao diện đăng ký
• Giao diện tìm kiếm sản phẩm
Khi nhập từ khóa vào thanh “Search” và chọn tìm kiếm, các sản phẩm sách có liên quan đến từ khóa người dùng vừa nhập sẽ xuất hiện
Hình 4.11: Giao diện tìm kiếm sản phẩm
• Giao diện chi tiết sản phẩm
Khi người dùng nhấp vào một sản phẩm, họ sẽ được chuyển đến trang hiển thị thông tin chi tiết về sản phẩm đó Trang này cung cấp các thông tin quan trọng như giá cả và trạng thái của sản phẩm.
Trong bài viết này, chúng tôi cung cấp thông tin về 45 sản phẩm, bao gồm tình trạng hàng hóa (có sẵn trong kho hoặc không), đánh giá từ người dùng và mô tả chi tiết Để thực hiện giao dịch, người dùng chỉ cần chọn số lượng sản phẩm mong muốn và nhấn vào nút mua hàng.
“Add to cart” Khi đó, sản phẩm sẽ được thêm vào giỏ hàng ở góc trên bên phải
Người dùng có thể dễ dàng thêm đánh giá cho sản phẩm bằng cách chọn thang điểm từ 1 đến 5, nhập ý kiến cá nhân về sản phẩm và thực hiện đánh giá như hình minh họa bên dưới.
“Submit” Khi đó, đánh giá của người dùng về sản phẩm sẽ được hiển thị trên trang chi tiết của sản phẩm đó
Hình 4.13: Giao diện đánh giá sản phẩm
Khi khách hàng thêm sản phẩm vào giỏ hàng, thông tin sản phẩm như tên, số lượng và giá sẽ được hiển thị Người dùng có thể chọn "Continue to shopping" để tiếp tục mua sắm, hoặc điều chỉnh số lượng và xóa sản phẩm nếu không muốn mua nữa Để hoàn tất giao dịch, người dùng chỉ cần chọn "Checkout" để xác nhận các thông tin cần thiết cho việc mua hàng.
Hình 4.14: Giao diện giỏ hàng
• Giao diện cập nhật thông tin vận chuyển
Sau khi chọn “Checkout”, người dùng sẽ được chuyển đến trang cập nhật thông tin vận chuyển Tại đây, họ cần điền đầy đủ thông tin về địa chỉ, thành phố, mã bưu chính và quốc gia để xác nhận thông tin giao hàng.
Hình 4.15: Giao diện cập nhật thông tin vận chuyển
Sau khi xác nhận thông tin vận chuyển, người dùng sẽ được chuyển đến giao diện thanh toán Tại đây, họ cần nhấp vào “Place Order” để tiến hành thanh toán Có hai phương thức thanh toán sẵn có là PayPal và thẻ tín dụng.
Hình 4.16: Giao diện thanh toán
47 Hình 4.17: Giao diện thanh toán bằng PayPal
Hình 4.18: Giao diện thanh toán bằng thẻ tín dụng
• Giao diện đăng nhập: Khi truy cập vào trang admin, người dùng cần phải đăng nhập tài khoản admin để truy cập vào được trang web
Hình 4.19: Giao diện admin đăng nhập
• Giao diện hiển thị danh sách sản phẩm
Sau khi đăng nhập thành công, người dùng sẽ thấy danh sách thông tin sản phẩm bao gồm tên, URL ảnh, mô tả, giá và số lượng còn trong kho Hệ thống cũng cung cấp ba tùy chọn: tạo sản phẩm mới, sửa thông tin sản phẩm hiện có và xóa sản phẩm.
Hình 4.20: Giao diện hiển thị danh sách sản phẩm
• Giao diện thêm sản phẩm
Sau khi nhấn nút “Tạo sản phẩm”, giao diện để thêm sản phẩm sẽ xuất hiện Người dùng cần điền các thông tin cần thiết như tên sản phẩm, URL hình ảnh, mô tả, giá cả và số lượng trong kho Sau khi hoàn tất việc thêm sản phẩm, tất cả thông tin sẽ được lưu trữ trong cơ sở dữ liệu.
Hình 4.21: Giao diện thêm sản phẩm
• Giao diện sửa thông tin sản phẩm
Hình 4.22: Giao diện sửa thông tin sản phẩm
Khi người dùng chọn "Chỉnh sửa" trong danh sách sản phẩm, một biểu mẫu thông tin sản phẩm sẽ xuất hiện Tại đây, người dùng có thể dễ dàng cập nhật và chỉnh sửa thông tin sản phẩm bằng cách thay đổi nội dung trong biểu mẫu.
CÀI ĐẶT VÀ KIỂM THỬ
Cài đặt
Để cài đặt website bán sách cho người nước ngoài, bạn cần thực hiện các bước hướng dẫn chi tiết Hướng dẫn này sẽ sử dụng GitHub để quản lý mã nguồn và Visual Studio Code làm công cụ lập trình chính.
Bước 1: Clone repo ở github về máy https://github.com/RumiSpirytus/bookstore-rumi
Step 2: Open the folder and split the terminal in Visual Studio Code to run both the server and frontend simultaneously Use the commands "cd fe" and "cd server" to access each directory separately.
Hình 5.2: Chia thành 2 terminal cho folder "fe" và "server"
Để chạy server, bạn sử dụng câu lệnh “npm start” trong server, và tương tự, để khởi động web, bạn cũng dùng câu lệnh “npm start” trong frontend Giao diện web sẽ hiển thị trên trình duyệt.
Hình 5.3: Chạy web bằng lệnh "npm"
Để hiển thị trang admin, bạn cần mở New Terminal để chạy đồng thời admin và API Trong cửa sổ terminal đầu tiên, hãy chạy lệnh “cd admin”, sau đó trong cửa sổ terminal thứ hai, thực hiện lệnh “cd admin” và tiếp theo là lệnh “cd api”.
Hình 5.4: Chia 2 terminal cho folder "admin" và "api"
In the first terminal window, execute the command "npm install save-dev cross-env" to download and install the cross-env module In the second terminal window, run the command "npm install dotenv save" to download and install the dotenv module.
Hình 5.5: Cài đặt module crros-env và dotenv
Bước 6: Thêm file env vào folder api trong folder admin ( file env được ẩn bởi lý do bảo mật)
Hình 5.6: Thêm file env vào folder "api"
Step 7: In the second terminal window, execute the command “npm run serve” to start nodemon, while in the first window, run “npm start” to launch the web application Wait for the admin interface of the website to appear in your browser.
Hình 5.7: Chạy giao diện admin bằng lệnh npm
Kiểm thử
Bảng dưới đây mô tả danh sách chi tiết các ca kiểm thử chức năng ngày 2/5/2023, sau khi đã khắc phục lỗi và thực hiện kiểm thử hệ thống
Bảng 5.1: Danh sách các ca kiểm thử chức năng
STT Yêu cầu chức năng
Tên ca kiểm thử Kết quả mong đợi Dữ liệu Trạng thái
Hiển thị giao diện đăng ký
Hệ thống hiển thị giao diện đăng ký cho người dùng
Lưu tài khoản đăng ký
Hệ thống điều hướng sang giao diện trang chủ nếu thông tin đăng ký hợp lệ
Hiển thị giao diện đăng nhập
Hệ thống hiển thị giao diện đăng nhập cho người dùng
Xác thực tài khoản đăng nhập
Hệ thống điều hướng sang giao diện trang chủ nếu thông tin đăng nhập hợp lệ
Hiển thị sản phẩm cần tìm
Hệ thống hiển thị các sản phẩm liên quan tới từ khóa người dùng nhập
Xem thông tin sản phẩm
Hiển thị thông tin sản phẩm
Hệ thống hiển thị giao diện thông tin sản phẩm về sản phẩm mà người dùng chọn
Thêm sản phẩm vào giỏ Điều chỉnh số lượng sản phẩm muốn thêm
Số lượng sản phẩm trong giỏ hàng của người dùng tăng lên đúng bằng số lượng sản phẩm mà người dùng mới chọn thêm
Hệ thống điều hướng sang giao diện giỏ hàng sau khi người dùng chọn
Hiển thị thông tin sản phẩm
Hệ thống hiển thị giao diện thông tin sản phẩm về sản phẩm mà người dùng chọn
Hiển thị đánh giá của người dùng
Giao diện thông tin sản phẩm cập nhật đánh giá sản phẩm mà người dùng vừa submit
Xóa sản phẩm khỏi giỏ
Chọn và xóa sản phẩm khỏi giỏ hàng
Giỏ hàng không còn sản phẩm vừa bị xóa, số lượng sản phẩm trong giỏ hàng cũng giảm đi đúng bằng số lượng của sản phẩm đó
Hiển thị giao diện thông tin vận chuyển
Hệ thống điều hướng sang giao diện thông tin vận chuyển sau khi người dùng chọn
Lưu thông tin vận chuyển
Hệ thống điều hướng sang giao diện thanh toán nếu thông tin vận chuyển đầy đủ Tại đây thông tin vận chuyển đã được cập nhật
Hiển thị giao diện thanh toán
Hệ thống hiển thị giao diện thanh toán đơn hàng của người dùng
Chọn phương thức thanh toán
Hệ thống điều hướng sang giao diện của phương thức thanh toán mà người dùng chọn
Admin xem danh sách sản phẩm
Hiển thị danh sách sản phẩm
Hệ thống hiển thị giao diện danh sách sản phẩm của website
Admin chỉnh sửa thông tin sản phẩm
Hiển thị giao diện chỉnh sửa thông tin sản phẩm
Hệ thống hiển thị giao diện chỉnh sửa thông tin sản phẩm cho admin
Cập nhật thông tin sản phẩm
Hệ thống cập nhật những thông tin của sản phẩm vừa được admin thay đổi
“description”: “Có cái mô tả sách cũng tính đạo văn.”
Hiển thị giao diện thêm sản phẩm
Hệ thống hiển thị giao diện thêm sản phẩm mới cho admin
Hệ thống gửi thông báo và cập nhật sản phẩm mới nếu admin điền thông tin đầy đủ và hợp lê
“name”: “Mát mát lạnh lạnh”,
“http://static.nhanam com.vn/thumb/0x32 0/crop/Books/Image s/2016/7/12/8B4768 AY.jpg”,
“description”: “24 mảnh vụn li ti của cuộc sống như những viên đá va vào nhau lanh canh trong ly.”,
Hiển thị thông báo xóa sản phẩm
Hệ thống hiển thị thông báo hỏi admin có muốn xóa sản phẩm này không
Hệ thống xóa sản phẩm
Hệ thống xóa sản phẩm được chọn khỏi database “Mớ hỗn độn” Thành công
Quản lý thông tin cá nhân
Hiển thị giao diện trang cá nhân
Hệ thống hiển thị giao diện trang cá nhân của người dùng
Cập nhật thông tin cá nhân
Hệ thống lưu lại thông tin cá nhân người dùng vào database sau khi người dùng cập nhật thông tin hợp lệ
Hiển thị lịch sử đơn hàng
Hệ thống hiển thị giao diện lịch sử đơn hàng khi người dùng chọn
Vào ngày 3/5/2023, bảng dưới đây trình bày danh sách các ca kiểm thử nội dung website đã được thực hiện sau khi khắc phục lỗi và tiến hành kiểm thử hệ thống.
Bảng 5.2: Danh sách các ca kiểm thử nội dung STT Tên ca kiểm thử Kết quả mong đợi Kết quả thực tế Trạng thái
Kiểm tra tổng thể giao diện hệ thống cho thấy độ rộng và khoảng cách giữa các textbox đồng đều, không bị xô lệch, đạt thành công Các label cũng sử dụng chung một loại font chữ, đảm bảo tính nhất quán và đạt thành công.
Giao diện sáng màu dễ nhìn Đạt Thành công Không có lỗi chính tả
90%, vẫn có một số lỗi trong mô tả sản phẩm
2 Trường hợp refresh màn hình
Refresh lại màn hình Đạt Thành công
Sau khi refresh các chức năng vẫn thực hiện đúng Đạt Thành công
Con trỏ chuột chuyển thành bàn tay khi di chuyển đến hình ảnh sản phẩm và các button Đạt Thành công
Con trỏ chuột chuyển thành biểu tượng nhập chữ khi di chuyển đến textbox Đạt Thành công
Kiểm tra font chữ, cỡ chữ, màu chữ
Font chữ không bị lỗi khi hiển thị trên các trình duyệt khác nhau Đạt Thành công
Cỡ chữ vừa phải, màu chữ dễ nhìn Đạt Thành công
5 Phóng to thu nhỏ website
Nội dung trên trang giữ nguyên vẹn khi web bị phóng to/thu nhỏ Đạt Thành công
6 Hiển thị trên trình duyệt
Giao diện trang hiển thị tốt trên các trình duyệt được yêu cầu Đạt Thành công
7 Kiểm tra thanh cuộn Thanh cuộn xuất hiện khi cần thiết Đạt Thành công
8 Kiểm tra hình ảnh Ảnh banner, logo rõ nét Đạt Thành công Ảnh sản phẩm không bị cắt, không bị mờ, rõ nét
80%, một số bìa sách vẫn bị mờ, không rõ nét