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で楽々バックエンド

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to AngularFireで楽々バックエンド

Similar to AngularFireで楽々バックエンド (20)

More from Yosuke Onoue

More from Yosuke Onoue (9)

Recently uploaded

Recently uploaded (9)

AngularFireで楽々バックエンド