AngularFireで楽々バックエンド

2015/06/19 Angular Meetup Kyoto #1
AngularFireで楽々バックエンド
おのうえ (@_likr)
1

自己紹介
✤ おのうえ(@_likr)
✤ ng-kyoto & GDG神戸スタッフ
✤ フロントエンド技術で可視化システムの構築
✤ WebAssembly気になる
2

今日の内容
✤ Firebaseでできることをふわっと紹介
✤ AngularJSとの連携方法の紹介
✤ Firebaseの手軽さ、便利さを伝えたい！
3

目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
4

目次
✤ Static Hosting
5

Firebase
✤ BaaS (Backend as a Service)
✤ サーバー機能(Web + App + DB)を提供
✤ サーバー側プログラミング不要
✤ クライアントはWeb、iOS、Android、RESTが対応
✤ Googleに買収されGoogle Cloud Platformの一部へ
6

Firebaseの特徴
✤ 透過的な保存と更新
✤ 様々なProviderによるログイン、ログアウト
✤ Static Hosting
✤ HTTP HeaderやRedirectの設定
7

料金プラン
Hacker Candle Bonﬁre 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

AngularFire
✤ AngularJS用Firebase純正クライアントライブラリ
✤ AngularJSのライフサイクルに適したコールバック処理
✤ OAuthなどのユーザー認証コードもシンプル
✤ Angular Moduleとしての完成度が高い！
9

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

目次
✤ Static Hosting
11

データの取得
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

データの保存
✤ 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

目次
✤ Static Hosting
14

対応している認証方法
✤ Email & Password
✤ Facebook
✤ Twitter
✤ GitHub
✤ Google
✤ Anonymous
✤ Custom
✤ Dashboardでオンオフ可能
15

ログイン / ログアウト
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

ログイン / ログアウト
<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

目次
✤ Static Hosting
18

デプロイ
$ npm install -g firebase-tools
$ firebase init
$ firebase deploy
{
"firebase": "20150619ngkyoto",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
ﬁrebase.json
ﬁrebase initで生成され、カスタマイズ可能 19

サーバー設定例
✤ 同一オリジン制約対策
✤ 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

目次
✤ Static Hosting
21

システム構成
✤ 室温モニター 
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

https://vizlab-thermometer.ﬁrebaseapp.com/
23

まとめ
✤ 便利
✤ Angular & Firebaseによってバックエンド構築、 
連携の手間が大幅に軽減
✤ 是非一度お試しを！
24

AngularFireで楽々バックエンド

More Related Content

AngularFireで楽々バックエンド