Mais conteúdo relacionado
Semelhante a AngularFireで楽々バックエンド (20)
AngularFireで楽々バックエンド
- 4. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
4
- 5. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
5
- 6. Firebase
✤ BaaS (Backend as a Service)
✤ サーバー機能(Web + App + DB)を提供
✤ サーバー側プログラミング不要
✤ クライアントはWeb、iOS、Android、RESTが対応
✤ Googleに買収されGoogle Cloud Platformの一部へ
6
- 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
- 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. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
11
- 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. データの保存
✤ 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. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
14
- 15. 対応している認証方法
✤ Email & Password
✤ Facebook
✤ Twitter
✤ GitHub
✤ Google
✤ Anonymous
✤ Custom
✤ Dashboardでオンオフ可能
15
- 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. ログイン / ログアウト
<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. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
18
- 19. デプロイ
$ npm install -g firebase-tools
$ firebase init
$ firebase deploy
{
"firebase": "20150619ngkyoto",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
firebase.json
firebase initで生成され、カスタマイズ可能 19
- 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. 目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
21
- 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