React Native の開発
improve this page | report issue以下のチュートリアルに従って React Native アプリケーションを開発します。それには、開発環境のセットアップ、製品の体験、および Mobile Foundation 8.0 オファリングと統合することによる価値の追加が含まれます。
以下のセクションは、モバイル・アプリまたは Web アプリを開発するためのフレームワークとして React Native を選択した開発者が React Native アプリで IBM Mobile Foundation SDK の使用を始めるのを支援します。
アプリケーションの作成には、任意のコード・エディター (Atom.io、Visual Studio Code、Eclipse、IntelliJ、その他) を使用できます。
ステップ 1: React Native CLI のインストール
React Native 開発を始めるために必要な最初のステップは、React Native CLI をインストールすることです。
React Native CLI をインストールするには、次のようにします。
NodeJS をダウンロードしてインストールします。
コマンド・ライン・ウィンドウから以下のコマンドを実行します。
npm install -g react-native-cli
React Native 資料の「Getting Started」ページの説明に従って、ご使用のマシンを React Native 開発用にセットアップします。
これには、Android および iOS に必要なセットアップが含まれています。
ステップ 2: MobileFirst 開発環境のセットアップ
React Native CLI をインストールした後、MobileFirst 開発環境をセットアップします。詳しくは、MobileFirst 開発環境のセットアップについてのチュートリアルである MobileFirst 開発環境のセットアップを参照してください。
React Native SDK を使用した開発を素早く開始する方法を学ぶには、「クイック・スタート」タブに移動してください。
MobileFirst Platform Foundation 上で React Native を使用した開発を素早く開始するには、以下のステップに従ってください。
このクイック・スタート・チュートリアルの目的は、単純なエンドツーエンド・フローを説明することです。
Github にサンプル・アプリケーションが用意されています。このサンプルがダウンロードされ、MobileFirst Server に登録されます。提供されるアダプター (または新規アダプター) が MobileFirst Operations Console にデプロイされます。アプリケーション・ロジックはリソース要求を行うように変更されます。
予期される結果: MobileFirst Server を正常に ping し、アダプターを使用してデータを正常に取得する。
ステップ 1: MobileFirst Server の開始
Mobile Foundation のインスタンスを作成済みであることを確認します。あるいは、MobileFirst Developer Kit を使用している場合は、サーバーのフォルダーに移動し、コマンド ./run.sh
(Mac および Linux) または run.cmd
(Windows) を実行します。
ステップ 2: React Native SDK の追加
ステップ 2.1: Github からReact Native サンプル・アプリケーションをダウンロードします。
ステップ 2.2: ダウンロードした React Native サンプル・アプリケーションに React Native SDK を追加します。
React Native 用の MobileFirst SDK は NPM から React Native モジュールとして入手できます。
- ダウンロードした React Native プロジェクトのルートに移動し、MobileFirst core React Native プラグインを追加し、React Native プロジェクトのルートにディレクトリーを変更します:
cd MFPStarterReactNative
- NPM CLI コマンド
npm install react-native-plugin-name
を使用して、MobileFirst プラグインを追加します。
以下に例を示します。npm install react-native-ibm-mobilefirst --save
上記のコマンドは、MobileFirst Core SDK プラグインを React Native プロジェクトに追加します。
- すべてのネイティブ依存関係をアプリにリンクします。
注意: このステップは react-native バージョン 0.60 以降では必要ありません。react-native link
ステップ 2.3: プラットフォーム固有の追加ステップ
Android
以下の行を AndroidManifest.xml ({project-folder}/android/app/src/main/) に追加します。 <![CDATA[
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.myapp">
...
<application tools:replace="android:allowBackup"
...
</application>
]]>
iOS
プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。cd ios && pod install
このステップは iOS プラットフォームにのみ適用されます。
ステップ 3: アプリケーションの登録
- コマンド・ライン・ウィンドウを開き、プロジェクトの特定のプラットフォームのルート (iOS または Android) に移動します。
またはcd ios
cd android
- 以下のコマンドを実行して、アプリケーションを登録します。
mfpdev app register
リモート・サーバーを使用する場合は、
mfpdev server add
コマンドを使用して、そのサーバーを追加します。mfpdev app register
CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録します。各プラットフォームは MobileFirst Server 内に 1 つのアプリケーションとして登録されます。iOS
プラットフォームが iOS の場合、アプリケーションの BundleID を指定するように求められます。重要: BundleID は大/小文字の区別があります。
mfpdev app register CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録し、次に、MobileFirst Server を識別するメタデータを含んでいる、Xcode プロジェクトのルートにある mfpclient.plist 構成ファイルを更新します。
注: XCode では、プロジェクト・ナビゲーターで mfpclient.plist を ios フォルダーからドラッグ・アンド・ドロップします。このステップは iOS プラットフォームにのみ適用されます。
Android
プラットフォームが Android の場合、アプリケーションのパッケージ名を指定するように求められます。重要: パッケージ名は大/小文字の区別があります。
mfpdev app register CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録し、次に、Android Studio プロジェクトの [project root]/app/src/main/assets/ フォルダーに mfpclient.properties ファイルを生成し、これに MobileFirst Server を識別するメタデータを追加します。
ステップ 4: アプリケーション・ロジックの編集
- 任意のコード・エディターで React Native プロジェクトを開きます。
- WLAuthorizationManager クラスを App.js にインポートします。
- プロジェクトのルート・フォルダーにある App.js ファイルを選択し、以下のコード・スニペットを貼り付けて既存の
WLAuthorizationManager.obtainAccessToken()
関数を置き換えます。React Native クライアント・サイド API リファレンス (ここ) を参照してください。
WLAuthorizationManager.obtainAccessToken("").then( (token) => { console.log('--> pingMFP(): Success ', token); var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/", WLResourceRequest.GET ); resourceRequest.setQueryParameters({ name: "world" }); resourceRequest.send().then( (response) => { // Will display "Hello world" in an alert dialog. alert("Success: " + response.responseText); }, (error) => { console.error(error); alert("Failure: Resource Request"); } ); }, (error) => { console.error(error); alert("Failed to connect to MobileFirst Server"); });
import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
ステップ 5: アダプターのデプロイ
用意されているアダプター成果物をダウンロードし、MobileFirst Operations Console から「アクション」 → 「アダプターのデプロイ」アクションを使用してデプロイします。
ステップ 5.1: 「アクション」 → 「サンプルのダウンロード」オプションを選択します。Hello World Java アダプター・サンプルをダウンロードします。
あるいは、「アダプター」の横にある「新規」ボタンをクリックします。
Maven および MobileFirst CLI がインストールされていない場合は、画面に表示される「開発環境をセットアップします」の説明に従ってください。
ステップ 5.2: コマンド・ライン・ウィンドウから、アダプターの Maven プロジェクト・ルート・フォルダーに移動し、以下のコマンドを実行します。
mfpdev adapter build
ステップ 5.3: ビルドが終了したら、それを MobileFirst Operations Console から「アクション」 → 「アダプターのデプロイ」アクションを使用してデプロイします。アダプターは [adapter]/target フォルダー内にあります。
ステップ 6: アプリケーションのテスト
以下のコマンドを使用して、アプリケーションを実行します。
react-native run-ios|run-android
デバイスが接続されている場合は、そのデバイスにアプリケーションがインストールされ、起動されます。そうでない場合はシミュレーターまたはエミュレーターが使用されます。
クイック・スタートのステップについて詳しくは、ここを参照してください。
結果
- 「Ping MobileFirst Server」ボタンをクリックすると、Connected to MobileFirst Server と表示されます。
- アプリケーションが MobileFirst Server に接続できる場合、デプロイした Java アダプターを使用してリソース要求呼び出しが行われます。その場合、アダプター応答がアラートに表示されます。
IBM MobileFirst JSONStore の React Native SDK
IBM Mobile Foundation JSONStore は、軽量で文書志向のストレージ・システムを提供する、オプションのクライアント・サイド API です。JSONStore は JSON 文書の永続ストレージを有効にします。アプリケーション内の文書は、デバイスがオフラインの時でも JSONStore 内で使用可能です。この永続的で常に使用可能なストレージは、例えばデバイスで使用できるネットワーク接続がない時などに、ユーザーに文書へのアクセス権限を与えるのに役立ちます。インストール
React Native アプリケーションの IBM MobileFirst JSONStore SDKは IBM MobileFirst Foundation SDK に依存しています。IBM MobileFirst Foundation SDK をご使用のアプリケーションに追加します。
ご使用の React Native アプリケーションのフォルダーにナビゲートし、以下のコマンドを実行して、React Native アプリケーションの JSONStore SDK をインストールします。
npm install react-native-ibm-mobilefirst-jsonstore --save
サポートされるプラットフォームは Android と iOS です。
概要
前提条件
- React Native アプリケーションのすべての前提条件を、必ず確認してください。React Native を初めて使用する場合は、React Native の概要ページを参照してください。
- IBM Cloud の Mobile Foundation インスタンスまたは IBM Mobile Foundation サーバーのオンプレミス・インストール。
React Native プロジェクトの作成
- 最初のステップは React Native プロジェクトの作成です。このアプリケーションを
JSONStoreApp
と呼びましょう。React Native CLI を使用して、新規プロジェクトを作成します。react-native init JSONStoreApp cd JSONStoreApp
- MobileFirst Core SDK をインストールし、概要の説明のとおりに実行します。
- IBM MobileFirst JSONStore SDK をご使用のアプリケーションに追加します。
npm install react-native-ibm-mobilefirst-jsonstore —-save
- すべてのネイティブ依存関係が React Native プロジェクトに追加されるように、プロジェクトにリンクします。
注意: このコマンドは react-native 0.60 以降では必要ありません。react-native link
Android アプリケーションの構成
の/android/app/build.gradle android
セクションに以下の行を追加します。packagingOptions{ exclude 'META-INF/ASL2.0' }
JSONStore コレクションの作成
JSONStore API 使用の最初のステップは、JSONStore コレクションの作成です。
- JSONStore クラスをアプリケーションにインポートします。
App.js
を開き、他のインポート・ステートメントに以下の行を追加します。import {WLJSONStore, JSONStoreCollection} from 'react-native-ibm-mobilefirst-jsonstore';
- コレクションを作成してオープンします。同時に複数のコレクションをオープンします。パスワードを使用したコレクションの保護や同期ポリシーのセットアップなどの拡張オプション用の
JSONStoreInitOptions
パラメーターを渡します。var dogs = new JSONStoreCollection('dogs'); WLJSONStore.openCollections(['dogs']); // Provide the name of the collection as a string.
コレクションにデータを追加
コレクションに JSON データを追加します。
var hachi = { "name" : "Hachiko" , "breed" : "Akita" , "country" : "Japan"};
dogs.addData(hachi).then( ()=> {
// Data was added to the collection successfully.
}).catch ( (err) => {
// Error adding data. See the err object for more information on the error
})
コレクションからデータを照会
任意の JSONStoreCollection.find* API を使用して、コレクションを照会します。 JSON データの拡張フィルター処理と照会に、JSONStoreQueryPart と JSONStoreQuery API を使用します。
dogs.findAllDocuments().then( (result) => {
// result will have all the documents in the collection
// E.g. [ {"json": {"name":"Hachiko","breed":"Akita","country":"Japan"},"_id":2}]
}).catch((error) => {
console.error ("Error finding docs " + JSON.stringify(error));
});
コレクションのクローズ、クリア、および破棄
コレクションをクローズすると、openCollections
API の使用に対してコレクションがオープンするまで、その後のアクセスのために JSONStore コレクションがクローズされます。
WLJSONStore.closeAll()
コレクションをクリアするとコレクションからのすべての文書が削除されますが、破棄はされません。
dogs.clearCollection().then (()=>{
// All documents cleared successfully
}).catch( (err) => {
// An error occurred while clearing the collection.
})
コレクションを破棄すると、すべてのデータ、すべてのアクセサー、およびセキュリティー成果物が永続的に削除されます。一度破棄されたコレクションは復元できません。アプリケーションのすべてのコレクションは破棄されます。
WLJSONStore.destroy()
IBM MobileFirst ライブ・アップデートの React Native SDK
Mobile Foundation のライブ・アップデート・フィーチャーは、アプリケーションのユーザーに対してさまざまな構成を定義して提供する簡単な方法を提供します。これには、構成の構造と構成の値を定義するための MobileFirst Operations Console のコンポーネントが含まれます。LiveUpdate React Native SDK を使用すると、MobileFirst Operations Console の「ライブ更新設定」画面で設定したランタイム構成プロパティーとフィーチャーを照会できます。ライブ・アップデートをアプリケーションに統合することで、フィーチャーの切り替え、A/B テスト、フィーチャーのセグメント化などを実装できます。
インストール
React Native アプリケーションの IBM MobileFirst ライブ・アップデート SDKは IBM MobileFirst Foundation SDK に依存しています。IBM MobileFirst Foundation SDK をご使用のアプリケーションに追加します。
ご使用の React Native アプリケーションのフォルダーにナビゲートし、以下のコマンドを実行して、React Native アプリケーションのライブ・アップデート SDK をインストールします。
npm install react-native-ibm-mobilefirst-liveupdate --save
概要
前提条件
- React Native アプリケーションのすべての前提条件を、必ず確認してください。React Native を初めて使用する場合は、React Native の概要ページを参照してください。
- IBM Cloud の Mobile Foundation インスタンスまたは IBM Mobile Foundation サーバーのオンプレミス・インストール。
React Native プロジェクトの作成
- 最初のステップは React Native プロジェクトの作成です。このアプリケーションを
MFLiveUpdateApp
と呼びましょう。React Native CLI を使用して、新規プロジェクトを作成します。react-native init MFLiveUpdateApp
- React Native プラグインをアプリケーションに追加します。
cd MFLiveUpdateApp npm install react-native-ibm-mobilefirst-liveupdate —-save
注: ライブ・アップデート・パッケージは、React Native v0.62.x 以上をサポートします。
- プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。
cd ios && pod install
アプリケーションの構成
Android
AndroidManifest.xml (/android/app/src/main/)
に対して次の変更を加えます。
-
xmlns:tools="http://schemas.android.com/tools"
をマニフェスト・タグに追加します。例:<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.mobilefirstapp">
-
tools:replace="android:allowBackup"
をアプリケーション・タグに追加します。例:<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme" tools:replace="android:allowBackup">
iOS
- プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。
cd ios && pod install
このステップは iOS プラットフォームにのみ適用されます。
アプリケーションのテスト
Android
- アプリケーションを実行するには、
react-native run-android
iOS
- アプリケーションを実行するには、
react-native run-ios
サポートされているプラットフォーム
- Android
- iOS
MobileFirst Operation Console での構成
- MobileFirst Operations Console で、「[ご使用のアプリケーション]」 → 「セキュリティー」タブ → 「スコープ・エレメントのマッピング」と移動して、
liveupdate.mobileclient
のスコープ・マッピングを追加します。デフォルトの保護を使用する場合は空ストリングにマップし、スコープ・エレメントを使用している場合はセキュリティー検査にマップします。
詳しくは、スコープ・マッピングを参照してください。 - MobileFirst Operations Console で、「[ご使用のアプリケーション]」 → 「ライブ更新設定」と移動して、スキーマとフィーチャーを追加できます。
スキーマとフィーチャーをセットアップしたら、クライアント・サイド API を使い始めることができます。
API の使用例
var useClientCache = false; //True (default)
var featureId = 'featureId';
var propertyId = 'propertyId' ;
MFLiveUpdate.obtainConfiguration(useClientCache)
.then(result => {
console.log('Is feature enabled for' + featureId + ':' + result.isFeatureEnabled('featureId'));
console.log ('Property value for the ' + propertyId + 'is :' +result.getProperty('propertyId'));
})
.catch(err => console.log('There was an error:' + err))
追加情報
React Native アプリケーションの JSONStore について詳しくは、 ここを参照してください。ライブ・アップデートについて詳しくは、ここを参照してください。