共用方式為

使用 Azure Mobile Apps 建置 Apache Cordova 應用程式

  • 發行項

注意

此產品已淘汰。 如需使用 .NET 8 或更新版本的專案取代專案，請參閱 Community Toolkit Datasync 連結庫。

本教學課程說明如何使用 Azure Mobile Apps 和 Azure 行動應用程式後端，將雲端式後端服務新增至 Apache Cordova 跨平台應用程式。 您將建立新的行動應用程式後端和簡單的 待辦事項清單， 將應用程式數據儲存在 Azure 中。

請先完成本教學課程，再繼續進行其他關於在 Azure App Service 中使用 Mobile Apps 功能的 Apache Cordova 教學課程。

先決條件

若要完成本教學課程，您需要：

本教學課程可以在 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 StudioCode進行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

網頁瀏覽器將會開啟以完成授權。

如有必要，選取訂用帳戶。

建立資源群組

輸入下列命令以建立資源群組：

az group create -l westus -n zumo-quickstart

此命令會建立名為 zumo-quickstart 的資源群組，以保存我們建立的所有資源。 如果您無法存取 westus 區域，或偏好更接近您的區域，請將 westus 取代為另一個區域。

將後端部署至 Azure

此服務是由下列資源所組成：

  • 免費方案上的App Service主控方案。
  • 裝載於App Service主控方案內的網站。
  • Azure SQL 伺服器。
  • 基本層中的 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 入口網站存取資料庫很有用。 下列會使用 App Service 的名稱，而公用端點稍後會內嵌在您的程式代碼中。

最後，將 Azure Mobile Apps 伺服器部署至已建立的 App Service：

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

以 App Service 的名稱取代 zumo-XXXXXXXX;顯示在輸出清單中。 在 2-3 分鐘內，您的 Azure Mobile Apps 伺服器將會準備好使用。 您可以使用網頁瀏覽器來確認後端是否正常運作。 將網頁瀏覽器指向您的公用端點，並附加 /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 App Service 內啟用 CORS 支援。 若要這樣做，請執行下列命令：

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

以 Azure App Service 行動後端的名稱取代 ZUMPAPPNAME。 設定後端之後，請執行下列命令：

cordova run android

初始啟動完成後，您可以從清單中新增和刪除專案。 Todo 專案會儲存在連線至 Azure Mobile Apps 後端的 Azure SQL 實例中。

如果模擬器未自動啟動，請開啟 Android Studio，然後選取 [設定>AVD Manager。 您現在可以手動啟動模擬器。 如果您執行 adb devices -l，您應該會看到選取的模擬裝置。 您現在應該能夠執行 cordova run android。

Apache Cordova 應用程式

後續步驟

繼續執行 離線資料同步處理。