使用 Azure Mobile Apps 建置 Avalonia 應用程式

發行項
09/07/2023

注意

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

Avalonia 可讓您從單一程式代碼基底建立適用於 Windows、macOS、Linux、iOS、Android 和 Web 元件的 .NET GUI 應用程式。本教學課程說明如何使用 Azure Mobile Apps 和 Azure 行動應用程式後端，將雲端式後端服務新增至 Windows Avalonia 傳統型應用程式。您將建立新的行動應用程式後端和簡單的 待辦事項清單， 將應用程式數據儲存在 Azure 中。

您必須先完成本教學課程，才能使用 Azure Mobile Apps 的其他所有 Avalonia 教學課程。

先決條件

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

Visual Studio 2022 下列工作負載。
- ASP.NET 和 Web 開發
- Azure 開發
- .NET 桌面開發
適用於 Visual Studio 的 Avalonia 延伸模組。
Azure 帳戶。
Azure CLI。
- 使用 az login 登入，並在啟動之前選取適當的訂用帳戶。
（選擇性）Azure 開發人員 CLI。

雖然 Avalonia 支援在 Mac 或 Windows 上建置，但本教學課程假設您使用 Windows 和 Visual Studio 2022。建議您逐步完成 Avalonia 教學課程，熟悉 Avalonia 的開發程式。

下載範例應用程式

在瀏覽器中開啟 azure-mobile-apps 存放庫。
開啟 [程序代碼] 下拉式清單，然後選取 [下載 ZIP]。
下載完成之後，請開啟您的 Downloads 資料夾，並找出 azure-mobile-apps-main.zip 檔案。
以滑鼠右鍵按鍵按鍵按鍵的檔案，然後選取 [[全部擷取...]。

如果您想要的話，您可以使用 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。若要完成所有步驟（布建和部署）：

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

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

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

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

在 Azure 上建立資源。

開啟終端機，並將目錄變更為包含 TodoApp.sln 檔案的資料夾。此目錄也包含 azuredeploy.json。
請確定您已使用 Azure CLI 登入並選取訂用帳戶。
建立新的資源群組：
```
az group create -l westus -g quickstart
```
此命令會在美國西部區域建立 quickstart 資源群組。您可以選取任何您想要的區域，前提是您可以在該處建立資源。請確定您在本教學課程中所提及的名稱和區域都使用相同的名稱和區域。
使用群組部署建立資源：
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
為您的 SQL 系統管理員密碼挑選強密碼。您稍後在存取資料庫時需要用到它。
部署完成後，取得輸出變數，因為這些保留您稍後需要的重要資訊：
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
輸出範例如下：
記下輸出中的每個值，以供稍後使用。

發佈服務程序代碼

在 Visual Studio 中開啟 TodoApp.sln。

在右側窗格中，選取 [方案總管]。
以滑鼠右鍵按下 TodoAppService.NET6 項目，然後選取 [[設定為啟始專案]。
在頂端功能表上，選取 [建置>發佈 TodoAppService.NET6]。
在 [發佈] 視窗中，選取 [目標：Azure]，然後按 [下一步]。
選取 [特定目標]：Azure App Service （Windows），然後按 [下一步]。
如有必要，請登入並選取適當的 訂用帳戶名稱。
確定檢視設定為 資源群組。
展開 quickstart 資源群組，然後選取稍早建立的 App Service。
選取 [完成 ]。
發行設定檔建立程式完成後，請選取 [關閉] [關閉]。
找出 服務相依性，然後選取 SQL Server Database 旁的三點，然後選取 [Connect]。
選取 [Azure SQL Database]，然後選取 [[下一步]。
選取快速入門資料庫，然後選取 [下一步]。
使用部署輸出中的 SQL 使用者名稱和密碼填入表單，然後選取 [[下一步]。
選取 [完成 ]。
完成時選取 [關閉 ]。
選取 [[發佈]，將您的應用程式發佈至您稍早建立的 Azure App Service。
發佈後端服務之後，就會開啟瀏覽器。將 /tables/todoitem?ZUMO-API-VERSION=3.0.0 新增至 URL：

設定範例應用程式

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

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

展開 TodoApp.Data 專案。
以滑鼠右鍵按兩下 TodoApp.Data 項目，然後選取 [[新增>類別...。
輸入 Constants.cs 作為名稱，然後選取 [[新增]。
開啟 Constants.cs.example 檔案並複製內容（Ctrl-A，後面接著 Ctrl-C）。
切換至 Constants.cs，反白顯示所有文字（Ctrl-A），然後貼上範例檔案中的內容（Ctrl-V）。

以您服務的後端 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。

儲存盤案。（Ctrl-S）。

建置並執行範例應用程式

在方案總管中，展開 [others] 資料夾。
以滑鼠右鍵按下 TodoApp.AvaloniaUI 項目，然後選取 [[設定為啟始專案]。
在頂端列中，選取 [[任何 CPU 組態] 和 [TodoApp.AvaloniaUI 目標：
按 F5 建置並執行專案。

應用程式啟動之後，您會看到包含文字框的空白清單。您可以：

輸入一些文字，然後按 + 圖示以新增專案。
設定或清除複選框，將任何項目標示為已完成。
按重新整理圖示，從服務重載數據。

後續步驟

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

共用方式為