SlideShare a Scribd company logo
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
目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
5
Firebase
✤ BaaS (Backend as a Service)
✤ サーバー機能(Web + App + DB)を提供
✤ サーバー側プログラミング不要
✤ クライアントはWeb、iOS、Android、RESTが対応
✤ Googleに買収されGoogle Cloud Platformの一部へ
6
Firebaseの特徴
✤ Realtime Database
✤ 透過的な保存と更新
✤ User Authentication
✤ 様々なProviderによるログイン、ログアウト
✤ Static Hosting
✤ HTTP HeaderやRedirectの設定
7
料金プラン
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
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
目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
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
目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
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
目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
18
デプロイ
$ npm install -g firebase-tools
$ firebase init
$ firebase deploy
{
"firebase": "20150619ngkyoto",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
firebase.json
firebase 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
目次
✤ Firebase & AngularFireの機能紹介
✤ Realtime Database
✤ User Authentication
✤ Static Hosting
✤ AngularFireを使った実例の紹介
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.firebaseapp.com/
23
まとめ
✤ 便利
✤ Angular & Firebaseによってバックエンド構築、

連携の手間が大幅に軽減
✤ 是非一度お試しを!
24

More Related Content

What's hot

20120405 setsunaセミナー
20120405 setsunaセミナー20120405 setsunaセミナー
20120405 setsunaセミナー
Takahiro Iwase
 

What's hot (20)

Elasticsearch at CrowdWorks
Elasticsearch at CrowdWorksElasticsearch at CrowdWorks
Elasticsearch at CrowdWorks
 
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
 
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道
 
EmbulkのGCS/BigQuery周りのプラグインについて
EmbulkのGCS/BigQuery周りのプラグインについてEmbulkのGCS/BigQuery周りのプラグインについて
EmbulkのGCS/BigQuery周りのプラグインについて
 
Elasticsearch at Makuake
Elasticsearch at MakuakeElasticsearch at Makuake
Elasticsearch at Makuake
 
Spring data-rest-and-spring-cloud-contract
Spring data-rest-and-spring-cloud-contractSpring data-rest-and-spring-cloud-contract
Spring data-rest-and-spring-cloud-contract
 
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale Datasets
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale DatasetsCAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale Datasets
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale Datasets
 
20181031 springfest spring data geode
20181031 springfest spring data geode20181031 springfest spring data geode
20181031 springfest spring data geode
 
Elasticsearch Authプラグインでアクセスコントロール
Elasticsearch AuthプラグインでアクセスコントロールElasticsearch Authプラグインでアクセスコントロール
Elasticsearch Authプラグインでアクセスコントロール
 
SQLによるDynamoDBの操作
SQLによるDynamoDBの操作SQLによるDynamoDBの操作
SQLによるDynamoDBの操作
 
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
 
ElasticSearch勉強会 第6回
ElasticSearch勉強会 第6回ElasticSearch勉強会 第6回
ElasticSearch勉強会 第6回
 
Elasticsearchで作る形態素解析サーバ
Elasticsearchで作る形態素解析サーバElasticsearchで作る形態素解析サーバ
Elasticsearchで作る形態素解析サーバ
 
20120405 setsunaセミナー
20120405 setsunaセミナー20120405 setsunaセミナー
20120405 setsunaセミナー
 
グラフデータベースNeo4Jでアセットダウンロードの構成管理と最適化
グラフデータベースNeo4Jでアセットダウンロードの構成管理と最適化グラフデータベースNeo4Jでアセットダウンロードの構成管理と最適化
グラフデータベースNeo4Jでアセットダウンロードの構成管理と最適化
 
ログ管理のベストプラクティス
ログ管理のベストプラクティスログ管理のベストプラクティス
ログ管理のベストプラクティス
 
トレジャーデータ新サービス発表 2013/12/9
トレジャーデータ新サービス発表 2013/12/9トレジャーデータ新サービス発表 2013/12/9
トレジャーデータ新サービス発表 2013/12/9
 
Introduction to DocumentDB
Introduction to DocumentDBIntroduction to DocumentDB
Introduction to DocumentDB
 
PHPコードではなく PHPコードの「書き方」を知る
PHPコードではなく PHPコードの「書き方」を知るPHPコードではなく PHPコードの「書き方」を知る
PHPコードではなく PHPコードの「書き方」を知る
 
MySQLユーザ視点での小さく始めるElasticsearch
MySQLユーザ視点での小さく始めるElasticsearchMySQLユーザ視点での小さく始めるElasticsearch
MySQLユーザ視点での小さく始めるElasticsearch
 

Viewers also liked

CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5
Yosuke Onoue
 
Rsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしいRsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしい
Yosuke Onoue
 
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
Yosuke Onoue
 
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
智啓 出川
 
社会的決定とAHP
社会的決定とAHP社会的決定とAHP
社会的決定とAHP
Yosuke Onoue
 
GPGPU Seminar (GPGPU and CUDA Fortran)
GPGPU Seminar (GPGPU and CUDA Fortran)GPGPU Seminar (GPGPU and CUDA Fortran)
GPGPU Seminar (GPGPU and CUDA Fortran)
智啓 出川
 

Viewers also liked (20)

AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
 
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
 
あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
Idcon11 implicit demo
Idcon11 implicit demoIdcon11 implicit demo
Idcon11 implicit demo
 
CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5CUDA 6の話@関西GPGPU勉強会#5
CUDA 6の話@関西GPGPU勉強会#5
 
Rsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしいRsa暗号で彼女が出来るらしい
Rsa暗号で彼女が出来るらしい
 
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
 
教育機関でのJetsonの活用の可能性
教育機関でのJetsonの活用の可能性教育機関でのJetsonの活用の可能性
教育機関でのJetsonの活用の可能性
 
Cuda fortranの利便性を高めるfortran言語の機能
Cuda fortranの利便性を高めるfortran言語の機能Cuda fortranの利便性を高めるfortran言語の機能
Cuda fortranの利便性を高めるfortran言語の機能
 
GPGPU Education at Nagaoka University of Technology: A Trial Run
GPGPU Education at Nagaoka University of Technology: A Trial RunGPGPU Education at Nagaoka University of Technology: A Trial Run
GPGPU Education at Nagaoka University of Technology: A Trial Run
 
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
GPGPU Seminar (Accelerataion of Lattice Boltzmann Method using CUDA Fortran)
 
社会的決定とAHP
社会的決定とAHP社会的決定とAHP
社会的決定とAHP
 
GPGPU Seminar (GPGPU and CUDA Fortran)
GPGPU Seminar (GPGPU and CUDA Fortran)GPGPU Seminar (GPGPU and CUDA Fortran)
GPGPU Seminar (GPGPU and CUDA Fortran)
 
Anaconda & NumbaPro 使ってみた
Anaconda & NumbaPro 使ってみたAnaconda & NumbaPro 使ってみた
Anaconda & NumbaPro 使ってみた
 
Polymerやってみた
PolymerやってみたPolymerやってみた
Polymerやってみた
 
20160717 dikf
20160717 dikf20160717 dikf
20160717 dikf
 
Angular 2のRenderer
Angular 2のRendererAngular 2のRenderer
Angular 2のRenderer
 
GDG DevFest Kobe Firebaseハンズオン勉強会
GDG DevFest Kobe Firebaseハンズオン勉強会GDG DevFest Kobe Firebaseハンズオン勉強会
GDG DevFest Kobe Firebaseハンズオン勉強会
 
PGI CUDA FortranとGPU最適化ライブラリの一連携法
PGI CUDA FortranとGPU最適化ライブラリの一連携法PGI CUDA FortranとGPU最適化ライブラリの一連携法
PGI CUDA FortranとGPU最適化ライブラリの一連携法
 

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

ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
 
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
 
ハイブリッドアプリへのLocalytics導入ガイド
ハイブリッドアプリへのLocalytics導入ガイドハイブリッドアプリへのLocalytics導入ガイド
ハイブリッドアプリへのLocalytics導入ガイド
LocalyticsJP
 
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
 

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

ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
 
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
 
ハイブリッドアプリへのLocalytics導入ガイド
ハイブリッドアプリへのLocalytics導入ガイドハイブリッドアプリへのLocalytics導入ガイド
ハイブリッドアプリへのLocalytics導入ガイド
 
AWS SDK for Smalltalk
AWS SDK for SmalltalkAWS SDK for Smalltalk
AWS SDK for Smalltalk
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
 
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
 
UnicastWS vol.2
UnicastWS vol.2UnicastWS vol.2
UnicastWS vol.2
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
 
1Day works shop
1Day works shop1Day works shop
1Day works shop
 
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話 Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
 
iOS WebView App
iOS WebView AppiOS WebView App
iOS WebView App
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
 
Rails3.1rc4を試してみた
Rails3.1rc4を試してみたRails3.1rc4を試してみた
Rails3.1rc4を試してみた
 
WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話
 
Browser Computing Structure
Browser Computing StructureBrowser Computing Structure
Browser Computing Structure
 
Couch Db勉強会0623 by yssk22
Couch Db勉強会0623 by yssk22Couch Db勉強会0623 by yssk22
Couch Db勉強会0623 by yssk22
 
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
 

More from Yosuke Onoue (9)

アニメーション(のためのパフォーマンス)の基礎知識
アニメーション(のためのパフォーマンス)の基礎知識アニメーション(のためのパフォーマンス)の基礎知識
アニメーション(のためのパフォーマンス)の基礎知識
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーションAngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
 
PythonistaがOCamlを実用する方法
PythonistaがOCamlを実用する方法PythonistaがOCamlを実用する方法
PythonistaがOCamlを実用する方法
 
What's New In Python 3.3をざっと眺める
What's New In Python 3.3をざっと眺めるWhat's New In Python 3.3をざっと眺める
What's New In Python 3.3をざっと眺める
 
PyOpenCLによるGPGPU入門
PyOpenCLによるGPGPU入門PyOpenCLによるGPGPU入門
PyOpenCLによるGPGPU入門
 
数理最適化とPython
数理最適化とPython数理最適化とPython
数理最適化とPython
 
201010ksmap
201010ksmap201010ksmap
201010ksmap
 
PyCUDAの紹介
PyCUDAの紹介PyCUDAの紹介
PyCUDAの紹介
 

Recently uploaded

2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
 

Recently uploaded (12)

論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 

AngularFireで楽々バックエンド

  • 1. 2015/06/19 Angular Meetup Kyoto #1 AngularFireで楽々バックエンド おのうえ (@_likr) 1
  • 2. 自己紹介 ✤ おのうえ(@_likr) ✤ ng-kyoto & GDG神戸スタッフ ✤ フロントエンド技術で可視化システムの構築 ✤ WebAssembly気になる 2
  • 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
  • 7. Firebaseの特徴 ✤ Realtime Database ✤ 透過的な保存と更新 ✤ User Authentication ✤ 様々なProviderによるログイン、ログアウト ✤ Static Hosting ✤ HTTP HeaderやRedirectの設定 7
  • 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. AngularFire ✤ AngularJS用Firebase純正クライアントライブラリ ✤ AngularJSのライフサイクルに適したコールバック処理 ✤ OAuthなどのユーザー認証コードもシンプル ✤ Angular Moduleとしての完成度が高い! 9
  • 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
  • 24. まとめ ✤ 便利 ✤ Angular & Firebaseによってバックエンド構築、
 連携の手間が大幅に軽減 ✤ 是非一度お試しを! 24