Azure Mobile App を使った通知アプリを作ってみた

MADOSUMA を Windows 10 Mobile にアップデートしてから、何かモバイルで遊びたい感じになっている今日この頃です。

Azure の Mobile App と通知ハブを使ってみたくなりましたので、ごにょごにょしたことのログとして書きます。

 

ちなみに、今回の自分の手元の開発環境では、Visual Studio 2015 Update 1 を使ってますが、チュートリアルを見るとVS2013でも大丈夫そうです。

---

 

今回は、下記の流れになります。

1. Azure の Mobile App を作成
2. Windows App (サーバ)の作成
3. Windows App (クライアント)の作成
4. 通知ハブの作成
5. Windows Dev Centerへの登録
6. Windows App (サーバ) への通知ハブの実装
7. Windows App (クライアント)への通知ハブの実装

 

1、2、３の手順は、下記の内容が参考になります。
■Create a Windows app (Windows アプリの作成)
https://azure.microsoft.com/ja-jp/documentation/articles/app-service-mobile-windows-store-dotnet-get-started/

4、５、６、７の手順は、下記の内容が参考になります。
■Add push notifications to your Windows Runtime 8.1 universal app
https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-windows-store-dotnet-get-started-push/

ひとまず、作成するアプリは、Mobile App を作成した時にダウンロードできるサンプルアプリをそのままです。

 

---

1.Mobile App の作成

ポータルから簡単に作成できます。

 

作成した後は、Quick start から、Windows(C#) を選びます。
iOS 向けや、Android 向けのもありますので、そちらを作ることもできます。

 

Windows (C#) のQuick start では、1で接続するDBの選択(もしくは追加)、2でサンプルのサーバ側のアプリのDL、3でサンプルのクライアントのアプリのDLができます。

 

まずは、1のDB接続を追加します。

Add をクリックするとSQL Databaseの作成画面が出てきますので、設定して作成します。作成開始してから、処理が終わるまでは数分かかります。

 

ひとまず、これで環境的なものは完了です。

 

---

2.サーバサイドのアプリの作成とデプロイ

見出し的にはサーバサイドのアプリの作成と書いてみましたが、今回は、サンプルアプリをDLしてそのまま使います。

Quick start のページより、「Create a table API」のところで、「c#」を選択し、「Download」ボタンを押します。

 

DLしたら、ひとまず何も変更しないでAzureにデプロイしちゃいました。
プロジェクトを選択して右クリックメニューから、「公開」ですね。

 

デプロイに成功すると、自動的にブラウザを開き下記の画面が表示されます。

 

ひとまず、サーバサイドはこんなところで、興味のある方はソースを読んでみてください。
SDK は、「Microsoft.Azure.Mobile.Server」あたりを使っているみたいです。

 

---

3.クライアントサイドのアプリの作成

見出し的にはクライアントサイドのアプリの作成と書いてみましたが、サーバサイドのアプリと同様にサンプルアプリをDLしてそのまま使います。

Quick start のページより、「Configure your client application」のところで、「Download」ボタンを押します。

 

DLしたらデバッグ実行してみましょう。まずは、WIndows Phone アプリから。

 

アプリが起動したら、「test phone」と入力して保存してみます。

 

続いて、ストアアプリです。
スタートアッププロジェクトを切り替えてデバッグ実行です。

 

起動すると、先ほどのWindows Phone アプリで登録した、「test phone」が表示されてますね。
なんとなく、「test store」でも登録していきましょうかね。

 

クライアントサイドものアプリも興味がある方はソースを読んでみてください。
SDK は、「Microsoft.Azure.Mobile.Client」あたりを使っているみたいです。
ちなみに、クライアントアプリで、「Microsoft.Azure.Mobile.Client」でなく、サーバで使う「Microsoft.Azure.Mobile.Server」をインストールして使ってもビルドは通りますが、実際に動かすとDBアクセスのあたりでエラーを吐きます。
ですので、新規でアプリを作成する場合は、ご注意を～。

 

---

4.通知ハブの作成

3までで、ひとまず、MBaaSのサービスを作成してそこに、クライアントのアプリをつなげるところまでができました。

今度は、MBaaSからクライアントへのプッシュ通知をする部分を実装していきたいと思います。まずは、Azure 側でプッシュ通知のサービスを作成します。

作成したMobile Appsから、「Push」を選びます。
「Notification Hub」を選択し、新規の通知ハブを作成します。
設定が終わった後は、「Create」ボタンをクリックすると1分くらいで作成できます。
※　ポータルの言語設定を自分は英語にしているので、日本語だと若干表示が違うかも。

 

作成後、一度Mobile Appsを開きなおすと、下記のように「Push」の表示が変わります。
今回は、Windows ストアアプリとWindows Phoneアプリですので、「Windows(WNS)」を選択します。
ただ、この段階では、Package SIDとSecurity Key はまだ持ってないので設定できません。

 

---

 

5.Windows Dev Centerへの登録

プッシュ通知をする場合、MBaaSから各端末へいきなり通知を飛ばすのではなく、プラットフォーム通知システム (PNS: Platform Notification System) と呼ばれるプラットフォーム独自のインフラストラクチャを介して配信されます。

この辺の動作は、下記のサイトが参考になります。
■Azure Notification Hubs
https://azure.microsoft.com/ja-jp/documentation/articles/notification-hubs-overview/#-2

Windows のアプリの場合は、WNS (Windows Notification Service)を利用するため、Windows Dev Center を使ってストアに登録を行います。
なお、この手順を行うためには、Windows ストアの開発者ライセンスが必要になります。

まずは、クライアントサイドのアプリを開き、プロジェクトを選択して右クリックメニューから、「ストア」→「アプリケーションをストアと関連付ける」を選びます。

 

 

 

続いて、Windows Dev Centerにブラウザで接続し、サインイン後にDashBordを開きます。
■Windows Dev Center
https://dev.windows.com/en-us/

 

My appsより、VSで関連付けの際に予約したアプリを選択します。

 

「Services」→「Push notifications」を選択し、Windows Push Notification Services(WPN)の「Live Services site」のリンクをクリックします。

 

「Package SID」と「Client secret」を先ほどのAzure の通知HUBの箇所に設定します。

 

---

6.Windows App (サーバ) への通知ハブの実装

通知ハブのサービスの設定までができましたので、アプリに実装していきます。
まずは、サーバサイドのアプリに。

SDKを使って実装するので、Nuget より、「Microsoft.Azure.NotificationHubs」をインストールします。

「Controllers」→「TodoItemController.cs」に以下のソースを追加します。
※　今回は、クライアントからPostされた時にプッシュ通知で登録内容を通知する。

①.Usingの追加

using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;

 

②.PostTodoItemを以下のコードに変更します。

 public async Task<IHttpActionResult> PostTodoItem(TodoItem item)
 {
 TodoItem current = await InsertAsync(item);

 // Get the settings for the server project.
 HttpConfiguration config = this.Configuration;
 MobileAppSettingsDictionary settings =
 this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

 // Get the Notification Hubs credentials for the Mobile App.
 string notificationHubName = settings.NotificationHubName;
 string notificationHubConnection = settings
 .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

 // Create the notification hub client.
 NotificationHubClient hub = NotificationHubClient
 .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

 // Define a WNS payload
 var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
 + item.Text + @"</text></binding></visual></toast>";
 try
 {
 // Send the push notification.
 var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);

 // Write the success result to the logs.
 config.Services.GetTraceWriter().Info(result.State.ToString());
 }
 catch (System.Exception ex)
 {
 // Write the failure result to the logs.
 config.Services.GetTraceWriter()
 .Error(ex.Message, null, "Push.SendAsync Error");
 }

 return CreatedAtRoute("Tables", new { id = current.Id }, current);
 }

 

ソース編集後は、Azure にデプロイしましょう！！

 

---

7.Windows App (クライアント)への通知ハブの実装

サーバサイドのアプリの実装が終わりましたら、最後の段階です。
クライアントのアプリに通知ハブの実装を行います。

「y0demombapp.Shared」のプロジェクトの「App.xaml.cs」に以下のソースの編集を行います。

 

①.usingの追加

using System.Threading.Tasks;
using Windows.Networking.PushNotifications;

 

②.以下のメソッドの追加

 private async Task InitNotificationsAsync()
 {
 // Get a channel URI from WNS.
 var channel = await PushNotificationChannelManager
 .CreatePushNotificationChannelForApplicationAsync();

 // Register the channel URI with Notification Hubs.
 await App.MobileService.GetPush().RegisterAsync(channel.Uri);
 }

 

③.OnLaunchedからInitNotificationsAsyncの呼び出し
※　以下の赤字の箇所を追加する。

 protected async override void OnLaunched(LaunchActivatedEventArgs e)
 {
 await InitNotificationsAsync();
　　：
}

 

「Package.appxmanifest」でトースト対応を「はい」にします。
※　ひとまず今回はWindows Phone アプリだけ設定しました。

 

これで、リビルドして実行すると無事通知が行われました。

 

---

８.まとめ

この後、クライアントのアプリをUWPとして実装するのも書こうと思ったのですが、すでに結構なボリュームなので、また今度にします。