Windows Azure Mobile Services を使った Windows ストアアプリ開発-(1) 最初のMobile Service の作成

  • Article

皆様、こんにちは！

先週の MSC 2012 、そして今週の Developer Camp 2012 Fall と、お忙しいところ多くの方にご来場いただきまして、誠に有難うございました。

さて、その Developer Camp で予定していたHOL（ハンズオンラボ）の中で、諸事情により実施できなかった、Windows Azure Mobile Services について、詳細にコンテンツをご紹介したいと思います。ドキュメントをお持ち帰りいただいた皆様もおられたとお聞きしていますが、元々チュートリアルを詳しく、と4つ前のエントリで書いていたこともあり、ここでは若干補足しつつ、ご紹介したいと思います。Mobile Services について第1回目は、最初のMobile Service の作成です。

目的

· Windows Azure Mobile Service の作成

· Windows Azure Mobile Services SDK の利用

· Mobile Serviceからのテーブルの行の新規作成、更新、読み込み、削除

· Windows ストアアプリへのプッシュ通知追加

· 認証済みユーザーのみ利用可能というようなMobile Service へのセキュリティ付与

前提条件

· Windows Azure サブスクリプションとMobile Services preview の有効化- Create a Windows Azure account and enable preview features

· Visual Studio 2012

 

演習 1: 最初のMobile Service の作成

ここでは、Windows Azure Mobile Servicesを使って、クラウドベースのバックエンドサービスをWindows 8 ストアアプリに追加する方法を説明します。新しい Mobile Service を作成し、そして、単純な To do list Windows ストアアプリを作成し、その新しいMobile Service にデータを保存します。完成したアプリケーションのスクリーンショットは下記の通りです。

clip_image002

Task 1- 新しいMobile Service の作成

下記の手順に従って新しい Mobile Service を作成します。

1. Windows Azure Management Portal にログインし、Mobile Services に移動します。

2. +New ボタンをクリックし、次いで、Mobile Service, Create をクリックします。

clip_image004

3. Mobile Service を展開し、Create をクリックします。

clip_image006これにより New Mobile Service ダイアログが表示されます。

4. Create a mobile service ページの中で、URL テキストボックスに、新しい Mobile Service のためのサブドメイン名をタイプして名前の検証 (使用可能かどうか) を待ちます。名前の検証が完了したら、右向き矢印のボタンをクリックして次のページに移動します。

clip_image008

これにより、Specify database settings ページが表示されます。
注 : このチュートリアルの一部として、新しいSQL Database インスタンスとサーバーを作成します。この新しいデータベースを再利用できますし、他のSQL Database インスタンスを管理できます。もし、新しくMobile Service を作成するリージョンに既にデータベースを作成していた場合、Use existing Database を選択し、そのデータベースを選択できます。異なるリージョンにあるデータベースの使用はお奨めしません。付加的な帯域コストとさらに高いレイテンシーが生じ得るからです。

5. Nameフィールドに新しいデータベースの名前を入力します。そして Login name フィールドに新しいSQL Database サーバーの管理者のログイン名を入力し、Password フィールドに同じく管理者のパスワードを、Password Confirmation フィールドに確認のため再入力します。次いで右下のチェックボタンをクリックしてデータベース設定を終了します。

clip_image010
Note: 入力したPassword が必要最低限の要求を満たしていなかったり、合致していなかった場合には、警告が表示されます。管理者名や管理者パスワード等の情報は、SQL Database インスタンスやサーバーを再利用しようとする場合に必要となりますので、どこかに安全に記録しておくことをお勧めします。

これで、新しい Mobile Service が作成され、Windows ストアアプリから利用可能になりました。

Task 2 – 新しいWindows ストアアプリを作成

新しい Mobile Service を作成したら、Windows Azure の管理ポータル上でクイックスタートに従いましょう。ここでは新しい Windows ストアアプリを作成するか、既存のWindows ストアアプリを編集して、新しく作成した Mobile Services に接続するかを選べます。

1. Windows Azure 管理ポータルの中で、Mobile Services をクリックし、先ほど作成したMobile Service を選択します。

2. quickstart タブに切り替えて、 Create a new Windows 8 application を展開します。

clip_image012

これにより、僅か3ステップで簡単に、当該 Mobile Service と接続するWindows 8 ストアアプリが作成できます。

clip_image014

3. もしまだ準備ができていない場合、たとえば、Visual Studio 2012 Express for Windows 8 とMobile Services SDK をローカルコンピューターか想マシンにインストールしてください。 ここでは、まず2でテーブルを作成し、３でサンプルの To do listWindows ストアアプリのプロジェクトをダウンロードします。これは作成された Mobile Service と接続します。圧縮ファイルになっているプロジェクトをローカルコンピューターの適当な場所に保存し、それをどこに入れたのか記録しておきましょう。

Task 3 - アプリケーションの実行

1. 圧縮されたプロジェクトファイルを適当な場所に解凍し、その場所をエクスプローラーで開きます。ソリューションファイルをVisual Studio 2012 で開きます。

clip_image016

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

3. アプリケーションの中で、何か意味のある文章を入力します。例えば Complete the demo といった文章をInsert a TodoItem テキストボックスに入力し、Save をクリックします。

clip_image018

これにより、Windows Azure 内にある新しいMobile Service にPOST リクエストを送信します。リクエストから来たデータはTodoItem テーブルに挿入されます。テーブルに保存されたデータは、Mobile Service から返され、このデータはアプリケーションの右隣にあるカラムに表示されます。
注 : Mobile Service にアクセスしてデータにクエリーをかけて挿入するコードは、MainPage.xaml.cs ファイル (C#/XAML プロジェクトの場合) または default.js (JavaScript/HTML プロジェクトの場合) ファイルで、見ることができます。

4. Windows Azure 管理ポータルに戻り、Data タブをクリックして、次に TodoItems テーブルをクリックし、当該データが保存されていることを確認します。

clip_image020
この TodoItems テーブルをクリックすると、このアプリによってテーブルに挿入されたデータを閲覧することができます。

clip_image022

Task 4 - アプリケーションコードの探検

ここでは、To do list Windows ストアアプリのコードの詳細を探検してみましょう。このアプリが、Windows Azure Mobile Services Client SDK を使うことにより、いかにシンプルにWindows Azure Mobile Servicesと連携しているかを確認できます。

1. Visual Studio 2012 に戻り、ダウンロードされた To do list Windows ストアアプリを開きます。

2. ソリューションエクスプローラー内で、参照設定フォルダーを展開して、Windows Azure Mobile Services Client SDK への参照を確認します。
注 : どのような Windows ストアアプリからも、参照の追加ダイアログを使用して、Windows Azure Mobile Services Client SDK への参照を設定できます。

3. App.xaml.cs を開いてMobileServiceClient クラスを表示します。このクラスはMobile Services client SDK のキーとなるクラスで、Windows Azure Mobile Servicesと連携するための方法を提供するものです。コンストラクターの中の最初のパラメーターは、Mobile Service のエンドポイントであり、2つ目のパラメーターは当該モバイルサービス用のアプリケーションキーとなります。

(例) 注：既に入力されているので入力する必要はありません。
C#

    

 public static MobileServiceClient MobileService 

         = new MobileServiceClient( 

             "https://cloudnick.azure-mobile.net/",

             "vIWepmcOXGPsYCJQDDcFBKsnOVxzLG52" );

 

4. MainPage.xaml.cs を開いて、Mobile Service が、Insert、Update、Read、そしてDeleteを各々どのように構成してているかを確認します。

自動生成されたソースコードはテーブルへの操作をハンドルします。

C# 注：既に入力されているので入力する必要はありません。

   

 private IMobileServiceTable<TodoItem> todoTable = 

                   App.MobileService.GetTable<TodoItem>();

   

Insert処理

C# 注：既に入力されているので入力する必要はありません。

 private async void InsertTodoItem(TodoItem todoItem) 

 { 

 await todoTable.InsertAsync(todoItem); 

 items.Add(todoItem); 

 }

Update処理

C# 注：既に入力されているので入力する必要はありません。

 private async void UpdateCheckedTodoItem(TodoItem item) 

 { 

 await todoTable.UpdateAsync(item); 

 items.Remove(item); 

 }

 

Read処理

C#注：既に入力されているので入力する必要はありません。

 private void RefreshTodoItems() 

 { 

 items = todoTable 

 .Where(todoItem => todoItem.Complete == false) 

 .ToCollectionView(); 

 ListItems.ItemsSource = items; 

 }

 

以上です。いかがでしょう？

次回は、 Windows ストアアプリへのプッシュ通知の追加 です。おたのしみに ！

鈴木 章太郎