Đồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video call

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.47 MB, 75 trang )

Trang 1<div class="page_container" data-page="1">

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NHA TRANG

KHOA CÔNG NGHỆ THÔNG TIN

</div>Trang 2<div class="page_container" data-page="2">

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG ỨNG DỤNG CHAT REALTIME VIDEO CALL

GVHD: TS. Phạm Thị Thu Thúy SVTH: Đặng Anh Phú

MSSV: 61134177

</div>Trang 3<div class="page_container" data-page="3">

TRƯỜNG ĐẠI HỌC NHA TRANG Khoa/Viện: Công nghệ Thông tin

PHIẾU THEO DÕI TIẾN ĐỘ VÀ ĐÁNH GIÁ ĐỒ ÁN/KHÓA LUẬN/CHUYÊN ĐỀ TỐT NGHIỆP

(Dùng cho CBHD và nộp cùng báo cáo ĐA/KL/CĐTN của sinh viên)

Tên đề tài: Xây Dựng Ứng Dụng Chat RealTime Video Call Giảng viên hướng dẫn: TS. Phạm Thị Thu Thúy

Sinh viên được hướng dẫn: Đặng Anh Phú. MSSV: 61134177 Khóa: 61 Ngành: Công nghệ Thông tin

Lần

GVHD

1 2 3 4 5 6 7

Kiểm tra giữa tiến độ của Trưởng Bộ môn

Ngày kiểm tra: ………...………

Đánh giá công việc hoàn thành: ……%: Ký tên Được tiếp tục:  Không tiếp tục:  ……….

Lần

GVHD

8 9 10 11 …

Nhận xét chung (sau khi sinh viên hoàn thành ĐA/KL/CĐTN):

... ... ...

Điểm hình thức: ……/10 Điểm nội dung: .../10 Điểm tổng kết:

….…/10

+ Đối với ĐA/KLTN:

Kết luận sinh viên: Được bảo vệ:  Khơng được bảo vệ: 

Khánh Hịa, ngày ... tháng … năm 2023

Cán bộ hướng dẫn

(Ký và ghi rõ họ tên)

</div>Trang 4<div class="page_container" data-page="4">

TRƯỜNG ĐẠI HỌC NHA TRANG

Khoa/Viện: Công nghệ Thông tin PHIẾU THEO DÕI TIẾN ĐỘ VÀ ĐÁNH GIÁ ĐỒ ÁN / KHÓA LUẬN TỐT NGHIỆP (Dùng cho CBHD và nộp cùng báo cáo ĐA/KLTN của sinh viên) Tên đề tài: Xây Dựng Ứng Dụng Chat RealTime Video Call. Chuyên ngành: Công nghệ Thông tin Họ và tên sinh viên: Đặng Anh Phú. Mã sinh viên: 61134177 Người hướng dẫn (học hàm, học vị, họ và tên): TS. Phạm Thị Thu Thúy Cơ quan công tác: Khoa Công nghệ Thông tin – Trường Đại học Nha Trang Phần đánh giá và cho điểm của người hướng dẫn (tính theo thang điểm 10) Tiêu chí đánh giá Trọng số (%) Mơ tả mức chất lượng Điểm Giỏi Khá Đạt yêu cầu Không đạt 9 - 10 7 - 8 5 - 6 < 5 Xây dựng đề cương nghiên cứu 10 Tinh thần và thái độ làm việc 10 Kiến thức và kỹ năng làm việc 10

Nội dung và kết quả đạt được 40 Kỹ năng viết và trình bày báo cáo 30 ĐIỂM TỔNG Ghi chú: Điểm tổng làm tròn đến 1 số lẻ. Nhận xét chung (sau khi sinh viên hoàn thành ĐA/KLTN): ……….……

……….Đồng ý cho sinh viên: Được bảo vệ:  Không được bảo vệ: 

Khánh Hòa, ngày … tháng … năm 2023

Cán bộ chấm phản biện

(Ký và ghi rõ họ tên)

</div>Trang 5<div class="page_container" data-page="5">

TRƯỜNG ĐẠI HỌC NHA TRANG Khoa/Viện: Công nghệ Thông tin

PHIẾU CHẤM ĐIỂM ĐỒ ÁN / KHÓA LUẬN TỐT NGHIỆP

(Dành cho cán bộ chấm phản biện)

Tên đề tài: Xây Dựng Ứng Dựng Chat RealTime Video Call Chuyên ngành: Công nghệ Thông tin

Họ và tên sinh viên: Đặng Anh Phú. Mã sinh viên: 61134177

Người phản biện (học hàm, học vị, họ và tên): TS. Phạm Thị Thu Thúy Cơ quan công tác: Khoa Công nghệ Thông tin – Trường Đại học Nha Trang

I. Phần đánh giá và cho điểm của người phản biện (tính theo thang điểm 10) Tiêu chí

đánh giá

Trọng số (%)

Mơ tả mức chất lượng

Điểm Giỏi Khá Đạt yêu cầu Không đạt

9 - 10 7 - 8 5 - 6 < 5

Hình thức

bản thuyết minh 30 Nội dung bản

thuyết minh 30 Kết quả

nghiên cứu 20 Mức độ trích dẫn

và sao chép 20

ĐIỂM TỔNG

Ghi chú: Điểm tổng làm tròn đến 1 số lẻ.

Kết luận:

Đồng ý cho sinh viên: Được bảo vệ:  Không được bảo vệ:



Khánh Hòa, ngày … tháng … năm 2023

Cán bộ chấm phản biện

(Ký và ghi rõ họ tên)

</div>Trang 6<div class="page_container" data-page="6">

II. Phần nhận xét cụ thể (dựa theo phiếu chấm điểm và khung tiêu chí đánh giá theo Rubric) II.1. Hình thức thuyết minh (tỉ trọng 30%)

* Trình bày (Rõ ràng, mạch lạc? Biểu bảng, hình vẽ trình bày rõ ràng, đúng quy cách? ...)

……… ………

* Bố cục và lập luận (Bố cục hợp lý? Tỉ trọng giữa các phần? Cơ sở lập luận? ...)

……… ………

* Văn phong (Gọn gàng, súc tích hay rườm rà, khó hiểu? Lỗi văn phạm và chính tả? ...)

………

II.2. Nội dung thuyết minh (tỉ trọng 30%)

* Mục tiêu nghiên cứu (Trình bày rõ ràng? Ý nghĩa khoa học và thực tiễn? Tính khả thi? ...)

……… ………

* Tổng quan tài liệu (Phân tích và đánh giá? Độ tin cậy và chất lượng nguồn tài liệu? ...)

……… ………

* Phương pháp nghiên cứu (Hiện đại? Phù hợp với mục tiêu và nội dung nghiên cứu? Mô tả?

Đánh giá và so sánh với các phương pháp khác? ...)

……… ………

II.3. Kết quả nghiên cứu (tỉ trọng 20%)

* Kết quả đạt được (Độ tin cậy? Tính sáng tạo? Giá trị khoa học và thực tiễn? ...)

……… ………

* Kết luận (Đáp ứng mục tiêu nghiên cứu? Quan điểm của cá nhân? ...)

……… ………

</div>Trang 9<div class="page_container" data-page="9">

KẾT QUẢ KIỂM TRA ĐẠO VĂN BẰNG TURNITIN

</div>Trang 10<div class="page_container" data-page="10">

LỜI CAM ĐOAN

Tôi xin cam đoan mọi kết quả của đề tài: “Xây Dựng Ứng Dựng Chat RealTime Video Call” là cơng trình nghiên cứu của cá nhân tôi và chưa từng được công bố trong

bất cứ cơng trình nào khác cho đến thời điểm này.

Những phần sử dụng tài liệu tham khảo trong đồ án đã được trích dẫn đầy đủ. Nếu phát hiện có sự sao chép kết quả nghiên cứu của đề tài khác, tơi xin chịu hồn tồn trách nhiệm và chịu kỷ luật của Khoa và Nhà trường đề ra.

Khánh Hòa, ngày 10 tháng 06 năm 2023

Sinh viên thực hiện

Đặng Anh Phú

</div>Trang 11<div class="page_container" data-page="11">

LỜI CẢM ƠN

Trong suốt thời gian thực hiện đề tài, tôi đã nhận được sự giúp đỡ của quý phòng ban Trường Đại học Nha Trang, Khoa Công nghệ Thông tin đã tạo điều kiện tốt nhất cho tơi được hồn thành đề tài. Đặc biệt là sự hướng dẫn tận tình của TS. Phạm Thị Thu Thúy đã giúp tơi hồn thành tốt đề tài. Qua đây, tơi xin gửi lời cảm ơn sâu sắc đến sự giúp đỡ này.

Xin chân thành cảm ơn các quý thầy cô trong bộ môn Kỹ thuật phần mềm trong thời gian qua đã truyền đạt và trang bị cho em kiến thức giúp em hoàn thành tốt đề tài tốt nghiệp.

Cuối cùng tôi xin gửi lời cảm ơn chân thành đến gia đình và tất cả bạn bè đã giúp đỡ, động viên tơi trong suốt q trình học tập và thực hiện đề tài.

Tôi xin chân thành cảm ơn!

Khánh Hòa, ngày 10 tháng 06 năm 2023

Sinh viên thực hiện

Đặng Anh Phú

</div>Trang 12<div class="page_container" data-page="12">

TÓM TẮT ĐỒ ÁN

Đề tài “Xây Dựng Ứng Dựng Chat RealTime Video Call” sử dụng thư viện

SignalR của ASP.NET để tích hợp các chức năng thời gian thực vào ứng dụng; phân tích, thiết kế cơ sở dữ liệu thông tin ứng dụng; tìm hiểu về JWT. Ở phía máy chủ sử dụng framework .NET và Azure Storage để phát triển các API, ở phía máy khách sử dụng framework Angular để phát triển giao diện và nhận dữ liệu từ máy chủ. Từ những cơ sở trên xây dựng ứng dụng chat realtime video call.

Hiện tại, ứng dụng có chức năng chưa được hồn thiện (thơng báo các hoạt động của người dùng trên ứng dụng). Rất mong nhận được sự thơng cảm và đóng góp ý kiến từ Q Thầy/Cơ và các bạn.

</div>Trang 13<div class="page_container" data-page="13">

MỤC LỤC

LỜI CAM ĐOAN ... ILỜI CẢM ƠN ... IITÓM TẮT ĐỒ ÁN ... IIIMỤC LỤC ... IVDANH MỤC HÌNH VẼ ... VIDANH MỤC BẢNG ... VIIIDANH MỤC CÁC TỪ VIẾT TẮT ... IX

PHẦN MỞ ĐẦU ... 1

CHƯƠNG 1. TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU ... 2

1.1Tổng Quan Tình Hình Nghiên Cứu ... 2

1.1.1Tình hình nghiên cứu trên thế giới ... 2

1.1.2Tình hình nghiên cứu trong nước ... 2

1.2Cơ Sở Lý Thuyết ... 3

1.2.1Quy trình phát triển dự án ... 3

1.2.2Các cơng cụ mơ hình hóa... 4

1.2.3Mơ hình Client Server ... 4

3.1.1Sơ đồ tình huống sử dụng (Use Case Diagram) ... 19

3.1.2 Sơ đồ hoạt động (Activity Diagram) ... 21

3.1.3 Sơ đồ trình tự (Sequence Diagram) ... 25

</div>Trang 14<div class="page_container" data-page="14">

3.1.4 Sơ đồ lớp (Class Diagram) ... 29

3.2Thiết Kế ... 30

3.2.1 Thiết kế dữ liệu ... 30

3.2.2 Thiết kế sơ đồ màn hình ... 36

CHƯƠNG 4. CÀI ĐẶT CHƯƠNG TRÌNH ... 37

4.1Giao Diện Đăng Ký ... 37

4.2 Giao Diện Đăng Nhập ... 37

4.3 Giao Diện Trang Chủ ... 38

4.4 Giao Diện Thông Tin Người Dùng ... 38

4.5 Giao Diện Thêm Liên Hệ ... 39

4.6 Giao Diện Tạo Nhóm ... 40

4.7 Giao Diện Chi Tiết Cuộc Trò Chuyện... 41

4.8 Giao Diện Cuộc Gọi ... 44

4.9 Giao Diện Danh Bạ ... 45

4.10 Giao Diện Không Tim Thấy Trang ... 45

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ... 46

Phục Lục 1. Cài Đặt Dotnet Và Package ... 49

Phục Lục 2. Cài Đặt Anlular Và Các Package ... 51

Phục Lục 3. Cấu Hình Và Cài Đặt Signalr ... 52

Phục Lục 4. Cài Đặt Video Calling Daily Api ... 55

</div>Trang 15<div class="page_container" data-page="15">

Hình 1. 6. Inline template trong Angular ... 11

Hình 1. 7. External template trong Angular ... 11

Hình 1. 8. Dependency Injection trong Angular ... 12

Hình 1. 9. Cấu trúc của JWT ... 13

Hình 1. 10. Xác thực và ủy quyền sử dụng JWT ... 14

Hình 3. 1. Sơ đồ Use case mức 0 ... 19

Hình 3. 2. Sơ đồ Use case Đăng nhập, đăng ký mức 1 ... 19

Hình 3. 3. Sơ đồ Use case thơng tin người dùng mức 1 ... 20

Hình 3. 4. Sơ đồ Use case tạo nhóm mức 1 ... 20

Hình 3. 5. Sơ đồ Use case quản lý liên hệ mức 1 ... 20

Hình 3. 6. Sơ đồ Use case quản lý tin nhắn mức 1 ... 21

Hình 3. 7. Sơ đồ Use case cuộc gọi video ... 21

Hình 3. 8. Sơ đồ Activity đăng nhập ... 22

Hình 3. 9. Sơ đồ Activity đăng ký ... 22

Hình 3. 10. Sơ đồ Activity thơng tin người dùng ... 23

Hình 3. 11. Sơ đồ Activity tạo nhóm ... 23

Hình 3. 12. Sơ đồ Activity quản lý liên hệ ... 24

Hình 3. 13. Sơ đồ Activity quản lý tin nhắn ... 24

Hình 3. 14. Sơ đồ Activity cuộc gọi video ... 25

Hình 3. 15. Sơ đồ Sequence đăng nhập ... 25

Hình 3. 16. Sơ đồ Sequence đăng ký ... 26

Hình 3. 17. Sơ đồ Sequence thơng tin người dùng ... 26

Hình 3. 18. Sơ đồ Sequence tạo nhóm ... 27

Hình 3. 19. Sơ đồ Sequence quản lý liên hệ ... 27

Hình 3. 20. Sơ đồ Sequence quản lý tin nhắn ... 28

Hình 3. 21. Sơ đồ Sequence cuộc gọi video ... 29

</div>Trang 16<div class="page_container" data-page="16">

Hình 3. 22. Sơ đồ Class models ... 29

Hình 3. 23. Sơ đồ Class services ... 30

Hình 3. 24. Sơ đồ Class Controller ... 30

Hình 3. 25. Mơ hình dữ liệu quan hệ (RDM) ... 31

Hình 3. 26. Sơ đồ màn hình ứng dụng ... 36

Hình 4. 1. Giao diện trang đăng ký ... 37

Hình 4. 2. Giao diện trang đăng nhập ... 38

Hình 4. 3. Giao diện trang chủ ... 38

Hình 4. 4. Giao diện thơng tin cá nhân ... 39

Hình 4. 5. Giao diện thêm liên hệ ... 40

Hình 4. 6. Giao diện tạo nhóm ... 40

Hình 4. 7. Giao diện chi tiết tin nhắn ... 41

Hình 4. 8. Giao diện gửi tin nhắn văn bản ... 41

Hình 4. 9. Giao diện gửi tin nhắn tệp đính kèm ... 42

Hình 4. 10. Giao diện gửi tin nhắn ảnh ... 42

Hình 4. 11. Giao diện danh sách thành viên trong nhóm ... 43

Hình 4. 12. Giao diện thơng tin người liên hệ trong tin nhắn ... 43

Hình 4. 13. Giao diện cuộc gọi ... 44

Hình 4. 14. Thơng báo cuộc gọi đến ... 44

Hình 4. 15. Phịng trị chuyện video ... 44

Hình 4. 16. Giao diện danh bạ ... 45

Hình 4. 17. Giao diện khơng tìm thấy trang ... 45

</div>Trang 18<div class="page_container" data-page="18">

DANH MỤC CÁC TỪ VIẾT TẮT

API : Application Programming Interface CSDL : Cơ sở dữ liệu

LINQ : Language Integrated Query (Ngôn ngữ truy vấn tích hợp)

OOAD : Object-Oriented Analysis and Design (Phân tích thiết kế hướng đối tượng) UML : Unified Modeling Language (Ngơn ngữ mơ hình hóa thống nhất)

JWT : JSON Web Token

RDM : Relational Data Model (Mơ hình dữ liệu quan hệ)

</div>Trang 19<div class="page_container" data-page="19">

PHẦN MỞ ĐẦU

 Lý do chọn đề tài:

Trong cuộc sống hiện nay, sử dụng công nghệ thông tin giúp việc giao tiếp và trao đổi thông tin trên mạng đã trở nên phổ biến hơn bao giờ hết. Chat realtime là một dịch vụ giúp người dùng nhắn tin và trao đổi thông tin ngay lập tức, giúp tiết kiệm thời gian. Công nghệ chat realtime cịn cung cấp rất nhiều tính năng hữu ích như chia sẻ tệp tin, hình ảnh, video và âm thanh. Điều này giúp cho việc làm việc và học tập từ xa trở nên dễ dàng hơn. Bên cạnh đó, nó cịn cho phép các doanh nghiệp tiếp cận và giải quyết vấn đề nếu có một cách nhanh chóng của khách hàng.

Việc nghiên cứu và thiết kế một ứng dụng chat realtime sẽ giúp em có được kiến thức chun mơn cũng như tạo ra một ứng dụng tác động tích cực cộng đồng, đồng thời hỗ trợ cho việc tiết kiệm và tối ưu hóa thời gian trong cuộc sống.

Từ những lý do trên nên em đã phát triển đề tài “Xây Dựng Ứng Dựng Chat RealTime Video Call”.

 Cấu trúc của báo cáo:

• Chương 1: Tổng quan về vấn đề nghiên cứu.

• Chương 2: Khảo sát hiện trạng về ứng dụng trò chuyện trực tuyến và xây dựng

</div>Trang 20<div class="page_container" data-page="20">

CHƯƠNG 1. TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU

1.1 TỔNG QUAN TÌNH HÌNH NGHIÊN CỨU

1.1.1 Tình hình nghiên cứu trên thế giới

Ứng dụng trò chuyện trực tuyến đang trở thành một phương tiện giao tiếp rỗng rãi và phổ biến trên toàn thế giới. Một số ứng dụng chat realtime phổ biến nhất như WhatsApp, Facebook Messenger, Telegram, Viber, và WeChat đang được ưu chuộng và phổ biến trên khắp thế giới.

Với sự phát triển công nghệ và nhu cầu của người dùng, các ứng dụng trò chuyện trực tuyến cũng đang được phát triển và cải tiến liên tục. Một số tính năng mới đã ra đời như mã hóa đầu cuối để bảo vệ tính bảo mật của người dùng, hoặc chức năng cuộc gọi video với chất lượng cao hơn để giúp người dùng kết nối với nhau một cách sống động hơn. Tuy nhiên, sự phát triển của nó cũng đem lại một số vấn đề mới như mất riêng tư.

Do đó, các nhà nghiên cứu đang tìm kiếm các cách tiếp cận mới để giải quyết những thách thức này. Từ việc cải thiện giao diện người dùng đến việc kết hợp trí tuệ nhân tạo để giúp nâng cao trải nghiệm người dùng, tạo ra sự tiện dụng và khả năng quản lý thông tin hiệu quả.

1.1.2 Tình hình nghiên cứu trong nước

Ứng dụng trị chuyện ở nước ta đang được quan tâm nghiên cứu và phát triển vì những lợi ích, tiềm năng mà nó mang lại. Trong vịng một thập kỉ trở lại Việt Nam đã có rất nhiều nghiên cứu và phát triển về ứng dụng trò chuyện này, Zalo là một ví dụ điển hình và hiện tại có hơn 80 triệu người dùng. Việt Nam đang trên đà phát triển về công nghệ thông tin và nỗ lực chuyển đổi kỹ thuật số đang được tiến hành.

Tỷ lệ sử dụng dịch vụ chat và các ứng dụng trao đổi thông tin trực tuyến tại Việt Nam đang tăng nhanh, đặc biệt là trong bối cảnh thực dịch COVID-19 khi nhu cầu làm việc và học tập trực tuyến càng tăng cao nên các ứng dụng này đang có tiềm năng phát

triển rất lớn. Do vậy trong đồ án này, em đã nghiên cứu đồ án “Xây Dựng Ứng Dựng

Chat RealTime Video Call” cho phép nhắn tin và tạo các phòng họp trực tuyến dành

riêng cho người Việt.

</div>Trang 21<div class="page_container" data-page="21">

1.2 CƠ SỞ LÝ THUYẾT

1.2.1 Quy trình phát triển dự án  Khảo sát dự án

Giai đoạn đầu tiên trong quy trình phát triển dự án khảo sát. Nhiệm vụ của giai

đoạn này là thu thập nghiên cứu các thông tin cần thiết để giải quyết các yêu cầu dự án.

• Thiết kế cơ sở dữ liệu.

• Tạo các truy vấn, thủ tục, các thơng báo, cảnh báo lỗi. • Thiết kế giao diện chương trình.

• Thiết kế các chức năng.

 Thực hiện

Trong giai đoạn này, sẽ tiến hành xây dựng hệ thống theo thiết kế đã được xác định trước. Các nhiệm vụ bao gồm việc cài đặt cơ sở dữ liệu, cài đặt chức năng, giao diện bằng việc sử dụng các công cụ hỗ trợ như Visual Studio, IntelliJ IDEA và các phần mềm

tương tự. Kết quả cuối cùng của giai đoạn này sẽ là mã nguồn hoàn chỉnh của hệ thống.

 Kiểm thử

• Kiểm chứng các chức năng theo tài liệu đặc tả.

• Tạo các kịch bản kiểm thử, tiến hành kiểm thử và bổ sung cập nhật vào các kịch bản kiểm thử.

• Khắc phục các lỗi (nếu có).

 Triển khai và bảo trì

• Cài đặt phần mềm.

</div>Trang 22<div class="page_container" data-page="22">

• Đưa ra tài liệu hướng dẫn sử dụng, kỹ thuật. • Phát hiện sai sót hệ thống.

• Bảo hành, nâng cấp hệ thống.

1.2.2 Các cơng cụ mơ hình hóa

Ở đề tài “Xây Dựng Ứng Dựng Chat RealTime Video Call” sử dụng OOAD vào

 ULM là ngơn ngữ mơ hình hóa để:

• Trực quan hóa (visualizing): cung các các luật và ký hiệu để mơ hình hóa. • Đặc tả (specifying): cung cấp công cụ để mô tả hệ thống ở nhiều mức khác nhau. • Xây dựng (constructing): các mơ hình được tạo ra có thể chuyển đổi sang ngơn

1.2.3 Mơ hình Client Server

Mơ hình Client-Server trong mạng máy tính, máy khách (client) và máy chủ (server) là hai thành phần chính. Chức năng của máy chủ là lưu trữ tài nguyên và thiết

</div>Trang 23<div class="page_container" data-page="23">

lập các chương trình dịch vụ theo yêu cầu của các máy khách. Và máy khách bao gồm các thiết bị điện tử và máy tính, chúng sẽ gửi các yêu cầu đến máy chủ.

Hình 1. 1. Mơ hình Client-Server

(Nguồn: client-server)

Khi client yêu cầu kết nối với server, server có thể chấp nhận hoặc từ chối kết nối. Nếu kết nối được chấp nhận, server sẽ thiết lập và duy trì kết nối với máy khách qua một giao thức cụ thể.

Mơ hình xử lý Client/Server muốn hoạt động thì phải triển khai ba thành phần cơ bản sau: Client (Front-end), Server (Back-end), Network.

 Ưu điểm:

• Mọi vấn đề phát sinh trên tồn bộ mạng có thể được giải quyết tại một địa điểm duy nhất.

• Khả năng mở rộng: ví dụ máy khách và máy chủ có thể tăng lên khi cần.

• Quản lý dễ dàng: máy khách và máy chủ không cần phải ở gần nhau để truy cập dữ liệu một cách hiệu quả.

• Khả năng truy cập: Các vị trí của hệ thống máy khách-máy chủ đều độc lập, chỉ yêu cầu dữ liệu từ máy chủ, cho phép nâng cấp, thay thế và di chuyển đơn giản. • Bảo mật dữ diệu: kiểm soát truy cập đảm bảo những người được ủy quyền mới

được phép truy cập. Ví dụ như thơng tin đăng nhập (tên người dùng, mật khẩu) là một trong các các kiểm soát truy cập.

 Nhược điểm

• Tắc nghẽn: việc quá tải hệ thống do thiếu tài nguyên để phục vụ tất cả các máy khách. Nếu có quá nhiều máy khách tạo request tới cùng một máy chủ thì kết nối có thể bị chậm hoặc không hoạt động (crash).

</div>Trang 24<div class="page_container" data-page="24">

• Chi phí để cài đặt và bảo trị mơ hình này là khá cao.

• Tồn bộ hệ thống sẽ bị gián đoạn nếu máy chủ chính gặp sự cố.

1.3 CƠNG NGHỆ SỬ DỤNG 1.3.1 DotNet

Nền tảng DotNet (.NET) cung cấp cho nhà phát triển thư viện và công cụ để tạo ra

các ứng dụng đa dạng, bao gồm các ứng dụng web, trị chơi, máy tính để bàn, thiết bị di động, IoT, đám mây và dịch vụ siêu nhỏ, có khả năng hoạt động trên mọi hệ điều hành. .NET có nhiều kiểu triển khai, cho phép mã .NET thực thi trên những hệ điều hành khác nhau:

• .NET Framework là kiểu triển khai ban đầu của .NET được Microsoft phát triển vào đầu những năm 2000 với mục đích phát triển các ứng dụng cho Windows, bao gồm cả máy tính để bàn và web. Nó cung cấp một môi trường thực thi đầy đủ dịch vụ cho các ứng dụng đang chạy trên nó và cũng là một thư viện lớp mở rộng để viết các loại ứng dụng khác nhau. Nó gồm hai phần chính: Common language runtime (CLR), Base Class Library (BCL) [1].

• .NET Core được phát triển vào cuối năm 2014 để phù hợp với một framework đa

nền tảng. Kiến trúc mô-đun của .NET Core cung cấp các phiên bản nhỏ hơn của, cho phép nhà phát triển tải xuống các thành phần bổ sung từ kho lưu trữ NuGet. Việc tái cấu trúc này cho phép triển khai đơn giản hóa và tính linh động. [2]

• .NET Standard cho phép các thư viện xây dựng dựa trên bộ API chung đã được

thống nhất, đảm bảo có thể được áp dụng vào mọi loại ứng dụng .NET, bao gồm cả di động, IoT, máy tính để bàn, web hoặc bất kỳ nền tảng nào sử dụng mã .NET.

</div>Trang 25<div class="page_container" data-page="25">

Hình 1. 2. Tổng quan .NET

(Nguồn: dotnet platform)

1.3.2 Csharp

C# (Csharp) là một ngơn ngữ lập trình hướng đối tượng, cho phép các nhà phát

triển tạo ra các ứng dụng chuyên nghiệp và hiệu quả chạy trên nền tảng .NET. Phiên bản đầu tiên ra mắt vào năm 2002, và hiện tại phiên bản mới nhất là C# 11 được ra mắt phát hành vào tháng 11 năm 2022.

 C# sử dụng để phát triển các ứng dụng như:

• Websites, web services • Ứng dụng máy tính • Ứng dụng di động

• Chương trình dịng lệnh (command-line) • Hệ thống đám mây

• Thiết bị vạn vật (IoT devices) • Học máy (machine learning) • Games

 Kiểu dữ liệu trong C# được chia thành hai loại:

• Tham trị (value types)

- Kiểu đơn giản: 𝑠𝑏𝑦𝑡𝑒, 𝑏𝑦𝑡𝑒, 𝑠ℎ𝑜𝑟𝑡, 𝑢𝑠ℎ𝑜𝑟𝑡, 𝑢𝑖𝑛𝑡, 𝑖𝑛𝑡, 𝑙𝑜𝑛𝑔, 𝑢𝑙𝑜𝑛𝑔,𝑑𝑒𝑐𝑚𝑖𝑎𝑙, 𝑓𝑙𝑜𝑎𝑡, 𝑑𝑜𝑢𝑏𝑙𝑒, 𝑐ℎ𝑎𝑟, 𝑏𝑜𝑜𝑙.

- Kiểu Enum: ví dụ enum E {...}

</div>Trang 26<div class="page_container" data-page="26">

- Kiểu Struct: ví dụ struct S {...}- Kiểu Nullable: null

- Kiểu Tuple: (T1, T2, ...)• Kiểu tham chiếu (reference types)

- Kiểu lớp (class types): object, string và các kiểu class do người dùng định nghĩa class class C {...}

- Kiểu giao diện (interface types): interface I {...}- Kiểu mảng: string [], int [,] và int [] []- Kiểu delegate: delegate int D(...)

 Tính năng: quản lý bộ nhớ tự động, xử lý ngoại lệ, type-safety, delegates, LINQ,

biểu thức lamda, đa luồng.

1.3.3 ASP.NET Core SignalR

SignalR là một thư viện mã nguồn mở tiện ích giúp dễ dàng tích hợp chức năng

web thời gian thực vào các ứng dụng. Với SignalR, việc đẩy thông tin đến máy khách và hiển thị các thông báo ngay lập tức trở nên dễ dàng hơn bao giờ hết [3].

 SignalR được sử dụng trong các ứng dụng:

• Ứng dụng trị chuyện • Cơng cụ quản lý dự án • Chơi game trực tuyến • Thơng báo và cảnh báo

 Dưới đây là một số tính năng của SignalR cho ASP.NET Core:

</div>Trang 27<div class="page_container" data-page="27">

Hình 1. 3. Mơ hình hoạt động của SignalR

(Nguồn: signalr library)

1.3.4 Angular

Angular là một nền tảng vô cùng tiện dụng, đa chức năng và khung mã nguồn mở

để phát triển xây dựng ứng dụng máy khách một trang (SPA) đẹp mắt bằng HTML và TypeScript. Angular được viết bằng ngơn ngữ TypeScript. Nó bao gồm:

• Khung dựa trên thành phần để xây dựng các ứng dụng web có thể mở rộng [4]. • Các thư viện được tích hợp bao gồm nhiều tính năng khác nhau, hữu ích như

quản lý biểu mẫu, định tuyến điều hướng giữa các trang, tương tác máy khách và máy chủ, v. v [4].

• Một bộ công cụ đầy đủ để hỗ trợ nhà phát triển trong việc xây dựng, thử nghiệm và cập nhật mã của mình [4].

 Để sử dụng được Angular, ta sẽ tìm hiểu về kiến trúc Angular:

Hình 1. 4. Kiến trúc Angular

(Nguồn: angular architecture)

</div>Trang 28<div class="page_container" data-page="28">

• Components • Templates • Directives

(Nguồn: angular component lifecycle)

Angular template là bản thiết kế cho giao diện người dùng (UI). Các mẫu được

viết bằng HTML và cú pháp đặc biệt được sử dụng để xây dựng trên nhiều tính năng của Angular.

❖ Có hai cách để định nghĩa một mẫu:

• Inline Template

</div>Trang 29<div class="page_container" data-page="29">

Hình 1. 6. Inline template trong Angular

• External Template

Hình 1. 7. External template trong Angular

Directives là các lớp hỗ trợ cho các component trong ứng dụng Angular. Sử dụng

các directives tích hợp của Angular để quản lý biểu mẫu, danh sách, kiểu và những gì người dùng nhìn thấy.

</div>Trang 30<div class="page_container" data-page="30">

❖ Có ba loại directives trong Angular:

• Component directive được sử dụng với một mẫu, loại này được sử dụng phổ biến nhất.

• Structural directive được sử dụng để thay đổi giao diện hoặc hành vi của một phần tử, thành phần hoặc chỉ thị khác.

• Attribute directtive được sử dụng để thay đổi bố cục DOM thông qua việc xóa hoặc thêm các phần tử DOM.

Dependency Injection (DI) là một mẫu thiết kế trong đó một lớp yêu cầu các phụ

thuộc sẽ không tạo ra nó, mà sẽ u cầu từ các nguồn bên ngồi. Sử dụng nó trong các ứng dụng Angular giúp giảm bớt việc kiểm tra, ghi đè, thay đổi dịch vụ mà không tác động đến các thành phần liên quan vào các dịch vụ này và tăng tính linh hoạt các mơ đun.

Hình 1. 8. Dependency Injection trong Angular

(Nguồn: dependency injection angular)

1.3.5 JSON Web Token

JSON Web Token (JWT) là mã thông báo tiêu chuẩn mở được phát triển cho phép máy khách và máy chủ chia sẻ thông tin bảo mật tin cậy và hiệu quả. Mỗi JWT chứa các đối tượng JSON được mã hóa, bao gồm một tập hợp các xác nhận quyền sở hữu. JWT được ký bằng thuật toán mật mã để đảm bảo rằng các xác nhận quyền sở hữu không thể bị thay đổi sau khi phát hành mã thông báo [5].

 JWT bao gồm ba phần:

• Header bao gồm thơng tin về loại mã thơng báo và thuật tốn được sử dụng để tạo chữ ký (signature).

</div>Trang 31<div class="page_container" data-page="31">

• Signature giúp đảm bảo tính xác thực an tồn và bảo mật của mã thông báo.

Header và Payload của JWT được viết bằng JSON và được mã hóa riêng bằng

thuật toán base64. Chuỗi chứa Header và Payload được tiếp tục mã hóa một lần nữa để đảm bảo tính an tồn bằng cách sử dụng khóa bí mật (secret key) và thuật toán băm để tạo chữ ký. Sau đó, chữ ký được thêm vào cuối chuỗi, được phân tách bằng dấu '.', để tạo JWT cuối cùng.

Hình 1. 9. Cấu trúc của JWT  Sử dụng JWT để xác thực (Authentication):

Khi người dùng đã đăng nhập vào ứng dụng thành công. Hệ thống sẽ tạo ra một mã JWT riêng cho người dùng và với mã JWT được bổ sung vào các yêu cầu tiếp theo, người dùng được ủy quyền truy cập và sử dụng các dịch vụ, đường dẫn và tài nguyên nằm trong phạm vi cho phép. Phương pháp này không bị phụ thuộc vào Cross-Origin Resource Sharing (CORS) do mã JWT được chuyển trực tiếp giữa máy tính của người dùng và hệ thống vì khơng sử dụng cookie.

</div>Trang 32<div class="page_container" data-page="32">

Hình 1. 10. Xác thực và ủy quyền sử dụng JWT 1.3.6 Video Call

VoIP (Voice over Internet Protocol) là công nghệ được sử dụng phổ biến giúp người dùng nói chuyện với nhau qua Internet bằng cách sử dụng phần mềm, điện thoại di động hoặc thiết bị kết nối mạng. Với VoIP, người dùng thực hiện các cuộc gọi âm thanh từ máy tính hoặc điện thoại của mình, và tiết kiệm chi phí và tăng tính linh hoạt.

Video calling API là một giao diện lập trình ứng dụng hình thức liên lạc trực tuyến, cho phép người dùng kết nối qua video và âm thanh. Với cơng nghệ này, có thể tiến hành các cuộc hội thoại trực tuyến với hình ảnh chất lượng cao, trao đổi thơng tin và làm việc từ xa. Video calling API đặc biệt hữu ích cho các cuộc họp, buổi diễn thuyết, và các lớp học.

 Sự khác biệt giữa VoIP và Video calling API:

• Về mục đích: VoIP được sử dụng chủ yếu cho giao tiếp bằng giọng nói, trong khi đó thì video calling API được thiết kế riêng cho giao tiếp video.

• Giao tiếp: VoIP không thể kết nối với nhiều người. Mặt khác, video calling API cho phép chia sẻ màn hình, ghi lại cuộc gọi.

</div>Trang 33<div class="page_container" data-page="33">

Trong đề tài lần này, em tích hợp Video calling API để tối ưu hóa chi phí và thời gian phát triển hệ thống.

Video calling API là một giao diện lập trình về ứng dụng video, chứa các thư viện

hoặc bộ công cụ cung cấp các khối xây dựng để triển khai các cuộc gọi video, âm thanh và các tính năng thời gian thực khác như nhắn tin văn bản, chia sẻ màn hình, ghi âm và phiên âm.

Đặc điểm của video calling API là có thể nhúng các đoạn mã trực tiếp vào các ứng dụng trên nhiều nền tảng (web, điện thoại) như một tính năng, thực hiện các thao tác về quản trị trong dashboard của API.

 Một số video calling API hiện nay:

 Các tính năng của video calling API phải có:

• Chia sẻ màn hình: Chia sẻ nội dung trong thời gian thực tới một hoặc nhiều thiết bị riêng biệt.

• Ghi âm: Quay video trực tiếp và lưu trữ để xem sau.

• Gọi nhóm: Nhiều người tham gia có thể tham gia một hội nghị truyền hình duy nhất.

• Khử tiếng ồn ảo: Cải thiện chất lượng cuộc gọi video trong ứng dụng.

 Ưu điểm

• Hỗ trợ việc nâng cấp và bảo trì dễ dàng.

• Dễ sử dụng: cho phép tích hợp vào ứng dụng một cách dễ dàng, tài liệu hỗ trợ đầy đủ và chi tiết.

• Đa nền tảng: hỗ trợ đa nền tảng (web, mobile) và các ngơn ngữ lập trình phổ biến.

 Nhược điểm

</div>Trang 34<div class="page_container" data-page="34">

• Rị rỉ dữ liệu: hiện nay có một số cáo buộc về việc rò rỉ dữ liệu khi sử dụng ứng dụng tích hợp video calling API.

• Quyền riêng tư và bảo mật: một số API chưa triển khi mã hóa đầu cuối (E2E – End-to-End).

</div>Trang 35<div class="page_container" data-page="35">

CHƯƠNG 2. KHẢO SÁT HỆ THỐNG

2.1 KHẢO SÁT HIỆN TRẠNG

Các ứng dụng trị chuyện thành cơng trên thế giới thành công đều có các điểm chung sau:

• Đỗ trễ truyền dữ liệu thấp: người dùng mong đợi và sẽ nhận được tin nhắn, video call trên thiết bị của họ ngay lập tức. Các yếu tố quan trọng để đạt được điều này bao gồm sự kết hợp của băng thông lượng cao, giao thức nhắn tin hiệu quả, độ trễ thấp (như WebSockets, ASP.NET SignalR) và khoảng cách địa lý giữa người dùng và máy chủ.

• Đảm bảo tồn vẹn dữ liệu: tin nhắn, video call được gửi đến đúng người nhận, theo trình tự, đúng thời điểm.

• Các tính năng nhắn tin phong phú: gửi tin nhắn có emoji, GIF, bày tỏ cảm xúc về tin nhắn, v.v…

2.2 ĐẶC TẢ BÀI TOÁN

 Ứng dụng chat realtime video call có các chức năng sau:

• Đăng nhập tài khoản: sử dụng xác thực và ủy quyền (Authentication và Authorization) để quản lý quyền truy cập của tài khoản đó.

• Đăng ký: người dùng có thể tạo một tài khoản ứng dụng.

• Quản lý thơng tin người dùng: người dùng có thể xem, hiệu chỉnh thơng tin cá nhân nhanh chóng và tiện lợi (tên người dùng, ngày sinh, email, giới tính, địa chỉ, số điện thoại, ảnh đại diện).

• Thêm liên hệ vào danh bạ: tìm kiếm liên hệ và thêm người dùng đó vào danh sách liên hệ.

• Quản lý danh bạ: người dùng xem danh sách các liên hệ đã thêm và thông tin của họ.

• Tạo nhóm trị chuyện: tạo và thêm người liên hệ vào nhóm để trị chuyện 1:1 hoặc 1: n.

• Danh sách cuộc gọi: người dùng xem danh sách, trạng thái cuộc gọi (gọi nhỡ, gọi đến, gọi đi) và thực hiện cuộc gọi đi.

</div>Trang 36<div class="page_container" data-page="36">

• Trị chuyện thời gian thực: người dùng tham gia cuộc trò chuyện và nhắn tin (văn bản, emoji, file, hình ảnh), cuộc gọi video và cho phép tải xuống file hoặc hình ảnh đã gửi.

• Cuộc gọi video: thực hiện một cuộc gọi video đến người khác, kết thúc cuộc gọi.

 Yêu cầu phi chức năng: độ tin cậy, hiệu suất, khả năng mở rộng và đa nền tảng

của ứng dụng.

 Về giao diện: giao diện thiết kế thân thiện, tối giản, dễ sử dụng và đẹp mắt để

đảm bảo trải nghiệm người dùng tốt nhất.

</div>Trang 37<div class="page_container" data-page="37">