Azure Mobile App を使った通知アプリを作ってみた(UWP編)

Azure

前回、Azure Mobile App のサンプルを使って、プッシュ通知をするモバイルのアプリをデプロイしました。

今回は、クライアントのアプリを UWP にしてみようと思います。
「空のアプリ(ユニバーサル Windows)」プロジェクトの新規作成からやります。
※ UWP向けのサンプルも Azure ポータルからDLできるといいんですけどねー。

 

ちなみに、前回作成したサーバサイドのサービスはすでにデプロイされている状態を前提としてます。


作業の流れ

作業の流れは以下の通りです。

  1. Nugetの追加
  2. DataModelの作成
  3. App.xaml.csの編集
  4. MainPage.xamlの編集
  5. MainPage.xaml.csの編集
  6. テスト実行
  7. プッシュ通知の実装(コード)
  8. ストアとの関連付け
  9. 動作確認

あと、動かすためのソースは下記にありますが、Mobile App の接続URLはを変更しないと動きませんし、ストアの関連付け等も個別にやる必要があります。

https://github.com/ag0u3/y0demombuwp/tree/master/y0demombuwp

1.Nuget の追加

以下の2つのパッケージをインストールします。

  • Microsoft.Azure.Mobile.Client
  • Newtonsoft.Json

 

2.DataModelの作成

前回の記事のクライアントアプリの、「DataModel/TodoItem.cs」を今回作成するアプリに持ってきます。

 

データクラスを作成したので、一度ビルドしておきます。

 

3.App.xaml.cs の編集

ここではサーバサービスの接続設定を記述するだけです。
後の手順でプッシュ通知の設定を入れるのも App.xaml.cs ですが、ひとまずプッシュ通知の実装は後回しにします。

using するのをお忘れなきよう

using Microsoft.WindowsAzure.MobileServices;

 

4.MainPage.xaml の編集

UIなので、凝ったら色々できるかもしれませんが、前回のアプリのWindows Phone のプロジェクトから、パクりました。

 

5.MainPage.xaml.cs の編集

Mobile Appのクライアントの実装のメインです。

これも、前回のアプリからコピペで張り付ける感じになります。

①.using の追加

using Microsoft.WindowsAzure.MobileServices;
using Windows.UI.Popups;
using y0demombuwp.DataModel;
using System.Threading.Tasks;

 

②.DataModel と DB の接続

DataModelに作成した、TodoItemとDBをマップさせるコードです。

 

③.CRUD処理の実装

何も考えずに、前回のアプリからコピペで貼りつけました。

ソースをちゃんと読むと、D ないじゃんって感じかもしれないですけどねー。
チェックボックスにチェックを入れると表示から消えるのは、Complete を Trueに更新している Update 処理っすからねー。

 

6.テスト実行

よいこのみなさんは、ちゃんとアプリを作ったらテストしてください。
悪い自分は、ひとまずアプリを実行してみちゃいます。

だいたい、動いてる感じっすね。

 

7.プッシュ通知の実装(コード)

やっぱり、プッシュ通知がないと寂しいので実装します。

コードに関しては、前回とまったく一緒で、追加する対象のソースは、 App.xaml.cs です。

 

①.usingの追加

using Microsoft.WindowsAzure.MobileServices;
using System.Threading.Tasks;
using Windows.Networking.PushNotifications;

 

②.プッシュ通知のエントリのコード(InitNotificcationAsync)

 

③.②のエントリの呼び出し

 

8.ストアとの関連付け

最後にストアとの関連付けを行えば、作業は完了です。

 

9.動作確認

無事通知されました。

 


まとめ

ぶっちゃけいっちゃうと、前回のアプリと違うのはDLできるか自分で実装するかの差くらいです。

あとは、Windows 8.1 ストア/Phone と UWP で今回のアプリに関してはほぼ一緒って感じです。
ただ、Windows 8.1 ストア/Phone は、プロジェクトが3つに分かれていたのが、UWPでは1つになっているのは大きな違いだと思います。

 

っていうか、UWP も、Mobile Appをいじるのも、だんだん楽しくなってきたなー。

 

コメント

タイトルとURLをコピーしました