windows azuremobileservice入門
Post on 05-Jul-2015
141 Views
Preview:
TRANSCRIPT
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.変更してみる
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
1.Windows Azureのお試しアカウントを作成する
Windows Azureのサイトにアクセスhttp://www.windowsazure.com/ja-jp/
1.Windows Azureのお試しアカウントを作成する
Windows Azureのサイトにアクセスhttp://www.windowsazure.com/ja-jp/
1.Windows Azureのお試しアカウントを作成する
「今すぐ試す」をクリック
1.Windows Azureのお試しアカウントを作成する
Microsoftアカウントでサインイン
1.Windows Azureのお試しアカウントを作成する
項目を入力して進む
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
Mobile Serviceの作成
ポータルに移動する
Mobile Serviceの作成
トップページからポータルに行く場合はここから
Mobile Serviceの作成
左ナビからモバイルサービスをクリック
Mobile Serviceの作成
左ナビからモバイルサービスをクリック
Mobile Serviceの作成
新規に作成
画面下の方（何もモバイルサービスを作成していない場合は上に新しく作るリンクがあります）
Mobile Serviceの作成
新規に作成
画面下の方（何もモバイルサービスを作成していない場合は上に新しく作るリンクがあります）
Mobile Serviceの作成
作成
Mobile Serviceの作成
いろいろ入力
Mobile Serviceの作成
任意のURL
無料のデータベース
どこでもいいけど近所で
今回は.NETで
Mobile Serviceの作成
パスワードを設定
Mobile Serviceの作成
作成中・・・
Mobile Serviceの作成
作成中・・・
できた
Mobile Serviceの作成
この辺をクリック！！
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
Mobile Serviceの作成
上部メニューから色々遷移できるけど、このページにもどるには「 」をクリックします。
Mobile Serviceの作成
Mobile Serviceの作成
C#のソリューションファイルがダウンロードできます。
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
動かしてみる
ダウンロードした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カラムを変更してみる
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
変更してみる
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>
ここを書き換えてみる
List<TodoItem> todoItems = new List<TodoItem>{
new TodoItem { Id = “1”, Text = “変更1", Complete = false },new TodoItem { Id = “2”, Text = “変更2", Complete = false },
};
変更してみる
これを毎回テーブルを作り直すように変更してみます。「DropCreateDatabaseAlways」
public class sampleMobileServiceTest002Initializer : DropCreateDatabaseAlways<sampleMobileServiceTest002Context>
ここを書き換えてみる
List<TodoItem> todoItems = new List<TodoItem>{
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を開く
List<TodoItem> todoItems = new List<TodoItem>{
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)
ご清聴ありがとうございました
top related