Đồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video callĐồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video callĐồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video callĐồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video callĐồ Án tốt nghiệp xây dựng Ứng dụng chat realtime video call
TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU
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
Cơ Sở Lý Thuyết
1.2.1 Quy trình phát triển 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
Phân tích là một kỹ thuật giải quyết vấn đề bằng cách phân rã các thành phần của hệ thống Mục đích là xác định rõ các thông tin và tính năng của hệ thống sẽ được triển khai
Tiến hành phân tích thông tin thu thập được từ quá trình khảo sát, sau đó tích hợp dữ liệu vào phần mềm và sử dụng những công cụ chuyên dụng để đảm bảo việc thiết kế hệ thống một cách chính xác và hiệu quả
• 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
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 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ì
• Đư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 quá trình phát triển dự án Để mô tả hệ thống được thiết kế OOAD cần có các bản vẽ, còn UML là ngôn ngữ được sử dụng để mô hình hóa hệ thống
Sự ứng dụng của mô hình hóa giúp ta dễ dàng hình dung và giải thích thế giới thực bằng cách sử dụng các mô hình khác nhau, đồng thời hiểu rõ hệ thống từ nhiều góc độ khác nhau
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 ngữ lập trình cụ thể
• Tài liệu hóa (documenting): lập tài liệu mô tả về cách xây dựng hệ thống
Các bản vẽ của UML:
• Biểu đồ Use Case: biểu đồ mô tả các ca hệ thống, giúp xác định người sử dụng hệ thống, tính năng của hệ thống và hiểu được yêu cầu của hệ thống
• Biểu đồ Activity: mô tả hoạt động của các đối tượng, giúp ta hiểu về nghiệp vụ hệ thống
• Biểu đồ Sequence: mô tả cách các đối tượng trong hệ thống tương tác với nhau
• Biểu đồ Class: mô tả cấu trúc của hệ thống, cấu trúc tĩnh của lớp, hệ thống cấu tạo từ những thành phần nào
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
5 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
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
• Mọi vấn đề phát sinh trên toà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
• 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)
• Chi phí để cài đặt và bảo trị mô hình này là khá cao
• Toàn bộ hệ thống sẽ bị gián đoạn nếu máy chủ chính gặp sự cố.
Công Nghệ Sử Dụng
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
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ư:
• Chương trình dòng lệnh (command-line)
• Thiết bị vạn vật (IoT devices)
Kiểu dữ liệu trong C# được chia thành hai loại:
- Kiểu Enum: ví dụ enum E { }
- Kiểu Struct: ví dụ struct S { }
• 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 [] []
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
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:
• Công cụ quản lý dự á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:
• Xử lý quản lý kết nối tự động
• Gửi tin nhắn đồng thời cho các máy khách đang kết nối Ví dụ, một nhóm trò chuyện
• Xử lý lưu lượng truy cập ngày càng tăng
SignalR sử dụng các Hub để giao tiếp giữa máy chủ và máy khách
Hình 1 3 Mô hình hoạt động của SignalR
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:
Components là khối xây dựng chính cho các ứng dụng Angular Mỗi compoent bao gồm:
• Một mẫu HTML (HTML template) để xác định những gì hiển thị trên trang
• Một lớp Typescript để định nghĩa các hành vi
• Bộ chọn CSS xác định cách thành phần được sử dụng trong mẫu HTML
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:
Hình 1 6 Inline template trong Angular
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
❖ 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ẽ yêu cầu từ các nguồn bên ngoà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
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 toán được sử dụng để tạo chữ ký (signature)
• Payload chứa các xác nhận quyền sở hữu (claims) hoặc đối tượng JSON
• Signature giúp đảm bảo tính xác thực an toà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 toà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
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
KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG
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 toà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…
Đặ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
• 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
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân Tích
3.1.1 Sơ đồ tình huống sử dụng (Use Case Diagram)
Use case diagram mức 0 (Level 0 Cloud) – Ứng dụng PNChat
Hình 3 1 Sơ đồ Use case mức 0
Use case diagram mức 1 (Level 1 Kite) – Đăng nhập, đăng ký
Hình 3 2 Sơ đồ Use case Đăng nhập, đăng ký mức 1
Use case diagram mức 1 (Level 1 Kite) – Thông tin người dùng
Hình 3 3 Sơ đồ Use case thông tin người dùng mức 1
Use case diagram mức 1 (Level 1 Kite) – Tạo nhóm
Hình 3 4 Sơ đồ Use case tạo nhóm mức 1
Use case diagram mức 1 (Level 1 Kite) – Quản lý liên hệ
Hình 3 5 Sơ đồ Use case quản lý liên hệ mức 1
User case diagram mức 1 (Level 1 Kite) – Quản lý tin nhắn
Hình 3 6 Sơ đồ Use case quản lý tin nhắn mức 1
Use case diagram mức 1 (Level 1 Kite) – Cuộc gọi video
Hình 3 7 Sơ đồ Use case cuộc gọi video 3.1.2 Sơ đồ hoạt động (Activity Diagram)
Hình 3 8 Sơ đồ Activity đăng nhập
Hình 3 9 Sơ đồ Activity đăng ký
Activity diagram – Thông tin người dùng
Hình 3 10 Sơ đồ Activity thông tin người dùng
Hình 3 11 Sơ đồ Activity tạo nhóm
Activity diagram – Quản lý liên hệ
Hình 3 12 Sơ đồ Activity quản lý liên hệ
Activity diagram – Quản lý tin nhắn
Hình 3 13 Sơ đồ Activity quản lý tin nhắn
Activity diagram – Cuộc gọi video
Hình 3 14 Sơ đồ Activity cuộc gọi video 3.1.3 Sơ đồ trình tự (Sequence Diagram)
Hình 3 15 Sơ đồ Sequence đăng nhập
Hình 3 16 Sơ đồ Sequence đăng ký
Sequence diagram – Thông tin người dùng
Hình 3 17 Sơ đồ Sequence thông tin người dùng
Hình 3 18 Sơ đồ Sequence tạo nhóm
Sequence diagram – Quản lý liên hệ
Hình 3 19 Sơ đồ Sequence quản lý liên hệ
Sequence diagram – Quản lý tin nhắn
Hình 3 20 Sơ đồ Sequence quản lý tin nhắn
Sequence diagram – Cuộc gọi video
Hình 3 21 Sơ đồ Sequence cuộc gọi video 3.1.4 Sơ đồ lớp (Class Diagram)
Hình 3 22 Sơ đồ Class models
Hình 3 23 Sơ đồ Class services
Thiết Kế
3.2.1.1 Mô hình dữ liệu mức logic
• Call (Id, GroupCallCode, UserCode, Url, Status, Created)
• Contact (Id, UserCode, ContactCode, Created)
• Group (Code, Type, Avatar, Name, Created, CreatedBy, LastActive)
• GroupCall (Code, Type, Avatar, Name, Created, CreatedBy, LastActive)
• Message (Id, Type, GroupCode, Content, Path, Created, CreatedBy)
• User (Code, UserName, Password, FullName, Dob, Phone, Email, Address, Avatar, Gender, LastLogin, CurrentSession)
3.2.1.2 Mô hình dữ liệu quan hệ
Hình 3 25 Mô hình dữ liệu quan hệ (RDM)
Bảng 3 1 Thực thể Call STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Id int Khóa chính Mã cuộc gọi
Khóa ngoại tham chiếu bảng GroupCall (Code)
Khóa ngoại tham chiếu bảng User (Code)
4 Url nvarchar (500) Not null Đường dẫn cuộc gọi Daily api
5 Status varchar (32) Not null Trạng thái cuộc gọi
6 Created datetime Not null Ngày tạo cuộc gọi
Bảng 3 2 Thực thể Contact STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Id bigint Khóa chính Mã liên hệ
Khóa ngoại tham chiếu bảng User (Code)
Khóa ngoại tham chiếu bảng User (Code)
Mã liên hệ người dùng
4 Created datetime Not null Ngày tạo liên hệ
Bảng 3 3 Thực thể Group STT Tên thuộc tính Kiểu dữ kiệu Ràng buộc Diễn giải
1 Code varchar (32) Khóa chính Mã nhóm
2 Type varchar (32) Not null Kiểu nhóm
3 Avatar varchar(max) Ảnh đại diện nhóm
5 Created datetime Not null Ngày tại nhóm
6 CreatedBy varchar (32) Not null Tạo bởi người dùng
7 LastActive datetime Not null Ngày hoạt động cuối cùng
Bảng 3 4 Thực thể User STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Code varchar (32) Khóa chính Mã người dùng
2 UserName varchar (32) Not null Tên đăng nhập
3 Password varchar (32) Not null Mật khẩu
4 FullName nvarchar (50) Not null Tên người dùng
6 Phone varchar (50) Not null Số điện thoại
7 Email varchar (50) Not null Email người dùng
8 Address nvarchar (255) Địa chỉ người dùng
9 Avatar varchar (max) Ảnh đại diện
11 LastLogin datime Ngày cuối đăng nhập
12 CurrentSession varchar (500) Dữ liệu phiên làm việc hiện tại
Bảng 3 5 Thực thể GroupCall STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Code varchar (32) Khóa chính Mã nhóm cuộc gọi
2 Type varchar (32) Not null Kiểu cuộc gọi: signle, multi
3 Avatar varchar (max) Ảnh đại diện cuộc gọi
4 Name nvarchar (250) Tên cuộc gọi
5 Created datatime Not null Ngày tạo
6 CreatedBy varchar (32) Not null Tạo bởi người dùng
7 LastActive datetime Not null Ngày gọi cuối cùng
Bảng 3 6 Thực thể GroupUser STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Id bigint Khóa chính Mã nhóm người dùng
2 GroupCode varchar (32) Khóa ngoại tham chiếu bảng Group (Code) Mã nhóm
3 UserCode varchar (32) Khóa ngoại tham chiếu bảng User (Code)
Bảng 3 7 Thực thể Message STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải
1 Id bigint Khóa chính Mã tin nhắn
Kiểu tin nhắn: text, Attachment
Khóa ngoại tham chiếu bảng Group (Code)
4 Content nvarchar (max) Nội dung tin nhắn
5 Path nvarchar (255) Đường dẫn các tệp
6 Created datetime Not null Ngày tạo tin nhắn
Khóa ngoại tham chiếu bảng User (Code)
Mã người dùng tạo tin nhắn
3.2.2 Thiết kế sơ đồ màn hình
Hình 3 26 Sơ đồ màn hình ứng dụng
CÀI ĐẶT CHƯƠNG TRÌNH
Giao Diện Đăng Ký
Người dùng sau khi nhập đầy đủ thông tin vào form bao gồm họ và tên, tên đăng nhập, email, số điện thoại và mật khẩu, người dùng cần nhấn vào nút Đăng Ký để thực hiện tạo tài khoản Để đảm bảo tính chính xác, các trường thông tin đều là bắt buộc và không được bỏ trống Nếu người dùng thấy thiếu sót ở bất kỳ trường thông tin nào, ứng dụng sẽ thông báo lỗi và không thể đăng ký thành công Ngược lại, nếu nhập đúng thì ứng dụng sẽ thông báo việc đăng ký thành công và tự động điều hướng về trang đăng nhập
Hình 4 1 Giao diện trang đăng ký
Giao Diện Đăng Nhập
Để sử dụng được ứng dụng, người dùng cần phải điền tên đăng nhập và mật khẩu ở các trường thông tin tương ứng để đăng nhập ứng dụng Nhấn vào nút Đăng nhập khi đã hoàn tất việc nhập liệu và tất cả các trường thông tin đều là bắt buộc, nếu có bất kỳ trường nào bị bỏ trống, ứng dụng sẽ không thể cho phép đăng nhập và hiển thị thông báo lỗi Ngược lại, trường hợp nhập đúng thông tin, khi đó sẽ nhận được thông báo đăng nhập thành công từ ứng dụng và được chuyển hướng đến trang chủ
Hình 4 2 Giao diện trang đăng nhập
Giao Diện Trang Chủ
Ngay sau khi hoàn thành đăng nhập, ứng dụng sẽ được điều hướng đến trang chủ
Và sẽ mặc định hiển thị danh sách cuộc trò chuyện
Hình 4 3 Giao diện trang chủ
Giao Diện Thông Tin Người Dùng
Thông tin cá nhân của có thể được chỉnh sửa trên form này Người dùng cần điền thông tin cần sửa vào mẫu thông tin và bấm nút Cập nhật để lưu các thay đổi Nếu thông
39 tin nhập vào đúng định dạng, ứng dụng thông báo cập nhật thành công Ngược lại, ứng dụng sẽ hiển thị thông báo lỗi và không thực hiện được cập nhật Ngoài ra, khi người dùng nhấn nút Đăng xuất, ứng dụng sẽ tự động đăng xuất tài khoản và chuyển trang về trang đăng nhập
Hình 4 4 Giao diện thông tin cá nhân
Giao Diện Thêm Liên Hệ
Chức năng của form này là thêm mới liên hệ Người dùng chỉ cần nhập tên liên hệ muốn thêm vào ô tìm kiếm và sau đó nhấn nút “Tìm kiếm” Ứng dụng sẽ hiển thị cho người dùng toàn bộ kết quả tìm kiếm theo từ khóa này Sau đó, người dùng có thể chọn thêm liên hệ bằng cách nhấn biểu tượng "Thêm" hoặc bấm nút "Hủy" để đóng form nếu không muốn thực hiện thao tác này
Hình 4 5 Giao diện thêm liên hệ
Giao Diện Tạo Nhóm
Chức năng tạo nhóm được thực hiện trên trang này Để tạo nhóm, người dùng cần nhập tên nhóm vào ô “Tên nhóm” và thêm liên hệ vào danh sách nhóm bằng cách nhấn vào biểu tượng “Thêm” thành viên Sau khi chỉnh sửa danh sách thành viên, người dùng có thể bấm nút Tạo nhóm để tạo nhóm trò chuyện Nếu danh sách thành viên hoặc tên nhóm trống, ứng dụng sẽ thông báo lỗi Ngược lại, khi tạo nhóm thành công, ứng dụng sẽ cho người dùng biết thông qua thông báo thành công Để xóa thành viên khỏi danh sách nhóm, người dùng có thể bấm vào biểu tượng dấu “ x ” bên cạnh tên thành viên đã thêm
Hình 4 6 Giao diện tạo nhóm
Giao Diện Chi Tiết Cuộc Trò Chuyện
Người dùng nhấn vào cuộc trò chuyện ở danh dách tin nhắn, tất cả tin nhắn đã gửi sẽ hiển thị ở trang này
- Gửi tin nhắn văn bản : Người dùng cần nhập nội dung tin nhắn (có thể là văn bản hoặc emoji) vào ô tin nhắn, sau đó nhấn vào biểu tượng Gửi Tin nhắn sẽ được gửi đi ngay sau khi người dùng bấm vào biểu tượng Gửi
Hình 4 7 Giao diện chi tiết tin nhắn
Hình 4 8 Giao diện gửi tin nhắn văn bản
- Gửi tệp đính kèm: Khi người dùng muốn chia sẻ một tệp tin, họ có thể nhấn vào biểu tượng đính kèm tệp và chọn tệp tin cần gửi Việc gửi tệp tin sẽ được ứng dụng xử lý một cách tự động, tuy nhiên chỉ những tệp tin đúng định dạng mới có thể được gửi đi Khi người dùng chọn một tệp tin cần gửi đi, ứng dụng tự động
42 kiểm tra định dạng của tệp tin đó Nếu tệp tin có định dạng phù hợp thì ứng dụng sẽ tự động gửi tệp tin đó đi đến đích mà người dùng đã chọn Tuy nhiên, nếu tệp tin không đúng định dạng ứng dụng sẽ không thể gửi được tệp tin đó và sẽ đưa ra thông báo lỗi cho người dùng
Hình 4 9 Giao diện gửi tin nhắn tệp đính kèm
- Gửi ảnh: Người dùng nhấn vào biểu tượng ảnh và chọn bức ảnh cần gửi Khi người dùng chọn được bức ảnh, ứng dụng sẽ kiểm tra định dạng của ảnh, nếu đúng định dạng thì ứng dụng sẽ tự động gửi ảnh đến đích mà người dùng đã chọn Tuy nhiên, nếu ảnh không đúng định dạng ứng dụng sẽ không thể gửi ảnh được và đưa ra thông báo lỗi cho người dùng Việc gửi ảnh rất hữu ích trong nhiều trường hợp, giúp người dùng dễ dàng chia sẻ trải nghiệm hình ảnh và cảm xúc của họ
Hình 4 10 Giao diện gửi tin nhắn ảnh
- Tải tệp đã gửi: Khi người dùng muốn tải về một tệp tin trên ứng dụng, họ có thể nhấn vào biểu tượng Tải xuống để tiến hành thao tác này Khi đã nhấn vào, ứng dụng tự động tải xuống tệp tin đó về thiết bị của họ
- Thông tin nhóm: Khi muốn xem thông tin chi tiết về một cuộc trò chuyện, họ có thể nhấn vào biểu tượng ⋮ trong chi tiết cuộc trò chuyện Nếu cuộc trò chuyện chỉ có hai thành viên tham gia, thông tin về người trò chuyện cùng sẽ được hiển thị mặc định Tuy nhiên, nếu cuộc trò chuyện có nhiều hơn hai thành viên, danh sách các thành viên sẽ được hiển thị cùng với khả năng cập nhật ảnh đại diện của nhóm Việc này sẽ giúp người dùng quản lý thành viên trong cuộc trò chuyện dễ dàng, tạo ra một không gian thân thiện và tiện lợi để trò chuyện với mọi người
Hình 4 11 Giao diện danh sách thành viên trong nhóm
- Cuộc gọi video: Trong trường hợp cuộc trò chuyện chỉ có hai thành viên, ứng dụng sẽ hiển thị biểu tượng cuộc gọi video và cho phép người dùng nhấn vào để bắt đầu cuộc gọi với người trò chuyện của họ Việc này sẽ đem đến cho người dùng một trải nghiệm giao tiếp trực tuyến chân thực và thuận lợi
Hình 4 12 Giao diện thông tin người liên hệ trong tin nhắn
Giao Diện Cuộc Gọi
Khi truy cập vào trang chủ, người dùng có thể bấm vào tab "Cuộc gọi" để xem đầy đủ toàn bộ lịch sử cuộc gọi Chi tiết lịch sử cuộc gọi sẽ được hiển thị khi người dùng chọn xem, bao gồm thông tin về trạng thái các cuộc gọi đến, gọi đi và gọi nhỡ
Hình 4 13 Giao diện cuộc gọi
Có thể nhấn vào biểu tượng Gọi để bắt đầu cuộc gọi Người được gọi sẽ nhận được thông báo có cuộc gọi đến Nếu muốn hủy cuộc gọi, người dùng nhấn vào nút Hủy Nếu ngược lại, người dùng nhấn vào nút Đồng ý, ứng dụng sẽ chuyển sang màn hình video call Khi muốn kết thúc, người dùng nhấn vào nút Đóng cuộc gọi để kết thúc cuộc trò chuyện video
Hình 4 14 Thông báo cuộc gọi đến
Hình 4 15 Phòng trò chuyện video
Giao Diện Danh Bạ
Khi nhấn vào tab "Danh bạ" trên giao diện, người dùng sẽ được chuyển đến danh sách các liên hệ đã lưu trữ Tại đây, người dùng có thể chọn một liên hệ cụ thể để xem thông tin chi tiết về người đó Trong trang thông tin liên hệ, người dùng có thể thực hiện các hoạt động nhắn tin hoặc thực hiện cuộc gọi video bằng cách chọn các lựa chọn tương ứng.
