React Native 端到端演示

improve this page | report issue

概述

本演示的目的是解释端到端流程:

  1. 在 MobileFirst Operations Console 中注册并下载与 MobileFirst 客户机 SDK 预捆绑的样本应用程序。
  2. 将新的或提供的适配器部署到 MobileFirst Operations Console。
  3. 应用程序逻辑更改为发出资源请求。

最终结果

  • 成功地 ping MobileFirst Server。
  • 成功地使用适配器检索数据。

先决条件:

  • Xcode for iOS 或 Android Studio for Android
  • React Native CLI
  • 可选。MobileFirst CLI(下载
  • 可选。单机MobileFirst Server(下载

步骤 1. 启动 MobileFirst Server

请确保您已创建 Mobile Foundation 实例,或者如果使用 MobileFirst Developer Kit,请导航至服务器的文件夹并运行命令 ./run.sh(在 Mac 和 Linux 中)或 run.cmd(在 Windows 中)。

步骤 2. 创建并注册应用程序

在浏览器中,通过加载以下 URL 打开 MobileFirst Operations Console:http://your-server-host:server-port/mfpconsole。如果服务器在本地运行,请使用 http://localhost:9080/mfpconsole用户名/密码admin/admin

  1. 单击应用程序旁的新建按钮
    • 选择平台:Android 或 iOS
    • 输入 com.ibm.mfpstarter.reactnative 作为应用程序标识
    • 1.0.0 输入为版本
    • 单击注册应用程序

    注册应用程序

  2. Github 下载 React Native 样本应用程序。

步骤 3. 编辑应用程序逻辑

  1. 在您所选的代码编辑器中打开 React Native 项目。

  2. 选择位于项目根文件夹中的 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) => {
            alert("Failure: " + JSON.stringify(error));
          }
        );
      }, (error) => {
        console.log('-->  pingMFP(): failure ', error.responseText);
        alert("Failed to connect to MobileFirst Server");
      });

步骤 4. 部署适配器

下载 .adapter 工件,并通过操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。

或者,单击适配器旁边的新建按钮。

  1. 选择操作 → 下载样本选项。下载 Hello World Java 适配器样本。

    如果未安装 Maven 和 MobileFirst CLI,请遵循屏幕上的设置开发环境指示信息。

  2. 命令行窗口中,导航至适配器的 Maven 项目根文件夹并运行以下命令:

     mfpdev adapter build
    
  3. 构建完成时,通过操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。适配器可在 [adapter]/target 文件夹中找到。

    部署适配器

样本应用程序

步骤 5. 测试应用程序

  1. 确保您已安装 MobileFirst CLI,然后浏览至特定平台(iOS 或 Android)根文件夹并运行命令 mfpdev app register。如果使用远程 MobileFirst Server,那么运行命令
    mfpdev server add
    

    来添加服务器,后跟用于注册应用程序的命令,例如:

    mfpdev app register myIBMCloudServer
    
  2. 运行以下命令来运行应用程序:
    react-native run-ios|run-android
    

如果已连接某设备,将在该设备上安装并启动此应用程序。否则将使用模拟器或仿真器。


结果

  • 单击 Ping MobileFirst Server 按钮将显示已连接到 MobileFirst Server
  • 如果应用程序能够连接到 MobileFirst Server,那么将使用部署的 Java 适配器进行资源请求调用。然后,适配器响应将显示在警报中。

后续步骤

要了解有关在应用程序中使用适配器,如何集成附加服务(如推送通知),使用 MobileFirst 安全框架及其他内容的更多信息,请:

Last modified on October 11, 2018