Share via

使用 Azure 移动应用构建 Apache Cordova 应用

  • 项目

本教程介绍如何使用 Azure 移动应用和 Azure 移动应用后端，将基于云的后端服务添加到 Apache Cordova 跨平台应用。 你将创建一个新的移动应用后端和一个简单的待办事项列表应用，此应用将应用数据存储在 Azure 中。

开始学习有关使用 Azure 应用服务中的移动应用功能的其他 Apache Cordova 教程之前，必须先完成本教程。

先决条件

要完成本教程，您需要：

本教程可以在 Windows 或 Mac 系统上完成。 应用的 iOS 版本只能在 Mac 上运行。 本教程仅使用 Windows（应用在 Android 上运行）。

需要 Apache Cordova 8.1.2 或更低版本

Apache Cordova 在版本 9.0.0 中发布了对该工具的不兼容更改。 如果安装了 Apache Cordova 版本 9.0.0 或更高版本，该插件将不起作用，并报告 q 模块存在依赖项问题。

Visual Studio Code

适用于 Visual Studio Code 的 Apache Cordova 扩展允许通过调试运行应用程序。 强烈建议使用 Visual Studio Code 开发 Apache Cordova。

安装 Gradle

当在 Windows 上配置 Apache Cordova 时，最常见的错误是安装 Gradle。 默认使用 Android Studio 进行安装，但它不能用于正常使用。 下载并解压最新版本，然后手动将 bin 目录添加到 PATH。

下载 Apache Cordova 快速入门项目

Apache Cordova 快速入门项目位于 azure/azure-mobile-apps GitHub 存储库的 samples/cordova 文件夹中。 可以将存储库下载为 ZIP 文件，然后将其解压缩。 文件将在 azure-mobile-apps-main 文件夹中创建。

下载后，打开终端并将目录更改为文件所在的位置。

部署后端服务

若要部署快速入门服务，请先使用 Azure CLI 登录到 Azure：

az login

随即将打开一个 Web 浏览器来完成授权。

如有必要，请选择订阅。

创建资源组

键入以下命令以创建资源组：

az group create -l westus -n zumo-quickstart

此命令将创建一个名为 zumo-quickstart 的资源组，用于保存创建的所有资源。 如果你无权访问 westus 区域，或者更喜欢距离你较近的区域，请将 westus 替换为其他区域。

将后端部署到 Azure

服务由以下资源组成：

  • 免费计划中的应用服务托管计划。
  • 在应用服务托管计划中托管的网站。
  • Azure SQL Server。
  • 基本层中的 Azure SQL 数据库（会产生费用）。

Azure SQL 数据库是唯一一个会产生费用的资源。 有关详细信息，请参阅定价。

若要部署资源，请键入以下命令：

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

完成后，运行以下命令以查看输出：

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

此命令显示有关开发移动应用程序时所需的部署的信息。 如果通过 Azure 门户访问数据库，数据库用户名和密码非常有用。 下面使用应用服务的名称，稍后将公共终结点嵌入到代码中。

最后，将 Azure 移动应用服务器部署到所创建的应用服务：

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

将 zumo-XXXXXXXX 替换为输出列表中显示的应用服务的名称。 在 2-3 分钟内，Azure 移动应用服务器就可供使用了。 可使用 Web 浏览器确认后端是否正常工作。 将 Web 浏览器指向附加了 /tables/TodoItem 的公共终结点（例如 https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem）。 如果服务器工作正常，浏览器将显示有关缺少 X-ZUMO-VERSION 参数的错误。

删除资源

完成快速入门教程后，就可以使用 az group delete -n zumo-quickstart 删除资源了。

本教程由三部分组成（包括本部分）。 请完成本教程之后再删除这些资源。

配置 Apache Cordova 快速入门项目

运行 npm install 以安装所有依赖项。

将平台添加到项目中。 例如，若要添加 Android 平台，请使用以下命令：

cordova platform add android

可以按需添加 browser、android 和 ios。 browser 平台将无法在启用了脱机同步的情况下工作。 添加完所有要使用的平台后，请运行 cordova requirements，确保所有要求均已满足。

在文本编辑器中打开 www/js/index.js 文件。 编辑 BackendUrl 的定义以显示后端 URL。 例如，如果后端 URL 为 https://zumo-abcd1234.azurewebsites.net，则后端 URL 将如下所示：

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

保存文件。 在文本编辑器中打开 www/index.html 文件。 编辑 Content-Security-Policy 以更新 URL，便于匹配后端 URL，例如：

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

若要构建应用，请使用以下命令：

cordova build

运行应用

如果使用 cordova platform add browser 从浏览器运行，则必须在 Azure 应用服务中启用 CORS 支持。 为此，请运行以下命令：

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

将 ZUMPAPPNAME 替换为 Azure 应用服务移动后端的名称。 配置后端后，运行以下命令：

cordova run android

初始启动完成后，可在列表中添加和删除项。 待办事项项存储在连接到 Azure 移动应用后端的 Azure SQL 实例中。

如果模拟器未自动启动，请打开 Android Studio，然后选择“配置”>“AVD Manager”。 现可手动启动模拟器。 如果运行 adb devices -l，应会看到所选的模拟设备。 现在应该能够运行 cordova run android。

Apache Cordova App

后续步骤

继续实现脱机数据同步。