Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng công nghệ mern stack và google maps api

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THƠNG TIN

PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG
HĨA SẢN PHẨM SỬ DỤNG CÔNG NGHỆ
MERN STACKVÀ GOOGLE MAPS API

GVHD: LÊ VĂN VINH
SVTH: PHẠM THẾ HỮU
MSSV:15110225
SVTH: NGUYỄN CẢNH TOÀN
MSSV: 15110335

SKL 0 0 6 7 5 1

Tp. Hồ Chí Minh, 2019


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM
~~~o0o~~~

PHẠM THẾ HỮU - 15110225
NGUYỄN CẢNH TỒN – 15110335

Đề Tài:

PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG HĨA
SẢN PHẨM SỬ DỤNG CƠNG NGHỆ MERN STACK

VÀ GOOGLE MAPS API
KHÓA LUẬN TỐT NGHIỆP
GIÁO VIÊN HƯỚNG DẪN
TS. LÊ VĂN VINH

KHÓA 2015-2019


ĐH SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CNTT
*****

XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập - Tự do - Hạnh phúc
*****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ tên sinh viên 1: PHẠM THẾ HỮU

MSSV:

15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN

MSSV:

15110335

Chuyên ngành:

SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài:

Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng
cơng nghệ MERN STACK và GOOGLE MAPS API

Họ tên GVHD:

TS. LÊ VĂN VINH

NHẬN XÉT:
1. Về nội dung đề tài và khối lượng công việc thực hiện:

2. Ưu điểm

3. Khuyết điểm

4. Đề nghị cho bảo vệ hay không?

…………………….

5. Đánh giá xếp loại:

…………………….

6. Điểm:

…………………….
TP. Hồ Chí Minh, ngày …… tháng …… năm 2019
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)


ĐH SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CNTT
*****

XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập - Tự do - Hạnh phúc
*****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ tên sinh viên 1: PHẠM THẾ HỮU

MSSV:

15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN

MSSV:

15110335

Chuyên ngành:

SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài:

Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng
cơng nghệ MERN STACK và GOOGLE MAPS API

Họ tên GVPB:

TS. LÊ VĨNH THỊNH

NHẬN XÉT:
1. Về nội dung đề tài và khối lượng công việc thực hiện:

2. Ưu điểm

3. Khuyết điểm

4. Đề nghị cho bảo vệ hay không?

…………………….

5. Đánh giá xếp loại:

…………………….

6. Điểm:

…………………….
TP. Hồ Chí Minh, ngày …… tháng …… năm 2019
Giáo viên phản biện
(Ký & ghi rõ họ tên)


LỜI CẢM ƠN

Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔN
CÔNG NGHỆ PHẦN MỀM, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
đã tạo điều kiện thuận lợi cho chúng em thực hiện đề tài này.
Chúng em cũng xin được gửi lời cảm ơn chân thành nhất đến thầy TS. LÊ VĂN
VINH, người đã tận tình chỉ bảo và hướng dẫn nhóm em thực hiện đề tài.
Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trường
Đại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung cũng như các thầy cơ giảng viên khoa
Cơng Nghệ Thơng Tin nói riêng, những người đã giảng dạy, tạo điều kiện cho em tích
lũy được những kiến thức quý báu trong những năm học qua.
Chúng em đã nỗ lực rất nhiều để hoàn thành tốt nhất nhiệm vụ đề tài, nhưng do
khả năng còn hạn chế nên chắc chắn sẽ không tránh khỏi thiếu sót. Chúng em mong
nhận được sự tận tình chỉ bảo của các thầy cô để ngày càng tiến bộ.

TP. Hồ Chí Minh, ngày …… tháng …… năm 2019
Nhóm sinh viên thực hiện:

PHẠM THẾ HỮU

- 15110225

NGUYỄN CẢNH TOÀN - 15110225

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT

Độc lập - Tự do - Hạnh phúc

*****

*****

ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP
Họ tên sinh viên 1: PHẠM THẾ HỮU

MSSV:

15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN

MSSV:

15110335

Chuyên ngành:

SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài:

Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng
cơng nghệ MERN STACK và GOOGLE MAPS API

Họ tên GVHD:

TS. LÊ VĂN VINH

Thởi gian thực hiện: từ 01/09/2019 – 31/12/2019

NHIỆM VỤ CỦA KHĨA LUẬN:
 Tìm hiểu MERN STACK và GOOGLE MAPS API phát triển website Tìm kiếm
cửa hàng hóa sản phẩm.
 Khảo sát hiện trạng, đánh giá các website tìm kiếm cửa hàng xung quanh hiện
có.
 Phân tích nghiệp vụ của một website tìm kiếm cửa hàng hiện có.
 Mơ hình hóa nghiệp vụ, xây dựng cơ sở dữ liệu.
 Cài đặt các chức năng, kiểm thử toàn bộ hệ thống.

ĐỀ CƯƠNG VIẾT KHĨA LUẬN:
1. PHẦN 1: PHẦN MỞ ĐẦU
1.1. Tính cấp thiết đề tài
1.2. Mục tiêu của đề tài
1.3. Cách tiếp cận và phương pháp nghiên cứu
1.3.1. Đối tượng nghiên cứu
1.3.2. Phạm vi nghiên cứu
1.4. Kết quả dự kiến đạt được

2. PHẦN 2: PHẦN NỘI DUNG
2.1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
2.1.1. Tìm hiểu MERN STACK
2.1.1.1.

Tìm hiểu Javascript

2.1.1.2.

Tìm hiểu Nodejs

2.1.1.3.

Tìm hiểu Express Framework của nodejs

2.1.1.4.

Tìm hiểu Mongodb

2.1.1.5.

Tìm hiểu Reactjs

2.1.2. Ứng dụng MERN Stack trong phát triển website
2.1.2.1.

Giới thiệu công nghệ Stack

2.1.2.2.

Giới thiệu MERN Stack

2.1.2.3.

Nhưng điểm nổi bật trong MERN Stack

2.1.3. Tìm hiểu Google Maps Api
2.1.3.1.

Giới thiệu Google Maps Api

2.1.3.2.

Một số ứng dụng của Google Maps Api

2.1.4. Tìm hiểu mơ hình MVC trong xây dựng website
2.1.4.1.

Tìm hiểu mơ hình MVC

2.1.4.2.

Chi tiết từng lớp mơ hình MVC

2.1.4.3.

Ưu - nhược điểm mơ hình MVC

2.2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
2.2.1. Khảo sát hiện trạng

2.2.2. Xác định yêu cầu
2.2.2.1.

Yêu cầu chức năng

2.2.2.2.

u cầu phi chức năng

2.2.3. Mơ hình hóa yêu cầu
2.2.3.1.

Lược đồ use case

2.2.3.2.

Đặc tả use case

2.3. CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
2.3.1. Thiết kế hệ thống
2.3.1.1.

Lược đồ lớp

2.3.1.2.

Lược đồ tuần tự

2.3.2. Thiết kế cơ sở dữ liệu

2.3.2.1.

Cấu trúc dữ liệu

2.3.2.2.

Các ràng buộc toàn vẹn

2.3.2.3.

Lược đồ thực thể liên kết

2.3.2.4.

Mô tả chi tiết các bảng dữ liệu

2.3.3. Thiết kế giao diện
2.4. Chương 4: cài đặt và kiểm thử
2.4.1. Cài đặt
2.4.1.1.

Thiết lập môi trường

2.4.1.2.

Xây dựng cấu trúc project

2.4.2. Kiểm thử
3. PHẦN 3: PHẦN KẾT LUẬN

3.1. Kết quả đạt được
3.2. Ưu điểm
3.3. Nhược điểm
3.4. Hướng phát triển trong tương lai
4. TÀI LIỆU THAM KHẢO

KẾ HOẠCH THỰC HIỆN:
STT THỜI GIAN

CÔNG VIỆC

GHI CHÚ
1. Đã hoàn tất đăng ký với
GVHD.
2. Được thầy hướng dẫn định

1. Đăng ký đề tài
1

02/09 - 08/09 2. Khảo sát hiện trạng và xác
định yêu cầu

hướng về các chức năng cần
phát triển, các lựa chọn về
mặt công nghệ để hiện thực.
3. Đã kháo sát 3 trang web về
tìm kiếm sản phẩm.
4. Đã xác định các yêu cầu cơ
bản của một website tìm

kiếm cửa hàng hóa sản
phẩm.
1. Hồn
1. Xây dựng Use case Diagram
2

09/09 – 15/09

2. Xây

dựng

Sequence

thành

Use

case

Diagram ban đầu.
2. Hoàn

thành

Sequence

Diagram ban đầu.

Diagram
3. Thiết kế cơ sở dữ liệu

3. Hoàn thành thiết kế cơ sở dữ
liệu ban đầu.

1. Chỉnh sửa hoàn thiện Use 1. Đã hoàn thiện Use case
case Diagram

Diagram.

2. Viết đặc tả Use case
3

16/09 – 29/09 3. Chỉnh

sửa

hoàn

2. Đã hoàn thiện đặc tả Usecase
thiện

Sequence Diagram
4. Chỉnh sửa hoàn thiện Cơ sở
dữ liệu

Diagram.
3. Đã hoàn thiện Sequence
Diagram.

4. Đã hoàn thiện cơ sở dữ liệu.
1. Đã hoàn thành thiết kế giao

4

30/09 – 13/10

1. Thiết kế giao diện
2. Thiết kế lược đồ lớp

diện
2. Đã hoàn thành thiết kế lược
đồ lớp.

5

14/10 – 27/10

6

28/10 – 10/11

7

11/11 – 24/11

8

25/11 – 08/12

1. Xây dựng các chức năng 1. Đã hoàn thành các chức
người dùng GUEST

năng người dùng GUEST.

1. Xây dựng các chức năng 1. Đã hoàn thành các chức
người dùng USER

năng người dùng USER.

1. Xây dựng các chức năng 1. Đã hoàn thành các chức
người dùng ADMIN

1. Hoàn thành các chức năng
trong Use case Diagram

năng người dùng ADMIN.
1. Đã hoàn thành các chức
năng

trong

Diagram.

Use

case


9

09/12 – 22/12

1. Viết báo cáo, làm slide
thuyết trình

1. Đã hồn thành báo cáo và
slide thuyết trình

TP. Hồ Chí Minh, ngày …… tháng …… năm 2019
Ý kiến của GVHD

Người viết đề cương

(Ký và ghi rõ họ tên)

(Ký và ghi rõ họ tên)


MỤC LỤC

PHẦN 1: PHẦN MỞ ĐẦU .......................................................................................... 1
1.

TÍNH CẤP THIẾT ĐỀ TÀI ............................................................................. 1

2.

MỤC TIÊU CỦA ĐỀ TÀI ............................................................................... 2

3.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU ................................ 2
3.1.

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

3.2.

Phạm vi nghiên cứu .................................................................................. 2

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC .................................................................. 3

4.

PHẦN 2: PHẦN NỘI DUNG ...................................................................................... 4
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ......................................................................... 4
1.

2.

3.

4.

TÌM HIỂU MERN STACK .......................................................................... 4
1.1.

Tìm hiểu Javascript ............................................................................... 4

1.2.

Tìm hiểu NodeJS .................................................................................. 5

1.3.

Tìm hiểu Express Framework của NodeJS. ........................................... 9

1.4.

Tìm hiểu MongoDB ............................................................................ 10

1.5.

Tìm hiểu ReactJS ................................................................................ 13

ỨNG DỤNG MERN STACK TRONG PHÁT TRIỂN WEBSITE ............. 14
2.1.

Khái niệm về công nghệ Stack ............................................................ 14

2.2.

Khái niệm MERN Stack ..................................................................... 14

2.3.

Những điểm nổi bật trong MERN Stack ............................................. 15

TÌM HIỂU GOOGLE MAPS API .............................................................. 15

3.1.

Giới thiệu Google Maps API............................................................... 15

3.2.

Một số ứng dụng của Google Maps API ............................................. 15

TÌM HIỂU MƠ HÌNH MVC TRONG XÂY DỰNG WEBSITE ................ 16
4.1.

Tìm hiểu mơ hình MVC ...................................................................... 16


4.2.

Chi tiết từng lớp mơ hình MVC .......................................................... 17

4.3.

Ưu - Nhược điểm mơ hình MVC. ....................................................... 18

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU ................ 19
1.

2.

3.

KHẢO SÁT HIỆN TRẠNG ....................................................................... 19

1.1.

Google Maps ( ................................... 19

1.2.

Shopee: () ................................................................. 20

1.3.

Tiki () ............................................................................. 21

XÁC ĐỊNH YÊU CẦU .............................................................................. 23
2.1.

Yêu cầu chức năng.............................................................................. 23

2.2.

u cầu phi chức năng ........................................................................ 24

MƠ HÌNH HÓA YÊU CẦU ...................................................................... 25
3.1.

Lược đồ use case................................................................................. 25

3.2.

Đặc tả use case.................................................................................... 27

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM .................................................................. 45
1.

2.

3.

THIẾT KẾ HỆ THỐNG ............................................................................. 45
1.1.

Lược đồ lớp ........................................................................................ 45

1.2.

Lược đồ tuần tự .................................................................................. 47

THIẾT KẾ CƠ SỞ DỮ LIỆU ..................................................................... 56
2.1.

Cấu trúc dữ liệu .................................................................................. 56

2.2.

Các ràng buộc toàn vẹn ....................................................................... 60

2.3.

Lược đồ thực thể quan hệ .................................................................... 64

2.4.

Mô tả chi tiết các bảng dữ liệu ............................................................ 64

THIẾT KẾ GIAO DIỆN ............................................................................. 73

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ ............................................................... 89
1.

CÀI ĐẶT ................................................................................................... 89
1.1.

Thiết lập môi trường ........................................................................... 89


1.2.
2.

Xây dựng cấu trúc project ................................................................... 89

KIỂM THỬ ................................................................................................ 91

PHẦN 3: PHẦN KẾT LUẬN .................................................................................... 97
1.

KẾT QUẢ ĐẠT ĐƯỢC ................................................................................. 97

2.

ƯU ĐIỂM ...................................................................................................... 97

3.

NHƯỢC ĐIỂM .............................................................................................. 98

4.

HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI ............................................. 98

TÀI LIỆU THAM KHẢO.......................................................................................... 99


DANH MỤC HÌNH ẢNH
Hình 1-Mơ hình MVC ............................................................................................... 16
Hình 2-Mơ hình hoạt động của DAO, BO và JAVA BEAN ........................................ 17
Hình 3-Trang tìm kiếm google.com/maps.................................................................. 19
Hình 4-Trang tìm kiếm shopee.vn ............................................................................. 20
Hình 5-Trang tìm kiếm tiki.vn ................................................................................... 22
Hình 6-Lược đồ use case phía người dùng cuối ........................................................ 25
Hình 7-Lược đồ use case phía người quản trị ........................................................... 26
Hình 8-Lược đồ lớp – Model Layer ........................................................................... 45
Hình 9-Lược đồ lớp – MVC pattern .......................................................................... 46
Hình 10-Lược đồ tuân tự View home page ................................................................ 47
Hình 11-Lược đồ tuần tự Search product .................................................................. 47
Hình 12-Lược đồ tuần tự View product detail ........................................................... 48
Hình 13-Lược đồ tuân tự View store detail ............................................................... 48
Hình 14-Lược đồ tuân tự Register ............................................................................. 49
Hình 15-Lược đồ tuân tự Login................................................................................. 49
Hình 16-Lược đồ tuân tự Forget password ............................................................... 50
Hình 17-Lược đồ tuân tự Update info ....................................................................... 50
Hình 18-Lược đồ tuần tự Change password .............................................................. 51

Hình 19-Lược đồ tuần tự Change email .................................................................... 51
Hình 20-Lược đồ tuần tự Change phone ................................................................... 52
Hình 21-Lược đồ tuần tự Add store........................................................................... 52
Hình 22-Lược đồ tuần tự Update store ..................................................................... 53
Hình 23-Lược đồ tuần tự Delete store ....................................................................... 53
Hình 24-Lược đồ tuần tự Rate product ..................................................................... 54
Hình 25-Lược đồ tuần tự Comment/ Reply comment ................................................. 54
Hình 26-Lược đồ tuần tự Logout............................................................................... 55
Hình 27-Lược đồ thực thể quan hệ ............................................................................ 64
Hình 28-Hình ảnh giao diện trang chủ...................................................................... 73
Hình 29-Hình ảnh trang chi tiết sản phẩm ................................................................ 75
Hình 30-Hình ảnh trang giao diện đăng nhập........................................................... 77


Hình 31-Hình ảnh trang giao diện đăng ký ............................................................... 78
Hình 32-Hình ảnh trang giao diện trang chủ (admin, user) ...................................... 79
Hình 33-Hình ảnh trang giao diện thơng tin cá nhân ................................................ 80
Hình 34-Hình ảnh trang giao diện quản lý cửa hàng ................................................ 82
Hình 35-Hình ảnh trang giao diện quản lý sản phẩm ................................................ 84
Hình 36-Hình ảnh trang giao diện mua gói cửa hàng ............................................... 85
Hình 37-Hình ảnh trang giao diện đổi email............................................................. 86
Hình 38-Hình ảnh trang giao diện đổi số điện thoại ................................................. 87
Hình 39-Hình ảnh trang giao diện đổi mật khẩu ....................................................... 88


DANH MỤC BẢNG BIỂU
Bảng 1-Bảng so sánh giữa RDBMS và MongoDB ...................................................... 11
Bảng 2-Bảng đặc tả use case view home page ........................................................... 27
Bảng 3-Bảng đặc tả use case register ........................................................................ 29
Bảng 4-Bảng đặc tả use case search product ............................................................. 30

Bảng 5-Bảng đặc tả use case view hostel detail ......................................................... 30
Bảng 6-Bảng đặc tả use case view store detail ........................................................... 31
Bảng 7-Bảng đặc tả use case login ............................................................................ 31
Bảng 8-Bảng đặc tả use case login with Facebook .................................................... 32
Bảng 9-Bảng đặc tả use case login with Google ........................................................ 33
Bảng 10-Bảng đặc tả use case restore Password ....................................................... 35
Bảng 11-Bảng đặc tả use case update user info ......................................................... 35
Bảng 12-Bảng đặc tả use case update user info ......................................................... 36
Bảng 13-Bảng đặc tả use case change password ....................................................... 37
Bảng 14-Bảng đặc tả use case Receive notify for product .......................................... 37
Bảng 15-Bảng đặc tả use case Cancel notify.............................................................. 38
Bảng 16-Bảng đặc tả use case add store .................................................................... 39
Bảng 17-Bảng đặc tả use case update store info ........................................................ 40
Bảng 18-Bảng đặc tả use case delete store ................................................................ 40
Bảng 19-Bảng đặc tả use case rate product ............................................................... 41
Bảng 20-Bảng đặc tả use case Comment.................................................................... 41
Bảng 21-Bảng đặc tả use case logout ........................................................................ 42
Bảng 22-Bảng đặc tả use case Statistic (Store owner)................................................ 42
Bảng 23-Bảng đặc tả use case Statistic (Admin) ........................................................ 43
Bảng 25-Bảng đặc tả use case add employee ............................................................. 44
Bảng 28-Mô tả chi tiết bảng dữ liệu Authorization..................................................... 64
Bảng 29-Mô tả chi tiết bảng dữ liệu User .................................................................. 66
Bảng 30-Mô tả chi tiết bảng dữ liệu City ................................................................... 66
Bảng 31-Mô tả chi tiết bảng dữ liệu District .............................................................. 66
Bảng 32-Mô tả chi tiết bảng dữ liệu Street ................................................................. 67
Bảng 33-Mô tả chi tiết bảng dữ liệu StoreCategory ................................................... 67


Bảng 34-Mô tả chi tiết bảng dữ liệu ProductCategory ............................................... 67
Bảng 35-Mô tả chi tiết bảng dữ liệu Product ............................................................. 68

Bảng 36-Mô tả chi tiết bảng dữ liệu Store.................................................................. 71
Bảng 37-Mô tả chi tiết bảng dữ liệu Conversation ..................................................... 71
Bảng 38-Mô tả chi tiết bảng dữ liệu Comment ........................................................... 72
Bảng 39-Mô tả chi tiết bảng dữ liệu Employee........................................................... 72
Bảng 40-Bảng mô tả chi tiết các đối tượng trên giao diện trang chủ.......................... 74
Bảng 41-Bảng mô tả chi tiết các đối tượng trên giao diện trang chi tiết sản phẩm..... 77
Bảng 42-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng nhập ............... 77
Bảng 43-Bảng mô tả chi tiết các đối tượng trên giao trang diện đăng ký ................... 78
Bảng 44-Bảng mô tả chi tiết các đối tượng trên giao diện trang chủ (admin, user) .... 80
Bảng 45-Bảng mô tả chi tiết các đối tượng trên giao diện trang thông tin cá nhân .... 81
Bảng 46-Bảng mô tả chi tiết các đối tượng trên giao diện trang quản lý cửa hàng .... 83
Bảng 47-Bảng mô tả chi tiết các đối tượng trên giao diện trang quản lý sản phẩm .... 85
Bảng 48-Bảng mô tả chi tiết các đối tượng trên giao diện trang mua gói cửa hang ... 86
Bảng 49-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi email................. 86
Bảng 50-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi số điện thoại ..... 87
Bảng 51-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi mật khẩu ........... 88


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN

PHẦN 1: PHẦN MỞ ĐẦU
1. TÍNH CẤP THIẾT ĐỀ TÀI
 Hiện nay, tại thị trường Việt Nam, có rất nhiều các cửa hàng, tạp hóa nhỏ lẻ
với mơ hình kinh doanh chủ yếu là offline. Với mơ hình kinh doanh này, sẽ
mang lại rất nhiều trải nghiệm chưa tốt cho cả người mua và người bán như
người bán có sản phẩm nhưng người mua có thể khơng biết, hoặc người mua
cần mua gấp sản phẩm nào đó nhưng cửa hàng lại khơng còn đủ số lượng cung
cấp.
 Thấy được sự bất cập của mơ hình này và các yếu điểm của các cửa hàng khi
kinh doanh offline, một website tìm kiếm cửa hàng đang có sẵn sản phẩm là

một điều rất cần thiết. Và hiện nay, đã có nhiều trang thương mại điện tử xuất
hiện như Tiki, Shopee, Lazada, Chợ Tốt hoặc các cửa hàng có thể bán thơng
qua các kênh mạng xã hội như Facebook, Zalo, … Tuy nhiên, đối với các mơ
hình này, người mua hàng khó tìm được sản phẩm ở gần mình và các cửa hàng
cũng phải chi một khoảng chi phí khá cao để marketing hoặc trả tiền cho phí
giao dịch.
 Từ đó, nhóm chúng em quyết định thực hiện đề tài này để nghiên cứu và tạo
ra một trang web tìm kiếm sản phẩm trực tuyến để các cửa hàng, tạp hóa nhỏ
lẻ có thể đăng và quản lý các sản phẩm của mình ngay trên hệ thống của
website và lan tỏa thương hiệu. Đồng thời, cửa hàng có thể liên kết với chính
website của mình (nếu có). Đối với khách hàng, họ có thể tìm kiếm nhanh
chóng những sản phẩm đang cần gấp thuộc những cửa hàng ở gần mình một
cách nhanh chóng, và hiển thị vị trí của những cửa hàng trên bản đồ, khác
hàng có thể định vị vị trí hiện tại của mình hoặc có thể chọn ở một vị trí bất
kỳ để thực hiện thao tác tìm kiếm sản phẩm trong khu vực. Dựa vào kết quả
tìm kiếm được, khách hàng có thể liên hệ trực tiếp đến chủ cửa hàng để tìm
hiểu thêm về sản phẩm mà mình đang tìm kiếm.
 Cuối cùng, trang web cịn có một hệ thống quản lý chun nghiệp nhằm kiểm
sốt thơng tin trong tồn bộ quá trình tìm kiếm và truy cập để xem sản phẩm
hoặc cửa hàng. Bên cạnh đó, hệ thống cũng quản lý chặc chẽ những hành vi
1


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
như tạo những tài khoản ảo hoặc tạo quá nhiều cửa hàng, sẽ tránh được nhiều
thông tin rác, không thiết thực.

2. MỤC TIÊU CỦA ĐỀ TÀI
 Tìm hiểu cơng nghệ MERN Stack và Google Maps API.
 Xây dựng website tìm kiếm cửa hàng từ sản phẩm có các chức năng cơ bản:

o Đăng ký/Đăng nhập/Đăng xuất.
o Đăng nhập nhanh bằng Google/Facebook.
o Quản lý tài khoản (Xem/Cập nhật thông tin, đổi mật khẩu, lấy lại mật
khẩu).
o Tìm kiếm cửa hàng có sẵn sản phẩm. Nhận thơng báo khi khơng tìm
thấy sản phẩm.
o Định vị và chọn vị trí khu vực muốn tìm kiếm sản phẩm.
o Xem chi tiết sản phẩm.
o Xem thông tin cửa hàng.
o Đánh giá sản phẩm.
o Tạo cửa hàng, Thêm sản phẩm vào cừa hàng.
o Cập nhật sản phẩm.
o Quản lý cửa hàng.
o Thống kê.
3. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
3.1. Đối tượng nghiên cứu
 Công nghệ MERN Stack.
 Google Maps API.
 Thư viện React-bootstrap.
 Lĩnh vực mà website phát triển: Tìm kiếm cửa hàng hóa sản phẩm.
3.2. Phạm vi nghiên cứu
 Phạm vi nghiên cứu của đề này hướng đến:
o Cơng cụ tìm kiếm.
2


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
o Các tính năng của Google Maps.
4. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
 Nghiên cứu được các thành phần chính của cơng nghệ MERN Stack như:

MongoDB, ExpressJS framework, ReactJS library và NodeJS platform.
Ngồi ra, cịn nghiên cứu các chức năng cơ bản của Google Maps API như
định vị, tìm kiếm vị trí, chỉ đường, hiển thị marker đánh dấu vị trí cửa hàng.
 Sử dụng công nghệ MERN Stack kết hợp với Google Maps API để xây dựng
một ứng dụng web tìm kiếm cửa hàng hóa sản phẩm (các cửa hàng đang có
sẵn những sản phẩm) có các chức năng dành cho người dùng cuối như: đăng
ký, đăng nhập bằng email, đăng nhập bằng Google/Facebook, quản lý tài
khoản, tìm kiếm cửa hàng có sẵn sản phẩm, định vị và chọn vị trí khu vực
muốn tìm kiếm sản phẩm, xem chi tiết sản phẩm, xem thông tin cửa hàng,
đánh giá sản phẩm, tạo cửa hàng, thêm sản phẩm vào cừa hàng, cập nhật sản
phẩm, quản lý cửa hàng, nhắn tin giữa Admin và Chủ cửa hàng, thống kế.
 Phát triển các chức năng quản trị cho website như: quản lý người dùng, quản
lý cửa hàng, thống kê, báo cáo.

3


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN

PHẦN 2: PHẦN NỘI DUNG
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1. TÌM HIỂU MERN STACK
1.1. Tìm hiểu Javascript
1.1.1. Khái niệm Javascript
 JavaScript là một ngơn ngữ lập trình đa nền tảng (cross-platform), ngơn
ngữ lập trình kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ
và nhẹ (small and lightweight). Khi nằm bên trong một mơi trường (host
environment), JavaScript có thể kết nối tới các object của mơi trường đó
và cung cấp các cách quản lý chúng (object).
 JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như: Array,

Date, và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình như: tốn tử
(operators), cấu trúc điều khiển (control structures), và câu lệnh.
JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sung
thêm các object; Ví dụ:
o Client-side JavaScript - JavaScript phía máy khách, JavaScript được
mở rộng bằng cách cung cấp các object để quản lý trình duyệt và
Document Object Model (DOM) của nó. Ví dụ, phần mở rộng phía
máy khách cho phép một ứng dụng tác động tới các yếu tố trên một
trang HTML và phản hồi giống các tác động của người dùng như click
chuột, nhập form và chuyển trang.
o Server-side JavaScript - JavaScript phía Server, JavaScript được mở
rộng bằng cách cung cấp thêm các đối tượng cần thiết để chạy
JavaScript trên máy chủ. Ví dụ, phần mở rộng phía server này cho phép
ứng dụng kết nối với cơ sở dữ liệu (database), cung cấp thông tin một
cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực
hiện thao tác với các tập tin trên máy chủ.

4


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
1.1.2. Tiêu chuẩn ECMAScript.
 JavaScript được tiêu chuẩn hóa tại Ecma International — the European
association for standardizing information and communication systems,
Liên kết Châu Âu cho các tiêu chuẩn hóa hệ thống thơng tin và truyền
thông (ECMA trước đây là viết tắt cho the European Computer
Manufacturers Association) cung cấp một tiêu chuẩn hóa, nền tảng ngơn
ngữ lập trình mở quốc tế lên JavaScript. Phiên bản đã tiêu chuẩn hóa của
JavaScript được gọi là ECMAScript, làm việc giống với cái cách mà tất cả
ứng dụng đã được hỗ trợ theo tiêu chuẩn.

 Các công ty có thể sử dụng tiêu chuẩn ngơn ngữ mở (open standard
language) để phát triển các implementation của JavaScript riêng cho họ.
Tiêu chuẩn ECMAScript là tài liệu nằm trong tiêu chuẩn ECMA-262
(ECMA-262 specification). Xem New in JavaScript để biết thêm về sự
khác nhau giữa các phiên bản JavaScript cũng như sự khác nhau của phiên
bản tiêu chuẩn ECMAScript (ECMAScript specification editions).
 Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (International
Organization for Standardization) tại ISO-16262. Bạn cũng có thể tìm tiêu
chuẩn trên the Ecma International website. Tiêu chuẩn ECMAScript
khơng bao gồm các mô tả cho Document Object Model (DOM), nó được
tiêu chuẩn hóa bởi World Wide Web Consortium (W3C).
 DOM định nghĩa cách mà các đối tượng trong HTML tiếp xúc với các
đoạn script của bạn. Để có được một cảm nhận tốt hơn về các công nghệ
khác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bài
viết tổng quan về cơng nghệ JavaScript [1].
1.2. Tìm hiểu NodeJS
1.2.1. Khái niệm NodeJS.
 Node.js là một mã nguồn mở, một môi trường cho các máy chủ và ứng
dụng mạng. Node.js sử dụng Google V8 JavaScript engine để thực thi mã,
và một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript.

5


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
 Node.js chứa một thư viện built-in cho phép các ứng dụng hoạt động như
một Webserver mà không cần phần mềm như Nginx, Apache HTTP Server
hoặc IIS.
 Node.js cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking
I/O API, tối ưu hóa thơng lượng của ứng dụng và có khả năng mở rộng

cao. Mọi hàm trong Node.js là không đồng bộ (asynchronous). Do đó, các
tác vụ đều được xử lý và thực thi ở chế độ nền (background processing).
 Node.js áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng
nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất
có thể.
1.2.2. Những ứng dụng sử dụng NodeJS.
 Xây dựng websocket server (Chat server).
 Hệ thống Notification (Giống như facebook hayTwitter).
 Ứng dụng upload file trên client.
 Các máy chủ quảng cáo.
 Các ứng dụng dữ liệu thời gian thực khác.
1.2.3. Ưu và nhược điểm NodeJS.
 Ư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 giống PHP.
Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà
Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ
như PHP.
 JSON APIs 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 bạn định viết 1
ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm.
Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi
6


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
nhanh. Các ứng dụng bạn đị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 của bạn.
 Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức
là NodeJS 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, NodeJS 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, …
 Nhược điểm.
 Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài
nguyên CPU như encoding video, convert file, decoding encryption…
hoặc các ứng dụng tương tự như vậy thì khơng nên dùng NodeJS (Lý
do: NodeJS được viết bằng C++ & Javascript, nên phải thơng qua thêm
1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút). Trường hợp này bạn
hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tối đa!
 NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python .NET …thì
việc cuối cùng là phát triển các App Web. NodeJS mới sơ khai như các
ngơn ngữ lập trình khác. Vậy nên đừng hi vọng NodeJS sẽ hơn PHP,
Ruby, Python, … ở thời điểm này. Nhưng với NodeJS bạn có thể có 1
ứng dụng như mong đợi, điều đó là chắc chắn!
1.2.4. Những trường hợp nên sử dụng NodeJS
 Không nên dùng NodeJS khi:
-

Xây dựng các ứng dụng hao tốn tài nguyên: Bạn đừng mơ mộng đến

Node.js khi bạn đang muốn viết một chương trình convert video.

7


KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN
Node.js hay bị rơi vào trường hợp thắt cổ chai khi làm việc với những
file dung lượng lớn.
-

Một ứng dụng chỉ toàn CRUD: Node.js không nhanh hơn PHP khi bạn
làm các tác vụ mang nặng tính I/O như vậy. Ngồi ra, với sự ổn định
lâu dài của các webserver script khác, các tác vụ CRUD của nó đã được
tối ưu hóa. Cịn Node.js? Nó sẽ lịi ra những API cực kỳ ngớ ngẩn.

-

Khi bạn cần sự ổn định trong ứng dụng của bạn: Chỉ với 4 năm phát
triển của mình (2009-2013), version của Node.js đã là 0.10.15 (hiện tại
tới thời điểm này là v13.5.0). Mọi API đều có thể thay đổi – một cách
khơng tương thích ngược – hãy thật cẩn thận với những API mà bạn
đang dùng, và luôn đặt câu hỏi: “Khi nó thay đổi, nó sẽ ảnh hưởng gì
đến dự án của tôi?”.

-

Và quan trọng nhất: Bạn chưa hiểu hết về Node.js! Node.js cực kỳ nguy
hiểm trong trường hợp này, bạn sẽ rơi vào một thế giới đầy rẫy cạm
bẫy, khó khăn. Với phần lớn các API hoạt động theo phương thức nonblocking/async việc không hiểu rõ vấn đề sẽ làm cho việc xuất hiện
những error mà thậm chí bạn khơng biết nó xuất phát từ đâu? Và mệt

mỏi hơn nữa: Khi cộng đồng Node.js chưa đủ lớn mạnh, và sẽ ít có sự
support từ cộng đồng. Khi mà phần lớn cộng đồng cũng không khá hơn
bạn là bao.

 Nên dùng NodeJS khi:
-

Node.js thực sự tỏa sáng trong việc xây dựng RESTful API (json). Gần
như khơng có ngơn ngữ nào xử lý JSON dễ dàng hơn Javascript, chưa
kể các API server thường không phải thực hiện những xử lý nặng nề
nhưng lượng concurrent request thì rất cao. Mà Node.js thì xử lý nonblocking. Chẳng cịn gì thích hợp hơn Node.js trong trường hợp này!

-

Những ứng dụng đòi hỏi các giao thức kết nối khác chứ khơng phải chỉ
có http. Với việc hỗ trợ giao thức tcp, từ nó bạn có thể xây dựng bất kỳ
một giao thức custom nào đó một cách dễ dàng.

-

Những ứng dụng thời gian thực: Khỏi phải nói vì Node.js dường như
sinh ra để làm việc này!
8