기본 콘텐츠로 건너뛰기

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=>...) )

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

cURL로 cookie를 다루는 법

http://stackoverflow.com/questions/22252226/passport-local-strategy-and-curl 레거시 소스를 보다보면 인증 관련해서 cookie를 사용하는 경우가 있는데 가령 REST 서버인 경우 curl -H "Content-Type: application/json" -X POST -d '{"email": "aaa@bbb.com", "pw": "cccc"}' "http://localhost/login" 이렇게 로그인이 성공이 했더라도 curl -H "Content-Type: application/json" -X GET -d '' "http://localhost/accounts/" 이런 식으로 했을 때 쿠키를 사용한다면 당연히 인증 오류가 날 것이다. curl의 --cookie-jar 와 --cookie 옵션을 사용해서 cookie를 저장하고 꺼내쓰자. 각각 옵션 뒤엔 저장하고 꺼내쓸 파일이름을 임의로 지정하면 된다. 위의 과정을 다시 수정해서 적용하면 curl -H --cookie-jar jarfile "Content-Type: application/json" -X POST -d '{"email": "aaa@bbb.com", "pw": "cccc"}' "http://localhost/login" curl -H --cookie jarfile "Content-Type: application/json" -X GET -d '' "http://localhost/accounts/" 이렇게 사용하면
댓글 쓰기
자세한 내용 보기

MQTT Broker Mosquitto 설치 후 설정

우분투 기준 $ sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa $ sudo apt-get update 하고 $ sudo apt-get install mosquitto 으로 설치하면 서비스까지 착실하게 올라간다. 설치는 간단한데 사용자를 만들어야한다. /etc/mosquitto/mosquitto.conf 파일에서 권한 설정을 변경하자. allow_anonymous false 를 추가해서 아무나 못들어오게 하자. $ service mosquitto restart 서비스를 재시작. 이제 사용자를 추가하자. mosquitto_passwd <암호파일 경로명> <사용자명> 하면 쉽게 만들 수 있다. # mosquitto_passwd /etc/mosquitto/passwd admin Password:  Reenter password:  암호 넣어준다. 두번 넣어준다. 이제 MQTT 약을 열심히 팔아서 Broker 사글세방 임대업을 하자.
댓글 쓰기
자세한 내용 보기

OS X 터미널에서 tmux 사용시 pane 크기 조절

http://superuser.com/a/660072  글 참조. OS X 에서 tmux 사용시 나눠놓은 pane 크기 조정할 때 원래는 ctrl+b, ctrl+↑←→↓ 로 사이즈를 조정하는데 기본 터미널 키 입력이 조금 문제가 있다. 키 매핑을 다시 하자 Preferences(cmd+,) > Profile >  변경하고자 하는 Theme 선택 > Keyboards 로 들어가서 \033[1;5A \033[1;5B \033[1;5C \033[1;5D 를 순서대로 ↑↓→←순으로 매핑이 되도록 하면 된다. +를 누르고 Key에 해당 화살표키와 Modifier에 ctrl 선택 한 후 <esc>, [, 1, ;, 5 까지 한키 한키 입력 후 A,B,C,D를 써준다. 잘못 입력했을 땐 당황하지 말고 Delete on character 버튼을 눌러 수정하도록 하자. 그리고 다시 tmux에서 ctrl+b, ctrl+↑←→↓로 사이즈를 조절해보자. 잘 된다.
댓글 쓰기
자세한 내용 보기