Ionic 开发

improve this page | report issue
请按照以下教程来开发您的 Ionic 应用程序:设置开发环境、体验产品以及通过与 Mobile Foundation 8.0 产品集成来增加价值。

Ionic 是基于 AngularJSApache 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/mfpconsoleusername/passwordadmin/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 样本应用程序

  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
          

步骤 2.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";
                 });
               }
             );
           

步骤 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 文件,然后编辑 值,其中 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 适配器进行资源请求调用。然后,适配器响应将显示在警报中。
Last modified on October 11, 2018