Đồ án tìm hiểu react native và xây dựng ứng dụng minh họa

ĐẠ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 ĐỒ ÁN TÌM HIỂU REACT NATIVE VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: TH.S NGUYỄN CƠNG HOAN Sinh viên thực hiện: ĐỒN NGỌC LÃM – MSV: 19521737 Tp Hồ Chí Minh, Tháng năm 2023 LỜI CẢM ƠN Nhóm chúng em xin gửi lời cảm ơn chân thành tri ân sâu sắc đến thầy hướng dẫn, tạo điều kiện cho nhóm chúng em hồn thành đồ án mơn Đồ án Trong vòng 11 tuần, qua buổi học, nhờ dẫn nhiệt tình thầy, chúng em tiếp thu kiến thức quan trọng, bổ ích góp ý chân thành để làm đồ án hoàn chỉnh Trong khoảng thời gian thực đồ án, chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết quy trình để tạo sản phẩm phần mềm Bên cạnh đó, chúng em xin cảm ơn bạn bè lớp động viên, thảo luận góp ý cho nhóm đồng thời khơi thêm nguồn động lực cho nhóm suốt q trình đầy khó khăn Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song báo cáo nhóm chúng em chắn khơng tránh khỏi thiếu sót, chúng em mong nhận thơng cảm góp ý chân thành từ Nhóm em xin chân thành cảm ơn Thành phố Hồ Chí Minh, tháng năm 2023 MỤC LỤC Chương GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNH 1.1 Bài toán cần giải Chương CÔNG NGHỆ 2.1 React Native 2.1.1 2.1.2 Khái niệm Tại lại chọn React Native 2.3 WebRTC 14 2.3.1 WebRTC gì? 14 2.3.2 Lịch sử WebRTC 14 2.3.3 WebRTC dùng để làm gì? 15 2.3.4 Lợi ích WebRTC 16 2.3.5 Ưu nhược điểm WebRTC 17 2.3.6 Cách thức hoạt động WebRTC 20 2.3.7 Các phần WebRTC chức WebRTC API gì? 21 Chương XÁC ĐINH MƠ HÌNH HĨA YÊU CẦU 23 3.1 Phân loại 23 3.1.1 Danh sách yêu cầu nghiệp vụ 23 3.2 Sơ đồ lớp mức phân tích 24 3.3 Sơ đồ Usecase 24 Chương THIẾT KẾ HỆ THỐNG 25 4.1 Kiến trúc hệ thống 25 Chương THIẾT KẾ GIAO DIỆN 25 5.1 Danh sách hình 25 5.2 Mơ tả chi tiết hình 26 5.2.1 Màn hình Đăng nhập 26 5.2.2 Màn hình Home 27 5.2.3 Màn hình VideoCall 28 5.2.4 Màn hình Chat 29 Chương CÀI ĐẶT VÀ KIỂM THỬ 30 6.1 Môi trường cài đặt 30 6.2 Kiểm thử phần mềm 30 6.3 Hướng dẫn cài đặt 30 Chương KẾT LUẬN 31 7.1 Kết đạt 31 7.2 Hướng phát triển tương lai 31 MỤC LỤC ẢNH Hình 2.1-1: Phát triển ứng dụng nhanh Hình 2.1-2: Phát triển đa ứng dụng Hình 2.1-3: Kiến trúc cũ Hình 2.1-4: Kiến trúc 10 Hình 2.3-1: Là dự án mã nguồn mở Google 14 Hình 2.3-2: WebRTC ứng dụng nhiều lĩnh vực 15 Hình 2.3-3: WebRTC mang đến nhiều lợi ích cho người dùng lập trình viên16 Hình 2.3-4: Hỗ trợ đa tảng, đa trình duyệt thiết bị 18 Hình 2.3-5: WebRTC chưa hỗ trợ tồn diện tất trình duyệt 19 Hình 2.3-6: Mạng lưới hoạt động đối tượng theo hình thức peer – to – peer 20 Hình 2.3-7: Cung cấp tính truyền liệu thời gian thực 21 Hình 3.2-1: Sơ đồ lớp mức phân tích 24 Hình 3.3-1: Sơ đồ usecase 24 Hình 5.2-1: Màn hình Đăng nhập 26 Hình 5.2-2: Màn hình Home 27 Hình 5.2-3: Màn hình Videocall 28 Hình 5.2-4: Màn hình chattting 29 MỤC LỤC BẢNG Bảng 3.1-1: Biểu mẫu 23 Bảng 3.1-2: Biểu mẫu 23 Bảng 3.1-3: Biểu mẫu 23 Bảng 5.1-1: Danh sách hình 25 Bảng 5.2-1: Mơ tả chi tiết hình Đăng nhập 26 Bảng 5.2-2: Mơ tả chi tiết hình Home 27 Bảng 5.2-3: Mô tả chi tiết hình VideoCall 28 Bảng 5.2-4: Mô tả chi tiết hình Chatting 29 TÓM TẮT ĐỒ ÁN Đồ án với đề tài “Xây dựng ứng dụng video chat app” tập trung vào phân tích thực trạng ứng dụng cơng nghệ để từ xây dụng ứng dụng ứng dụng mobile sử dụng mà khơng u cầu q nhiều phần cứng, phần mềm Đề tài việc tìm hiểu thực trạng, đưa vấn đề cịn tồn đọng cải thiện Xác định mục tiêu, phạm vi đề tài chức cần có hệ thống Ngồi việc xử lý nghiệp vụ cho hệ thống, nhóm tìm hiểu, so sánh lựa chọn công nghệ phù hợp giúp nâng cao trải nghiệm người dùng, tối ưu chi phí phát triển triển khai Nhờ việc phân tích yêu cầu rõ ràng, thời gian phát triển ngắn yêu cầu, tính thay đổi, q trình phát triển đề tài sử dụng mơ hình V-model cho việc xây dựng hệ thống Kết thu giai đoạn thiết kế kiến trúc hệ thống, sở liệu, giao diện thể sơ đồ người dùng, sơ đồ thiết kế sử dụng công cụ Figma Draw.io Trong giai đoạn thực hiện, client server phát triển song song sử dụng thư viện React cho client ứng dụng socket IO, WebRTC để phục vụ cho dự án, công cụ phát triển VS Code công cụ quản lý source code github Công việc kiểm thử unit test thực xuyên suốt trình phát triển kiểm thử tích hợp cuối giai đoạn Trong giai đoạn vận hành, ứng dụng triển khai lên máy chủ EAS Phần cuối đồ án trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho hệ thống tương lai Nội dung đồ án trình bày chương: • Chương 01: Giới thiệu tốn cần giải quyết, mơ tả quy trình thực cơng việc Trình bày sơ tốn cần giải quyết, quy trình thực đề tài • Chương 02: Cơ sở lý thuyết, tổng quan công nghệ Giớ thiệu giải thuật, công nghệ, tảng sử dụng đồ án • Chương 03: Phân tích thiết kế ứng dụng Phân tích yêu cầu, thiết kế, thực triển khai ứng dụng • Chương 04: Kết luận • Chương 05: Cài đặt thử nghiệm Những kết đạt sau kết thúc đồ án Những hạn chế, khó khăn trình phát triển đồ án nêu hướng phát triển tương lai Chương GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNH 1.1 Bài tốn cần giải • Xây dựng ứng dụng cho phép người dùng đăng nhập vào ứng dụng tham gia gọi video nhóm nhắn tin trao đổi thời gian thực gọi • Đối tượng hướng đến: Tất người dùng có tài khoản gmail có mục đích tham gia gọi thoại video nhóm cá nhân • Mục đích: Tạo mơi trường trị chuyện, giao lưu, trao đổi thơng tin, tài liệu Tạo điều kiện thuận lợi để người kết nối, liên lạc cộng tác thơng qua ứng dụng • Hình thức phát triển: App mobile 1.2 Quy trình thực App xây dựng bao gồm nội dung bản: • Đăng nhập tài khoản Google, đăng xuất • Tham gia room trị chuyện room code • Nhắn tin 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 hố • Thiết kế hệ thống • Thiết kế liệu • Thiết kế giao diện • Lập trình • Thử nghiệm sửa lỗi • Phát hành app, bảo trì Chương CƠNG NGHỆ 2.1 React Native 2.1.1 Khái niệm Được phát triển Facebook, React Native framework hướng đến phát triển ứng dụng di động đa tảng Với trợ giúp React Native, lập trình viên (developer) sử dụng JavaScript để tạo mobile apps (ứng dụng di động) hỗ trợ cho tảng Android iOS Instagram, Facebook, Skype… ứng dụng bật sử dụng React Native 2.1.2 Tại lại chọn React Native 2.1.2.1 Hiệu suất tuyệt vời React native khơng nhanh ứng dụng gốc thực xây dựng ngôn ngữ quen thuộc Java, Objective-C C # Tuy nhiên, bạn có hiệu suất gần ngơn ngữ cung cấp cho bạn thành phần gốc, Chế độ xem Văn Ứng dụng dành cho thiết bị di động dựa React Native ứng dụng web HTML5, hybrid di động Thay vào đó, ứng dụng di động thực Bạn nâng hiệu suất ứng dụng React Native lên tầm cao cách tối ưu hóa ứng dụng bạn mã gốc Có, React Native cho phép bạn sử dụng mã gốc Để có hiệu suất tối đa, bạn xây dựng số tính ứng dụng mã gốc số tính với React Native 2.1.2.2 Giao diện người dùng phong phú React Native cho phép bạn tạo UI độc đáo, bắt mắt thông qua thành phần khai báo xây dựng sẵn, chẳng hạn Picker, Nút, Thanh trượt, Chuyển đổi, v.v Bạn tạo thành phần riêng bạn với TouchableNativeFeedback TouchableOpacity Có nhiều thành phần dành riêng cho iOS Android có sẵn để giúp thiết bị hoạt động hiệu điện thoại di động Android iOS Ví dụ: • 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 cho bạn thành phần cho văn bản, hình ảnh, đầu vào bàn phím, danh sách cuộn, tiến trình, hình động, bảng tạm, liên kết, v.v Các thành phần tăng tốc đáng kể q trình phát triển ứng dụng tính Tải lại nóng giúp bạn tiết kiệm nhiều 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 tồn mã Phản ứng thư viện địa Redux (để xử lý trạng thái ứng dụng bạn) Phản ứng tuyệt vời địa (danh sách thành phần trình diễn) giúp bạn hồn thành công việc phát triển ứng dụng di động nhanh Cơng cụ phát triển Hạt nhân để viết mã, Yoga để xây dựng bố trí, Lính gác để theo dõi lỗi cố, Công cụ phát triển React để gỡ lỗi làm cho trình phát triển React Native dễ dàng nhanh nhiều Các công cụ React Native tuyệt vời khác bao gồm Mã VS, Đốt cháy, Hội chợ triển lãm, Bugsnag • 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 điều kiện đường truyền mạng • Ưu điểm khác: Viết JavaScripts nên dễ dàng tiếp cận sử dụng; hồn tồn miễn phí; bảo mật cao… 2.3.5.2 Nhược điểm Hình 2.3-5: WebRTC chưa hỗ trợ tồn diện tất trình duyệt • WebRTC bị cản NAT tường lửa cố gắng thực kết nối P2P • Khơng có chế báo hiệu cài sẵn WebRTC tạo kết nối P2P trình duyệt • WebRTC chưa thức hồn thiện, số trình duyệt IE, Safari chưa thực hỗ trợ tốt • Các hãng trình duyệt chưa thống chuẩn video sử dụng cho WebRTC • Số lượng hàm API WebRTC hỗ trợ cho trình duyệt khác nhau, tăng rủi ro phát sinh lỗi sử dụng trình duyệt khác 19 2.3.6 Cách thức hoạt động WebRTC Trước đến với cách thức hoạt động, bạn nên hiểu thuật ngữ “peer–to–peer” Trong kỹ thuật, mạng ngang hàng/mạng đồng đẳng Khi theo hình thức này, bạn khơng thấy khái niệm máy chủ, máy khách Hình 2.3-6: Mạng lưới hoạt động đối tượng theo hình thức peer – to – peer Tất đóng góp vai trị bình đẳng, nút hệ thống Từng điểm vừa máy chủ máy khách mối tương quan với đối tượng khác Trong WebRTC, kết nối peer–to–peer tạo ra, đại diện interface RTCPeerConnection Khi đường truyền thiết lập mở, luồng MediaStreams RTCDataChannels thêm vào Bạn hiểu thuật ngữ phần 20 2.3.7 Các phần WebRTC chức WebRTC API gì? Hình 2.3-7: Cung cấp tính truyền liệu thời gian thực 2.3.7.1 MediaStream MediaStream stream liệu âm hình ảnh, cách gọi hàm getUserMedia để khởi tạo làm việc cục MediaStream cho phép truy cập vào stream máy tính sau kết nối WebRTC thiết lập với máy tính khác Một MediaStream có input output với input dùng để lấy liệu hình ảnh âm local output dùng để hiển thị liệu lên view RTCPeerConnection sử dụng 2.3.7.2 RTCDataChannel Đúng với tên mình, RTCDataChannel kênh hai chiều chịu trách nhiệm trao đổi liệu thời gian thực RTCDataChannel trao đổi liệu dạng text, chia sẻ tệp P2P loại khác mà không chứa liệu nghe nhìn(âm thanh, hình ảnh) Khả trao đổi thơng tin nhanh chóng, an tồn, đáng tin 21 khiến RTCDataChannel khai thác để xây dựng giải pháp hiệu chi phí 2.3.7.3 RTCPeerConnection Là phần quan trọng giúp kết nối MediaStream RTCDataChannel trở thành WebRTC RTCPeerConnection API giúp kết nối hai trình duyệt, cung cấp phương thức để kết nối, trì kết nối đóng kết nối khơng nhu cầu sử dụng 22 Chương XÁC ĐINH MƠ HÌNH HĨA U CẦU Phân loại 3.1 3.1.1 Danh sách yêu cầu nghiệp vụ STT Nghiệp vụ Đăng nhập google Tham gia metting Nhắn tin thảo luận nhóm Biểu mẫu BM1 BM2 BM3 3.1.2 Biểu mẫu 3.1.2.1 BM1 Biểu mẫu đăng nhập google Tài khoản google Bảng 3.1-1: Biểu mẫu 3.1.2.2 BM2 Tham gia metting RoomCode Bảng 3.1-2: Biểu mẫu 3.1.2.3 BM3 Nhắn tin thảo luận nhóm YourMessage OtherPeople Sender Bảng 3.1-3: Biểu mẫu 3.1.3 Quy định QĐ1: Tài khoản đăng nhập bắt buộc tài khoản Google 23 Quy định QĐ1 QĐ2 QĐ3 QĐ2: RoomCode nhất, dùng dùng đểu tham gia meeting có RoomCode QĐ3: Nội dung tin nhắt hiển thị tham gia meeting 3.2 Sơ đồ lớp mức phân tích Hình 3.2-1: Sơ đồ lớp mức phân tích 3.3 Sơ đồ Usecase Hình 3.3-1: Sơ đồ usecase 24 Chương THIẾT KẾ HỆ THỐNG 4.1 Kiến trúc hệ thống Mơ hình Client-Server: • Lớp Client: Kết nối đến API hiển thị giao diện người dùng Cho phép người dùng nhập vào xuất từ sở liệu tương ứng với quyền truy cập người dùng có u cầu • Lớp Server: Quản lý chứa toàn liệu phần mềm Đồng thời xử lý yêu cầu nhập/xuất gửi xuống từ lớp Client Ứng dụng dùng làm lớp Server Express Chương THIẾT KẾ GIAO DIỆN 5.1 STT Danh sách hình Tên hình Ý nghĩa/Ghi Đăng nhập Đăng nhập vào hệ thống Home Trang ứng dụng VideoCall Phịng gọi điện người dùng Chat Nơi nhắn tin người dùng Bảng 5.1-1: Danh sách hình 25 5.2 Mơ tả chi tiết hình 5.2.1 Màn hình Đăng nhập Hình 5.2-1: Màn hình Đăng nhập STT Tên thành phần Google Sign-in Loại Button Cách sử dụng Đăng nhập tài khản Google Bảng 5.2-1: Mô tả chi tiết hình Đăng nhập 26 5.2.2 Màn hình Home Hình 5.2-2: Màn hình Home STT Tên thành phần Loại Cách sử dụng RoomCode TextInput Nhập mã phòng gọi thoại Join call Button Tham gia vào phòng gọi thoại Sign out Button Đăng xuất tài khoản Bảng 5.2-2: Mơ tả chi tiết hình Home 27 5.2.3 Màn hình VideoCall Hình 5.2-3: Màn hình Videocall STT Tên thành phần Loại Cách sử dụng Thành viên ButtonIcon Xem danh sách người tham gia Menu group Menu Các chức gọi thoại Chatting ButtonIcon Người dùng nhắn tin phịng thoại Bảng 5.2-3: Mơ tả chi tiết hình VideoCall 28 5.2.4 Màn hình Chat Hình 5.2-4: Màn hình chattting STT Tên thành phần Loại Cách sử dụng Thanh chat TextInput Người dùng nhập nội dung tin nhắn Send ButtonIcon Các chức gọi thoại Close Text Người dùng phịng nhắn tin Bảng 5.2-4: Mơ tả chi tiết hình Chatting 29 Chương CÀI ĐẶT VÀ KIỂM THỬ 6.1 Môi trường cài đặt • NodeJs version 16 6.2 Kiểm thử phần mềm Nhóm có tiến hành kiểm thử phần mềm sau lần build chức năng, tăng tính đắn tốc độ sửa lỗi chương trình Ứng dụng chạy thử nghiệm thiết bị nhiều độ phân giải khác (responsive) • Manual testing: whitebox, blackbox theory 6.3 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/ Bước 2: Cài đặt dứng dụng Android Studio từ https://developer.android.com/studio cài đặt môi trường theo hướng dẫn https://reactnative.dev/docs/environment-setup?guide=native Bước 3: Clone source code từ github Bước 4: Install package cần thiết với 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 30 Chương KẾT LUẬN 7.1 Kết đạt Với yêu cầu đặt cho đề tài “Tìm hiểu React Native xây dựng ứng dụng minh họa” mơn Đồ án 2, Nhóm tiến hành tìm hiểu sở lý thuyết, phân tích, thiết kế cuối cài đặt kiểm thử thành công phần mềm Kết hợp với việc nghiên cứu sáng tạo chức năng, nhóm triển khai để hồn thành báo cáo Nhóm tự đánh giá đề tài cho môn học thành công, với việc đạt mục tiêu đặt mà thực sản phẩm có nhiều chức Đúng với mục tiêu đặt ban đầu, nhóm đã: • Ứng dụng kiến thức lý thuyết thực hành vào quy trình phát triển phần mềm thực tiễn, từ xây dựng tư lĩnh vực Cơng nghệ phần mềm mơi trường làm việc nhóm • Giải vấn đề đặt phần mơ tả tốn, hồn thiện sản phẩm đề tài phần mềm trực tuyến cách tốt Xây dựng chương trình hồn thiện chức năng, mặt UI UX, đáp ứng nhu cầu thực tế để giải vấn đề; giao diện trực quan, đẹp mắt, thân thiện đáp ứng tính đắn tính tiến hóa việc thiết kế liệu Ngồi ra, từ q trình làm sản phẩm, nhóm có hội tìm hiểu rõ vận dụng kiến thức học môn học trước, đồng thời nắm quy trình phát triển phần mềm với nghiên cứu kĩ thuật công nghệ, phục vụ môn học tới mà cịn hành trình làm việc lĩnh vực cơng nghệ thông tin tương lai 7.2 Hướng phát triển tương lai • Xây dựng tính đăng ký, đăng nhập nhiều khác • Thêm tính lưu giữ nhóm, lịch sử, hiển thị danh sách nhóm lưu • Thêm tính kết bạn, nhắn tín cho bạn bè 31 TÀI LIỆU THAM KHẢO [React native] 1- Hồng Nhi (2020), “React Native gì? Tổng quan ưu nhược điểm React Native”, https://wiki.tino.org/, link truy cập: https://blog.tinohost.com/reactnative-la-gi/ (Truy cập lần cuối: 5/7/2023) 2- Jeffrey Wilson (2020), “7 lý chọn React Native cho phát triển ứng dụng di động”, https://lordlikely.com/, link truy cập: https://lordlikely.com/phattrin/7-ly-do-chn-react-native-cho-phat-trin-ng-dng-di/ (Truy cập lần cuối: 5/7/2023) 3- Hà Anh Đức (2020), “Tái kiến trúc React Native năm 2020”, https://viblo.asia/, link truy cập: https://viblo.asia/p/tai-kien-truc-react-nativetrong-nam-2020-RQqKLLD0K7z (Truy cập lần cuối: 5/7/2023) [Socket IO] 1- Vinh Phạm (2021), “Socket IO gì? Hướng dẫn sử dụng socket io bản”, https://bizflycloud.vn/, link truy cập: https://bizflycloud.vn/tin-tuc/socket-iola-gi-huong-dan-su-dung-socket-io-co-ban-20210330114148979.htm (Truy cập lần cuối 5/7/2023) 2- Trịnh Duy Thanh (2022), “Socket IO gì? Cách hoạt động socket io”, https://bkhost.vn/, link truy cập: https://bkhost.vn/blog/socket-io/ (Truy cập lần cuối: 5/7/2023) [WebRTC] 1- Mắt Bão (2021), “WebRTC gì? Cách viết ứng dụng gọi video WebRTC Firebase - Trung tâm hỗ trợ kỹ thuật | MATBAO.NET”, link truy cập : https://wiki.matbao.net/webrtc-la-gi-cach-viet-ung-dung-goi-video-bangwebrtc-va-firebase/#cac-phan-chinh-cua-webrtc-va-chuc-nang-cua-webrtcapi-la-gi (Truy cập lần cuối: 5/7/2023) 32 2- FPT Cloud (2023), “WebRTC gì? Thành phần & cách thức hoạt động WebRTC ”, https://fptcloud.com/, link truy cập: https://fptcloud.com/webrtc/ (Truy cập lần cuối : 5/7/2023) 33