React Native アプリケーションへの MobileFirst Foundation SDK の追加

概説

このチュートリアルでは、React Native CLI を使用して作成された新規または既存の React Native アプリケーションに MobileFirst SDK を追加する方法について学習します。また、アプリケーションを認識するように MobileFirst Server を構成する方法と、プロジェクト内で変更する MobileFirst 構成ファイルに関する情報を見つける方法についても学習します。

MobileFirst React Native SDK は、React Native NPM プラグインとして提供され、NPM に登録されます。

入手可能なプラグインは次のとおりです。

react-native-ibm-mobilefirst - コアの SDK プラグイン

React Native SDK コンポーネント

react-native-ibm-mobilefirst

react-native-ibm-mobilefirst プラグインは、React Native 用のコア MobileFirst プラグインであり、必須です。他の MobileFirst プラグインのいずれかをインストールすると、react-native-ibm-mobilefirst プラグインも自動的にインストールされます (まだインストールされていない場合)。

前提条件:

React Native CLI および MobileFirst CLI が開発者のワークステーションにインストールされている。
MobileFirst Server のローカル・インスタンスまたはリモート・インスタンスが稼働している。
MobileFirst 開発環境のセットアップおよび React Native 開発環境のセットアップの両チュートリアルを読む。

Mobile Foundation React Native SDK の追加

以下の手順に従って、新規または既存の React Native プロジェクトに Mobile Foundation React Native SDK を追加し、それを MobileFirst Server に登録します。

開始する前に、MobileFirst Server が稼働していることを確認します。
ローカルにインストールされているサーバーを使用する場合: コマンド・ライン・ウィンドウで、サーバーのフォルダーに移動し、コマンド ./run.sh を実行します。

SDK の追加

新規アプリケーション

React Native プロジェクトを作成します。react-native init projectName
例えば、次のとおりです。
```
react-native init Hello
```
- Hello は、フォルダー名であり、アプリケーションの名前です。
テンプレートとして用意された index.js を使用することで、アプリケーションのマルチリンガル・トランスレーションや初期化オプションといった、MobileFirst の追加機能を使用できます (詳しくはユーザー向け資料を参照してください)。
cd hello コマンドで、ディレクトリーを React Native プロジェクトのルートに変更します。
NPM CLI コマンド npm install react-native-plugin-name を使用して、MobileFirst プラグインを追加します。以下に例を示します。
```
npm install react-native-ibm-mobilefirst
```
上記のコマンドは、MobileFirst コア SDK プラグインを React Native プロジェクトに追加します。
以下のコマンドを実行して、プラグイン・ライブラリーをリンクします。
```
react-native link
```
注: このコマンドは、React Native 0.60 からは必要ありません。
iOS の場合のみ、Mobilefirst Pod の依存関係をインストールします。
```
cd ios && pod install 
```

アプリケーションの終了

既存の React Native プロジェクトのルートに移動し、次のように MobileFirst コア React Native プラグインを追加します。
```
npm install react-native-ibm-mobilefirst
```
以下のコマンドを実行して、プラグイン・ライブラリーをリンクします。
```
react-native link
```
注: このコマンドは、React Native 0.60 からは必要ありません。
iOS の場合のみ、Mobilefirst Pod の依存関係をインストールします。
```
cd ios && pod install 
```

アプリケーションの登録

コマンド・ライン・ウィンドウを開き、プロジェクトの特定のプラットフォーム (iOS または Android) のルートに移動します。
次のコマンドで、MobileFirst Server にアプリケーションを登録します。
```
mfpdev app register
```

iOS :

プラットフォームが iOS の場合は、アプリケーションのバンドル ID を指定するように求められます。重要: バンドル ID は大/小文字が区別されます。

mfpdev app register CLI コマンドは、まず、MobileFirst Server に接続してアプリケーションを登録し、次に、Xcode プロジェクトのルートに mfpclient.plist ファイルを生成し、そこに MobileFirst Server を識別するメタデータを追加します。
Android :

プラットフォームが Android の場合は、アプリケーションのパッケージ名を指定するように求められます。重要: パッケージ名は大/小文字が区別されます。

mfpdev app register CLI コマンドは、まず、MobileFirst Server に接続してアプリケーションを登録し、続けて mfpclient.properties ファイルを Android Studio プロジェクトの [project root]/app/src/main/assets/ フォルダー内に生成し、そこに MobileFirst Server を識別するメタデータを追加します。

リモート・サーバーを使用する場合は、mfpdev server add コマンドを使用して、そのサーバーを追加します。

mfpdev app register CLI コマンドは、まず、MobileFirst Server に接続してアプリケーションを登録します。各プラットフォームはアプリケーションとして MobileFirst Server に登録されます。

ヒント: 次のように、MobileFirst Operations Console からアプリケーションを登録することもできます。

MobileFirst Operations Console をロードします。

「アプリケーション」の横の「新規」ボタンをクリックして、新規アプリケーションを登録し、画面に表示される指示に従います。

MobileFirst React Native SDK の更新

MobileFirst React Native SDK を最新リリースで更新するには、npm uninstall react-native-ibm-mobilefirst コマンドを実行して react-native-ibm-mobilefirst プラグインを削除してから、npm install react-native-ibm-mobilefirst コマンドを実行してこのプラグインを再度追加します。

SDK のリリースは、SDK の NPM リポジトリーで調べることができます。

生成されるMobileFirst React Native SDK 成果物

Android 環境

mfpclient.properties

Android Studio プロジェクトの ./app/src/main/assets/ フォルダー内に配置されているこのファイルは、MobileFirst Server に Android アプリケーションを登録するために使用される、クライアント・サイドのプロパティーを定義します。

プロパティー	説明	値の例
wlServerProtocol	MobileFirst Server との通信プロトコル。	http または https
wlServerHost	MobileFirst Server のホスト名。	192.168.1.63
wlServerPort	MobileFirst Server のポート。	9080
wlServerContext	MobileFirst Server 上のアプリケーションのコンテキスト・ルート・パス。	/mfp/
languagePreferences	クライアントの SDK システム・メッセージのデフォルト言語を設定します。	en

iOS 環境

mfpclient.plist

プロジェクトのルートに配置されているこのファイルは、MobileFirst Server に iOS アプリケーションを登録するために使用される、クライアント・サイドのプロパティーを定義します。

プロパティー	説明	値の例
protocol	MobileFirst Server との通信プロトコル。	http または https
host	MobileFirst Server のホスト名。	192.168.1.63
port	MobileFirst Server のポート。	9080
wlServerContext	MobileFirst Server 上のアプリケーションのコンテキスト・ルート・パス。	/mfp/
languagePreferences	クライアントの SDK システム・メッセージのデフォルト言語を設定します。	en

次に使用するチュートリアル

これで MobileFirst React Native SDK が組み込まれたので、以下の作業を行うことができます。

Mobile Foundation SDK の使用に関するチュートリアルを検討する
アダプター開発に関するチュートリアルを検討する
認証とセキュリティーに関するチュートリアルを検討する
通知に関するチュートリアルを検討する
すべてのチュートリアルを検討する

▲

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.

Last modified on November 27, 2019