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

improve this page | report issue

概説

このチュートリアルでは、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 プラグインも自動的にインストールされます (まだインストールされていない場合)。

前提条件:

Mobile Foundation React Native SDK の追加

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

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

SDK の追加

新規アプリケーション

  1. React Native プロジェクトを作成します。react-native init projectName
    例えば、次のとおりです。

    react-native init Hello
    
    • Hello は、フォルダー名であり、アプリケーションの名前です。

    テンプレートとして用意された index.js を使用することで、アプリケーションのマルチリンガル・トランスレーションや初期化オプションといった、MobileFirst の追加機能を使用できます (詳しくはユーザー向け資料を参照してください)。

  2. cd hello コマンドで、ディレクトリーを React Native プロジェクトのルートに変更します。

  3. NPM CLI コマンド npm install react-native-plugin-name を使用して、MobileFirst プラグインを追加します。 以下に例を示します。

    npm install react-native-ibm-mobilefirst
    

    上記のコマンドは、MobileFirst コア SDK プラグインを React Native プロジェクトに追加します。

  4. 以下のコマンドを実行して、プラグイン・ライブラリーをリンクします。

    react-native link
    

アプリケーションの終了

  1. 既存の React Native プロジェクトのルートに移動し、次のように MobileFirst コア React Native プラグインを追加します。

    npm install react-native-ibm-mobilefirst
    
  2. 以下のコマンドを実行して、プラグイン・ライブラリーをリンクします。

    react-native link
    

アプリケーションの登録

  1. コマンド・ライン・ウィンドウを開き、プロジェクトの特定のプラットフォーム (iOS または Android) のルートに移動します。

  2. 次のコマンドで、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 からアプリケーションを登録することもできます。

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

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 が組み込まれたので、以下の作業を行うことができます。

Last modified on October 05, 2018