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 quý báu, hoà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 Giới thiệu chung 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: 4.4 Hỗ trợ đa ngôn ngữ khả tùy chỉnh: 4.5 Tích hợp Git quản lý phiên bản: 4.6 Giao diện người dùng đơn giản linh hoạt: Thư viện Ant Design (antd) 5.1 Phong cách thiết kế UI chia sẻ: 5.2 Thành phần giao diện người dùng đa dạng: 5.3 Responsive tương thích đa tảng: 5.4 Tích hợp với React Angular: Jitsi 6.1 Mã nguồn mở: 6.2 Họp trực tuyến truyền phát video: 6.3 Bảo mật riêng tư: 6.4 Tích hợp dễ dàng: CHƯƠNG XÂY DỰNG HỆ THỐNG Xây dựng kiến trúc hệ thống 1.1 Công nghệ sử dụng 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 1.3 Kiến trúc ứng dụng: Mơ hình MVC 1.4 Mô tả thành phần hệ thống 1.5 Sơ đồ use case 1.6 Mô tả use case 1.7 Đặc tả use case 1.7.1 Sign In 1.7.2 Create Account 1.7.3 Manage Account 1.7.4 Create Role 1.7.5 Manage Role 1.7.6 News 1.7.7 Video Call 1.7.8 Manage Customer 1.7.9 Manage Storage 1.7.10 Transaction 1.7.11 Manage Department 1.7.12 Make Plan 1.7.13 Department Plan 1.7.14 Employee Plan 1.7.15 Create Department Plan 1.7.16 Manage Department Plan 1.7.17 Company Plan 1.7.18 Department Report 1.7.19 Company Report 1.7.20 Personal Report 1.7.21 Search 1.7.22 Sort 1.7.23 Search By Date 1.7.24 News Details 1.7.25 Create Post 1.7.26 Edit Profile 1.7.27 My Post 1.7.28 Edit Post 1.7.29 Delete Post 1.7.30 Plan Management 1.7.30 Sign Out Mơ tả hình 2.1 Danh sách hình 2.2 Mô tả chi tiết hình 2.2.1 Màn hình Sign In 2.2.2 Màn hình Create Account 2.2.3 Màn hình Manage Account 2.2.4 Màn hình Create Role 2.2.5 Màn hình Manage Role 2.2.6 Màn hình News 2.2.7 Màn hình Video Call 2.2.8 Màn hình Manage Customer 2.2.9 Màn hình Manage Storage 2.2.10 Màn hình Transaction 2.2.11 Màn hình Manage Department 2.2.12 Màn hình Make Plan 2.2.13 Màn hình Department Plan 2.2.14 Màn hình Employee Plan 2.2.15 Màn hình Create Department Plan 2.2.16 Màn hình Manage Department Plan 2.2.17 Màn hình Company Plan 2.2.18 Màn hình Department Report 2.2.19 Màn hình Company Report 2.2.20 Màn hình Personal Report 2.2.21 Màn hình Search 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 2.2.25 Màn hình Create Post 2.2.26 Màn hình Edit Profile 2.2.27 Màn hình My Posts 2.2.28 Màn hình Edit Post 2.2.29 Màn hình Delete Post 2.2.30 Màn hình Plan Management Sơ đồ lớp CHƯƠNG KẾT LUẬN Kết đạt Ưu điểm Nhược điểm giải pháp TÀI LIỆU THAM KHẢO 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 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 hồ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