Đồ án phát triển hệ thống video call trong điều hành doanh nghiệp dựa trên nền tảng mã nguồn mở jitsi

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN CUỐI KỲ MÔN HỌC: ĐỒ ÁN Đề tài: : Phát triển hệ thống video call điều hành doanh nghiệp dựa tảng mã nguồn mở Jitsi GVHD: Th.S Nguyễn Trịnh Đơng Nhóm sinh viên thực hiện: STT Tên MSSV Nguyễn Duy Linh 20521533 Võ Đặng Thiện Khải 20520998 TP Hồ Chí Minh, 6/2023 LỜI CẢM ƠN Lời đầu tiên, nhóm thực Đồ án xin gửi lời cảm ơn đến trường Đại Học Công Nghệ Thông Tin – Đại học Quốc gia Thành phố Hồ Chí Minh khoa cơng nghệ phần mềm tạo điều kiện cho nhóm có hội học tập làm việc với mơn học này, tạo điều kiện tốt để sinh viên hồn thành tốt q trình học trường nói chung mơn học nói riêng Tiếp theo, nhóm em xin gửi lời cảm ơn chân thành tới thầy Nguyễn Trịnh Đông , giảng viên trực tiếp phụ trách hỗ trợ nhóm Đồ án Thầy tận tình hướng dẫn, bảo với phân tích định hướng rõ ràng cho nhóm suốt trình thực đề tài, tiền đề để nhóm hồn thành đề tài hạn Thầy tạo điều kiện thuận lợi với tài liệu cần thiết liên quan, giải đáp thắc mắc lớp nhóm gặp khó khăn Nhóm mong nhận góp ý từ phía Thầy nhằm giúp nhóm rút kinh nghiệm q báu, hồn thiện vốn kiến thức học tập để hành trang cho nhóm tiếp tục hồn thành đồ án tương lai Xin chân thành cảm ơn Thầy! MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CHUNG 1 Giới thiệu chung 1 Mô tả đề tài 1.1 Lý thuyết 1.2 Mục tiêu Mục tiêu CHƯƠNG 2: CƠ SỞ LÝ THUYẾT React JS 1.1 Tổng quan lịch sử 1.2 Thành phần React JS 1.3 Một số đặc điểm bật 1.4 Ưu nhược điểm React JS: a Ưu điểm: b Nhược điểm: Ngôn ngữ lập trình JavaScript 2.1 Tổng quan 2.2 Tại ReactJS? Hệ quản trị sở liệu Firebase 3.1 Firebase gì? 3.2 Firestore database ○ Firebase Authentication ○ Firebase Hosting ○ Ưu điểm Firebase ○ Nhược điểm Firebase Visual Studio Code 4.1 Kiến trúc đa tảng: 4.2 Mơi trường phát triển tích hợp (IDE) nhẹ: 4.3 Tích hợp mở rộng: 10 4.4 Hỗ trợ đa ngôn ngữ khả tùy chỉnh: 10 4.5 Tích hợp Git quản lý phiên bản: 10 4.6 Giao diện người dùng đơn giản linh hoạt: 10 Thư viện Ant Design (antd) 10 5.1 Phong cách thiết kế UI chia sẻ: 10 5.2 Thành phần giao diện người dùng đa dạng: 10 5.3 Responsive tương thích đa tảng: 11 5.4 Tích hợp với React Angular: 11 Jitsi 11 6.1 Mã nguồn mở: 11 6.2 Họp trực tuyến truyền phát video: 11 6.3 Bảo mật riêng tư: 11 6.4 Tích hợp dễ dàng: 11 CHƯƠNG XÂY DỰNG HỆ THỐNG 11 Xây dựng kiến trúc hệ thống 11 1.1 Công nghệ sử dụng 11 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 12 1.3 Kiến trúc ứng dụng: Mô hình MVC 13 1.4 Mô tả thành phần hệ thống 14 1.5 Sơ đồ use case 15 1.6 Mô tả use case 15 1.7 Đặc tả use case 18 1.7.1 Sign In 18 1.7.2 Create Account 19 1.7.3 Manage Account 20 1.7.4 Create Role 22 1.7.5 Manage Role 23 1.7.6 News 25 1.7.7 Video Call 26 1.7.8 Manage Customer 27 1.7.9 Manage Storage 29 1.7.10 Transaction 31 1.7.11 Manage Department 32 1.7.12 Make Plan 34 1.7.13 Department Plan 35 1.7.14 Employee Plan 37 1.7.15 Create Department Plan 39 1.7.16 Manage Department Plan 40 1.7.17 Company Plan 41 1.7.18 Department Report 42 1.7.19 Company Report 43 1.7.20 Personal Report 44 1.7.21 Search 45 1.7.22 Sort 46 1.7.23 Search By Date 47 1.7.24 News Details 48 1.7.25 Create Post 49 1.7.26 Edit Profile 50 1.7.27 My Post 52 1.7.28 Edit Post .53 1.7.29 Delete Post 54 1.7.30 Plan Management 55 1.7.30 Sign Out 56 Mơ tả hình 57 2.1 Danh sách hình 57 2.2 Mô tả chi tiết hình 59 2.2.1 Màn hình Sign In 59 2.2.2 Màn hình Create Account 60 2.2.3 Màn hình Manage Account 62 2.2.4 Màn hình Create Role 63 2.2.5 Màn hình Manage Role 64 2.2.6 Màn hình News 65 2.2.7 Màn hình Video Call 66 2.2.8 Màn hình Manage Customer 67 2.2.9 Màn hình Manage Storage .68 2.2.10 Màn hình Transaction 69 2.2.11 Màn hình Manage Department 70 2.2.12 Màn hình Make Plan 71 2.2.13 Màn hình Department Plan 72 2.2.14 Màn hình Employee Plan 72 2.2.15 Màn hình Create Department Plan 74 2.2.16 Màn hình Manage Department Plan 76 2.2.17 Màn hình Company Plan 77 2.2.18 Màn hình Department Report 78 2.2.19 Màn hình Company Report 79 2.2.20 Màn hình Personal Report 81 2.2.21 Màn hình Search 81 2.2.22 Màn hình Sort 82 2.2.23 Màn hình Search By Date 82 2.2.24 Màn hình News Details 82 2.2.25 Màn hình Create Post 83 2.2.26 Màn hình Edit Profile 85 2.2.27 Màn hình My Posts 87 2.2.28 Màn hình Edit Post 88 2.2.29 Màn hình Delete Post 89 2.2.30 Màn hình Plan Management 90 Sơ đồ lớp 91 CHƯƠNG KẾT LUẬN 91 Kết đạt 91 Ưu điểm 92 Nhược điểm giải pháp 92 TÀI LIỆU THAM KHẢO 93 CHƯƠNG 1: GIỚI THIỆU CHUNG Giới thiệu chung Trong thời đại công nghệ số ngày nay, đặc biệt sai đại dịch covid-19 vừa qua, việc kết nối, giao tiếp điều hành trực tuyến đóng vai trị quan trọng doanh nghiệp Hệ thống điều hành doanh nghiệp mạnh mẽ tích hợp video call giúp tạo mơi trường làm việc hiệu thuận lợi cho thành viên tổ chức Với mục tiêu này, nhóm định sử dụng Jitsi, tảng mã nguồn mở cho phép tận dụng sức mạnh công nghệ WebRTC để cung cấp trải nghiệm video call chất lượng cao, bảo mật linh hoạt Đồ án tập trung vào việc xây dựng hệ thống điều hành doanh nghiệp đáng tin cậy tùy biến, đồng thời tích hợp tính video call Jitsi để đáp ứng nhu cầu giao tiếp trực tuyến doanh nghiệp Nhóm tin hệ thống điều hành doanh nghiệp tích hợp sử dụng video call với mã nguồn mở Jitsi đóng góp đáng kể vào việc nâng cao hiệu suất làm việc liên kết mơi trường kinh doanh Nó công cụ mạnh mẽ để tạo kết nối giao tiếp hiệu thành viên doanh nghiệp Cuối cùng, nhóm xin chân thành cảm ơn quan tâm hỗ trợ q thầy Nhóm tin đồ án đóng góp phần nhỏ vào phát triển thúc đẩy ứng dụng công nghệ thông tin lĩnh vực doanh nghiệp Mô tả đề tài 1.1 Lý thuyết ● Nghiên cứu React JS ngôn ngữ lập trình JavaScript ● Nắm rõ thao tác môi trường phát triển Web công cụ lập trình Visual studio code ● Nghiên cứu sử dụng dịch vụ sở liệu tảng đám mây – Firebase ● Nắm rõ cách thức giao tiếp với server tạo tunnel để truy cập vào server ● Nghiên cứu cách sử dụng thư viện giao diện antd ● Tìm hiểu tảng mã nguồn mở Jitsi xây dựng server cho để tăng tính cá nhân hóa bảo mật hệ thống ● Tìm hiểu cách thức hoạt động doanh nghiệp để dễ dàng xây dựng hệ thống điều hành phù hợp hiệu 1.2 Mục tiêu ● Ứng dụng có giao diện thân thiện, dễ dùng ● Đáp ứng đầy đủ chức hệ thống điều hành doanh nghiệp ● Tích hợp hệ thống video call vào điều hành doanh nghiệp ● Xây dựng phân quyền động, tin biểu đồ thống kê Mục tiêu Trải qua trình tìm hiểu thực đề tài, nhóm giải vấn đề đặt ban đầu, bước giải liên tục đặt vấn đề để ngày hoàn thiện sản phẩm Những bước thực hiện: ● ● ● ● ● Phân tích yêu cầu tốn Lựa chọn tảng cơng nghệ phù hợp với yêu cầu Nghiên cứu sở lý thuyết công nghệ lựa chọn Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn Kiểm tra khám phá ứng dụng tương tự để tối ưu hóa trải nghiệm người dùng cải thiện tính cho ứng dụng Tổng quan chức Hình Tổng quan chức CHƯƠNG 2: CƠ SỞ LÝ THUYẾT React JS 1.1 Tổng quan lịch sử React thư viện JavaScript mã nguồn mở phổ biến thực việc xem liệu với trợ giúp HTML Nó cịn gọi ReactJS React.js, đừng nhầm lẫn bạn đọc ký hiệu khác nơi khác Vì phát triển Facebook, nên cịn gọi phổ biến “Facebook React.js.” Hiện tại, trì người Instagram, Facebook nhà phát triển cộng đồng quan tâm đến thư viện Vì vậy, làm hoạt động? ReactJS hoạt động dạng khung nhìn sử dụng hệ thống dựa thành phần Các thành phần định dạng thẻ HTML tùy chỉnh, mang lại khả sử dụng dễ dàng React hữu ích bảo vệ thành phần bên luồng liệu Các thành phần bị ảnh hưởng trực tiếp với truy vấn bên ngoài, tạo lựa chọn tốt cho việc phát triển chế độ xem giao diện người dùng Nó hiệu việc cập nhật tài liệu HTML với liệu mới, khiến trở thành lựa chọn hoàn hảo cho ứng dụng web dựa liệu Facebook Instagram Thư viện đảm bảo tách biệt rõ ràng thực thành phần khác nhau, đảm bảo dễ dàng bảo trì nâng cấp tương lai React công nghệ so sánh với cơng nghệ khác thị trường Nó đời vào năm 2011, Jordan Walke, kỹ sư phần mềm Facebook tạo thư viện React bị ảnh hưởng thứ XHP, khung thành phần HTML đơn giản cho PHP Trường hợp sử dụng React newsfeed Facebook vào năm 2011 Sau đó, Instagram chọn để sử dụng hệ thống họ Theo thời gian, React phát triển Facebook định biến thành mã nguồn mở vào tháng năm 2013 JSConf US Vào năm 2015 JSConf, React Native công bố cho phép phát triển dễ dàng với Android iOS development Trong năm đó, React Native mã nguồn mở để giúp phát triển.: Một số trang web tiêu biểu tạo nên React.JS: Hình Một số ứng dụng tiếng viết React JS 1.2 Thành phần React JS React.js thư viện JavaScript sử dụng để xây dựng giao diện người dùng cho ứng dụng web Dưới số thành phần quan trọng React.js: ● Components (Các thành phần): React.js dựa mơ hình thành phần, giao diện người dùng chia thành thành phần độc lập Mỗi thành phần chứa mã JavaScript, HTML CSS riêng biệt có khả tái sử dụng ● JSX (JavaScript XML): JSX phần React.js cho phép bạn viết mã JavaScript HTML tệp tin Nó cung cấp cú pháp giống HTML để xây dựng thành phần giao diện người dùng ● Virtual DOM (DOM ảo): React.js sử dụng DOM ảo để quản lý trạng thái hiệu suất ứng dụng DOM ảo DOM thực tế React.js sử dụng để so sánh cập nhật phần thay đổi thực sự, giúp cải thiện hiệu suất ● State (Trạng thái): React.js sử dụng trạng thái để lưu trữ liệu trạng thái thành phần Khi trạng thái thay đổi, React.js tự động cập nhật giao diện người dùng để phản ánh thay đổi ● Props (Thuộc tính): Props (viết tắt "properties") tham số truyền từ thành phần cha đến thành phần Props cho phép truyền liệu thành phần giúp quản lý trạng thái giao tiếp chúng viên kế hoạch 2.2.19 Màn hình Company Report STT Tên Kiểu Ràng buộc Chức 79 barImportExport Bar Chart cardStatistics CardView pieQuantityProduct Pie Chart lineQuantityTransa ction Line Chart barProductivity Progress Bar Biểu đồ cột thể tổng giá trị nhập xuất theo tháng Hiển thị thông tin thống kê tổng giá trị nhập khẩu, xuất doanh nghiệp Biểu đồ tròn thể số lượng sản phẩm kho Biểu đồ đường thể số lượng giao dịch tháng Hiển thị tiến độ làm việc kế hoạch theo phòng ban 80 2.2.20 Màn hình Personal Report STT Tên lineImportExport Kiểu Line Chart barProductivity Progress Bar Ràng buộc Chức Biểu đồ đường thể tổng giá trị nhập xuất theo tháng Hiển thị tiến độ làm việc cá nhân dự án có người tham gia 2.2.21 Màn hình Search 81 2.2.22 Màn hình Sort 2.2.23 Màn hình Search By Date 2.2.24 Màn hình News Details 82 STT Tên txtTitle Kiểu TextField txtTime TextField txtDetail TextField Ràng buộc Chức Hiển thị tiêu đề tin tức Hiển thị thời gian tạo tin tức người đăng Hiển thị chi tiết tin tức Ràng buộc Chức Nhập tiêu đề tin tức Nhập nội dung tin tức Chọn phạm vi đăng viết (cơng khai, riêng tư - phong ban, nhóm tự tạo) Chọn file (nếu có) để đính kèm với tin tức 2.2.25 Màn hình Create Post STT Tên txtTitle Kiểu TextField txtDetail TextField radioScope Radio Button iptFile Input (File) 83 btnCancel Button btnReset Button btnPost Button Thoát khỏi biểu mẫu tạo tin tức Đặt lại trường biểu mẫu để tạo tin tức Đăng tin tức lên bảng tin 84 2.2.26 Màn hình Edit Profile STT Tên Kiểu Ràng buộc Chức 85 imgAvatar Image btnCopy Button txtDisplayName TextField txtPhoneNumber TextField txtBirthday TextField btnGetLocation Button btnCancel Button btnOK Button Hiển thị ảnh đại diện người dùng Sao chép mã người dùng Hiển thị chỉnh sửa tên hiển thị người dùng Hiển thị chỉnh sửa số điện thoại người dùng Hiển thị chỉnh sửa ngày sinh người dùng Lấy địa thực người dùng Thốt biểu mẫu chỉnh sửa thơng tin cá nhân Cập nhật thông tin lên hệ thống 86 2.2.27 Màn hình My Posts STT Tên txtPost Kiểu TextField btnEdit Button btnDelete Button txtSearch TextField Ràng buộc Chức Hiển thị thông tin viết (tiêu đề, nội dung) Chỉnh sửa tin tức chọn Xố tin tức chọn Tìm kiếm, tra cứu tin tức đăng người dùng 87 2.2.28 Màn hình Edit Post STT Tên txtTitle Kiểu TextField txtContent TextField btnCancel Button btnOK Button Ràng buộc Chức Hiển thị chỉnh sửa tiêu đề viết chọn Hiển thị chỉnh sửa nội dung viết chọn Thoát khỏi biểu mẫu chỉnh sửa thông tin tin tức Cập nhật thông tin tin tức sau chỉnh sửa 88 2.2.29 Màn hình Delete Post STT Tên btnCancel Kiểu Button btnOK Button Ràng buộc Chức Thoát khỏi modal xoá viết Xác nhận xoá viết chọn 89 2.2.30 Màn hình Plan Management STT Tên txtSearchByTitle Kiểu TextField txtSearchByDate TextField tblProducts Table Ràng buộc Chức Tìm kiếm, tra cứu kế hoạch theo tiêu đề Tìm kiếm, tra cứu kế hoạch theo ngày Danh sách sản phẩm có kế hoạch giá trị nhập xuất sản phẩm 90 tblParticipants Table Danh sách người tham gia kế hoạch Sơ đồ lớp CHƯƠNG KẾT LUẬN Kết đạt ● Tạo sản phẩm hoàn chỉnh ● Áp dụng kiến thức quy trình phát triển phần mềm hướng đối tượng cách chun nghiệp ● Tìm hiểu thêm cơng nghệ kiến trúc kỹ thuật ● Hiểu nắm kiến thức ứng dụng Visual Studio Code ● Hiểu nắm cách xây dựng web với React JS ● Nắm rõ JavaScript, ReactJS, package, thiết kế giao diện web ● Hiểu cách sử dụng mã nguồn mở vận dụng chúng cách hợp lý 91 ● Phân công công việc hợp lý Ưu điểm ● Dễ dàng sử dụng ● Giao diện đẹp mắt thân thiện ● Thích hợp với nhu cầu tiện ích ● Đáp ứng phần nhu cầu công ty việc điều hành công việc ● Tận dụng mã nguồn mở ứng dụng thực tế ● Có nhiều chức khác phục vụ cho nhu cầu mục đích người dùng ● Hồn tồn miễn phí ● Có tính áp dụng thực tế cao Nhược điểm giải pháp - Hệ thống tạo kế hoạch chưa đa dạng cứng nhắc => Giải pháp: Tìm hiểu thêm cách thức tạo lập kế hoạch công ty thực tế cải tiến lại cho phù hợp - Video call chưa hoàn toàn liên kết với ứng dụng, cần phải dùng cách thức share link để gọi thành viên => Giải pháp: Nâng cấp server, cải tiến web để hồn tồn liên kết với video call - Thơng báo chưa hồn tồn đồng bộ,vẫn cịn nhiều lỗi => Giải pháp: Nghiên cứu chỉnh sửa lại cho phù hợp - Calendar chưa thực dụng => Giải pháp: cải tiến lại để dễ dàng sử dụng - Chưa mang lại trải nghiệm mượt mà => Giải pháp: Tìm cách tối ưu hệ thống - Cịn hạn chế phần hỗ trợ đa ngôn ngữ => Giải pháp: Tìm cách tối ưu, phát triển đa ngơn ngữ 92 TÀI LIỆU THAM KHẢO ReactJS Documentation: https://reactjs.org/ , lần cuối truy cập 15/06/2023 React Router DOM Documentation: https://reactrouter.com/ , lần cuối truy cập 18/06/2023 Antd Design Documentation: Ant Design - The world's second most popular React UI framework, lần cuối truy cập: 01/07/2023 Ngrok Documentation: Ngrok, lần cuối truy cập 29/06/2023 StackOverFlow: Stack Overflow - Where Developers Learn, Share, & Build Careers, lần cuối truy cập: 02/07/2023 React Quill Documentation: zenoamaro/react-quill: A Quill component for React (github.com), lần cuối truy cập 15/06/2023 Styled Components: styled-components, lần cuối truy cập 10/06/2023 React Apex Chart Document: React-ApexChart - A React Chart wrapper for ApexCharts.js, lần cuối truy cập 20/06/2023 93