Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularFireで楽々バックエンド

3,765 views

Published on

GoogleのBaaS (Backend as a Service)であるFirebaseとAngularで楽々にリアルタイムWebアプリケーションを構築する方法を紹介します。

Published in: Technology
  • Login to see the comments

AngularFireで楽々バックエンド

  1. 1. 2015/06/19 Angular Meetup Kyoto #1 AngularFireで楽々バックエンド おのうえ (@_likr) 1
  2. 2. 自己紹介 ✤ おのうえ(@_likr) ✤ ng-kyoto & GDG神戸スタッフ ✤ フロントエンド技術で可視化システムの構築 ✤ WebAssembly気になる 2
  3. 3. 今日の内容 ✤ Firebaseでできることをふわっと紹介 ✤ AngularJSとの連携方法の紹介 ✤ Firebaseの手軽さ、便利さを伝えたい! 3
  4. 4. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 4
  5. 5. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 5
  6. 6. Firebase ✤ BaaS (Backend as a Service) ✤ サーバー機能(Web + App + DB)を提供 ✤ サーバー側プログラミング不要 ✤ クライアントはWeb、iOS、Android、RESTが対応 ✤ Googleに買収されGoogle Cloud Platformの一部へ 6
  7. 7. Firebaseの特徴 ✤ Realtime Database ✤ 透過的な保存と更新 ✤ User Authentication ✤ 様々なProviderによるログイン、ログアウト ✤ Static Hosting ✤ HTTP HeaderやRedirectの設定 7
  8. 8. 料金プラン Hacker Candle Bonfire Blaze Inferno Price (per month) Free $49 $149 $449 $1499 Connectoins 50 200 750 2500 10000 DB Transfer 5 GB 20 GB 75 GB 250 GB 1 TB DB Storage 100 MB 3 GB 10 GB 30 GB 100 GB Hosting Transfer 100 GB 1 TB 1 TB 1 TB 1 TB Hosting Storage 1 GB 10 GB 10 GB 10 GB 1 GB Custom Domain × ○ ○ ○ ○ No Hard Limits × ○ ○ ○ ○ Private backups × × ○ ○ ○ 8
  9. 9. AngularFire ✤ AngularJS用Firebase純正クライアントライブラリ ✤ AngularJSのライフサイクルに適したコールバック処理 ✤ OAuthなどのユーザー認証コードもシンプル ✤ Angular Moduleとしての完成度が高い! 9
  10. 10. AngularFireを使う準備 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>AngularFiree Example</title> </head> <body ng-app="example"> <div ng-view></div> <script src="firebase.js"></script> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="angularfire.js"></script> <script src="example.js"></script> </body> </html> var MainController = function () { }; angular.module('example', ['ngRoute', 'firebase']); angular.module('example').config(function ($routeProvider, $locationProvider) { $routeProvider .when('/main', { controller: MainController, controllerAs: 'main', templateUrl: 'main.html' }) .otherwise(‘/main'); $locationProvider.html5Mode(false); }); index.html example.js 10
  11. 11. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 11
  12. 12. データの取得 var MainController = function ($firebaseObject, $firebaseArray) { var base = 'https://20150619ngkyoto.firebaseio.com/'; var arrRef = new Firebase(base + 'arr'); this.arr = $firebaseArray(arrRef); var objRef = new Firebase(base + 'obj'); this.obj = $firebaseObject(objRef); }; <h3>Synchronized Array</h3> <p ng-repeat="item in main.arr">{{item.value}}</p> <h3>Synchronized Object</h3> <p>name: {{main.obj.name}}</p> main.html example.js データストア (Firebase Dashboard) 実行結果 $firebaseObjectと$firebaseArrayをDI URLからrefを取得 refをラップ ✤ $firebaseObject、$firebaseArrayを使う 12
  13. 13. データの保存 ✤ obj.$save() ✤ arr.$add() <input ng-model="main.obj.name" ng-change="main.obj.$save()"/> main.html <button ng-click="main.arr.$add({value: 'new value'})">add</button> main.html 保存したデータはFirebase serverに同期され、 他のクライアントへも即座に反映される 13
  14. 14. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 14
  15. 15. 対応している認証方法 ✤ Email & Password ✤ Facebook ✤ Twitter ✤ GitHub ✤ Google ✤ Anonymous ✤ Custom ✤ Dashboardでオンオフ可能 15
  16. 16. ログイン / ログアウト var MainController = function ($firebaseObject, $firebaseArray, auth, authStatus) { var base = 'https://20150619ngkyoto.firebaseio.com/'; var refArr = new Firebase(base + 'arr'); this.arr = $firebaseArray(refArr); var refObj = new Firebase(base + 'obj'); this.obj = $firebaseObject(refObj); this.auth = auth; var that = this; this.auth.$onAuth(function (res) { that.authStatus = res; }); }; MainController.prototype.login = function () { this.auth.$authWithOAuthPopup('google'); }; MainController.prototype.logout = function () { this.auth.$unauth(); }; angular.module('example').factory('auth', function ($firebaseAuth) { var ref = new Firebase('https://20150619ngkyoto.firebaseio.com/'); return $firebaseAuth(ref); }); ログイン ログアウト ログイン情報の更新 example.js 16
  17. 17. ログイン / ログアウト <div ng-if="!main.authStatus"> <p>Anonymous User</p> <button ng-click="main.login()">login</button> </div> <div ng-if="main.authStatus"> <p>{{main.authStatus.google.displayName}}</p> <button ng-click="main.logout()">logout</button> </div> angular.module('example').config(function ($routeProvider, $locationProvider) { $routeProvider .when('/main', { controller: MainController, controllerAs: 'main', templateUrl: 'main.html', resolve: { authStatus: function (auth) { return auth.$waitForAuth(); } } }) .otherwise('/main'); $locationProvider.html5Mode(false); }); example.js main.html ページ遷移前にログイン状態の取得 $requireAuth()だとログイン必須 17
  18. 18. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 18
  19. 19. デプロイ $ npm install -g firebase-tools $ firebase init $ firebase deploy { "firebase": "20150619ngkyoto", "public": ".", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } firebase.json firebase initで生成され、カスタマイズ可能 19
  20. 20. サーバー設定例 ✤ 同一オリジン制約対策 ✤ CORS対応 ✤ html5Mode対応 "rewrites": [{ "source": "**", "destination": "/index.html" }] "headers": [{ "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)", "headers" : [ { "key" : "Access-Control-Allow-Origin", "value" : "*" } ] }] "redirects": [ { "source" : "/foo", "destination" : "/bar", "type" : 301 }] 20
  21. 21. 目次 ✤ Firebase & AngularFireの機能紹介 ✤ Realtime Database ✤ User Authentication ✤ Static Hosting ✤ AngularFireを使った実例の紹介 21
  22. 22. システム構成 ✤ 室温モニター
 https://github.com/likr/vizlab-thermometer curl -s -X POST -d "{"timestamp": {".sv": "timestamp"}, "temperature": $1}" ’https://vizlab-thermometer.firebaseio.com/records.json' Raspberry PI 温度センサー .factory('records', ($firebaseArray) => { const ref = new Firebase(url); return $firebaseArray(ref); }) records.$loaded().then(() => { loaded = true; draw(); }); records.$watch(() => { if (loaded) { draw(); } }); Firebase AngularJS D3.js Factory Controller REST APIAngularFire 22
  23. 23. https://vizlab-thermometer.firebaseapp.com/ 23
  24. 24. まとめ ✤ 便利 ✤ Angular & Firebaseによってバックエンド構築、
 連携の手間が大幅に軽減 ✤ 是非一度お試しを! 24

×