windows azuremobileservice入門
TRANSCRIPT
![Page 1: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/1.jpg)
Windows Phoneハンズオン セッションスライド
Windows Azure Mobile Services入門
![Page 2: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/2.jpg)
Windows Azure Mobile Servicesとは?
Windows Azureのサービスです。
スマフォ・タブレットから簡単にサーバーへのデータ保存、取得を実現します。
無料枠もあるよ「20MBのデータベース+50万回/月のAPI呼び出し」
通知機能にも使えます(今回はやりません)。
![Page 3: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/3.jpg)
Windows Azure Mobile Servicesとは?
![Page 4: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/4.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 5: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/5.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
![Page 6: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/6.jpg)
1.Windows Azureのお試しアカウントを作成する
Windows Azureのサイトにアクセスhttp://www.windowsazure.com/ja-jp/
![Page 7: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/7.jpg)
1.Windows Azureのお試しアカウントを作成する
Windows Azureのサイトにアクセスhttp://www.windowsazure.com/ja-jp/
![Page 8: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/8.jpg)
1.Windows Azureのお試しアカウントを作成する
「今すぐ試す」をクリック
![Page 9: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/9.jpg)
1.Windows Azureのお試しアカウントを作成する
Microsoftアカウントでサインイン
![Page 10: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/10.jpg)
1.Windows Azureのお試しアカウントを作成する
項目を入力して進む
![Page 11: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/11.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 12: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/12.jpg)
Mobile Serviceの作成
ポータルに移動する
![Page 13: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/13.jpg)
Mobile Serviceの作成
トップページからポータルに行く場合はここから
![Page 14: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/14.jpg)
Mobile Serviceの作成
左ナビからモバイルサービスをクリック
![Page 15: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/15.jpg)
Mobile Serviceの作成
左ナビからモバイルサービスをクリック
![Page 16: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/16.jpg)
Mobile Serviceの作成
新規に作成
画面下の方(何もモバイルサービスを作成していない場合は上に新しく作るリンクがあります)
![Page 17: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/17.jpg)
Mobile Serviceの作成
新規に作成
画面下の方(何もモバイルサービスを作成していない場合は上に新しく作るリンクがあります)
![Page 18: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/18.jpg)
Mobile Serviceの作成
作成
![Page 19: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/19.jpg)
Mobile Serviceの作成
いろいろ入力
![Page 20: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/20.jpg)
Mobile Serviceの作成
任意のURL
無料のデータベース
どこでもいいけど近所で
今回は.NETで
![Page 21: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/21.jpg)
Mobile Serviceの作成
パスワードを設定
![Page 22: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/22.jpg)
Mobile Serviceの作成
作成中・・・
![Page 23: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/23.jpg)
Mobile Serviceの作成
作成中・・・
できた
![Page 24: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/24.jpg)
Mobile Serviceの作成
この辺をクリック!!
![Page 25: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/25.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 26: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/26.jpg)
Mobile Serviceの作成
上部メニューから色々遷移できるけど、このページにもどるには「 」をクリックします。
![Page 27: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/27.jpg)
Mobile Serviceの作成
![Page 28: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/28.jpg)
Mobile Serviceの作成
C#のソリューションファイルがダウンロードできます。
![Page 29: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/29.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 30: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/30.jpg)
動かしてみる
ダウンロードしたzipファイルのトップディレクトリ「{サービス名}.sln」をVisualStudioで開きます。
![Page 31: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/31.jpg)
動かしてみる
Windowsストアアプリとサーバーサイドのスクリプトが同梱されています。
←ストアアプリ
↑サーバー側
![Page 32: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/32.jpg)
動かしてみる
サーバーサイドのコードがある=ローカルで開発できる
JavaScript版のMobile Servicesはこれができなかった。(その代わり管理ページからDBのカラムなどを変更できた)
ちょっとJavaScriptのプロジェクトも見てみましょう。
![Page 33: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/33.jpg)
動かしてみる
開発の流れ
ロカールのIIS上で動作させて開発
↓
Windows Azureにデプロイ+ストアアプリ側の接続先をAzureに変更
![Page 34: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/34.jpg)
動かしてみる
まずはサーバーを起動
{プロジェクト名}Serviceを実行する
![Page 35: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/35.jpg)
動かしてみる
ブラウザが起動してこういう画面が表示されればOK(try it outから色々APIを操作できるので暇があったら試してみよう)
![Page 36: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/36.jpg)
動かしてみる
ストアアプリ側を実行
First itemとSecond itemが表示されればOK
![Page 37: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/37.jpg)
動かしてみる
DBの中身を確認
サーバーエクスプローラーを表示する
Textカラムを変更してみる
![Page 38: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/38.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 39: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/39.jpg)
変更してみる
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 },
};
![Page 40: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/40.jpg)
変更してみる
なんとなくここを書き換えると初期値が変わるんじゃないかと予想が付きます。
実際にその通りなのですが、一度作成されたテーブルはデフォルトでは変更できません。
sampleMobileServiceTest002Initializer : DropCreateDatabaseIfModelChanges<sampleMobileServiceTest002Context>
初期化のためのInitializerが「モデルが変更された場合に新しくテーブルを作り直す」設定だからです。
![Page 41: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/41.jpg)
変更してみる
これを毎回テーブルを作り直すように変更してみます。「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 },
};
![Page 42: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/42.jpg)
変更してみる
これを毎回テーブルを作り直すように変更してみます。「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 },
};
![Page 43: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/43.jpg)
テーブルのカラムを変更してみる
・Service(サーバー)側のDataObjects\TodoItem.csを開く
public class TodoItem : EntityData{
public string Text { get; set; }
public bool Complete { get; set; }
public string Name { get; set; }}
![Page 44: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/44.jpg)
テーブルのカラムを変更してみる
・Service(サーバー)側のApp_Start\WebApiConfig.csを開く
List<TodoItem> todoItems = new List<TodoItem>{
new TodoItem { Id = “1”, Text = “変更1”, Complete = false, Name = “名前1” },new TodoItem { Id = “2”, Text = “変更2”, Complete = false, Name = “名前2" }
};
![Page 45: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/45.jpg)
テーブルのカラムを変更してみる
・ストアアプリ側の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; }
}
![Page 46: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/46.jpg)
テーブルのカラムを変更してみる
・ストアアプリ側のMainPage.xamlを開く
<DataTemplate><StackPanel Orientation="Horizontal">
<CheckBox Name=“CheckBoxComplete” ・・・/><TextBlock Text="{Binding Name}" />
</StackPanel></DataTemplate>
![Page 47: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/47.jpg)
テーブルのカラムを変更してみる
![Page 48: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/48.jpg)
テーブルのデータを削除する
・ストアアプリ側のMainPage.xamlを開く
<Button Content="Delete" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="Button_Click"/>
![Page 49: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/49.jpg)
テーブルのカラムを変更してみる
・ストアアプリ側のMainPage.xaml.csを開く
private async void Button_Click(object sender, RoutedEventArgs e){
foreach (var item in this.items){
await todoTable.DeleteAsync(item);}RefreshTodoItems();
}
![Page 50: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/50.jpg)
ハンズオンの流れ
1.Windows Azureのお試しアカウントを作成する
2.Mobile Serviceの作成
3.サンプルのダウンロード
4.動かしてみる
5.変更してみる
6.発行してみる
![Page 51: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/51.jpg)
発行してみる
サーバー側をWindows Azureにアップロードして、
クライアント(ストアアプリ)からAzure上のMobile Servicesに接続するようにする
![Page 52: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/52.jpg)
発行してみる
プロジェクトをダウンロードしたポータルページの下部の
「こちらから」というボタンから発行プロファイルをダウンローど。(プロファイルは後で利用します)
![Page 53: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/53.jpg)
発行してみる
VisualStudioの~Serviceプロジェクトを右クリックして「発行」を選択。
![Page 54: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/54.jpg)
発行してみる
先ほどダウンロードした発行プロファイルを選択
![Page 55: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/55.jpg)
発行してみる
続いてストアアプリ側で接続先を変更する。App.xaml.csに接続先情報があるのでローカルサーバーからAzureのものに書きかえる。
public static MobileServiceClient MobileService = new MobileServiceClient("http://localhost:50014"
);
// public static MobileServiceClient MobileService = new MobileServiceClient(// “https://{Azureのドメイン}/",// “{Azureのパスワード}"// );
こちらのコメントアウトを外す
こちらをコメントアウト
![Page 56: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/56.jpg)
まとめ
簡単にMobile Servicesの動きを見てみました。
サーバー連携を簡単に作成したい場合には有力な選択肢だと思います。
仕組み的にはASP.NETらしいので作りこんで行くことも可能?(この辺まだ知識不足)
![Page 57: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/57.jpg)
まとめ
今後ハンズオンでやってみたいこと、
・複数のテーブルを利用する
・データ保存時や更新時にサーバー側でバリデーションやロジックを組み込む方法
![Page 58: Windows azuremobileservice入門](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559815ae1a28ab531d8b468e/html5/thumbnails/58.jpg)
ご清聴ありがとうございました