Azure Mobile Apps を使用して Avalonia アプリを構築する

[アーティクル]
09/07/2023

手記

この製品は提供終了です。 .NET 8 以降を使用するプロジェクトの代わりに、Community Toolkit Datasync ライブラリを参照してください。

Avalonia を使用すると、1 つのコードベースから Windows、macOS、Linux、iOS、Android、および Web アセンブリ用の .NET GUI アプリケーションを作成できます。このチュートリアルでは、Azure Mobile Apps と Azure モバイルアプリバックエンドを使用して、クラウドベースのバックエンドサービスを Windows Avalonia デスクトップアプリに追加する方法について説明します。新しいモバイルアプリバックエンドと、Azure にアプリデータを格納する単純な Todo リスト アプリの両方を作成します。

Azure Mobile Apps の使用に関する他のすべての Avalonia チュートリアルの前に、このチュートリアルを完了する必要があります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Visual Studio 2022 を次のワークロードで
します。
- ASP.NET と Web 開発
- Azure 開発
- .NET デスクトップ開発
Avalonia for Visual Studio 拡張機能。
Azure アカウント。
Azure CLI。
- az login でサインインし、開始する前に適切なサブスクリプションを選択します。
(省略可能)Azure Developer CLI。

Avalonia は Mac または Windows でのビルドをサポートしていますが、このチュートリアルでは Windows と Visual Studio 2022 を使用していることを前提としています。 Avalonia の開発プロセスに慣れ親しむには、Avalonia チュートリアルを参照することをお勧めします。

サンプルアプリをダウンロードする

ブラウザーで azure-mobile-apps リポジトリを開きます。
[コード] ドロップダウンを開き、[ZIPのダウンロード] 選択します。
ダウンロードが完了したら、ダウンロード フォルダーを開き、azure-mobile-apps-main.zip ファイルを見つけます。
ダウンロードしたファイルを右クリックし、[すべて展開]選択します。..します。

必要に応じて、PowerShell を使用してアーカイブを展開できます。
```
C:\Temp> Expand-Archive azure-mobile-apps-main.zip
```

サンプルは、抽出されたファイル内のフォルダーサンプルにあります。クイックスタートのサンプルには、TodoAppという名前が付けられています。 Visual Studio でサンプルを開くには、TodoApp.sln ファイルをダブルクリックします。

ソリューションのエクスプローラーのスクリーンショット。

バックエンドを Azure にデプロイする

手記

別のクイックスタートからバックエンドを既にデプロイしている場合は、同じバックエンドを使用して、この手順をスキップできます。

バックエンドサービスをデプロイするには、次の手順を実行します。

Azure App Service と Azure SQL Database を Azure にプロビジョニングします。
Visual Studio を使用して、新しく作成した Azure App Service にサービスコードをデプロイします。

Azure Developer CLI を使用してすべての手順を完了する

TodoApp サンプルは、Azure Developer CLI をサポートするように構成されています。すべての手順 (プロビジョニングとデプロイ) を完了するには:

Azure Developer CLIをインストールします。
ターミナルを開き、TodoApp.sln ファイルを含むフォルダーにディレクトリを変更します。このディレクトリには、azure.yamlも含まれています。
azd upを実行します。

Azure にまだサインインしていない場合は、ブラウザーが起動してサインインするように求められます。その後、サブスクリプションと Azure リージョンを使用するように求められます。その後、Azure Developer CLI によって必要なリソースがプロビジョニングされ、選択した Azure リージョンとサブスクリプションにサービスコードがデプロイされます。最後に、Azure Developer CLI によって適切な Constants.cs ファイルが書き込まれます。

azd env get-values コマンドを実行すると、データベースに直接アクセスする必要がある場合に SQL 認証情報を確認できます。

Azure Developer CLI で手順を完了している場合は、次の手順に進。 Azure Developer 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の発行] 選択します。
[発行] ウィンドウで、[ターゲット: Azureを ] を選択し、[次へ]押します。
[特定のターゲット] を選択します。Azure App Service (Windows)をし、[次へ]押します。
必要に応じて、サインインし、適切な サブスクリプション名選択します。
表示がリソースグループに設定されていることを確認します。
quickstart リソースグループを展開し、先ほど作成した App Service を選択します。
[完了]選択します。
発行プロファイルの作成プロセスが完了したら、[を閉じる] 選択します。
サービスの依存関係を見つけて、SQL Server データベースの横にある 3 つのドットを選択し、[接続選択します。
[Azure SQL Database選択し、[次へ]選択します。
クイックスタート データベースを選択し、[次 ] を選択します。
デプロイの出力に含まれている SQL ユーザー名とパスワードを使用してフォームに入力し、[次へ]選択します。
[完了]選択します。
完了したら 閉じる を選択します。
[ の発行] を選択して、先ほど作成した Azure App Service にアプリを発行します。
バックエンドサービスが発行されると、ブラウザーが開きます。 URL に /tables/todoitem?ZUMO-API-VERSION=3.0.0 を追加します。

サンプルアプリを構成する

クライアントアプリケーションは、バックエンドと通信できるように、バックエンドのベース URL を認識する必要があります。

azd up を使用してサービスをプロビジョニングおよびデプロイした場合は、Constants.cs ファイルが自動的に作成され、この手順は省略できます。

TodoApp.Data プロジェクトを展開します。
TodoApp.Data プロジェクトを右クリックし、[クラスの追加]>選択します。.
名前として「」と入力し、[の追加] 選択します。
Constants.cs.example ファイルを開き、内容をコピーします (Ctrl + A、Ctrl-C)。
Constants.csに切り替え、すべてのテキスト (Ctrl-A) を強調表示し、サンプルファイル (Ctrl-V) の内容を貼り付けます。

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 を使用していることを確認します。

ファイルを保存します。 (Ctrl-S).

サンプルアプリをビルドして実行する

ソリューションエクスプローラーで、others フォルダーを展開します。
プロジェクトを右クリックし、[スタートアッププロジェクトとして設定] 選択します。
上部のバーで、[任意の CPU 構成選択し、TodoApp.AvaloniaUI ターゲットを選択します。
F5 押して、プロジェクトをビルドして実行します。

アプリが起動すると、テキストボックスを含む空のリストが表示されます。できます：

テキストを入力し、+ アイコンを押して項目を追加します。
チェックボックスをオンまたはオフにして、項目を完了としてマークします。
更新アイコンを押して、サービスからデータを再読み込みします。

次の手順

アプリに認証を追加して、チュートリアルを続行します。

次の方法で共有

Azure Mobile Apps を使用して Avalonia アプリを構築する

前提条件

サンプルアプリをダウンロードする