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Ế ́ ho ̣c K in h tê ́H uê - - Tr ươ ̀ng Đ ại KHÓA LUẬN TỐT NGHIỆP 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Ế ́ ho ̣c K in h tê ́H uê - - ại BÁO CÁO KẾT QUẢ Đ KHÓA LUẬN TỐT NGHIỆP Tr ươ ̀ng 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 ́ uê 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 ́H thời gian hồn thành khóa luận tốt nghiệp tê Đặ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 h tâm, thường xuyên theo dõi, giải đáp thắc mắc đồng thời đưa đánh giá, in nhận xét để em hồn thành khóa luận tốt nghiệp cách tốt ̣c K 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 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 ho 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 Đ luận em khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp, bổ Tr ươ ̀ng sung q thầy để em hồn thiện đề tài tốt 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 ́ uê DANH MỤC CÁC HÌNH vi ́H DANH MỤC CÁC BẢNG viii tê MỞ ĐẦU CHƯƠNG I CƠ SỞ LÍ LUẬN Ứng dụng Chat h 1.1 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 ̣c K in 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 ho 1.2 Hệ thống thời gian thực 1.5.2 Đặc điểm hệ thống thời gian thực Tr ươ ̀ng 1.5.1 1.6 Thư viện Jquery 1.7 Tổng quan Node.js .9 1.7.1 Đị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 .14 CHƯƠNG II PHÂN TÍCH, THIẾT KẾ ỨNG DỤNG CHAT NỘI BỘ 17 SVTH: Nguyễn Đình Tiến ii - Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn 2.1 Mô tả hệ thống 17 2.2 Mục tiêu hệ thống 17 2.3 Yêu cầu chung .18 2.3.1 Yêu cầu chức 18 2.3.2 Yêu cầu phi chức 18 2.4 Sơ đồ tình hệ thống 18 2.4.2 Chức đăng nhập 19 2.4.3 Chức đăng kí 21 2.4.4 Chức thao tác trang chủ User 23 2.4.5 Chức Server 24 ́H tê h in 2.5 ́ Sơ đồ tổng quát 18 uê 2.4.1 Sơ đồ (Sequence Diagram) .26 Sơ đồ đăng kí 26 2.5.2 Sơ đồ đăng nhập 27 2.5.3 Sơ đồ Chat Group 28 2.5.4 Sơ đồ Chat User .29 ại ho ̣c K 2.5.1 Mơ hình phân rã chức 30 2.7 Mơ hình liệu ứng dụng 31 Đ 2.6 Tr ươ ̀ng CHƯƠNG III CÀI ĐẶT VÀ ĐÁNH GIÁ 33 3.1 Cài đặt công cụ 33 3.2 Sơ đồ thuật tốn chương trình .34 3.3 Giao diện chương trình 35 3.3.1 Giao diện đăng nhập 35 3.3.2 Giao diện đăng ký 36 3.3.3 Giao diện 37 3.3.4 Cơ sở liệu ứng dụng 39 3.4 Vận hành hệ thống 40 3.5 Đánh giá kết 42 SVTH: Nguyễn Đình Tiến iii - Khóa luận tốt nghiệp 3.5.1 GVHD: ThS Lê Viết Mẫn Những điểm đạt 42 KẾT LUẬN 43 ́ Tr ươ ̀ng Đ ại ho ̣c K in h tê ́H uê TÀI LIỆU THAM KHẢO 44 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ên kí hiệu viết tắt ́ Ký hiệu viết tắt uê T API Application Program Interface HTML HyperText Markup Language CSS Cascading Style Sheets RDBMS Relational Database Management System ACID Atomicity, Consistency, Isolation, Durability DOM LAN RDBMS 10 VCS ̣c K in h tê ́H Local Network Area Relation Database Management System Version Control System Tr ươ ̀ng Đ ại ho Document Object Model 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 ́ uê Hình Synchronous Asynchronous 10 Hình Event-driven .11 ́H Hình Socket.IO 12 tê Hình Cơ sở liệu MongoDB 16 h Hình Sơ đồ tình tổng quát .19 in Hình 2 Sơ đồ đăng nhập 19 ̣c K Hình Sơ đồ đăng ký .21 Hình Sơ đồ thao tác trang chủ .23 ho Hình Sơ đồ thao tác server 24 Hình Sơ đồ đăng kí 26 ại Hình Sơ đồ đăng nhập .27 Đ Hình Sơ đồ Chat Group 28 Tr ươ ̀ng Hình Sơ đồ Chat User .29 Hình 10 Sơ đồ phân rã chức 30 Hình 11 Cơ sở liệu ứng dụng 31 Hình Sơ đồ thuật toán 34 Hình Giao diện đăng nhập 35 Hình 3 Giao diện đăng ký .36 Hình Giao diện 37 Hình Giao diện Chat Group .38 Hình Giao diện Chat User 39 Hình Cơ sở liệu ứng dụng 39 SVTH: Nguyễn Đình Tiến vi - Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn Hình Chạy lệnh mongod 40 Hình Chạy lệnh mongo 41 ́ Tr ươ ̀ng Đ ại ho ̣c K in h tê ́H uê Hình 10 Khởi chạy Server 42 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 ́ uê Bảng 2 Chức đăng nhập User 19 ́H Bảng Chức đăng kí User 21 Bảng Thao tác trang chủ 23 tê Bảng Thao tác Server 24 h Bảng Document User 31 in Bảng Document Room 32 Tr ươ ̀ng Đ ại ho ̣c K Bảng Document Chat 32 SVTH: Nguyễn Đình Tiến viii - 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 tê ́H Thất bại in h Thành công ại Chọn Group Đ Hiển thị tên người dùng ho ̣c K Hiển thị trang chủ Tr ươ ̀ng Xem tin nhắn Chọn User 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 30 - Khóa luận tốt nghiệp 2.7 GVHD: ThS Lê Viết Mẫn Mơ hình liệu ứng dụng Hình 11 Cơ sở liệu ứng dụng ́ uê Contact Collection Room Document { msgFrom:“” msgTo:“” msg:“” room:“” createdOn:“” } ại ho ̣c K in h { name1:“” name2:“” lastActive:“” createdOn:“” } ́H { userId:“” username:“” email:“” password:“” createdOn:“” } Chat Document tê User Document Đ Hình 2.11 CSDL thiết kế MongoDB nên ta có collection có tên Tr ươ ̀ng Contact chứa Document (User, Room, Chat) - Document User (Thông tin người dùng) 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 31 - Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn createdOn - Ngày tạo String Document Room (Thông tin Room) ́ Giải thích Kiểu liệu ́H Tên Key uê Bảng Document Room Tên thứ name2 Tên thứ lastActive Hoạt động lần cuối createdOn Ngày tạo String String String String ho ̣c K in h tê name1 - Document Chat (Thông tin tin nhắn) Đ Tên Key ại Bảng Document Chat Giải thích Kiểu liệu Tin nhắn gửi từ String msgTo 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 ươ ̀ng msgFrom SVTH: Nguyễn Đình Tiến 32 - Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn 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ụ 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 hồn thiện website dạng tĩnh tê Những tính Adobe Muse: + Giúp chuyển trực tiếp thiết kế sang web chạy mà không cần sử dụng code h hay không cần đến jquery, css in + Có thể import trực tiếp từ photoshop ilustrator ̣c K + Demo phần logic, phần chức ứng dụng diễn 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 - ho lượng tốt Đ Đây cơng cụ lập trình hỗ trợ cho lập trình viên chức debug, kèm với Git có syntax highlighting, tự hồn thành mã thơng mình, snippets, cải Tr ươ ̀ng tiến mã nguồn - Quản lí CSDL Robo 3T 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 33 - Khóa luận tốt nghiệp 3.2 GVHD: ThS Lê Viết Mẫn Sơ đồ thuật toán chương trình ́ Giao diện đăng nhập Nhập Email, password Lựa chọn Đăng nhập Đăng kí Giao diện đăng kí Nhập Email,usename password Đúng Chế độ nhắn tin Sai Kiểm tra tài khoản Đúng User Đ ại Nhóm Thơng báo lỗi Hiển thị trang chủ ho Kiểm tra tài khoản ̣c K in h Sai tê ́H Thông báo lỗi uê Truy câp localhost:5000 Nhập tin nhắn, gửi file Tr ươ ̀ng Chon người dùng Nhập tin nhắn, gửi file Gửi Gửi Kết thúc Hình Sơ đồ thuật tốn SVTH: Nguyễn Đình Tiến 34 - 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 ho ̣c K in h tê ́H uê Hình Giao diện đăng nhập Đ Hình 3.2 thể trang đăng nhập, người dùng truy cập vào đường dẫn Tr ươ ̀ng http://localhost:5000 giao diện đăng nhập xuất Ở giao diện đăng nhập có hai 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 35 - Khóa luận tốt nghiệp 3.3.2 GVHD: ThS Lê Viết Mẫn Giao diện đăng ký ́ Tr ươ ̀ng Đ ại ho ̣c K in 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ườ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 36 - 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 ươ ̀ng Đ ại ho ̣c K in h tê ́H 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 37 - 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 in h Hình 3.5 Sau bấm vào Group: ̣c K - 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 ho - Khi có người dùng khác nhập tin nhắn góc phải xuất thơng báo Tr ươ ̀ng Đ ại "đang nhập" SVTH: Nguyễn Đình Tiến 38 - Khóa luận tốt nghiệp GVHD: ThS Lê Viết Mẫn ́ ho Hình 3.6 Giao diện Chat User ̣c K in h tê ́H uê Hình Giao diện Chat User - Người dùng thấy nội dung tin nhắn, gửi, thời gian gửi Đ ạ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 Tr ươ ̀ng "đang nhập" 3.3.4 Cơ sở liệu ứng dụng Hình Cơ sở liệu ứng dụng SVTH: Nguyễn Đình Tiến 39 - in h tê ́H ́ GVHD: ThS Lê Viết Mẫn uê Khóa luận tốt nghiệp ̣c K 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 Vận hành hệ thống ho 3.4 - Đ gồm bước sau: ại Sau hoàn thành ứng dụng, người quản lí tiến hành khởi động chương trình Bước 1: Vào thư mục cài đặt MongoDB khởi chạy CSDL, đường dẫn mặc định Tr ươ ̀ng (C:/Program Files\MongoDB\Server\3.6\bin) - Bước 2: Mở hai cửa sổ Command prompt từ thư mục bin chạy câu lệnh mongod mongo Hình Chạy lệnh mongod SVTH: Nguyễn Đình Tiến 40 - Tr ươ ̀ng Đ ại ho Hình Chạy lệnh mongo ̣c K in h tê ́H ́ GVHD: ThS Lê Viết Mẫn uê Khóa luận tốt nghiệp SVTH: Nguyễn Đình Tiến 41 - 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” ́ Đánh giá kết 3.5.1 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 ươ ̀ng - Những điểm đạt Đ 3.5 ại ho ̣c K in h tê ́H uê Hình 10 Khởi chạy Server trực 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 42 - 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 trình thực hồn thành khóa luận “Xây dựng ứng dụng Chat nộ bộ”, ́ 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ê thân tác giả đạt số kết sau: tê 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 in - h để xây dựng ứng dụng ̣c K + Ứng dụng có giao diện thân thiên, thuận tiên cho người sử dụng + Người dùng lựa chọn thao tác (nhắn tin, gửi file) cách ho nhanh chóng dễ dàng Ngồi kết đạt bên cạnh cịn tồn thiếu sót sau: Giao diện cị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 ươ ̀ng Đ ại - 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 43 - 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 ́ uê http://vietjack.com/nodejs/index.jsp ́H [2] Hệ quản trị sở liệu NoSQL MongoDB tê http://expressmagazine.net/development/2330/dinh-nghia-mongodb-nosql-la-gi h https://viblo.asia/p/so-sanh-mongodb-va-mysql-Qbq5QWWEZD8 Tr ươ ̀ng Đ ại ho ̣c K in https://toidicodedao.com/2015/09/24/nosql-co-gi-hay-ho-tong-quan-ve-nosql-phan-1/ SVTH: Nguyễn Đình Tiến 44