超初心者でもできた!
AzureMobileService JSバー
ジョン
HTMLとJavascriptで試してみまし
た
今日お話しすること
自己紹介
Azureについて
MobileServiceについて
Azureを準備
サンプル・アプリを作ってみる
アプリの改造
まとめ
私はこんな人です
神守 由理子
Webショップで、商品ページ作ったり
UPする画像加工してます。
* CSSNite実行委員
* Windows女子部広島支部長
* Windows Phoneハンズオン in 広島(女子求む)
facebook...
私はこんな人です
WindowsPhoneのアプリ作りがきっかけです。
2年前にスマフォアプリ選手権で仲間と一緒に29個
作りました。C#触ったことがないので泣きながら
…。
鍛えられてだいぶC#触れるようになりました。
おかげさまでWindo...
お願い
本業はプログラマではありません。
最近よくかみます。
突っ込みはくれぐれもお手柔らかに…
Azureについて
マイクロソフトのクラウドプラットフォーム
(PaaS/IaaS)
メモ… … … … … … … … … … … … …
SaaS(Software as a Service)…ソフトウェアを利
用に応じて提供
PaaS(P...
Azureについて
マイクロソフトのクラウドプラットフォームのき
になる料金
初期費用は無料の従量課金制
料金計算ツールもある
MobileServiceについて
今日のお題はMobileService。
スマフォやスレート(タブレット)から超~簡単
に
サーバへデータを保存したり取得したりできます。
20MBデータベース&50万回/月のAPI呼び出しはタ
ダ
【オスス...
MobileServiceについて
SQL(データベース)はJavaScripかC#で選べます。
アプリもC#かJavaScriptで選べます。
プラットホームもいろんな種類あります。
Android、IOSのアプリにも対応しています。
デモしてみます
まずは、1か月無料のアカウントを作ってレッツト
ライ
http://azure.microsoft.com/ja-jp/
サンプル・アプリを作ってみる
まずはWindowsStoreアプリを新規で作ってみよ
う!
C#で作りたい方…
VisualStudio2013 PRO以上がオススメ
(for WindowsとWebできるけどはっきり言って超
面倒)
Java...
サンプル・アプリを作ってみる
今日はみんな大好き?
HTML&Javascriptでサンプルを
つついて改造してみます。
サンプル・アプリを作ってみる
• ポータル管理からモバイルサービスを作りま
す
• バックエンドはJavaScript
サンプル・アプリを作ってみる
DB完成
サンプル・アプリを作ってみる
①新規でアプリを作成する
②テーブルを作成する
(Todoitem)
③JavaScriptでダウンロードす
る
DLしたファイ
ルを
つついてみま
す
サンプル・アプリを作ってみる
わずか、3ステップで完成します^-^v
サンプル・アプリを作ってみる
Microsoft Azure 内にある新しいMobile Service
にPOST リクエストを送信。
リクエストから来たデータはTodoItem テーブルに
挿入されます。テーブルに保存されたデータは、
Mo...
サンプル・アプリを作ってみる
アプリの改造
せっかくなのでいろいろつついて改造して
みました
表示するアイテムを変えてみる
デバッグしてポータルを確認。
var refreshTodoItems = function () {
// This code refreshes the entries in the list view be
...
表示するデータを変えてみる
trueをfalseに変えてみる→trueのアイテムのみ表
示todoTable.where({ complete: true }).read~
.where()自体を削除→すべてのデータ表示
todoTable
....
列を増やしてみる
列を増やしてみます。
Date関数でポストした時の日時を列で追加。
buttonSave.addEventListener("click", function () {
var date = new Date();
inser...
列を増やしてみる
Htmlファイルにも追記して右のカラムにも表示さ
せる。
<div style="-ms-grid-column: 2; -ms-grid-row-align:
center; margin-left: 5px“ data-w...
列を増やしてみる
ポータル側からも列の追加・削除ができます。
データ型と
列名を追加
アイテムを削除してみる
アプリからも削除したいときは下記のコードを追
記。
var deleateCheckedTodoItem = function (todoItem) {
todoTable.del(todoItem).done(func...
アイテムを削除してみる
ポータルからもアイテムをクリックするだけで削
除できる
データ操作
データ操作はこんな感じでできます。
update…データの更新 del…データの削除
insert…データの挿入 read…データの読込
処理を挟んでみる
「文字数が5文字以内」でないとデータ挿入できな
いようにしてみます。
ポータル→データ→テーブル→スクリプトの挿入のスク
リプト
資料参考URL
http://azure.microsoft.com/en-us/documen...
処理を挟んでみる
function insert(item, user, request) {
if (item.text.length > 5) {
request.respond(statusCodes.BAD_REQUEST,
'5文字ま...
処理を挟んでみる
Default.js側にも追記。
var insertTodoItem = function (todoItem) {
todoTable.insert(todoItem).done(function (item) {
tod...
処理を挟んでみる
タイムスタンプを付けてみる
function insert(item, user, request) {
item.stamp = new Date();
request.execute();
}
ポータル→挿入
認証機能もつけられる
認証済みユーザーのみ利用可能というような
Mobile Service へのセキュリティをあたえられる
資料参考URL
http://azure.microsoft.com/en-us/documentation/arti...
認証機能もつけられる
①使いたいSNSにアプリを登録しIDを取得す
る
Microsoft Account
Facebook login
Twitter login
Google login
Azure Active
Directory
認証機能もつけられる
②ポータルのIDより各IDを登録
認証機能もつけられる
var userId = null;
var login = function () {
return new WinJS.Promise(function (complete) {
client.login("faceb...
認証機能もつけられる
client.login(“facebook”).done(function
(results)~
facebook
microsoftaccount
twitter
google
windowsazureactived
...
まとめ
ざっと、初心者でもできる
AzureMobileService(Javascript)について
ご紹介させていただきました。
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

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

279

Published on

MicrosoftAzureのMobileService(JavaScript)を試してみました

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
279
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 超初心者でもできた! AzureMobileService JSバー ジョン HTMLとJavascriptで試してみまし た
  2. 2. 今日お話しすること 自己紹介 Azureについて MobileServiceについて Azureを準備 サンプル・アプリを作ってみる アプリの改造 まとめ
  3. 3. 私はこんな人です 神守 由理子 Webショップで、商品ページ作ったり UPする画像加工してます。 * CSSNite実行委員 * Windows女子部広島支部長 * Windows Phoneハンズオン in 広島(女子求む) facebook→Yuri Kamimori twitter→LirioY(銀 ねこ) ※友達申請するときにはお手数ですがお手数ですが一言添えてくださ い
  4. 4. 私はこんな人です WindowsPhoneのアプリ作りがきっかけです。 2年前にスマフォアプリ選手権で仲間と一緒に29個 作りました。C#触ったことがないので泣きながら …。 鍛えられてだいぶC#触れるようになりました。 おかげさまでWindowsのアプリばっかり作ってます。
  5. 5. お願い 本業はプログラマではありません。 最近よくかみます。 突っ込みはくれぐれもお手柔らかに…
  6. 6. Azureについて マイクロソフトのクラウドプラットフォーム (PaaS/IaaS) メモ… … … … … … … … … … … … … SaaS(Software as a Service)…ソフトウェアを利 用に応じて提供 PaaS(Platform as a Service) …プラットフォー ムを、インターネット経由のサービスとして提供 (月額使用事業モデル) IaaS(Infrastructure as a Service) … CPU・ス トレージなどコンピューターのインフラを提供
  7. 7. Azureについて マイクロソフトのクラウドプラットフォームのき になる料金 初期費用は無料の従量課金制 料金計算ツールもある
  8. 8. MobileServiceについて 今日のお題はMobileService。 スマフォやスレート(タブレット)から超~簡単 に サーバへデータを保存したり取得したりできます。 20MBデータベース&50万回/月のAPI呼び出しはタ ダ 【オススメ機能】 プッシュ通知…サーバ連携して情報を取得(今日 はやりません) 認証…認証済みユーザーのみ利用可能というよう なMobile Service へのセキュリティをあたえられ
  9. 9. MobileServiceについて SQL(データベース)はJavaScripかC#で選べます。 アプリもC#かJavaScriptで選べます。 プラットホームもいろんな種類あります。 Android、IOSのアプリにも対応しています。
  10. 10. デモしてみます まずは、1か月無料のアカウントを作ってレッツト ライ http://azure.microsoft.com/ja-jp/
  11. 11. サンプル・アプリを作ってみる まずはWindowsStoreアプリを新規で作ってみよ う! C#で作りたい方… VisualStudio2013 PRO以上がオススメ (for WindowsとWebできるけどはっきり言って超 面倒) Javascriptで作りたい方… VisualStudio2013 for WindowsでOK
  12. 12. サンプル・アプリを作ってみる 今日はみんな大好き? HTML&Javascriptでサンプルを つついて改造してみます。
  13. 13. サンプル・アプリを作ってみる • ポータル管理からモバイルサービスを作りま す • バックエンドはJavaScript
  14. 14. サンプル・アプリを作ってみる DB完成
  15. 15. サンプル・アプリを作ってみる ①新規でアプリを作成する ②テーブルを作成する (Todoitem) ③JavaScriptでダウンロードす る DLしたファイ ルを つついてみま す
  16. 16. サンプル・アプリを作ってみる わずか、3ステップで完成します^-^v
  17. 17. サンプル・アプリを作ってみる Microsoft Azure 内にある新しいMobile Service にPOST リクエストを送信。 リクエストから来たデータはTodoItem テーブルに 挿入されます。テーブルに保存されたデータは、 Mobile Service から返され、このデータはアプリ ケーションの右のカラムに表示されます。
  18. 18. サンプル・アプリを作ってみる
  19. 19. アプリの改造 せっかくなのでいろいろつついて改造して みました
  20. 20. 表示するアイテムを変えてみる デバッグしてポータルを確認。 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; }); }; ここら辺を いじってみま す
  21. 21. 表示するデータを変えてみる trueをfalseに変えてみる→trueのアイテムのみ表 示todoTable.where({ complete: true }).read~ .where()自体を削除→すべてのデータ表示 todoTable .where()の括弧内が表示する条件になっている。 textに変えてみる→赤というtextのみ表示 todoTable.where({ text: “赤” }).read~
  22. 22. 列を増やしてみる 列を増やしてみます。 Date関数でポストした時の日時を列で追加。 buttonSave.addEventListener("click", function () { var date = new Date(); insertTodoItem({ text: textInput.value, tdate: date, complete: false }); });
  23. 23. 列を増やしてみる 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.htm l
  24. 24. 列を増やしてみる ポータル側からも列の追加・削除ができます。 データ型と 列名を追加
  25. 25. アイテムを削除してみる アプリからも削除したいときは下記のコードを追 記。 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
  26. 26. アイテムを削除してみる ポータルからもアイテムをクリックするだけで削 除できる
  27. 27. データ操作 データ操作はこんな感じでできます。 update…データの更新 del…データの削除 insert…データの挿入 read…データの読込
  28. 28. 処理を挟んでみる 「文字数が5文字以内」でないとデータ挿入できな いようにしてみます。 ポータル→データ→テーブル→スクリプトの挿入のスク リプト 資料参考URL http://azure.microsoft.com/en-us/documentation/articles/mobile- services-windows-store-dotnet-validate-modify-data-server-scripts/
  29. 29. 処理を挟んでみる 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(); }
  30. 30. 処理を挟んでみる 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
  31. 31. 処理を挟んでみる タイムスタンプを付けてみる function insert(item, user, request) { item.stamp = new Date(); request.execute(); } ポータル→挿入
  32. 32. 認証機能もつけられる 認証済みユーザーのみ利用可能というような Mobile Service へのセキュリティをあたえられる 資料参考URL http://azure.microsoft.com/en-us/documentation/articles/mobile- services-windows-store-javascript-get-started-users/?fb=ja-jp
  33. 33. 認証機能もつけられる ①使いたいSNSにアプリを登録しIDを取得す る Microsoft Account Facebook login Twitter login Google login Azure Active Directory
  34. 34. 認証機能もつけられる ②ポータルのIDより各IDを登録
  35. 35. 認証機能もつけられる 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();を書き換え る
  36. 36. 認証機能もつけられる client.login(“facebook”).done(function (results)~ facebook microsoftaccount twitter google windowsazureactived irectory ピンクのとこを書き換えるだ けで お好きなSNSにかえられま す
  37. 37. まとめ ざっと、初心者でもできる AzureMobileService(Javascript)について ご紹介させていただきました。 ご清聴ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×