Ionic 开发
improve this page | report issue请按照以下教程来开发您的 Ionic 应用程序:设置开发环境、体验产品以及通过与 Mobile Foundation 8.0 产品集成来增加价值。
Ionic 是基于 AngularJS 和 Apache Cordova 构建的框架。Ionic 可帮助您使用 HTML、CSS 和 Javascript 等 Web 技术快速构建混合移动和 Web 平台应用程序。
如果您是选择 Ionic 作为移动或 Web 应用程序开发框架的开发人员,以下部分可帮助您在 Ionic 应用程序中开始使用 IBM Mobile Foundation SDK。
您可以使用自己首选的代码编辑器(如 Atom.io、Visual Studio Code、Eclipse、IntelliJ 或任何其他编辑器)来编写自己的应用程序。
执行以下步骤,以在 MobileFirst Platform Foundation 上快速开始使用 Ionic 进行开发。
步骤 1:安装 Ionic CLI
要开始进行 Ionic 开发,所需执行的第一步是安装 Ionic CLI。
要安装 Cordova 和 Ionic CLI,请执行以下步骤:
下载并安装 NodeJS。
从命令行窗口运行以下命令:
npm install -g ionic
步骤 2:设置 MobileFirst 开发环境
在您安装 Ionic CLI 之后,设置 MobileFirst 开发环境。有关详细信息,请参阅教程设置 MobileFirst 开发环境以设置您的 MobileFirst 开发环境。
转至快速启动选项卡,以了解如何使用 Ionic SDK 快速启动开发工作。
该快速启动教程的目的是解释简单的端到端流程。
在 Github 中提供了样本应用程序,将下载样本并向 MobileFirst Server 注册。提供的适配器(或新适配器)将部署到 MobileFirst Operations Console。应用程序逻辑更改为发出资源请求。
预期结果:成功 ping MobileFirst Server,并使用适配器成功检索数据。
步骤 1:启动 MobileFirst Server
确保您已创建 Mobile Foundation 实例,如果要使用 MobileFirst Developer Kit,请浏览至服务器的文件夹并运行以下命令:./run.sh
(在 Mac 和 Linux 中)或 run.cmd
(在 Windows 中)。
步骤 2:注册应用程序
通过在浏览器中加载 URL http://your-server-host:server-port/mfpconsole
来打开 MobileFirst Operations Console。
- 如果服务器是在本地运行,请使用:
http://localhost:9080/mfpconsole
。username/password 为 admin/admin。 - 如果服务器在 IBM Cloud 上作为 Mobile Foundation 服务实例运行,请使用:
https://bluemix-mfp-server-hostname:443/mfpconsole
。可以通过 IBM Cloud Mobile Foundation 服务凭证获取 username/password。
步骤 2.1:单击应用程序旁边的新建按钮
- 从平台列表中选择一个平台:Android、iOS、Windows、浏览器
- 输入 com.ibm.mfpstarterionic 作为应用程序标识
- 将 1.0.0 输入为版本
- 单击注册应用程序
步骤 2.2:从 Github 下载 Ionic 样本。
步骤 2.3:将 Ionic SDK 添加到下载的 Ionic 样本应用程序
- 浏览至已下载的 Ionic 项目的根目录,然后添加 MobileFirst 核心 Ionic Cordova 插件。
- 将目录更改为 Ionic 项目的根目录:
cd MFPStarterIonic
- 使用 Ionic CLI 命令添加 MobileFirst 插件:
ionic cordova plugin add cordova-plugin-name
例如:ionic cordova plugin add cordova-plugin-mfp
上述命令会将 MobileFirst 核心 SDK 插件添加到 Ionic 项目。
- 使用 Ionic CLI 命令将一个或多个受支持的平台添加到 Cordova 项目:
ionic cordova platform add ios|android|windows|browser
例如:cordova platform add ios
- 通过运行
ionic cordova prepare
命令来准备应用程序资源:ionic cordova prepare
步骤 2.4:编辑应用程序逻辑
- 在您所选的代码编辑器中打开 Ionic 项目。
- 选择 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"; }); } );
步骤 3:部署适配器
下载这一准备好的 .adapter 工件,并通过使用操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。
步骤 3.1:选择操作 → 下载样本选项。下载 Hello World Java 适配器样本
或者,单击适配器旁边的新建按钮。
如果未安装 Maven 和 MobileFirst CLI,请遵循屏幕上的设置开发环境指示信息。
步骤 3.2:从命令行窗口中,导航至适配器的 Maven 项目根文件夹并运行以下命令:
mfpdev adapter build
步骤 3.3:在构建完成时,使用操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。适配器可在 [adapter]/target 文件夹中找到。
步骤 4:测试应用程序
步骤 4.1:从命令行窗口,导航至 Ionic 项目的根文件夹。
步骤 4.2:运行以下命令来添加平台:
ionic cordova platform add ios|android|windows|browser
。
步骤 4.3:在 Ionic 项目中,选择 config.xml 文件,然后编辑
值,其中 protocol、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。
或者,如果已安装 MobileFirst CLI,那么导航至项目根文件夹,并运行命令 mfpdev app register
。如果使用远程 MobileFirst Server,那么运行命令 mfpdev server add
来添加服务器,后跟(例如):mfpdev app register myIBMCloudServer
。
如果已连接某设备,将在该设备上安装并启动此应用程序。否则,将使用模拟器或仿真器。
有关快速启动步骤的详细指示信息,请参阅此处。
结果
- 单击 Ping MobileFirst Server 按钮将显示已连接到 MobileFirst Server。
- 如果应用程序能够连接到 MobileFirst Server,那么将使用部署的 Java 适配器进行资源请求调用。然后,适配器响应将显示在警报中。