使用 Azure Mobile Apps 建置 .NET MAUI 應用程式

  • 發行項

本教學課程說明如何使用 .NET MAUI 和 Azure 行動應用程式後端，將雲端式後端服務新增至跨平臺行動應用程式。 您將建立新的行動應用程式後端和簡單的 待辦事項清單 應用程式，以將應用程式資料儲存在 Azure 中。

您必須先完成本教學課程，才能使用 Azure App 服務 中的Mobile Apps功能進行其他 .NET MAUI 教學課程。

必要條件

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

  • 具有下列工作負載的 Visual Studio 2022 ：
    • ASP.NET 和網頁程式開發
    • Azure 開發
    • 使用 .NET 的行動應用程式開發
  • Azure 帳戶。
  • Azure CLI。
    • 使用 az login 登入，並在開始之前選取適當的訂用帳戶。
  • （選擇性） Azure 開發人員 CLI。
  • 具有 下列設定的 Android 虛擬裝置：
    • 電話：任何手機影像 - 我們使用圖元 5 進行測試。
    • 系統映射：Android 11 （API 30 含 Google API）
  • 可用的 Mac （用於編譯和執行 iOS 版本）：
    • 安裝 XCode
    • 在安裝之後開啟 Xcode，使其可以新增任何額外的必要元件。
    • 開啟之後，選取 [ XCode 喜好設定...>元件，並安裝iOS模擬器。
    • 請遵循與 Mac 配對的指南。

需要mac才能編譯iOS版本。

您可以在 Mac 或 Windows 上完成本教學課程。

下載範例應用程式

  1. 在瀏覽器中開啟 azure-mobile-apps 存放 庫 。

  2. 開啟 [ 程序代碼 ] 下拉式清單，然後選取 [ 下載 ZIP]。

    Screenshot of the Code menu on GitHub.

  3. 下載完成之後，請開啟 [ 下載] 資料夾並找出檔案 azure-mobile-apps-main.zip 。

  4. 以滑鼠右鍵按鍵按鍵按鍵的檔案，然後選取 [ 全部解壓縮...]。

    如果您想要的話，您可以使用 PowerShell 來展開封存：

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip

這些範例位於 擷取檔案內的samples 資料夾中。 快速入門的範例名為 TodoApp。 您可以按兩下 TodoApp.sln 檔案，在Visual Studio 中開啟範例。

Screenshot of the file explorer for the solution.

將後端部署至 Azure

注意

如果您已經從另一個快速入門部署後端，您可以使用相同的後端，並略過此步驟。

若要部署後端服務，我們將：

  • 將 Azure App 服務和 Azure SQL 資料庫 布建至 Azure。
  • 使用 Visual Studio 將服務程式代碼部署到新建立的 Azure App 服務。

使用 Azure 開發人員 CLI 來完成所有步驟

TodoApp 範例已設定為支援 Azure 開發人員 CLI。 若要完成所有步驟（布建和部署）：

  1. 安裝 Azure 開發人員 CLI。
  2. 開啟終端機，並將目錄變更為包含檔案 TodoApp.sln 的資料夾。 此目錄也包含 azure.yaml。
  3. 執行 azd up。

如果您尚未登入 Azure，瀏覽器會啟動以要求您登入。 接著系統會提示您輸入訂用帳戶和 Azure 區域。 然後，Azure 開發人員 CLI 會布建必要的資源，並將服務程式代碼部署到您選擇的 Azure 區域和訂用帳戶。 最後，Azure 開發人員 CLI 會為您撰寫適當的 Constants.cs 檔案。

您可以執行 azd env get-values 命令來檢視您想要直接存取資料庫的 SQL 驗證資訊。

如果您已完成 Azure 開發人員 CLI 的步驟， 請繼續進行下一個步驟。 如果您不想使用 Azure 開發人員 CLI，請繼續進行手動步驟。

在 Azure 上建立資源。

  1. 開啟終端機，並將目錄變更為包含檔案 TodoApp.sln 的資料夾。 此目錄也包含 azuredeploy.json。

  2. 請確定您已 使用 Azure CLI 登入並選取訂 用帳戶。

  3. 建立新的資源群組：

    az group create -l westus -g quickstart

    此命令會在 quickstart 美國西部區域建立資源群組。 您可以選取任何您想要的區域，前提是您可以在該處建立資源。 請確定您在本教學課程中所提及的名稱和區域都使用相同的名稱和區域。

  4. 使用群組部署建立資源：

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234

    為您的 SQL 管理員 istrator 密碼挑選強密碼。 您稍後在存取資料庫時需要用到它。

  5. 部署完成後，取得輸出變數，因為這些保留您稍後需要的重要資訊：

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

    輸出範例如下：

    Screenshot of command line results.

  6. 記下輸出中的每個值，以供稍後使用。

發佈服務程序代碼

TodoApp.sln在 Visual Studio 中開啟 。

  1. 在右側窗格中，選取 [方案總管]。

  2. 以滑鼠右鍵按兩下 TodoAppService.NET6 項目，然後選取 [ 設定為啟始專案]。

  3. 在頂端功能表上，選取 [建置>發佈 TodoAppService.NET6]。

  4. 在 [發佈] 視窗中，選取 [目標：Azure]，然後按 [下一步]。

    Screenshot of the target selection window.

  5. 選取 [特定目標：Azure App 服務 [Windows]，然後按 [下一步]。

    Screenshot of the specific target selection window.

  6. 如有必要，請登入並選取適當的 訂用帳戶名稱。

  7. 確定 [檢視 ] 設定為 [資源群組]。

  8. quickstart展開資源群組，然後選取稍早建立的 App Service。

    Screenshot of the app service selection window.

  9. 選取 [完成]。

  10. 發行配置檔建立程式完成後，請選取 [ 關閉]。

  11. 找出 [服務相依性]，然後選取 SQL Server Database 旁的三點，然後選取 [連線]。

    Screenshot showing the S Q L server configuration selection.

  12. 選取 [Azure SQL 資料庫]，然後選取 [下一步]。

  13. 選取快速入門資料庫，然後選取 [下一步]。

    Screenshot of the database selection window.

  14. 使用部署輸出中的 SQL 使用者名稱和密碼填入表單，然後選取 [ 下一步]。

    Screenshot of the database settings window.

  15. 選取 [完成]。

  16. 完成時選取 [ 關閉 ]。

  17. 選取 [發佈] 將應用程式發佈至您稍早建立的 Azure App 服務。

    Screenshot showing the publish button.

  18. 發佈後端服務之後，就會開啟瀏覽器。 新增 /tables/todoitem?ZUMO-API-VERSION=3.0.0 至 URL：

    Screenshot showing the browser output after the service is published.

設定範例應用程式

用戶端應用程式必須知道後端的基底 URL，才能與其通訊。

如果您用來 azd up 布建和部署服務， Constants.cs 則會為您建立檔案，而且您可以略過此步驟。

  1. TodoApp.Data展開專案。

  2. 以滑鼠右鍵按兩下TodoApp.Data項目，然後選取[新增>類別...]。

  3. 輸入 Constants.cs 作為名稱，然後選取 [ 新增]。

    Screenshot of adding the Constants.cs file to the project.

  4. 開啟檔案 Constants.cs.example 並複製內容 （Ctrl-A，後面接著 Ctrl-C）。

  5. 切換至 Constants.cs，反白顯示所有文字（Ctrl-A），然後貼上範例檔案中的內容（Ctrl-V）。

  6. https://APPSERVICENAME.azurewebsites.net將取代為您服務的後端URL。

    namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

    您可以從 [發佈] 索引標籤取得服務的後端URL。請確定您使用 HTTPs URL。

  7. 儲存檔案。 （Ctrl-S）。

建置並執行 Android 應用程式

  1. 在方案總管中，展開 maui 資料夾。

  2. 以滑鼠右鍵按兩下項目， TodoApp.MAUI 然後選取 [ 設定為啟始專案]。

  3. 在頂端列中，選取適當的Android模擬器：

    Screenshot showing how to set the run configuration for a dot net maui for Android app.

  4. 如果沒有可用的 Android 模擬器，您必須建立一個。 如需詳細資訊，請參閱 Android模擬器設定。 若要建立新的 Android 模擬器：

    • 選取 [Android Android>裝置管理員 工具]。>
    • 選取 + 新增。
    • 選取左側的下列選項：
      • 名稱：quickstart
      • 基本裝置： 圖元 5
      • 處理器： x86_64
      • OS： Android 11.0 - API 30
      • Google API： 已核取
    • 選取 建立。
    • 如有必要，請接受許可協定。 接著會下載映像。
    • 一旦出現 [ 開始] 按鈕，請按 [開始]。
    • 如果您收到有關 Hyper-V 硬體加速的提示，請閱讀檔以啟用硬體加速，再繼續進行。 模擬器會在未啟用硬體加速的情況下變慢。

    提示

    繼續之前，請先啟動Android模擬器。 您可以開啟 Android 裝置管理員，然後按所選模擬器旁的 [開始] 來執行此動作。

  5. 按 F5 鍵建置並執行專案。

應用程式啟動之後，您會看到空白清單和文本框，以在模擬器中新增專案。 您可以：

  • 在方塊中輸入一些文字，然後按 Enter 鍵以插入新專案。
  • 選取要設定或清除已完成旗標的專案。
  • 按重新整理圖示，從服務重載數據。

Screenshot of the running Android app showing the to do list.

建置並執行 Windows 應用程式

  1. 在方案總管中，展開 maui 資料夾。

  2. 以滑鼠右鍵按兩下項目， TodoApp.MAUI 然後選取 [ 設定為啟始專案]。

  3. 在頂端列中，選取 [Windows 計算機]。

    Screenshot showing how to set the run configuration for a dot net maui for windows app.

  4. 按 F5 鍵建置並執行專案。

應用程式啟動之後，您會看到空白清單和文本框來新增專案。 您可以：

  • 在方塊中輸入一些文字，然後按 Enter 鍵以插入新專案。
  • 選取要設定或清除已完成旗標的專案。
  • 按重新整理圖示，從服務重載數據。

Screenshot of the running Windows app showing the to do list.

下一步

將驗證新增至應用程式，以繼續進行教學課程。