超初心者でもできた！AzureMobileService JS バージョン

HTML と Javascript で試してみました

今日お話しすること

自己紹介 Azure について MobileService について Azure を準備 サンプル・アプリを作ってみる アプリの改造 まとめ

私はこんな人です

神守　由理子Web ショップで、商品ページ作ったりUP する画像加工してます。

* CSSNite 実行委員* Windows 女子部広島支部長* Windows Phone ハンズオン in 広島（女子求む）facebook→Yuri Kamimori 　 twitter→LirioY （銀ねこ）※ 友達申請するときにはお手数ですがお手数ですが一言添えてください

私はこんな人です

WindowsPhone のアプリ作りがきっかけです。2 年前にスマフォアプリ選手権で仲間と一緒に 29個作りました。 C# 触ったことがないので泣きながら…。鍛えられてだいぶ C# 触れるようになりました。

おかげさまで Windows のアプリばっかり作ってます。

お願い

本業はプログラマではありません。最近よくかみます。

突っ込みはくれぐれもお手柔らかに…

Azure について

マイクロソフトのクラウドプラットフォーム（ PaaS/IaaS ）

メモ… … … … … … … … … … … … …SaaS(Software as a Service)… ソフトウェアを利用に応じて提供PaaS(Platform as a Service) … プラットフォームを、インターネット経由のサービスとして提供 ( 月額使用事業モデル）IaaS(Infrastructure as a Service) … CPU ・ストレージなどコンピューターのインフラを提供

Azure について

マイクロソフトのクラウドプラットフォームのきになる料金

初期費用は無料の従量課金制料金計算ツールもある

MobileService について

今日のお題は MobileService 。スマフォやスレート（タブレット）から超～簡単にサーバへデータを保存したり取得したりできます。

20MB データベース＆ 50 万回 / 月の API 呼び出しはタダ【オススメ機能】プッシュ通知…サーバ連携して情報を取得（今日はやりません）認証…認証済みユーザーのみ利用可能というようなMobile Service へのセキュリティをあたえられる

MobileService について

SQL （データベース）は JavaScrip か C# で選べます。

アプリも C ＃か JavaScript で選べます。プラットホームもいろんな種類あります。Android 、 IOS のアプリにも対応しています。

デモしてみます

まずは、 1 か月無料のアカウントを作ってレッツトライ

http://azure.microsoft.com/ja-jp/

サンプル・アプリを作ってみる

まずは WindowsStore アプリを新規で作ってみよう！

C# で作りたい方…VisualStudio2013 PRO 以上がオススメ（ for Windows と Web できるけどはっきり言って超面倒）

Javascript で作りたい方…VisualStudio2013 for Windows で OK

サンプル・アプリを作ってみる

今日はみんな大好き？ＨＴＭＬ＆Ｊａｖａｓｃｒｉｐｔでサンプルをつついて改造してみます。

サンプル・アプリを作ってみる

• ポータル管理からモバイルサービスを作ります• バックエンドは JavaScript• リージョンは近いところ

サンプル・アプリを作ってみる

DB完成

サンプル・アプリを作ってみる①新規でアプリを作成する

②テーブルを作成する（ Todoitem)

③JavaScript でダウンロードする

DLしたファイルをつついてみます

サンプル・アプリを作ってみる

わずか、 3 ステップで完成します ^-^v

サンプル・アプリを作ってみる

Microsoft Azure 内にある新しい Mobile Service に POST リクエストを送信。リクエストから来たデータは TodoItem テーブルに挿入されます。テーブルに保存されたデータは、 Mobile Service から返され、このデータはアプリケーションの右のカラムに表示されます。

サンプル・アプリを作ってみる

アプリの改造

せっかくなのでいろいろつついて改造してみました

表示するアイテムを変えてみる

デバッグしてポータルを確認。

var refreshTodoItems = function () { // This code refreshes the entries in the list view be querying the TodoItems table. // The query excludes completed TodoItems todoTable.where({ complete: false }) .read() .done(function (results) { todoItems = new WinJS.Binding.List(results); listItems.winControl.itemDataSource = todoItems.dataSource; });};

ここら辺をいじってみます

表示するデータを変えてみる

ｔ rue を false に変えてみる→ true のアイテムのみ表示todoTable.where({ complete: true }).read ～

.where() 自体を削除→すべてのデータ表示todoTable

.where() の括弧内が表示する条件になっている。

text に変えてみる→赤という text のみ表示todoTable.where({ text: “赤” }).read ～

列を増やしてみる

列を増やしてみます。Date関数でポストした時の日時を列で追加。

buttonSave.addEventListener("click", function () { var date = new Date(); insertTodoItem({ text: textInput.value, tdate: date, complete: false }); });

列を増やしてみる

Html ファイルにも追記して右のカラムにも表示させる。

<div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px“ data-win-bind="innerText: text"></div><div style="-ms-grid-column: 4; -ms-grid-row-align: center; margin-left: 5px"data-win-bind="innerText: tdate"></div>

Default.html

列を増やしてみる

ポータル側からも列の追加・削除ができます。

データ型と列名を追加

アイテムを削除してみるアプリからも削除したいときは下記のコードを追記。var deleateCheckedTodoItem = function (todoItem) { todoTable.del(todoItem).done(function (item) { todoItems.item; }); refreshTodoItems();};

listItems.addEventListener("change", function (eventArgs) { var todoItem = eventArgs.target.dataContext.backingData; deleateCheckedTodoItem(todoItem);

});

Default.js

アイテムを削除してみるポータルからもアイテムをクリックするだけで削除できる

データ操作

データ操作はこんな感じでできます。

update… データの更新 del… データの削除

insert… データの挿入 read… データの読込

処理を挟んでみる

「文字数が 5文字以内」でないとデータ挿入できないようにしてみます。ポータル→データ→テーブル→スクリプトの挿入のスクリプト

資料参考URL

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-windows-store-dotnet-validate-modify-data-server-scripts/

処理を挟んでみる

function insert(item, user, request) { if (item.text.length > 5) { request.respond(statusCodes.BAD_REQUEST, '5文字までじゃないと入力できんよ '); } else { request.execute(); }}

function insert(item, user, request) { request.execute();}

処理を挟んでみるDefault.js側にも追記。

var insertTodoItem = function (todoItem) {todoTable.insert(todoItem).done(function (item) { todoItems.push(item); }, function (error) { var msg = new Windows.UI.Popups.MessageDialog( error.request.responseText); msg.showAsync(); });};

Default.js

処理を挟んでみるタイムスタンプを付けてみる

function insert(item, user, request) { item.stamp = new Date(); request.execute();}

ポータル→挿入

認証機能もつけられる認証済みユーザーのみ利用可能というような Mobile Service へのセキュリティをあたえられる

資料参考URLhttp://azure.microsoft.com/en-us/documentation/articles/mobile-services-windows-store-javascript-get-started-users/?fb=ja-jp

認証機能もつけられる①使いたいＳＮＳにアプリを登録しＩＤを取得する

Microsoft AccountFacebook loginTwitter loginGoogle loginAzure Active Directory

認証機能もつけられる②ポータルのＩＤより各ＩＤを登録

認証機能もつけられる

var userId = null;

var login = function () { return new WinJS.Promise(function (complete) { client.login("facebook").done(function (results) { userId = results.userId; refreshTodoItems(); var message = "こんにちは、" + userId + "さん"; var dialog = new Windows.UI.Popups.MessageDialog(message); dialog.showAsync().done(complete); }, function (error) { userId = null; var dialog = new Windows.UI.Popups.MessageDialog(" ログインできません", "ログインしてください"); dialog.showAsync().done(complete); }); });}

var authenticate = function () { login().then(function () { if (userId === null) { authenticate(); } });}

Default.js の refreshTodoItems(); を書き換える

認証機能もつけられる

client.login(“facebook”).done(function (results) ～

facebookmicrosoftaccount

twittergoogle

windowsazureactivedirectory

ピンクのとこを書き換えるだけでお好きなＳＮＳにかえられます

まとめざっと、初心者でもできる

AzureMobileService （ Javascript ）についてご紹介させていただきました。

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