Azure Mobile Apps を使用して Windows (UWP) アプリをビルドする

このチュートリアルでは、Azure Mobile Apps と Azure mobile app バックエンドを使用して、ユニバーサル Windows プラットフォーム (UWP) デスクトップ アプリにクラウドベースのバックエンド サービスを追加する方法を示します。 新しいモバイル アプリ バックエンドと、アプリのデータを Azure に格納する簡単な Todo list アプリの両方を作成します。

このチュートリアルは、Azure App Service での Mobile Apps 機能の使用に関する他のすべての Windows (UWP) チュートリアルを実行する前に完了しておく必要があります。

前提条件

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

  • Visual Studio 2022 と次のワークロード。
    • ASP.NET および Web の開発
    • Azure の開発
    • ユニバーサル Windows プラットフォーム開発
  • Azure アカウント
  • Azure CLI
    • 開始する前に、az login でサインイン して適切なサブスクリプションを選択します。

このチュートリアルは、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
    

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

Screenshot of the file explorer for the solution.

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

注意

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

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

  • Azure Resource Manager と Azure CLI を使用して、Azure App Service と Azure SQL Database を Azure にデプロイします。
  • Visual Studioを使用して、サービス コードを新しく作成された Azure App Service にパブリッシュします。

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
    

    出力例を次に示します。

    Screenshot of command line results.

  6. 後で使用できるように、出力の各値をメモしておきます。

サービス コードをパブリッシュします。

Visual Studio で TodoApp.sln を開きます

  1. 右側のウィンドウで、[ソリューション エクスプローラー]を選択します。

  2. TodoAppService.NET6 プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択します。

  3. トップ メニューで、ビルド>TodoAppService.NET6 をビルド を選択します (または Ctrl キーを押しながら B キーを押します)。

  4. トップ メニューで、ビルド>TodoAppService.NET6 をパブリッシュ を選択します。

  5. [パブリッシュ] ウィンドウで、[ターゲット] の [Azure] を選択してから、[次へ] を押します。

    Screenshot of the target selection window.

  6. [特定のターゲット] で [Azure App Service (Windows)] を選択してから、[次へ] を押します。

    Screenshot of the specific target selection window.

  7. 必要に応じてサインインし、適切なサブスクリプション名を選択します。

  8. [ビュー] が [リソース グループ] に設定されていることを確認します。

  9. quickstart リソース グループを展開し、前に作成した App Service を選択してから、[完了] を選択します。

    Screenshot of the app service selection window.

  10. [パブリッシュ] タブが開いたら、[サービスの依存関係] を探し、SQL Server データベースの横にある [構成] を選択します。

    Screenshot showing the S Q L server configuration selection.

  11. [Azure SQL Database] を選択してから、[次へ] を選択します。

  12. [クイック スタート] データベースを選択してから、[次へ] を選択します。

    Screenshot of the database selection window.

  13. デプロイでの出力に含まれていた SQL ユーザー名とパスワードを使用して、フォームを入力してから、[次へ] を選択します。

    Screenshot of the database settings window.

  14. [完了] を選択します。

  15. 完了したら、[閉じる] を選択します。

  16. [パブリッシュ] を選択して、前に作成した Azure App Service にアプリをパブリッシュします。

    Screenshot showing the publish button.

  17. バックエンド サービスがパブリッシュされると、ブラウザーが開きます。 URL に /tables/todoitem?ZUMO-API-VERSION=3.0.0 を追加します。

    Screenshot showing the browser output after the service is published.

    これは、サービスが正常に動作していることを示しています。

サンプル アプリの構成

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

  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 は、[パブリッシュ] タブで取得できます。

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

サンプル アプリのビルドと実行

  1. ソリューション エクスプローラーで、windows フォルダーを展開します。

  2. TodoApp.UWP プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択します。

  3. 上部のバーで、[任意の CPU] 構成と [TodoApp.UWP] ターゲットを選択します。

    UWP Configuration

  4. F5 キーを押し、プロジェクトをビルドして実行します。

アプリが起動すると、テキスト ボックスの付いた空のリストが表示されます。 次のようにすることができます。

  • テキストを入力してから、+ アイコンを押して項目を追加します。

  • チェック ボックスをオンまたはオフにして、項目の完了をマークします。

  • 更新アイコンを押して、サービスからデータをリロードします。

    UWP Running App

次のステップ

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