Android Push 알림을 React Native Expo 응용 프로그램에 추가하는 방법

알림을 보내는 것은 프로그램 사용자를 끌어들이고 붙잡는 데 도움을 줄 수 있다. 이것은 이미 비밀이 아니다.이 자습서에서는 React OneSignal NPM 패키지와 통합하여 React 애플리케이션의 푸시 알림을 무료로 활용하는 방법을 보여 드리겠습니다.

OneSignal & 브라우저의 푸시 API

모바일 푸시 API는 모바일 응용 프로그램이 프런트에 있든 없든 서버에서 메시지를 받을 수 있도록 한다.이렇게 하면 가입을 선택한 사용자에게 비동기적인 알림과 업데이트를 제공하여 새로운 내용에 더욱 신속하게 참여할 수 있습니다.
이 강좌는 새로운 React Native Expo OneSignal Plugin을 통합하고 우리의 전형적인 설정 과정을 이용하여 이동 전송 알림을 응용 프로그램에 추가하는 방법을 소개할 것이다.이 설명서의 첫 번째 부분에서는 OneSignal 설정 프로세스에 대해 설명합니다.이 안내서의 두 번째 부분은 저희 npm 패키지를 사용하여 원시그널과 React를 통합하는 방법을 소개합니다.

설명서 개요

Part 1: Set Up Your OneSignal Account

Google Android FCM Configuration

Part 2: Set Up Push Notifications in React Native Expo

Create Your React Native App

Install the OneSignal Expo Plugin

Configure the Plugin

Run and Build Your Application

Send Push Notifications to Android Devices

Connect With Our Developer Community

이 자습서는 React Native(Expo)에 대한 기본 지식이 필요합니다.나는 Expo CLI을 사용하여 나의 프로젝트와 NodeJS 버전 14.16을 생성하고 있다.부가 반응

추가 설치 리소스:

React Native (Expo) plugin Sample Ap

섹션 1: OneSignal 계정 설정

먼저 log in을 OneSignal 계정 또는 create a free account으로 보내십시오.그리고 '새 프로그램/사이트' 라는 파란색 단추를 누르면 OneSignal 계정을 응용 프로그램이나 사이트에 맞게 설정합니다.

응용 프로그램이나 사이트의 이름을 삽입합니다.'구글 안드로이드'를 당신의 플랫폼으로 선택하세요.

"다음: 플랫폼 구성"이라는 파란색 버튼을 클릭합니다.

구글 안드로이드 FCM 구성

Firebase 서버 키로 안드로이드를 설정할 때가 되었습니다.모든 Android 응용 프로그램은 이 키와 서버 ID가 있어야만 푸시 알림을 보낼 수 있습니다.Firebase Server API 키가 없는 경우 how to generate a Firebase server API key에 대한 설명서를 참조하십시오.

지금 당신의 목표 SDK를 선택하세요.이 안내서의 뒷부분에서 첫 번째 사용자를 얻고 첫 번째 테스트 알림을 보내는 절차를 안내해 드리겠습니다.

다음 화면에는 Expo 응용 프로그램에서 사용하기 때문에 응용 프로그램 ID가 표시됩니다.구독자나 완료되지 않은 사용자를 보기 위해 클릭하지 마십시오.

섹션 2: React Native Expo에서 푸시 알림 설정

로컬 프로그램 만들기

터미널 내부에서 다음 명령을 실행하고create를 사용하여 새 React 프로젝트를 만듭니다.
엑스포 애플리케이션:

expo init onesignal-rn-expo

질문을 받을 때, 위탁 관리 작업 흐름 아래의 모든 옵션을 선택하십시오.나의 예에서, 나는 첫 번째 옵션을 선택했는데, 그것은 비어 있었다.

cd onesignal-rn-expo
expo start

더 많은 지도가 필요하시면 how to create a new Expo App으로 전화해서 엑스포 공식 문서를 보십시오.

OneSignal Expo 플러그인 설치

프로젝트 폴더에서 터미널을 열고 다음 명령을 실행하여 OneSignal Expo Plugin 패키지를 설치합니다.

expo install onesignal-expo-plugin

signal expo 플러그인을 설치한 후 다음 명령을 실행하면react native onesignal 플러그인을 즉시 설치합니다.

yarn add react-native-onesignal

비록 onesignal-expo-plugin은 react-native-onesignal을 의존항으로 정의하고 이를 node_module에 넣지만, 이것은 본 기기의 부품을 생성하는 것을 확보할 것이다.
프로젝트를 구축한 후에 다음 명령을 실행하는 것을 잊어버리면 expo prebuild-clean을 실행해서 이 문제를 복구할 수 있습니다.이것은android와ios를 삭제하고 깨끗한 본체 구축을 한 다음 react-native-onesignal을 추가하는 프로그램을 실행해야 합니다.

플러그인 구성

app.json/app.config.js 파일의 플러그인을 plugin array에 추가합니다.
응용 프로그램.json

{
    "plugins": [
        [
            "onesignal-expo-plugin",
            {
                "mode": "development",
                "devTeam": "91SW8A37CR"
            }
        ]
    ]
}

또는
응용 프로그램.배치하다.js

export default {
...
    plugins: [
        [
            "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
    ]
};

플러그인 옵션:

mode: APNs environment 권한을 구성하는 데 사용됩니다.

"development"

"production"

devTeam:* 옵션 * - Apple Team ID를 구성할 수 있습니다. expo credentials:manager을 실행하면 Apple Team ID를 찾을 수 있습니다.

예:

{
    "extra": {
        "oneSignalAppId": "<YOUR APP ID HERE>"
    }
}

그런 다음 setAppId 함수에 전달할 값에 액세스할 수 있습니다.

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);

또는 OneSignal 응용 프로그램 ID를 함수에 직접 전달합니다.

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");

어플리케이션 실행 및 구축

expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android

Android 장치에 밀어넣기 알림 보내기

알림을 테스트하기 위해 실제 안드로이드 장치에서 이 프로그램을 실행하는 것을 권장합니다.이를 위해서는 Android 장치에 연결하고 developer mode을 설정해야 합니다.
장치에 연결하고 개발자 모드를 활성화한 후 장치를 대상 장치로 선택하여 장치에서 응용 프로그램을 실행합니다.내 예에서 나는 구글 픽셀 5에서 앱을 실행한다.

디바이스에서 응용 프로그램을 열면 디바이스가 자동으로 알림에 가입합니다.이제 장치에서 OneSignal에서 알림을 받을 수 있습니다.
설정 프로세스를 완료하려면 OneSignal 대시보드로 돌아가서 이전에 중지한 위치로 돌아갑니다.uuCheck Subscribed Users uuu를 클릭하면 다음 그림과 같이 녹색 메시지가 나타납니다.

"완성"단추를 누르십시오.

첫 번째 알림 보내기

첫 번째 푸시 알림을 보낼 때가 됐어요!이렇게 하려면 OneSignal 계정에 로그인하고 Dashboard u 탭으로 이동합니다.대시보드 페이지에서 파란색 버튼을 클릭하면'새 버튼'이라고 적혀 있습니다.
주의: 기본적으로 안드로이드 장치에서 알림을 사용합니다. 알림을 사용하지 않으려면 enable them again을 완료했는지 확인하십시오.

새 창으로 리디렉션됩니다. 이 창은 알림을 사용자 정의로 전송할 수 있습니다.u시청자 u에서 u를 선택하여 구독자 u에게 발송하는 것을 확인하십시오.그런 다음 메시지 제목, 컨텐트 및 이미지를 추가하여 메시지를 생성합니다.구독자가 받을 첫 번째 알림이기 때문에 간단한 환영 메시지를 작성하여 구독을 확인하고 알림이 제공할 가치를 높일 수 있습니다.
uu교부계획 u부분에서 u를 선택하면 즉시 u와 u를 동시에 모든 사람에게 u로 보내서 현재 구독자에게 보냅니다.만약 OneSignal 계정 설정을 막 끝냈다면, 첫 번째이자 유일한 구독자일 가능성이 높습니다.만약 응용 프로그램이나 사이트의 데이터가 매우 많고 다른 사용자가 전송 알림을 받기로 선택했다면, 특정한 세분 시장으로 보내는 것을 선택하여 특정한 시청자들에게 메시지를 테스트해야 할 수도 있다.메시지를 보낼 준비가 되었을 때, 화면 밑에 있는 파란색 '보기 및 보내기' 단추를 누르십시오.

정보를 볼 수 있는 작은 팝업 창이 나타납니다.만족하면 파란색 메시지 보내기 버튼을 클릭합니다.장치에서 푸시 알림을 받을 것입니다!🚀

이제 전체 Expo 응용 프로그램에서 OneSignal SDK의 다른 기능을 사용하고 OneSignal 변수를 돌아서 다른 구성 요소를 사용할 수 있도록 코드를 계속 확장할 수 있습니다.
OneSignal Expo 플러그인에 대한 자세한 내용은 React Native (Expo) push SDK documentation을 참조하십시오.

개발자 커뮤니티에 문의

최신 제품 업데이트와 혁신에 대한 자세한 내용은 Discord server을 참조하십시오.다음 링크를 통해 OneSignal 개발자 커뮤니티에 대한 정보와 연락을 유지하는 방법에 대해 자세히 알아보십시오.

>> OneSignal 개발자 커뮤니티 이해