Web 应用程序端到端演示

improve this page | report issue

概述

本演示的目的是展示端到端流程：

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

最终结果：

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

先决条件：

  • 新型 Web 浏览器
  • 可选。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. 单击应用程序旁的新建按钮
    • 选择 Web 平台
    • 将 com.ibm.mfpstarterweb 输入为应用程序标识
    • 单击注册应用程序

    注册应用程序

  2. 单击获取起动器代码磁贴，并选择下载 Web 样本应用程序。

    下载样本应用程序

3. 编辑应用程序逻辑

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

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

    WLAuthorizationManager.obtainAccessToken()
     .then(
         function(accessToken) {
             titleText.innerHTML = "Yay!";
             statusText.innerHTML = "Connected to MobileFirst Server";
                
             var resourceRequest = new WLResourceRequest(
                 "/adapters/javaAdapter/resource/greet/",
                 WLResourceRequest.GET
             );
                
             resourceRequest.setQueryParameter("name", "world");
             resourceRequest.send().then(
                 function(response) {
                     // Will display "Hello world" in an alert dialog.
                     alert("Success: " + response.responseText);
                 },
                 function(response) {
                     alert("Failure: " + JSON.stringify(response));
                 }
             );
         },

         function(error) {
             titleText.innerHTML = "Bummer...";
             statusText.innerHTML = "Failed to connect to MobileFirst Server";
         }
     );

4. 部署适配器

下载这一准备好的适配器工件，并通过操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。

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

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

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

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

    mfpdev adapter build

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

    部署适配器

样本应用程序

5. 测试应用程序

  1. 从命令行窗口中，导航至 [project root] → node-server 文件夹。
  2. 运行命令 npm start 来安装所需的 Node.js 配置并启动 Node.js 服务器。
  3. 打开 [project root] → node-server → server.js 文件，并将 host 和 port 变量编辑为针对 MobileFirst Server 的正确的值。
    • 如果使用本地 MobileFirst Server，这些值通常是 http、 localhost 和 9080。
    • 如果使用远程 MobileFirst Server（在 Bluemix 中），这些值通常是 https、your-server-address 和 443。

    例如：

    var host = 'https://mobilefoundation-xxxx.mybluemix.net'; // The Mobile Foundation server address
var port = 9081; // The local port number to use
var mfpURL = host + ':443'; // The Mobile Foundation server port number
  4. 在您的浏览器中，访问 URL http://localhost:9081/home。


安全源策略

开发过程中使用 Chrome 时，在同时使用 HTTP 和“localhost”以外的主机的情况下，浏览器可能不允许加载应用程序。这是因为缺省情况下，本浏览器中实施并使用了安全源策略。

要解决此问题，您可以通过以下标记启动 Chrome 浏览器：

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • 将“test-to-new-user-profile/myprofile”替换为将充当新 Chrome 用户概要文件的文件夹的位置，以便标记起作用。


结果

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

然后，适配器响应将显示在警报中。

后续步骤

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

▲
Last modified on April 24, 2017