XÂY DỰNG MẠNG XÃ HỘI WE - TRAVEL HỖ TRỢ NGƯỜI DU LỊCH

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 (3.97 MB, 66 trang )

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP
NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH: CÔNG NGHỆ PHẦN MỀM

ĐỀ TÀI:

XÂY DỰNG MẠNG XÃ HỘI WE-TRAVEL HỖ
TRỢ NGƯỜI DU LỊCH

Người hướng dẫn: ThS. TRẦN HỒ THỦY TIÊN
Sinh viên thực hiện: TRIỆU TẤN DANH
Số thẻ sinh viên: 102150090
Lớp: 15T2

Đà Nẵng, 12/2019

Nhận xét của người hướng dẫn
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

Nhận xét của người phản biện
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

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

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ tên sinh viên: TRIỆU TẤN DANH
Số thẻ sinh viên: 102150090
Lớp:15T2
Khoa: Công Nghệ Thông Tin
Ngành: Công Nghệ Thông Tin
1. Tên đề tài đồ án:
Xây dựng mạng xã hội We-travel hỗ trợ người du lịch
2. Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện
3. Các số liệu và dữ liệu ban đầu:
Khơng có
4. Nội dung các phần thuyết minh và tính tốn:
Phần 1: Giới thiệu đề tài, tính thiết thực của đề tài
Phần 2: Cơ sở lý thuyết của đề tài
Phần 3: Mô tả hệ thống của đề tài
Phần 4: Triển khai, demo và đánh giá đề tài
5. Các bản vẽ, đồ thị ( ghi rõ các loại và kích thước bản vẽ ):
− Sơ đồ usecase
− Sơ đồ tuần tự
6. Họ tên người hướng dẫn: ThS. Trần Hồ Thủy Tiên
7. Ngày giao nhiệm vụ đồ án:
05/09/2019.
8. Ngày hoàn thành đồ án:
20/12/2019.
Đà Nẵng, ngày
tháng
năm 2019
Trưởng Bộ môn: TS. Lê Thị Mỹ Hạnh

Người hướng dẫn

LỜI NÓI ĐẦU
Trải qua gần 5 năm học tập và rèn luyện trên giảng đường đại học, em nhận được
sự tận tình dạy bảo của các thầy cơ. Với lịng biết ơn sâu sắc và chân thành nhất, em xin
gửi đến thầy cơ trong khoa Cơng nghệ nói riêng và các thầy cô Trường Đại Học Bách
Khoa - Đà Nẵng nói chung, đã cùng với tri thức và tâm huyết của mình để truyền đạt
vốn kiến thức quý báu trong suốt thời gian em học tập tại trường. Và đến nay, để củng
cố và vận dụng những kiến thức đã học, em thực hiện đề tài đồ án tốt nghiệp “Xây dựng
mạng xã hội We-travel hỗ trợ người du lịch”.
Được mệnh danh là ngành cơng nghiệp khơng khói, du lịch là một trong những
ngành phát triển nhất hiện nay, chính vì thế, nhu cầu đi lại, khám phá, tìm hiểu văn hóa,
ẩm thực, phong cảnh, … là những yếu tố mà người có ý định, có kế hoạch đi du lịch
quan tâm hàng đầu. Tuy nhiên, lựa chọn một kênh thơng tin tin cậy để tìm hiểu khơng
phải là điều dễ dàng với những du khách, đặc biệt là những người ưa khám phá, không
quan tâm nhiều về đặt tour, đặt tuyến, đi theo đồn,… Đó là lý do đề tài: “Xây dựng
mạng xã hội We-travel hỗ trợ người du lịch” ra đời giúp đáp ứng yêu cầu trên cho những
người muốn khám phá, tìm hiều về địa điểm du lịch.
Trong quá trình thực hiện đồ án, được sự theo dõi, hướng dẫn tận tình và những
nhận xét, góp ý kịp thời của cô Trần Hồ Thủy Tiên đã giúp em có thể hồn thành đồ án
một cách tốt nhất. Một lần nữa em xin cảm ơn cô. Đồng thời em xin cảm ơn gia đình,
bạn bè và mọi người xung quanh cũng tạo mọi điều kiện, hỗ trợ về vật chất và tinh thần
trong thời gian làm đồ án.
Do hạn chế về kiến thức và kĩ năng quản lý thời gian nên trong quá trình thực
hiện chắc chắn sẽ khơng tránh được thiếu sót. Vì vậy em rất mong nhận được sự đóng
góp, nhận xét và sửa chửa để đồ án hoàn thiện hơn nữa.

i

CAM ĐOAN
Tôi xin cam đoan đây là đồ án độc lập của riêng tôi. Các tài liệu tham khảo dùng
để phân tích và dẫn chứng đều có nguồn gốc rỏ ràng và được ghi rỏ trong phần tài liệu
tham khảo. Nếu phát hiện có bất kỳ sự gian lận nào tơi xin hồn tồn chịu trách nhiệm
về nội dung luận văn của mình.

Sinh viên thực hiện

Triệu Tấn Danh

ii

MỤC LỤC
TÓM TẮT..........................................................................................................................
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP .................................................................................
LỜI NÓI ĐẦU ..................................................................................................................i
CAM ĐOAN................................................................................................................... ii
MỤC LỤC ..................................................................................................................... iii
DANH SÁCH CÁC BẢNG ............................................................................................v
DANH SÁCH HÌNH VẼ.................................................................................................v
DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT ....................................................... vii
MỞ ĐẦU .........................................................................................................................8
Chương 1: CƠ SỞ LÝ THUYẾT ..................................................................................10
1.1. NodeJs ..............................................................................................................10
1.1.1. Khái niệm Nodejs ......................................................................................10
1.1.2. Những ứng dụng nên viết bằng Nodejs .....................................................10
1.1.3. Lý do để tự tin sử dụng Nodejs .................................................................10
1.1.4. Những công ty lớn nào đang sử dụng Nodejs. ..........................................11

1.2. ReactJs .............................................................................................................11
1.2.1. Giới thiệu ...................................................................................................11
1.2.2. Virtual DOM ............................................................................................. 12
1.2.3. Giới thiệu JSX ...........................................................................................13
1.2.4. Giới thiệu về Components.........................................................................13
1.2.5. Props và State ............................................................................................ 13
1.2.6. Redux ........................................................................................................14
1.3. RESTful API ....................................................................................................15
1.3.1. RESTful API là gì? ...................................................................................15
1.3.2. Diễn giải các thành phần ...........................................................................15
1.3.3. RESTful hoạt động như thế nào? .............................................................. 16
1.3.4. Authentication và dữ liệu trả về ................................................................ 16
1.3.5. Status code.................................................................................................17
1.4. MongoDB ........................................................................................................17
1.5. Websocket là gì ? ............................................................................................. 18
1.6. Mapbox GL ......................................................................................................20
Chương 2: PHÂN TÍCH & THIẾT KẾ HỆ THỐNG ...................................................23
iii

2.1. Giới thiệu chung .................................................................................................23
2.1.1. Mô tả ............................................................................................................23
2.1.2. Chức năng .................................................................................................23
2.1.3. Đối tượng ..................................................................................................23
2.1.4. Môi trường hoạt động. ..............................................................................23
2.1.5. Giao diện ...................................................................................................23
2.1.6. Tính cấp thiết của đề tài ............................................................................23
2.2. Phân tích chức năng hệ thống .........................................................................24
2.2.1. Phân tích các tác nhân và hành động của tác nhân ...................................24
2.2.2. Đặc tả ca sử dụng ......................................................................................27

2.3. Sơ đồ tuần tự: ...................................................................................................31
2.4. Cơ sở dữ liệu: ...................................................................................................34
Chương 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ ................................................40
3.1. Phát triển hệ thống .............................................................................................. 40
3.1.1. Các cơng nghệ đã sử dụng: ..........................................................................40
3.1.2. Q trình phát triển ......................................................................................40
3.2. Kết quả: ...............................................................................................................44
KẾT LUẬN ...................................................................................................................57
TÀI LIỆU THAM KHẢO ............................................................................................. 58

iv

DANH SÁCH CÁC BẢNG
Bảng 2. 1. Đặc tả đăng ký ............................................................................................. 28
Bảng 2. 2. Đặc tả ca sử dụng đăng nhập ......................................................................28
Bảng 2. 3. Đặc tả ca sử dụng xem chi tiết địa điểm ......................................................29
Bảng 2. 4. Đặc tả ca sử dụng đăng bài viết ..................................................................29
Bảng 2. 5. Đặc tả ca sử dụng Xem dòng thời gian của người khác .............................. 29
Bảng 2. 6. Đặc tả ca sử dụng Đề xuất địa điểm mới .....................................................30
Bảng 2. 7. Đặc tả ca sử dụng Tham gia nhóm chat ......................................................30
Bảng 2. 8. Bảng Category ............................................................................................. 35
Bảng 2. 9. Bảng Place ...................................................................................................35
Bảng 2. 10. Bảng Vote ...................................................................................................36
Bảng 2. 11. Bảng Like ...................................................................................................36
Bảng 2. 12. Bảng Post ...................................................................................................36
Bảng 2. 13. Bảng Comment ...........................................................................................37
Bảng 2. 14. Bảng Folllow .............................................................................................. 37
Bảng 2. 15. Bảng Notification .......................................................................................37
Bảng 2. 16. Bảng User ..................................................................................................38

Bảng 2. 17. Bảng Conversation .....................................................................................38
Bảng 2. 18. Bảng Message ............................................................................................ 39

DANH SÁCH HÌNH VẼ
Hình 1. 1. Virtual DOM .................................................................................................12
Hình 1. 2. Cấu trúc component .....................................................................................13
Hình 1. 3 Thư viện MapBoxGL .....................................................................................21
Hình 2. 1. Sơ đồ usecase cho người quản trị ................................................................ 24
Hình 2. 2 Sơ đồ usecase cho người quản trị với Quản lý nhóm chat ............................ 24
Hình 2. 3. Sơ đồ usecase cho người quản trị với Quản lý danh mục ............................ 25
Hình 2. 4. Sơ đồ usecase cho người quản trị với quản lý địa điểm ............................... 25
Hình 2. 5. Sơ đồ usecase cho người quản trị với Quản lý tài khoản ............................. 25
Hình 2. 6. Sơ đồ usecase cho người dùng cuối ............................................................. 26
Hình 2. 7. Sơ đồ usecase cho người dùng cuối với Tham gia nhóm chat .....................26
Hình 2. 8. Sơ đồ usecase cho người dùng cuối với Đăng bài viết ................................ 27
Hình 2. 9. Sơ đồ usecase cho người dùng cuối với Xem dịng thời gian .......................27
Hình 2. 10. Sơ đồ tuần tự chức năng Đăng nhập ..........................................................31
Hình 2. 11. Sơ đồ tuần tự chức năng Đăng kí ............................................................... 31
Hình 2. 12. Sơ đồ tuần tự chức năng Tạo địa điểm.......................................................32
Hình 2. 13. Sơ đồ tuần tự chức năng Đề xuất địa điểm ................................................32
Hình 2. 14. Sơ đồ tuần tự chức năng Tham gia nhóm chat ...........................................33
Hình 2. 15. Sơ đồ tuần tự chức năng Tạo bài viết .........................................................33
Hình 2. 16. Sơ đồ tuần tự chức năng Xem địa điểm theo danh mục ............................. 34
Hình 2. 17. Database và các mối quan hệ .....................................................................34
Hình 3. 1. Cài đặt Nodejs và Npm .................................................................................40
Hình 3. 2. Cài đặt hệ quản trị cơ sở dữ liệu Mongodb .................................................40
v

Hình 3. 3. Giao diện phần mêm Robo3T quản lý CSDL ...............................................41

Hình 3. 4. Khởi chạy server ...........................................................................................42
Hình 3. 5. Quản lý trạng thái các component ở client ..................................................43
Hình 3. 6. Sơ đồ hoạt động hệ thống .............................................................................43
Hình 3. 7. Giao diện trang Login ..................................................................................44
Hình 3. 8. Giao diện trang Signup ................................................................................45
Hình 3. 9. Giao diện trang chủ ......................................................................................45
Hình 3. 10. Giao diện trang Newsfeed ..........................................................................46
Hình 3. 11. Giao diện trang Newsfeed với bình luận ....................................................46
Hình 3. 12. Giao diện trang Newsfeed với bài đăng có gắn địa điểm ..........................47
Hình 3. 13. Giao diện trang tạo mới bài viết ................................................................ 47
Hình 3. 14. Giao diện trang chi tiết địa điểm ................................................................ 48
Hình 3. 15. Giao diện trang chi tiết địa điểm kèm hình 360 độ ....................................48
Hình 3. 16. Giao diện trang chi tiết địa điểm với danh sách bài đăng liên quan .........49
Hình 3. 17. Giao diện trang tìm địa điểm theo danh mục .............................................49
Hình 3. 18. Giao diện xem hình ảnh của địa điểm ........................................................50
Hình 3. 19. Giao diện trang Đề xuất địa điểm .............................................................. 50
Hình 3. 20. Giao diện trang Chat nhóm ........................................................................51
Hình 3. 21. Giao diện trang khi xem thơng báo ............................................................ 51
Hình 3. 22. Giao diện trang Dịng thời gian của người dùng .......................................52
Hình 3. 23. Giao diện trang Quản lý user .....................................................................52
Hình 3. 24. Giao diện trang thêm user ..........................................................................53
Hình 3. 25. Giao diện trang thêm danh mục .................................................................53
Hình 3. 26. Giao diện trang thêm nhóm chat ................................................................ 54
Hình 3. 27. Giao diện trang quản lý nhóm chat ............................................................ 54
Hình 3. 28. Giao diện trang thêm địa điểm ...................................................................55
Hình 3. 29. Giao diện trang thêm địa điểm 2 ................................................................ 55
Hình 3. 30. Giao diện trang danh sách địa điểm ..........................................................56

vi

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT
KÝ HIỆU:
CHỮ VIẾT TẮT:
















DOM: Document Object Model ("Mơ hình Đối tượng Tài liệu")
API: Application Programming Interface
I/O: Input/Output
UI: User Interface (giao diện người dùng)
MVC: Model-View-Controller
HTML: HyperText Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản)
JS: Javascript
HTTP: Hypertext Transfer Protocol (Giao thức truyền tải siêu văn bản)
JSON: JavaScript Object Notation
XML: Extensible Markup Language (Ngôn ngữ đánh dấu mở rộng)

REST: Representational State Transfer
CSDL: Cơ sở dữ liệu
TCP: Transmission Control Protocol
JWT: JSON Web Token
UX: User Experience (trải nghiệm người dùng)

vii

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

MỞ ĐẦU
Mục đích thực hiện đề tài:
Hiện nay, có rất nhiều mạng xã hội như Facebook, Instagram,…nhưng chúng lại
phát triển ở mọi lĩnh vực, người dùng khó tìm kiếm kênh uy tín ở đó, hay những website
về du lịch, tuy nhiên chúng hầu hết là hỗ trợ đặt tour, kênh của đại lý du lịch,… khiến
cho việc tiếp cận của người du lịch, mà trong đó, khách nước ngồi, người du lịch tự túc
gặp khơng ít khó khăn. “Mạng xã hội We-travel” sẽ giúp mọi người tìm kiếm thơng tin
dễ dàng, và đáng tin cậy. Tất cả các địa điểm du lịch sẽ được hiển thị trên bản đồ và
được phân loại theo từng danh mục giúp người dùng có cái nhìn trực quan hơn về những
địa điểm của đất nước. Đồng thời, với sự đóng góp của cộng đồng, mọi người có thể đề
xuất thêm những địa điểm mới, viết cảm nghĩ, nhận xét, đánh giá từng địa điểm. Đó là
những dữ liệu chân thực và đầy đủ, ngày càng được mở rộng, và càng đáng tin cậy hơn
trong việc hỗ trợ người du lịch. Nó cũng cịn là nơi để mọi người lưu lại những dòng
tâm sự hay những kỉ niệm của chính mình. Trở thành một kênh thông tin du lịch cho
mọi người
Mục tiêu đề tài:
Xây dựng mạng xã hội trên nền tảng web, giúp mọi người dễ dàng truy cập, đăng
bài, đánh giá, bình luận về các địa điểm.
Phạm vi và đối tượng nghiên cứu:

 Người du lịch, đặc biệt những người du lịch tự túc, phượt thủ
Phương pháp nghiên cứu:
 Tìm hiểu, nghiên cứu các tài liệu, hệ thống mã nguồn mở có sẵn trên internet
 Học cách sử dụng các công nghệ như Nodejs, Reactjs, Socket, …
Cấu trúc của đồ án tốt nghiệp:
Phần giới thiệu: Chương này cung cấp thông tin về bối cảnh và mục đích của dự án cũng
như đưa ra phạm vi của vấn đề sẽ tập trung vào luận án.
Chương 1: CƠ SỞ LÝ THUYẾT: Chương này giới thiệu về tất cả các lý thuyết và
công nghệ kiến thức được sử dụng trong dự án này.
Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Chương này giới thiệu bao gồm các
tính năng chính, thơng số kỹ thuật u cầu phần mềm của dự án.

Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

8

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

Chương 3: TRIỂN KHAI VÀ THỰC HIỆN: Chương này cho thấy việc thực hiện dự
án này, bao gồm cả hình ảnh và giải thích ngắn gọn cho mỗi chức năng chính.
Phần kết luận: Phần kết luận của dự án đồng thời nhấn mạnh vấn đề đã giải quyết,
cũng như trình bày các vấn đề vẫn chưa được giải quyết và đưa ra các khuyến nghị và
đề xuất.

Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

9

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

Chương 1: CƠ SỞ LÝ THUYẾT
1.1. NodeJs
1.1.1. Khái niệm Nodejs
- Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên
Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng
-

-

dụng mạng một cách nhanh chóng và dễ dàng mở rộng.
Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent,
trụ sở tại California, Hoa Kỳ. Dù sao thì chúng ta cũng nên biết qua một chút
chút lịch sử của thứ mà chúng ta đang học một chút chứ nhỉ? =))
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.

-

Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian
thực.

-

Nodejs á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.1.2. Những ứng dụng nên viết bằng Nodejs
Rõ ràng, không phải cứ hot và mới là Nodejs làm gì cũng tốt, ví dụ như một ứng
dụng cần tính ổn định cao, logic phức tạp thì các ngơn ngữ PHP hay Ruby… vẫn là sự
lựa chọn tốt hơn. Còn dưới đây là những ứng dụng có thể và nên viết bằng Nodejs:
-

Websocket server: Các máy chủ web socket như là Online Chat, Game
Server…
Fast File Upload Client: là các chương trình upload file tốc độ cao.
Ad Server: Các máy chủ quảng cáo.
Cloud Services: Các dịch vụ đám mây.
RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng
khác thông qua API.
Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc
độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ
một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau. Nodejs
có thể làm tốt điều này.

1.1.3. Lý do để tự tin sử dụng Nodejs
- Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn
ngữ khá thông dụng. Theo tác giả của ngôn ngữ Javascript, Ryan Dahl:
“Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngơn

Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

10

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

ngữ lập trình động cịn lại, cụ thể là nó khơng có khái niệm về đa luồng, tất
cả là đơn luồng và hướng sự kiện.”
-

Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Eventdriven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả.

-

Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux,
hơn nữa cộng đồng Nodejs rất lớn và hồn tồn miễn phí. Các bạn có thể thấy
cộng đồng Nodejs lớn như thế nào tại đây, các package đều hồn tồn free:
/>• Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa
thiết bị.

1.1.4. Những công ty lớn nào đang sử dụng Nodejs.
• Amazon, Ebay, Linkedin, Microsoft, Paypal, trello, Uber,…
• Cịn về phía Linkedin chuyển từ Ruby sang sử dụng Nodejs để xử lý các
truy cập từ mobile, và con số Server sử dụng giảm từ 30 còn 3, nghĩa là giảm
gần 90%.
1.2. ReactJs
1.2.1. Giới thiệu
React.js 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. 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. Nếu như AngularJS là
một Framework cho phép nhúng code javasscript trong code html thông qua các

attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng
code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn
HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho
các component dễ hiểu hơn.
React là một thư viện UI 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.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt
động trên phía client, mà cịn được render trên server và có thể kết nối với nhau.
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

Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

11

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

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:
1.2.2. Virtual DOM

Hình 1. 1. Virtual DOM

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 JS sử

dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object
Javascript, 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à tree thật, điều này sẽ giúp tối ưu hoá
việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ
liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn
giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. Với các đặc điểm ở trên, React
dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian.
Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên
Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

12

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share,
comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng.
1.2.3. Giới thiệu JSX
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc
điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương
đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là
kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.
Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngồi ra, nó cũng cung
cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên
Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.
1.2.4. Giới thiệu về Components

Hình 1. 2. Cấu trúc component

React được xây dựng xung quanh các component, chứ không dùng 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 thành
phần 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 methods khả dụng khác,
nhưng render là method chủ đạo.
1.2.5. 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. Prop là bất biến. State:
Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

13

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

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.
1.2.6. Redux
Hiện nay Reactjs là một thư viện mạnh mẽ khá phổ biến. Khi làm việc với React
hay các dự án ứng dụng Single Page nói chung, có một vấn đề khá đau đầu là làm sao
quản lý được trạng thái của các thành phần trong ứng dụng đó. Chính vì thế Redux ra
đời đã giải quyết được vấn đề trên.

Nguyên lí
Redux được xây dựng dựa trên 3 nguyên lý:
Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object
tree nằm trong Store duy nhất
Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là
phát một Action (là 1 object mơ tả những gì xảy ra)
Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi
Action chúng ta dùng các pure function gọi là Reducer
Về cơ bản Redux có 4 thành phần như sau:
Action: Là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store. Các thông
tin này là 1 object mơ tả những gì đã xảy ra.
export const INCREASE = 'INCREASE'
export function increase() {
return {
type: INCREASE
}
}
Reducer: Là nơi xác định State thay đổi như thế nào.
export default function counterApp (state = initialState, action) {
switch (action.type) {
case INCREASE:
return {
increase: ++state.increase,
decrease: state.decrease
}
case DECREASE:
return {
Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

14

Xây dựng mạng xã hội We-travel hỗ trợ người du lịch

increase: state.increase,
decrease: ++state.decrease
}
default:
return state
}
}
Store: Là nơi quản lý State, cho phép truy cập State qua getState(), update State
qua dispatch(action), đăng kí listener qua subscribe(listener).
import { createStore } from 'redux'
import counterApp from './reducers'
let store = createStore(counterApp)
View: Hiển thị dữ liệu được cung cấp bởi Store

1.3. RESTful API
1.3.1. RESTful API là gì?
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng
web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài
nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các
trạng thái tài nguyên được định dạng và được truyền tải qua HTTP.
1.3.2. Diễn giải các thành phần
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà
theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành
phần khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu

dữ liệu phổ biến như JSON hay XML.
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ
liệu, một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo cho
giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông
tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một
URL để xử lý dữ liệu.

Sinh viên thực hiện: Triệu Tấn Danh

Hướng dẫn: ThS. Trần Hồ Thủy Tiên

15

XÂY DỰNG MẠNG XÃ HỘI WE - TRAVEL HỖ TRỢ NGƯỜI DU LỊCH

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về