React 네이티브 푸시 플러그인은 어떻게 사용합니까?

소개

모바일 푸시 알림은 서버가 모바일 응용 프로그램 사용자에게 보내는 알림 메시지입니다.푸시 알림을 실현하는 데는 많은 장점이 있다. 예를 들어 사용자에게 새로운 특가 상품, 제품과 서비스를 통지함으로써 사용자의 참여도를 높이고 비활성 사용자의 응용 보존률을 높이며 A/B 테스트를 통해 사용자의 행위를 추적하는 등이다.
화웨이 React Native 푸시 플러그인은 개발자가 React Native 응용 프로그램에서 안드로이드 HMS 푸시 세트를 사용할 수 있도록 한다.게시자는 화웨이 개발자 컨트롤러나 화웨이 푸시 세트에 HTTP 요청을 보내서 알림을 푸시할 수 있으며, 푸시 세트는 응용 프로그램 사용자에게 알림을 보냅니다.다음 그림은 화웨이 푸시 세트의 작업 절차를 묘사한다.

밀어넣기 플러그인 워크플로우
본고에서 화웨이 개발자 컨트롤러에서 프로젝트를 만들고 플러그인을 통합하여 사용하는 방법을 보여 드리겠습니다.

화웨이 개발자 컨트롤러에서 프로젝트 만들기

화웨이 ID 등록

이 플러그인을 사용하려면 화웨이 ID를 등록해야 합니다.없으면 여기 설명에 따라 하십시오.

화웨이 응용 프로그램 만들기

화웨이 응용 프로그램을 만들려면 개발자 컨트롤러를 방문하여 화웨이 ID를 확인하십시오. 본 강좌의 설명에 따라 응용 프로그램을 만듭니다.

서명 인증서 지문 생성

인증서 지문을 서명해야 화웨이 모바일 서비스에 응용 프로그램을 검증할 수 있습니다.JDK가 설치되어 있는지 확인합니다.하나를 만들려면 JDK 디렉터리의 bin 폴더로 이동하여 이 디렉터리에 터미널을 엽니다.다음 명령을 수행합니다.

keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500

이 명령은 입력한 설정을 사용하여 application_project\udir/android/app에서 키 라이브러리 파일을 만듭니다.

응용 프로그램 라이브러리에서 화웨이 프로젝트에 SHA256 키 추가

다음 단계는 키 라이브러리 파일에 SHA256을 가져오는 것입니다. 이것은 화웨이 서비스 검증 프로그램에 필요한 것입니다.가져오려면 터미널에 다음 명령을 입력합니다.

keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks

인증 후에는 다음과 같이 SHA256 키가 표시됩니다.

SHA256 키를 복사하고 화웨이 개발자 콘솔//일반 정보에 접근합니다.SHA-256 인증서 지문 필드에 붙여넣고 데이터 저장 위치를 독일로 설정합니다.

마지막으로 프로젝트 설정/관리 API에서 푸시 패키지를 사용합니다.
App gallery에서 React 네이티브 응용 프로그램 구성을 완료했습니다.다음 단계에서, 플러그인을 React 본체 응용 프로그램에 통합하는 방법을 설명할 것입니다.

통합 플러그인

플러그인을 통합하려면 프로젝트 디렉터리에 터미널을 열고 다음 명령을 입력하십시오.

npm i @hmscore/react-native-hwpush

명령을 실행하면 파일 트리는 다음과 같이 표시됩니다.

projectdir
    |_ node_modules
        |_ ...
        |_ @hmscore
            |_react-native-hwpush
            |_ ...
        |_ ...

그리고 agconnect 서비스를 다운로드합니다.'일반 정보'옵션 카드의 앱 갤러리의pushkit 프로젝트에서 json 파일을 가져옵니다.React 원본 프로젝트의android/app 디렉터리에 파일 넣기
android/app/build로 이동합니다.React 기본 프로젝트의gradle 디렉터리입니다.다음 절차를 따르십시오.
아래에 표시된 AppGallery Connect 플러그인 종속 항목을 파일 헤더에 추가합니다.

apply plugin: 'com.huawei.agconnect'

android/defaultConfig 노드에서 필드 applicationId의 값을 AppGallery에 입력한 패키지 이름으로 설정하고 MinsDK 버전을 19 이상으로 설정합니다

defaultConfig {   
  applicationId <package_name_of_the_project_in_app_gallery>   
  minSdkVersion 19   
  ...   
}   

android/signingConfigs/config 노드에 키 라이브러리 파일 인증서를 입력하십시오.

signingConfigs {   
  config {   
  storeFile file(<keystore_file_name>)   
  storePassword ‘<store_password>’   
  keyAlias ‘<alias>’   
  keyPassword ‘<key_password>’   
  }   
}

android/build로 이동합니다.React 기본 프로젝트의gradle 디렉터리입니다.다음 절차를 따르십시오.
maven {url https://developer.huawei.com/repo/'}을(를) buildscript/repositories와allprojects/repositories에 추가합니다.
classpath의com을 추가합니다.화웨이.agconnect:agcp:1.2.1.301'은 스크립트/의존 항목을 구축하는 데 사용됩니다.
파일 컨텐트는 다음과 같습니다.

buildscript{   
  repositories{   
     google()   
     jcenter()   
     maven {url 'https://developer.huawei.com/repo/'}   
  }   
  dependencies{   
     classpath 'com.huawei.agconnect:agcp:1.2.1.301'   
  }   
}   
allprojects{   
  repositories{   
     google()   
     jcenter()   
     maven {url 'https://developer.huawei.com/repo/'}   
  }   
}

android/settings로 이동합니다.gradle 및 다음을 추가합니다.

include ‘:react-native-hwpush’   
project(‘:react-native-hwpush’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@hmscore/react-native-hwpush/android’)

플러그인을 응용 프로그램에 통합했습니다.다음 절에서, 나는 이 플러그인을 어떻게 사용하는지 설명할 것이다.

플러그인 사용

영패 획득

장치에 알림을 전송하기 위해서 영패를 받아야 합니다. 이 영패는 알림을 전송하는 테스트 장치의 유일한 식별자입니다.토큰을 가져오려면 RNHmsInstanceId 모듈의 getToken 방법을 사용합니다.

import {NativeModules} from 'react-native'   
NativeModules.RNHmsInstanceId.getToken((result, token) => {   
  console.log(JSON.stringify(token));   
});  

알림 메시지 푸시

알림 메시지를 장치로 전송하려면 화웨이 개발자 컨트롤러로 이동하여 프로젝트/성장/푸시 키트/알림 추가로 이동합니다.

그리고 필드를 입력하고 장치 영패 필드에 장치의 영패를 입력하십시오.마지막으로 알림을 전송하려면 전송을 누르십시오.

데이터 메시지 푸시

데이터 메시지는 키 값이 맞는 메시지입니다.알림 메시지와 달리 알림이 뜨지 않습니다.그래서 그들은 민족주의자에게 귀를 기울여야 한다.데이터 메시지를 정탐하려면 이벤트 PushMsgReceiverEvent를 다음과 같이 정탐하십시오.

import {EventEmitter} from 'react-native'
let emitter = new NativeEventEmitter();
listener = emitter.addListener('PushMsgReceiverEvent', (event) => {
  console.log(JSON.stringify(event))
});
// call listener.remove() to stop listening data messages

데이터 메시지를 전송하려면 화웨이 전송 컨트롤러로 가서 새로운 알림을 전송하고 데이터 메시지를 유형으로 선택하십시오.

주제에 가입

구독 테마는 사용자가 구독한 테마를 통해 데이터 메시지를 받을 수 있도록 합니다.주제에 가입하려면 RNHMS 메시지 모듈의 가입 방법을 사용합니다.주제별 메시지를 수신하려면 데이터 메시지 (즉 PushMsgReceiverEvent) 를 수신해야 합니다.

import {NativeModules} from 'react-native'
NativeModules.RNHmsMessaging.subscribe('myTopic', (result, errinfo) => {
  if (result == RNErrorEnum.SUCCESS) {
    console.log('Subscribed!');
  } else {
    console.log('Failed to subscribe : ' + errinfo);
  }
});

테마에 따라 알림이나 데이터 메시지를 전송하려면 화웨이 전송 컨트롤러로 가서 새로운 알림을 전송하고 구독자로 전송 범위를 선택한 다음 전송할 메시지의 테마를 선택하십시오.

주제 구독 취소

구독 취소 테마는 사용자가 구독하지 않은 테마의 데이터 메시지를 듣지 못하게 할 수 있습니다.주제 구독을 취소하려면 RNHMS 메시지 모듈의 구독 취소 방법을 사용합니다.

  import {NativeModules} from 'react-native'
  NativeModules.RNHmsMessaging.unsubscribe("myTopic", (result, errinfo) => {
    if (result == RNErrorEnum.SUCCESS) {
      console.log("Unsubscribed!")
    } else {
      console.log("Failed to unsubscribe : "+errinfo);
    }
  });

결론

HMS React Native push 플러그인을 사용하면 React Native 응용 프로그램에 화웨이 푸시 세트를 통합할 수 있습니다.화웨이 전송 플러그인이 있으면 개발자는 사용자에게 알림을 전송할 수 있다. 예를 들어 응용 보존율 향상, 사용자 특가와 뉴스 알림, A/B 테스트를 실시하여 상업 결정을 내리고 데이터 메시지를 보내서 응용 행위를 바꾸는 등이다.
Github 링크: https://github.com/HMS-Core/hms-react-native-plugin/tree/master/react-native-hms-push
참고 문헌의 글에서 HMS push kit에 관한 내용을 더 읽고 댓글에 질문을 남길 수 있습니다.
자세한 내용은 다음을 참조하십시오.
l 공식 홈페이지: https://developer.huawei.com/consumer/en/hms
l 파일 페이지: https://developer.huawei.com/consumer/en/doc/development
l Reddit 개발자 토론 참여: https://www.reddit.com/r/HMSCore/
l GitHub:https://github.com/HMS-Core
l 스택 오버플로우: https://stackoverflow.com/questions/tagged/huawei-mobile-services