firebase 일기(+expo)

firebase instance를 만들자.
https://console.firebase.google.com/project/<YOURAPP>-90431/overview 로 들어가보면
Welcome to Firebase! Get started here. 라고 반긴다.
필요한 설정을 복사하자. Add Firebase to your web app 를 눌러

<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "ㅌㅌㅌㅌㅌㅌㅌㅌ",
    authDomain: "ㅅㅅㅅㅅ-90431.firebaseapp.com",
    databaseURL: "https://ㅅㅅㅅㅅ-90431.firebaseio.com",
    projectId: "ㅅㅅㅅㅅ-90431",
    storageBucket: "ㅅㅅㅅㅅ-90431.appspot.com",
    messagingSenderId: "11111111111"
  };
  firebase.initializeApp(config);
</script>

이 부분 중 config만 복사.
Authentication > sign-in method 에 몇개 연결하고 Template을 한번 슥 본다.
음 다국어 처리가 되있군. 굿.
Database, Storage, Hosting, Functions 죄다 켜고.

Grow 에 Remote Config라는게 있어서 Software Version 같은 걸 한번 넣어봤다. 프로그래마틱하게도 설정 가능한 거 같다. 잘 모르겠다.
https://firebase.google.com/docs/remote-config/?authuser=0 일단 킵

https://github.com/jsappme/react-native-firebase-starter
설정 볼만하다. code-push도 있고 무제한 push notification 서비스인 https://onesignal.com 도 눈에 띤다. 근데 firebase notification 도 무료에 무제한 아닌가?
Analytics, App Indexing, Authentication, Dynamic Links, Invites, Notifications, Crash Reporting & Remote Config 모두 무제한 무료 맞네.

react-native(+expo)용 드라이버로는 고심끝에 그냥 npm install firebase --save 로 결정. 다른 것들은 문제가 있거나 deprecated 되거나 뭐 그렇네. 순정으로 가자.

web에서 간단하게 연습.

테스트 할 데이터는 이와 같다.

firebase.database()
  .ref('rooms/muka/messages')
  .on 'value', (o) ->
    # [{"text":"블라블라"},{"text":"요로호초"}]
    console.log JSON.stringify(o.val())
# added 될 때 마다
firebase.database()
  .ref('rooms/muka/messages')
  .on 'child_added', (o) ->
    # key:0. val();"text":"블라블라"
    # key:1. val();"text":"블라블라"
    console.log JSON.stringify( Object.assign key: o.key, o.val() )

.on에서 콜백으로 event를 처리하는데 value랑 child_added의 작동이 좀 다르다.
value는 전체 콜렉션을 한번에 가져오는 반면(근데 value라고 해도 react-native에선 그렇게 배열로 작동 안한다.
child_added는 Meteo의 observe처럼 건별로 발생한다.

다음은 notification 차례

Firebase console 에서 grow > Notification 가서 iOS든 Android든 하나 추가.
GoogleService-Info.plist 를 쓸일이 있을지 모르겠는데 일단 받아는 두었다.

https://docs.expo.io/versions/latest/guides/push-notifications.html#content
Spoiler alert: it’s almost too easy. 쉬움 주의란닼ㅋㅋㅋ
일단 push 이니만큼 실기기를 준비하고 먼저 안드로이드 기준으로 테스트.

1. 사용자 기기를 백엔드에 등록.

expo를 navigation 포함 버전으로 생성했을 때 api/registerForPushNotificationsAsync.js 가 있는데

const PUSH_ENDPOINT = 'https://exponent-push-server.herokuapp.com/tokens';

이 부분을 수정해준다.
즉, functions 를 만들어야할 곳은 여기.
functions를 만들고 보자 firebase cli가 있으니 firebase init 해본다.

firebase database:get '/rooms/muka/messages' 오옹 이런걸로도 JSON 뽑아올 수 있네

보통은 인증서도 등록하고 할게 많은데 expo란 앱이 이미 등록이 되있을 것이니 절차가 간소해지긴 하겠다.

해야할 것은 일단 저 PUSH_ENDPOINT를 https://github.com/exponent/exponent-server-sdk-node 설치로 확인해보고 잘 되면 functions로 옮겨봐야하겠다.

https://github.com/expo/exponent-server-sdk-node/blob/master/src/ExpoClient.js
요약하면 아래의 요청을 POST로 보내면 된다는 소리다.

https://exp.host/--/api/v2/push/send
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json
curl -H "Content-Type: application/json" -X POST https://exp.host/--/api/v2/push/send -d '{
  "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
  "title":"hello",
  "body": "world"
}'

백엔드 서버는 바로 위의 curl의 역할을 수행하면 되고.
기기의 푸쉬토큰을 잘 기억하고 있으면 그만이다.
registerForPushNotificationsAsync.js 를 보면 이렇다. token 이외엔 보내주는게 없는데 일단 이대로라면 누가 누구인지 알 수 없으므로 전체 푸쉬를 하는 걸 구현한다고 생각하고 해보자.

  // POST the token to our backend so we can use it to send pushes from there
  return fetch(PUSH_ENDPOINT, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      token: {
        value: token,
      },
      /* 여기에 사용자 정보가 더 필요하다. */
    }),
  });

이걸 받아들일 수 있는지 해보자.

위의 fetch 부분을 curl로 쓰면 아마도

curl -H "Content-Type: application/json" -X POST https://localhost:3000 '{

  "token": {

    value: "xxxxxxxxxxxxx"

  }

'

이정도만 받아들일 수 있으면 될 것이다.

----------- ---------------

열심히 쓴 글이 날아갔다;;; 

안되겠다. 요약하자.
firebase functions를 사용하려면 node v6.11.1을 사용하자.
node v6.11.1은 Object.entries가 없다. polyfill(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill) 을 이용하자.
appspot.com 에 올려서 외부 REST call을 쓰려고 했으나 실패. 무료에서 과금으로 전환.
orderBy를 썼다면 rules에 json파일을 추가해야함. orderBy를 쓰는 ref와 같은 depth로

        "messages": {
          ".indexOn": ["createdAt"]
        }

와 같이 .indexOn을 넣어줘야함

functions에서 추가 데이터를 감지할 땐 functions.database.ref("rooms/{roomId}/messages/{messageId}").onCreate(event=>...)를 사용하고 event.data.val()과 event.data.key로 변경분을 체크.

functions안에서 데이터베이스를 다룰 땐 admin.database()객체를 사용. 쿼리도 once를 사용하여 한번만 사용한다. on을 사용하면 핸들러를 달아서 계속 감시하는 것이므로 적절치 않음. (예: admin.database().ref("deviceToken").once('value').then(tokenInfo=>...) )