React Native のエンドツーエンドのデモンストレーション
improve this page | report issue概説
このデモンストレーションの目的は、エンドツーエンドのフローを説明することです。
- MobileFirst クライアント SDK と事前にバンドルされているサンプル・アプリケーションは登録済みで、MobileFirst Operations Console からダウンロードされています。
- 新規または提供済みのアダプターは MobileFirst Operations Console にデプロイされています。
- アプリケーション・ロジックは、リソース要求を行うために変更されています。
終了結果:
- MobileFirst Server を正常に ping している。
- アダプターを使用してデータを正常に取得している。
前提条件:
- Xcode for iOS、Android Studio for Android
- React Native CLI
- オプション。 MobileFirst CLI (ダウンロード)
- オプション。 スタンドアロン MobileFirst Server (ダウンロード)
ステップ 1. MobileFirst Server の開始
Mobile Foundation インスタンスを作成済みであることを確認します。あるいは、MobileFirst Developer Kitを使用しているときは、サーバーのフォルダーにナビゲートして、Mac および Linux では ./run.sh
、Windows では run.cmd
のコマンドを実行してください。
ステップ 2. アプリケーションの作成および登録
ブラウザーで、URL http://your-server-host:server-port/mfpconsole
をロードして MobileFirst Operations Console を開きます。 サーバーがローカルで実行されている場合は、http://localhost:9080/mfpconsole
を使用します。 ユーザー名/パスワード は admin/admin です。
- アプリケーションの隣の「新規」ボタンをクリックします。
- 次のいずれかのプラットフォームを選択します。Android、iOS
- 「アプリケーション ID」として「com.ibm.mfpstarter.reactnative」を入力します。
- 1.0.0 を version として入力します。
- 「アプリケーションの登録」をクリックします。
- Github から、React Native サンプル・アプリケーションをダウンロードします。
ステップ 3. アプリケーション・ロジックの編集
-
任意のコード・エディターで React Native プロジェクトを開きます。
-
プロジェクトのルート・フォルダーにある、app.js ファイルを選択し、以下のコード・スニペットを貼り付けて、既存の
WLAuthorizationManager.obtainAccessToken()
関数を置き換えます。
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");
});
ステップ 4. アダプターのデプロイ
.adapter 成果物をダウンロードし、これを、「アクション」 → 「アダプターのデプロイ」アクションを使用して MobileFirst Operations Console からデプロイします。
あるいは、「アダプター」の隣の「新規」ボタンをクリックします。
-
「アクション」→「サンプルのダウンロード」オプションを選択します。 Hello World Java アダプターのサンプルをダウンロードします。
Maven および MobileFirst CLI がインストールされていない場合は、スクリーン内の「開発環境をセットアップします」の説明に従います。
-
コマンド・ライン・ウィンドウからアダプターの Maven プロジェクト・ルート・フォルダーにナビゲートし、以下のコマンドを実行します。
mfpdev adapter build
-
ビルドが終了したら、「アクション」→「アダプターのデプロイ」アクションを使用して MobileFirst Operations Console からアダプターをデプロイします。 アダプターは、[adapter]/target フォルダー内にあります。
ステップ 5. アプリケーションのテスト
- MobileFirst CLI がインストールされていることを確認し、特定のプラットフォームの (iOS または Android) ルート・フォルダーにナビゲートし、コマンド
mfpdev app register
を実行します。 リモート MobileFirst Server が使用されている場合は、次のコマンドを実行してサーバーを追加します。mfpdev server add
次に、アプリを登録するコマンドを実行します。例えば次のとおりです。
mfpdev app register myIBMCloudServer
- 次のコマンドを実行してアプリケーションを実行します。
react-native run-ios|run-android
デバイスが接続されている場合は、アプリケーションがデバイスにインストールされ、起動されます。 接続されていない場合は、シミュレーターまたはエミュレーターが使用されます。
結果
- 「MobileFirst Server への ping (Ping MobileFirst Server)」ボタンをクリックすると、「MobileFirst Server に接続されています (Connected to MobileFirst Server)」が表示されます。
- アプリケーションが MobileFirst Server に接続できた場合は、デプロイした Java アダプターを使用してリソース要求呼び出しが行われます。 その場合、アダプター応答がアラートに表示されます。
次の手順
アプリケーションでのアダプターの使用、プッシュ通知などの追加のサービスを統合する方法、MobileFirst セキュリティー・フレームワークの使用などについて学習します。
- アプリケーションの開発チュートリアルを検討する
- アダプターの開発チュートリアルを検討する
- 認証およびセキュリティー・チュートリアルを検討する
- 通知チュートリアルを検討する
- すべてのチュートリアルを検討する