React Native with Parse #reactnative

今回はReact NativeからParse.comのJS SDKの使い方を説明します。

Parse

ParseはFacebookに買収されたMBaaSです。push notificationで利用している人も多いと思います。MBaasを利用することでサーバサイドのシステムを構築する必要がないので開発スピードが上がります。

React Native with Parse

React Nativeが発表されて間もなくParse.comのブログにReact Nativeをサポートするという記事が投稿されました。Parse JS SDKは動きますが、バージョンに注意する必要があります。

$ npm install parse --save
$ grep parse package.json
    "parse": "1.6.9",

Parse SDKのバージョンが1.6以上の場合は、下記のように/react-nativeを付ける必要があります。

var Parse = require('parse/react-native').Parse
// 以前は　var Parse = require('parse').Parse

また1.6以前だとユーザの情報がPrase.User.current()で取れたのが、非同期を明示するParse.User.currentAsync()が必要です。Asyncを使ってうまく扱えば大丈夫です。

How to use

使い方ですが、私はapp/utils/Parse.jsというファイルを作り、importして使っています。
下記のような感じです。__DEV__で本番とテスト環境のデータベースを分けています。

let Parse = require('parse/react-native').Parse;

// Production keys
let parseAppId = "zzz";
let parseJSKey = "zzzz";
let parseAPIKey = "zzzzz";

// Development key from TriplentyDev app
if(__DEV__){
  console.log("[DEBUG] Loading TriplentyDev...");
  parseAppId = "xx";
  parseJSKey = "xxx";
  parseAPIKey = "xxxx";
}

Parse.initialize(parseAppId, parseJSKey);

Parse.xyzFunction = function(){
　let query = new Parse.Query('Event');
...
 //
}
...

export default Parse；

Parse JS SDKのAPIをそのまま使えます

Summary

Parseを使うことで、ログイン処理などもParseに任せることができます。バックエンドを持たずにアプリに集中して開発できます。フリーで使うことができるのでReact Nativeでもオススメです。

Push Notificationは後日説明します。