Ionic 端到端演示

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 或 Visual Studio 2015 for Windows 10 UWP 或更高版本
  • Ionic 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、Windows、浏览器
    • 输入 com.ibm.mfpstarterionic 作为应用程序标识
    • 1.0.0 输入为版本
    • 单击注册应用程序

    注册应用程序

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

步骤 3:将 MobileFirst SDK 添加到 Ionic 应用程序

执行以下步骤以将 MobileFirst Ionic SDK 添加到下载的 Ionic 样本应用程序。

  1. 浏览至现有 Ionic 项目的根目录,然后添加 MobileFirst 核心 Ionic Cordova 插件。

  2. 将目录切换至 Ionic 项目的根目录:cd MFPStarterIonic

  3. 使用 Ionic CLI 命令添加 MobileFirst 插件:ionic cordova plugin add cordova-plugin-name 例如:

    ionic cordova plugin add cordova-plugin-mfp
    

    上述命令会将 MobileFirst 核心 SDK 插件添加到 Ionic 项目。

  4. 使用 Ionic CLI 命令将一个或多个受支持的平台添加到 Cordova 项目:ionic cordova platform add ios|android|windows|browser。例如:

    cordova platform add ios
    
  5. 运行 ionic cordova prepare 命令来准备应用程序资源:

    ionic cordova prepare
    

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

  1. 在您选择的代码编辑器中打开 Ionic 项目。

  2. 选择 src/js/index.js 文件并粘贴以下代码片段,以替换现有的 WLAuthorizationManager.obtainAccessToken() 函数:

WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        this.zone.run(() => {
          this.title = "Yay!";
          this.status = "Connected to MobileFirst Server";
        });
        var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
        WLResourceRequest.GET
        );

        resourceRequest.setQueryParameter("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);
        this.zone.run(() => {
         this.title = "Bummer...";
         this.status = "Failed to connect to MobileFirst Server";
        });
      }
    );

步骤 5. 部署适配器

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

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

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

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

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

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

    部署适配器

样本应用程序

步骤 6. 测试应用程序

  1. 命令行窗口中,导航至 Cordova 项目的根文件夹。
  2. 运行命令 ionic cordova platform add ios|android|windows|browser 来添加一个平台。
  3. 在 Ionic 项目中,选择 config.xml 文件,然后编辑 <mfp:server ... url=" "/> 值,其中 protocolhostport 属性设置为针对 MobileFirst Server 的正确的值。
    • 如果使用本地 MobileFirst Server,这些值通常是 httplocalhost9080
    • 如果使用远程 MobileFirst Server(在 IBM Cloud 中),这些值通常是 httpsyour-server-address443
    • 如果要在 IBM Cloud Private 上使用 Kubernetes 集群并且如果部署的类型为 NodePort,那么端口的值通常为 Kubernetes 集群中服务公开的 NodePort

    或者,如果已安装 MobileFirst CLI,那么导航至项目根文件夹并运行命令 mfpdev app register。如果使用远程 MobileFirst Server,那么运行命令

     mfpdev server add
    

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

     mfpdev app register myIBMCloudServer
    

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


结果

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

后续步骤

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

Last modified on October 11, 2018