Download - Windows azuremobileservice入門

Windows Phoneハンズオンセッションスライド

Windows Azure Mobile Services入門

Windows Azure Mobile Servicesとは？

Windows Azureのサービスです。

スマフォ・タブレットから簡単にサーバーへのデータ保存、取得を実現します。

無料枠もあるよ「20MBのデータベース＋50万回/月のAPI呼び出し」

通知機能にも使えます（今回はやりません）。

Windows Azure Mobile Servicesとは？

ハンズオンの流れ

1.Windows Azureのお試しアカウントを作成する

2.Mobile Serviceの作成

3.サンプルのダウンロード

4.動かしてみる

5.変更してみる


Windows Azureのサイトにアクセスhttp://www.windowsazure.com/ja-jp/


「今すぐ試す」をクリック


Microsoftアカウントでサインイン


項目を入力して進む

Mobile Serviceの作成

ポータルに移動する


トップページからポータルに行く場合はここから


左ナビからモバイルサービスをクリック


新規に作成

画面下の方（何もモバイルサービスを作成していない場合は上に新しく作るリンクがあります）


作成


いろいろ入力


任意のURL

無料のデータベース

どこでもいいけど近所で

今回は.NETで


パスワードを設定


作成中・・・


作成中・・・

できた


この辺をクリック！！


上部メニューから色々遷移できるけど、このページにもどるには「」をクリックします。


C#のソリューションファイルがダウンロードできます。

動かしてみる

ダウンロードしたzipファイルのトップディレクトリ「{サービス名}.sln」をVisualStudioで開きます。

動かしてみる

Windowsストアアプリとサーバーサイドのスクリプトが同梱されています。

←ストアアプリ

↑サーバー側

動かしてみる

サーバーサイドのコードがある＝ローカルで開発できる

JavaScript版のMobile Servicesはこれができなかった。（その代わり管理ページからDBのカラムなどを変更できた）

ちょっとJavaScriptのプロジェクトも見てみましょう。

動かしてみる

開発の流れ

ロカールのIIS上で動作させて開発

↓

Windows Azureにデプロイ＋ストアアプリ側の接続先をAzureに変更

動かしてみる

まずはサーバーを起動

{プロジェクト名}Serviceを実行する

動かしてみる

ブラウザが起動してこういう画面が表示されればOK（try it outから色々APIを操作できるので暇があったら試してみよう）

動かしてみる

ストアアプリ側を実行

First itemとSecond itemが表示されればOK

動かしてみる

DBの中身を確認

サーバーエクスプローラーを表示する

Textカラムを変更してみる

変更してみる

Mobile Servicesは簡単にDBのデータを利用できるのが利点なので、DB処理の流れを把握しておきましょう。

WebApiConfig.cs

ここで以下のようにデータを登録しています。

List<TodoItem> todoItems = new List<TodoItem>{

new TodoItem { Id = "1", Text = "First item", Complete = false },new TodoItem { Id = "2", Text = "Second item", Complete = false },

};

変更してみる

なんとなくここを書き換えると初期値が変わるんじゃないかと予想が付きます。

実際にその通りなのですが、一度作成されたテーブルはデフォルトでは変更できません。

sampleMobileServiceTest002Initializer : DropCreateDatabaseIfModelChanges<sampleMobileServiceTest002Context>

初期化のためのInitializerが「モデルが変更された場合に新しくテーブルを作り直す」設定だからです。

変更してみる

これを毎回テーブルを作り直すように変更してみます。「DropCreateDatabaseAlways」

public class sampleMobileServiceTest002Initializer : DropCreateDatabaseAlways<sampleMobileServiceTest002Context>

ここを書き換えてみる


new TodoItem { Id = “1”, Text = “変更1", Complete = false },new TodoItem { Id = “2”, Text = “変更2", Complete = false },

};

テーブルのカラムを変更してみる

・Service(サーバー)側のDataObjects\TodoItem.csを開く

public class TodoItem : EntityData{

public string Text { get; set; }

public bool Complete { get; set; }

public string Name { get; set; }}


・Service(サーバー)側のApp_Start\WebApiConfig.csを開く


new TodoItem { Id = “1”, Text = “変更１”, Complete = false, Name = “名前1” },new TodoItem { Id = “2”, Text = “変更２”, Complete = false, Name = “名前2" }

};


・ストアアプリ側のMainPage.xaml.csを開く

public class TodoItem{

public string Id { get; set; }

[JsonProperty(PropertyName = "text")]public string Text { get; set; }

[JsonProperty(PropertyName = "complete")]public bool Complete { get; set; }

[JsonProperty(PropertyName = "name")]public string Name { get; set; }

}


・ストアアプリ側のMainPage.xamlを開く

<DataTemplate><StackPanel Orientation="Horizontal">

<CheckBox Name=“CheckBoxComplete” ・・・/><TextBlock Text="{Binding Name}" />

</StackPanel></DataTemplate>

テーブルのデータを削除する

・ストアアプリ側のMainPage.xamlを開く

<Button Content="Delete" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="Button_Click"/>


・ストアアプリ側のMainPage.xaml.csを開く

private async void Button_Click(object sender, RoutedEventArgs e){

foreach (var item in this.items){

await todoTable.DeleteAsync(item);}RefreshTodoItems();

}

まとめ

簡単にMobile Servicesの動きを見てみました。

サーバー連携を簡単に作成したい場合には有力な選択肢だと思います。

仕組み的にはASP.NETらしいので作りこんで行くことも可能？(この辺まだ知識不足)

まとめ

今後ハンズオンでやってみたいこと、

・複数のテーブルを利用する

・データ保存時や更新時にサーバー側でバリデーションやロジックを組み込む方法

今後のイベント

[4/17(木)] 「ひろ～しまでもAZUREやるのです。JapanDC万歳！！(仮）」

[04/19(土)] ヒーロー島 NUI スペシャル

[調整中] Windows Phoneハンズオン Vol29(Azureネタ)

[5月] Windows Phoneハンズオン Vol.30(TypeScript)

ご清聴ありがとうございました

Download - Windows azuremobileservice入門

Top Related