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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
TÌM HIỂU DOCKER VÀ XÂY DỰNG ỨNG DỤNG
MINH HỌA
Giảng viên hướng dẫn:
ThS. Trần Anh Dũng
Lớp: SE121.L21.PMCL

Sinh viên thực hiện:
1. Phạm Hoàng Phượng Trinh

18521537

2. Nguyễn Phạm Minh Nhật

18521196

Tp Hồ Chí Minh, ngày 30 tháng 06 năm 2021

1


LỜI CẢM ƠN
Đầu tiên, nhóm tác giả gửi lời cảm ơn chân thành đến tập thể quý thầy cô trường
Đại học Công nghệ thông tin – Đại học Quốc gia Tp Hồ Chí Minh và q thầy cơ khoa
Cơng nghệ phần mềm đã giúp cho nhóm tác giả có những kiến thức cơ bản làm nền tảng
để thực hiện đề tài này.
Đặc biệt, nhóm tác giả xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới thầy Trần

Anh Dũng đã trực tiếp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báu giúp
nhóm tác giả hồn thành tốt báo cáo mơn học của mình.
Trong thời gian một kỳ thực hiện đề tài, nhóm tác giả đã vận dụng những kiến thức
nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới.
Từ đó, nhóm tác giả vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo
đồ án tốt nhất. Tuy nhiên, trong q trình thực hiện, nhóm tác giả khơng tránh khỏi những
thiếu sót. Chính vì vậy, nhóm tác giả rất mong nhận được những sự góp ý từ phía các thầy
cơ nhằm hồn thiện những kiến thức mà nhóm tác giả đã học tập và là hành trang để nhóm
tác giả thực hiện tiếp các đề tài khác trong tương lai.

2


NHẬN XÉT CỦA GIẢNG VIÊN
…………………………………………………………………………………………..…
………………………………………………………………………………………..……
……………………………………………………………………………………..………
…………………………………………………………………………………..…………
………………………………………………………………………………..……………
……………………………………………………………………………..………………
…………………………………………………………………………..…………………
………………………………………………………………………..……………………
……………………………………………………………………..………………………
…………………………………………………………………..…………………………
………………………………………………………………..……………………………
……………………………………………………………..………………………………
…………………………………………………………..…………………………………
………………………………………………………..……………………………………
……………………………………………………..………………………………………
…………………………………………………..…………………………………………

………………………………………………..……………………………………………
……………………………………………..………………………………………………
…………………………………………..…………………………………………………
………………………………………..……………………………………………………
……………………………………..………………………………………………………
…………………………………..…………………………………………………………
………………………………..……………………………………………………………
……………………………..………………………………………………………………
…………………………..…………………………………………………………………
………………………..……………………………………………………………………
……………………..………………………………………………………………………
3


Mục lục
Chương 1. GIỚI THIỆU CHUNG ...................................................................................... 6
1.1. Lý do chọn đề tài ...................................................................................................... 6
1.1.1. Về Docker .......................................................................................................... 6
1.1.2. Về ứng dụng website thương mại điện tử ......................................................... 6
1.2. Đối tượng nghiên cứu ............................................................................................... 7
1.3. Phạm vi nghiên cứu .................................................................................................. 7
1.4. Phương pháp nghiên cứu .......................................................................................... 7
1.5. Bố cục ....................................................................................................................... 8
Chương 2. KIẾN THỨC NỀN TẢNG ................................................................................ 9
2.1. Tổng quan về Docker ............................................................................................... 9
2.1.1. Định nghĩa ......................................................................................................... 9
2.1.2. Các thành phần chính ........................................................................................ 9
2.1.3. Một số khái niệm ............................................................................................... 9
2.1.4. Ưu điểm của Docker ........................................................................................ 10
2.1.5. Triển khai Docker trên Ubuntu........................................................................ 10

2.1.6. So sánh Docker và Virtual Machine ................................................................ 16
2.2. Giới thiệu về Node.js .............................................................................................. 18
2.2.1. Khái niệm ........................................................................................................ 18
2.2.2. Ưu điểm ........................................................................................................... 18
2.3. Giới thiệu về Express.js .......................................................................................... 19
2.3.1. Khái niệm ........................................................................................................ 19
2.3.2. Ưu điểm ........................................................................................................... 19
2.4. Giới thiệu về React.js ............................................................................................. 19
2.4.1. Khái niệm ........................................................................................................ 19
2.4.2. Ưu điểm ........................................................................................................... 20
2.5. Giới thiệu về MongoDB ......................................................................................... 20
4


2.5.1. Khái niệm ........................................................................................................ 20
2.5.2. Ưu điểm ........................................................................................................... 20
2.6. Giới thiệu về chuỗi JSON ....................................................................................... 21
2.6.1. Khái niệm ........................................................................................................ 21
2.6.2. Cấu trúc............................................................................................................ 21
Chương 3. XÂY DỰNG HỆ THỐNG .............................................................................. 22
3.1. Xây dựng kiến trúc hệ thống .................................................................................. 22
3.1.1. Xác định yêu cầu hệ thống .............................................................................. 22
3.1.2. Phân tích yêu cầu hệ thống .............................................................................. 22
3.2. Phân tích thiết kế hệ thống ..................................................................................... 26
3.2.1. Sơ đồ use case .................................................................................................. 26
3.2.2. Sơ đồ lớp .......................................................................................................... 34
3.2.3. Phân tích thiết kế CSDL .................................................................................. 42
3.3. Thiết kế giao diện ................................................................................................... 44
3.3.1. Giao diện người dùng ...................................................................................... 44
3.3.2. Giao diện quản lý (dành cho người quản trị) .................................................. 57

Chương 4. KẾT LUẬN ..................................................................................................... 64
4.1. Kết quả đạt được ..................................................................................................... 64
4.2. Hạn chế ................................................................................................................... 64
4.3. Thuận lợi và khó khăn ............................................................................................ 64
4.3.1. Thuận lợi .......................................................................................................... 64
4.3.2. Khó khăn.......................................................................................................... 64
4.4. Hướng phát triển ..................................................................................................... 65
TÀI LIỆU THAM KHẢO ................................................................................................. 66

5


Chương 1. GIỚI THIỆU CHUNG
1.1. Lý do chọn đề tài
1.1.1. Về Docker
Với sự phát triển hàng loạt của các loại công nghệ như hiện tại, các ứng dụng luôn
được tạo ra và cập nhập liên tục, nhiều loại ngôn ngữ lập trình mới được hình thành. Đi
kèm với những ngơn ngữ mới đó lại yêu cầu các phần mềm hỗ trợ, các gói thư viện và mơi
trường khác nhau. Có một số ngơn ngữ có thể chạy được hầu như trên mọi nền tảng như
Java, Python,... nhưng tuy nhiên có một số ngôn ngữ lại kén chọn và không thể thốt ra
khỏi sự phụ thuộc vào mơi trường, hệ điều hành như C# hay Swift, hoặc khi phát triển xong
phần mềm chúng ta phải deploy một ứng dụng thì phải tiến hành cài đặt rất nhiều mơi
trường. Đó là chưa kể các vấn đề về xong đột phần mềm, trùng port, sự khác biệt của các
phiên bản đối với môi trường phát triển,...Nếu như mọi thứ chỉ dừng lại ở mức khó cài đặt
thì cịn có thể chấp nhận nhưng thật kinh khủng nếu xảy ra xung dột phần mềm và làm ảnh
hưởng đến sự hoạt động của các ứng dụng thì điều đó là khơng thể.
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.
Là một nền tảng dành cho các lập trình viên, các nhà quản trị hệ thống Docker sẽ giúp
chúng ta phát triển, triển khai và chạy các ứng dụng bằng các container. Việc đóng gói
thành các container sẽ giúp giảm thiểu các rủi ro và xung đột trong môi trường phát triển

cũng như môi trường vận hành giúp ứng dụng hoạt đông cách ổn định nhất.
1.1.2. Về ứng dụng website thương mại điện tử
Trong thời đại 4.0 cơng nghệ cực kì phát triển như hiện nay, việc kinh doanh
online đang trở thành xu thế hơn bao giờ hết vì một số lý do như sau:
– 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ả.
– Bán hàng 24/7.
– 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.

6


Kết luận: Chính vì tính tiện dụng, hiệu quả và sự phát triển mạnh mẽ của các website,
ứng dụng thương mại điện tử cùng với khả năng hỗ trợ phát triển ứng dụng tuyệt vời đến
từ công nghệ mới Docker, nhóm em 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.

1.2. Đối tượng nghiên cứu
– Các công nghệ:
+ Docker
+ JavaScript
+ Node.js
+ React.js
+ MongoDB
– Đố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.

1.3. 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.

1.4. 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ó.
Qua khảo sát tìm hiểu, các website/ ứng dụng TMĐT hiện nay nói chung và ứng dụng kinh
doanh sản phẩm quần áo nói riêng, nhóm nhận thấy các ứng dụng đều có mơ hình xử lý
hàng hóa như sau:
– Nhập kho:
7


+ 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.
– Bán hàng:
+ 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ý.
– Đóng gói:
+ 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.
– Vận chuyển:
+ 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.
– Hậu mãi:
+ 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.

1.5. 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
u cầu bài tố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.

8


Chương 2. KIẾN THỨC NỀN TẢNG
2.1. Tổng quan về Docker
2.1.1. Định nghĩa
Docker là một nền tảng mở dành cho các lập trình viên, quản trị hệ thống dùng để
xây dựng, vận chuyển và chạy các ứng dụng một cách dễ dàng trên nền tảng ảo hóa.
Docker đưa ra một giải pháp mới cho vấn đề ảo hóa, thay vì tạo ra các máy ảo con
chạy độc lập kiểu hypervisors (tạo phần cứng ảo và cài đặt hệ điều hành lên đó), các ứng
dụng sẽ được đóng gói lại thành các Container riêng lẻ. Các Container này chạy chung trên
nhân hệ điều hành qua LXC (Linux Containers), chia sẻ chung tài nguyên của máy mẹ, do
đó, hoạt động nhẹ và nhanh hơn các máy ảo dạng hypervisors.
2.1.2. Các thành phần chính
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ụ cloud để chia sẻ ứng dụng và tự động hóa chuỗi các cơng việc
liên tục, có thể thao tác pull/push với các images.
2.1.3. Một số khái niệm
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 giống như một thư mục (directory), chứa tất cả những thứ
cần thiết để một ứng dụng có thể chạy được. Mỗi một docker container được tạo ra từ một
docker image. Các thao tác với một container: 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.

9


2.1.4. Ưu điểm của Docker
– 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ệ đó.
– Dễ dàng sử dụng: dễ dàng cho các lập trình viên, quản trị hệ thống,.. sử dụng vì Docker
sử lợi thế của container để xây dựng hoặc kiểm tra các ứng dụng một cách nhanh chóng.
– Khả năng di động: môi trường phát triển được dựng lên bằng docker có thể chuyển từ
người này sang người khác mà khơng làm thay đổi cấu hình ở trong.
2.1.5. Triển khai Docker trên Ubuntu
*Cài đặt Docker
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

10


Để giúp người dùng dễ dàng hơn trong việc sắp xếp các quy trình của các Docker container,
bao gồm khởi động, tắt, và thiết lập liên kết và volumes trong container chúng ta sẽ sử
dụng Docker Compose.
*Cài đặt Docker Compose
Bước 1:Kiếm tra current release và nếu cần, hãy cập nhật nó trong lệnh dưới đây:
sudo curl -L -s`-`uname -m` -o /usr/local/bin/docker-compose
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

11

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

12


Đầ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.
FROM node:12.19.0-slim
WORKDIR /app/client
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
Bên trong file dockerfile.node
FROM node:12.19.0-slim
WORKDIR /app/server
COPY package*.json ./
RUN npm install
COPY . .
RUN ls -ltr
EXPOSE 5000
CMD [ "npm", "start"]
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.
Bên trong file .dockerignore

13

Sau đó ở ngồi cùng chúng ta tạo 1 file docker-compose.yml để quản lý các dockerfile vừa
nãy
version: "3.5"
services:
react-app:
container_name: "reactfrontend"
build:
context: ./client
dockerfile: dockerfile.react
tty: true
image: react-app
stdin_open: true
ports:
- "3000:3000"
networks:
- mern-app
14


volumes:
- ./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:
- "5000:5000"

networks:
- mern-app
volumes:
- ./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
- ./server/app.js:/app/server/app.js
env_file: ./server/.env
networks:
mern-app:
driver: bridge
Ở file này chúng ta cũng có thể quản lý được các biến mơi trường(.env) mà không cần
phải thêm required(‘dotenv’).config() trong các file code.
Sau đó để chạy được file này chúng ta chỉ cần đứng đúng chỗ thu mục chứ file dockercompose.yml và chạy câu lệnh: Docker-compose up.

15


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.

16

– 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
Với cơng nghệ ảo hóa, trên cùng 1 máy chủ vật lý, có thể tạo ra nhiều hệ điều hành, tức là
sẽ chạy được nhiều ứng dụng. Vậy là tài nguyên của máy được tận dụng tốt hơn. Tuy nhiên,
việc ảo hóa này lại nảy sinh vấn đề mới:
– Ngốn tài nguyên: khi chạy 1 máy ảo, nó sẽ ln chiếm 1 phần tài ngun cố định.
Vd: máy chủ có 512GB SSD, 16GB RAM. Tạo ra 4 máy ảo Linux, mỗi máy cấp 64GB
SSD và 2GB RAM. Như vậy, sẽ mất 256 GB SSD để chứa 4 máy ảo, và khi chạy cùng 4
máy ảo lên cùng lúc, chúng sẽ chiếm 8GB RAM. Mặc dù chỉ chạy lên để khơng đó thơi,
chưa dùng gì cả nhưng nó vẫn chiếm từng đó.
– 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.

17


Hình 2.1.6.3: Mơ hình ảo hóa Container
Với cơng nghệ này, trên một máy chủ, ta sẽ sinh ra được nhiều máy con (giống với ảo hóa),
nhưng điều đặc biệt là các máy con (Guess OS) này đều dùng chung phần nhân của máy
mẹ (host OS) và chia sẻ với nhau tài nguyên của máy mẹ (RAM chẳng hạn). Như vậy việc
tận dụng tài nguyên sẽ được tối ưu hơn.

2.2. Giới thiệu về Node.js

2.2.1. Khái niệm
NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thơng
dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ
dàng mở rộng.
2.2.2. Ưu điểm
– Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread.
Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới
cho mỗi truy vấn.
– JSON API Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp
với JavaScript là sự lựa chọn tuyệt vời cho các dịch vụ webs làm bằng JSON.
– Ứng dụng trên 1 trang( Single page Application) Nếu chúng ta định viết 1 ứng dụng thể
hiện trên 1 trang thì Node.js rất phù hợp để làm. Với khả năng xử lý nhiều request đồng thời
thời gian phản hồi nhanh. Các ứng dụng định viết khơng muốn nó tải lại trang, gồm rất
nhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sự chuyên nghiệp thì
NodeJS sẽ là sự lựa chọn.
18


– Shelling tools unix Node.js sẽ tận dụng tối đa Unix để hoạt động. Tức là Node.js có thể
xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa
nhất và tuyệt vời nhất.
– Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTP request và nhận phản
hồi lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, Node.js sẽ xây dựng
các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu
khác.
– Ứng dụng web thời gian thực với sự ra đời của các ứng dụng di động & HTML 5 nên
Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications)
như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…
Kết luận: Với những tính năng ưu việt của mình, Node.js vẫn, sẽ và đang là một trong
những platform phổ biến nhất ngày nay, được các lập trình viên rất ưa chuộng, và sử dụng

rộng rãi trên toàn thế giới.
2.3. Giới thiệu về Express.js
2.3.1. Khái niệm
Express.js là một framework nhỏ nhưng linh hoạt được xây dựng trên nền tảng của
Node.js. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile.
2.3.2. Ưu điểm
– Express.js hỗ trợ JavaScript. Mà JavaScript lại là một ngôn ngữ được sử dụng rộng rãi,
rất dễ học và cũng được hỗ trợ ở mọi nơi. Do đó, nếu chúng ta đã biết JavaScript thì việc
lập trình bằng Express.js sẽ thực sự dễ dàng.
– Express.js có thể giảm một nửa thời gian viết mã mà vẫn giúp chúng ta xây dựng các
ứng dụng web hiệu quả. Nó khơng chỉ giảm thời gian mà còn giảm nỗ lực cần thiết để xây
dựng các ứng dụng web với sự trợ giúp của các tính năng khác nhau của nó.
– 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.

2.4. Giới thiệu về React.js
2.4.1. Khái niệm
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.
19


Được phát triển bởi Facebook và bản release đầu tiên trên thế giới vào nằm 2013 và
được sử dụng để viết ra Facebook, Instagram và được sự ủng hộ sử dụng của rất nhiều công
ty khác trên thế giới.
Mục tiêu của React chính là đơn giản để phát triển. Tất cả trạng thái đều được tập
trung tại một thời điểm, bằng cách chia giao diện người dùng thành tập hợp các thành phần
(components).
React được sử dụng để xây dựng single-page web applications.
2.4.2. Ưu điểm

– React.js tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó.
Điều này sẽ giúp cải thiện hiệu suất rất nhiều. React.js cũng tính tốn những thay đổi nào
cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp React.js tránh những thao
tác cần trên DOM mà nhiều chi phí.
– React.js giúp việc viết các đoạn code JavaScrip dễ dàng hơn vì nó dung cú pháp đặc
biệt là JSX (JavaScript mở rộng) cho phép chúng ta trộn giữa code HTML và JavaScript.
Chúng ta có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối
chuỗi. Đây là đặc tính thú vị của React.js. Nó sẽ chuyển đổi các đoạn HTML thành các
hàm khởi tạo đối tượng HTML bằng 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 hồn tồn
bằng JavaScript.
2.5. Giới thiệu về MongoDB
2.5.1. Khái niệm
MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL. Nó
có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đích hướng đến đối
tượng. MongoDB hoạt động dựa vào các khái niệm Collection và Document. Đồng thời,
nó có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng.
Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt. Điều này cho phép dữ
liệu không cần thiết phải tuân theo bất kỳ một dạng cấu trúc nào. Vì thế, MongoDB có thể
lưu trữ những dữ liệu có cấu trúc đa dạng và phức tạp. Dữ liệu trong MongoDB được lưu
bằng định dạng kiểu JSON.
2.5.2. Ưu điểm
– 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.
20


– 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.

2.6. Giới thiệu về chuỗi JSON
2.6.1. Khái niệm
JSON là chữ viết tắt của Javascript Object Notation, đây là một dạng dữ liệu tuân
theo một quy luật nhất định mà hầu hết các ngơn ngữ lập trình hiện nay đều có thể đọc
được, có thể sử dụng lưu nó vào một file, một record trong CSDL rất dễ dàng. JSON có
định dạng đơn giản, dễ dàng sử dụng và truy vấn hơn XML rất nhiều nên tính ứng dụng
của nó hiện nay rất là phổ biến.
JSON là định dạng trao đổi dữ liệu văn bản dung lượng nhẹ. Cú pháp của JSON rất
đơn giản là mỗi thông tin dữ liệu sẽ có 2 phần đó là key và value, điều này tương ứng trong
CSDL là tên field và giá trị của nó ở một record nào đó.
2.6.2. Cấu trúc
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 (").
Nếu có nhiều dữ liệu (nhiều cặp key => value) thì ta dùng dấu phẩy (,) để ngăn cách.
Các key của JSON nên đặt chữ cái không dấu hoặc số, dấu _ và khơng có khoảng trắng, ký
tự đầu tiên khơng nên đặt là số.

21


Chương 3. XÂY DỰNG HỆ THỐNG
3.1. Xây dựng kiến trúc hệ thống
3.1.1. Xác định yêu cầu hệ thống
Từ dữ liệu thu thập được trong q trình khảo sát, có thể xác định được, ứng dụng
sẽ được chia thành 2 phần và gồm những chức năng chính sau đây:
– 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.
+ Đặt mua 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ý sản phẩm.
+ 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
3.1.2.1. Phần người dùng
– Đăng ký:
Website ZShop là ứng dụng mua sắm trực tuyến nên để tránh tình trạng các tài
khoản ảo truy cập mua sắm cũng như hỗ trợ tiện ích tối đa cho khách hàng, ứng dụng yêu
cầu khách hàng phải xác thực thông tin thơng qua hình thức đăng nhập. Khách hàng cần
22


đăng ký tài khoản trên website để có thể đăng nhập. Có 2 hình thức đăng ký: sử dụng tài
khoản và mật khẩu để đăng ký hoặc đăng ký bằng tài khoản Google đã có. Đối với hình
thức đăng ký sử dụng tài khoản và mật khẩu, khách hàng cần phải thực xác thực email đăng
ký bằng cách click vào nút xác thực trong email đã được gửi đến tài khoản của khách hàng.
– Đăng nhập:
Khách hàng sử dụng tài khoản đã đăng ký để đăng nhập vào website. Có 2 hình thức
đăng nhập: sử dụng tài khoản và mật khẩu đã đăng ký hoặc sử dụng tài khoản Google. Sau
khi đăng nhập, khách hàng có thể sử dụng tất cả các tiện ích của website.
– 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ể cập nhật lại thơng tin tài khoản của
mình được chính xác nhất thuận tiện cho việc hỗ trợ mua hàng cũng như sử dụng hiệu quả
các tiện ích của website.
– Thay đổi mật khẩu
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 nếu có nhu cầu thay đổi email có thể tiến hành cập nhật email mới. Khi
đó hệ thống sẽ gửi một mã xác thực OTP đến 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 hệ thống cập nhật.
– Sắp xếp sản phẩm theo các danh mục tương ứng:
Các sản phẩm quần áo thời trang tại shop được sắp xếp theo từng danh mục tương
ứng giúp người tiêu dùng dễ dàng tìm kiếm, tiết kiệm tối đa thời gian mua sắm.
– Tìm kiếm sản phẩm:
Khách hàng có thể tìm kiếm nhanh chóng sản phẩm mong muốn bằng cách nhập từ
khóa vào “ơ tìm kiếm”, website sẽ trả về những sản phẩm phù hợp với từ khóa tìm kiếm
của khách hàng.
– Lọc/sắp xếp sản phẩm:
Khách hàng có thể dễ dàng tìm kiếm các sản phẩm mới, khuyến mãi, bán chạy,…
thông qua bộ lọc hoặc sắp xếp sản phẩm tăng hoặc giảm dựa vào mức giá.
– Xem thông tin sản phẩm:

23


Khi khách hàng click vào một sản phẩm bất kỳ, hệ thống sẽ hiển thị thông tin chi
tiết của sản phẩm đó bao gồm tên, kích thước, hình ảnh, màu sắc, giá bán, khuyến mãi cùng
với các đánh giá của những khách hàng khác về sản phẩm.
– Đánh giá sản phẩm:
Khách hàng có thể bày tỏ ý kiến bằng cách nhập ý kiến đánh giá vào ơ bình luận

bên dưới sản phẩm hoặc nhập trả lời đánh giá của một khách hàng khác. Khách hàng khơng
thể sử dụng tính năng nếu chưa đăng nhập hoặc bị người quản trị khóa tính năng bình luận.
– Đặt mua sản phẩm:
Khi thấy ưng ý sản phẩm, khách hàng có thể chọn “thêm vào giỏ hàng”. Giỏ hàng
có thể chứa rất nhiều sản phẩm và khách hàng có thể tăng/giảm số lượng hoặc xóa bỏ sản
phẩm ra khỏi giỏ hàng bất cứ lúc nào nếu thích. Cuối cùng nếu đã chắc chắn các sản phẩm
muốn mua, khách hàng cần đăng nhập vào hệ thống để có thể đặt hàng. Thơng tin nhận
hàng sẽ được tự động điền ở màn hình đặt hàng tương ứng với các thông tin cá nhân khách
hàng đã đăng ký và cập nhật, khách hàng cũng có thể thay đổi các thơng tin này nếu thích.
Sau đó khách hàng lựa chọn một trong hai phương thức thanh toán: chuyển khoản trước
qua tài khoản ngân hàng (với hình thức này cửa hàng sẽ liên hệ đến khách hàng để hướng
dẫn thủ tục thanh toán) hoặc thanh toán bằng 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 click vào nút đặt hàng, hệ thống sẽ ghi nhận đơn hàng
và cửa hàng sẽ chuẩn bị hàng hóa và tiến hành vận chuyển đến quý khách hàng.
– Theo dõi đơn hàng:
Sau khi đặt hàng, khách hàng có thể theo dõi tình trạng đơn hàng của mình trong
mục “Lịch sử đơn hàng”. Đơn hàng bao gồm các trạng thái: chờ xác nhận, đã xác nhận, đã
thanh toán, giao thành công hoặc đã hủy.

3.1.2.2. Phần quản trị viên
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.
– Quản lý sản phẩm:
+ Xem: Xem thông tin chi tiết của một sản phẩm bất kỳ đã có trên hệ thống.
+ Thêm: Thêm các sản phẩm mới cùng với các thông tin chi tiết của sản
phẩm vào hệ thống website.

24

+ 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:
+ Xố: 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
– Quản lý đơn hàng:
+ Xem: Xem thông tin chi tiết của đơn hàng bào gồm các 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 của đơn
hàng.
+ Cập nhật trạng thái: Cập nhật trạng thái chính xác tương ứng của đơn hàng
trong từng thời điểm. Quản trị viên không thể thực hiện thao tác cập nhật đối với các đơn
hàng có trạng thái “đã hủy”.
– Thống kê:
+ Tổng doanh thu tính đến thời điểm hiện tại.
+ Tổng số lượng bán tính đến thời điểm hiện tại.
+ Doanh thu theo tháng trong 12 tháng trong năm.
+ Số lượng bán theo tháng tương ứng với từng danh mục sản phẩm trong 12
tháng trong năm.

25