Web 应用程序端到端演示
improve this page | report issue概述
本演示的目的是展示端到端流程:
- 在 MobileFirst Operations Console 中注册并下载与 MobileFirst 客户机 SDK 预捆绑的样本应用程序。
- 将新的或提供的适配器部署到 MobileFirst Operations Console。
- 应用程序逻辑更改为发出资源请求。
最终结果:
- 成功 ping 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。
- 单击应用程序旁的新建按钮
- 选择 Web 平台
- 将 com.ibm.mfpstarterweb 输入为应用程序标识
- 单击注册应用程序
-
单击获取起动器代码磁贴,并选择下载 Web 样本应用程序。
3. 编辑应用程序逻辑
-
在您所选的代码编辑器中打开项目。
-
选择 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 进行部署。
或者,单击适配器旁边的新建按钮。
-
选择操作 → 下载样本选项。 下载“Hello World”Java 适配器样本。
如果未安装 Maven 和 MobileFirst CLI,请遵循屏幕上的设置开发环境指示信息。
-
从命令行窗口中,导航至适配器的 Maven 项目根文件夹并运行以下命令:
mfpdev adapter build
-
构建完成时,通过操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。 适配器可在 [adapter]/target 文件夹中找到。
5. 测试应用程序
- 从命令行窗口中,导航至 [project root] → node-server 文件夹。
- 打开 [project root] → node-server → server.js 文件,并将 host 和 port 变量编辑为针对 MobileFirst Server 的正确的值。
- 如果使用本地 MobileFirst Server,这些值通常是 http、 localhost 和 9080。
- 如果使用远程 MobileFirst Server(在 IBM Cloud 中),这些值通常是 https、your-server-address 和 443。
- 如果要在 IBM Cloud Private 上使用 Kubernetes 集群并且如果部署的类型为 NodePort,那么端口的值通常为 Kubernetes 集群中服务公开的 NodePort。
例如:
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
- 运行命令
npm start
来安装所需的 Node.js 配置并启动 Node.js 服务器。 - 在您的浏览器中,访问 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 安全框架及其他内容的更多信息,请:
▲