React Native アプリケーションでの JSONStore

前提条件

• JSONStore 親チュートリアルを読む。
• MobileFirst React Native コア SDK がプロジェクトに追加されていることを確認する。 『React-Native アプリケーションへの Mobile Foundation SDK の追加 (Adding the Mobile Foundation SDK to React-Native applications)』チュートリアルに従ってください。

ジャンプ先:

• JSONStore の追加
• 基本的な使用法
• サンプル・アプリケーション

JSONStore の追加

React Native アプリケーションに JSONStore プラグインを追加するには、以下のようにします。

1. コマンド・ライン・ウィンドウを開き、React Native プロジェクト・フォルダーにナビゲートします。
2. 次のコマンドを実行します。

    npm install react-native-ibm-mobilefirst-jsonstore --save
   

3. iOS の場合のみ、Mobilefirst Pod の依存関係をインストールします。

   cd ios && pod install 
   

基本的な使用法

新規 JSONStore コレクションの作成

1. JSONStoreCollection クラスを使用して、JSONStore のインスタンスを作成します。 また、新規作成されたこの JSONStore コレクションに追加構成を設定することもできます (例: 検索フィールドの設定)。
2. 既存の JSONStore コレクションとの対話 (例: データの追加や削除) を開始するには、コレクションを開く 必要があります。 これを行うには、openCollections() API を使用します。

   var collection = new JSONStoreCollection('people');
   WLJSONStore.openCollections(['people'])
   .then(res => {
   	// handle success
   }).catch(err => {
   	// handle failure
   });
   

追加

addData() API を使用して、コレクションに JSON データを格納します。

var data = { "name": "John", age: 28 };
var collection = new JSONStoreCollection('people');
collection.addData(data)
.then(res => {
  // handle success
}).catch(err => {
  // handle failure
});

この API を使用して、単一の JSON オブジェクトまたは JSON オブジェクトの配列を追加できます。

検索

1. 照会を使用してコレクション内のドキュメントを見つけるには、find を使用します。
2. コレクション内のすべてのドキュメントを取り出すには、findAllDocuments() API を使用します。
3. ドキュメントの固有 ID を使用して検索するには、findDocumentById() API および findDocumentsById() API を使用します。
4. コレクションを照会するには、findDocuments() API を使用します。 照会では、JSONStoreQueryPart クラス・オブジェクトを使用してデータをフィルターに掛けることができます。

JSONStoreQueryPart オブジェクトの配列をパラメーターとして findDocuments API に渡します。

var collection = new JSONStoreCollection('people');
var query = new JSONStoreQueryPart();
query.addEqual("name", "John");
collection.findDocuments([query])
.then(res => {
	// handle success
}).catch(err => {
	// handle failure
});

削除

ドキュメントをコレクションから削除するには、remove を使用します。

var id = 1; // for example
var collection = new JSONStoreCollection('people');
collection.removeDocumentById(id)
.then(res => {
	// handle success
}).catch(err => {
	// handle failure
});

コレクションの削除

コレクション内に保管されているすべてのドキュメントを削除するには、 removeCollection を使用します。 この操作は、データベース用語における、表のドロップと似ています。

var collection = new JSONStoreCollection('people');
collection.removeCollection()
.then(res => {
	// handle success
}).catch(err => {
	// handle failure
});

IBM MobileFirst JSONStore のサンプル・アプリケーション

サンプルはここからダウンロードします。

サンプルの実行

サンプルのルート・ディレクトリー内で、すべてのプロジェクト依存関係をインストールする次のコマンドを実行します。

npm install

注: mfpclient.properties と mfpclient.plist が正しい MobileFirst Server を指していることを確認します。

1. アプリケーションの登録。 android ディレクトリーに移動して、次のコマンドを実行します。

    mfpdev app register
   

2. アプリケーションの構成。 (Android の場合のみ)

   • React Native プロジェクトのルート・ディレクトリーから android/app/src/main/AndroidManifest.xml ファイルを開きます。
     次の行を <manifest> タグに追加します。
     xmlns:tools="http://schemas.android.com/tools"
     次の行を <application> タグに追加します。
     tools:replace="android:allowBackup"
     
     このステップは react-native-ibm-mobilefirst ライブラリーで必要です。
     

   • React Native プロジェクトのルート・ディレクトリーから android/app/build.gradle ファイルを開きます。
     次のコードを android {} 内に追加します。
     

     packagingOptions{
     	exclude 'META-INF/ASL2.0'
     }
     

     このステップは react-native-ibm-mobilefirst-jsonstore ライブラリーで必要です。

3. アプリケーションの実行。 ルート・ディレクトリーに戻って、iOS ディレクトリーにナビゲートし、mfpdev app register コマンドを実行します。

これで、アプリケーションを実行する準備ができました。 Android で実行するには、次のコマンドを実行します。

react-native run-android