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 样本应用程序

  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 文件，然后编辑 值，其中 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 适配器进行资源请求调用。然后，适配器响应将显示在警报中。
▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on June 01, 2020