FlareLane 푸시 가이드

---

React Native 연동하기

1. 사전 준비

1.1 플레어레인 관리자 계정은 다음과 같습니다.

ID : givemeprice@naver.com

PW : 100Aksekdnsfhem!

1.2 FCM 인증 정보 설정이 필요합니다. (for 안드로이드)

1.3 APNS 인증 정보 설정이 필요합니다. (for iOS)

APNS 입력란에 기입해야 하는 Key는 [케이바이러스연구소 네이버 카페]에 업로드 되어있습니다.

---

2. SDK 설치

• 터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다.

$ yarn add @flarelane/react-native-sdk

iOS 프로젝트 설정

• 터미널에서 cd ios 를 입력하여 ios 디렉토리로 이동합니다.
• Podfile 파일의 상단에 platform :ios, '11.0' 혹은 11.0 버전 이상을 입력합니다.

  

• 터미널에서 pod install 을 입력하여 CocoaPods 설치를 완료합니다.

  

• <YOUR_PROJECT_NAME>.xcworkspace 파일을 열어 Xcode 프로젝트를 실행합니다.
• 터미널에 open . 을 입력하면 파일을 열기 쉽습니다.

  

• 대상 PROJECT의 Deployment Target 을 11.0 혹은 그 이상으로 입력합니다.

  

• 대상 TARGET의 Deployment Info 을 11.0 혹은 그 이상으로 입력합니다.

  

• 앱푸시 발송 권한을 추가합니다. Target의 “Signing & Capabilites” 탭으로 들어와 좌상단의 “+ Capability”를 클릭합니다.

  

• “Push Notifications”를 선택하여 추가합니다.

  

4. 초기화 코드 작성

App.js (또는 App.tsx ) 혹은 index.js 에서 초기화 코드를 입력합니다.

프로젝트 ID는 아래와 같이 콘솔의 [프로젝트] 페이지에서 확인 가능합니다.

5. 테스트

여기까지 완료했다면, 앱 빌드 및 실행 후 푸시 알림 구독 시 자동으로 플레어레인 전체 기기 리스트에 추가됩니다.

실제 배포 전, 푸시를 실제 발송하여 기기에 잘 오는지, 푸시 클릭 시 통계에 잘 잡히는지 반드시 확인을 해야합니다.

‘대상’의 [전체 기기] 페이지에서 기기에 대한 아이디를 확인할 수 있습니다.

‘메세지’의 [새 메세지] 페이지에서 ‘기기’를 선택한 후, 메세지 내용을 입력 → [발송] 버튼 클릭

---

Rest API Reference 관련 링크

예제코드

프론트 버튼클릭 → 백엔드로 post 전송 → 백엔드에서 flarelane으로 post 전송 → 프론트 알림

리액트 네이티브 예시코드 App.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React, {type PropsWithChildren} from 'react';
import {
  Alert,
  AppRegistry,
  Button,
  SafeAreaView,
  StyleSheet,
  Text,
} from 'react-native';

import FlareLane from '@flarelane/react-native-sdk';
import axios from 'axios';

const App = () => {
  //프로젝트 아이디 기입
  FlareLane.initialize('fa728d0a-20ff-4a94-90de-ed130753e719');
  //유저 아이디 셋팅 (선택사항)
  // FlareLane.setUserId('givemeprice@naver.com');

  //getId버튼 클릭시 기기 고유 id 가져오기, deviceId출력
  let deviceId: any = '';
  const getId = async () => {
    deviceId = await FlareLane.getDeviceId();
    console.log(deviceId);
    Alert.alert(deviceId);
  };

  // push버튼 클릭시 백엔드로 deviceId담아 전송
  const url = 'http://43.200.180.183:1208/api/v1/auth/flarelane';
  const push = () => {
    axios
      .post(url, {deviceId: deviceId})
      .then(d => console.log(d))
      .catch(e => console.log(e));
  };
  FlareLane.setNotificationConvertedHandler;
  AppRegistry.registerComponent('flarelaneTest', () => App);
  return (
    <SafeAreaView>
      <Text>getId 클릭 후 push</Text>
      <Button title="push" onPress={push}></Button>
      <Button title="getId" onPress={getId}></Button>
    </SafeAreaView>
  );
};

export default App;

백엔드 코드 예시

@Post('/flarelane')
  async flarelanePush(@Body('deviceId') deviceId:string) {
		//프로젝트id
    const projectId = 'fa728d0a-20ff-4a94-90de-ed130753e719';
		//API Key
    const Key = 'aWVNaFkEp29PWtwSsqXcy';
		//flarelane api로 데이터와 api key 전달
    axios.post(`https://api.flarelane.com/v1/projects/${projectId}/notifications`,
    { 'project-id': projectId,
     'targetType': 'device',
    'targetIds':[deviceId],
    'title':'타이틀',
    'body':'바디'},
    {headers: {"Authorization":"Bearer "+Key}}).then(d=>console.log(d)).catch((err)=>console.log(err))
  }