Azure Mobile Apps を使用して .NET MAUI アプリを構築する

[アーティクル]
01/12/2024

手記

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

このチュートリアルでは、.NET MAUI と Azure モバイルアプリバックエンドを使用して、クロスプラットフォームモバイルアプリにクラウドベースのバックエンドサービスを追加する方法について説明します。新しいモバイルアプリバックエンドと、Azure にアプリデータを格納する単純な Todo リスト アプリの両方を作成します。

Azure App Service の Mobile Apps 機能を使用する他の .NET MAUI チュートリアルの前に、このチュートリアルを完了する必要があります。

前提条件

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

Visual Studio 2022 を次のワークロードで
します。
- ASP.NET と Web 開発
- Azure 開発
- .NET を使用したモバイル開発
Azure アカウント。
Azure CLI。
- az login でサインインし、開始する前に適切なサブスクリプションを選択します。
(省略可能)Azure Developer CLI。
Android 仮想デバイス。次の設定が含まれます。
- 電話: 任意の電話画像 - テストには Pixel 5 を使用します。
- システムイメージ: Android 11 (Google API を使用した API 30)
使用可能な Mac (iOS バージョンのコンパイルと実行用):
- XCode インストールする
- インストール後に Xcode を開き、必要なコンポーネントを追加できるようにします。
- 開いたら、XCode Preferences...>Componentsを選択し、iOS シミュレーターをインストールします。
- ガイドに従って、Macにペアリングします。

iOS バージョンをコンパイルするには、mac が必要です。

Mac または Windows でこのチュートリアルを完了できます。

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

ブラウザーで 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).

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

ソリューションエクスプローラーで、maui フォルダーを展開します。
プロジェクトを右クリックし、[スタートアッププロジェクトとして設定] 選択します。
上部のバーで、適切な Android エミュレーターを選択します。
Android エミュレーターが使用できない場合は、作成する必要があります。詳細については、「Android エミュレーターのセットアップする」を参照してください。新しい Android エミュレーターを作成するには:
- AndroidAndroid Device Managerツールを選択します。
- [+ 新しい] を選択します。
- 左側で次のオプションを選択します。
  - 名前: quickstart
  - ベースデバイス: ピクセル 5
  - プロセッサ: x86_64
  - OS: Android 11.0 - API 30
  - Google API: チェックされた
- [作成] を選択します。
- 必要に応じて、使用許諾契約書に同意します。その後、イメージがダウンロードされます。
- [スタート] ボタンが表示されたら、[スタート]押します。
- ハードウェアアクセラレーション Hyper-V 確認するメッセージが表示されたら、続行する前に、ハードウェアアクセラレーションを有効にするドキュメントを参照してください。エミュレーターは、ハードウェアアクセラレーションを有効にせずに低速になります。
先端

続行する前に、Android エミュレーターを起動します。これを行うには、Android デバイスマネージャーを開き、選択したエミュレーターの横 [スタート] 押します。
F5 押して、プロジェクトをビルドして実行します。

アプリが起動すると、空のリストと、エミュレーターに項目を追加するためのテキストボックスが表示されます。できます：

ボックスにテキストを入力し、Enter キーを押して新しい項目を挿入します。
完了したフラグを設定またはクリアする項目を選択します。
更新アイコンを押して、サービスからデータを再読み込みします。

To Do リストを示す実行中の Android アプリのスクリーンショット。

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

ソリューションエクスプローラーで、maui フォルダーを展開します。
プロジェクトを右クリックし、[スタートアッププロジェクトとして設定] 選択します。
上部のバーで、[Windows マシン選択します。
F5 押して、プロジェクトをビルドして実行します。

アプリが起動すると、空のリストと、項目を追加するためのテキストボックスが表示されます。できます：

ボックスにテキストを入力し、Enter キーを押して新しい項目を挿入します。
完了したフラグを設定またはクリアする項目を選択します。
更新アイコンを押して、サービスからデータを再読み込みします。

To Do リストを示す実行中の Windows アプリのスクリーンショット。

次の手順

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

次の方法で共有

Azure Mobile Apps を使用して .NET MAUI アプリを構築する

前提条件

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