MÔ HÌNH PICKUP LATER CHO TOÀ NHÀ văn PHÒNG và TRƯỜNG học (đồ án SE121 l21)

ĐẠ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ài: MƠ HÌNH PICKUP LATER CHO TỒ NHÀ VĂN PHỊNG VÀ
TRƯỜNG HỌC

Giảng viên hướng dẫn:
ThS. NGUYỄN CƠNG HOAN
Sinh viên thực hiện:
Tăng Hồng Ân - 16520020

TP. HỒ CHÍ MINH, 2021


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

....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................

ii


LỜI CẢM ƠN
Lời đầu tiên em xin gửi lời cảm ơn chân thành tới giảng viên hướng dẫn Đồ Án 1, thầy
Nguyễn Cơng Hoan đã tận tình giúp đỡ em trong thời gian qua. Vì thời gian và năng lực
cịn có hạn chế nên khơng thể tránh khỏi những sai sót trong khi thực hiện đồ án của
mình. Rất mong được sự góp ý bổ sung của thầy để đề tài của em ngày càng hồn thiện
hơn.
Bên cạnh đó, em cũng xin gửi lời cảm ơn chân thành đến tất cả các anh chị, các bạn trong
và ngoài lớp đã kịp thời hỗ trợ, chia sẻ tài liệu và đưa ra những nhận xét, góp ý chân
thành nhằm giúp đồ án của em được hoàn thiện hơn.
Em xin chân thành cảm ơn!
TP. Hồ Chí Minh, tháng 6 năm 2021

iii


MỤC LỤC
LỜI CẢM ƠN .................................................................................................................... iii
MỤC LỤC ..........................................................................................................................iv

Chương 1: TỔNG QUAN ................................................................................................... 1
1.1. Đặt vấn đề ................................................................................................................. 1
1.2. Mục tiêu và phạm vi đề tài ....................................................................................... 1
1.2.1. Mục tiêu ............................................................................................................. 1
1.2.2. Phạm vi đề tài .................................................................................................... 2
1.3. Đối tượng sử dụng .................................................................................................... 2
1.4. Phương thức thực hiện .............................................................................................. 2
1.5. Kết quả dự kiến ......................................................................................................... 2
Chương 2. TÌM HIỂU VỀ MƠ HÌNH PICK UP LATER .................................................. 3
2.1 - Giới thiệu về mơ hình Pickup Later ........................................................................ 3
2.2 - Sơ đồ mơ hình Pickup Later .................................................................................... 3
2.3 - Diễn giải sơ đồ ........................................................................................................ 4
2.4 - Ưu điểm của mơ hình .............................................................................................. 4
Chương 3. CÁC CÔNG NGHỆ ÁP DỤNG ........................................................................ 5
3.1. Go và Gin Framework .............................................................................................. 5
3.1.1. Go ...................................................................................................................... 5
3.1.2. Gin-gonic ........................................................................................................... 7
3.1.3. Lý do sử dụng .................................................................................................... 7
3.1.4. Áp dụng vào đề tài ............................................................................................. 7
3.2. PostgreSQL ............................................................................................................... 8
3.2.1. PostgreSQL là gì? .............................................................................................. 8
3.2.2. Lý do sử dụng .................................................................................................... 9
3.2.3. Áp dụng vào đề tài ........................................................................................... 10
3.3. React ....................................................................................................................... 10
3.3.1 - Giới thiệu ........................................................................................................ 10
3.3.2 - Khái niệm ....................................................................................................... 10
3.3.3 - Virtual DOM (DOM ảo) ................................................................................ 10
3.3.4 - JSX ................................................................................................................. 11
iv

3.3.5 - One-way data binding .................................................................................... 12
3.3.6 - Component ..................................................................................................... 12
3.3.7 - Props và State ................................................................................................. 12
3.3.8 - Áp dụng vào đề tài ......................................................................................... 13
3.4. MQTT ..................................................................................................................... 13
3.4.1 - Giới thiệu về Message Queue ........................................................................ 13
3.4.2 - Giới thiệu về MQTT - Message Queuing Telemetry Transport .................... 13
3.4.3 - Vị trí của MQTT trong mơ hình IoT .............................................................. 14
3.4.4 - Tính năng và đặc điểm nổi bật ....................................................................... 14
3.4.5 - Ưu điểm của MQTT ....................................................................................... 15
3.4.6 - Cơ chế hoạt động............................................................................................ 15
3.4.7 - Áp dụng vào đề tài ......................................................................................... 16
3.5 JWT ......................................................................................................................... 16
3.5.1. JWT là gì? ........................................................................................................ 16
3.5.2. Khi nào nên dùng JSON Web Token? ............................................................ 17
3.5.3. Áp dụng vào đề tài ........................................................................................... 18
Chương 4. PHÁT BIỂU BÀI TOÁN ................................................................................ 19
4.1. Giới thiệu về ứng dụng ........................................................................................... 19
4.3.1. Yêu cầu chức năng .......................................................................................... 19
4.3.2. Yêu cầu phi chức năng .................................................................................... 20
Chương 5. PHÂN TÍCH THIẾT KẾ HỆ THỐNG ............................................................ 21
5.1. Sơ đồ phân rã chức năng ........................................................................................ 21
5.2. Mơ hình Use-case ................................................................................................... 22
5.2.1. Sơ đồ usecase ................................................................................................... 22
5.2.2. Danh sách người dùng ..................................................................................... 23
5.2.3. Danh sách các use-case ................................................................................... 23
5.3. Các sơ đồ và luồng xử lý ........................................................................................ 24
5.3.1. Đăng nhập ........................................................................................................ 24
5.3.2. Tìm kiếm sản phẩm ......................................................................................... 25

5.3.3. Quản lý giỏ hàng ............................................................................................. 25
5.3.4. Theo dõi đơn hàng ........................................................................................... 26
5.3.5. Quản lý sản phẩm ............................................................................................ 27
v


5.3.6. Quản lý danh mục ............................................................................................ 28
5.4. Thiết kế kiến trúc .................................................................................................... 30
5.4.1. Mơ hình kiến trúc ............................................................................................ 30
5.4.2. Mơ tả ................................................................................................................ 30
5.5. Thiết kế cơ sở dữ liệu ............................................................................................. 32
5.5.1. Sơ đồ lớp .......................................................................................................... 32
5.5.2. Tổng quan cơ sở dữ liệu .................................................................................. 32
5.6. Thiết kế giao diện ................................................................................................... 33
5.6.1. Trang chủ ......................................................................................................... 33
5.6.2. Tìm kiếm.......................................................................................................... 34
5.6.3. Danh sách sản phẩm ........................................................................................ 35
5.6.4. Chi tiết sản phẩm ............................................................................................. 36
5.6.5. Giỏ hàng .......................................................................................................... 37
5.6.6. Thanh toán ....................................................................................................... 38
5.6.7. Đăng nhập & tài khoản .................................................................................... 39
5.6.8. Lịch sử mua hàng ............................................................................................ 40
5.6.9. Chi tiết đơn hàng ............................................................................................. 41
5.6.10. Danh sách đơn hàng (cửa hàng) .................................................................... 42
5.6.11. Chi tiết đơn hàng (cửa hàng) ......................................................................... 43
Chương 6: KIỂM THỬ ỨNG DỤNG ............................................................................... 44
6.1. Môi trường kiểm thử .............................................................................................. 44
6.2. Thực thi kiểm thử ................................................................................................... 44
6.2.1. Kiểm thử giao diện .......................................................................................... 44
6.2.2. Kiểm thử chức năng ........................................................................................ 45

Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ...................................................... 47
7.1. Kết luận................................................................................................................... 47
7.2. Hướng phát triển ..................................................................................................... 47
TÀI LIỆU THAM KHẢO ................................................................................................. 48

vi


Chương 1: TỔNG QUAN
1.1. Đặt vấn đề
Ngày nay với sự phát triển vũ bão của cơng nghệ thơng tin nói chung và lĩnh vực thương
mại điện tử nói riêng, mức sống của con người cũng phát triển và ngày một hiện đại hơn.
Một trong những nhu cầu tiêu biểu đó là mua sắm online, cụ thể ở đây là nhu cầu đặt đồ
ăn thức uống.
Mặt khác, mơ hình cho th văn phòng theo dạng cao ốc, tập trung nhiều văn phịng cơng
ty trong một tồ nhà cao tầng đã trở nên rất phổ biến, đặc biệt là ở các thành phố lớn. Các
tồ nhà này có đặc thù là nhu cầu “ăn tiệm uống tiệm” của nhân viên làm việc bên trong
rất cao, có một hoặc một vài quán ăn bên trong hoặc ngay dưới toà nhà để phục vụ nhu cầu
trên. Thơng thường thì họ sẽ xuống những tiệm ăn này để xếp hàng đặt đồ ăn thức uống và
ăn tại chỗ hoặc đem đi. Tuy nhiên, nếu mua đồ ăn thức uống theo hình thức truyền thống
này sẽ có những điểm bất cập như tốn thời gian xếp hàng, khơng thể biết được tình trạng
cịn hàng/hết hàng của món ăn.
Nhận thấy những tiền đề thực tiễn trên, nhóm đã có ý tưởng và quyết định hiện thực một
hệ thống cho phép người dùng lựa chọn và đặt món yêu thích, theo dõi đơn hàng thời gian
thực; cho phép chủ cửa hàng xử lý đơn hàng nhanh chóng, thuận tiện, tạo và cài đặt thực
đơn món ăn dễ dàng cùng với tính năng độc đáo chia sẻ giỏ hàng giữa nhiều thiết bị mà
chưa hệ thống nào khác làm được tới thời điểm hiện tại.
Với việc sử dụng những công nghệ mới và “thời thượng” như Golang, React, React Native,
dịch vụ này sẽ đem lại những trải nghiệm tối ưu và tuyệt vời cho người dùng. Với ý tưởng
này, nhóm tự tin sản phẩm sẽ là bước đi tiên phong, đột phá trong lĩnh vực thương mại

điện tử vốn là sân chơi năng động nhiều cơ hội nhưng đầy tính cạnh trạnh khốc liệt; phục
vụ cho một nhu cầu thực tiễn của xã hội với nhóm khách hàng cụ thể và đầy tiềm năng
này.
1.2. Mục tiêu và phạm vi đề tài
1.2.1. Mục tiêu
-

Tìm hiểu mơ hình pick up later

-

Tìm hiểu về Golang và framework Gin-gonic

-

Tìm hiểu về ReactJS

-

Tìm hiểu về PostgreSQL

-

Xây dựng ứng dụng tìm kiếm và đặt các món ăn trên nền tảng web

-

Xây dựng hệ thống quản lý các món ăn, đơn hàng theo thời gian thực
1

-

Có khả năng thực hiện các chương trình khuyến mãi, giảm giá trên các món ăn

-

Khắc phục các hạn chế như: chờ đợi đơn hàng xử lý quá lâu, bom hàng, chủ động
thời gian để nhận đơn hàng

-

Công cụ để tìm kiếm những quán ăn mới trong khu vực lân cận theo một số tiêu chí
đề ra

1.2.2. Phạm vi đề tài
Sau khi nghiên cứu và tìm hiểu sơ bộ về nhu cầu sử dụng của người dùng, nhóm quyết
định phạm vi thực hiện đề tài như sau:
-

Phạm vi địa lý: Ứng dụng được sử dụng tại Thành phố Hồ Chí Minh.

-

Phạm vi chức năng:
+ Quản lý các món ăn.
+ Quản lý đơn hàng.
+ Tìm kiếm các món ăn và đặt hàng (cá nhân hoặc theo nhóm).
+ Theo dõi tình trạng đơn hàng theo thời gian thực.
+ Chống tình trạng bom hàng, quên nhận hàng.

1.3. Đối tượng sử dụng
-

Các chủ cửa hàng bán thực phẩm, đồ ăn

-

Sinh viên, nhân viên văn phịng có nhu cầu tìm kiếm các qn ăn trong khu vực lân
cận

1.4. Phương thức thực hiện
-

Xây dựng web server bằng Golang với framework Gin-gonic.

-

Xây dựng web client bằng ReactJS.

-

Database xây dựng bằng PostgreSQL.

1.5. Kết quả dự kiến
-

Hoàn thành ứng dụng trên nền tảng web, cung cấp các chức năng cho phép khách
hàng có thể lựa chọn những món ăn yêu thích, và theo dõi trạng thái của các đơn
hàng đã đặt.

-

Xây dựng trang quản lý trên nền tảng web, cung cấp các chức năng cho phép chủ
cửa hàng thiết lập thực đơn, quản lý các sản phẩm, đơn hàng.

-

Công cụ tìm kiếm các quán ăn mới trong khu vực lân cận.

2


Chương 2. TÌM HIỂU VỀ MƠ HÌNH PICK UP LATER
2.1 - Giới thiệu về mơ hình Pickup Later
●

Như đã đề cập ở chương “Tổng quan”, hiện nay các cao ốc tồ nhà văn phịng rất
phổ biến với đặc thù là nhu cầu ăn uống tiệm của nhân viên làm việc bên trong rất
cao. Những tồ nhà này thường có một vài quán ăn để phục vụ nhu cầu ăn uống
của nhân viên văn phịng. Thơng thường, họ sẽ xuống những tiệm ăn này để xếp
hàng mua đồ ăn thức uống. Tuy nhiên, hình thức truyền thống này có những điểm
bất cập như tốn thời gian xếp hàng để order, không thể biết được tình trạng cịn
hàng/hết hàng của món ăn và xảy ra tình trạng thời gian chết trong lúc đợi cửa
hàng chuẩn bị món.

●

Từ những lý do trên, mơ hình Pickup Later ra đời với việc cho phép khách hàng
đặt hàng từ xa trên web / mobile app và tới quầy nhận món sau khi món đã được

cửa tiệm chuẩn bị.

2.2 - Sơ đồ mơ hình Pickup Later

Hình 2.1: Sơ đồ mơ hình Pickup later1

1

Sơ đồ mơ hình Pickup later nhóm triển khai

3


2.3 - Diễn giải sơ đồ
Bước 1, 2 và 3: Người dùng phát sinh nhu cầu ăn uống. Lúc này thay vì đi xuống cửa tiệm
để chọn món và xếp hàng thanh tốn, họ có thể truy cập web app Pickup Later và chọn
món ngay trên điện thoại của mình, đồng thời biết được tình trạng cịn hàng/hết hàng của
món.
Bước 4: Người dùng chốt món (giỏ hàng) bằng cách đặt đơn trên web app. Có thể lựa chọn
hình thức thanh toán khi nhận hàng COD.
Bước 5: Chủ cửa hàng sẽ nhận được đơn hàng ngay sau khi khách hàng đặt đơn (cập nhật
danh sách đơn hàng thời gian thực).
Bước 6: Cửa hàng sẽ phản hồi đơn hàng này theo 1 trong 2 cách:
-

Xác nhận đơn: tiếp tục thực hiện và hồn thành đơn. Sau bước này, đơn hàng sẽ
khơng thể huỷ nữa.

-

Huỷ đơn: Không thực hiện đơn nữa và báo cho khách hàng biết. Cửa hàng phải nêu
rõ lý do huỷ đơn.

Bước 7: Sau khi đã xác nhận đơn hàng, cửa hàng sẽ tiến hành chuẩn bị món cho đơn.
Bước 8: Sau đơn hàng đã được chuẩn bị, cửa hàng sẽ đánh dấu đơn hàng là sẵn sàng giao
và thông báo cho khách xuống lấy bằng tin nhắn SMS gửi đến số điện thoại đã đăng nhập
của khách.
Bước 9: Khách hàng tới quầy thanh tốn (nếu chọn hình thức thanh tốn là COD) và nhận
món. Đơn hàng hồn tất.
2.4 - Ưu điểm của mơ hình
●

Tiết kiệm thời gian ở cơng đoạn chờ chuẩn bị món. Khách hàng có thể tiếp tục
cơng việc của mình trong lúc chờ cửa hàng chuẩn bị đơn hàng.

●

Loại bỏ được công đoạn xếp hàng để được order ở cửa tiệm. Khách hàng khi
xuống cửa tiệm sẽ nhận được món ngay lập tức vì món đã được chuẩn bị trước đó.

●

Loại bỏ được tình trạng xuống tận nơi mới biết là món đã hết (out of stock).

●

Nhiều sự lựa chọn và thuận tiện hơn cho khách hàng: Khách hàng có thể dễ dàng
lướt thực đơn online và lựa chọn món u thích hơn là ở cửa tiệm.

4

Chương 3. CÁC CÔNG NGHỆ ÁP DỤNG
3.1. Go và Gin Framework
3.1.1. Go
-

Go (hay cịn gọi là Golang) là ngơn ngữ lập trình mã nguồn mở, được thiết kế tại
Google bởi Robert Griesemer, Rob Pike, and Ken Thompson. Với Go, bạn có thể
dễ dàng xây dựng phần mềm đơn giản, đáng tin cậy và hiệu quả.

-

Go có cú pháp giống với C và là ngơn ngữ lập trình biên dịch (compiled
programming language).

Hình 3.1: Giới thiệu về Go2
-

Go ra mắt phiên bản đầu tiên vào ngày 10 tháng 11 năm 2009. Go được thiết kế,
phát triển với khả năng xử lý đa luồng được chú trọng hàng đầu. Go đưa ra 2 tính
năng hỗ trợ concurrency rất mạnh đó là goroutine và channel:
+ Goroutine có ngăn xếp phân khúc có thể mở rộng (growable segmented stacks).
Điều này có nghĩa là nó sẽ sử dụng nhiều bộ nhớ RAM hơn nếu điều đó là cần
thiết.
+ Goroutines có thời gian khởi động nhanh hơn là threads.

2

5

+ Goroutines có các channel và giữa các channel này có thể giao tiếp với nhau.
+ Goroutines có khóa mutex (mutex locking) để đảm bảo việc đọc và ghi vào một
cấu trúc dữ liệu hay một biến chung không xảy ra xung đột.
-

Go giao tiếp trực tiếp với vi xử lý bằng mã nhị phân (binaries)

Hình 3.2: Biên dịch và thông dịch3
Một số đặc điểm nổi bật của Golang:
● Go là ngơn ngữ lập trình biên soạn (compiled language). Phần mềm viết bởi Go cần

được biên soạn sử dụng Go compile trước khi có thể chạy được.
● Go có cú pháp tương tự như C.
● Go là một ngôn ngữ lập trình kiểu tĩnh (hay static type), các biến hoặc dữ liệu trong

Golang sẽ không thay đổi trong suốt chương trình.
● Golang hỗ trợ xử lý đa luồng multi-threading.
● Golang hỗ trợ tính năng quản lý bộ nhớ mạnh mẽ
● Golang sở hữu một bộ thư viện phong phú mà lập trình viên có thể tận dụng.
● Golang nhỏ gọn và đơn giản
● Go hỗ trợ phát triển ứng dụng nhanh
● Khả năng mở rộng dễ dàng
● Mã nguồn mở, các cơng cụ có sẵn miễn phí
3

/>
6

3.1.2. Gin-gonic
+ Gin là một web framework được viết bằng Go (Golang). Gin Gonic là một framework
tối giản chỉ bao gồm các thư viện và tính năng cần thiết nhất. Điều này làm cho nó hồn
hảo cho việc phát triển các API REST hiệu suất cao.
+ Gin gonic có thể thêm middlewares, xác thực JSON, … nhưng nó vẫn duy trì hiệu suất
tối ưu của nó. Gin Gonic sử dụng httprouter, bộ định tuyến HTTP nhanh nhất cho Go.
3.1.3. Lý do sử dụng
Một số đặc điểm quan trọng mà Go rất đáng để nghiên cứu và sử dụng đó là:
-

Tiện lợi: Go được so sánh với các scripting language (ngôn ngữ kịch bản) với khả
năng đáp ứng nhiều nhu cầu lập trình phổ biến. Một số tính năng này được tích hợp
vào trong chính ngơn ngữ. Go cung cấp khả năng quản lý bộ nhớ tự động bao gồm
việc garbage collection (dọn file rác).

-

Khả năng tương thích: Go là ngơn ngữ biên lập trình biên dịch, nhưng thay vì biên
dịch ra bytecode như Java thì Go biên dịch ra mã máy (machine code) nên có thể
chạy ngay với hệ điều hành biên dịch ra mà khơng cần cài đặt gì thêm. Đối với các
hệ điều hành khác nhau như Window, Mac OS hay Linux, sau khi biên dịch chỉ cần
1 file duy nhất, copy đến hệ điều hành đích là chạy, rất đơn giản

-

Tốc độ xử lý nhanh: Như đã đề cập ở trên, Go là ngơn ngữ lập trình biên dịch ra mã
máy (dưới dạng các bit nhị phân), do đó Go có hiệu suất tốt

-

Concurrency và goroutine: Concurrency là tính năng chủ lực của ngơn ngữ lập trình
Go để tận dụng năng lực xử lý của CPU. Thông thường các ngơn ngữ lâp trình khác
phải phụ thuộc sự cấp phát tài nguyên của hệ điều hành để có thể chạy concurrency,
trong khi đó Go có thể chạy concurrency mà không phụ thuộc hệ điều hành. Với
Go, khi việc sử dụng bộ vi xử lý multi-core khả thi, goroutines hồn tồn có thể
thay thế được thread. Mỗi goroutines chỉ sử dụng 2KB bộ nhớ từ heap (thay vì xấp
xỉ 1MB như Java), như vậy bạn có thể tạo ra hàng triệu goroutines bất kỳ lúc nào.

3.1.4. Áp dụng vào đề tài
Với những ưu điểm kể trên, nhóm quyết định sử dụng Go vào việc xây dựng server cho
ứng dụng, nhằm tạo ra các phương thức để nhận và gửi kết quả cho client. Việc sử dụng
Go kết hợp với Gin-gonic mang lại tốc độ xử lý nhanh chóng, thực hiện được nhiều yêu
cầu cùng lúc và dễ dàng sử dụng. Bên cạnh đó, Go cịn có thư viện và cộng đồng hỗ trợ
rộng lớn, mạnh mẽ.

7


3.2. PostgreSQL
3.2.1. PostgreSQL là gì?
PostgreSQL là hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng (object-relational database
management system), là hệ thống cơ sở dữ liệu mã nguồn mở tiên tiến nhất hiện nay.
PostgreSQL Phát triển bởi: PostgreSQL Global Development Group, phát hành lần đầu
vào ngày 08/07/1996:
● PostgreSQL được thiết kế để chạy trên các nền tảng tương tự UNIX. Tuy nhiên,
PostgreSQL sau đó cũng được điều chỉnh linh động để có thể chạy được trên nhiều
nền tảng khác nhau như Mac OS X, Solaris và Windows.
● PostgreSQL là một phần mềm mã nguồn mở miễn phí. Mã nguồn của phần mềm
khả dụng theo license của PostgreSQL, một license nguồn mở tự do. Theo đó, bạn

sẽ được tự do sử dụng, sửa đổi và phân phối PostgreSQL dưới mọi hình thức.
● PostgreSQL khơng u cầu q nhiều cơng tác bảo trì bởi có tính ổn định cao. Do
đó, nếu bạn phát triển các ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp
hơn so với các hệ thống quản trị dữ liệu khác.
PostgreSQL được xây dựng theo chuẩn SQL99 và có nhiều đặc điểm hiện đại:
●

Câu truy vấn phức hợp (complex query)

●

Khóa ngoại (foreign key)

●

Thủ tục sự kiện (trigger)

●

Các khung nhìn (view)

●

Tính tồn vẹn của các giao dịch (integrity transactions)

●

Việc kiểm tra truy cập đồng thời đa phiên bản (multiversion concurrency control)

8

Hình 3.6: Các hệ quản trị cơ sở dữ liệu phổ biến hiện nay4
3.2.2. Lý do sử dụng
-

PostgreSQL cung cấp cho người dùng nhiều tính năng hiện đại, khả năng ổn định
cao, tốc độ nhanh

-

Bảo mật dữ liệu, an toàn

-

Toàn vẹn dữ liệu: Ràng buộc loại từ, Primary Keys, Foreign Keys, UNIQUE, NOT
NULL, Khóa khuyến nghị/ Advisory Locks, Khóa hàm số/ Explicit Locks,…

-

Kiểu dữ liệu đa dạng: nguyên hàm (các nguyên số, boolean, số, chuỗi), cấu trúc
(UUID, Phạm vi, Array, Datetime, JSON)

-

Mã nguồn mở và miễn phí

-

Phù hợp với Golang để xử lý dữ liệu thông qua thư viện GORM

*Giới thiệu về GORM:
GORM là thư viện ORM tuyệt vời cho Golang. Nó là một thư viện ORM để xử lý với quan
hệ cơ sở dữ liệu. Thư viện Gorm này được phát triển trên các package cơ sở dữ liệu/SQL,
với một số tính năng chính như là:
-

4

Full-Featured ORM (almost).

/>
9


-

Associations (has one, has many, belongs to, many too many, polymorphism).

-

Callbacks (Before/After Create/Save/Update/Delete/Find).

-

Preloading (eager loading).

-

Transactions.

-

Composite Primary Key.

-

SQL Builder.

3.2.3. Áp dụng vào đề tài
Nhờ những tính năng nổi trội của PostgreSQL, nhóm đã đưa PostgreSQL vào hệ thống với
các danh sách các bảng tương ứng với các model để quản lý từng chức năng. Tích hợp
PostgreSQL vào server Golang bằng thư viện GORM.
Ứng dụng có server sử dụng Postgres để lưu trữ dữ liệu, dữ liệu được hệ quản trị cơ sở dữ
liệu PostgreSQL trả về cho người dùng dưới dạng JSON.
3.3. React
3.3.1 - Giới thiệu
React (hay ReactJS) là một thư viện JavaScript đang nổi lên trong những năm gần đây với
xu hướng Single Page Application (SPA). Trong khi những framework khác cố gắng
hướng đến một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối
hợp với những thư viện JavaScript khác.
3.3.2 - Khái niệm
-

React là một thư viện UI được phát triển tại Facebook để hỗ trợ việc xây dựng
những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử
dụng lại được. React được sử dụng tại Facebook trong production, và
www.instagram.com được viết hoàn toàn trên React.

-

React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và
cập nhật ít thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu hình, chúng ta sẽ
đi đến một số khái niệm cơ bản sau đây.

3.3.3 - Virtual DOM (DOM ảo)
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng
thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ
phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React sử dụng DOM ảo
để cải thiện vấn đề này. DOM ảo là một JavaScript object, mỗi object chứa đầy đủ thông
tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính tốn sự thay đổi giữa object
và DOM thật. Điều này giúp trang web sẽ không load lại từ đầu mà chỉ thay đổi ở thành
10


phần cần được thay đổi, dẫn đến trang web sẽ hoạt động nhanh hơn và phía server cũng đỡ
mất cơng phải query lại các dữ liệu của những thành phần khác.

Hình 3.7: Cơ chế cập nhật DOM của React5
3.3.4 - JSX
JSX là viết tắt của JavaScript XML, là một dạng ngơn ngữ cho phép viết các mã HTML
trong JavaScript. Nó giúp người lập trình có thể code React bằng cú pháp của XML thay
vì sử dụng JavaScript.

5

/>
11

3.3.5 - One-way data binding
Dữ liệu trong React hoàn toàn đi theo 1 chiều và được truyền từ components cha xuống
components con thông qua props (về khái niệm props sẽ được giải thích sau).

Hình 3.8: Data binding trong React6
Điều này dẫn tới việc sau này trang web sẽ hoạt động 1 cách khoa học và dễ dàng bảo
trì hay nâng cấp tính năng. Với đặc điểm này thì React dễ dàng cho việc xây dựng các
trang web với lượng người dùng cũng như dữ liệu lớn.
3.3.6 - Component
React được xây dựng xung quanh các component, chứ không dùng rendering template
như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành
phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các
trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa các
component khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và
React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ
React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một
react component đơn giản chỉ cần một method render. Có rất nhiều method khả dụng khác,
nhưng render là method chủ đạo.
3.3.7 - Props và State
-

Props: giúp các component tương tác với nhau, component nhận input gọi là props,
và trả thuộc tính mơ tả những gì component con sẽ render. Props là bất biến.

-

State: thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời
render lại để cập nhật UI.

6

a/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7

12


3.3.8 - Áp dụng vào đề tài
Yêu cầu của nhóm đối với web app đặt hàng phải là một SPA (Single Page Application)
có tốc độ nhanh, phản hồi tốt, được chia nhỏ thành nhiều thành phần (component) con có
khả năng tái sử dụng và tuỳ biến cao.
Với những ưu điểm của React, nhóm quyết định sử dụng thư viện này để xây dựng UI cho
web app đặt món vì nó rất phù hợp với những yêu cầu phía trên của nhóm.
3.4. MQTT
3.4.1 - Giới thiệu về Message Queue
Message queue là một hộp thư, cho phép các thành phần/service trong một hệ thống
(hoặc nhiều hệ thống) gửi thông tin cho nhau. Sở dĩ gọi nó là queue (hàng đợi) vì nó thực
hiện việc lấy message theo cơ chế FIFO – First In First Out, tức là vào trước thì ra trước.
Một hệ thống sử dụng Message Queue thường có những thành phần sau đây:
- Message: Thơng tin được gửi đi (có thể là text, binary hoặc JSON)
- Message Queue: Nơi chứa những message này, cho phép producer và consumer có
thể trao đổi với nhau
- Producer (hay Publisher): Chương trình/service tạo ra thơng tin, đưa thơng tin vào
message queue.
- Consumer: Chương trình/service nhận message từ message queue và xử lý
Một chương trình/service có thể vừa là producer, vừa là consumer.

Hình 3.10: Các thành phần trong MQTT7
3.4.2 - Giới thiệu về MQTT - Message Queuing Telemetry Transport
MQTT (Message Queuing Telemetry Transport) là giao thức truyền thơng điệp (message)
theo mơ hình publish/subscribe (cung cấp/th bao), được sử dụng cho các thiết bị IoT với

băng thông thấp, độ tin cậy cao và khả năng sử dụng trong mạng lưới khơng ổn định. Nó
dựa trên một Broker (tạm dịch là “Máy chủ môi giới”) “nhẹ” (khá ít xử lý) và được thiết
kế có tính mở (tức là không đặc trưng cho ứng dụng cụ thể nào), đơn giản và dễ cài đặt.
MQTT là lựa chọn lý tưởng trong các môi trường như:
7

/>
13


-

Những nơi mà giá mạng viễn thông đắt đỏ hoặc băng thông thấp hay thiếu tin cậy.

-

Khi chạy trên thiết bị nhúng bị giới hạn về tài nguyên tốc độ và bộ nhớ.

-

Bởi vì giao thức này sử dụng băng thơng thấp trong mơi trường có độ trễ cao nên
nó là một giao thức lý tưởng cho các ứng dụng M2M (Machine to Machine).

MQTT là giao thức được sử dụng trong ứng dụng nhắn tin Facebook Messenger.
3.4.3 - Vị trí của MQTT trong mơ hình IoT
Một số ưu điểm nổi bật của MQTT như: băng thông thấp, độ tin cậy cao và có thể sử dụng
ngay cả khi hệ thống mạng khơng ổn định, tốn rất ít byte cho việc kết nối với server và
connection có thể giữ trạng thái open xuyên suốt, có thể kết nối nhiều thiết bị (MQTT
client) thơng qua một MQTT server (broker). Bởi vì giao thức này sử dụng băng thơng
thấp trong mơi trường có độ trễ cao nên nó là một giao thức lý tưởng cho các ứng dụng

IoT.

Hình 3.11: Vị trí của MQTT trong hệ thống IoT8
3.4.4 - Tính năng và đặc điểm nổi bật
-

Dạng truyền thơng điệp theo mơ hình Pub/Sub cung cấp việc truyền tin phân tán
một chiều, tách biệt với phần ứng dụng.

-

Việc truyền thông điệp là ngay lập tức, không quan tâm đến nội dung được truyền.

-

Sử dụng TCP/IP là giao thức nền.

-

Tồn tại ba mức độ tin cậy cho việc truyền dữ liệu (QoS: Quality of service)
+ QoS 0: Broker/Client sẽ gửi dữ liệu đúng một lần, quá trình gửi được xác
nhận bởi chỉ giao thức TCP/IP.
+ QoS 1: Broker/Client sẽ gửi dữ liệu với ít nhất một lần xác nhận từ đầu kia,
nghĩa là có thể có nhiều hơn 1 lần xác nhận đã nhận được dữ liệu.
+ QoS 2: Broker/Client đảm bảo khi gửi dữ liệu thì phía nhận chỉ nhận được
đúng một lần, q trình này phải trải qua 4 bước bắt tay.

8

a/p/mqtt-la-gi-vai-tro-cua-mqtt-trong-iot-V3m5WL3bKO7

14


-

Phần bao bọc dữ liệu truyền nhỏ và được giảm đến mức tối thiểu để giảm tải cho
đường truyền.

3.4.5 - Ưu điểm của MQTT
Với những tính năng, đặc điểm nổi bật trên, MQTT mang lại nhiều lợi ích nhất là trong hệ
thống SCADA (Supervisory Control And Data Acquisition) khi truy cập dữ liệu IoT.
-

Truyền thông tin hiệu quả hơn.

-

Tăng khả năng mở rộng.

-

Giảm đáng kể tiêu thụ băng thông mạng.

-

Rất phù hợp cho điều khiển và do thám.

-

Tối đa hóa băng thơng có sẵn.

-

Chi phí thấp.

-

Rất an tồn, bảo mật.

-

Được sử dụng trong các công ty lớn như Amazon, Facebook, ....

-

Tiết kiệm thời gian phát triển.

-

Giao thức publish/subscribe thu thập nhiều dữ liệu hơn và tốn ít băng thơng hơn so
với giao thức cũ.

3.4.6 - Cơ chế hoạt động
3.4.6.1 - Mơ hình Pub/Sub
-

Client

+ Publisher - Nơi gửi thơng điệp

+ Subscriber - Nơi nhận thông điệp
-

Broker - Máy chủ môi giới
+ Trong đó Broker được coi như trung tâm, nó là điểm giao của tất cả các kết nối
đến từ Client (Publisher/Subscriber). Nhiệm vụ chính của Broker là nhận thơng
điệp (message) từ Publisher, xếp vào hàng đợi rồi chuyển đến một địa điểm cụ
thể. Nhiệm vụ phụ của Broker là nó có thể đảm nhận thêm một vài tính năng
liên quan tới q trình truyền thơng như: bảo mật message, lưu trữ message,
logs,...
+ Client thì được chia thành hai nhóm là Publisher và Subscriber. Client làm ít
nhất một trong 2 việc là publish các thông điệp (message) lên một/nhiều topic
cụ thể hoặc subscribe một/nhiều topic nào đó để nhận message từ topic này.

15


+ MQTT Clients tương thích với hầu hết các nền tảng hệ điều hành hiện có: MAC
OS, Windows, Linux, Android, iOS, ....

Hình 3.12: Mơ hình publish và subcribe qua broker trong MQTT9
3.4.6.2 - Cơ chế hoạt động của MQTT theo mơ hình Pub/Sub
MQTT hoạt động theo cơ chế client/server, nơi mà mỗi cảm biến là một khách hàng (client)
và kết nối đến một máy chủ, có thể hiểu như một Máy chủ môi giới (broker), thông qua
giao thức TCP (Transmission Control Protocol). Broker chịu trách nhiệm điều phối tất cả
các thơng điệp giữa phía gửi đến đúng phía nhận.
MQTT là giao thức định hướng bản tin. Mỗi bản tin là một đoạn rời rạc của tín hiệu và
broker khơng thể nhìn thấy. Mỗi bản tin được publish một địa chỉ, có thể hiểu như một
kênh (Topic). Client đăng kí vào một vài kênh để nhận/gửi dữ liệu, gọi là subscribe. Client
có thể subscribe vào nhiều kênh. Mỗi client sẽ nhận được dữ liệu khi bất kỳ trạm nào khác

gửi dữ liệu vào kênh đã đăng ký. Khi một client gửi một bản tin đến một kênh nào đó gọi
là publish.
3.4.7 - Áp dụng vào đề tài
Với ưu điểm gọn nhẹ, tốn ít băng thơng, chi phí thấp và tốn ít thời gian phát triển,
nhóm quyết định sử dụng cơng nghệ MQTT để truyền tải thông giữa 3 thành phần trong
hệ thống: web app đặt món dành cho khách hàng (subscriber), server (publisher/subscriber)
và mobile app xử lý đơn hàng (subscriber).
3.5 JWT
3.5.1. JWT là gì?
-

JSON Web Token (JWT) là 1 tiêu chuẩn mở (RFC 7519) định nghĩa cách thức
truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON. Thông tin này có thể
được xác thực và đánh dấu tin cậy nhờ vào "chữ ký" của nó. Phần chữ ký của JWT

9

16


sẽ được mã hóa lại bằng HMAC hoặc RSA. Trong đó chuỗi Token phải có 3 phần
là header , phần payload và phần signature được ngăn bằng dấu “.”
Hình 3.13: Cấu trúc JWT10
-

Phần header sẽ chứa kiểu dữ liệu, và thuật tốn sử dụng để mã hóa ra chuỗi JWT.
{

"typ": "JWT",
"alg": "HS256"

-

}
Phần payload sẽ chứa các thơng tin mình muốn đặt trong chuỗi Token như id,
username, exp (expired time) … ví dụ:
{
"id": "xx",
"username": "admin"

-

}
Phần Signature sẽ được tạo ra bằng cách mã hóa phần header, payload kèm theo
một chuỗi secret (khóa bí mật), bằng một thuật tốn mã hóa nào đó, ví dụ:
data = base64urlEncode( header ) + "." + base64urlEncode( payload )
signature = Hash( data, secret );

-

Kết hợp 3 chuỗi trên lại ta sẽ có được một chuỗi JWT hoàn chỉnh.

3.5.2. Khi nào nên dùng JSON Web Token?
-

Authentication: Đây là trường hợp phổ biến nhất thường sử dụng JWT. Khi người
dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phía người dùng sẽ
chứa thêm mã JWT. Điều này cho phép người dùng được cấp quyền truy cập vào
các url, service, và resource mà mã Token đó cho phép. Phương pháp này khơng bị
ảnh hưởng bởi Cross-Origin Resource Sharing (CORS) do nó khơng sử dụng
cookie.

10

/>
17


-

Trao đổi thông tin: JSON Web Token là 1 cách thức khá hay để truyền thơng tin an
tồn giữa các thành viên với nhau, nhờ vào phần signature của nó. Phía người nhận
có thể biết được người gửi là ai thông qua phần signature. Và chữ ký được tạo ra
bằng việc kết hợp cả phần header, payload lại nên thông qua đó ta có thể xác nhận
được chữ ký có bị giả mạo hay không.

3.5.3. Áp dụng vào đề tài
Với những đặc điểm của JWT, nhóm quyết định sử dụng vào đề tài nhằm mục đích
Authentication:
-

Xác thực các request từ client (ứng dụng mobile, web client) đến server

-

Định danh đối tượng gửi request để trả về dữ liệu phù hợp.

-

Bảo mật thông tin, tránh việc giả mạo dữ liệu.

-

Server không cần lưu trữ data session để xác thực client.

18


Chương 4. PHÁT BIỂU BÀI TOÁN
4.1. Giới thiệu về ứng dụng
Như đã trình bày ở mục Đặt vấn đề, ứng dụng mà nhóm thực hiện sẽ giải quyết những
vấn đề bất cập của hình thức mua bán truyền thống ở các cửa tiệm ăn uống. Các đặc điểm
của ứng dụng bao gồm:
●

Là một web app SPA (Single Page Application) xây dựng bằng React có hiệu
năng cao. Ưu điểm của web app so với mobile app là khơng địi hỏi phải cài đặt
trên thiết bị, chỉ cần có trình duyệt web, hoạt động tốt trên các trình duyệt hiện
đại. Mặt khác, hiệu năng và trải nghiệm người dùng trên web app hiện nay (viết
bằng React, Vue.js, ...) đã rất tốt, hầu như khơng thua gì native mobile app.

●

Cung cấp thực đơn món ăn trực quan, dễ duyệt và chọn món.

●

Giỏ hàng có thể được chia sẻ giữa nhiều thiết bị khác nhau (tính năng giỏ hàng và
đặt hàng theo nhóm).

●

Đặt (order) món và giao tại quầy, thanh tốn khi nhận hàng tại quầy.

●

Theo dõi đơn hàng thời gian thực, khi đơn hàng được cập nhật thay đổi trạng thái
từ phía cửa hàng thì khách hàng sẽ nhìn thấy những cập nhật đó ngay lập tức (ví
dụ: huỷ đơn hàng, xác nhận đơn hàng).

●

Khách hàng có thể hủy đơn hàng khi cửa tiệm chưa xác nhận đơn.

●

Khách hàng có thể dễ dàng xem lịch sử mua hàng và mọi chi tiết về đơn hàng của
mình.

4.3. Yêu cầu hệ thống
4.3.1. Yêu cầu chức năng
-

Yêu cầu lưu trữ: Hệ thống đáp ứng yêu cầu lưu trữ các thông tin như:
+ Thông tin sản phẩm: tên, giá, hình ảnh, ...
+ Thơng tin cửa hàng: tên, địa chỉ, vị trí, ...
+ Thơng tin khách hàng: tên, địa chỉ, số điện thoại, ...
+ Thông tin đơn hàng: khách hàng, cửa hàng, phương thức thanh toán, ...

-

Yêu cầu tìm kiếm:
+ Tìm kiếm các món ăn trong thực đơn.
+ Tìm kiếm các đơn hàng.

-

Yêu cầu báo cáo thống kê:
+ Lịch sử đơn hàng.
+ Doanh thu của cửa hàng.
19