Xây dụng ứng dụng chat dựa trên nền tảng reactjs và nodejs

- ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ HUẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ ́ in h tê ́H uê - - ̣c K KHÓA LUẬN TỐT NGHIỆP ho XÂY DỰNG ỨNG DỤNG CHAT DỰA TRÊN NỀN TẢNG Tr ươ ̀n g Đ ại REACTJS VÀ NODEJS HỒ THỊ THÚY Niên khóa: 2015-2019 - ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ HUẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ ́ in h tê ́H uê - - ̣c K KHÓA LUẬN TỐT NGHIỆP ho XÂY DỤNG ỨNG DỤNG CHAT DỰA TRÊN NỀN TẢNG g Đ ại REACTJS VÀ NODEJS Giảng viên hướng dẫn: Hồ Thị Thúy TS Hồ Quốc Dũng ươ ̀n Sinh viên thực hiện: Tr Lớp: K49A Tin Học Kinh Tế Niên khóa: 2015-2019 Huế, tháng 01 năm 2019 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Lời Cám Ơn ́ Tr ươ ̀n g Đ ại ho ̣c K in h tê ́H uê Trong đợt thực tập vừa qua em nhận nhiều giúp đỡ tận tình từ nhiều phía Tất điều giúp em hồn thành tốt tập cuối khóa Đề tài nghiên cứu kết sau tháng thực tập sở thực tập dựa vào kiến thức học trường Đại học Kinh Tế Huế năm vừa qua Đầu tiên em xin kính gửi lời cám ơn đến lãnh đạo trường Đại học Kinh Tế Huế, đặc biệt tất quý thầy cô khoa Hệ thống thông tin kinh tế truyền đạt cho em kiến thức, kinh nghiệm suốt khoảng thời gian em học tập trường Đồng thời, em xin chân thành đến thầy giáo TS.Hồ Quốc Dũng, người trực tiếp tận tình hướng dẫn, giải đáp thắc mắc đưa nhận xét để em hồn thành tốt đề tài Tiếp theo, em xin gửi lời cám ơn đến công ty TNHH Desvlab, nơi tạo điều kiện cho em tham gia thực tập đơn vị Bên cạnh đó, em xin cám ơn anh chị công ty người đồng hành, tận tình hướng dẫn giúp đỡ em suốt thời gian em thực tập công ty Trong trình thực đề tài, bên cạnh việc kiến thức cịn nhiều chỗ hỏng thời gian thực tập cịn hạn chế nên em tránh khỏi cố, thiếu sót sản phẩm Em kính mong q thầy thơng cảm góp ý chân thành để em phát triển hồn thiện đề tài cách tốt tích lũy kiến thức phục vụ cho công việc sau trường Em xin chân thành cám ơn! Huế, tháng 01 năm 2019 Sinh viên ký tên Hồ Thị Thúy SVTH: Hồ Thị Thúy I - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng MỤC LỤC Lời Cám Ơn i DANH MỤC CÁC CHỮ VIẾT TẮT iv DANH MỤC CÁC BẢNG vi MỞ ĐẦU .1 ́ uê Lý chọn đề tài ́H Mục tiêu đề tài .1 tê Đối tượng phạm vi nghiên cứu .2 h 3.1 Đối tượng nghiên cứu .2 in 3.2 Phạm vi nghiên cứu ̣c K Phương pháp nghiên cứu .2 ho Cấu trúc khoá luận .3 CHƯƠNG I: CƠ SỞ LÍ LUẬN Đ ại 1.1 Ứng dụng chat g 1.1.1 Một số khái niệm liên quan đến chat ươ ̀n 1.1.2 Thực trạng sử dụng ứng dụng chat 1.1.3 Một số yêu cầu, chức xây dựng ứng dụng Tr 1.2 Một số ngôn ngữ sử dụng ứng dụng chat 1.2.1 Khái niệm ngơn ngữ lập trình 1.2.2 HTML CSS .6 1.2.3 Ngơn ngữ lập trình Javascript .6 1.2.4 Framework Bootstrap 1.2.5 NodeJS SVTH: Hồ Thị Thúy i - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng 1.2.6 WebSocket 12 1.2.7 ReactJS 14 1.2.8 Tổng quan thời gian thực 15 1.2.9 Hệ quản trị sở liệu NoSQL MongoDB 16 CHƯƠNG II: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 19 ́ uê 2.1 Mô tả hệ thống 19 ́H 2.2 Mục tiêu hệ thống 19 tê 2.3 Yêu cầu chung 19 h 2.3.1 Yêu cầu chức 19 in 2.3.2 Yêu cầu phi chức 20 ̣c K 2.4 Các sơ đồ use-case 20 ho 2.4.1 Sơ đồ tổng quát 20 2.4.2 Sơ đồ chức đăng kí .21 ại 2.4.3 Sơ đồ chức đăng nhập .22 Đ 2.4.4 Chức thao tác trang chủ 23 ươ ̀n g 2.4.5 Chức Server 24 2.5 Sơ đồ (Squence Diagram) 26 Tr 2.5.1 Sơ đồ đăng kí .26 2.5.2 Sơ đồ đăng nhập 26 2.5.3 Sơ đồ chat User 27 2.5.4 Sơ đồ chat Group .28 2.5.5 Sơ đồ đăng xuất 28 2.6 Sơ đồ thuật toán hệ thống 29 2.7 Mơ hình liệu 29 SVTH: Hồ Thị Thúy ii - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng CHƯƠNG III: CÀI ĐẶT VÀ ĐÁNH GIÁ 32 3.1 Cài đặt công cụ .32 3.2 Giao diện chương trình 33 3.2.1 Giao diện đăng kí .33 3.2.2 Giao diện đăng nhập 34 ́ uê 3.2.3 Giao diện tổng quan chương trình 35 ́H 3.2.4 Giao diện trò chuyện 35 tê 3.3 Vận hành hệ thống 36 h KẾT LUẬN 38 in Kết đạt 38 ̣c K Hạn chế đề tài 38 ho Hướng phát triển đề tài 38 Kinh nghiệm thân .39 Tr ươ ̀n g Đ ại TÀI LIỆU THAM KHẢO 40 SVTH: Hồ Thị Thúy iii - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng DANH MỤC CÁC CHỮ VIẾT TẮT STT Tên viết tắt Tên tiếng Anh Tên tiếng Việt API Application Program Interface Giao diện chương trình ứng dụng CSDL CSS Cascading Style Sheet HTML Hypertext Markup Language HTTP HyperText Transfer Protocol JS Javascript JSX Javascript Syntax Extension LAN RDBMS 10 REST Cơ sở liệu ́ Giao thức truyền tải siêu văn ̣c K Local Area Network Mạng nội Relation Database Management System Hệ thống quản lý sở liệu quan hệ Đ ại ho Phần mở rộng cú pháp Javascript Chuyển giao trạng thái đại diện Wide Area Network Mạng diện rộng ươ ̀n g Representational State Transfer WAN Tr 11 Ngôn ngữ đánh dấu siêu văn in h tê ́H uê Tập tin định kiểu theo tầng SVTH: Hồ Thị Thúy iv - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng DANH MỤC CÁC HÌNH Hình 1.1: Người Việt sử dụng mạng xã hội Hình 1.2: Event driven Hình 1.3: Synchronous Asynchronous .10 Hình 1.4: WebSocket 13 Hình 1.5: Biểu đồ thống kế tần suất sử dụng CSDL .17 ́ uê Hình 1.6: CSDL MongoDB 18 Hình 2.1: Sơ đồ tổng quát hệ thống .20 ́H Hình 2.2: Sơ đồ chức đăng kí .21 tê Hình 2.3: Sơ đồ chức đăng nhập 22 h Hình 2.4: Sơ đồ thao tác trang chủ 23 in Hình 2.5: Sơ đồ thao tác Server 25 ̣c K Hình 2.6: Sơ đồ đăng kí 26 Hình 2.7: Sơ đồ đăng nhập 27 ho Hình 2.8: Sơ đồ chat User .27 Hình 2.9: Sơ đồ chat Group 28 ại Hình 2.10: Sơ đồ đăng xuất .28 Đ Hình 2.11: Sơ đồ thuật tốn chương trình .29 g Hình 2.12: CSDL MongoDB 30 ươ ̀n Hình 3.1: Giao diện chương trình thiết kế Adobe Photoshop CC 32 Hình 3.2: Giao diện đăng kí 33 Tr Hình 3.3: Giao diện đăng nhập 34 Hình 3.4: Lỗi đăng nhập 34 Hình 3.5: Giao diện chương trình chưa có trị chuyện 35 Hình 3.6: Giao diện trị chuyện Group User 35 Hình 3.7: Khởi chạy chương trình .36 SVTH: Hồ Thị Thúy v - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng DANH MỤC CÁC BẢNG Bảng 1.1: So sánh Synchronous Asynchronous .11 Bảng 1.2: So sánh RDBMS NoSQL .16 Bảng 2.1: Các tác nhân hệ thống 20 Bảng 2.2: Chức đăng kí User 21 Bảng 2.3: Chức đăng nhập User 23 ́ uê Bảng 2.4: Chức thao tác trang chủ 24 Bảng 2.5: Chức thao tác Server 25 Tr ươ ̀n g Đ ại ho ̣c K in h tê ́H Bảng 2.6: Ý nghĩa từ khóa 31 SVTH: Hồ Thị Thúy vi - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng MỞ ĐẦU Lý chọn đề tài Hiện nay, thông tin liên lạc phát triển mạnh mẽ, nhu cầu trao đổi thông tin nhanh hiệu ngày tăng Cùng với phát triển khơng ngừng cơng nghệ thông tin hệ thống mạng Internet ngày làm cho việc trao đổi thông tin dễ dàng hết ́ uê Lý cốt yếu nhu cầu việc ứng dụng ứng dụng chat realtime ́H tích hợp vào website để hỗ trợ khách hàng, nên ứng dụng chat realtime cần tê thiết Bên cạnh việc xuất ứng dụng Facebook, Zalo, Skype,… cung cấp cho người dùng cơng cụ hữu ích để trị chuyện Những ứng h dụng lợi ích bên cạnh tồn vài tiêu cực Các ứng dụng ̣c K in đa phần gây tập trung nhân viên trình làm việc Nắm bắt tầm quan trọng mức độ sử dụng rộng rãi ứng dụng chat ho xã hội từ kế thừa phát triển để xây dựng ứng dụng chat nội để giúp hỗ trợ khách hàng đồng thời giúp tránh xao nhãng ứng ại dụng chat Từ đó, tơi định chọn đề tài “Xây dựng ứng dụng chat dựa g Mục tiêu đề tài Đ tảng ReactJS NodeJS” làm hướng nghiên cứu ươ ̀n Dựa việc nghiên cứu ngơn ngữ lập trình tảng lập trình web, đồng thời nghiên cứu ứng dụng trao đổi thơng tin, khóa luận tập trung chủ yếu Tr vào phân tích xây dựng ứng dụng chat  Mục tiêu tổng quát Từ việc nghiên cứu tảng lập trình web, đặc biệt ngôn ngữ NodeJS, sở liệu MongoDB, ReactJS đề tài xây dựng ứng dụng chat có đầy đủ chức giúp người trao đổi thơng tin liên lạc  Mục tiêu cụ thể - Nghiên cứu tảng lập trình web SVTH: Hồ Thị Thúy - tê ́H ́ GVHD: TS.Hồ Quốc Dũng uê Khóa luận tốt nghiệp in h Hình 2.7: Sơ đồ đăng nhập ̣c K Theo sơ đồ ta thấy người dùng truy cập vào hệ thống giao diện đăng nhập xuất người dùng nhập thông tin cần thiết để ho đăng nhập Nếu người dùng đăng nhập thông tin hợp lệ hệ thống chuyển người dùng đến trang chủ để thực chức trò chuyện Ngược lại người dùng ại nhập sai thông tin tên tồn hệ thống thơng báo lỗi, hệ Đ thống đưa người dùng lại trang đăng nhập Tr ươ ̀n g 2.5.3 Sơ đồ chat User Hình 2.8: Sơ đồ chat User SVTH: Hồ Thị Thúy 27 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Khi người dùng đăng nhập thành công hệ thống chuyển người dùng đến trang chủ Ở người dùng chọn người nhóm người mà muốn trị chuyện để nhập tin nhắn gửi tin nhắn ́ ̣c K in h tê ́H uê 2.5.4 Sơ đồ chat Group ho Hình 2.9: Sơ đồ chat Group Khi người dùng truy vào hệ thống đồng thời đăng nhập thành cơng ại đưa đến trang chủ người dùng Ở người dùng thấy group chat, từ Đ người dùng chọn group chat để nói chuyện Tr ươ ̀n g 2.5.5 Sơ đồ đăng xuất Hình 2.10: Sơ đồ đăng xuất SVTH: Hồ Thị Thúy 28 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Khi người dùng muốn thoát khỏi hệ thống tiến hành nhấp vào kí hiệu đăng xuất thơng tin truyền tải đến Server, Server gửi liệu đến CSDL CSDL tiến hành kiểm tra tên người dùng tiến hành thao tác đăng xuất cập nhật lại danh sách người dùng ́ Tr ươ ̀n g Đ ại ho ̣c K in h tê ́H uê 2.6 Sơ đồ thuật tốn hệ thống Hình 2.11: Sơ đồ thuật tốn chương trình Nhìn vào hình ta thấy tồn quy trình vận hành hệ thống Từ q trình truy cập, đăng kí, đăng nhập, chọn chế độ trò chuyện lúc đăng xuất 2.7 Mơ hình liệu Cơ sở liệu hệ thống lưu MongoDB SVTH: Hồ Thị Thúy 29 - ̣c K in h tê ́H ́ GVHD: TS.Hồ Quốc Dũng uê Khóa luận tốt nghiệp ho Hình 2.12: CSDL MongoDB ại Hệ thống chat với hệ quản trị CSDL tên appchat, khởi tạo tài khoản đăng Đ kí tiến hành chat room với người dùng hệ thống bên bao gồm g collection là: channels, message, tokens, users ươ ̀n - Channels: collection để lưu trữ kênh chat room hệ thống - Messages: collection để lưu trữ đoạn hội thoại người dùng q Tr trình trị chuyện - Users: collection để lưu trữ thông tin người dùng như: tên, email, mật người dùng đăng kí tài khoản thành cơng - Tokens: collection để lưu trữ đoạn mã riêng biệt người dùng đăng kí thành cơng Lúc người dùng truy vấn API hệ thống check token lưu database để xác thực SVTH: Hồ Thị Thúy 30 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Kiểu liệu _id Khóa tài liệu Object Name Tên người dùng String Email Email người dùng String Password Mật người dùng String Created Thời gian đăng kí tài khoản Online Hiển thị trạng thái người dùng ́ Ý nghĩa uê Tên ́H Bảng 2.6: Ý nghĩa từ khóa Boolean Tr ươ ̀n g Đ ại ho ̣c K in h tê Date SVTH: Hồ Thị Thúy 31 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng CHƯƠNG III: CÀI ĐẶT VÀ ĐÁNH GIÁ 3.1 Cài đặt công cụ Đề tài sử dụng công cụ hỗ trợ sau để xây dựng ứng dụng hoàn chỉnh: - Giao diện thiết kế Adobe Photoshop CC 2018: phần mềm dùng để thiết kế ứng dụng website đem lại nhiều hiệu ứng vô bắt mắt cho tầng giao diện sinh động, màu sắc hút chắn tạo ấn tượng đặc biệt cho người ́ uê xem nhờ lớp ảnh (layer) nhờ vào lọc (filter) Tùy chỉnh màu sắc với Tr ươ ̀n g Đ ại ho ̣c K in h tê ́H công cụ tạo màu nền, vẽ, chỉnh sửa ảnh Hình 3.1: Giao diện chương trình thiết kế Adobe Photoshop CC - Cơng cụ lập trình Visual Studio Code: cơng cụ lập trình đơn giản, gọn nhẹ, dễ dàng cài đặt Và đặc biệt tích hợp ln git thuận lợi cho việc quản lí code Bên cạnh hỗ trợ cho người dùng sửa lỗi - Quản lí CSDL Robo3T: ứng dụng quản lí CSDL mã nguồn mở MongoDB giúp người dùng duyệt tài liệu CSDL tạo tài liệu mới, chạy chỉnh sửa đoạn code SVTH: Hồ Thị Thúy 32 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng - Hệ quản trị CSDL MongoDB trình bày phần - Ngơn ngữ lập trình JS, HTML, CSS, NodeJS, ReactJS, Framework Bootstrap - Git phần mềm quản lý mã nguồn mở sử dụng phổ biến tồn giới, có khả chạy mơi trường Linux, Windows, MacOs Giúp lập trình viên thao tác nhanh đưa lên kho code lấy xuống nhanh qua nhiều bước Giúp người quản lý kho giám sát phân bổ công việc ́ uê project hiệu ́H - Start UML công cụ dùng để phân tích thiết kế hệ thống hướng đối tượng Nó phần mềm mã nguồn mở, có kích thước nhỏ gọn, hỗ trợ với hầu hết ngôn ngữ in h giúp cho người dùng cảm thấy thoải mái xem tê lập trình phổ biến Bên cạnh đó, cịn thể đồ thiết kế sinh động ̣c K 3.2 Giao diện chương trình Tr ươ ̀n g Đ ại ho 3.2.1 Giao diện đăng kí Hình 3.2: Giao diện đăng kí Hình thể trang đăng kí người dùng chưa có tài khoản Khi đăng kí người dùng phải điền đầy đủ trường phải vượt qua điều kiện thành cơng Nếu thành cơng hệ thống chuyển người dùng đến trang chủ để tiến hành lựa chọn hình thức nói chuyện Group User SVTH: Hồ Thị Thúy 33 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng ́ in h tê ́H uê 3.2.2 Giao diện đăng nhập ̣c K Hình 3.3: Giao diện đăng nhập Để đăng nhập người dùng phải điền đầy đủ xác thơng tin email ho mật Sau nhấp vào nút Sign In để truy cập vào trang chủ chat để thực Tr ươ ̀n g Đ ại chức Hình 3.4: Lỗi đăng nhập Người dùng nhập sai mật email hệ thống thơng báo lỗi SVTH: Hồ Thị Thúy 34 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng ́ tê ́H uê 3.2.3 Giao diện tổng quan chương trình h Hình 3.5: Giao diện chương trình chưa có trò chuyện Tr ươ ̀n g Đ ại ho ̣c K in 3.2.4 Giao diện trị chuyện Hình 3.6: Giao diện trò chuyện Group User SVTH: Hồ Thị Thúy 35 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Thiết kế giao diện trị chuyện gồm có phần chính: - Phía bên trái nơi hiển thị hội thoại - Phía bên phải nơi hiển thị người online - Ở khơng gian để người dùng trị chuyện Bên cạnh người dùng cịn nhìn thấy số nội dung khác như: ́ uê - Tên người dùng ́H - Avatar người dùng tê - Thời gian online người khác h 3.3 Vận hành hệ thống in Sau hoàn thành ứng dụng người quản lí tiến hành khởi động chương trình ̣c K Do MongoDB cài đặt khởi động ngầm nên để chạy chương trình gồm bước sau: ho - Bước 1: Chọn tới thư mục Server Visual Studio Code chạy lệnh “npm run ại dev” Tr ươ ̀n g Đ - Bước 2: Visual Studio Code mở Terminal app gõ lệnh “npm start” Hình 3.7: Khởi chạy chương trình SVTH: Hồ Thị Thúy 36 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng Sau kết thúc bước Visual Studio Code địa truy cập vào ứng dụng chạy local là: http://localhost:3000/ Khi kích chuột vào đường dẫn hệ thống đưa ta đến trang chủ ứng dụng người dùng tiến hành ́ Tr ươ ̀n g Đ ại ho ̣c K in h tê ́H uê hoạt động ứng dụng SVTH: Hồ Thị Thúy 37 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng KẾT LUẬN Kết đạt Nắm bắt nhu cầu trao đổi thơng tin nhanh chóng, dễ dàng, an tồn bảo mật, khơng gây ảnh hưởng đến cơng việc chung, thay bổ trợ cho phương thức trao đổi truyền thống từ ứng dụng chat đời Đồng thời, thời đại công nghệ thông tin bùng nổ, việc áp dụng kiến thức công nghệ vào ́ uê ứng dụng, lĩnh vực nghiên cứu thực hành em hoàn thành xong đề tài: ́H “Xây dựng ứng dụng chat dựa tảng ReactJS NodeJS” đạt tê số kết sau: - Ứng dụng có giao diện thân thiện, bắt mắt người dùng in h - Tốc độ phản hồi thông tin tốt ̣c K - Nâng cao kỹ sử dụng ngơn ngữ lập trình thân - Đáp ứng tính bảo mật, nhu cầu trị chuyện nhóm cá nhân ho Hạn chế đề tài ại Mặc dù thân cố gắng để hồn thành đề tài tốt cách Đ khơng thể tránh khỏi sai sót nhược điểm tồn tại: g - Chưa thực chức đính kèm gửi file cho người dùng ươ ̀n - Chưa deploy ứng dụng lên web server Tr - Giao diện đơn giản chưa đáp ứng tiêu chí thiết kế đại - Chưa tối ưu luồng kiện API tương tác Front-end Backend sở liệu Hướng phát triển đề tài Nhìn tổng quát ứng dụng hồn tồn trơng cậy vào tương lai hồn hảo để phục vụ chu đáo giúp cho người dùng thoải mái tin cậy Do thời gian tới có nhiều thời gian em SVTH: Hồ Thị Thúy 38 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng tiếp tục nghiên cứu đồng thời khắc phục hạn chế tồn phát triển mạnh mẽ hồn hảo Kinh nghiệm thân Sau kết thúc tập cuối khóa Desvlab em học hỏi thêm nhiều thứ Đến đây, em sử dụng kiến thức dã học để áp dụng vào làm thực tiễn Không mà em học hỏi thêm nhiều thứ kỹ ́ số ngơn ngữ lập trình Với thời gian tháng dài ́H xem ngắn em anh chị hướng dẫn tận tình đề hồn thành tốt đề tài Bên cạnh kiến thức em biết thêm môi Tr ươ ̀n g Đ ại ho ̣c K in h tê trường làm việc doanh nghiệp để mai sau tự tin xin việc làm SVTH: Hồ Thị Thúy 39 - Khóa luận tốt nghiệp GVHD: TS.Hồ Quốc Dũng TÀI LIỆU THAM KHẢO [1] “HTML quan trọng với website?” [Online] Available: https://thachpham.com/web-development/html-css/html-la-gi-va-vi-sao-no-quantrong.html [Accessed: 28-Dec-2018] [2] thachpham92, “[Học CSS] CSS vai trị website,” Thach Pham, 08-Apr-2015 ́ uê [3] “Javascript gì? Viết ứng dụng Javascript đầu tiên.” [Online] Available: ́H https://freetuts.net/javascript-la-gi-viet-ung-dung-javascript-dau-tien-263.html tê [Accessed: 28-Dec-2018] [4] “Bootstrap gì? Giới thiệu hướng dẫn cách sử dụng Bootstrap 3.” [Online] in h Available: https://www.webico.vn/bootstrap-la-gi-gioi-thieu-va-huong-dan-cach- ̣c K su-dung-bootstrap-3/ [Accessed: 28-Dec-2018] [5] “Tổng quan Node JS,” Viblo [Online] Available: https://viblo.asia/p/tong- ho quan-ve-node-js-924lJra0lPM [Accessed: 28-Dec-2018] [6] “Tìm hiểu Websocket xây dựng ứng dụng bidirectional chat,” Viblo [Online] ại Available: https://viblo.asia/p/tim-hieu-websocket-va-xay-dung-ung-dung- Đ bidirectional-chat-n7prv3aVMKod [Accessed: 28-Dec-2018] ươ ̀n g [7] “Bước đầu tìm hiểu ReactJS - Viblo.” [Online] Available: https://viblo.asia/p/buoc-dau-tim-hieu-ve-ReactJS-1VgZvwWYlAw [Accessed: Tr 28-Dec-2018] [8] “Hệ thống thời gian thực,” Wikipedia tiếng Việt 24-Sep-2015 [9] “MongoDB gì? Cơ sở liệu phi quan hệ - Viblo.” [Online] Available: https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N [Accessed: 28-Dec-2018] [10] “ndtien-khoaluan.pdf,” Google Docs [Online] Available: https://drive.google.com/file/d/1NZyTzUSbomEz7Dk9xQY7Fn53d3LDkfjF/view? usp=embed_facebook [Accessed: 31-Dec-2018] SVTH: Hồ Thị Thúy 40 - Khóa luận tốt nghiệp [11] GVHD: TS.Hồ Quốc Dũng B Nguyen, “Cách kết hợp NodeJS back-end với ReactJS front-end,” Tech Talk, 03-Oct-2017 [12] “Khóa luận Xây dựng ứng dụng webchat - Luận văn, đồ án, đề tài tốt nghiệp.” [Online] Available: http://luanvan.net.vn/luan-van/khoa-luan-xay-dung-ung-dungwebchat-52957/ [Accessed: 31-Dec-2018] [13] “React Js gì? - Fullstack Station.” [Online] Available: ́ “Người Việt dùng smartphone để vào mạng xã hội nhiều nhất.” [Online] ́H [14] uê https://fullstackstation.com/react-js-la-gi/ [Accessed: 31-Dec-2018] Available: https://dantri.com.vn/suc-manh-so/nguoi-viet-dung-smartphone-de-vao- tê mang-xa-hoi-nhieu-nhat-20170904155924916.htm [Accessed: 31-Dec-2018] h “Đồ án Xây dựng chương trình Chat hoạt động mạng LAN - Luận văn, đồ in [15] ̣c K án, đề tài tốt nghiệp.” [Online] Available: http://luanvan.net.vn/luan-van/do-anxay-dung-chuong-trinh-chat-hoat-dong-trong-mang-lan-29897/ [Accessed: 31- Tr ươ ̀n g Đ ại ho Dec-2018] SVTH: Hồ Thị Thúy 41