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 1

Đề tài: : 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
GVHD: Th.S Nguyễn Trịnh Đơng

Nhóm sinh viên thực hiện:

STT

Tên

MSSV

1

Nguyễn Duy Linh

20521533

2

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 hiện Đồ án 1 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 và khoa cơng nghệ
phần mềm đã tạo điều kiện cho nhóm có cơ hội học tập và làm việc với môn học này,
luôn tạo điều kiện tốt nhất để sinh viên có thể hồn thành tốt q trình học tại trường nói
chung và trong mơn học này 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 trong Đồ án 1. Thầy đã tận tình hướng dẫn, chỉ
bảo với những phân tích định hướng rõ ràng cho nhóm trong suốt q trình thực hiện đề
tài, là tiền đề để nhóm có thể hoàn thành đề tài đúng hạn. Thầy cũng tạo điều kiện thuận
lợi nhất có thể với các tài liệu cần thiết liên quan, giải đáp thắc mắc tại lớp khi các nhóm
gặp khó khăn.
Nhóm rất mong nhận sự góp ý từ phía Thầy nhằm giúp nhóm rút ra những kinh
nghiệm quý báu, hoàn thiện vốn kiến thức đã học tập để là hành trang cho nhóm có thể
tiếp tục hoàn thành những đồ án tiếp theo trong 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................................................................................................................................................................

2. Mục tiêu.........................................................................................................................................................................

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT......................................................................................................................................

1. React JS..........................................................................................................................................................................

1.1. Tổng quan lịch sử.................................................................................................................................................

1.2 Thành phần của React JS.......................................................................................................................................

1.3 Một số đặc điểm nổi bật.........................................................................................................................................

1.4 Ưu và nhược điểm của React JS:...........................................................................................................................

a. Ưu điểm:............................................................................................................................................................

b. Nhược điểm:......................................................................................................................................................

2. Ngơn ngữ lập trình JavaScript........................................................................................................................................

2.1 Tổng quan..............................................................................................................................................................

2.2 Tại sao ReactJS?....................................................................................................................................................

3. Hệ quản trị cơ sở dữ liệu Firebase..................................................................................................................................

3.1 Firebase là gì?........................................................................................................................................................

3.2 Firestore database..................................................................................................................................................

○ Firebase Authentication............................................................................................................................................

○ Firebase Hosting.......................................................................................................................................................

○ Ưu điểm của Firebase...............................................................................................................................................

○ Nhược điểm của Firebase.........................................................................................................................................

4. Visual Studio Code.........................................................................................................................................................

4.1 Kiến trúc đa nền 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ữ và khả năng tùy chỉnh:...........................................................................................................

4.5 Tích hợp Git và quản lý phiên bản:........................................................................................................................

4.6 Giao diện người dùng đơn giản và linh hoạt:.........................................................................................................

5. 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 và tương thích đa nền tảng:.................................................................................................................


5.4 Tích hợp với React và Angular:.............................................................................................................................

6. Jitsi.................................................................................................................................................................................

6.1 Mã nguồn mở:........................................................................................................................................................

6.2 Họp trực tuyến và truyền phát video:.....................................................................................................................

6.3 Bảo mật và riêng tư:...............................................................................................................................................

6.4 Tích hợp dễ dàng:..................................................................................................................................................

CHƯƠNG 3. XÂY DỰNG HỆ THỐNG...............................................................................................................................

1. 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.....................................................................................................................................................

2. Mơ tả màn hình.............................................................................................................................................................

2.1 Danh sách màn hình...............................................................................................................................................

2.2 Mơ tả chi tiết các màn 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.......................................................................................................................

3. Sơ đồ lớp.......................................................................................................................................................................

CHƯƠNG 4. KẾT LUẬN......................................................................................................................................................

1. Kết quả đạt được............................................................................................................................................................
2. Ưu điểm.........................................................................................................................................................................

3. Nhược điểm và giải pháp................................................................................................................................................

TÀI LIỆU THAM KHẢO......................................................................................................................................................


CHƯƠNG 1: GIỚI THIỆU CHUNG
1. Giới thiệu chung
Trong thời đại công nghệ số ngày nay, đặc biệt là sai đại dịch covid-19 vừa
qua, việc kết nối, giao tiếp và điều hành trực tuyến đóng vai trị rất quan trọng đối
với các doanh nghiệp. Hệ thống điều hành doanh nghiệp mạnh mẽ và tích hợp

video call sẽ giúp tạo ra mơi trường làm việc hiệu quả và thuận lợi cho các thành
viên trong tổ chức.
Với mục tiêu này, nhóm đã quyết định sử dụng Jitsi, một nền tảng mã
nguồn mở cho phép chúng ta tận dụng sức mạnh của công nghệ WebRTC để cung
cấp trải nghiệm video call chất lượng cao, bảo mật và linh hoạt. Đồ án của chúng
tôi tập trung vào việc xây dựng một hệ thống điều hành doanh nghiệp đáng tin cậy
và tùy biến, đồng thời tích hợp các tính năng video call của Jitsi để đáp ứng nhu
cầu giao tiếp trực tuyến của các doanh nghiệp.
Nhóm tin rằng 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 sẽ đóng góp đáng kể vào việc nâng cao hiệu suất làm
việc và sự liên kết trong mơi trường kinh doanh. Nó sẽ là một công cụ mạnh mẽ để
tạo ra sự kết nối và giao tiếp hiệu quả giữa các thành viên trong doanh nghiệp.
Cuối cùng, nhóm xin chân thành cảm ơn sự quan tâm và hỗ trợ của quý
thầy cô. Nhóm tin rằng đồ án này có thể đóng góp một phần nhỏ vào sự phát triển
và thúc đẩy ứng dụng công nghệ thông tin trong lĩnh vực doanh nghiệp.
1. Mô tả đề tài
1.1. Lý thuyết

● Nghiên cứu về React JS và ngơn ngữ lập trình JavaScript.
● Nắm rõ các thao tác trên môi trường phát triển Web và công cụ lập
trình Visual studio code.
● Nghiên cứu và sử dụng dịch vụ cơ sở dữ liệu trên nền tảng đám mây –
Firebase.
● Nắm rõ cách thức giao tiếp với một server và tạo các tunnel để truy
cập vào server.
● Nghiên cứu cách sử dụng các thư viện giao diện như antd.
● Tìm hiểu về nền tảng mã nguồn mở Jitsi và các xây dựng server cho
nó để có thể tăng tính cá nhân hóa và bảo mật trong hệ thống.
● Tìm hiểu về 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 và hiệu quả.

1.2.

Mục tiêu
● Ứng dụng có giao diện thân thiện, dễ dùng.

1


2.

● Đáp ứng đầy đủ các chức năng của 1 hệ thống điều hành doanh nghiệp cơ
bản.
● Tích hợp được hệ thống video call vào điều hành doanh nghiệp.
● Xây dựng phân quyền động, bản tin và các biểu đồ thống kê.
Mục tiêu
Trải qua quá trình tìm hiểu và thực hiện đề tài, nhóm đã giải quyết được các vấn
đề đặt ra ban đầu, từng bước giải quyết và liên tục đặt ra những vấn đề mới để
ngày càng hoàn thiện sản phẩm. Những bước thực hiện:
●
●
●
●
●

3.

Phân tích yêu cầu bài tốn
Lựa chọn nền tảng cơng nghệ phù hợp với yêu cầu
Nghiên cứu cơ sở lý thuyết của 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 và khám phá các ứng dụng tương tự để tối ưu hóa trải nghiệm
người dùng và cải thiện các tính năng cho ứng dụng
Tổng quan về chức năng

Hình 1. Tổng quan chức năng

2


CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
1.

React JS
1.1. Tổng quan lịch sử
React là một thư viện JavaScript mã nguồn mở phổ biến thực hiện việc xem dữ liệu với
sự trợ giúp của HTML. Nó cịn được gọi là ReactJS và React.js, vì vậy đừng nhầm lẫn
nếu bạn đọc các ký hiệu khác nhau ở những nơi khác nhau. Vì nó được phát triển bởi
Facebook, nên nó cịn được gọi phổ biến là “Facebook React.js.” Hiện tại, nó được duy
trì bởi những người như Instagram, Facebook và các nhà phát triển cộng đồng quan tâm
đến thư viện.
Vì vậy, làm thế nào nó hoạt động? ReactJS hoạt động dưới dạng các khung nhìn sử dụng
hệ thống dựa trên thành phần. Các thành phần được chỉ định dưới dạng thẻ HTML tùy
chỉnh, mang lại khả năng sử dụng dễ dàng. React rất hữu ích khi bảo vệ các thành phần
bên trong hoặc luồng dữ liệu. Các thành phần con không thể bị ảnh hưởng trực tiếp với
các truy vấn bên ngoài, tạo ra một lựa chọn tốt cho việc phát triển các chế độ xem giao
diện người dùng. Nó cũng rất hiệu quả trong việc cập nhật tài liệu HTML với dữ liệu
mới, khiến nó trở thành lựa chọn hồn hảo cho ứng dụng web dựa trên dữ liệu như
Facebook hoặc Instagram. Thư viện cũng đảm bảo rằng một sự tách biệt rõ ràng được
thực hiện giữa các thành phần khác nhau, đảm bảo dễ dàng bảo trì và nâng cấp trong
tương lai.

React là một công nghệ mới khi so sánh với các công nghệ khác trên thị trường. Nó ra
đời vào năm 2011, khi Jordan Walke, một kỹ sư phần mềm tại Facebook tạo ra thư viện.
React bị ảnh hưởng bởi những thứ như XHP, một khung thành phần HTML đơn giản cho
PHP. Trường hợp sử dụng đầu tiên của React là trên newsfeed của Facebook vào năm
2011. Sau đó, nó được Instagram chọn để sử dụng trong hệ thống của họ. Theo thời gian,
React đã phát triển và Facebook đã quyết định biến nó thành mã nguồn mở vào tháng 5
năm 2013 tại JSConf US. Vào năm 2015 JSConf, React Native đã được công bố cho
phép phát triển dễ dàng với Android và iOS development. Trong cùng năm đó, React
Native được mã nguồn mở để giúp nó phát triển.:
Một số trang web tiêu biểu hiện năng được tạo nên bởi React.JS:

3


Hình 2. Một số ứng dụng nổi tiếng được viết bằng React JS
1.2 Thành phần của React JS

React.js là một thư viện JavaScript được sử dụng để xây dựng giao diện người
dùng cho ứng dụng web. Dưới đây là một số thành phần quan trọng của React.js:
● Components (Các thành phần): React.js dựa trên mơ hình thành phần, trong
đó giao diện người dùng được chia thành các thành phần độc lập. Mỗi thành
phần có thể chứa mã JavaScript, HTML và CSS riêng biệt và có khả năng tái
sử dụng.
● JSX (JavaScript XML): JSX là một phần của React.js cho phép bạn viết mã
JavaScript và HTML trong cùng một tệp tin. Nó cung cấp cú pháp giống
HTML để xây dựng các thành phần giao diện người dùng.
● Virtual DOM (DOM ảo): React.js sử dụng một DOM ảo để quản lý trạng
thái và hiệu suất của ứng dụng. DOM ảo là một bản sao của DOM thực tế và
được React.js sử dụng để so sánh và cập nhật chỉ những 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ữ dữ liệu và trạng thái
của các thành phần. Khi trạng thái thay đổi, React.js sẽ tự động cập nhật
giao diện người dùng để phản ánh các thay đổi đó.
● Props (Thuộc tính): Props (viết tắt của "properties") là các tham số được
truyền từ thành phần cha đến thành phần con. Props cho phép truyền dữ liệu
giữa các thành phần và giúp quản lý trạng thái và giao tiếp giữa chúng.

4


● Lifecycle methods (Phương thức vòng đời): React.js cung cấp các phương
thức vòng đời (lifecycle methods) cho phép bạn thực hiện các hành động
trong quá trình tồn tại và tương tác của một thành phần, chẳng hạn như khi
được tạo ra, cập nhật hoặc bị xóa khỏi DOM.
● Event handling (Xử lý sự kiện): React.js hỗ trợ xử lý sự kiện thông qua các
phương thức như onClick, onChange, và onSubmit. Bạn có thể gắn kết các
hàm xử lý sự kiện vào các thành phần và phản ứng dựa trên hành động
người dùng.
●

●

●

●

1.3 Một số đặc điểm nổi bật
ReactJS tạo ra cho bản thân nó một Dom ảo, nơi các Component được tồn tại trên
đó và việc tạo ra Dom giúp cải thiện hiệu suất làm việc tốt hơn. Khi bạn cần cập
nhật các thông tin lên Dom hoặc thay đổi gì đó, ReactJS đều có thể tính tốn trước

và thực hiện chúng. Nhờ đó mà ReactJS sẽ tránh được các thao tác cần có trên
Dom và khơng tốn thêm bất cứ hành động nào khác.
Việc viết code trở nên dễ dàng hơn bởi nó sử dụng một cú pháp đặc biệt là JSX,
cho phép trộn được giữa code HTML và JavaScript. Bên cạnh đó người dùng có
thể sử dụng đoạn code này để thêm vào hàm Render mà không cần thực hiện việc
nối chuỗi. Điều này được đánh giá là một trong những đặc tính mới cực kỳ thú vị
của ReactJS. Đồng thời, việc chuyển đổi các đoạn HTML thành các hàm khởi
động đều được thực hiện từ bộ biến đổi chính là JSX.
ReactJS có nhiều cơng cụ phát triển nhờ cài đặt thêm ứng dụng mở rộng của
Chrome chuyên sử dụng cho ReactJS. Các lập trình viên có thể debug code một
cách dễ dàng hơn, giúp bạn quan sát trực tiếp vào Virtual Dom.
Thư viện ReactJS thân thiện với SEO, được sự hỗ trợ từ các Render, trả về trình
duyệt dưới dạng khi bạn chạy ReactJS trên server và Virtual Dom.
1.4 Ưu và nhược điểm của React JS:

a. Ưu điểm:
● Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là
JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có
thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi.
Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các
hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
● Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng
dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng
hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual
DOM như thể bạn đang xem cây DOM thông thường.
5


● Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu
SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực

hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên.
Điều này thực tế là chậm. Hoặc nếu giả sử người dùng vơ hiệu hóa Javascript thì
sao? Reactjs là một thư viện component, nó có thể vừa render ở ngồi trình duyệt
sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về.
● Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì
virtual DOM được cài đặt hoàn toàn bằng JS.
● Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo
trì và sửa lỗi.

b. Nhược điểm:
● Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way
binding hay là Ajax.
● Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình
lại.
● React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là
một framework hồn chỉnh.
● Khó tiếp cận cho người mới học Web

2. Ngơn ngữ lập trình JavaScript
2.1 Tổng quan
● Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay. Javascript
được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống
động hơn. Chúng cũng đóng vai trị tương tự như một phần của website, cho phép
Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những
website động.
● Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền thân là

Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành
JavaScript.
● Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến
năm 1999 thì ECMAScript 3 được ra mắt.
● Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đồng

6


thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập trình viên.
●

●

●
●

2.2 Tại sao ReactJS?
ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó
sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX. Thơng qua JSX cho phép
nhúng code HTML và Javascript.
ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những
component độc lập. Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây
Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component
đơn giản hơn.
Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code
một cách dễ dàng hơn.
Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO. Hầu như
các JS Frameworks khơng thân thiện với các tìm kiếm mặc dù đã được cải thiện
nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp

cho SEO chuẩn hơn.

3. Hệ quản trị cơ sở dữ liệu Firebase
3.1 Firebase là gì?
Firebase chính là một dịch vụ cơ sở dữ liệu được hoạt động ở trên nền tảng đám mây
(Cloud). Đi kèm với đó là một hệ thống máy chủ mạnh mẽ của Google. Hệ thống có chức
năng chính là giúp cho người dùng có thể lập trình ứng dụng thơng qua cách đơn giản
hóa những thao tác với các cơ sở dữ liệu.
3.2 Firestore database
Firestore là một dịch vụ cơ sở dữ liệu của Firebase, được phát triển để lưu trữ và quản lý
dữ liệu cho các ứng dụng di động, web và máy chủ. Firestore sử dụng cấu trúc bộ sưu tập
và tài liệu để tổ chức dữ liệu.

○ Firebase Authentication
Hoạt động nổi trội nhất của Firebase chính là xây dựng những bước xác dụng người dùng
thơng qua Email, Facebook, Twitter, GitHub hay Google. Ngồi ra, hoạt động Firebase
Authentication cũng hỗ trợ xác thực nặc danh cho những ứng dụng. Hoạt động xác thực
của Firebase có thể giúp cho thông tin cá nhân của những người sử dụng được an toàn
hơn. Điều này cũng đảm bảo tài khoản và các thông tin cá nhân của người dùng không bị
đánh cắp.
○ Firebase Hosting
Cách thức hoạt động tiếp theo được nhắc đến là Firebase Hosting. Đây là một hoạt động
được phân phối thông qua tiêu chuẩn công nghệ bảo mật SSl từ hệ thống mạng CDN.
7


CDN chính là cụm từ viết tắt của Content Delivery Network chính là một mạng lưới máy
chủ giúp lưu giữ lại các bản sao của các nội dung tĩnh, Những nội dung tĩnh này nằm ở
bên trong website và trực tiếp phân phối đến các máy chủ PoP khác. Mạng lưới của máy
chủ CDN được thiết đặt ở khắp nơi trên thế giới. Từ máy chủ Pop – Points of Presence,

nguồn dữ liệu sẽ được gửi đi đến những người dùng cuối cùng.

Hình 3. Cấu trúc Firebase

○ Ưu điểm của Firebase
- Tốc độ cao: Firebase hỗ trợ phát triển ứng dụng với tốc độ nhanh chóng, giảm bớt
-

-

thời gian phát triển và tiếp thị ứng dụng
Đơn giản, dễ dàng trong sử dụng: Người dùng có thể tạo tài khoản Firebase bằng
tài khoản Google và cũng như sử dụng nền tảng này trong phát triển ứng dụng một
cách dễ dàng
Một nền tảng, đa dịch vụ: Firebase cung cấp đầy đủ các dịch vụ hỗ trợ phát triển
web, bạn có thể chọn database Firestore hoặc Realtime theo ý muốn
Là một phần của Google: Firebase đã được mua lại và hiện tại đang là một phần
của Google. Nó khai thác triệt để sức mạnh và các dịch vụ sẵn có của Google
Tập trung phát triển chủ yếu về giao diện người dùng: Firebase cho phép lập trình
viên tập trung chủ yếu vào phát triển phần giao diện người dùng nhờ kho Backend
mẫu phong phú đa dạng
8


- Khơng có máy chủ: Điều này giúp Firebase có khả năng tối ưu hóa về hiệu suất
-

làm việc thơng qua mở rộng cụm database
Học máy: Firebase cung cấp học máy cho lập trình viên, hỗ trợ tối đa cho việc
phát triển ứng dụng

Tạo ra lưu lượng truy cập: Với khả năng hỗ trợ tạo lập các chỉ mục, Firebase giúp
nâng cao thứ hạng của ứng dụng trên bảng xếp hạng Google, từ đó tăng lượt traffic
Theo dõi lỗi: Firebase là công cụ phát triển, khắc phục lỗi tuyệt vời
Sao lưu: Firebase sao lưu thường xuyên, giúp đảm bảo tính sẵn có và bảo mật
thơng tin cho dữ liệu

○ Nhược điểm của Firebase
-

Không phải mã nguồn mở
Chỉ hoạt động trên CSDL NoSQL
Lập trình viên khơng được truy cập vào mã nguồn
Truy vấn chậm
Phạm vi hoạt động bị hạn chế ở một vài quốc gia
Một vài dịch vụ cần trả phí, chi phí dành cho Firebase tương đối lớn và khơng ổn
định
Thiếu Dedicated Servers và cả hợp đồng doanh nghiệp

4. Visual Studio Code
Visual Studio Code (VS Code) là một trình biên tập mã nguồn mở và đa nền tảng được
phát triển bởi Microsoft. Nó được thiết kế để mang lại trải nghiệm tốt nhất cho các nhà
phát triển khi làm việc với các ngơn ngữ lập trình khác nhau. Dưới đây là một số mục
riêng biệt trình bày về cơ sở lý thuyết của Visual Studio Code:
4.1 Kiến trúc đa nền tảng:
Visual Studio Code được xây dựng trên công nghệ Electron, một nền tảng phát triển ứng
dụng đa nền tảng sử dụng HTML, CSS và JavaScript. Điều này cho phép VS Code chạy
trên các hệ điều hành như Windows, macOS và Linux.
4.2 Mơi trường phát triển tích hợp (IDE) nhẹ:
Mặc dù Visual Studio Code được phân loại là một trình biên tập mã nguồn, nó cung cấp
nhiều tính năng mạnh mẽ của một mơi trường phát triển tích hợp (IDE). VS Code có khả

năng gợi ý mã, dị lỗi, kiểm tra cú pháp, quản lý phiên bản và nhiều tính năng khác để hỗ
trợ q trình phát triển.
4.3 Tích hợp mở rộng:
Visual Studio Code hỗ trợ một hệ thống mở rộng mạnh mẽ, cho phép người dùng cài đặt
các phần mở rộng và tiện ích mở rộng để tăng cường khả năng và chức năng của trình
9


biên tập. Các phần mở rộng có thể thêm tính năng cho các ngơn ngữ lập trình, cơng cụ
kiểm tra mã, tích hợp với dịch vụ nền tảng như Git và Docker, và nhiều tính năng khác.
4.4 Hỗ trợ đa ngôn ngữ và khả năng tùy chỉnh:
VS Code hỗ trợ nhiều ngơn ngữ lập trình phổ biến như JavaScript, Python, C++, Java và
nhiều ngơn ngữ khác. Nó cung cấp các tính năng như kiểm tra cú pháp, gợi ý mã, định
dạng tự động và hỗ trợ gỡ lỗi cho các ngơn ngữ này. Ngồi ra, người dùng có thể tùy
chỉnh VS Code bằng cách điều chỉnh cài đặt, bố cục giao diện, chủ đề và các phím tắt để
phù hợp với nhu cầu của họ.
4.5 Tích hợp Git và quản lý phiên bản:
Visual Studio Code tích hợp tốt với hệ thống quản lý phiên bản Git, cung cấp tính năng
như xem và so sánh các thay đổi, nhánh, commit và đồng bộ với kho lưu trữ từ xa. Điều
này giúp người dùng quản lý mã nguồn dễ dàng và làm việc với nhóm.
4.6 Giao diện người dùng đơn giản và linh hoạt:
VS Code có một giao diện người dùng đơn giản và trực quan, với khả năng tùy chỉnh cao.
Người dùng có thể tùy chỉnh bố cục của trình biên tập, điều chỉnh cửa sổ, thanh bên, bố
trí và chủ đề. Điều này cho phép mọi người tạo ra một trải nghiệm làm việc theo ý thích
của mình.
5. Thư viện Ant Design (antd)
Ant Design (Antd) là một bộ công cụ giao diện người dùng (UI toolkit) phát triển bởi
Alibaba Group. Nó cung cấp một tập hợp các thành phần giao diện người dùng sẵn có và
được thiết kế theo phong cách thiết kế giao diện người dùng (UI design) của Ant Design.
5.1 Phong cách thiết kế UI chia sẻ:

Antd được thiết kế với nguyên tắc "Design Language", giúp tạo ra một phong cách thiết
kế UI đồng nhất và chia sẻ giữa các ứng dụng. Điều này giúp tạo ra một trải nghiệm
người dùng thống nhất và chuyên nghiệp trên nhiều ứng dụng.
5.2 Thành phần giao diện người dùng đa dạng:
Antd cung cấp một loạt các thành phần giao diện người dùng (UI components) sẵn có
như nút (button), biểu mẫu (form), lưới (grid), bảng (table), menu và nhiều thành phần
khác. Các thành phần này được xây dựng để tái sử dụng và tương tác tốt với nhau, giúp
phát triển ứng dụng dễ dàng và nhanh chóng.
5.3 Responsive và tương thích đa nền tảng:
Antd được thiết kế để đáp ứng các yêu cầu của các ứng dụng web đa nền tảng. Giao diện
người dùng của Antd có khả năng phản hồi tự động và điều chỉnh kích thước phù hợp với
các thiết bị và màn hình khác nhau. Nó cũng tương thích với các trình duyệt phổ biến như
Chrome, Firefox, Safari và Edge.

10


5.4 Tích hợp với React và Angular:
Antd được xây dựng để tích hợp tốt với các framework phát triển web như React và
Angular. Các thành phần Antd có thể được sử dụng trong các ứng dụng phát triển bằng
React hoặc Angular, giúp tăng tốc quá trình phát triển và tạo ra giao diện người dùng hấp
dẫn và chuyên nghiệp.
6. Jitsi
6.1 Mã nguồn mở:
Jitsi là một dự án mã nguồn mở được phát triển dưới giấy phép Apache 2.0. Điều này có
nghĩa là mã nguồn của Jitsi được cơng khai và ai cũng có thể xem, sửa đổi và phân phối
nó theo các điều khoản của giấy phép.
6.2 Họp trực tuyến và truyền phát video:
Jitsi cung cấp giải pháp họp trực tuyến đa nền tảng và có khả năng tích hợp với các ứng
dụng và trang web khác. Nó hỗ trợ các tính năng như họp nhóm, chia sẻ màn hình, trị

chuyện và gửi tin nhắn. Ngồi ra, Jitsi cũng cho phép truyền phát video trực tiếp và ghi
lại các buổi họp.
6.3 Bảo mật và riêng tư:
Jitsi chú trọng đến các vấn đề về bảo mật và riêng tư. Nó sử dụng mã hóa end-to-end để
bảo vệ nội dung của cuộc họp và không lưu trữ dữ liệu cá nhân hoặc cuộc trị chuyện.
Điều này đảm bảo rằng thơng tin của người dùng được bảo vệ và duy trì sự riêng tư.
6.4 Tích hợp dễ dàng:
Jitsi cung cấp các API và SDK (Software Development Kit) để dễ dàng tích hợp vào các
ứng dụng và trang web khác. Điều này cho phép các nhà phát triển tùy chỉnh và mở rộng
Jitsi theo nhu cầu cụ thể của họ.

CHƯƠNG 3. XÂY DỰNG HỆ THỐNG
1. Xây dựng kiến trúc hệ thống
1.1 Công nghệ sử dụng
● Ngôn ngữ: JavaScript, CSS
● UI Framework: ReactJS
● UI Design tool: Figma
● Database: Firebase
● IDE: Visual Studio Code
● Open source: Jitsi Meet

11


1.2 Kiến trúc hệ thống: Mơ hình Client-Server
- Lớp Client: Hiển thị giao diện người dùng, thông qua kết nối Internet để kết nối đến cơ
sở dữ liệu quản lý thư viện. Là nơi diễn ra các tương tác của người dùng với chương trình
như nhập, các thao tác truy xuất dữ liệu.
- Lớp Server: Quản lý và chứa toàn bộ dữ liệu của phần mềm. Đồng thời xử lý các yêu
cầu nhập/xuất được gửi xuống từ lớp Client. Ứng dụng được dùng làm lớp Server là

Firebase.

Hình 4. Kiến trúc hệ thống client server

12


1.3 Kiến trúc ứng dụng: Mơ hình MVC

Hình 5. Mơ hình MVC
Mơ hình MVC (Model-View-Controller) là một mơ hình kiến trúc phần mềm phổ biến
trong phát triển ứng dụng web. Nó giúp tách biệt logic xử lý dữ liệu (model), giao diện
người dùng (view) và điều khiển (controller) để tăng tính module, tái sử dụng và khả
năng bảo trì của ứng dụng.
Sơ đồ hoạt động của mơ hình MVC:
● Model (M): Đại diện cho dữ liệu và logic xử lý dữ liệu. Nó là nơi lưu trữ, xử lý và
truy xuất các dữ liệu liên quan đến ứng dụng. Model khơng biết gì về giao diện
người dùng hoặc điều khiển.
● View (V): Đại diện cho giao diện người dùng. Nó là phần hiển thị dữ liệu cho
người dùng và tương tác với người dùng thông qua các yêu cầu và phản hồi. View
không chứa logic xử lý dữ liệu.
● Controller (C): Đại diện cho điều khiển. Nó nhận các yêu cầu từ người dùng thông
qua View và điều phối việc xử lý của Model để trả về kết quả phù hợp. Controller
làm cầu nối giữa Model và View.
Mục đích lựa chọn mơ hình MVC:
● Tách biệt logic: Mơ hình MVC tách biệt rõ ràng giữa logic xử lý dữ liệu, giao diện

13

người dùng và điều khiển. Điều này giúp cho việc phát triển, bảo trì và mở rộng
ứng dụng trở nên dễ dàng hơn, vì mỗi phần có thể được phát triển và thay đổi độc
lập mà không ảnh hưởng tới các phần khác.
● Tính module và tái sử dụng: Mơ hình MVC khuyến khích việc tạo ra các thành
phần có khả năng tái sử dụng cao. Model, View và Controller có thể được sử dụng
lại trong các ứng dụng khác nhau hoặc trong các phần khác nhau của cùng một
ứng dụng.
● Tính linh hoạt: Mơ hình MVC cho phép thay đổi giao diện người dùng mà không
ảnh hưởng đến logic xử lý dữ liệu, và ngược lại. Điều này cho phép dễ dàng thay
đổi giao diện người dùng, áp dụng các chủ đề (themes) khác nhau hoặc phát triển
ứng dụng cho nhiều nền tảng khác nhau mà không cần thay đổi quá nhiều logic xử
lý.
● Quản lý dễ dàng: Với việc tách biệt rõ ràng giữa các phần, việc quản lý và hiểu
code trở nên dễ dàng hơn. Mơ hình MVC giúp tạo ra một cấu trúc tổ chức rõ ràng
cho dự án, giúp các nhóm phát triển làm việc cùng nhau một cách hiệu quả.
1.4 Mô tả thành phần hệ thống

STT

Thành Phần

Mô tả

1

Model

Chứa các service và class đối tượng được cung cấp
từ firebase

2

View

Chứa các thiết kế giao diện cho các màn hình.

3

Component

Chứa các thành phần có thể được tái sử dụng cho
các màn hình khác nhau.

4

Controller

Chứa các file state, event, bloc riêng biệt của các
màn hình.

5

Image

Chứa các file hình ảnh của ứng dụng.
Bảng 1. Mô tả thành phần ứng dụng

14