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 I HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C GIA THÀNH PHỐC GIA THÀNH PHỐ HỒ CHÍ MINH HỒ CHÍ MINH CHÍ MINH TRƯỜNGNG ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH I HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C CÔNG NGHỆ THÔNG TIN THÔNG TIN KHOA CÔNG NGHỆ THƠNG TIN PHẦN MỀMN MỀMM ĐỒ CHÍ MINH ÁN TÌM HIỂU REACT NATIVE U REACT NATIVE VÀ XÂY DỰNG ỨNG DỤNG MINH HỌANG ỨNG DỤNG MINH HỌANG DỤNG MINH HỌANG MINH H ỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH A Giảng viên hướng dẫn:ng viên hướng dẫn:ng dẫn:n: TH.S NGUYỄN CÔNG HOANN CÔNG HOAN Sinh viên thực hiện:c hiện:n: ĐỒN NGỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C LÃM – MSV: 19521737 Tp Hồ Chí Minh, Tháng năm 2023 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 1.ng GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH I THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH U BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH N GIẢI QUYẾT, MƠ TẢ QUY TRÌNH I QUYẾT, MƠ TẢ QUY TRÌNH T, MƠ TẢI QUYẾT, MƠ TẢ QUY TRÌNH QUY TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNHC HIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH N CÁC CƠNG VIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH C CHÍNH 1.1 Bài toán cần giải Chương 1.ng CƠNG NGHỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH 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ử WebRTCch sử WebRTC WebRTCa WebRTC 14 2.3.3 WebRTC dùng để làm gì? làm gì? 15 2.3.4 Lợi ích WebRTCi ích WebRTCa WebRTC 16 2.3.5 Ưu nhược điểm WebRTCu nhượi ích WebRTCc điể làm gì?m WebRTC 17 2.3.6 Cách thức hoạt động WebRTCc hoạt động WebRTCt động WebRTCng WebRTCa WebRTC .20 2.3.7 Các phần WebRTC chức WebRTC API n WebRTCa WebRTC chức hoạt động WebRTCc WebRTCa WebRTC API gì? 21 Chương 1.ng XÁC ĐINH MƠ HÌNH HĨA U CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH 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 1.ng THIẾT, MÔ TẢ QUY TRÌNH T KẾT, MƠ TẢ QUY TRÌNH HỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỐNGNG 25 4.1 Kiến trúc hệ thống .25 Chương 1.ng THIẾT, MƠ TẢ QUY TRÌNH T KẾT, MƠ TẢ QUY TRÌNH GIAO DIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH 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ậpp 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 1.ng CÀI ĐẶT VÀ KIỂM THỬT VÀ KIỂM THỬM THỬ 30 6.1 Môi trường cài đặtng cài đặtt 30 6.2 Kiể làm gì?m thử WebRTC phần WebRTC chức WebRTC API n mềmm 30 6.3 Hướng dẫn:ng dẫn:n cài đặtt 30 Chương 1.ng KẾT, MÔ TẢ QUY TRÌNH T LUẬNN 31 7.1 Kết đạt đượct quảng viên hướng dẫn: đạt động WebRTCt đượi ích WebRTCc 31 7.2 Hướng dẫn:ng phát triể làm gì?n tương 1.ng lai .31 MỤC LỤC ẢNH Hình 2.1-1: Phát triển ứng dụng nhanhn ứng dụng nhanhng dụng nhanhng nhanh .5 Hình 2.1-2: Phát triển ứng dụng nhanhn đa ứng dụng nhanhng dụng nhanhng .6 Hình 2.1-3: Kiến trúc cũn trúc cũ Hình 2.1-4: Kiến trúc cũn trúc mớii 10 Hình 2.3-1: Là dự án mã nguồn mở Google án mã nguồn mở Googlen mở Google Googlea Google 14 Hình 2.3-2: WebRTC ứng dụng nhiều lĩnh vựcc ứng dụng nhanhng dụng nhanhng nhiều lĩnh vựcu lĩnh vự án mã nguồn mở Googlec 15 Hình 2.3-3: WebRTC mang đến trúc cũn nhiều lĩnh vựcu lợc ứng dụng nhiều lĩnh vựci ích cho người dùng lập trình người dùng lập trình i dùng lập trình p trình viên 16 Hình 2.3-4: Hỗ trợ đa tảng, đa trình duyệt thiết bị trợc ứng dụng nhiều lĩnh vực đa nều lĩnh vựcn tả người dùng lập trình ng, đa trình duyệt thiết bịt thiến trúc cũt bị 18 Hình 2.3-5: WebRTC chưa hỗ trợ đa tảng, đa trình duyệt thiết bị trợc ứng dụng nhiều lĩnh vực tồn diệt thiết bịn tất trình duyệtt người dùng lập trình trình duyệt thiết bịt .19 Hình 2.3-6: M ng lướii ho t động đối tượng theo hình thức peer – to – ng đối tượng theo hình thức peer – to – a đối tượng theo hình thức peer – to – i tược ứng dụng nhiều lĩnh vựcng theo hình thứng dụng nhanhc peer – to – peer 20 Hình 2.3-7: Cung cất trình duyệtp tính truyều lĩnh vựcn dữa đối tượng theo hình thức peer – to – liệt thiết bịu thời dùng lập trình i gian thự án mã nguồn mở Googlec 21 Hình 3.2-1: Sơ đồ lớp mức phân tích đồn mở Google lớip mứng dụng nhanhc phân tích 24 Hình 3.3-1: Sơ đồ lớp mức phân tích đồn mở Google usecase 24 Hình 5.2-1: Màn hình Đăng nhập trì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ười dùng lập trình ng 3.1-1: Biển ứng dụng nhanhu mẫu 1u 23 Bả người dùng lập trình ng 3.1-2: Biển ứng dụng nhanhu mẫu 1u 23 Bả người dùng lập trình ng 3.1-3: Biển ứng dụng nhanhu mẫu 1u 23 Bả người dùng lập trình ng 5.1-1: Danh sách hình 25 Bả người dùng lập trình ng 5.2-1: Mơ tả người dùng lập trình chi tiến trúc cũt hình Đăng nhập trình p 26 Bả người dùng lập trình ng 5.2-2: Mơ tả người dùng lập trình chi tiến trúc cũt hình Home .27 Bả người dùng lập trình ng 5.2-3: Mơ tả người dùng lập trình chi tiến trúc cũt hình VideoCall .28 Bả người dùng lập trình ng 5.2-4: Mơ tả người dùng lập trình chi tiến trúc cũ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 yêu cầu 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, 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 toá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 q 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 TOÁ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 đượi ích WebRTCc xây dực hiện:ng bao gồm nội dung bản: m nộng WebRTCi dung cơng bảng viên hướng dẫn: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ướng dẫn:c xây dực hiện:ng App mobile:  Xác định 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 Đượi ích WebRTCc phát triể làm gì?n Facebook, React Native framework hướng đếni Facebook, React Native mộng WebRTCt framework hướng dẫn:ng đ ết đạt đượcn phát triể làm gì?n ức hoạt động WebRTCng dụng di động đa tảng.ng di động WebRTCng đa nềmn tảng viên hướng dẫn:ng Vớng dẫn:i sực hiện: trợi ích WebRTC giúp WebRTCa React Native, lậpp trình viên (developer) làm gì? sử WebRTC dụng di động đa tảng.ng JavaScript để làm gì? tạt động WebRTCo mobile apps (ức hoạt động WebRTCng dụng di động đa tảng.ng di động WebRTCng) hỗ trợ cho tảng trợi ích WebRTC cho cảng viên hướng dẫn: n ềmn tảng viên hướng dẫn:ng Android iOS Instagram, Facebook, Skype… ứng dụng bật sử dụng Reactng ức hoạt động WebRTCng dụng di động đa tảng.ng bật sử dụng Reacti bậpt sử WebRTC dụng di động đa tảng.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 làm gì? khơng nhanh ức hoạt động WebRTCng dụng di động đa tảng.ng gốc thực xâyc thực hiện:c sực hiện: đượi ích WebRTCc xây dực hiện:ng b)ng ngơn ngững ứng dụng bật sử dụng React quen thuộng WebRTCc Java, Objective-C C # Tuy nhiên, bạt động WebRTCn có đượi ích WebRTCc hiện:u suất gần ngơn ngữ cung cấp cho bạn cáct gần WebRTC chức WebRTC API n ngôn ngững ứng dụng bật sử dụng React đất gần ngôn ngữ cung cấp cho bạn cácy cung cất gần ngơn ngữ cung cấp cho bạn cácp cho bạt động WebRTCn thành phần WebRTC chức WebRTC API n gốc thực xâyc, Chết đạt động WebRTC xem Văn bảng viên hướng dẫn:n +ng dụng di động đa tảng.ng dành cho thiết đạt đượct bịch sử WebRTC di động WebRTCng dực hiện:a React Native không ph ảng viên hướng dẫn:i ức hoạt động WebRTCng dụng di động đa tảng.ng web HTML5, hybrid hoặtc di động WebRTCng Thay vào đó, m ộng WebRTCt ức hoạt động WebRTCng d ụng di động đa tảng.ng di động WebRTCng thực hiện:c sực hiện: Bạt động WebRTCn làm gì? nâng hiện:u suất gần ngơn ngữ cung cấp cho bạn cáct ức hoạt động WebRTCng dụng di động đa tảng.ng React Native WebRTCa lên mộng WebRTCt t ần WebRTC chức WebRTC API m cao mớng dẫn:i b)ng cách tốc thực xâyi ưu hóa ức hoạt động WebRTCng dụng di động đa tảng.ng WebRTCa bạt động WebRTCn b)ng mã gốc thực xâyc Có, React Native cho phép bạt động WebRTCn sử WebRTC dụng di động đa tảng.ng mã gốc thực xâyc Để làm gì? có hiện:u suất gần ngơn ngữ cung cấp cho bạn cáct tốc thực xâyi đa, bạt động WebRTCn có th ể làm gì? xây dực hiện:ng mộng WebRTCt sốc thực xây tính ức hoạt động WebRTCng dụng di động đa tảng.ng WebRTCa b)ng mã gốc thực xâyc m ộng WebRTCt s ốc thực xây tính vớng dẫn:i React Native 2.1.2.2 Giao diện người dùng phong phú