Tạo ứng dụng đa nền tảng cho mobile bằng react native 1

1 TRƯỜNG CAO ĐẲNG SƯ PHẠM THỪA THIÊN HUẾ HỘI ĐỒNG KHOA HỌC VÀ ĐÀO TẠO - - ĐẬU TUẤN Thạc sỹ BÁO CÁO TỔNG KẾT ĐỀ TÀI CẤP TRƯỜNG Mã số đề tài: 260308121 TẠO ỨNG DỤNG ĐA NỀN TẢNG CHO MOBILE BẰNG REACT NATIVE Huế, 5/2021 MỤC LỤC BẢNG DANH MỤC PHẦN MỞ ĐẦU CHƯƠNG I: NỀN TẢNG REACT NATIVE VÀ FIREBASE CLOUD MESSAGING 1.1 Nền tảng phát triển ứng dụng di động Android, iOS 1.1.1 Nền tảng Android 1.1.2 Nền tảng iOS .7 1.2 Nền tảng React Native 1.2.1 Các đặc điểm React Native 1.2.2 Môi trường để xây dựng ứng dụng React Native 1.2.3 Một số kiến thức sở để xây dựng ứng dụng React native 1.2.4 Các thành phần React Native 10 1.2.5 Hạn chế React Native .12 1.3 Gửi tin nhắn tin qua tảng đám mây FireBase 12 1.4 Tiểu kết chương 14 CHƯƠNG II: XÂY DỰNG ỨNG DỤNG ĐA NỀN TẢNG HCEapp 15 2.1 Kiến trúc hướng dịch vụ Web Api xử lý liệu .15 2.2 Lớp FCMC.cs phần mềm quản lý đào tạo 20 2.3 Xây dựng ứng dụng HCEapp .21 2.3.1 Chức 21 2.3.2 Giao diện ứng dụng HCEapp 21 2.3.3 Cấu trúc thư mục ứng dụng HCEapp 22 2.3.4 Một số đặc điểm kỹ thuật HCEApp 24 2.4 Triển khai ứng dụng cho thiết bị Android iOS .26 2.4.1 Triển khai ứng dụng cho thiết bị Android .26 2.4.2 Triển khai ứng dụng cho thiết bị iOS 27 2.5 Tiểu kết chương II 27 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28 TÀI LIỆU THAM KHẢO 29 BẢNG DANH MỤC  Danh mục từ viết tắt API CĐSP CSS FCM HTML QLĐT SOA XML Application Programming Interface Cao đẳng sư phạm Cascade Style Sheet FireBase Cloud Messaging HyperText Markup Language Quản lý đào tạo Service Oriented Architecture Extensible Markup Language  Danh mục hình Số hiệu hình Hình 1.1 Hình 1.2 Hình 1.3 Hình 2.1 Hình 2.2 Hình 2.3 Hình 2.4 Hình 2.5 Hình 2.6 Hình 2.7 Hình 2.8 Hình 2.9 Tên hình Giả lập máy MacOS Giả lập máy Android Mô tả hoạt động Firebase Cloud Messaging Kiến trúc hướng dịch vụ server 123.30.127.247 Lịch công tác giảng viên Chức coi thi phân hệ Khảo thí Giao diện ứng dụng HCEApp Cấu trúc thư mục HCEApp Server FireBase Cloud Messaging cho HCEApp Thông báo lỗi kết nối mạng HCEApp Triển khai HCEApp Google Play Thử nghiệm HCEApp máy giả lập iOS PHẦN MỞ ĐẦU Hiện ứng dụng di động (App mobile) không ngừng gia tăng số lượng chất lượng dựa sở phát triển mạnh mẽ công nghệ phần cứng hệ điều hành thông minh Với ưu đơn giản, nhanh gọn, tiện lợi, khơng phụ thuộc trình duyệt so với phần mềm máy tính ứng dụng web, App mobile ngày người dùng khai thác sử dụng Khi xây dựng phần mềm quản lý đào tạo trường Cao đẳng sư phạm Thừa Thiên Huế, cần phải cung cấp liệu cho sinh viên, giảng viên Trường Một liệu quan trọng cần cung cấp kịp thời Lịch thi dành cho sinh viên; Lịch coi thi, chấm thi, tham gia hội đồng khoa học, … giảng viên Giải pháp chọn lựa xây dựng ứng dụng web có địa truy cập thongtin.cdsphue.edu.vn Giải pháp phần đáp ứng nhu cầu liệu giảng viên, sinh viên Tuy nhiên nhược điểm giải pháp người dùng ln phải kích hoạt chức ứng dụng để xem thông tin Một App Mobile cho phép khắc phục nhược điểm này, gửi thông báo (push notifications) hình thiết bị mobile người dùng có thơng tin Mặt khác theo đánh giá chuyên gia, giai đoạn từ 2010 đến đầu năm 2020 nhu cầu tuyển dụng nhóm ngành phát triển phần mềm ln chiếm 50% có ảnh hưởng lớn đến nhu cầu tuyển dụng toàn ngành công nghệ thông tin Khi so sánh nửa đầu thập kỷ nửa cuối thập kỷ, nhu cầu tuyển dụng nhóm ngành tăng trưởng gần gấp đơi Trong nhóm ngành này, nhu cầu tuyển dụng chủ yếu kỹ sư có chun mơn phần mềm, Mobile, Web, … [1] Nghiên cứu lập trình App Mobile lập trình Web, khơng giải vấn đề liên quan đến quản lý đào tạo Trường CĐSP Thừa Thiên Huế mà cho phép Trường mở lãnh vực đào tạo cung cấp nhân lực lao động cho thị trường công nghệ thông tin đáp ứng cầu xã hội Hiện thiết bị di động thường sử dụng hai hệ điều hành phổ biến Android iOS Để xây dựng ứng dụng hệ điều hành này, nhà phát triển thường sử dụng hai ngôn ngữ gốc (Native) Java cho ứng dụng Android Objective-C cho iOS Giải pháp rõ ràng tốn thời gian, chi phí, nhân lực cho việc xây dựng App Mobile dùng đồng thời cho hai hệ điều hành Có nhiều giải pháp cho phép xây dựng App Mobile đa tảng, chạy hai hệ điều hành: Xamarin Microsoft, Flutter Google, React Native Facebook, … Mỗi giải pháp có ưu nhược điểm khác Tuy nhiên, với ưu mã nguồn mở, tảng React Native cộng đồng mạng chọn lựa nhiều Trong đề tài Tạo ứng dụng đa tảng cho Mobile React Native, tập trung nghiên cứu React Native; Phát triển cài đặt App Mobile đa tảng cung cấp liệu Lịch coi thi, chấm thi, tham gia hội đồng khoa học, … giảng viên Trường CĐSP Thừa Thiên Huế  Mục tiêu nghiên cứu: o Xây dựng phần mềm xử lý sở liệu trường CĐSP Thừa Thiên Huế o Phục vụ cho việc giảng dạy tin học  Nhiệm vụ nghiên cứu: o Nghiên cứu tảng React Native Firebase Cloud Messaging o Cài đặt App Mobile tảng React Native cung cấp liệu Lịch coi thi, chấm thi, tham gia hội đồng khoa học cho giảng viên  Phương pháp nghiên cứu: o Phân tích tổng hợp tài liệu tảng React Native Firebase Cloud Messaging o Thử nghiệm Modules React Native thông qua sản phẩm thực tế  Cấu trúc đề tài Mở đầu Chương 1: Nền tảng React Native Firebase Cloud Messaging 1.1 Nền tảng phát triển ứng dụng di động Android, iOS 1.2 Nền tảng React Native 1.3 Gửi tin nhắn tin qua tảng đám mây FireBase 1.4 Tiểu kết chương Chương 2: Xây dựng ứng dụng đa tảng HCEApp 2.1 Kiến trúc hướng dịch vụ Web Api xử lý liệu 2.2 Lớp FCMC.cs ứng dụng quản lý đào tạo 2.3 Ứng dụng đa tảng HCEApp 2.4 Triển khai ứng dụng cho thiết bị Android iOS 2.5 Tiểu kết chương II Kết luận hướng phát triển Tài liệu tham khảo  CHƯƠNG I: NỀN TẢNG REACT NATIVE VÀ FIREBASE CLOUD MESSAGING 1.1 Nền tảng phát triển ứng dụng di động Android, iOS 1.1.1 Nền tảng Android Android hệ điều hành mã nguồn mở, phát triển dựa hệ điều hành Linux dành cho thiết bị di động điện thoại thơng minh máy tính bảng Android phát triển Open Handset Alliance, dẫn đầu Google công ty khác Android cung cấp cách tiếp cận thống để phát triển ứng dụng cho thiết bị di động, có nghĩa nhà phát triển cần phát triển ứng dụng Android ứng dụng họ chạy thiết bị khác cung cấp Android Các thiết bị di động ứng dụng thiết bị di động ngày áp dụng rộng rãi sống Bên cạnh đó, lập trình xây dựng ứng dụng thiết bị di động Android (App Android) không ngừng phát triển nhiều người quan tâm Hiện này, Google Play có triệu ứng dụng Số lượng ứng dụng hay chất lượng tăng nhanh ngày Các App Android xây dựng ngôn ngữ Java cần cài đặt mơi trường lập trình ứng dụng Java Development Kit (JDK), Android Simulator, Android Studio hệ điều hành Wìndows MacOS 1.1.2 Nền tảng iOS iOS hệ điều hành di động phát triển phân phối Apple iOS phát hành vào năm 2007 cho iPhone, iPod Touch Apple TV iOS phiên di động hệ điều hành MacOS sử dụng máy tính Apple So với Android, iOS Apple chiếm ưu ổn định, tính bảo mật cao khả cập nhật nhanh Theo đánh giá Internet, Android iOS chiếm 99,7% thị phần mẫu smartphone dự kiến tăng thời gian tới Các ứng dụng Apple xây dựng ngôn ngữ Object-C Swift cần cài đặt môi trường lập trình ứng dụng Xcode, iOS Simulator hệ điều hành MacOS 1.2 Nền tảng React Native Như để xây dựng ứng dụng hệ điều hành Android iOS, nhà phát triển thường sử dụng hai ngôn ngữ gốc (Native) Java cho ứng dụng Android Objective-C Swift cho ứng dụng iOS Giải pháp rõ ràng tốn thời gian, chi phí, nhân lực cho việc xây dựng App Mobile chạy hai hệ điều hành Có nhiều giải pháp cho phép xây dựng App Mobile đa tảng, viết lần chạy đồng thời hai hệ điều hành: Xamarin Microsoft với ngôn ngữ C#, Flutter Google với ngôn ngữ Dart, React Native Facebook với ngôn ngữ Javascript., … Mỗi giải pháp có ưu nhược điểm khác Tuy nhiên, với ưu mã nguồn mở, tảng React Native cộng đồng mạng chọn lựa nhiều 1.2.1 Các đặc điểm React Native  Facebook phát hành phiên cho React Native vào năm 2015 Đây tảng để xây dựng ứng dụng mobile cách sử dụng ngôn ngữ JavaScript  React Native hỗ trợ tảng iOS Android Chúng ta chia sẻ hầu hết các đoạn mã React Native cho tảng này, sử dụng thành phần (component) gốc iOS Android cho ứng dụng React Native  React Native tảng mã nguồn mở cộng động mạng hỗ trợ React Native lớn Do để tiết kiệm chi phí, thời gian sử dụng thành phần có sẵn xây dựng App mobile 1.2.2 Môi trường để xây dựng ứng dụng React Native  Phần cứng: o Máy MacOS: Bước đầu giả lập máy Mac từ máy tính có cầu hình Windows 10, SSD 256GB, RAM 16GB Hình 1.1 Giả lập máy MacOS o Giả lập máy Android từ máy tính có cầu hình Windows 10, SSD 256GB, RAM 16GB Hình 1.2 Giả lập máy Android  Phần mềm: o Với máy MacOS cài đặt NodeJS, Xcode, Cocoapods o Với máy Android cài đặt NodeJS, JDK, Android Studio 1.2.3 Một số kiến thức sở để xây dựng ứng dụng React native 10  Ngơn ngữ lập trình Javascript 6.0 (ECMAScript 2015) trở lên ECMAScript tạo để chuẩn hóa JavaScript Javascript 6.0 (JS6) phiên thứ ECMAScript, xuất vào năm 2015 gọi ECMAScript 2015 Một số bổ sung JS6 so với Javascript [2]: Toán tử trải (spread operator), Phép gán tách từ cấu trúc (De-structuring Assignment), Hàm mũi tên (Arrow Functions), Mô dun (Modules), lớp (Classes), Iterators, Promises,  CSS Định kiểu cho phần tử ứng dụng React Native khai báo thuộc tính CSS tương tự web  XML Các kết trả (return) modules thành phần trình diễn (Presentatiopn Component) React Native thường viết dạng JSX Phần mở rộng XML Javascript cấu trúc XML  Các ngôn ngữ Java Objective-C Để thuận lợi cho việc xây dựng ứng dụng đa tảng, ví dụ bổ sung Push Notification dựa tảng FireBase OneSignal, cần phải can thiệp vào mã gốc (Native) ứng dụng android iOS Việc làm chủ ngôn ngữ Java Objective-C rõ ràng cần thiết cho nhà phát triển 1.2.4 Các thành phần React Native Các thành phần ứng dụng React native gồm Components, JSX, Props, State [3]  Components đoạn mã Javascript độc lập tái sử dụng Components giống hàm JavaScript hoạt động riêng lẻ trả JSX thông qua hàm render () Ví dụ Component tên App 15 CHƯƠNG II: XÂY DỰNG ỨNG DỤNG ĐA NỀN TẢNG HCEapp 2.1 Kiến trúc hướng dịch vụ Web Api xử lý liệu Để HCEapp truy cập liệu từ phần mềm quản lý đào tạo (QLĐT) Trường Cao đẳng sư phạm Thừa thiên Huế, cần phải triển khai kiến trúc hướng dịch vụ (SOA) xây dựng Web Api thực yêu cầu xử lý liệu (Get, Post) 2.1.1 Kiến trúc hướng dịch vụ Đây sản phẩm đề tài nghiên cứu khoa học năm học 20182019 [5] Kiến trúc hướng dịch vụ quản lý cung cấp web api thông qua địa truy cập https://api.cdsphue.edu.vn/api/[Controller] Kiến trúc hướng dịch vụ cài đặt server 123.30.127.247 có cấu trúc hình 2.1 Hình 2.1: Kiến trúc hướng dịch vụ server 123.30.127.247 2.1.2 Các Web Api xử lý liệu  Web API GetLichGV: Api có đầu vào Mã giảng viên (F_MaNV) trả bảng liệu Lịch công tác giảng viên Truy vấn thực qua thủ tục P_Get_LichGV_Api 16 Create procedure [dbo].[P_GetLichGV_api](@F_MaNV varchar(5)) as Begin Declare @NgayBD Date = GetDate() ; with DL as ( select dbo.F_TenNV(@F_MaNV) as Hoten,cast('2000-01-01' as Date) as ngay, 'x' as Noidung, as SXGio,'' as Gio union all Lịch coi thi học kỳ select '' as Hoten, Ngaythi as Ngay, format(Ngaythi,'dd-MM-yy')+', '+Giothi+ ', '+B.TenCD as Noidung, dbo.F_TietofGioNCKH(Giothi) as SXGio,Giothi as Gio from … A inner join … B on A.MaCD = B.MaCD where Ngaythi >= @NgayBD and F_MaNV = @F_MaNV union all Lịch coi thi học kỳ phụ 17 select '' as Hoten,Ngaythi as Ngay, format(Ngaythi,'dd-MM-yy')+', '+Giothi+ ', '+B.TenCD+' (KP)' as Noidung, dbo.F_TietofGioNCKH(Giothi) as SXGio,Giothi as Gio from … A inner join … B on A.MaCD = B.MaCD where Ngaythi >= @NgayBD and F_MaNV = @F_MaNV union all Lịch chấm thi học kỳ select distinct '' as Hoten,NgayBD as Ngay, format(NgayBD,'dd-MM-yy')+', ' +B.TenCD as Noidung, as SXGio,'' as Gio from … A inner join … B on A.MaCD = B.MaCD where NgayBD >= @NgayBD and F_MaNV = @F_MaNV union all Lịch chấm thi học kỳ phụ select distinct '' as Hoten,NgayBD as Ngay, format(NgayBD,'dd-MM-yy')+', ' +B.TenCD+' (KP)' as Noidung, as SXGio,'' as Gio from … A inner join … B on A.MaCD = B.MaCD where NgayBD >= @NgayBD and F_MaNV = @F_MaNV union all Lịch NCKH tác giả select '' as Hoten,NgayTC as Ngay, format(NgayTC,'dd-MM-yy')+', '+GioTC+ ', TC_NCKH_'+MaCDHD+', '+NoiTC as Noidung, dbo.F_TietofGioNCKH(GioTC) as SXGio,GioTC as Gio from … A inner join … B on A.MaDeTai = B.MaDeTai where NgayTC >= @NgayBD and F_MaNV = @F_MaNV union all Lịch thành viên hội đồng NCKH select '' as Hoten,NgayNT as Ngay, format(NgayNT,'dd-MM-yy')+', '+GioNT+ ', NT_NCKH_'+MaCDHD+', '+NoiTC as Noidung, dbo.F_TietofGioNCKH(GioNT) as SXGio,GioNT as Gio from … A inner join … B on A.MaDeTai = B.MaDeTai where NgayNT >= @NgayBD and F_MaNV = @F_MaNV Union all Lịch dự giảng viên select '' as Hoten, Ngay ,format(Ngay,'dd-MM-yy')+', '+gio+ ', KTCM'+', '+f_tenph as Noidung,dbo.F_TietofGioNCKH(gio) as SXGio, Gio from F_LichDugio (@F_MaNV,@NgayBD) Union all 18 Lịch kiểm tra chuyên môn đơn vị select '' as Hoten, NgayKT as Ngay ,format(NgayKT,'dd-MM-yy')+', '+GioKT+ ', KTCM'+', '+F_MaKH as Noidung,dbo.F_TietofGioNCKH(GioKT) as SXGio, GioKT from … A inner join …_Khoa B on A.idKTCM= B.idKTCM where NgayKT >= @NgayBD and F_MaNV = @F_MaNV ) select ROW_NUMBER() OVER(ORDER BY ngay,SXGio ) as Skey ,Hoten , Noidung from DL order by Ngay, SxGio end  Web API InsertFCM: Api bổ sung mã token thiết bị cung cấp FireBase cài đặt HCEapp vào bảng liệu T_H_FCM phần mềm QLĐT Mã này dùng để gởi tin nhắn đến thiết bị Bảng T_H_FCM có cấu trúc record sau: public class FCMController : ApiController { [HttpPost] [Route("api/InsertFCM")] public bool FCM(string Token) { SqlConnection Conn = new SqlConnection(); String ConnectionString = "Data Source=server;Initial catalog=….;Integrated Security=True; "; SqlConnection conn = new SqlConnection(ConnectionString); conn.Open(); 19 string sql = "if (not(exists(select id from … where token=@token)))insert into ….(token) values(@Token)"; SqlCommand cmd = new SqlCommand(sql, conn); cmd.Parameters.AddWithValue("@Token", Token); int kq = cmd.ExecuteNonQuery();//tiến hành insert conn.Close(); return kq > 0; }}  Web API UpdateFCM: Api cập nhật mã giảng viên (F_MaNV) sử dụng thiết bị cài đặt HCEapp vào bảng liệu T_H_FCM phần mềm QLĐT Dữ liệu sử dụng để gởi tin nhắn tới giảng viên có liên quan đến nội dung lịch cơng tác (Hình 2.2) Ví dụ Token cIDjcyGNQ6ezuURTJpxrQ0:APA91bFHo mã thiết bị (do Firebase quản lý) dùng để xem lịch công tác giảng viên 60307 [HttpPut] [Route("api/UpdateFCM")] public bool FCM(string Token, string f_manv) { SqlConnection Conn = new SqlConnection(); String ConnectionString = "Data Source=server;Initial catalog=… ;Integrated Security=True; "; SqlConnection conn = new SqlConnection(ConnectionString); conn.Open(); string sql = "Update … set f_manv=@f_manv where token=@Token"; SqlCommand cmd = new SqlCommand(sql, conn); cmd.Parameters.AddWithValue("@Token", Token); cmd.Parameters.AddWithValue("@f_manv", f_manv); int kq = cmd.ExecuteNonQuery();//tiến hành Update conn.Close(); return kq > 0; } 20 Hình 2.2: Lịch cơng tác giảng viên 2.2 Lớp FCMC.cs phần mềm quản lý đào tạo Để gởi tin nhắn đến thiết bị cài đặt HCEapp từ phần mềm quản lý đào tạo, xây dựng lớp FCMC.cs Lớp gồm phương thức:  Phương thức List GetFCMSMaNV(String s) Trả danh sách (List) token bảng T_H_FCM từ truy vấn s  Phương thức FCMC SendNotification(string[] _registration_ids, string _title, string _message, string _topic) Phương thức thực gởi tin nhắn, danh sách Token đến server Firebase Cloud Messaging Google cung cấp Server Firebase Cloud Messaging làm nhiệm vụ gửi tin nhắn đến thiết bị theo yêu cầu  Phương thức void SendMess(string sql, string tieude, string noidung) Phương thức gọi hai phương thức GetFCMSMaNV SendNotification để gởi tin nhắn đến giảng viên có lịch cơng tác Phương thức 21 cài đặt phân hệ Khảo thí, Nghiên cứu khoa học, Đánh giá chất lượng phần mềm QLĐT để kích hoạt Push Notification Trong chức phân công coi thi, chúng tơi sử dụng phương thức ví dụ minh họa Hình 2.3: Chức coi thi phân hệ Khảo thí Đoạn mã gọi phương thức SendMess có kiện kích chuột vào nút Gởi tin nhắn: protected void BtnGuiTN_Click(object sender, EventArgs e) { FCMC fcmPush = new FCMC(); Int32 KythiID = xulyso.SoN2Int32(DDLKythi.SelectedValue, 0); String Loai = rbnThi.SelectedValue; String s = String.Format("select id, Token from … where f_manv in " "(select f_manv from … where KythiID = {0} and Loai = '{1}')", KythiID, Loai); fcmPush.SendMess(s, "Truong cao dang su pham Hue", "Coi thi"); } 2.3 Xây dựng ứng dụng HCEapp 2.3.1 Chức Ứng dụng HCEapp cung cấp thông tin Lịch công tác cho giảng viên bao gồm Lịch coi thi, chấm thi, dự giờ, tham gia hội đồng khoa học, … 2.3.2 Giao diện ứng dụng HCEapp 22 Hình 2.4: Giao diện ứng dụng HCEApp 2.3.3 Cấu trúc thư mục ứng dụng HCEapp Hình 2.5: Cấu trúc thư mục HCEApp  Thư mục node_modules: chứa modules có sẵn tảng  Thư mục android, ios: chứa cảc files biên dịch sản phẩm tương ứng với android ios  Services, images: thư mục tạo để chứa hình ảnh ứng dụng modules networkError.js, LichCT.js phát triển 23 // modules networkError.js import React from 'react' import { View, Text, StyleSheet } from 'react-native' export default ({color}) => { return ( Kiểm tra kết nối Internet! ) } const styles = StyleSheet.create({ errorContainer: { marginTop: 30, width: '100%', padding: 10, alignSelf: 'center', backgroundColor: '#a00', }, errorText : { color: 'yellow', fontSize: 12, textAlign: 'center' } })  App.js module ứng dụng React Native phát triển import React, { useEffect, useState } from 'react' import { StyleSheet,Image,View} from 'react-native' import NetInfo from "@react-native-community/netinfo" import NetworkError from './services/networkError' import LichCT from './services/LichCT' const app = (props) => { const [netStatus, setNet] = useState(true) 24 useEffect(() => { NetInfo.addEventListener(state => { setNet(state.isConnected) }) }) return ( {!netStatus && } {netStatus && } ) } const styles = StyleSheet.create({ containerImage:{ justifyContent: 'center', alignItems: 'center', }, image :{ marginBottom:20, }}) export default app 2.3.4 Một số đặc điểm kỹ thuật HCEApp  Truy cập web api HCEapp: Để truy cập cập web api GetlichGV, InsertFCM, UpdateFCM cài đặt thêm vào ứng dụng HCEapp module axios import axios from 'axios'; const InsertapiUrl = 'https://api.cdsphue.edu.vn/api/InsertFCM'; const UpdateapiUrl = 'https://api.cdsphue.edu.vn/api/UpdateFCM'; 25 const GetapiUrl = 'https://api.cdsphue.edu.vn/api/lichGV'; Sử dụng Axios giúp dễ dàng gửi request HTTP bất đồng đến server thực chức get, put, post liệu thông qua phương thức axios.get(), axíos.put(), axios.post() axios.put(UpdateapiUrl+fcmToken+'&f_manv='+this.state.F_MaNV); axios.post(InsertapiUrl+fcmToken); axios.get(GetapiUrl …)  Tích hợp FireBase Cloud Messaging vào HCEapp Để sử dụng FireBase Cloud Messaging cài đặt thêm module React-native-firebase vào ứng dụng HCEapp import firebase from "react-native-firebase"; Chúng cài đặt server FireBase Cloud Messaging cho ứng dụng android tích hợp thành cơng FCM vào ứng dụng Android HCEapp Hình 2.6: Server FireBase Cloud Messaging cho HCEApp Hình 2.6: Tin nhắn đến thiết bị cài đặt HCEApp 26 Thông qua lớp FCMC.cs, chúng tơi tích hợp việc gửi tin nhắn đến thiết bị android có cài đặt HCEapp phân hệ phần mềm quản lý đào tạo (Hình 2.3)  Kiểm tra kết nối mạng HCEapp Để kiểm tra kết nối mạng cài đặt thêm module @react-nativecommunity/netinfo import NetInfo from "@react-native-community/netinfo" Một thông báo có lỗi kết nối mạng thể hình sau: Hình 2.7: Thơng báo lỗi kết nối mạng HCEApp 2.4 Triển khai ứng dụng cho thiết bị Android iOS 2.4.1 Triển khai ứng dụng cho thiết bị Android Ứng dụng HCEapp triển khai thành công Google Play Hình 2.8: Triển khai HCEApp Google Play 27 2.4.2 Triển khai ứng dụng cho thiết bị iOS Chúng thử nghiệm thành công HCEapp máy MacOS thật với ios giả lập Việc triển khai HCEapp Apple Store thực chúng tơi có Developer ID Hình 2.9: Thử nghiệm HCEApp máy giả lập iOS 2.5 Tiểu kết chương II Chương trình bày nội dung liên quan đến trình xây dựng ứng dụng HCEapp Các modules bên ngồi thêm vào ứng dụng chúng tơi trình bày rõ, mục đích để thấy ưu tận dụng modules có sẵn React-Native HCEapp Google play chấp nhận Chúng đưa lên Apple Store có giấy phép  28 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Đề tài Tạo ứng dụng đa tảng cho Mobile React Native đạt số kết sau:  Xây dựng ba web api xử lý liệu GetLichGV, InsertFCM, UpdateFCM, chạy kiến trúc hướng dịch vụ QLDT-API Các api truy cập qua địa https://api.cdsphue.edu.vn/api/[Controller]  Xây dựng ứng dụng HCEapp tảng React Native phục vụ cho việc xem lịch công tác giảng viên Trường CĐSP Thừa Thiên Huế HCEapp biên dịch thành công hai hệ điều hành Android iOS  Xây dựng lớp FCMC.cs phần mềm QLĐT để gửi tin nhắn liên quan đến Lịch công tác cho giảng viên có cài đặt HCEapp Hướng phát triển đề tài:  Triển khai ứng dụng HCEapp Apple Store  Mở rộng thêm chức HCEapp xem Lịch thi, xem điểm học tập sinh viên, Chúng mong nhận ý kiến đóng góp đồng nghiệp, sinh viên người quan tâm đến lãnh vực lập trình Mobile  29 TÀI LIỆU THAM KHẢO [1] vietnamnet.vn/vn/cong-nghe/nhu-cau-tuyen-dung-nganh-cntt-viet-nam-tanggap-4-lan-sau-10-nam-645872.html [2] https://www.tutorialspoint.com/es6/es6_overview.htm [3] https://reactnative.dev/docs/intro-react [4] https://viblo.asia/p/huong-dan-ban-notification-bang-fcm-firebase-cloudmessaging-api [5] Đậu Tuấn Công nghệ ASP.Net Web API 2.0 ứng dụng vào sở liệu Quản lý đào tạo Trường CĐSP Thừa Thiên Huế Đề tài NCKH cấp Trường CĐSP Thừa Thiên Huế năm học 2018-2019  ... I: NỀN TẢNG REACT NATIVE VÀ FIREBASE CLOUD MESSAGING 1. 1 Nền tảng phát triển ứng dụng di động Android, iOS 1. 1 .1 Nền tảng Android 1. 1.2 Nền tảng iOS .7 1. 2 Nền tảng React. .. Chương 1: Nền tảng React Native Firebase Cloud Messaging 1. 1 Nền tảng phát triển ứng dụng di động Android, iOS 1. 2 Nền tảng React Native 1. 3 Gửi tin nhắn tin qua tảng đám mây FireBase 1. 4 Tiểu... nguồn mở, tảng React Native cộng đồng mạng chọn lựa nhiều Trong đề tài Tạo ứng dụng đa tảng cho Mobile React Native, tập trung nghiên cứu React Native; Phát triển cài đặt App Mobile đa tảng cung