create-react-native-app 및 expo를 사용하여 10분 내에 푸시 알림 사용

Requirements

node.js가 설치되어 있어야 합니다.

android/iPhone 어느 쪽인지 가지고 있는 것.

curl이 설치되어 있어야 합니다.

create-react-native-app 설치

npm install -g create-react-native-app

휴대 전화에 expo를 설치

설치는 여기

프로젝트 만들기

create-react-native-app my-stupid-project

우선 시작해 보자.

cd my-stupid-project && npm start

기동하면 데카이 QR코드가 표시되므로, 방금전 스마트폰에 인스톨 한 expo 어플리로 읽어들인다. 그러면 아래와 같은 화면이 표시되면 성공.

푸시 알림 구현

App.js를 열고 다음과 같이 수정합니다.

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Expo, { Permissions, Notifications } from 'expo'

async function registerPushNotificationService() {
  const { status } = await Permissions.askAsync(Permissions.REMOTE_NOTIFICATIONS)
  if (status !== 'granted') {
    return
  }
  const token = await Notifications.getExponentPushTokenAsync()
  console.log('!!!!! my token is:', token)
}

export default class App extends Component {
  state = { notifications: null }
  componentWillMount() {
    registerPushNotificationService()
    this.listeners = Notifications.addListener(this.onPushNotification)
  }
  onPushNotification = (notifications) => { this.setState({notifications})}
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
        { this.state.notifications
          && <Text>{JSON.stringify(this.state.notifications)}</Text>
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

Expo.registerRootComponent(App)

Curl을 사용하여 메시지 보내기

위의 코드를 저장하면 자동으로 스마트 폰 측에로드되고 expo의 token이 다음과 같이 콘솔에 표시됩니다.
5:00:55 PM: !!!!! my token is: ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]

expo에 push notification의 endpoint가 있으므로, 방금전의 토큰과 함께 메시지를 던진다
curl -iv -H 'accept: application/json' -H 'accept-encoding: gzip, deflate' -H 'content-type: application/json' -d '[{"to":"ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]", "body":"wut up", "badge": 1, "data":{"a":"b"}}]' https://exp.host/--/api/v2/push/send
그러면 결과가 다음과 같이 돌아오면 성공.
{"data":[{"status":"ok"}]}
덧붙여서 스마트폰 측은 이런 느낌이 된다.

결론

expo 굉장히 편리! QR코드를 공유하는 것만으로, 타인에게 시험을 받을 수 있다. iOS에서는 네이티브 코드를 쉽게 배포할 수 없지만, expo와 같이 JS 코드라면, "지금까지", 다이나믹하게 로드하는 것은 금지되어 있지 않기 때문에, 이러한 방법으로 타인으로부터 쉽게 피드백을받을 수있게되었습니다. 또, low level의 조작은, react-native/expo가 있으므로, 어느 정도는 커버할 수 있지만, 그 이외의 조작을 실시하는 경우는 스스로 작성할 필요가 있어, 자작한 네이티브 코드는, 물론 다이나믹하게 로드한다 수 없기 때문에 주의가 필요. 개인적으로는, 비교적 하드웨어에의 액세스 요구가 없는, iOS와 Android의 팀을 만들 정도로 돈이 없는 것 같은 프로젝트에는 사용할 수 있지 않을까요. 덧붙여서, 나는 모바일 문 외한이지만 (웃음)에서는, 길어져 버렸으므로, 여러분 좋은 주말을 보내 주세요!