使用 Azure 移动应用生成 Apache Cordova 应用

项目
05/05/2021

注意

此产品已停用。有关使用 .NET 8 或更高版本的项目的替换，请参阅 Community Toolkit Datasync 库。

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

在继续学习有关在 Azure 应用服务中使用移动应用功能的其他 Apache Cordova 教程之前，请完成本教程。

先决条件

若要完成本教程，需要：

一个正常运行的 Apache Cordova 8.1.2 安装。
文本编辑器（如 Visual Studio Code）。
azure 帐户。
Azure CLI。
- 登录到 Azure 帐户，使用 Azure CLI 选择订阅。

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

需要 Apache Cordova 8.1.2 或更早版本

Apache Cordova 在 v9.0.0 中发布了对该工具的不兼容更改。如果已安装 Apache Cordova v9.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 管理器。现在可以手动启动模拟器。如果运行 adb devices -l，应会看到所选的模拟设备。现在应该能够运行 cordova run android。

Apache Cordova 应用

后续步骤

继续实现脱机数据同步。

通过