Bài toán cần giải quyết
Xây dựng một ứng dụng cho phép người dùng đăng nhập và tham gia cuộc gọi video nhóm, đồng thời hỗ trợ nhắn tin trao đổi trong thời gian thực.
• Đối tượng hướng đến: Tất cả người dùng có tài khoản gmail có mục đích tham gia các cuộc gọi thoại video nhóm hoặc cá nhân
Mục đích của chúng tôi là xây dựng một môi trường thuận lợi cho việc trò chuyện, giao lưu và trao đổi thông tin, tài liệu Chúng tôi cam kết tạo điều kiện tốt nhất để mọi người có thể dễ dàng kết nối, liên lạc và hợp tác thông qua ứng dụng.
• Hình thức phát triển: App mobile
App được xây dựng bao gồm các nội dung cơ bản:
• Đăng nhập bằng tài khoản Google, đăng xuất
• Tham gia room trò chuyện bằng room code
• Nhắn tin trong cuộc trò chuyện
• Xem danh sách người tham gia
Các bước xây dựng App mobile:
• Xác định yêu cầu, mô hình hoá
• Thử nghiệm và sửa lỗi
• Phát hành app, bảo trì
CÔNG NGHỆ
React Native
2.1.1 Khái niệm Được phát triển bởi Facebook, React Native là một framework hướng đến phát triển ứng dụng di động đa nền tảng
With the assistance of React Native, developers can utilize JavaScript to create mobile applications that support both Android and iOS platforms Notable applications like Instagram, Facebook, and Skype prominently leverage React Native for their development.
2.1.2 Tại sao lại chọn React Native
React Native không nhanh bằng các ứng dụng gốc được phát triển bằng Java, Objective-C hay C#, nhưng vẫn mang lại hiệu suất gần tương đương nhờ vào việc sử dụng các thành phần gốc, chế độ xem và văn bản Ứng dụng di động xây dựng trên nền tảng React Native không phải là ứng dụng web HTML5, hybrid hay di động, mà thực sự là một ứng dụng di động.
Nâng cao hiệu suất ứng dụng React Native của bạn bằng cách tối ưu hóa với mã gốc React Native cho phép tích hợp mã gốc, giúp bạn xây dựng một số tính năng hiệu suất cao trong ứng dụng Kết hợp mã gốc và React Native sẽ mang lại hiệu suất tối đa cho ứng dụng của bạn.
2.1.2.2 Giao diện người dùng phong phú
React Native cho phép bạn phát triển giao diện người dùng độc đáo và hấp dẫn nhờ vào các thành phần được xây dựng sẵn như Picker, Nút, Thanh trượt và Chuyển đổi Bên cạnh đó, bạn còn có thể tạo ra các thành phần tùy chỉnh của riêng mình bằng cách sử dụng TouchableNativeFeedback.
TouchableOpacity Có nhiều thành phần dành riêng cho iOS và Android có sẵn để giúp thiết bị hoạt động hiệu quả trên điện thoại di động Android và iOS
• iOS – ActionSheetIOS, AlertIOS, DatePickerIOS, ImagePickerIOS, ProgressViewIOS, PushNotificationIOS, SegmentedControlIOS, v.v
• Android – DatePickerAndroid, DrawerLayoutAndroid, RightsAndroid, ProgressBarAndroid, TimePickerAndroid, ToastAndroid, Thanh công cụ Android, View Page Android, v.v
2.1.2.3 Phát triển ứng dụng nhanh
React Native cung cấp nhiều thành phần hữu ích như văn bản, hình ảnh, đầu vào bàn phím, danh sách cuộn, thanh tiến trình, hình động, bảng tạm và liên kết, giúp tăng tốc quá trình phát triển ứng dụng Tính năng Tải lại nóng của React Native cũng tiết kiệm thời gian, cho phép bạn tải lại ứng dụng mà không cần biên dịch lại toàn bộ mã.
Phản ứng thư viện bản địa như Redux giúp quản lý trạng thái ứng dụng hiệu quả, trong khi Phản ứng tuyệt vời bản địa cung cấp danh sách các thành phần và bản trình diễn, từ đó hỗ trợ bạn hoàn thành quá trình phát triển ứng dụng di động nhanh chóng hơn.
Các công cụ phát triển như Hạt nhân, Yoga, Lính gác và công cụ gỡ lỗi React giúp quá trình phát triển React Native trở nên dễ dàng và nhanh chóng hơn Ngoài ra, các công cụ tuyệt vời khác như Mã VS, Đốt cháy, Hội chợ triển lãm và Bugsnag cũng hỗ trợ hiệu quả cho các nhà phát triển.
Hình 2.1-1: Phát triển ứng dụng nhanh
2.1.2.4 Phát triển da ứng dụng
Lập trình một lần và áp dụng cho nhiều nền tảng giúp tiết kiệm thời gian và chi phí Tuy nhiên, cần lưu ý rằng vẫn cần thực hiện một số điều chỉnh riêng cho từng nền tảng.
Hình 2.1-2: Phát triển đa ứng dụng
2.1.2.5 Hỗ trợ cộng đồng mạnh mẽ
Hơn 2.000 người đóng góp với hơn 85.000 ngôi sao trên GitHub
Các công ty như Callstack, Biệt thự phần mềm, Microsoft và Màu đỏ vô hạn đã đóng góp đáng kể cho khuôn khổ React Native Bạn có thể khám phá nhiều thành phần và thư viện React Native được phát triển bởi cộng đồng các nhà phát triển trên các trang web như Mã thông báo và Thư mục gốc.
Bạn có thể tìm kiếm sự trợ giúp từ các nền tảng như StackOverflow, Reddit hoặc Bộ giải mã Ngoài ra, Cộng đồng Reactiflux trên Discord, các nhóm Facebook về React, và cộng đồng Spectrum cũng là những nguồn hỗ trợ quý giá cho bạn.
Tài liệu chính thức rất hữu ích cho người mới bắt đầu, bao gồm cả mã nguồn ví dụ Ngoài việc tham khảo tài liệu chính thức, bạn cũng có thể khám phá các phương pháp khác để thực hành và nâng cao kỹ năng của mình.
React Native là một giải pháp platform-agnostic, cho phép các developer viết code bằng Javascript với ReactJS Framework này sử dụng cơ chế riêng để biên dịch các React Element, giúp hệ điều hành hiểu được.
• Hiển thị chính xác giao diện người dùng
• Khả năng truy cập đến các thành phần native của hệ điều hành
Thông thường, đối với hệ điều hành Android/iOS, cơ chế hoạt động sẽ như sau:
Có 3 luồng chạy song song và riêng biệt trong mỗi ứng dụng React Native:
JS thread là khu vực mà toàn bộ mã Javascript được đọc và biên dịch, đảm nhiệm việc xử lý hầu hết các logic nghiệp vụ của ứng dụng Metro sẽ thực hiện việc đóng gói tất cả mã Javascript này.
8 thành một file duy nhất Phần code này sẽ được chuyển tới công cụ JavascriptCore (JSC) để có thể chạy được
Native thread là khu vực xử lý mã nguồn gốc, giao tiếp với JS Thread khi cần thay đổi giao diện người dùng hoặc truy cập các hàm gốc Native Thread có thể được chia thành Native UI và Native Modules, trong đó tất cả các Native Modules đều được khởi động khi ứng dụng được sử dụng Điều này có nghĩa là module Bluetooth luôn ở trạng thái kích hoạt bởi React Native, ngay cả khi không có nhu cầu sử dụng.
Shadow Thread là nơi tính toán layout, sử dụng Layout Engine Yoga của Facebook để xử lý flexbox layout và gửi kết quả về Native UI Giao tiếp giữa JS thread và Native thread diễn ra qua một Bridge, với Module C++ được xây dựng trên hàng đợi bất đồng bộ Khi nhận dữ liệu từ JS thread hoặc Native thread, dữ liệu sẽ được tuần tự hóa thành JSON và chuyển qua hàng đợi, sau đó được giải mã khi đến đích Tất cả các thread dựa vào chuỗi tín hiệu JSON truyền bất đồng bộ qua Bridge, với mong muốn nhận được phản hồi trong tương lai, mặc dù không đảm bảo Việc này có thể dẫn đến tình trạng tắc nghẽn thông tin và thiếu phản hồi.
WebRTC
WebRTC là các API JavaScript cho phép giao tiếp thời gian thực mà không cần cài đặt plugin hay phần mềm hỗ trợ Công nghệ này hỗ trợ trình duyệt thực hiện Video Call, Voice Call và chuyển dữ liệu P2P (peer-to-peer) một cách dễ dàng và hiệu quả.
WebRTC, viết tắt của Web Real-Time Communication, là công nghệ được lập trình viên ưa chuộng, cho phép giao tiếp thời gian thực giữa các trình duyệt Công nghệ này hỗ trợ nhiều ứng dụng như gọi điện, video và chơi game Đặc biệt, WebRTC là sản phẩm của Tổ chức W3C (World Wide Web Consortium).
Hình 2.3-1: Là dự án mã nguồn mở của Google
WebRTC đã được hình thành ý tưởng từ những năm 2009 bởi nhóm kỹ sư Google
Hangouts Thay vì sử dụng Flash để truyền video, hình ảnh trên web, họ quyết định tự tạo ra một sản phẩm của riêng mình
Vào năm 2010, Google đã thâu tóm hai công ty On2 và Global IP Solutions (GIPS), từ đó công nghệ truyền dữ liệu thời gian thực trở thành nền tảng cho WebRTC Đến tháng 5 năm 2011, dự án mã nguồn mở WebRTC chính thức ra mắt, hỗ trợ giao tiếp thời gian thực giữa các trình duyệt.
W3C và Hiệp Hội Kỹ Sư Quốc Tế (IETF) đã hợp tác phát triển các giao thức kết nối thời gian thực, dẫn đến việc ra mắt sản phẩm WebRTC vào tháng 10 năm 2011 Đến tháng 11 cùng năm, Chrome 23 trở thành trình duyệt đầu tiên tích hợp sẵn WebRTC.
2.3.3 WebRTC dùng để làm gì?
Hình 2.3-2: WebRTC được ứng dụng trong nhiều lĩnh vực
WebRTC nổi bật với khả năng truyền tải video, âm thanh và dữ liệu theo thời gian thực giữa nhiều thiết bị mà không cần trung gian hay cài đặt thêm plugin.
Trang web Appear.in là một trong những nền tảng nổi bật sử dụng công nghệ WebRTC, cho phép người dùng tạo phòng chat video dễ dàng mà không cần cài đặt plugin hay đăng nhập tài khoản.
WebRTC không chỉ được ứng dụng trong các phần mềm mà còn được sử dụng để phát triển các trò chơi trên trình duyệt Người chơi chỉ cần một trình duyệt hỗ trợ WebRTC để tham gia, mà không cần phải thực hiện các bước cài đặt phức tạp.
Hình 2.3-3: WebRTC mang đến nhiều lợi ích cho cả người dùng và lập trình viên
• Mã nguồn mở miễn phí: WebRTC là một dự án mã nguồn mở miễn phí
Google cho biết đây là một công cụ truyền thông thời gian thực hoàn toàn miễn phí và có sẵn trên mọi trình duyệt
WebRTC hỗ trợ đa nền tảng, hoạt động hiệu quả trên hầu hết các trình duyệt của mọi hệ điều hành Công nghệ này cho phép lập trình viên viết mã HTML tương thích với cả máy tính và thiết bị di động.
• Bảo mật voice và video: Giao thức SRTP (Secure Real-Time Transport
Giao thức này được sử dụng để mã hóa và xác thực dữ liệu media, nhằm ngăn chặn khả năng bị nghe trộm trong quá trình thực hiện video hoặc giọng nói.
WebRTC được đánh giá cao nhờ khả năng hoạt động mà không cần plugin hay phần mềm hỗ trợ bên thứ ba, mang lại sự tiện lợi, tối ưu tốc độ và tiết kiệm chi phí cho người dùng.
• Tương đối dễ sử dụng: WebRTC có thể được tích hợp trong các dịch vụ web bằng cách dùng JavaScript APIs, các Framework có sẵn
WebRTC tối ưu hóa việc sử dụng băng thông, hỗ trợ đa dạng kiểu media và thiết bị đầu cuối khác nhau, đồng thời hoạt động hiệu quả trong mọi điều kiện mạng.
2.3.5 Ưu và nhược điểm WebRTC
Hình 2.3-4: Hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị
Google cung cấp một công cụ truyền thông thời gian thực miễn phí và hoàn toàn mã nguồn mở, cho phép người dùng dễ dàng truy cập trên mọi trình duyệt.
Hỗ trợ trên nhiều nền tảng: Mặc dù đang trong giai đoạn phát triển, nhưng khả năng hoạt động hiệu quả trên mọi trình duyệt và hệ điều hành cho phép lập trình viên viết mã HTML tương thích với cả máy tính và thiết bị di động.
• Bảo mật âm thanh và video: WebRTC sử dụng giao thức SRTP (Secure
Giao thức truyền tải thời gian thực (Real-Time Transport Protocol - RTP) được sử dụng để mã hóa và xác thực dữ liệu media, nhằm bảo vệ thông tin trong quá trình thực hiện các tác vụ video và âm thanh, đồng thời ngăn chặn các hoạt động nghe trộm.
Không cần sử dụng plugin hay phần mềm hỗ trợ, công cụ này nổi bật với khả năng linh hoạt, mang đến trải nghiệm tiện lợi cho người dùng Điều này giúp tối ưu hóa tốc độ và tiết kiệm chi phí hiệu quả.
• Dễ sử dụng: WebRTC được tích hợp trong các hàng loạt dịch vụ web bằng cách dùng JavaScript APIs, các Framework có sẵn
• Dùng băng thông hiệu quả: Công cụ sử dụng băng thông hiệu quả, hoạt động tốt trong mọi điều kiện đường truyền mạng
• Ưu điểm khác: Viết bằng JavaScripts nên dễ dàng tiếp cận và sử dụng; hoàn toàn miễn phí; bảo mật cao…
Hình 2.3-5: WebRTC chưa hỗ trợ toàn diện tất cả trình duyệt
• WebRTC bị cản bởi NAT và tường lửa khi cố gắng thực hiện kết nối P2P
• Không có cơ chế báo hiệu cài sẵn khi WebRTC tạo kết nối P2P giữa các trình duyệt
• WebRTC vẫn chưa chính thức hoàn thiện, một số trình duyệt như IE, Safari chưa thực sự được hỗ trợ tốt nhất
• Các hãng trình duyệt chưa thống nhất được chuẩn video sử dụng cho WebRTC
• Số lượng hàm API WebRTC hỗ trợ cho mỗi trình duyệt là khác nhau, tăng rủi ro phát sinh lỗi khi sử dụng trên các trình duyệt khác nhau
2.3.6 Cách thức hoạt động của WebRTC
XÁC ĐINH MÔ HÌNH HÓA YÊU CẦU
Phân loại
3.1.1 Danh sách các yêu cầu nghiệp vụ
STT Nghiệp vụ Biểu mẫu Quy định
1 Đăng nhập bằng google BM1 QĐ1
2 Tham gia metting BM2 QĐ2
3 Nhắn tin thảo luận nhóm BM3 QĐ3
Biểu mẫu đăng nhập bằng google
Nhắn tin thảo luận nhóm
QĐ1: Tài khoản đăng nhập bắt buộc là tài khoản Google
QĐ2: RoomCode là duy nhất, mọi dùng dùng đểu có thể tham gia meeting khi có
QĐ3: Nội dung tin nhắt chỉ được hiển thị trong khi tham gia meeting
Sơ đồ lớp mức phân tích
Hình 3.2-1: Sơ đồ lớp mức phân tích
Sơ đồ Usecase
THIẾT KẾ HỆ THỐNG
Kiến trúc hệ thống
Lớp Client chịu trách nhiệm kết nối với API và hiển thị giao diện người dùng, cho phép người dùng nhập dữ liệu và truy xuất thông tin từ cơ sở dữ liệu theo quyền truy cập của họ khi có yêu cầu.
Lớp Server đóng vai trò quan trọng trong việc quản lý và lưu trữ 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 và xuất từ lớp Client Ứng dụng được sử dụng cho lớp Server là Express, giúp tối ưu hóa hiệu suất và khả năng phản hồi của hệ thống.
THIẾT KẾ GIAO DIỆN
Danh sách các màn hình
STT Tên màn hình Ý nghĩa/Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Home Trang chính của ứng dụng
3 VideoCall Phòng gọi điện của người dùng
4 Chat Nơi nhắn tin của người dùng
Bảng 5.1-1: Danh sách các màn hình
Mô tả chi tiết các màn hình
Hình 5.2-1: Màn hình Đăng nhập
STT Tên thành phần Loại Cách sử dụng
1 Google Sign-in Button Đăng nhập bằng tài khản Google
Bảng 5.2-1: Mô tả chi tiết màn hình Đăng nhập
STT Tên thành phần Loại Cách sử dụng
1 RoomCode TextInput Nhập mã phòng gọi thoại
2 Join call Button Tham gia vào phòng gọi thoại
3 Sign out Button Đăng xuất tài khoản
Bảng 5.2-2: Mô tả chi tiết màn hình Home
STT Tên thành phần Loại Cách sử dụng
1 Thành viên ButtonIcon Xem danh sách người tham gia
2 Menu group Menu Các chức năng gọi thoại
3 Chatting ButtonIcon Người dùng nhắn tin trong phòng thoại
Bảng 5.2-3: Mô tả chi tiết màn hình VideoCall
STT Tên thành phần Loại Cách sử dụng
1 Thanh chat TextInput Người dùng nhập nội dung tin nhắn
2 Send ButtonIcon Các chức năng gọi thoại
3 Close Text Người dùng thoát phòng nhắn tin
Bảng 5.2-4: Mô tả chi tiết màn hình Chatting
CÀI ĐẶT VÀ KIỂM THỬ
Môi trường cài đặt
Kiểm thử phần mềm
Nhóm tiến hành kiểm thử phần mềm sau mỗi lần xây dựng chức năng, nhằm nâng cao độ chính xác và tốc độ sửa lỗi Ứng dụng đã được thử nghiệm trên nhiều thiết bị với các độ phân giải khác nhau để đảm bảo tính năng responsive.
• Manual testing: whitebox, blackbox theory
Hướng dẫn cài đặt
Bước 1: Cài đặt NodeJS từ https://nodejs.org/en/, JDK17 từ https://www.oracle.com/java/technologies/
To install Android Studio, visit [Android Developers](https://developer.android.com/studio) and follow the setup instructions provided in the [React Native environment setup guide](https://reactnative.dev/docs/environment-setup?guide=native).
Bước 3: Clone source code từ github
Bước 4: Install các package cần thiết với các lệnh: yarn install, yarn add @react-native-community/cli-platform-android
Bước 4: Khởi chạy môi trường development với lệnh: yarn run android