Tải bản đầy đủ (.pdf) (110 trang)

Xây dựng website bán đồ cũ sử dụng công nghệ mean stack

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.77 MB, 110 trang )

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

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG
CÔNG NGHỆ MEAN STACK

GVHD: NGUYỄN THÀNH SƠN
SVTH: NGUYỄN ĐÌNH ĐẠT
MSSV: 16110304

SKL 0 0 7 1 5 2

Tp. Hồ Chí Minh, tháng 07/2020


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN HỆ THỐNG THÔNG TIN

NGUYỄN ĐÌNH ĐẠT - 16110304
ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ
SỬ DỤNG CƠNG NGHỆ MEAN STACK
KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN


TS. NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

1


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN HỆ THỐNG THÔNG TIN

NGUYỄN ĐÌNH ĐẠT - 16110304
ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN ĐỒ CŨ
SỬ DỤNG CƠNG NGHỆ MEAN STACK
KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020
2


PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên : Nguyễn Đình Đạt , MSSV: 16110304.
Ngành: Cơng nghệ Thông tin.
Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack
Họ và tên Giáo viên hướng dẫn: TS Nguyễn Thành Sơn.

NHẬN XÉT:
1.

Về nội dung đề tài & khối lượng 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á loại :
…………………………………………………………………………………………

6.

Điểm :

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

3


PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên : Nguyễn Đình Đạt, MSSV: 16110304.
Ngành: Cơng nghệ Thông tin.
Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack
Họ và tên Giáo viên phản biện:
NHẬN XÉT:
1. Về nội dung đề tà & khối lượng 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á loại:
……………………………………………………………………………………………
6. Điểm:
…………………………………………………………………………………………
Tp.
Hồ Chí Minh, ngày 05 tháng 07 năm 2020
Giáo viên phản biện

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

4


LỜI CẢM ƠN
Em xin chân thành cảm ơn Thầy Nguyễn Thành Sơn – giảng viên khoa Công nghệ
thông tin trường Đại học Sư Phạm Kỹ Thuật TP.HCM, đã nhiệt tình giúp đỡ em rất
nhiều trong việc định hướng thực hiện đề tài khóa luận tốt nghiệp, hướng dẫn thực
hiện, nêu ý kiến nhận xét, cung cấp tài liệu tham khảo trong quá trình thực hiện đề tài
“Xây dựng Website bán đồ cũ sử dụng cơng nghệ MEAN stack”.
Bên cạnh đó, 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.
Dù đã cố gắng hồn thành khóa luận tốt nghiệp đúng u cầu, nhưng do thời
gian hạn hẹp và 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. Em
mong sẽ nhận được sự thơng cảm và tận tình chỉ bảo của q thầy cơ.
TP. Hồ Chí Minh, ngày 05 tháng 07 năm 2020
Sinh viên thực hiện
Nguyễn Đình Đạt

5


ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

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


------------

------------

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT
Họ tên sinh viên thực hiện : Nguyễn Đình Đạt MSSV: 16110304
Thời gian làm khóa luận tốt nghiệp: Từ 01/03/2020

Đến 01/08/2020

Chuyên ngành: Hệ Thống Thông Tin
Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack
Giảng viên hướng dẫn: TS. Nguyễn Thành Sơn
Nhiệm vụ khóa luận:
* Tìm hiểu tổng quan thế nào là MEAN stack
* Tìm hiểu về MongoDB và AngularJS.
* Tìm hiểu về Express và NodeJS.
* Cấu hình mơi trường và kết nối được database.
* Tiến hành cài đặt website bán đồ cũ.
- Sử dụng passportjs làm chức năng đăng ký đăng nhập + sử dụng token để
lưu tiến trình đăng nhập.
- Làm chức năng Comment
- Làm chức năng đăng bài
- Làm chức năng tìm kiếm.
- Làm chức năng hồ sơ cá nhân và chỉnh sửa thông tin cá nhân.
- Làm chức năng upload hình ảnh vào cơ sở dữ liệu.
- Làm chức năng quản lý bài đăng,người dùng,comment
- Làm chức năng xác thực bài đăng,người dùng
- Làm chức năng gửi email

- Viết api
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)
6


KẾ HOẠCH THỰC HIỆNp
STT

Ngày bắt
đầu

Ngày kết
thúc

1

1/03/2020

26/03/2020

2

27/03/2018 02/04/2020

3

03/04/2020 09/04/2020

4


10/05/2020 16/05/2020

5

17/04/2020 23/04/2020

6

24/04/2020 30/04/2020

8

08/05/2020 14/05/2020

9

15/05/2020 21/05/2020

10
11
12
14
15
16

22/05/2020
29/05/2020
05/06/2020
19/06/2020

26/06/2020
03/07/2020

28/05/2020
04/05/2020
11/06/2020
25/06/2020
02/07/2020
09/07/2020

Kết quả
thực hiện

Cơng việc được giao
Tìm hiểu tổng quan khái
niệm về cơng nghệ MEAN
STACK
Tìm hiểu MongoDB
Cài đặt chương trình
(Nodejs, MongoDB,
Express, AngularJS, ...)
Khởi tạo ứng dụng với 2 mơi
trường: Back-End và FrontEnd
Thiết kế cơ sở dữ liệu
Xây dựng ứng dung BackEnd, viết api
Xây dựng ứng dung BackEnd, viết api
Hoàn thành bài đặc tả về
website bán đồ cũ
Xây dựng project Angular
Xây dựng project Angular

Xây dựng project Angular
Tiến hành thiết kế giao diện
Tiếp tục hồn thiện giao diện
Viết báo cáo khóa luận

Đánh giá

80%
80%
40%

60%
100%
50%
80%
90%
30%
50%
85%
30%
80%
100%

Ngày 5 tháng 7 năm 2020
Giáo viên hướng dẫn
(Ký và ghi rõ họ tên)

Người viết đề cương
(ký và ghi rõ họ tên)


7


DANH MỤC HÌNH ẢNH

Hình 1.2. 1: Cấu trúc express ........................................................................................27
Hình 2. 1: Mở lệnh "mongod–dbpath D:\MongoDB\data" ...........................................30
Hình 2. 2: Kết quả sau khi chạy thành cơng với Port 27017 ........................................30
Hình 2. 3: Gõ lệnh "mongo" khi khởi động mongoDB xong .........................................31
Hình 2. 4: Gõ câu lệnh "show dbs" ...............................................................................31
Hình 2. 5: Tạo database trong MongoDB .....................................................................31
Hình 2. 6: Xóa database ................................................................................................31
Hình 2. 7: Thêm 1 document vào collection ..................................................................31
Hình 2. 8: Thêm nhiều document vào collection ...........................................................32
Hình 2. 9: Hiện thị tất cả các docment có trong collection ..........................................32
Hình 2. 10: Update 1 document trong collection ..........................................................32
Hình 2. 11: Xóa document .............................................................................................33
Hình 2. 12: Kết nối thành cơng với mongodb ...............................................................35
Hình 2. 13: Các bước thiết lập project Angular ...........................................................35
Hình 2. 14: Cấu trúc file với một project Angular ........................................................36
Hình 2. 15: khởi chạy project Angular ..........................................................................37
Hình 2. 16: Download postman về máy tính .................................................................37
Hình 2. 17: Sau khi download xong ..............................................................................38
Hình 2. 18:Giao diện postman ......................................................................................38
Hình 3. 1:Xác định các Actor ........................................................................................40
Hình 3. 2:Mơ hình ERD database .................................................................................42
Hình 3. 3:Collection Product ........................................................................................49
Hình 3. 4:Collection Comment ......................................................................................50
Hình 3. 5:Collection Comment Children.......................................................................51
Hình 3. 6:Collection Users ............................................................................................51

Hình 3. 7:Collection Category ......................................................................................52
Hình 4. 1: Tạo 2 folder con là BackEnd và FrontEnd ..................................................53
Hình 4. 2: Tạo mới một project backend .......................................................................53
Hình 4. 3:Khởi tạo git....................................................................................................54
8


Hình 4. 4: Thực hiện cài đặt express .............................................................................54
Hình 4. 5: Cài đặt express thành cơng ..........................................................................54
Hình 4. 6: Cài đặt nodemon ..........................................................................................55
Hình 4. 7: Cài đặt thành cơng .......................................................................................55
Hình 4. 8: Khởi tạo FrontEnd .......................................................................................56
Hình 4. 9: Thực hiện lệnh để chạy project ....................................................................56
Hình 4. 10: Giao diên FrontEnd ...................................................................................56
Hình 4. 11: Cài đặt mongoose .......................................................................................57
Hình 4. 12: File cấu hình mơi trường ...........................................................................57
Hình 4. 13: Cấu hình file server.js ................................................................................58
Hình 4. 14: Folder chứa hình ảnh .................................................................................58
Hình 4. 15: Code xử lý gửi email ..................................................................................59
Hình 4. 16: Tạo model ...................................................................................................60
Hình 4. 17: Xử lý tải hình ảnh và xác thực token .........................................................61
Hình 4. 18: Thiết lập request đăng nhập ......................................................................62
Hình 4. 19: Api đăng nhập thành cơng .........................................................................62
Hình 4. 20: Thiết lập request đăng ký người dùng .......................................................63
Hình 4.21 : Api đăng ký người dùng thành cơng ..........................................................63
Hình 4. 22: Thiết lập request lấy danh sách người dùng .............................................64
Hình 4. 23: Api lấy danh sách người dùng thành cơng.................................................64
Hình 4. 24: Gán token request lấy thơng tin người dùng .............................................65
Hình 4. 25: Api lấy thơng tin người dùng theo ID thành cơng .....................................65
Hình 4. 26: Thiết lập request upload hình ảnh .............................................................66

Hình 4. 27: Api upload hình ảnh thành cơng ................................................................66
Hình 4. 28: Thiết lập request tìm người dùng theo email ............................................66
Hình 4. 29: Api tìm kiếm người dùng theo email thành cơng .......................................67
Hình 4. 30: Gán token request đổi mật khẩu ................................................................67
Hình 4. 31: Thiết lập request thay đổi mật khẩu mới ....................................................68
Hình 4. 32: Api thay đổi mật khẩu thành cơng ............................................................68
Hình 4. 33: Gán token request tạo sản phẩm mới ........................................................69
Hình 4. 34: Thiết lập request tạo sản phẩm mới ..........................................................69
Hình 4. 35: Api tạo một sản phẩm mới thành công.......................................................69
9


Hình 4. 36: Gán token request lấy danh sách sản phẩm ..............................................70
Hình 4. 37: Api lấy tất cả danh sách sản phẩm thành cơng..........................................70
Hình 4. 38: Gán token request lấy chi tiết sản phẩm ...................................................71
Hình 4. 39: Thiết lập request lấy chi tiết sản phẩm .....................................................71
Hình 4. 40: Api lấy chi tiết một sản phẩm theo ID thành cơng .....................................71
Hình 4. 41: Gán token request xóa một sản phẩm ........................................................72
Hình 4. 42: Thiết lập request xóa một sản phẩm .........................................................72
Hình 4. 43: Xóa một sản phẩm thành cơng ..................................................................72
Hình 4. 44: Gán token request upload ảnh đại diện sản phẩm .....................................73
Hình 4. 45: Thiết lập request upload ảnh đại diện .......................................................73
Hình 4. 46: Api upload ảnh đại diện sản phẩm thành cơng ..........................................73
Hình 4. 47: Gán token request upload danh sách hình ảnh ..........................................74
Hình 4. 48: Thiết lập request upload danh sách hình ảnh ............................................74
Hình 4. 49: Api upload danh sách hình ảnh chi tiết sản phẩm thành cơng ..................74
Hình 4. 50: Thiết lập request tìm kiếm một sản phẩm ..................................................75
Hình 4. 51: Api tìm kiếm một sản phẩm thành cơng .....................................................75
Hình 4. 52: Gán token request tạo một bình luận .........................................................75
Hình 4. 53: Thiết lập request tạo một bình luận ...........................................................76

Hình 4. 54: Api tạo bình luận mới thành cơng .............................................................76
Hình 4. 55: Api lấy danh sách tất cả bình luận thành cơng ..........................................77
Hình 4. 56: Api lấy danh sách danh mục sản phẩm thành cơng ..................................78
Hình 4. 57: Thiết lập request lây chi tiết danh mục sản phẩm .....................................79
Hình 4. 58: Api lấy chi tiết danh mục sản phẩm thành cơng ........................................79
Hình 4. 59: Thiết lập request lấy danh sách chi tiết danh mục sản phẩm ....................80
Hình 4. 60: Api lấy danh sách chi tiết danh mục con thành cơng.................................80
Hình 4. 61: Cấu trúc thư muc frontend .........................................................................81
Hình 4. 62:Diagram NgRx trong Angular .....................................................................82
Hình 4. 63:Cấu trúc thư mục tạo form login .................................................................83
Hình 4. 64: Xử lý form login .........................................................................................83
Hình 4. 65: Tạo service .................................................................................................84
Hình 4. 66: Code file auth.guard.ts ...............................................................................84
Hình 4. 67: Danh sách danh mục sản phẩm .................................................................85
10


Hình 4. 68: Gán token khi người dùng tạo một request xuống server ..........................85
Hình 4. 69: code server .................................................................................................86
Hình 4. 70: Cấu trúc Module home ..............................................................................86
Hình 4. 71: Giao diện danh mục sản phẩm ...................................................................88
Hình 4. 72: Giao diện danh sách sản phẩm ..................................................................88
Hình 4. 73: Lọc sản phẩm có giá từ thấp đến cao ........................................................88
Hình 4. 74: Lọc sản phẩm có giá từ cao xuống thấp ....................................................89
Hình 4.75: Giao diện chi tiết sản phẩm ........................................................................90
Hình 4.76:Giao diện xem danh sách bình luận .............................................................90
Hình 4.77:Giao diện đăng bình luận .............................................................................91
Hình 4.78:Thơng báo đăng nhập để có thể truy cập .....................................................91
Hình 4.79:Thơng tin người dùng ..................................................................................93
Hình 4.80:Giao diện Form đăng nhập người dùng ......................................................93

Hình 4.81 : Giao diện người dùng đăng nhập thành cơng ...........................................94
Hình 4.82:Giao diện nhập thơng tin vào form đăng ký.................................................95
Hình 4.83:Giao diện thơng báo đăng ký thành cơng ....................................................96
Hình 4.84:Thơng báo về địa chỉ email sau khi đăng ký ................................................97
Hình 4.85:Thơng báo về email sau khi tài khoản được xác nhận .................................97
Hình 4.86:Giao diện Form lấy thơng tin sản phẩm ......................................................98
Hình 4.87: Giao diện sản phẩm đăng ký thành cơng ....................................................99
Hình 4.88:Giao diện tìm kiếm .......................................................................................99
Hình 4.89:Giao diện danh sách sản phẩm được tìm thấy ...........................................100
Hình 4.90:Chọn địa chỉ và danh mục sản phẩm bạn tìm kiếm ...................................100
Hình 4.91:Sản phẩm được tìm thấy .............................................................................101
Hình 4.92:Giao diện đăng nhập của quản trị viên......................................................102
Hình 4.93:Thơng báo lỗi đăng nhập. ..........................................................................102
Hình 4.94:Giao diện bảng điều khiển. ........................................................................103
Hình 4.95:Danh sách sản phẩm ..................................................................................103
Hình 4.96:Tài khoản cần xác thực. .............................................................................104
Hình 4. 97: Sản phẩm cần xác thực ...........................................................................104
Hình 4. 98: Danh sách người dùng .............................................................................105
Hình 4. 99: Hồ sơ người dùng .....................................................................................105
11


DANH MỤC BẢNG BIỂU
Bảng 3. 1 Ràng buộc bảng User ....................................................................................42
Bảng 3. 2: Ràng buộc bảng Product .............................................................................44
Bảng 3. 3Ràng buộc bảng Comment .............................................................................45
Bảng 3. 4Ràng buộc bảng Comment Children ..............................................................46
Bảng 3. 5 Ràng buộc bảng Category Level1 .................................................................47
Bảng 3. 6 Ràng buộc bảng Category Level2 .................................................................48


12


PHẦN 1: PHẦN MỞ ĐẦU
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI:
Nếu đã từng xây dựng một vài ứng dụng Web, chắc hẳn bạn đã từng nghe đến cái
tên Angular, một Frameworks Javascript giúp chúng ta xây dựng ứng dụng Web đầy đủ
tính năng từ phía Client. Angular lần đầu được phát hành bởi gã khổng lồ Google vào
năm 2010 với phiên bản AngularJS, sau đó đã có chỗ đứng khá vững chắc trong một
thời gian dài, phiên bản Angular 2 phát hành năm 2016 mang đến một bước chuyển
mình vượt bậc, một công cụ thực sự mạnh mẽ cho việc phát triển ứng dụng Web trên cả
nền tảng Mobile và Desktop …... Angular là một công nghệ được phát triển bởi google
và là một trong những thành phần quang trọng trong việc thiết kế giao diện ( Front-End)
của công nghệ MEAN STACK. MEAN STACK là gì? MEAN có đủ để làm một trang
Web hồn thiện hay khơng? Cơ hội phát triển khi thành thạo MEAN là gì? Vâng rất
nhiều câu hỏi được đặt ra và để giải quyết những vấn đề đó nhóm chúng em chọn đề tài
“Xây dựng một Website bán đồ cũ đơn giản bằng công nghệ MEAN STACK”
2. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN:
Đề tài hướng đến mục đích xây dựng một Website bán đồ cũ giúp mang ý nghĩa tiết
kiệm tránh lãng phí dụng những kiến thức về lý thuyết biến nó thành thực tiễn. Từ một
Website đơn giản phát triển hoàn thiện hơn thành đồ án “Khóa luận tốt nghiệp” sau này
cũng như tạo tiền đề căn bản để các em khóa sau tham khảo và phát triển dự án tồn
diện hơn.
3. MỤC ĐÍCH NGHIÊN CỨU:
Hoàn thành nghiên cứu các bạn sẽ hiểu rõ hơn về MongoDB, NodeJS, Angular và
Express đó là những thành phần cấu tạo nên cơng nghệ MEAN. Có thể xây dựng một
website theo đúng cơng nghệ MEAN. Ngồi ra đề tài còn giúp các bạn hiểu hơn về một

13



Website bán đồ cũ gồm những gì, các thao tác căn bản trên Database NoSql xử lý như
thế nào. Liên kết giữa các phần ra sao…

14


PHẦN 2: NỘI DUNG
CHƯƠNG 1: TỔNG QUÁT VỀ MEAN STACK
Để tạo một ứng dụng hoàn chỉnh như một trang web động thật sự thì cần phải có sự
kết hợp với các ngơn ngữ phía server và ngơn ngữ thao tác cơ sở dữ liệu. Và MEAN
Stack là một sự kết hợp như thế.
MEAN stack là sự kết hợp giữa :
• MongoDB: Nếu như bạn đã từng sử dụng các hệ cơ sở dữ liệu quan hệ
(RDBMS)như MySQL, Oracle DB, MSSQL thì MongoDB lại thuộc trường phái cơ
sở dữ liệu phi quan hệ (NoSQL). MongoDB lưu trữ các dữ liệu dưới dạng giống với
JSON (JavaScript Object Notation) và gọi tên là BSON (Binary JSON).
• ExpressJS: Là một web application framework cho NodeJS, bạn có thể xây dựng
ứng dụng Web bằng cách sử dụng ExpressJS. Tuy nhiên, chúng ta có thể sử dụng
sức mạnh của ExpressJS để tạo ra các API một cách nhanh chóng.
• Angular: Angular là một javascript framework. Dùng để xây dựng giao diện người
dùng(Front-end). Angular được phát triển bởi Google. AngularJS là từ dùng để nói
về Angular 1 ra đời 2009 được viết bằng javascript.Còn Angular được gọi chung là
Angular 2 ra đời 2016 được viết bằng TypeScript phiên bản nâng cấp javascript.
• NodeJS: Là nền tảng phía server được dựng dựa trên Javascript Engine V8 Engine.
Sức mạnh của NodeJS hiện nay được sử dụng ở rất nhiều dự án và công ty nổi tiếng
như Uber, NetFlix, Facebook, Google…NodeJS có thể xử lý hàng ngàn kết nối song
song – điều mà các web server thông thường không dễ để xử lý được.
1.1. MONGODB
-


Giới thiệu: MongoDB là một trong những cơ sở dữ liệu mã nguồn mở NoSQL
phổ biến nhất được biết bằng C++. Tính đến tháng 2/2015, MongoDB được xếp
thứ 4 trong số các hệ thống cơ sở dữ liệu phổ biến nhất. MongoDB là một cơ sở
dữ liệu NoSQL hỗ trợ đa nền tảng, nó có thể chạy trên Windows, Linux và
Mac...Nó hỗ trợ hầu hết các ngơn ngữ lập trình phổ biến như C#, Java, PHP,
Javascript...và các môi trường phát triển khác nhau. (Nôi dung này được tham
khảo phần tài liệu tham khảo số 6)
15


* Một số điểm quan trọng của MongoDB:
• MongoDB được thiết kế theo kiểu hướng đối tượng trong đó các bảng được
cấu trúc một cách linh hoạt cho phép các dữ liệu lưu trên bảng không cần
phải tuân theo một dạng cấu trúc nhất định nào(về định dạng bảng, thuộc
tính).
• JSON document lưu trữ các dữ liệu theo kiểu định dạng “key-value”, ví dụ
như :
{
"Name": "Dat",
“Age”: “23”
}
trong ví dụ trên, " Name " và “Age” là key, " Dat" và “23” là value.
• Có 2 kiểu cấu trúc cơ bản trong JSON là:
 Array: Một danh sách chứa các thể hiện của một list các “key-value”.
 Dictionaries: Lưu trữ các cặp “key-value”.
• MongoDb có cấu trúc Schema động. Một cơ sở dữ liệu NoSQL cho phép
chúng ta phát triển ứng dụng mà khơng cần định nghĩa trước một schema,
cịn đối với các cơ sở dữ liệu quan hệ khác thì chúng ta cần phải định nghĩa
một schema trước khi chúng ta có thể thêm dữ liệu vào hệ thống. Khơng có

schema được định nghĩa trước cho phép các cơ sở dữ liệu NoSQL dễ dàng
cập nhật lại dữ liệu của bạn mỗi khi có u cầu thay đổi
• MongoDB khơng hỗ trợ Joins và Transaction.
-

Trước khi tìm hiểu sâu về MongoDB, ta cùng tìm hiều hệ cơ sở dữ liệu phi quan
hệ (NoSQL): Cơ sở dữ liệu NoSQL tên gốc là “Non SQL” (phi SQL) hoặc “non
relational” (phi quan hệ). Các cơ sở dữ liệu NoSQL đang được sử dụng ngày càng
nhiều trong các ứng dụng dữ liệu lớn. Vậy NoSQL khác gì với hệ cơ sở dữ liệu
quan hệ (RDBMS)? Và lý do gì để chúng ta lựa chọn NoSQL cho các dự án hiện
tại cũng như sắp tới ?

* Các đặc điểm khác biệt giữa MongoDB(NoSQL) và RDBMS như sau:
16


• Mơ hình dữ liệu: Một cơ sở dữ liệu NoSQL cho phép chúng ta phát triển ứng
dụng mà không cần định nghĩa trước một schema, còn đối với các cơ sở dữ liệu
quan hệ khác thì chúng ta cần phải định nghĩa một schema trước khi chúng ta
có thể thêm dữ liệu vào hệ thống. Khơng có schema được định nghĩa trước cho
phép các cơ sở dữ liệu NoSQL dễ dàng cập nhật lại dữ liệu của bạn mỗi khi có
u cầu thay đổi.
• Mơ hình cấu trúc: MongoDB lưu dữ liệu theo định dạng JSON, chính vì thế
nó có hiệu suất cao, tương tác nhanh và khả năng mở rộng tốt, nó hoạt động
trên khái niệm Database=> Collections=> _id và document. RDBMS cung
cấp kiểu lưu trữ dữ liệu dưới dạng bảng và các bảng này có quan hệ với nhau
và nó hoạt động trên khái niệm Databases=> Tables=> Columns
• Mơ hình quan hệ: RDBMS query cung cấp JOIN query rất mạnh mẽ. Chúng
ta có thể lấy dữ liệu liên quan trong nhiều bảng bằng cách sử dụng một câu
lệnh SQL. Cịn NoSQL khơng trang bị JOIN, chúng ta phải làm bằng tay khi

chúng ta code.
• Transactions: Trong RDBMS, hai hoặc nhiều record update có thể được thực
hiện trong một transaction - đảm bảo tất cả update thành công hoặc nếu một
bản update fails thì sẽ rollback lại tồn bộ các record khác. Điều này đảm bảo
tính đồng nhất cho dữ liệu. Trong NoSQL, việc sửa đổi một document là riêng
lẻ. Nói cách khác, nếu bạn đang cập nhật ba giá trị trong một document, cả ba
đều được cập nhật thành cơng hoặc nó vẫn khơng thay đổi. Tuy nhiên, khơng
có transaction tương đương để update cho nhiều document. Có những option
tương tụ như transaction. Nhưng chúng phải được xử lý thủ công trong khi viết
code.
o Ưu điểm của MongoDB:


Do Mongodb lưu trữ dữ liệu dạng JSON, khơng có tính ràng buộc về

các mối quan hệ và cấu trúc lưu trữ nên khả năng mở rộng rất linh động, tính
sẵn sàng cao và tốc độ truy vấn cực nhanh (Nhanh hơn nhiều so với SQL).


Sử dụng bộ nhớ nội tại(RAM) để lưu giữ phần công việc, hạn chế truy

cập vào ổ cứng nên truy vấn sẽ rất nhanh.


Dữ liệu không đồng nhất ,Khả năng mở rông cao
17


o Nhược điểm của MongoDB:



Điều đầu tiên phải kể đến ở đây là MongoDB khơng có các tính chất ràng

buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận vì
rất dễ sai sót. Khơng ứng dụng được cho các mơ hình giao dịch u cầu độ chính
xác cao.


Vì khơng hỗ trợ join giống như RDBMS nên khi viết function join trong

code ta phải làm bằng tay.


Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay

lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao.
(Nội dung mongodb được tham khảo trong tài liệu tham khảo số 6)
1.2. EXPRESSJS
* Expressjs là một Framework của Nodejs, nhưng linh hoạt được xây dựng trên
nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc
mobile. Express rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho
các ứng dụng Web. Express hỗ trợ các phương thức HTTP và middleware tạo ra 1
API rất mạnh mẽ và sử dụng dễ dàng hơn.
* Các tính năng của Express framework phải kể đến như:


Cho phép thiết lập các lớp trung gian để trả về các HTTP request.




Định nghĩa routing có thể được sử dụng với các hành động khác nhau dựa

trên phương thức HTTP và URL.


Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến

template.


Về các package hỗ trợ: Expressjs có vơ số các package hỗ trợ nên các
bạn không phải lo lắng khi làm việc với Framework này.



Express hỗ trợ các phương thức HTTP và middleware để tạo ra API một
cách dễ dàng, nhanh chóng và rất mạnh mẽ.



Về hiệu năng thì Express rất tối ưu vì Express cung cấp một layer bao
gồm các tính năng cơ bản của ứng dụng web và khơng hề tác động đến
các tính năng của Node.js.
18


* Cấu trúc của ExpressJS

Hình 1.2.1: Cấu trúc Express



Root:



app.js chứa các thơng tin về cấu hình, khai báo, các định nghĩa,... để ứng dụng
của chúng ta chạy ok.



package.json chứa các package cho ứng dụng chạy.



Routes: chứa các route có trong ứng dụng



Views: chứa view/template cho ứng dụng



Public: chứa các file css, js, images,...cho ứng dụng.

1.3. ANGULAR
• Angular là một Javascript frameword dùng để viết giao diện web (Frontend),được phát triển bởi google.
• Angular 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..
* Các tính năng cốt lõi của Angular:
- Angular Module: Angular bao gồm một số các khối như Component, Service và


Directive. Chúng ta tạo ra nhiều block để phát triển ứng dụng lớn dần. Angular đưa ra
một cách tốt để tổ chức các khối này sử dụng một khái niệm gọi là Angular Module.
19


Chúng ta tạo ra các component, service, và directive sau đó đặt chúng trong Angular
Module. Chúng ta sử dụng một directive đặc biệt gọi là @NgModule để tạo module.
Angular Module cũng được gọi là NgModule.
Sử dụng Angular Module (hoặc ngModule) để tổ chức code ứng dụng Angular với một
ứng dụng Angular lớn hơn. Ứng dụng sẽ gộp lại bởi nhiều Angular Module. Mỗi
Module triển khai một tính năng cụ thể voặc các tính năng của ứng dụng.
- Component: Angular Component là một class nó được bổ trợ bởi @Component
decorator. Component điều khiển một phần của UI.
- Template: Component cần một view để hiển thị. Template định nghĩa view.
Template chỉ là một tập con của HTML, nó chỉ cho Angular biết làm sao để hiển thị
view. Nó là một trang HTML chuẩn sử dụng các thẻ H1, H2...Nó cũng sử dụng các
lệnh của Angular như {}, []...
- Diective: Directive giúp chúng ta thao tác với View. Một directive là một class,

chúng ta tạo ra sử dụng @Directive nó chứa metadata và logic thao tác trên DOM.
View được tạo ra bởi Angular sử dụng template metadata được định nghĩa trong
Component. Các template là động và được chuyển đổi sử dụng directive.
- Service : Service cung cấp dịch vụ cho các Components hoặc các service khác.
Angular khơng có bất cứ đặc tả nào cho Service nó chỉ là các class có export method
và chứa một số task. Bạn khơng cần làm gì cả.
* Ưu điểm của Angular:
- Tốc độ và hiệu suất: Đạt được tốc độ tối đa có thể có trên Nền tảng Web hiện nay
và tiếp tục thực hiện nó thơng qua Cơng việc Web và hiển thị phía máy chủ. Angular
giúp bạn kiểm soát khả năng mở rộng. Đáp ứng các yêu cầu dữ liệu lớn bằng cách

xây dựng các mơ hình dữ liệu trên RxJS, Immutable.js hoặc một mơ hình đẩy khác.
- Cơng cụ đáng kinh ngạc: Xây dựng các tính năng nhanh chóng với các mẫu đơn
giản, khai báo. Mở rộng ngôn ngữ mẫu với các thành phần của riêng bạn và sử dụng
một mảng rộng các thành phần hiện có. Nhận trợ giúp và phản hồi cụ thể theo góc
cạnh với hầu hết mọi IDE và trình chỉnh sửa. Tất cả điều này đến với nhau để bạn
có thể tập trung vào việc xây dựng các ứng dụng tuyệt vời thay vì cố gắng làm cho
mã hoạt động.
20


- Được nhiều nhà phát triển yêu thích: Angular cung cấp cơ sở hạ tầng năng suất
và khả năng mở rộng hỗ trợ các ứng dụng lớn nhất của Google.

- Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.
* Nhược điểm của Angular:
- Mặc dù angular có nhiều lợi thế ưu điểm nhưng nó cũng có mặt trái ngược lại:
Khơng an tồn: Được phát triển từ javascript nên nó khơng an tồn, phía máy chủ
phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru. Phụ thuộc: Nếu người
dùng vơ hiệu hóa javascript thì ứng dụng sẽ khơng hoạt động được.
- Khó tiếp cận cho người mới học Web.
(Nôi dung về Angular được tham khảo phần tài liệu tham khảo số 7)

1.4. NODEJS
• Có thể hiểu Node.js là 1 nền tảng hay 1 môi trường được sử dụng để xây dựng
các ứng dụng web, ứng dụng mạng, cơng cụ, thư viện,...
• Nền tảng ở đây có nghĩa là tập hợp các cơng cụ, các framework, các thư viện,
các khả năng và sử dụng ngôn ngữ lập trình gì để hỗ trợ bạn xây dựng (build) ứng
dụng của bạn.
• NodeJS là một nền tảng Server side được xây dựng dựa trên Javascript Engine
(V8 Engine). Cho phép lập trình viên có thể xây dựng các ứng dụng chạy trên máy

chủ. Ban đầu, Node.js được phát triển bởi Ryan Dahl. Phiên bản đầu tiên của Node.js
được cho ra mắt vào năm 2009.
• Node.js có thể chạy được trên nhiều nền tảng khác nhau như Windows, Linux
hay Mac OS,…
• Node.js là bộ thư viện JavaScript được Google phát triển để viết trình duyệt web
Chrome.
• Bản thân Node.js khơng phải là một ngơn ngữ lập trình mới, thay vào đó Node.js
là một nền tảng mã nguồn mở (hay phần mềm mã nguồn mở) được viết dựa trên
ngơn ngữ JavaScript.
• Một khái niệm cốt lõi của Node.js đó là các function bất đồng bộ (asynchronous
functions) - vì vậy về cơ bản thì mọi thứ chạy trên nền tảng này. Với hầu hết các
ngơn ngữ kịch bản máy chủ, chương trình phải đợi mỗi function thực thi xong trước
21


khi có thể tiếp tục chạy tiếp. Với Node.js, bạn xác định các function sẽ chạy để hoàn
thành một tác vụ nào đó, trong khi phần cịn lại của ứng dụng vẫn chạy đồng thời.
* Đặc điểm của NodeJS:
- Không đồng bộ và Phát sinh sự kiện (Event Driven): Tất các các APIs của thư
viện Node.js đều không đồng bộ, nghĩa là khơng blocking (khóa). Nó rất cần thiết
vì Node.js không bao giờ đợi một API trả về dự liệu. Server chuyển sang một API
sau khi gọi nó và có cơ chế thông báo về Sự kiện của Node.js giúp Server nhận đựa
phản hồi từ các API gọi trước đó.
- Chạy rất nhanh: Dựa trên V8 Javascript Engine của Google Chrome, thư viện
Node.js rất nhanh trong các quá trình thực hiện code.
- Các tiến trình đơn giản nhưng hiệu năng cao: Node.js sử dụng một mơ hình
luồng đơn (single thread) với các sự kiện lặp. Các cơ chế sự kiện giúp Server trả lại
các phản hồi với một cách không khóa và tạo cho Server hiệu quả cao ngược lại với
các cách truyền thống tạo ra một số lượng luồng hữu hạn để quản lý request. Nodejs
sử dụng các chương trình đơn luồng và các chương trình này cung cấp các dịch vụ

cho số lượng request nhiều hơn so với các Server truyền thống như Apache HTTP
Server.
-

Có thể tải được một lượng truy cập khá lớn mà vẫn mượt. Phần Core bên dưới
của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá
cao.

- Không đệm: Ứng dụng Node.js không lưu trữ các dữ liệu buffer.
- Có giấy phép: Node.js được phát hành dựa vào MIT License.
➔ Với những đặc điểm này NodeJS là một sự lựa chọn hoàn hảo cho các ứng dụng
website trên các lĩnh vực công nghệ bao gồm:
- Các ứng dụng về I/O.
- Các ứng dựng về luồng dữ liệu.
- Các ứng dụng về dữ liệu hướng đến thời gian thực.
- Các ứng dụng dựa vào JSON APIs.
- Các ứng dụng Single Page Application Hiện tại có rất nhiều hệ thống lớn hiện tại
đang sử dụng NodeJS, trong số này có thể kể đến như: eBay, GE, GoDaddy,
Microsoft, Yahoo, Linkedin, Paypal, Uber,…
22


* Ưu điểm của NodeJS:
- 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: 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 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ực: Giả sử bạn xây dựng 1 ứng dụng chat, feed ... Facebook,
Twitter là điển hình cho Web thực. NodeJS làm khá tốt điều đó !
* Nhược điểm của NodeJS:
- Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không
phải là điều dễ dàng.
- Ứng dụng nặng tốn tài nguyên: Nếu 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 ).
- 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ới những gì các ngơn ngữ tiền bối đang có, nếu chưa biết về NodeJS thì việc
cần xây dựng dự án quan trọng, kinh doanh phát triển trên NodeJS sẽ không phải
lựa chọn bây giờ.
* Không nên sử dụng Node.js khi:
23


- 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. 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 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à
v0.10.35). 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 non-blocking/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 sử dụng Node.js 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ý non-blocking. 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!
- Những website stateful. Node.js xử lý mọi request trên cùng một process giúp
cho việc xây dựng các bộ nhớ đệm chưa bao giờ đơn giản đến thế: Hãy lưu nó vào
24



×