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

ĐẠ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 …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………… TÓM T Ắ T Tên đề tài : Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Số thẻ SV: 102150090 Lớp: 15T2 Đề tài : “Xây dựng mạng xã hội We - travel hỗ trợ người du lịch” là hệ thống mạng xã hội giúp người dùng có thể tìm thấy thông tin về một địa điểm nào đó, theo dõi và tương tác với người dùng khác, cập nhật trạng thái của bản thân qua nhũng bài viết, tham gia cộng đồng chat giữa những thành viên trong hệ thống ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM Độ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 toá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 201 9 Trưởng Bộ môn: TS Lê Th ị Mỹ Hạnh Người hướng dẫn i 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ên g 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 đoà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ể hoà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 ii 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 hoàn toà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 iii 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 iv 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 Quá 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 v 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 vi 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 vii 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 n g ười dùng) Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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 ngoà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 , React js, 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 yêu cầu phần mềm của dự án Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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 Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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 Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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 Event - driven, 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à hoàn toà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 hoàn toàn free: https://www npmjs com/ • 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 hoà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 Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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 ti n cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toá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ừ pa rent đế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 Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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ữ c ho 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 Ngoà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 componen t, 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 compone nt 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ín h mô tả những gì component con sẽ render Prop là bất biến State: Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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ý: N guồ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 { Xây dựng mạng xã hội We - travel hỗ trợ người du lịch 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 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: H iể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 ( A pplication P rogramming I nterface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng h ay 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 ( RE presentational S tate T ransfer) 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 Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 16 - RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứ ng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API 1 3 3 RESTful hoạt động nh ư thế nào? REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động c ơ bản nêu trên sẽ sử dụng những ph ươ ng thức HTTP riêng - GET (SELECT): Trả về một Resource hoặc một danh sách Resource - POST (CREATE): Tạo mới một Resource - PUT (UPDATE): Cập nhật thông tin cho Resource - DELETE (DELETE): Xoá một Resource Những ph ươ ng thức hay hoạt động này th ư ờng đ ư ợc gọi là CRUD t ươ ng ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa Hiện tại đa số lập trình viên viết RESTful API giờ đây đều chọn JSON là format chính thức nh ư ng cũng có nhiều ng ư ời chọn XML làm format, nói chung dùng thế nào cũng đ ư ợc miễn tiện và nhanh 1 3 4 Authentication và dữ liệu trả về RESTful API không sử dụng session và cookie, nó sử dụng một access_token với mỗi request Dữ liệu trả về thường có cấu trúc như sau: Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 17 1 2 3 4 5 6 7 8 { "data" : { "id" : "1" , "name" : "TopDev" } } 1 3 5 Status code Khi chúng ta requ est một API nào đó thường thì sẽ có vài status code để nhận biết sau:  200 OK – Trả về thành công cho những phương thức GET, PUT, PATCH hoặc DELETE  201 Created – Trả về khi một Resouce vừa được tạo thành công  204 No Content – Trả về khi Resource xoá thành công  304 Not Modified – Client có thể sử dụng dữ liệu cache  400 Bad Request – Request không hợp lệ  401 Unauthorized – Request cần có auth  403 Forbidden – bị từ chối không cho phép  404 Not Found – Không tìm thấy resource từ URI  405 Method Not Allowed – Phương thức không cho phép với user hiện tại  410 Gone – Resource không còn tồn tại, Version cũ đã không còn hỗ trợ  415 Unsupported Media Type – Không hỗ trợ kiểu Resource này  422 Unprocessable Entity – Dữ liệu không được xác thực  429 Too Many Requests – Request bị từ chối do bị giới hạn 1 4 MongoDB - MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng - MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON tha y vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh - Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 18 - So với RDBMS thì trong MongoDB collection ứng với table , còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS - Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo m ột cấu trúc nhất định - Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB 1 5 Websocket là gì ? WebSoket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server bằng cách sử dụng một TCP socket để t ạo một kết nối hiệu quả và ít tốn kém Mặc dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào - WebSockets mới xuất hiện trong HTML5, là một kỹ thuật Reverse Ajax WebSockets cho phép cá c kênh giao tiếp song song hai chiều và hiện đã được hỗ trợ trong nhiều trình duyệt (Firefox, Google Chrome và Safari) Kết nối được mở thông qua một HTTP request (yêu cầu HTTP), được gọi là liên kết WebSockets với những header đặc biệt Kết nối được duy t rì để bạn có thể viết và nhận dữ liệu bằng JavaScript như khi bạn đang sử dụng một TCP socket đơn thuần - Dữ liệu truyền tải thông qua giao thức HTTP (thường dùng với kĩ thuật Ajax) chứa nhiều dữ liệu không cần thiết trong phần header Một header request/re sponse của HTTP có kích thước khoảng 871 byte, trong khi với WebSocket, kích thước này chỉ là 2 byte (sau khi đã kết nối) Vậy giả sử bạn làm một ứng dụng game có thể tới 10,000 người chơi đăng nhập cùng lúc, và mỗi giây họ sẽ gửi/nhận dữ liệu từ server H ãy so sánh lượng dữ liệu header mà giao thức HTTP và WebSocket trong mỗi giây: + HTTP: 871 x 10,000 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps) + WebSocket: 2 x 10,000 = 20,000 bytes = 160,000 bits per second (0 153 Kbps) Như bạn thấy chỉ riên g phần header thôi cũng đã chiếm một phần lưu lượng đáng kể với giao thức HTTP truyền thống Giao thức bắt tay của WebSocket Để thực hiện kết nối, client phải gửi một WebSocket handshake request đến server Server sẽ gửi trả lại WebSocket handshake respons e như bên dưới: Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 19 Client request: GET /mychat HTTP/1 1 Host: server example com Upgrade: websocket Connection: Upgrade Sec - WebSocket - Key: x3JJHMbDL1EzLkh9GBhXDw== Sec - WebSocket - Protocol: chat Sec - WebSocket - Version: 13 Origin: http://example com Server respo nse:(Server Architecture) HTTP/1 1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec - WebSocket - Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Để xác nhận việc kết nối, client sẽ gửi một giá trị Sec - WebSocket - Key được mã hóa bằng Based64 đến server Sau đó bên server sẽ thực hiện: – Nối thêm chuỗi cố định là “258EAFA5 - E914 - 47DA - 95CA - C5AB0DC85B11″ vào Sec - WebSocket - Key để được chuỗi mới là “x3JJHMbDL1EzLkh9GBhXDw==258EAFA5 - E914 - 47DA - 95CA - C5AB0DC85B11″ – Thực hiện mã hóa SHA - 1 chuỗi trên để được “1d29a b734b0c9585240069a6e4e3e91b61da1969″ – Mã hóa kết quả vừa nhận được bằng Base64 để được “HSmrc0sMlYUkAGmm5OPpG2HaGWk=” – Gửi response lại client kèm với giá trị Sec - WebSocket - Accept chính là chuỗi kết quả vừa tạo ra Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 20 Client sẽ kiểm tra status code (phải bằng 101) và Sec - WebSocket - Accept xem có đúng với kết quả mong đợi không và thực hiện kết nối Ưu điểm - WebSockets cung cấp khả năng giao tiếp hai chiều mạnh mẽ, có độ trễ thấp và dễ xử lý lỗi Không cần phải có nhiều kết nối như phương pháp Comet long - poll ing và cũng không có những nhược điểm như Comet streaming - API cũng rất dễ sử dụng trực tiếp mà không cần bất kỳ các tầng bổ sung nào, so với Comet, thường đòi hỏi một thư viện tốt để xử lý kết nối lại, thời gian chờ timeout, các Ajax request (yêu cầu Ajax ), các tin báo nhận và các dạng truyền tải tùy chọn khác nhau (Ajax long - polling và jsonp polling) Nhược điểm - Nó là một đặc tả mới của HTML5, nên nó vẫn chưa được tất cả các trình duyệt hỗ trợ - Không có phạm vi yêu cầu nào Do WebSocket là một TCP socket chứ không phải là HTTP request, nên không dễ sử dụng các dịch vụ có phạm vi - yêu cầu, như SessionInViewFilter của Hibernate Hibernate là một framework kinh điển cung cấp một bộ lọc xung quanh một HTTP request Khi bắt đầu một request, nó sẽ thiết lập một c ontest (chứa các transaction và liên kết JDBC) được ràng buộc với luồng request Khi request đó kết thúc, bộ lọc hủy bỏ contest này 1 6 Mapbox GL MapBox là gì? Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 21 Hình 1 3 Th ư viện MapBoxGL Mapbox là nhà cung cấp bản đồ trực tuyến cho các trang web và ứng dụng nh ư Foursquare, Lonely Planet, Facebook, Financial Times, Weather Channel và Snapchat tại Mỹ Tuy có một số hạn chế hơn so với dịch vụ được cung cấp bởi các nhà cung cấp bản đồ như Google Maps Mapbox GL là một bộ thư viện nguồn mở do Mapbox phát triển nhằm nhúng các khung bản đồ “trơn” có thể tùy biến vào các ứng dụng cho Web, di động, và máy tính để bàn Cũng có sẵn một thư viện để xây dựng các máy chủ và công cụ dòng lệnh Mapbox GL lấy các bảng kiểu tuân theo Tiêu chuẩn Bảng kiểu của Mapbox, áp dụng chúng vào các mảnh vectơ tuân theo Tiêu chuẩn Mảnh Vectơ của Mapbox dùng các bản kê khai TileJSON, và kết họa chúng một cách động dùng OpenGL để tối ưu hóa sự hiệu xuất kết họa Theo mặc định, Mapbox GL hiển thị các mảnh v ect ơ Mapbox Streets bắt nguồn từ dữ liệu OpenStreetMap Nhà phát triển có thể lựa chọn từ những kiểu do Mapbox thiết kế hoặc tùy biến một bảng kiểu riêng trong chương trình thiết kế bảng kiểu Mapbox Studio Trong các nền tảng di động, bộ phận Trình viễn trắc Mapbox (Mapbox Telemetry) sử dụng dữ liệu định vị của thiết bị để giúp cải thiện dữ liệu OpenStreetMap Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 22 Mapbox GL là hạt nhân của API Tĩnh của Mapbox, API này tạo ra các hình ảnh bản đồ tĩnh trên máy chủ trong những trường hợp không cần hay không th ể có bản đồ tươ ng tác Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 23 Chương 2 : PHÂN TÍCH & THI Ế T K Ế H Ệ TH Ố NG 2 1 Gi ớ i thi ệ u chung 2 1 1 Mô t ả Hệ thống chạy trên nền web, giúp cho người dùng có thể dễ dàng xem và lựa chọn các địa điểm du lịch ưa thích của mình, bình luận nhận xét về địa điểm mình đã trải nghiệm và đồng thời cho phép người dùng có thể chia sẽ những bài viết liên quan đến các địa điểm du lịch, follow những người khách du lịch khác 2 1 2 Chức năng - Giúp cho người dùng có thể dễ dàng xem và lựa chọn các địa điểm du lịch ưa thích của mình thông qua bản đồ hết sức trực quan, mỗi địa điểm sẽ được phân loại theo danh mục để dễ dàng tìm kiếm - Bình luận, nhận xét về địa điểm mình đã trải nghiệm và đồng thời cho phép người dùng có thể chia sẽ những bài viết liên quan đến các địa điểm du lịc h, đề xuất một địa điểm mới, tham gia vào nhóm chat tực tuyến - Người dùng cũng có thể thả yêu thích, bình luận ở mỗi bài đăng của người khác - Theo dõi những người du lịch khác - Quản lý các địa điểm trong cơ sở dữ liệu 2 1 3 Đối tượng Hệ thống phục vụ cho 2 đối tượng người dùng chính: - Người quản trị - Người dùng cuối 2 1 4 Môi trường hoạt động Hệ thống hoạt dộng trên mỗi trường web, có thể chạy trên nhiều trình duyệt web 2 1 5 Giao diện Giao diện người dùng dễ nhìn, trực quan và hiển thị được đầy đủ thông tin nhất Giao d iện chia thành nhiều khu vực, nhưng phải đảm bảo sự thống nhất và không gây rối mắt khi thao tác Giao diện quản lý của thành viên phải có đầy đủ các phím chức năng, trực quan và dễ dàng sử dụng nhất Hiển thị đầy đủ thông tin nhưng không rườm rà phức tạp Giao diện quản trị viên phải cung cấp cái nhìn tổng quan nhất của hệ thống như danh sách các ứng viên, danh sách các công việc, danh sách nhà tuyển dụng, và đầy đủ 2 1 6 Tính cấp thiết của đề tài Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 24 - Hỗ trợ kịp thời cho những người chưa biết phải đi đâu, khám phá những nơi nào - Là một kênh thông tin bổ ích cho những ai muốn quan tâm đến mọi miền Tổ Quốc nhưng chưa có điều kiện để đi du lịch, họ có thể khám phá thông qua bản đồ và những nội dung mà người khác chia sẻ 2 2 Phân tích chức năng hệ thống 2 2 1 Phân tích c ác tác nhân và hành động của tác nhân a) Người quản trị Hình 2 1 S ơ đồ usecase cho người quản trị Hình 2 2 S ơ đồ usecase cho người quản trị với Quản lý nhóm chat Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 25 Hình 2 3 S ơ đồ usecase cho người quản trị với Quản lý danh mục Hình 2 4 S ơ đồ usecase cho người quản trị với quản lý địa điểm Hình 2 5 S ơ đồ usecase cho người quản trị với Quản lý tài khoản Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 26 b) Người dùng cuối Hình 2 6 S ơ đồ usecase cho người dùng cuối Hình 2 7 S ơ đồ usecase cho người dùng cuối với Tham gia nhóm chat Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 27 Hình 2 8 S ơ đồ usecase cho người dùng cuối với Đăng bài viết Hình 2 9 S ơ đồ usecase cho người dùng cuối với Xem dòng thời gian 2 2 2 Đặc tả ca sử dụng Đặc tả chức năng đăng ký Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 28 Bảng 2 1 Đặc tả đă ng ký Use Case Đăng ký Mô tả Cho phép đ ăng ký tài khoản để sử dụng hệ thống Tác nhân kích họat Khách vãng lai Tiền điều kiện Các bước thực hiện - Truy cập vào trang web - Nhấn vào “SIGNUP” trên thanh Navbar - Nhập thông tin vào form “SIGNUP” - Nhấn button “SIGNUP” trên form “SIGN UP” - Hệ thống kiểm tra email trong cơ sở dữ liệu - Nếu email chưa được sử dụng và các thông tin hợp lệ thì tạo mới tài khoản và thông báo:“Tạo thành công tài khoản” - Nếu email đã được sử dụng hoặc thông tin không hợp lệ thì thông báo lỗi đến người dù ng Đặc tả ca sử dụng đăng nhập Bảng 2 2 Đặc tả ca sử dụng đăng nhập Use Case Đăng nhập Mô tả Cho phép người dùng đăng nhập vào hệ thống Tác nhân kích họat - Người dùng cuối - Người quản trị Tiền điều kiệ n Tài khoản đ ã được đăng ký trước đó Các bước thự c hiện - Truy cập vào trang web - Nhấn vào “LOGIN” trên thanh Navbar - Nhập Email và password vào form “LOGIN” - Nhấn button “LOGIN” để đăng nhập - Hệ thống kiểm tra email và password trong CSDL - Nếu tài kho ản không hợp lệ, hệ thống thông báo: Đăng nhập thất bại Người dùng nhập lại thông tin và đăng nhập lại lần nữa - Nếu tài khoản đã tồn tại, hệ thống kiểm tra quyền hạn của tài khoản và trả về giao diện phù hợp Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 29 Đặc tả ca sử dụng xem chi tiết địa điểm Bảng 2 3 Đặc tả ca sử dụng xem chi tiết địa điểm Use Case Xem chi tiết địa điểm Mô tả Cho phép người dùng xem chi tiết địa điểm Tác nhân kích họat Tất cả tác nhân Tiền điều kiện Các bước thực hiện - Truy cập vào tr ang web - Nhấn vào “Explorer” trên thanh Navbar - Chọn một địa điểm trên bản đồ Đặc tả ca sử dụng đăng bài viết Bảng 2 4 Đặc tả ca sử dụng đăng bài viết Use Case Đăng bài viết Mô tả Cho phép người đăng bài viết mới T ác nhân kích họat Người dùng Tiền điều kiện Đã đăng nhập Các bước thực hiện - Truy cập vào trang web - Nhấn vào “News feed” trên thanh Navbar - Chọn vào khu vực “Create new post” - Viết bài, có thể chọn thêm hình ảnh và gắn thẻ địa điểm Đặc t ả ca sử dụng Xem dòng thời gian của người khác Bảng 2 5 Đặc tả ca sử dụng Xem dòng thời gian của người khác Use Case Xem dòng thời gian của người khác Mô tả Cho phép người dùng Xem dòng thời gian của người khác Tác nhân kích họat Tất cả tác nhân Tiền điều kiện Các bước thực hiện - Truy cập vào trang web - Chọn một bài đăng bất kì - Nhấn vào tên hoặc hình đại diện của bài đăng đó của người cần theo dõi hoặc ở phần bình luận Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 30 Đặc tả ca sử dụng Đề xuất địa điểm mới Bả ng 2 6 Đặc tả ca sử dụng Đề xuất địa điểm mới Use Case Đề xuất địa điểm mới Mô tả Cho phép người dùng Đề xuất địa điểm mới, nếu đề xuất thành công, địa điểm đó sẽ hiện lên bản đồ địa điểm Tác nhân kích họat Tất cả tác nhân Tiền điều kiện Các bước thực hiện - Truy cập vào trang web - Nhấn vào “Suggest” trên thanh Navbar - Điền thông tin và bấm Submit Đặc tả ca sử dụng Tham gia nhóm chat Bảng 2 7 Đặc tả ca sử dụng Tham gia nhóm chat Us e Case Tham gia nhóm chat Mô tả Cho phép người dùng Tham gia nhóm chat Tác nhân kích họat Người dùng, người quản trị Tiền điều kiện Đã đăng nhập Các bước thực hiện - Truy cập vào trang web - Nhấn vào “Chat” trên thanh Navbar - Chọn một nhóm ch at bất kì - Nếu đã có trong nhóm, có thể soạn và gửi tin nhắn bất kì, nếu chưa có trong nhóm, chọn vào nút “Join” trên tên nhóm để yêu cầu tham gia, nếu trong thời gian đợi cho phép, trên tên nhóm sẽ có chữ Cancel, chọn nút này nếu muốn hủy tham gia nhóm Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 31 2 3 Sơ đồ tuần tự: Hình 2 10 S ơ đồ tuần tự chức nă ng Đăng nhập Hình 2 11 S ơ đồ tuần tự chức nă ng Đă ng kí Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 32 Hình 2 12 S ơ đồ tuần tự chức năng Tạo địa điểm Hình 2 13 S ơ đồ tuần tự chức nă ng Đề xuất địa điểm Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 33 Hình 2 14 S ơ đồ tuần tự chức nă ng Tham gia nhóm chat Hình 2 15 S ơ đồ tuần tự chức năng Tạo bài viết Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 34 Hình 2 16 S ơ đồ tuần tự chức nă ng Xem địa điểm theo danh mục 2 4 Cơ sở dữ liệu: Hình 2 17 Database và các mối quan hệ Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 35  Mô tả các bảng dữ liệu Bảng 2 8 Bảng Category Tên Kiể u Mô tả _id ObjectId id của danh mục tự động tăng key_parent string Key của category cha key string Key của chính danh mục status string Trạng thái của danh mục (activated, pending, rejected) name string Tên của danh mục slug string Chuỗi slug c ủa danh mục createdAt datetime Thời gian danh mục được tạo updatedAt datetime Thời gian danh mục cập nhật gần nhất Bảng 2 9 Bảng Place Tên Kiểu Mô tả _id ObjectId Id của địa điểm tự động tăng images Array(Object) Danh sách hình ảnh của địa điểm tags Array(String) Danh sách tag của địa điểm categories Array(ObjectId) Danh sách các danh mục mà địa điểm thuộc name string Tên đại điểm description string Mô tả của địa điểm slug string Slug của địa điểm longitude string Kinh độ của địa điểm latitude string Vĩ độ của địa điểm status string Trang thái của địa điểm createdAt datetime Thời gian địa điểm được tạo updatedAt datetime Thời gian gần nhất địa điểm được cập nhật Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 36 Bảng 2 10 Bảng Vote Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_user ObjectId Khóa ngoại tham chiếu đến bảng User id_place ObjectId Khóa ngoại tham chiếu đến bảng Place rating integer Điểm số đánh giá, từ 1 - >5 createdAt datetime Thời gian đánh giá đư ợc tạo updatedAt datetime Thời gian gần nhất đánh giá được cập nhật Bảng 2 11 Bảng Like Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_post ObjectId Khóa ngoại tham chiếu đến bảng Post id_uer ObjectId Khóa ngoại th am chiếu đến bảng User createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nhật gần nhất Bảng 2 12 Bảng Post Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_place ObjectId Khóa ngoại tham chi ếu đến bảng Place id_uer ObjectId Khóa ngoại tham chiếu đến bảng User content string Nội dung bài đăng images Array(Object) Danh sách hình ảnh của bài đăng status string Trạng thái bài đăng createdAt datetime Thời gian được tạo updatedAt datetime T hời gian được cập nhật gần nhất Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 37 Bảng 2 13 Bảng Comment Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_place ObjectId Khóa ngoại tham chiếu đến bảng Place id_uer ObjectId Khóa ngoại tham chiếu đến bảng User id_p ost ObjectId Khóa ngoại tham chiếu đến bảng Post content string Nội dung bài đăng status string Trạng thái bài đăng createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nhật gần nhất Bảng 2 14 Bả ng Folllow Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_user ObjectId Khóa ngoại tham chiếu đến bảng User id_uer_follow ObjectId Khóa ngoại tham chiếu đến bảng User createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nh ật gần nhất Bảng 2 15 Bảng Notification Tên Kiểu Mô tả _id ObjectId Id tự động tăng id_uer ObjectId Khóa ngoại tham chiếu đến bảng User content string Nội dung thông báo status string Trạng thái thông báo type str ing Kiểu thông báo createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nhật gần nhất Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 38 Bảng 2 16 Bảng User Tên Kiểu Mô tả _id ObjectId Id tự động tăng role string Phân loại vai trò người dung gender integer Giới tính email string Email username strings Username password string Mật khẩu phone string Số điện thoại first_name string Tên last_name string Họ address string Địa chỉ birthday datetime Ngày sinh status string Trạng thái user socketIds Array(String) Lưu những kết nối socket của user createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nhật gần nhất Bảng 2 17 Bảng Conversation Tên Kiểu Mô tả _id ObjectId Id tự động t ăng members Array(ObjectId) Danh sách các thành viên trong nhóm pendings Array(ObjectId) Danh sách các thành viên đang đợi duyệt name string Tên nhóm chat status string Trạng thái nhóm chat createdAt datetime Thời gian được tạo updatedAt datetime Th ời gian được cập nhật gần nhất Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 39 Bảng 2 18 Bảng Message Tên Kiểu Mô tả _id ObjectId Id tự động tăng content string Nội dung tin nhắn id_conversation ObjectId Khóa ngoại tham chiếu đến bảng Conversation id_uer Ob jectId Khóa ngoại tham chiếu đến bảng User createdAt datetime Thời gian được tạo updatedAt datetime Thời gian được cập nhật gần nhất Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 40 Chương 3: TRIỂ N KHAI VÀ ĐÁ NH GIÁ K Ế T QU Ả 3 1 Phát tri ể n h ệ th ố ng 3 1 1 Các công ngh ệ đã sử d ụ ng: - Back end: sử dụng nền tảng Nodejs với framework Express - Front end: sử dụng ngôn ngữ JavaScript với Framework React js kết hợp Redux, sử dụng bộ UI: React sematic UI - Database: MongoDB - SocketIO - Thư viện hỗ trợ: Mapbox GL, pannellum 3 1 2 Quá trình phát tri ể n Công cụ: - Phần mềm phát triển: Visual Code - Công cụ làm việc với CSDL: Robo3T - Quản lí mã nguồn: B itbucket - Vẽ sơ đồ: Star UML - Vẽ sơ đồ cho CSDL: app dbdesigner net Web service: - Web service là một RESTful API, được xây dựng bởi Nodejs, phiên bản v10 15 3, v ới framework Express phiên bản 4 16 3, cơ sở dũ liệu MongoDB - Các bước triển khai Cài đặt Nodejs và npm Hình 3 1 Cài đặt Nodejs và Npm Cài đặt hệ quản trị cơ sở dữ liệu Mongodb Hình 3 2 Cài đặt hệ quản trị cơ sở dữ liệu Mongodb Khởi tạo dự án và cài đặt express npm init npm install -- save express Cài đặt module socket Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 41 npm install socket io -- save Cài đặt một số module, được thêm trong trong file package json npm install Thao tác với CSDL thông qua phần mềm Robo3T Hình 3 3 Giao diện phần mêm Robo3T quản lý CSDL Xây dựng mạng xã hội We - travel hỗ trợ người du lịch Sinh viên thực hiện: Triệu Tấn Danh Hướng dẫn: ThS Trần Hồ Thủy Tiên 42 Khởi chạy server : npm start Hình 3 4 Khởi chạy server Web Client - Được xây dựng với framework ReactJs phiên bản 16 5 1, áp dụng kiến trúc Redux để quản lý trạng thái của các thành phần trong ứng dụng phía fron t-end - Các bước triển khai Khởi tạo dự án và cài đặt react, react -sematic-ui npm init npm install react react - dom semantic - ui - react -- save Cài đặt redux, redux tool cho môi trường develop