Upload
yuri-kamimori
View
259
Download
3
Embed Size (px)
DESCRIPTION
MicrosoftAzureのMobileService(JavaScript)を試してみました
Citation preview
超初心者でもできた!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
サンプル・アプリを作ってみる
今日はみんな大好き?HTML&Javascriptでサンプルをつついて改造してみます。
サンプル・アプリを作ってみる
• ポータル管理からモバイルサービスを作ります• バックエンドは 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; });};
ここら辺をいじってみます
表示するデータを変えてみる
t 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
認証機能もつけられる①使いたいSNSにアプリを登録しIDを取得する
Microsoft AccountFacebook loginTwitter loginGoogle loginAzure Active Directory
認証機能もつけられる②ポータルのIDより各IDを登録
認証機能もつけられる
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
ピンクのとこを書き換えるだけでお好きなSNSにかえられます
まとめざっと、初心者でもできる
AzureMobileService ( Javascript )についてご紹介させていただきました。
ご清聴ありがとうございました。