Xây dựng ứng dụng chat nội bộ

ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ ẠI H Ọ C KI N H TẾ H U Ế - - N G Đ KHÓA LUẬN TỐT NGHIỆP TR Ư Ờ XÂY DỰNG ỨNG DỤNG CHAT NỘI BỘ NGUYỄN ĐÌNH TIẾN Huế tháng 5, 2018 ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ KHOA HỆ THỐNG THÔNG TIN KINH TẾ Ọ C KI N H TẾ H U Ế - - ẠI H BÁO CÁO KẾT QUẢ N G Đ KHÓA LUẬN TỐT NGHIỆP TR Ư Ờ XÂY DỰNG ỨNG DỤNG CHAT NỘI BỘ Sinh viên thực hiện: Giảng viên hướng dẫn: Nguyễn Đình Tiến Lớp: K48B Tin Học Kinh Tế ThS Lê Viết Mẫn MSV: 14k4081148 Niên khóa: 2014-2018 Huế tháng 5, 2018 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn LỜI CÁM ƠN Để hồn thành khóa luận này, đúc kết, nghiên cứu em tháng thực tập công ty Người Quản Lý Thông Minh đồng thời dựa kiến thức học tập trương Đại học Kinh Tế Huế suốt năm vừa qua Với lòng biết ơn chân thành, em xin gửi đến q thầy giáo khoa Hệ thống thơng tin Kinh tế - Đại học Kinh tế Huế, với gia đình, bạn bè giúp đỡ động viên U Ế thời gian hồn thành khóa luận tốt nghiệp H Đặc biệt, em xin gửi lời cám ơn đến thầy Lê Viết Mẫn, người tận tình hướng dẫn, quan TẾ tâm, thường xuyên theo dõi, giải đáp thắc mắc đồng thời đưa đánh giá, N H nhận xét để em hồn thành khóa luận tốt nghiệp cách tốt KI Tiếp theo, em xin gửi lời cám ơn đến công ty Người Quản Lý Thông Minh tạo điều Ọ C kiện cho em tham gia thực tập, tìm hiểu thực tiễn Cám ơn anh chị công ty H truyền đạt kinh nghiệm quý báu suốt thời gian thực tập vừa qua ẠI Vì kiến thức thân lực hạn chế, q trình thực tập, hồn thiện khóa G Đ luận em khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp, bổ Ờ N sung q thầy để em hồn thiện đề tài tốt TR Ư Xin chân thành cám ơn ! Huế ,tháng năm 2018 Sinh viên Nguyễn Đình Tiến SVTH: Nguyễn Đình Tiến i Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn MỤC LỤC LỜI CÁM ƠN i MỤC LỤC ii DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT v DANH MỤC CÁC HÌNH vi DANH MỤC CÁC BẢNG viii MỞ ĐẦU U Ứng dụng Chat H 1.1 Ế CHƯƠNG I CƠ SỞ LÍ LUẬN Một số khái niệm liên quan 1.1.2 Thực trạng sử dụng ứng dụng Chat 1.1.3 Những yêu cầu, chức cần thiết xây dựng ứng dụng Chat nội KI N H TẾ 1.1.1 HTML CSS 1.3 Ngơn ngữ lập trình Javascript 1.4 Framework Bootstrap 1.5 Tổng quan ứng dụng thời gian thực (Realtime) Đ ẠI H Ọ C 1.2 Hệ thống thời gian thực 1.5.2 Đặc điểm hệ thống thời gian thực N G 1.5.1 Thư viện Jquery 1.7 Tổng quan Node.js 1.7.1 TR Ư Ờ 1.6 Định nghĩa 1.7.2 Một số khái niệm liên quan đến Node.js 1.7.3 Các tính vượt trội Node.js 11 1.7.4 Module Node.js: 12 1.8 Hệ quản trị sở liệu NoSQL MongoDB 13 CHƯƠNG II PHÂN TÍCH, THIẾT KẾ ỨNG DỤNG CHAT NỘI BỘ 17 2.1 Mô tả hệ thống 17 2.2 Mục tiêu hệ thống 17 SVTH: Nguyễn Đình Tiến ii Khóa luận tốt nghiệp 2.3 GVHD: ThS Lê Viết Mẫn Yêu cầu chung 17 2.3.1 Yêu cầu chức 17 2.3.2 Yêu cầu phi chức 18 2.4 Sơ đồ tình hệ thống 18 Sơ đồ tổng quát 18 2.4.2 Chức đăng nhập 19 2.4.3 Chức đăng kí 20 2.4.4 Chức thao tác trang chủ User 22 2.4.5 Chức Server 23 U H Sơ đồ (Sequence Diagram) 25 TẾ 2.5 Ế 2.4.1 Sơ đồ đăng kí 25 2.5.2 Sơ đồ đăng nhập 26 2.5.3 Sơ đồ Chat Group 27 2.5.4 Sơ đồ Chat User 28 Ọ C KI N H 2.5.1 Mơ hình phân rã chức 29 2.7 Mơ hình liệu ứng dụng 30 ẠI H 2.6 Đ CHƯƠNG III CÀI ĐẶT VÀ ĐÁNH GIÁ 32 Cài đặt công cụ 32 3.2 Sơ đồ thuật tốn chương trình 33 3.3 Giao diện chương trình 34 3.3.1 TR Ư Ờ N G 3.1 Giao diện đăng nhập 34 3.3.2 Giao diện đăng ký 35 3.3.3 Giao diện 36 3.3.4 Cơ sở liệu ứng dụng 38 3.4 Vận hành hệ thống 38 3.5 Đánh giá kết 40 3.5.1 Những điểm đạt 40 KẾT LUẬN 41 SVTH: Nguyễn Đình Tiến iii Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn TR Ư Ờ N G Đ ẠI H Ọ C KI N H TẾ H U Ế TÀI LIỆU THAM KHẢO 42 SVTH: Nguyễn Đình Tiến iv Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT T Ký hiệu viết tắt Tên kí hiệu viết tắt API Application Program Interface HTML HyperText Markup Language CSS Cascading Style Sheets RDBMS Relational Database Management System ACID Atomicity, Consistency, Isolation, Durability DOM Document Object Model LAN Local Network Area RDBMS 10 VCS KI N H TẾ H U Ế Version Control System TR Ư Ờ N G Đ ẠI H Ọ C Relation Database Management System SVTH: Nguyễn Đình Tiến v Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn DANH MỤC CÁC HÌNH Hình 1 Khảo sát ứng dụng nhắn tin Việt Nam Hình Synchronous Asynchronous 10 Hình Event-driven 11 Hình Socket.IO 12 Hình Cơ sở liệu MongoDB 16 Ế Hình Sơ đồ tình tổng quát 18 H U Hình 2 Sơ đồ đăng nhập 19 TẾ Hình Sơ đồ đăng ký 20 N H Hình Sơ đồ thao tác trang chủ 22 Hình Sơ đồ thao tác server 23 KI Hình Sơ đồ đăng kí 25 Ọ C Hình Sơ đồ đăng nhập 26 H Hình Sơ đồ Chat Group 27 Đ ẠI Hình Sơ đồ Chat User 28 G Hình 10 Sơ đồ phân rã chức 29 Ờ N Hình 11 Cơ sở liệu ứng dụng 30 Ư Hình Sơ đồ thuật tốn 33 TR Hình Giao diện đăng nhập 34 Hình 3 Giao diện đăng ký 35 Hình Giao diện 36 Hình Giao diện Chat Group 37 Hình Giao diện Chat User 37 Hình Cơ sở liệu ứng dụng 38 Hình Chạy lệnh mongod 39 Hình Chạy lệnh mongo 39 SVTH: Nguyễn Đình Tiến vi Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn TR Ư Ờ N G Đ ẠI H Ọ C KI N H TẾ H U Ế Hình 10 Khởi chạy Server 40 SVTH: Nguyễn Đình Tiến vii Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn DANH MỤC CÁC BẢNG Bảng 1 So sánh Synchronous Asynchronous 10 Bảng So sánh RDBMS NoSQL 14 Bảng Các tác nhân hệ thống 18 Bảng 2 Chức đăng nhập User 19 Bảng Chức đăng kí User 21 U Ế Bảng Thao tác trang chủ 22 H Bảng Thao tác Server 24 TẾ Bảng Document User 30 N H Bảng Document Room 31 TR Ư Ờ N G Đ ẠI H Ọ C KI Bảng Document Chat 31 SVTH: Nguyễn Đình Tiến viii Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn Sơ đồ Chat User Đăng nhập Nội dung Chat User Ế User Danh sách người dùng U Gửi thông tin đăng nhập Ọ C KI N H TẾ Thêm user vào danh sách H 2.5.4 Chọn Chat riêng Hiển thị nội dung Chat User TR Ư Ờ N G Đ ẠI H Hiển thị danh sách người dùng hệ thống Hình Sơ đồ Chat User Khi người dùng truy cập vào hệ thống, giao diện đăng nhập xuất hiện, sau người dùng nhập thông tin hợp lệ, hệ thống chuyển người dùng đến trang chủ Tại người dùng chọn tính Chat riêng lúc nội dung tin nhắn phần nhập thơng tin xuất Người dùng tham gia nhắn tin riêng với người dùng khác có hệ thống, đồng thời gửi tài liệu tải tài liệu riêng người dùng SVTH: Nguyễn Đình Tiến 28 Khóa luận tốt nghiệp 2.6 GVHD: ThS Lê Viết Mẫn Mơ hình phân rã chức Đăng nhập hệ thống H U Ế Thất bại N H TẾ Thành công Chọn User G Đ ẠI Chọn Group Hiển thị tên người dùng H Ọ C KI Hiển thị trang chủ TR Ư Ờ N Xem tin nhắn Thống kê số lượng người dùng Đăng xuất Xem tin nhắn Gửi tin nhắn Gửi tin nhắn Gửi tài liệu Gửi tài liệu Tải tài liệu Tải tài liệu Hình 10 Sơ đồ phân rã chức SVTH: Nguyễn Đình Tiến 29 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn Mơ hình liệu ứng dụng 2.7 Hình 11 Cơ sở liệu ứng dụng Contact Collection { name1:“” name2:“” lastActive:“” createdOn:“” } { msgFrom:“” msgTo:“” msg:“” room:“” createdOn:“” } H U Ế Chat Document Đ ẠI H Ọ C KI N H { userId:“” username:“” email:“” password:“” createdOn:“” } Room Document TẾ User Document G Hình 2.11 CSDL thiết kế MongoDB nên ta có collection có tên Ờ N Contact chứa Document (User, Room, Chat) Ư Document User (Thông tin người dùng) TR - Bảng Document User Tên Key Giải thích Kiểu liệu userId Mã người dùng String username Tên người dùng String email Email người dùng String password Mật String SVTH: Nguyễn Đình Tiến 30 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn Ngày tạo createdOn - String Document Room (Thông tin Room) Bảng Document Room Giải thích Tên thứ name2 Tên thứ lastActive Hoạt động lần cuối createdOn Ngày tạo String H U Ế name1 Kiểu liệu String String String H Document Chat (Thông tin tin nhắn) ẠI - Ọ C KI N H TẾ Tên Key N Tên Key G Đ Bảng Document Chat Giải thích Kiểu liệu Tin nhắn gửi từ String Tin nhắn gửi tới String msg Nội dung tin nhắn String room Phòng (User,Group) String createdOn Ngày tạo String Ư TR msgTo Ờ msgFrom SVTH: Nguyễn Đình Tiến 31 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn CHƯƠNG III CÀI ĐẶT VÀ ĐÁNH GIÁ Cài đặt công cụ 3.1 Đề tài sử dụng công cụ sau để xây dựng ứng dụng Chat nội bộ: - Thiết kế giao diện demo Adobe Muse Adobe Muse phần mềm tích hợp nhiều chức sẵn có cho người thiết kế, người thiết kế hồn tồn khơng biết code (HTML CSS) hồn thiện website dạng tĩnh U Ế Những tính Adobe Muse: H + Giúp chuyển trực tiếp thiết kế sang web chạy mà không cần sử dụng code TẾ hay không cần đến jquery, css N H + Có thể import trực tiếp từ photoshop ilustrator KI + Demo phần logic, phần chức ứng dụng diễn Ọ C nào, thay đổi logic, cách hiển thị để có sản phẩm hồn hảo, đạt chất Cơng cụ lập trình Visual Studio Code ẠI - H lượng tốt G Đ Đây công cụ lập trình hỗ trợ cho lập trình viên chức debug, kèm N với Git có syntax highlighting, tự hồn thành mã thơng mình, snippets, cải Quản lí CSDL Robo 3T TR - Ư Ờ tiến mã nguồn Robo 3T ứng dụng quản lí sở liệu mã nguồn mở MongoDB giúp người dùng duyệt tài liệu sở liệu tạo tài liệu mới, chạy chỉnh sửa đoạn code - Hệ quản trị CSDL MongoDB - Ngôn ngữ lập trình Javascrip, HTML, CSS, Framework Bootstrap - Quản lí kiểm tra mã nguồn Git Git hệ thống VCS (Version Control System) dùng để quản lý kiểm tra phiên mã nguồn khác trình phát triển mã nguồn SVTH: Nguyễn Đình Tiến 32 Khóa luận tốt nghiệp 3.2 GVHD: ThS Lê Viết Mẫn Sơ đồ thuật tốn chương trình Truy câp localhost:5000 Giao diện đăng nhập Lựa chọn Đăng kí Nhập Email,usename password Giao diện đăng kí TẾ Đăng nhập H Nhập Email, password U Ế Thông báo lỗi N H Sai Thông báo lỗi Ọ C KI Kiểm tra tài khoản Hiển thị trang chủ Kiểm tra tài khoản Đúng ẠI H Đúng Sai Chế độ nhắn tin User Chon người dùng Nhập tin nhắn, gửi file Gửi Gửi TR Ư Ờ N Nhập tin nhắn, gửi file G Đ Nhóm Kết thúc Hình Sơ đồ thuật tốn SVTH: Nguyễn Đình Tiến 33 Khóa luận tốt nghiệp 3.3 GVHD: ThS Lê Viết Mẫn Giao diện chương trình 3.3.1 Giao diện đăng nhập Đ ẠI H Ọ C KI N H TẾ H U Ế Hình Giao diện đăng nhập G Hình 3.2 thể trang đăng nhập, người dùng truy cập vào đường dẫn Ờ N http://localhost:5000 giao diện đăng nhập xuất Ở giao diện đăng nhập có hai TR Ư trường nhập liệu Email Password - Nếu có tài khoản người dùng đăng nhập vào giao diện trang chủ sau điền đầy đủ thông tin nhấn vào nút Login - Nếu người dùng nhập Email tài khoản khơng xuất thơng báo "Khơng tìm thấy tài khoản, kiểm tra lại username password." - Nếu chưa có tài khoản người dùng click vào đường dẫn "Create an account" để chuyển sang trang đăng kí SVTH: Nguyễn Đình Tiến 34 Khóa luận tốt nghiệp 3.3.2 GVHD: ThS Lê Viết Mẫn Giao diện đăng ký Ờ N G Đ ẠI H Ọ C KI N H TẾ H U Ế Hình 3 Giao diện đăng ký Ư Hình 3.3 thể trang đăng kí gồm ba trường Username, Email, Password TR - Ở trường Username tên người dùng kí tự tên người dùng tồn xuất dấu "X" bên cạnh kèm theo thơng báo "Tên người dùng nên có từ kí tự trở lên" "Tên người dùng tồn tại" - Ở trường Email Email nhập không hợp lệ tồn xuất dấu "X" bên cạnh, đồng thời xuất thông báo "Vui lòng nhập Email hợp lệ" "Email tồn tại" SVTH: Nguyễn Đình Tiến 35 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn - Ở trường Password phải có từ kí tự trở lên coi hợp lệ, không hợp lệ xuất dấu "X" bên cạnh kèm theo thơng báo "mật phải có kí tự" 3.3.3 Giao diện TR Ư Ờ N G Đ ẠI H Ọ C KI N H TẾ H U Ế Hình Giao diện Hình 3.4 Người sau đăng nhập thành cơng giao diện xuất gồm: - Tên người dùng - Số lượng người "Online" thời điểm - Nút đăng xuất - Bảng bên trái hiển thị thông báo thao tác - Bảng bên phải hiển thị danh sách người dùng SVTH: Nguyễn Đình Tiến 36 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn TẾ H U Ế Hình Giao diện Chat Group N H Hình 3.5 Sau bấm vào Group: KI - Người dùng thấy nội dung tin nhắn, gửi, thời gian gửi Ọ C - Người dùng gửi tin nhắn tài liệu H - Khi có người dùng khác nhập tin nhắn góc phải xuất thông báo Đ ẠI "đang nhập" TR Ư Ờ N G Hình Giao diện Chat User SVTH: Nguyễn Đình Tiến 37 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn Hình 3.6 Giao diện Chat User - Người dùng thấy nội dung tin nhắn, gửi, thời gian gửi - Người dùng gửi tin nhắn tài liệu - Khi có người dùng khác nhập tin nhắn góc phải xuất thông báo "đang nhập" 3.3.4 Cơ sở liệu ứng dụng Ư Ờ N G Đ ẠI H Ọ C KI N H TẾ H U Ế Hình Cơ sở liệu ứng dụng TR Hình 3.7 Cơ sở liệu ứng dụng, dựa vào thao tác Robo 3T, Admin thêm, sửa, xóa người dùng nội dung chat 3.4 Vận hành hệ thống Sau hoàn thành ứng dụng, người quản lí tiến hành khởi động chương trình gồm bước sau: - Bước 1: Vào thư mục cài đặt MongoDB khởi chạy CSDL, đường dẫn mặc định (C:/Program Files\MongoDB\Server\3.6\bin) SVTH: Nguyễn Đình Tiến 38 Khóa luận tốt nghiệp - GVHD: ThS Lê Viết Mẫn Bước 2: Mở hai cửa sổ Command prompt từ thư mục bin chạy câu lệnh mongod mongo H Ọ C KI N H TẾ H U Ế Hình Chạy lệnh mongod TR Ư Ờ N G Đ ẠI Hình Chạy lệnh mongo SVTH: Nguyễn Đình Tiến 39 Khóa luận tốt nghiệp - GVHD: ThS Lê Viết Mẫn Bước 3: Tại thư mục chứa ưng dụng, mở cửa sổ Command prompt chạy câu lệnh node app, thành công xuất thông báp “Kết nối cổng 5000” “Kết nối CSDL thành cơng” G Hồn thiện chức thơng báo lỗi đăng nhập, đăng kí (có thể kiểm tra lỗi trực Ờ - Những điểm đạt N 3.5.1 Đ Đánh giá kết 3.5 ẠI H Ọ C KI N H TẾ H U Ế Hình 10 Khởi chạy Server TR Ư tiếp sau người dùng nhập) - Đáp ứng yêu cầu ứng dụng Chat - Có thể gửi tài liệu dung lương lớn - Tốc độ phản hồi nhanh 3.5.2 Những điểm chưa đạt - Giao diện đơn giản, chưa có bật - Chưa có chức quản lí Admin - Con thiếu chức tạo Group phía người dùng - Còn thiều phần quản lí thơng tin phía người dùng SVTH: Nguyễn Đình Tiến 40 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn KẾT LUẬN Nắm bắt nhu cầu trao đổi thơng tin nội bộ, nhanh chóng, dễ dàng an tồn Có thể thay bổ trợ cho phương thức trao đổi thông tin truyền thống (gọi điện, thư từ, trò chuyện trực tiếp,…), từ ứng dụng Chat nội đời Qua q trình thực hồn thành khóa luận “Xây dựng ứng dụng Chat nộ bộ”, thân tác giả đạt số kết sau: Về mặt lý luận: nghiên cứu nắm vững qui trình xây dựng ứng dụng Ế - H U Chat nội đầy đủ chức cần thiết, nghiên cứu công nghệ, ngôn ngữ Về mặt thực tiễn: Ứng dụng phát triển đạt kết sau N H - TẾ để xây dựng ứng dụng + Ứng dụng có giao diện thân thiên, thuận tiên cho người sử dụng nhanh chóng dễ dàng Ọ C KI + Người dùng lựa chọn thao tác (nhắn tin, gửi file) cách ẠI H Ngồi kết đạt bên cạnh tồn thiếu sót sau: Giao diện đơn giản, chưa có bật - Chưa có chức quản lí Admin - Người dùng chưa có chức tạo Group chat - Còn thiều phần quản lí thơng tin phía người dùng TR Ư Ờ N G Đ - Nhìn chung, việc xây dựng ứng dụng Chat nội hoàn toàn khả thi thực tiễn, phù hợp với nhu cầu trao đổi thơng tin tổ chức, tập thể Do thời gian tới, đề tài tiếp tục nghiên cứu phát triển, đồng thời giải thiếu sót, để thỏa mãn có ích người dùng SVTH: Nguyễn Đình Tiến 41 Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn TÀI LIỆU THAM KHẢO Website: [1] Node.js https://techmaster.vn/posts/33428/nodejs-la-gi-va-tai-sao-toi-nen-hoc-lap-trinh-nodejs http://vietjack.com/nodejs/index.jsp Ế [2] Hệ quản trị sở liệu NoSQL MongoDB H U http://expressmagazine.net/development/2330/dinh-nghia-mongodb-nosql-la-gi TẾ https://viblo.asia/p/so-sanh-mongodb-va-mysql-Qbq5QWWEZD8 TR Ư Ờ N G Đ ẠI H Ọ C KI N H https://toidicodedao.com/2015/09/24/nosql-co-gi-hay-ho-tong-quan-ve-nosql-phan-1/ SVTH: Nguyễn Đình Tiến 42 ... Tìm hiểu ứng dụng Chat sử dụng nội (nhóm, tập thể, tổ chức,…) Từ xây dựng ứng dụng Chat riêng phù hợp phạm vi nội - Phạm vi nghiên cứu: Các ứng dụng Chat nội Để phát triển ứng dụng Chat nội trước... nội bộ, ngồi việc trò chuyện trực tiếp sử dụng ứng dụng Chat nội giải pháp tốt 1.1.2 Thực trạng sử dụng ứng dụng Chat Từ ứng dụng Chat đời, việc nhắn tin (SMS) theo cách truyền thống gần sử dụng. .. qua xây dựng ứng dụng phù hợp với thực TR + Phương pháp lập trình: Sau tiến hành phân tích, lựa chọn ngơn ngữ lập trình Javascript, xây dựng Server Node.js CSDL Mongodb để xây dựng ứng dụng Chat