Visual Studio App Center を使用した Xamarin.Forms アプリ開発
Published May 13 2019 10:42 PM 15.7K Views
Microsoft

最近 Visual Studio App Center が本格的に MBaaS 化してきています。

Microsoft の MBaaS といえば Azure App Services の Mobile App かと思ってたのですが、最近アップデート無いなぁと思って確認してみると…

Future of Azure Mobile Apps

Microsoft is committed to fully supporting Azure Mobile Apps, including support for the 
latest OS release, bug fixes, documentation improvements, and community PR reviews.
Please note that the product team is not currently investing in any new feature work for
Azure Mobile Apps. We highly appreciate community contributions to all areas of Azure Mobile Apps.

新機能の追加には注力していないとアナウンスされていました。

 

移行先としての Visual Studio App Center

メンテナンスはされていくので、機能的に満足していればそのまま暫く居るという判断もありですが、機能追加がされている MBaaS という観点では Visual Studio App Center が移行先としては候補にあがりそうです。

 

先日 Data 機能までプレビューで追加されて、以下のような機能のラインナップになっています。

  • Build
  • Test
  • Distribute
  • Diagnostics
  • Analytics
  • Auth
  • Data
  • Push

任意の処理を入れる API はありませんが、そこらへんが必要になった時には Azure WebApp や Function App あたりを使う事になるのかな?

暫くチェックしていなかったのですが、色々充実してきているみたいです。

 

試してみよう

ということで、Xamarin.Forms から試してみたいと思います。

Visual Studio 2019 で Xamarin.Forms のアプリケーションを作成します。ターゲットは Android と iOS にしました。

 

今回は手元に macOS がないので、動作確認は Android のみでやろうと思います。プロジェクトを作成したら、GitHub にリポジトリーを作成して push します。そして、Visual Studio App Center で Android の Xamarin のアプリを作成します。

コメント 2019-05-14 103911.jpg

App Center にアプリが出来たらビルドの構成をしておきます。これは各種機能を使う上では必須ではないですが自動ビルドがあると安心感が増すので、特に自動ビルド環境がないという人は採用を検討してみるといいのではないでしょうか。証明書で署名するビルドだと鍵の準備などが必要ですが、そうでなければリポジトリーを選択してウィザードに従うだけで完了します。

 

次に、NuGet パッケージ マネージャーから、以下のパッケージをインストールします。とりあえずは、Analytics と Diagnostics を有効化したいと思います。

  • Microsoft.AppCenter.Analytics
  • Microsoft.AppCenter.Crashes

そして、初期化コードを書くのですが問題点が一つ。リポジトリーに Visual Studio App Center の AppID を入れたくない…。ということでひと手間加えます。

AppCenterConfiguration.cs ファイルを追加して .gitignore に追加しておきます。AppCenterConfiguration.cs は以下のような内容にします。

using System;
using System.Collections.Generic;
using System.Text;

namespace AppCenterLab
{
    public static class AppCenterConfiguration
    {
        public const string Android = "<your android app id>";
        public const string iOS = "";
        public const string UWP = "";
    }
}

そして、App.xaml.cs の OnStart メソッドに以下のコードを追加します。

AppCenter.Start($"android={AppCenterConfiguration.Android};" +
      $"ios={AppCenterConfiguration.iOS}",
      typeof(Analytics), typeof(Crashes));

これで、Analytics と Crashes が使えるようになります。適当な場所で以下のようなコードを書くことでサーバーにログを送れます。

Analytics.TrackEvent("Some message", new Dictionary<string, string>
{
  ["prop1"] = "value1",
  ["prop2"] = "value2",
  ["prop3"] = "value3",
});

認証の追加

Azure AD B2C による認証が出来ます。Azure AD B2C を使うと独自のユーザーや Twitter などの SNS を使ったログインが実現できます。

ということで、https://portal.azure.com で Azure AD B2C コンテナを作成します。

 

詳細はここの Getting Started に記載があります。

それに従い以下のようにアプリを作成します。

コメント 2019-05-14 120756.jpg

 

API アクセスに Access this app on behalf of the signed-in user (user_impersonation) も追加しましょう。

コメント 2019-05-14 121154.jpg

ID プロバイダーを必要に応じて追加します。ここに Twitter や Facebook などを追加することで SNS アカウントでログインができるようになります。

 

App Center に移動して Auth の Connect your Azure Subscription を選択します。

コメント 2019-05-14 121834.jpg

Azure のサブスクリプションを選びます。そして、Azure AD B2C がみつからないと言われるので Create a new Azure AD B2C tenant をクリックして、先ほど作成した Azure AD B2C を紐づけましょう。

コメント 2019-05-14 122304.jpg

作成が終わると Azure AD B2C のテナントが表示されるようになります。(一度 Back して戻ってくると表示されます)

コメント 2019-05-14 122428.jpg

アプリケーションも選択して Scope も選択して Next を押します。最後の Policy は、Azure AD B2C のユーザーフローから取得できるとあるのですが、私のところでは空っぽだったので Azure AD B2C に サインインサインアウトのユーザーフローを作成します。作成すると名前が出てくるので、それを Policy のところに入力します。

 

OK を押すと Auth を有効化する方法のページに飛びます。それに従って以下の NuGet を追加します。

  • Microsoft.AppCenter.Auth

そして、App.xaml.cs の OnStart メソッドを Auth を有効化するように変更します。

AppCenter.Start($"android={AppCenterConfiguration.Android};" +
      $"ios={AppCenterConfiguration.iOS}",
      typeof(Analytics), typeof(Crashes), typeof(Auth));

AndroidManifest.xml の application タグの下に以下の定義を追加します。(<your android app id>の部分は AppCenter の実際の AppID に置き換えてください)

<activity android:name="com.microsoft.identity.client.BrowserTabActivity">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />

      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <data
          android:host="auth"
          android:scheme="msal<your android app id>" />
  </intent-filter>
</activity>

これをリポジトリーにアップすると app id がパブリックになりますね…。どうしよう…。とりあえず難しいので諦めました。

 

この状態で適当なボタンのクリックイベントなどに以下のコードを書くとサインインが実行できます。

private async void Button_Clicked(object sender, EventArgs e)
{
    try
    {
        var user = await Auth.SignInAsync();
        await DisplayAlert("User", $"{user.AccountId}", "Close");
    }
    catch (Exception ex)
    {
    }
}

このような感じの見た目のログイン画面が出てきました。

コメント 2019-05-14 130224.jpg

ログインが成功すると、以下のようなダイアログが出てきます。

コメント 2019-05-14 131925.jpg

データを永続化しよう

最後にデータの永続化を試してみます。バックエンドとしては Azure の Cosmos DB が使われます。

App Center で Data を選択して New database を選択します。サブスクリプションや名前や性能を入れていきます。そうすると、SDK の使い方のページに遷移します。

 

ガイドに従って以下の NuGet パッケージを追加します。

  • Microsoft.AppCenter.Data

そして、App.xaml.cs の OnStart メソッドに Data を追加します。

protected override void OnStart()
{
    AppCenter.Start($"android={AppCenterConfiguration.Android};" +
          $"ios={AppCenterConfiguration.iOS}",
          typeof(Analytics), typeof(Crashes), typeof(Auth), typeof(Data));
}

保存するデータを定義します。これは普通の C# のクラスです。

using System;
using System.Collections.Generic;
using System.Text;

namespace AppCenterLab
{
    public class Person
    {
        public Guid Id { get; set; } = Guid.NewGuid();
        public string Name { get; set; }
        public DateTimeOffset Birthday { get; set; }
    }
}

そして、データの追加と読み込みのコードを書いてみます。

private async void AddButton_Clicked(object sender, EventArgs e)
{
    var p = new Person
    {
        Name = "sample" + new Random().Next(),
        Birthday = DateTimeOffset.Now,
    };
    await Data.CreateAsync(p.Id.ToString(), p, DefaultPartitions.UserDocuments);
}

private async void ReadButton_Clicked(object sender, EventArgs e)
{
    var r = new List<Person>();
    var result = await Data.ListAsync<Person>(DefaultPartitions.UserDocuments);
    r.AddRange(result.CurrentPage.Items.Select(x => x.DeserializedValue));
    while(result.HasNextPage)
    {
        await result.GetNextPageAsync();
        r.AddRange(result.CurrentPage.Items.Select(x => x.DeserializedValue));
    }

    await DisplayAlert("Result", $"{r.Count} items found, {string.Join(", ", r.Select(x => x.Name))}", "OK");
}

追加を 4 回して読み込みをすると以下のような結果になりました。4 件みつかっているのでうまくいってるようです。

コメント 2019-05-14 142750.jpg

現時点では登録・更新・削除・IDによる検索・ページング機能付きの全件取得の機能があるようです。検索機能は現時点ではないみたいなので、まだ実用するにはちょっと早いのかもしれません。

 

Cosmos DB を覗いてみると以下のような感じの JSON が入っていました。

{
    "document": {
        "Id": "bacac454-14ee-47c3-b2ea-6607ca92f722",
        "Name": "sample1767140010",
        "Birthday": "2019-05-14T05:25:55.152477+00:00"
    },
    "id": "bacac454-14ee-47c3-b2ea-6607ca92f722",
    "PartitionKey": "user-e839c173-73cf-4f7e-96bd-f3e3a3a9c55e",
    "_rid": "TIp8AIK21DACAAAAAAAAAA==",
    "_self": "dbs/TIp8AA==/colls/TIp8AIK21DA=/docs/TIp8AIK21DACAAAAAAAAAA==/",
    "_etag": "\"0300774a-0000-2400-0000-5cda51670000\"",
    "_attachments": "attachments/",
    "_ts": 1557811559
}

PartitionKey をユーザーに指定していたので、ユーザーの識別子みたいなのが PartitionKey に入っていることがわかります。

 

まとめ

Azure Mobile Apps は、サポートはされるけど新機能の開発にはリソースは投入されないというステータスなのでタイミングを見て(Data が GA したあとあたり?) Visual Studio App Center に乗り換えるのもありかもしれません。

Version history
Last update:
‎May 13 2019 10:42 PM
Updated by: