共用方式為

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

  • 發行項

注意

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

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

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

先決條件

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

  • 使用下列工作負載 Visual Studio 2022：
    • ASP.NET 和 Web 開發
    • 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]。

    GitHub 上 [程序代碼] 功能表的螢幕快照。

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

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

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

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

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

方案檔案總管的螢幕快照。

將後端部署至 Azure

注意

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

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

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

使用 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 系統管理員密碼挑選強密碼。 您稍後在存取資料庫時需要用到它。

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

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

    輸出範例如下：

    命令行結果的螢幕快照。

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

發佈服務程序代碼

在 Visual Studio 中開啟 TodoApp.sln。

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

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

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

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

    目標選取視窗的螢幕快照。

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

    特定目標選取視窗的螢幕快照。

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

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

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

    App Service 選取視窗的螢幕快照。

  9. 選取 [完成 ]。

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

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

    顯示 S Q L 伺服器組態選取項目的螢幕快照。

  12. 選取 [Azure SQL Database]，然後選取 [[下一步]。

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

    資料庫選取視窗的螢幕快照。

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

    [資料庫設定] 視窗的螢幕快照。

  15. 選取 [完成 ]。

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

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

    顯示 [發佈] 按鈕的螢幕快照。

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

    顯示服務發佈後瀏覽器輸出的螢幕快照。

設定範例應用程式

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

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

  1. 展開 TodoApp.Data 專案。

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

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

    將Constants.cs檔案新增至專案的螢幕快照。

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

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

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

    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模擬器：

    螢幕快照，顯示如何為Android應用程式的 dot net maui 設定執行組態。

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

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

    提示

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

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

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

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

顯示要執行之 Android 應用程式的螢幕快照。

建置並執行 Windows 應用程式

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

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

  3. 在頂端列中，選取 [Windows Machine]。

    螢幕快照，顯示如何為 windows 應用程式的 dot net maui 設定執行組態。

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

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

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

執行中 Windows 應用程式的螢幕快照，其中顯示要執行的清單。

後續步驟

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