Tìm hiểu DOCKER và xây dựng ứng dụng minh họa

GIỚI THIỆU CHUNG

Lý do chọn đề tài

Với sự bùng nổ của công nghệ hiện nay, nhiều ứng dụng mới liên tục ra đời và các ngôn ngữ lập trình cũng không ngừng phát triển Một số ngôn ngữ như Java và Python có thể chạy trên nhiều nền tảng khác nhau, trong khi các ngôn ngữ như C# và Swift lại phụ thuộc vào môi trường và hệ điều hành cụ thể Việc triển khai ứng dụng thường yêu cầu cài đặt nhiều môi trường khác nhau, dẫn đến nguy cơ xung đột phần mềm, trùng port và sự khác biệt giữa các phiên bản Những vấn đề này không chỉ gây khó khăn trong quá trình cài đặt mà còn có thể ảnh hưởng nghiêm trọng đến hoạt động của ứng dụng, điều này thật sự không thể chấp nhận được.

Chính vì vậy các công nghệ ảo hóa lần lượt ra đời và Docker là một trong số chúng

Docker là nền tảng tối ưu cho lập trình viên và quản trị hệ thống, cho phép phát triển, triển khai và chạy ứng dụng trong các container Việc sử dụng container giúp giảm thiểu rủi ro và xung đột trong môi trường phát triển và vận hành, đảm bảo ứng dụng hoạt động ổn định và hiệu quả.

1.1.2 Về ứng dụng website thương mại điện tử

Trong thời đại 4.0 với sự phát triển vượt bậc của công nghệ, kinh doanh online đang trở thành xu hướng chủ đạo hơn bao giờ hết Điều này xuất phát từ nhiều lý do quan trọng, bao gồm sự tiện lợi, khả năng tiếp cận khách hàng rộng rãi và chi phí thấp trong việc quảng bá sản phẩm.

– Không mất chi phí thuê mặt bằng cửa hàng

– Tiết kiệm được chi phí lưu trữ hàng hóa

– Tiết kiệm được chi phí thuê nhân viên

– Phục vụ khách hàng hiệu quả

– Công cụ bán hàng và quảng cáo online đang phát triển mạnh

– Số người sử dụng internet hiện rất đông và sẽ ngày càng nhiều hơn nữa

Kết luận: Với tính tiện dụng và hiệu quả của các website, ứng dụng thương mại điện tử, cùng sự hỗ trợ mạnh mẽ từ công nghệ Docker, nhóm chúng tôi đã quyết định chọn đề tài “Tìm hiểu Docker và xây dựng ứng dụng minh họa” để nghiên cứu và phát triển cho môn đồ án 1.

Đối tượng nghiên cứu

– Đối tượng trong phạm vi đề tài hướng đến:

+ Những doanh nghiệp, nhà bán hàng trong nước

+ Người tiêu dùng trong nước.

Phạm vi nghiên cứu

– Ứng dụng website được xây dựng theo MERN Stack: MongoDB, Express.js, React.js, Node.js

– Phát triển và cài đặt ứng dụng bằng Docker.

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

Nhóm đã sử dụng các phương pháp nghiên cứu:

– Phương pháp đọc tài liệu

– Phương pháp phân tích các ứng dụng TMĐT tương tự hiện có

Theo khảo sát, các website và ứng dụng thương mại điện tử, đặc biệt là trong lĩnh vực kinh doanh sản phẩm quần áo, đều áp dụng mô hình xử lý hàng hóa tương tự nhau.

+ Nhập hàng hóa từ nhà cung cấp

+ Cập nhật hàng hóa lên cơ sở dữ liệu

+ Khách hàng đặt hàng trên ứng dụng

+ Hệ thống chuyển đơn hàng về Webservice để nhân viên xử lý

+ Nhân viên lấy hàng trong kho theo đơn hàng và đóng gói

+ Nhân viên cập nhật lại số lượng hàng trong kho

+ Nhân viên giao hàng chuyển hàng theo địa chỉ của khách hàng

+ Nhân viên cập nhật tình trạng đơn hàng

+ Nhân viên giải đáp thắc mắc của khách hàng

+ Xử lý hàng hóa không có người nhận

+ Xử lý hàng hóa bị khách hàng trả lại.

Bố cục

Báo cáo gồm có 5 chương:

Chương 1 giới thiệu về đề tài, đề cập đến đối tượng phạm vi và phương pháp nghiên cứu Cuối chương 1 là phần bố cục của báo cáo

Chương 2 trình bày các nền tảng, các công nghệ được sử dụng trong quá trình xây dựng và phát triển ứng dụng

Chương 3 trình bày chi tiết quy trình xây dựng hệ thống, từ xác định và phân tích yêu cầu bài toán cho đến xây dựng CSDL, cuối cùng là xây dựng giao diện cho úng dụng

Chương 4 kết luận, rút ra các ưu nhược điểm của ứng dụng và đề ra hướng phát triển trong tương lai

KIẾN THỨC NỀN TẢNG

Tổng quan về Docker

Docker là nền tảng mã nguồn mở hỗ trợ lập trình viên và quản trị hệ thống trong việc xây dựng, vận chuyển và triển khai ứng dụng một cách dễ dàng trên môi trường ảo hóa.

Docker cung cấp một giải pháp ảo hóa mới bằng cách sử dụng các Container thay vì các máy ảo độc lập kiểu hypervisors Các ứng dụng được đóng gói thành các Container riêng lẻ, chạy trên cùng một nhân hệ điều hành thông qua LXC (Linux Containers) và chia sẻ tài nguyên của máy chủ Điều này giúp các Container hoạt động nhẹ và nhanh hơn so với các máy ảo truyền thống.

Các thành phần chính của Docker bao gồm:

– Docker Engine: là thành phần chính của Docker, như một công cụ để đóng gói ứng dụng

Docker Hub là dịch vụ đám mây cho phép chia sẻ ứng dụng và tự động hóa quy trình làm việc liên tục, hỗ trợ thao tác pull và push với các hình ảnh (images).

Một số khái niệm phổ biến về Docker:

– Docker images: là một “read-only template” Chẳng hạn, một image chứa hệ điều hành Ubuntu đã cài đặt sẵn Vim

– Docker registries: là kho chứa images Người dùng có thể tạo ra các images của mình và tải lên đây hoặc tải về các images được chia sẻ

Docker container hoạt động như một thư mục, bao gồm tất cả các thành phần cần thiết để ứng dụng chạy Mỗi container được tạo ra từ một docker image và có thể thực hiện các thao tác như chạy, bật, tắt, di chuyển và xóa.

– Dockerfile: là một file chứa tập hợp các lệnh để Docker có thể đọc và thực hiện để đóng gói một image theo yêu cầu người dùng

– Orchestration: là các công cụ, dịch vụ dùng để điều phối và quản lý nhiều containers sao cho chúng làm việc hiệu quả nhất

– Tiện lợi: giúp giảm tải sự phức tạp khi cài đặt các loại công nghệ cũng như đồng bộ các phiên bản của những công nghệ đó

Docker là công cụ dễ dàng sử dụng cho lập trình viên và quản trị hệ thống, cho phép họ tận dụng lợi thế của container để xây dựng và kiểm tra ứng dụng một cách nhanh chóng.

Khả năng di động của môi trường phát triển được dựng bằng Docker cho phép dễ dàng chuyển giao giữa các cá nhân mà không làm thay đổi cấu hình bên trong.

2.1.5 Triển khai Docker trên Ubuntu

Bước 1: Cập nhập OS bằng câu lệnh sudo apt-get update

Bước 2: Gỡ phiên bản cũ của Docker(Bỏ qua bước này nếu như chưa từng cài Docker) sudo apt-get remove docker docker-engine docker.io

Bước 3: Cài Docker bằng câu lệnh sudo apt install docker.io

Bước 4: Chạy và tự động hóa Docker sudo systemctl start docker sudo systemctl enable docker

Bước 5: kiểm tra phiên bản Docker docker sevsion

Chạy câu lệnh đầu tiên với Docker docker run hello-world

Để đơn giản hóa việc quản lý quy trình của các Docker container như khởi động, tắt và thiết lập liên kết cũng như volumes, chúng ta sẽ sử dụng Docker Compose.

To ensure you have the latest version of Docker Compose, check the current release If an update is necessary, execute the following command in your terminal: ```bashsudo curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose``` This command downloads the specified version of Docker Compose to your local bin directory.

Bước 2:Chúng ta sẽ cài đặt quyền sudo chmod +x /usr/local/bin/docker-compose

Bước 3:Kiểm tra phiên bản Docker Compose docker-compose –version

*Sử dụng Docker với Node.js/Express.js và React.js

13 Đầu tiên trong các thư mục client và server chúng ta sẽ lần lượt khởi tạo các Docker file Bên trong file dockerfile.react

Bên trong file dockerfile.node

Chúng ta cũng tạo thêm các file dockerignore để bỏ đi các thư mục node_modules hoặc những thư mục nào chúng ta không muốn thêm vào Container

To manage the previously created Dockerfiles, we will create a docker-compose.yml file at the outermost level This file will be structured with version "3.5" and will define a service called "react-app." The service will have the container name "reactfrontend" and will build from the context located in the /client directory using the dockerfile.react Additionally, it will enable TTY and open standard input, while also specifying the image name as "react-app" and configuring the necessary ports.

- /client/src:/app/client/src

- /client/public:/app/client/public api-server: container_name: "nodebackend" build: context: /server dockerfile: dockerfile.node image: api-server ports:

- /server/configs:/app/server/configs

- /server/controllers:/app/server/controllers

- /server/middleware:/app/server/middleware

- /server/models:/app/server/models

- /server/routers:/app/server/routers

Trong file /server/app.js, chúng ta có thể quản lý các biến môi trường (.env) mà không cần sử dụng required('dotenv').config() trong các file mã nguồn Điều này giúp đơn giản hóa quá trình cấu hình môi trường cho ứng dụng Thêm vào đó, mạng được định nghĩa là mern-app với driver là bridge, tạo điều kiện thuận lợi cho việc kết nối giữa các thành phần trong ứng dụng.

Sau đó để chạy được file này chúng ta chỉ cần đứng đúng chỗ thu mục chứ file docker- compose.yml và chạy câu lệnh: Docker-compose up

2.1.6 So sánh Docker và Virtual Machine

Ngày xưa, mô hình máy chủ thường là 1 máy chủ vật lý và 1 hệ điều hành

Hình 2.1.6.1: Mô hình máy chủ truyền thống

Khi ứng dụng phát triển lên, mô hình này nảy sinh ra nhiều vấn đề, ví dụ:

– Lãng phí tài nguyên: mặc dù cấu hình máy khỏe, ổ cứng dung lượng lớn, nhưng hệ thống lại không tận dụng được hết lợi thế này

– Khó khăn trong việc mở rộng hệ thống: muốn mở rộng phải thuê thêm server, cấu hình, cân bằng tải (load balancing),…

Lúc này, công nghệ ảo hóa (vitualization) ra đời

Hình 2.1.6.2: Mô hình máy ảo VMs

Công nghệ ảo hóa cho phép tạo ra nhiều hệ điều hành trên một máy chủ vật lý, giúp tối ưu hóa tài nguyên và chạy nhiều ứng dụng cùng lúc Tuy nhiên, việc ảo hóa cũng phát sinh những vấn đề mới cần được giải quyết.

Khi chạy một máy ảo, nó sẽ tiêu tốn một phần tài nguyên cố định của hệ thống Ví dụ, với máy chủ 512GB SSD và 16GB RAM, nếu tạo ra 4 máy ảo Linux, mỗi máy sẽ cần 64GB SSD và 2GB RAM Do đó, tổng cộng sẽ mất 256GB SSD để lưu trữ 4 máy ảo, và khi tất cả cùng hoạt động, chúng sẽ chiếm 8GB RAM, ngay cả khi chưa sử dụng đến.

– Tốn thời gian thực thi: thời gian khởi động, shutdown của các máy ảo sẽ lâu, thường là hàng phút

– Cồng kềnh: việc phải chịu tải cho cả 1 nhóm máy ảo như vậy thì server không thế chạy hết hiệu suất được

Bước tiến hóa tiếp theo, người ta phát minh ra containerlization

Hình 2.1.6.3: Mô hình ảo hóa Container

Công nghệ này cho phép tạo ra nhiều máy con (Guest OS) trên một máy chủ, tương tự như ảo hóa, nhưng điểm đặc biệt là các máy con này sử dụng chung phần nhân của máy mẹ (host OS) và chia sẻ tài nguyên như RAM Nhờ đó, việc tối ưu hóa sử dụng tài nguyên trở nên hiệu quả hơn.

Giới thiệu về Node.js

NodeJS là nền tảng phát triển ứng dụng web, được xây dựng trên động cơ V8 JavaScript Engine, cho phép thực thi mã JavaScript một cách hiệu quả và dễ dàng mở rộng.

Node.js nổi bật với khả năng xử lý nhiều kết nối chỉ bằng một thread duy nhất, giúp tiết kiệm RAM và tăng tốc độ xử lý Việc không cần tạo thread mới cho mỗi truy vấn là yếu tố quan trọng giúp hệ thống hoạt động hiệu quả hơn.

The JSON API, featuring an event-driven architecture and non-blocking I/O, combined with JavaScript, is an excellent choice for developing web services that utilize JSON.

Node.js là lựa chọn lý tưởng cho việc phát triển ứng dụng trên một trang (Single Page Application) nhờ vào khả năng xử lý nhiều yêu cầu đồng thời và thời gian phản hồi nhanh Các ứng dụng này thường không muốn tải lại trang, yêu cầu nhiều yêu cầu từ người dùng với tốc độ nhanh chóng để thể hiện sự chuyên nghiệp.

Unix shelling tools in Node.js fully leverage Unix capabilities, allowing Node.js to efficiently handle thousands of processes simultaneously This results in an optimized performance, maximizing operational efficiency and delivering outstanding results.

Luồng dữ liệu (Streaming Data) là quá trình mà các website thông thường gửi yêu cầu HTTP và nhận phản hồi Khi cần xử lý một lượng lớn luồng dữ liệu, Node.js có khả năng xây dựng các Proxy để phân vùng các luồng dữ liệu, từ đó tối ưu hóa hiệu suất và đảm bảo hoạt động mượt mà cho các luồng dữ liệu khác.

The advent of mobile applications and HTML5 has made Node.js highly effective for developing real-time applications, such as chat apps and social networking services like Facebook and Twitter.

Kết luận: Node.js với những tính năng vượt trội, hiện đang là một trong những nền tảng được ưa chuộng nhất, được các lập trình viên sử dụng rộng rãi trên toàn cầu.

Giới thiệu về Express.js

Express.js là một framework nhẹ nhưng linh hoạt, được xây dựng trên nền tảng Node.js, cung cấp các tính năng mạnh mẽ cho việc phát triển ứng dụng web và di động.

Express.js là một framework mạnh mẽ hỗ trợ JavaScript, ngôn ngữ lập trình phổ biến và dễ học Nhờ vào sự phổ biến của JavaScript, việc lập trình với Express.js trở nên đơn giản hơn rất nhiều cho những ai đã quen thuộc với ngôn ngữ này.

Express.js giúp giảm 50% thời gian viết mã, đồng thời cho phép xây dựng các ứng dụng web hiệu quả Với nhiều tính năng hỗ trợ, nó không chỉ tiết kiệm thời gian mà còn giảm bớt nỗ lực cần thiết trong quá trình phát triển ứng dụng web.

– Express.js là một ứng dụng web miễn phí và mã nguồn mở cung cấp nhiều tính năng tuyệt vời.

Giới thiệu về React.js

React là một thư viện JavaScript nhằm đơn giản hóa việc phát triển giao diện người dùng

Được phát triển bởi Facebook, công nghệ này ra mắt lần đầu vào năm 2013 và đã được sử dụng để xây dựng các nền tảng như Facebook và Instagram Nhiều công ty trên thế giới cũng đã ủng hộ và áp dụng công nghệ này trong các sản phẩm của họ.

Mục tiêu của React là đơn giản hóa quá trình phát triển ứng dụng Tất cả trạng thái được quản lý tại một thời điểm, thông qua việc chia giao diện người dùng thành các thành phần (components) riêng biệt.

React được sử dụng để xây dựng single-page web applications

React.js tạo ra một DOM ảo, nơi các component tồn tại, giúp cải thiện hiệu suất đáng kể Nó chỉ tính toán và thực hiện những thay đổi cần thiết trên DOM, giảm thiểu các thao tác tốn kém và tối ưu hóa hiệu suất hoạt động.

React.js giúp đơn giản hóa việc viết mã JavaScript nhờ cú pháp đặc biệt JSX (JavaScript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể thêm các đoạn HTML trực tiếp vào hàm render mà không cần phải nối chuỗi, tạo nên sự thuận tiện trong quá trình phát triển Đặc điểm nổi bật của React.js là khả năng chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX.

– React.js cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JavaScript.

Giới thiệu về MongoDB

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, hỗ trợ đa nền tảng và được thiết kế hướng đến người dùng Nó sử dụng các khái niệm Collection và Document, mang lại hiệu suất cao, tính khả dụng tốt và khả năng mở rộng dễ dàng.

MongoDB sở hữu cấu trúc Collection linh hoạt, cho phép dữ liệu không cần tuân theo một định dạng cố định nào Điều này giúp MongoDB lưu trữ các loại dữ liệu đa dạng và phức tạp Dữ liệu trong MongoDB được lưu trữ dưới định dạng JSON.

– MongoDB sử dụng lưu trữ dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và document khác nhau

– Tuy cấu trúc của dữ liệu linh hoạt nhưng đối tượng của nó được xác định rất rõ ràng – Dễ dàng mở rộng

– Phù hợp với các ứng dụng realtime.

Giới thiệu về chuỗi JSON

JSON, viết tắt của Javascript Object Notation, là một định dạng dữ liệu dễ đọc và sử dụng, phù hợp với hầu hết các ngôn ngữ lập trình hiện đại Với cấu trúc đơn giản, JSON cho phép lưu trữ dễ dàng vào file hoặc cơ sở dữ liệu, đồng thời việc truy vấn cũng thuận tiện hơn nhiều so với XML Chính vì vậy, JSON ngày càng trở nên phổ biến trong các ứng dụng hiện nay.

JSON là định dạng trao đổi dữ liệu văn bản nhẹ, với cú pháp đơn giản gồm hai phần: key và value Trong cơ sở dữ liệu, key tương ứng với tên trường (field) và value là giá trị của trường đó trong một bản ghi (record).

Chuỗi JSON được bao lại bởi dấu ngoặc nhọn {}

Các key, value của JSON bắt buộc phải đặt trong dấu nháy kép (")

Khi làm việc với nhiều cặp key-value trong JSON, bạn cần sử dụng dấu phẩy (,) để phân tách chúng Các key nên được đặt bằng chữ cái không dấu, số, hoặc dấu gạch dưới (_), và không chứa khoảng trắng Lưu ý rằng ký tự đầu tiên của key không nên là số.

XÂY DỰNG HỆ THỐNG

Xây dựng kiến trúc hệ thống

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

Dựa trên dữ liệu thu thập từ khảo sát, ứng dụng sẽ được chia thành hai phần với các chức năng chính như sau:

– Phần dành cho người dùng:

+ Đăng ký và đăng nhập

+ Tìm kiếm sản phẩm có sử dụng bộ lọc

+ Sắp xếp sản phẩm theo mức giá

+ Xem thông tin sản phẩm

+ Xem lịch sử mua hàng

+ Cập nhật thông tin cá nhân, địa chỉ mua hàng

+ Bình luận đánh giá sản phẩm

+ Chat với nhân viên tư vấn

– Phần dành cho người quản trị:

+ Quản lý các bình luận sản phẩm

+ Quản lý các đơn hàng

+ Thống kê doanh thu, số lượng bán

3.1.2 Phân tích yêu cầu hệ thống

Website ZShop là một nền tảng mua sắm trực tuyến, yêu cầu khách hàng xác thực thông tin qua đăng nhập để ngăn chặn tài khoản ảo và nâng cao trải nghiệm mua sắm.

Để đăng nhập vào website, người dùng cần đăng ký tài khoản, có hai cách để thực hiện: sử dụng tài khoản và mật khẩu hoặc đăng ký qua tài khoản Google Nếu chọn cách đăng ký bằng tài khoản và mật khẩu, khách hàng phải xác thực email bằng cách nhấp vào liên kết xác thực trong email đã nhận.

Khách hàng có thể đăng nhập vào website bằng tài khoản đã đăng ký thông qua hai phương thức: sử dụng tài khoản và mật khẩu hoặc đăng nhập bằng tài khoản Google Sau khi hoàn tất đăng nhập, khách hàng sẽ có quyền truy cập tất cả các tiện ích mà website cung cấp.

– Cập nhật thông tin tài khoản:

Khách hàng sau khi đăng ký thành công có thể dễ dàng cập nhật thông tin tài khoản của mình Việc này giúp đảm bảo thông tin chính xác, thuận tiện cho việc hỗ trợ mua hàng và sử dụng hiệu quả các tiện ích trên website.

Khách hàng sau khi đăng ký thành công có thể thay đổi mật khẩu bất cứ lúc nào để đảm bảo an toàn cho tài khoản

– Cập nhật địa chỉ email mới

Khách hàng có thể dễ dàng thay đổi email bằng cách cập nhật địa chỉ email mới Sau khi thực hiện, hệ thống sẽ gửi mã xác thực OTP đến email mới Để hoàn tất quá trình, khách hàng chỉ cần nhập đúng mã OTP và email mới sẽ được cập nhật trong hệ thống.

– Sắp xếp sản phẩm theo các danh mục tương ứng:

Tại shop, các sản phẩm quần áo thời trang được phân loại theo từng danh mục cụ thể, giúp người tiêu dùng dễ dàng tìm kiếm và tiết kiệm tối đa thời gian mua sắm.

Khách hàng có thể nhanh chóng tìm kiếm sản phẩm mong muốn bằng cách nhập từ khóa vào ô tìm kiếm, và website sẽ cung cấp danh sách các sản phẩm phù hợp với từ khóa đó.

– Lọc/sắp xếp sản phẩm:

Khách hàng có thể nhanh chóng tìm kiếm các sản phẩm mới, các chương trình khuyến mãi và sản phẩm bán chạy bằng cách sử dụng bộ lọc hoặc sắp xếp sản phẩm theo mức giá tăng hoặc giảm.

– Xem thông tin sản phẩm:

Khi khách hàng nhấp vào một sản phẩm, hệ thống sẽ cung cấp thông tin chi tiết bao gồm tên, kích thước, hình ảnh, màu sắc, giá bán, khuyến mãi và các đánh giá từ khách hàng khác về sản phẩm đó.

Khách hàng có thể gửi ý kiến đánh giá sản phẩm qua ô bình luận bên dưới hoặc trả lời đánh giá của người dùng khác Tuy nhiên, tính năng này chỉ khả dụng khi khách hàng đã đăng nhập và không bị quản trị viên khóa.

Khi khách hàng tìm thấy sản phẩm ưng ý, họ có thể chọn "thêm vào giỏ hàng" và dễ dàng quản lý số lượng hoặc xóa sản phẩm bất cứ lúc nào Khi đã quyết định mua sắm, khách hàng cần đăng nhập để đặt hàng, với thông tin nhận hàng được tự động điền từ tài khoản đã đăng ký, nhưng cũng có thể chỉnh sửa nếu cần Khách hàng có hai phương thức thanh toán: chuyển khoản ngân hàng trước hoặc thanh toán tiền mặt khi nhận hàng Cuối cùng, sau khi nhập đầy đủ thông tin, khách hàng nhấn nút đặt hàng, hệ thống ghi nhận đơn và cửa hàng sẽ chuẩn bị và vận chuyển hàng hóa đến tay khách.

Sau khi đặt hàng, khách hàng có thể dễ dàng theo dõi tình trạng đơn hàng trong mục “Lịch sử đơn hàng” Các trạng thái của đơn hàng bao gồm: chờ xác nhận, đã xác nhận, đã thanh toán, giao thành công và đã hủy.

Chỉ có tài khoản dành cho quản trị viên mới có thể truy cập và sử dụng các tính năng cho phép quản lý của trang web

Xem thông tin chi tiết của sản phẩm có sẵn trên hệ thống giúp người dùng nắm bắt thông tin cần thiết Đồng thời, thêm sản phẩm mới với các thông tin chi tiết vào hệ thống website là cách hiệu quả để cập nhật và mở rộng danh mục sản phẩm.

+ Cập nhật: Cập nhật lại thông tin, hình ảnh cho các sản phẩm đã có trên hệ thống

+ Xóa: Xóa các sản phẩm đã ngừng kinh doanh

– Quản lý bình luận sản phẩm:

+ Xoá: Xóa các bình luận tiêu cực hoặc bình luận spam của người dùng + Cấm: Cấm tài khoản người dùng sử dụng tính năng bình luận

Xem thông tin chi tiết đơn hàng bao gồm sản phẩm đã mua, thông tin giao hàng, tổng giá trị, ngày đặt, phương thức thanh toán và trạng thái đơn hàng.

Phân tích thiết kế hệ thống

3.2.1.1 Sơ đồ các use case

STT Tên Actor Ý nghĩa/Ghi chú

1 Manager Người chịu trách nhiệm quản lý các sản phẩm, đơn hàng, bình luận đánh giá trên phần mềm

2 Customer Người sử dụng phần mềm để mua sắm hàng hóa

3.2.1.3 Mô tả chi tiết các use case

– Mục đích: Đảm bảo xác thực thông tin người dùng và an toàn bảo mật hệ thống

Người dùng cần đăng nhập vào hệ thống để tận hưởng đầy đủ các tiện ích, trong khi quản trị viên cũng phải đăng nhập để truy cập vào hệ thống quản lý website.

– Mục đích: Tạo tài khoản để người dùng có thể đăng nhập vào hệ thống

Khách hàng cần điền đầy đủ thông tin đăng ký để hệ thống tạo tài khoản Sau khi đăng ký, khách hàng phải xác thực email để kích hoạt tài khoản và sử dụng các dịch vụ.

– Mục đích: Đăng xuất khỏi hệ thống

– Mô tả: Người dùng click vào nút đăng xuất để thoát tài khoản ra khỏi hệ thống

3.2.1.3.4 Use case View list of products

– Mục đích: Xem danh sách các sản phẩm có trên hệ thống

– Mô tả: Người dùng có thể xem danh sách toàn bộ các sản phẩm có trên hệ thống

3.2.1.3.5 Use case View product detail

– Mục đích: Xem thông tin chi tiết của một sản phẩm

Người dùng có thể truy cập thông tin chi tiết về sản phẩm, bao gồm tên, giá cả, khuyến mãi, kích thước, màu sắc, hình ảnh và các bình luận đánh giá từ người tiêu dùng.

3.2.1.3.6 Use case Add to cart

– Mục đích: Thêm sản phẩm yêu thích vào giỏ hàng

– Mô tả: Người dùng có thể thêm những sản phẩm yêu thích muốn mua vào giỏ hàng để dễ dàng lựa chọn, thanh toán đặt hàng

– Mục đích: Tìm kiếm sản phẩm trên hệ thống

Người dùng có thể dễ dàng tìm kiếm sản phẩm trên hệ thống bằng cách nhập từ khóa, áp dụng bộ lọc, chọn theo danh mục sản phẩm hoặc sắp xếp theo mức giá.

– Mục đích: Bình luận, đánh giá sản phẩm

– Mô tả: Người dùng có thể bày tỏ ý kiến đánh giá sản phẩm bằng cách để lại bình luận hoặc trả lời bình luận của người dùng khác

– Mục đích: Quản lý các sản phẩm trong giỏ hàng

Người dùng có khả năng quản lý giỏ hàng của mình bằng cách tăng hoặc giảm số lượng sản phẩm, cũng như loại bỏ sản phẩm không mong muốn khỏi giỏ hàng.

– Mục đích: Thanh toán đặt hàng sản phẩm

Người dùng có thể thực hiện thanh toán cho các sản phẩm trong giỏ hàng bằng cách cung cấp thông tin người nhận, địa chỉ giao hàng và chọn phương thức thanh toán, bao gồm chuyển khoản ngân hàng trước hoặc thanh toán tiền mặt khi nhận hàng.

32 sau đó click vào nút đặt hàng, khi đó hệ thống sẽ ghi nhận lại đơn hàng người dùng vừa đặt

3.2.1.3.11 Use case Chat with shop

– Mục đích: Trò chuyện với nhân viên tư vấn

Khách hàng có thể nhận tư vấn sản phẩm phù hợp bằng cách trò chuyện với nhân viên qua hộp thoại Facebook Messenger ở góc dưới bên phải của website.

3.2.1.3.12 Use case Edit personal information

– Mục đích: Cập nhật thông tin

Sau khi đăng nhập vào hệ thống, người dùng có thể dễ dàng chỉnh sửa thông tin cá nhân của tài khoản bằng cách nhập các thông tin mới và nhấn nút “Cập nhật”.

– Mục đích: Bảo mật tài khoản

– Mô tả: Người dùng có thể thay đổi mật khẩu tại website bất cứ lúc nào để bảo mật tài khoản

– Mục đích: Cập nhật địa chỉ email mới

Người dùng có khả năng thay đổi địa chỉ email sau khi đăng ký để nhận thông tin sản phẩm mới nhất và các thông tin khác từ website Để thực hiện việc này, người dùng cần nhập mã OTP chính xác đã được gửi đến email mới, sau đó hệ thống sẽ cập nhật địa chỉ email mới cho tài khoản.

3.2.1.3.15 Use case View purchase history

– Mục đích: Xem lại lịch sử đặt hàng

Người dùng có khả năng xem lại lịch sử đơn đặt hàng của mình, giúp họ kiểm tra các sản phẩm đã mua và theo dõi trạng thái của các đơn hàng đã thực hiện.

– Mục đích: Quản lý các sản phẩm trên hệ thống

– Mô tả: Quản trị viên có thể thực hiện quản lý các sản phẩm trên hệ thống bằng cách tìm kiếm, xem, thêm, xóa, cập nhật sản phẩm

– Mục đích: Quản lý các đơn đặt hàng trên hệ thống

Quản trị viên có khả năng quản lý đơn hàng trên hệ thống thông qua việc tìm kiếm, xem và cập nhật trạng thái của từng đơn hàng theo thời điểm tương ứng.

– Mục đích: Xem thống kê hoạt động bán hàng trên hệ thống website

Quản trị viên có khả năng theo dõi hoạt động bán hàng thông qua các biểu đồ trực quan và thông tin chi tiết về doanh thu cũng như số lượng bán ra của từng danh mục sản phẩm.

– Mục đích: Xóa bình luận đánh giá

– Mô tả: Quản trị viên có thể xóa các bình luận với ngôn từ tiêu cực hoặc các bình luận spam

3.2.1.3.20 Use case Forbid user from commenting

– Mục đích: Cấm khách hàng bình luận đánh giá sản phẩm

– Mô tả: Quản trị viên có thể cấm bình luận những khách hàng bình luận với ngôn từ tiêu cực hoặc bình luận spam

3.2.2.1 Tổng quan sơ đồ lớp

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 id string Protected Mã tài khoản

2 type int Protected Phân loại người dùng

3 username string Protected Tên đăng nhập

4 password string Protected Mật khẩu của tài khoản

5 address string Protected Địa chỉ của người dùng

6 phoneNumber string Protected Số điện thoại của người dùng

7 email string Protected Email của người dùng để xác nhận tài khoản

8 name string Protected Tên của người dùng

9 mute bool Protected Cho phép bình luận

10 district string Protected Quận/huyện của người dùng

11 city string Protected Thành phố của người dùng

12 confirmed bool Protected Xác nhận email

STT Tên phương thức Kiểu trả về Ràng buộc Ý nghĩa/ghi chú

1 logIn() bool Public Đăng nhập

2 logout() void Public Đăng xuất

3 editInfo() bool Public Chỉnh sửa thông tin cá nhân

1 muteUser() bool Private Dành cho quản lý cấm bình luận các tài khoản khách

1 signUp() bool Private Đăng ký tài khoản

2 confirmMail() bool Private Xác thực mail khi đăng ký

1 id string Private Mã bình luận

2 date date Private Thời gian bình luận

3 userId string Private Mã người bình luận

4 productId string Private Mã sản phẩm chứa bình luận

5 content string Private Nội dung bình luận

1 createComment() bool Public Tạo bình luận mới

2 deleteComment() bool Public Xóa bình luận

1 id string Private Mã bình luận

2 userId string Private Mã người bình luận

3 content string Private Nội dung bình luận

4 date date Private Thời gian bình luận

1 id string Private Mã sản phẩm

2 name string Private Tên sản phẩm

3 category string Private Danh mục sản phẩm

4 type string Private Loại sản phẩm

5 price double Private Nội dung bình luận

6 quantity int Private Số lượng sản phẩm

7 size Array Private Kích cỡ của sản phẩm

8 color Array Private Màu sắc của sản phẩm

9 discount double Private Giá giảm

10 image Array Private Hình ảnh của sản phẩm

11 status Array Private Trạng thái của sản phẩm

12 soldQuantity int Private Số lượng sản phẩm bán

1 createProduct() bool Public Tạo sản phẩm mới

2 deleteProduct () bool Public Xóa sản phẩm

3 editProduct() bool Public Sửa sản phẩm

4 getProduct() Array Public Lấy danh sách sản phẩm

1 id string Private Mã hóa đơn

2 userId string Private Mã người đặt mua

3 status int Private Trạng thái hóa đơn

4 orderDate date Private Ngày đặt hàng

5 shippingFee double Private Phí vận chuyển

6 totalPrice double Private Tổng giá hóa đơn

7 paymentMethod string Private Phương thức thanh toán

1 createOrder() bool Public Tạo hóa đơn

2 getOrder() Array Public Danh sách hóa đơn

3 setStatus(manager) bool Public Thay đổi trạng thái hóa đơn(chỉ có admin)

1 name string Private Tên người nhận

3 phone string Private Số điên thoại người nhận

4 address string Private Địa chỉ người nhận

5 note string Private Ghi chú khi giao hàng

1 id string Private Mã sản phẩm

2 name string Private Tên sản phẩm

3 category string Private Danh mục sản phẩm

4 type string Private Loại sản phẩm

5 price double Private Nội dung bình luận

6 size string Private Kích cỡ của sản phẩm

7 color string Private Màu sắc của sản phẩm

8 discount double Private Giá giảm

9 status Array Private Trạng thái của sản phẩm

10 soldQuantity int Private Số lượng mua

3.2.3 Phân tích thiết kế CSDL

STT Tên bảng dữ liệu Giải thích

1 User Lưu thông tin của khách hàng, admin

2 Product Lưu thông tin chi tiết các sản phẩm trong cửa hàng

3 Order Lưu thông tin hóa đơn

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 _id string Primary Key Mã tài khoản

2 username string Not null Tên tài khoản

3 password string Not null Mật khẩu tài khoản

4 email string Not null Tên người dùng

5 name string Not null Email người dùng dùng để xác nhận tài khoản

6 disctrict string Default:’’ Số điện thoại của người dùng

7 city string Default:’’ Ngày sinh của người dùng

8 address string Default:’’ Giới tính của người dùng

9 mute bool Default:false Địa chỉ của người dùng

10 phone string Default:’’ Mã loại nhân viên

11 confirmed bool Default:false Địa chỉ của người dùng

12 type int Default:0 Mã loại nhân viên

1 _id string Primary key Mã sản phẩm

2 name string Not null Tên sản phẩm

3 category string Not null Danh mục sản phẩm

4 type string Not null Loại sản phẩm

5 price number Not null Giá sản phẩm

6 sizes Array Not null Kích cỡ sản phẩm

7 colors Array Not null Màu sắc sản phẩm

8 discount number Not null Giá giảm sản phẩm

9 images Array Not null Hình ảnh sản phẩm

10 status Array Not null Trạng thái sản phẩm

11 soldQuantity number Default:0 Số lượng bán sản phẩm

12 quantity number Not null Số lượng sản phẩm còn

1 _id string Primary key Mã hóa đơn

2 userId string Not null Mã người mua

3 status number Not null Trạng thái hóa đơn

4 shipFee number Not null Phí vận chuyển

5 total number Not null Tổng giá tiền

6 date date Not null Ngày đặt mua

7 products Array Not null Mảng sản phẩm đặt mua

8 receiverInfo Object Not null Thông tin người nhận

9 paymentMethod string Not null Phương thức thanh toán

1 _id string Primary key Mã bình luận

2 productId string Not null Mã sản phẩm được bình luận

3 content string Not null Nội dung bình luận

4 date date Not null Ngày bình luận

5 reply Array Null Mảng trả lời bình luận

6 userId string Not null Mã người bình luận

Thiết kế giao diện

3.3.1.1 Giao diện trang chủ Đây là giao diện khi mở trang web, trang chủ sẽ hiển thị danh sách các sản phẩm mới của cửa hàng, phần đầu trang bao gồm các danh mục sản phẩm, ô tìm kiếm, chức năng đăng nhập, đăng ký và giỏ hàng chứa những sản phẩm ưa thích người dùng thêm vào Phần chân trang cung cấp địa chỉ và phương thức liên hệ với cửa hàng cho khách hàng

3.3.1.2 Giao diện đăng ký Đây là giao diện đăng ký, cho phép khách hàng đăng ký tài khoản sử dụng trong website

3.3.1.3 Giao diện đăng nhập Đây là giao diện đăng nhập của website, cho phép khách hàng đăng nhập vào ứng dụng bằng tài khoản đã đăng ký hoặc tài khoản Google

3.3.1.4 Giao diện thông tin tài khoản Đây là giao diện thông tin tài khoản, khách hàng có thể xem và cập nhật lại thông tin của mình bất cứ lúc nào Chỉ những khách hàng đã đăng nhập vào hệ thống mới sử dụng được tính năng này

3.3.1.5 Giao diện lịch sử mua hàng Đây là giao diện hiển thị danh sách các đơn hàng mà khách hàng đã đặt mua Khách hàng có thể click vào “Xem chi tiết” để xem thêm đầy đủ thông tin chi tiết về đơn hàng Chỉ những khách hàng đã đăng nhập vào hệ thống mới sử dụng được tính năng này

3.3.1.6 Giao diện cập nhật email Đây là giao diện cho phép người dùng cập nhật lại email mới trong quá trình sử dụng Khi cập nhật, hệ thống sẽ gửi mã xác nhận OTP đến địa chỉ email mới của khách hàng Khách hàng chỉ cần nhập vào đúng mã OTP đó thì email mới sẽ được cập nhật trong hệ thống Chỉ những khách hàng đã đăng nhập vào hệ thống mới sử dụng được tính năng này

3.3.1.7 Giao diện đổi mật khẩu Đây là giao diện cho phép người dùng thay đổi mật khẩu trong quá trình sử dụng nhằm tăng cường bảo mật tài khoản Chỉ những khách hàng đã đăng nhập vào hệ thống mới sử dụng được tính năng này

3.3.1.8 Giao diện tìm kiếm sản phẩm Đây là giao diện hiển thị ra danh sách các sản phẩm phù hợp với tìm kiếm của khách hàng Khách hàng có thể tìm kiếm sản phẩm theo danh mục/phân loại, tìm kiếm theo từ khóa hoặc sử dụng bộ lọc hay sắp xếp các sản phẩm theo mức giá

3.3.1.9 Giao diện chi tiết sản phẩm Đây là giao diện cho phép khách hàng xem đầy đủ thông tin chi tiết của một sản phẩm có trên hệ thống Ngoài ra, khách hàng có thể xem các bình luận đánh giá sản phẩm, để lại bình luận đánh giá của riêng mình hoặc trả lời bình luận đánh giá của một khách hàng khác Chỉ những khách hàng đã đăng nhập vào hệ thống mới có thể bình luận hoặc trả lời bình luận

3.3.1.10 Giao diện xem trước giỏ hàng Đây là giao diện cho phép khách hàng xem trước các sản phẩm đã được thêm vào giỏ hàng Giao diện cung cấp hình ảnh, tên, số lượng, mức giá của các sản phẩm và tổng giá trị của toàn bộ sản phẩm trong giỏ hàng Khách hàng có thể click vào nút “Xem giỏ hàng” để đi đến giao diện xem giỏ hàng cung cấp đầy đủ thông tin hơn và cho phép người dùng thao tác trên giỏ hàng

3.3.1.11 Giao diện xem giỏ hàng Đây là giao diện cho phép khách hàng xem thông tin danh sách các sản phẩm đã được thêm vào giỏ hàng Khách hàng có thể tăng/giảm số lượng của sản phẩm đã thêm hoặc loại bỏ sản phẩm ra khỏi giỏ hàng Nếu đã chắc chắn về các sản phẩm muốn mua, khách hàng có thể click vào nút “Thanh toán” để đi đến giao diện thanh toán đặt hàng, hoặc nếu khách hàng muốn tiếp tục chọn lựa mua sắm thêm sản phẩm thì có thể click vào nút

“Tiếp tục mua sắm” để quay trở về trang chủ xem danh sách các sản phẩm hiện có

3.3.1.12 Giao diện thanh toán đặt hàng Đây là giao diện thanh toán đặt hàng, cho phép khách hàng nhập thông tin giao hàng, phương thức thanh toán, xem tóm tắt đơn hàng và tiến hành đặt mua sản phẩm Phần thông tin người nhận sẽ được tự động điền tương ứng với thông tin tài khoản của khách hàng nhắm tiết kiệm tối đa thời gian mua sắm, khách hàng có thể thay đổi các thông tin này nếu muốn Chức năng thanh toán đặt hàng yêu cầu khách hàng phải đăng nhập vào hệ thống mới sử dụng được

3.3.1.13 Giao diện đặt hàng thành công

Sau khi khách hàng đặt hàng thành công, hệ thống sẽ tiến hành ghi nhận đơn hàng và hiển thị màn hình thông báo đặt hàng thành công

3.3.2 Giao diện quản lý (dành cho người quản trị)

3.3.2.1 Giao diện đăng nhập Đây là giao diện đăng nhập, cho phép người dùng đăng nhập vào hệ thống quản lý bằng tài khoản dành riêng cho quản trị viên

3.3.2.2 Giao diện thống kê Đây là giao diện cung cấp các số liệu về doanh thu và số lượng bán của các sản phẩm trong hệ thống Màn hình hiển thị bao gồm 2 biểu đồ và các ô thông tin nhỏ của 3 loại danh mục sản phẩm hiện có tại hệ thống biểu đồ thứ nhất cũng cấp thông tin doanh thu từng tháng trong 12 tháng Biểu đồ thứ hai cung cấp thông tin về số lượng bán của từng danh mục sản phẩm tương ứng với từng tháng trong 12 tháng Các ô thông tin của từng danh mục sản phẩm cung cấp tổng doanh thu và tổng số lượng bán tương ứng tính đến thời điểm hiện tại

3.3.2.3 Giao diện quản lý sản phẩm

Giao diện xem danh sách và tìm kiếm sản phẩm cho phép quản trị viên dễ dàng hiển thị và quản lý các sản phẩm có trên hệ thống Người dùng có thể nhanh chóng tìm kiếm sản phẩm bằng cách nhập từ khóa hoặc sử dụng bộ lọc theo phân loại và trạng thái, đồng thời có thể sắp xếp danh sách sản phẩm theo mức giá tăng dần hoặc giảm dần.

3.3.2.3.2 Giao diện xem chi tiết sản phẩm

Khi quản trị viên nhấn vào nút “xem sản phẩm” (nút màu hồng có hình mắt mở), hệ thống sẽ hiển thị một cửa sổ với thông tin chi tiết về sản phẩm đã được chọn.

3.3.2.3.3 Giao diện thêm sản phẩm

Định dạng
Số trang	66
Dung lượng	3,85 MB