GDG DevFest Kobe Firebaseハンズオン勉強会

Polymer & Firebase
ハンズオン
おのうえ(@_likr)
2015/10/11 GDG DevFest Kobe Firebaseハンズオン勉強会

自己紹介
• おのうえ（@_likr）
• ng-kyoto、GDG Kobeスタッフ
• 大学院でWebベース可視化システムの研究・開発

今日の目的
• Firebase + Polymerでお手軽
Webアプリ開発を体験してみる

1. 概要
2. 準備
3. Firebase
4. Polymer
5. ﬁrebase-element
6. ﬁrebase-element + Google API
7. もくもく会

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

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

ライブラリ
• AngularFire (AngularJS)
• EmberFire (Ember)
• ReactFire (ReactJS)
• PolymerElement (Polymer)
• Ionic

Polymer
• Google主導のオープンソースフレームワーク 
https://www.polymer-project.org/
• WebComponents + α
• Webアプリ内の再利用性の高い機能を 
コンポーネント化し利用しやすくする仕組み

PolymerElementを使う
$ bower install hoge-element
<!DOCTYPE html>
<html>
<head>
<script
src=“bower_components/webcomponentsjs/webcomponents-lite.js”>
</script>
<link rel=“import”
href=“bower_components/hoge-element/hoge-element.html”>
</head>
<body>
<hoge-element></hoge-element>
</body>
</html>
使用するElementをbowerでインストール
タグとして使用
Custom Elements, HTML ImportsのPolyﬁllをロード
Elementをインポート

Element Catalog
• 公式が配布するPolymerElement集
• https://elements.polymer-project.org/
• マテリアルデザイン、Google API、アニメーショ
ン、EC用フォーム、オフライン…

サンプル
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="bower_components/google-map/google-map.html">
<style>
google-map {
height: 600px;
}
</style>
</head>
<body>
<google-map latitude="34.682933" longitude="135.506919" fit-to-markers>
<google-map-marker latitude="34.682933" longitude="135.506919">
</google-map-marker>
</google-map>
</body>
</html>
index.html
google-mapをインポート
Google Mapを表示
マーカーを作成

PolymerElementを作る
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="my-chart">
<link rel="stylesheet" href="bower_components/nvd3/build/nv.d3.css">
<style>
.view {
width: 600px;
height: 600px;
}
</style>
<template>
<div class="view"><svg id="svg"></svg></div>
</template>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/nvd3/build/nv.d3.js"></script>
<script src="my-chart.js"></script>
</dom-module>
my-chart.html
polymerをインポート
利用側に挿入されるHTML要素を定義
my-chart要素を定義

Polymer({
is: 'my-chart',
ready: function () {
nv.addGraph(() => {
const chart = nv.models.discreteBarChart()
.x((d) => d.label)
.y((d) => d.value)
.staggerLabels(true)
.tooltips(false)
.showValues(true);
d3.select(this.$.svg)
.datum(exampleData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
});
my-chart.js
my-chartの振る舞いを定義
ライフサイクルメソッド

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script
src=“bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="my-chart.html">
</head>
<body>
<my-chart></my-chart>
</body>
</html>
index.html

準備
• Googleアカウントをつくる 
https://accounts.google.com/signup
• Firebaseアカウントをつくる 
https://www.ﬁrebase.com/
• Node.jsをインストールする 
https://nodejs.org/
• Chrome Dev Editorをインストールする 
https://chrome.google.com/webstore/category/apps

Firebase
• リアルタイムデータベースを触ってみる
• デプロイしてみる

プロジェクト作成
Chrome Dev EditorでBlank projectを作成

bower.json
{
"name": "FirebaseHandson01",
"description": "",
"homepage": "",
"keywords": [],
"author": "",
"private": true,
"dependencies": {
"firebase": "~2.3.1"
}
}
作成後、プロジェクトを右クリックして「bower install」
フロントエンドのパッケージ管理ツールbowerを使う 
(Chrome Dev Editorに標準搭載)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<form id="message-form">
<input id="message-input" type="text">
<button type="submit">Update</button>
</form>
</div>
<div>
<p id="date"></p>
<p id="message"></p>
</div>
<script src="bower_components/firebase/firebase.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js

デプロイ
• コマンドラインツールのインストール 
$ npm install -g firebase-tools
• 設定ファイルの初期化 
$ firebase init
• デプロイ 
$ firebase deploy
• ブラウザで開く 
$ firebase open

Polymer
• コードラボやります
• Build Google Maps Using Web Components & No
Code! 
http://www.code-labs.io/codelabs/polymer-maps/
index.html

firebase-element
• コードラボやります
• Interacting with data using the <firebase-element> 
http://www.code-labs.io/codelabs/polymer-firebase/
index.html

訂正
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
this.ref.on('value', function(snapshot) {
this.updateItems(snapshot);
});
};
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
this.ref.on('value', function(snapshot) {
app.updateItems(snapshot);
});
};
https://github.com/googlecodelabs/polymer-ﬁrebase/issues/1
http://www.code-labs.io/codelabs/polymer-ﬁrebase/index.html#4

ﬁrebase-element + Google API
• PolymerFirebaseCodelabの続きから
• FirebaseのOAuthで取得したaccessTokenで 
Google APIにアクセスしてみる
• Google Driveに保存する機能を追加する

ログアウトボタン
<firebase-auth
id="auth"
auto-login
redirect
location="[[firebaseURL]]"
provider="[[firebaseProvider]]"
on-error="onFirebaseError"
on-login="onFirebaseLogin"
on-logout="onFirebaseLogout">
index.html

app.onFirebaseLogout = function (event) {
};
app.login = function (event) {
this.$.auth.login();
};
app.logout = function (event) {
this.$.auth.logout();
};
main.js

app.loggedIn = false;
app.onFirebaseLogin = function (event) {
this.loggedIn = true;
this.ref = new Firebase(this.firebaseURL + '/user/'
+ event.detail.user.uid);
this.ref.on('value', function (snapshot) {
}.bind(this));
};
app.onFirebaseLogout = function (event) {
this.loggedIn = false;
this.items = [];
};

Drive APIの有効化
Google Developers ConsoleからDrive APIを有効化する

scopeを追加
app.firebaseParams = {
scope: "https://www.googleapis.com/auth/drive"
};
<firebase-auth
id="auth"
redirect
location="[[firebaseURL]]"
provider="[[firebaseProvider]]"
params="[[firebaseParams]]"
on-error="onFirebaseError"
on-login="onFirebaseLogin"
on-logout="onFirebaseLogout">
</firebase-auth>

iron-ajax
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<iron-ajax
id="uploadFile"
method="POST"
params="[[requestParams]]"
body="[[requestBody]]"
url="https://www.googleapis.com/upload/drive/v2/files">
iron-ajaxを使ってAPIにリクエストを行う

accessTokenの取得
app.onFirebaseLogin = function (event) {
this.accessToken = event.detail.user.google.accessToken;
this.loggedIn = true;
this.ref = new Firebase(this.firebaseURL + '/user/'
+ event.detail.user.uid);
this.ref.on('value', function (snapshot) {
}.bind(this));
};

アップロードボタン
<paper-button on-click="uploadFile">Upload</paper-icon-button>
app.uploadFile = function (event) {
this.requestParams = {
access_token: this.accessToken,
uploadType: 'media'
};
this.requestBody = this.items.map(function (item) {
return item.text;
}).join('nn');
this.$.uploadFile.generateRequest();
};

ポイント
• FirebaseのOAuth時にscopeを指定する
• Firebaseの認証情報からaccessTokenを取得する
• REST APIにアクセスする

参考情報
• Polymer Codelabs (Polymer Summit2015) 
http://www.code-labs.io/polymer-summit
• Developer Docs - Firebase 
https://www.ﬁrebase.com/docs/

GDG DevFest Kobe Firebaseハンズオン勉強会

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (20)

Similar to GDG DevFest Kobe Firebaseハンズオン勉強会

Similar to GDG DevFest Kobe Firebaseハンズオン勉強会 (20)

More from Yosuke Onoue

More from Yosuke Onoue (10)

Recently uploaded

Recently uploaded (10)

GDG DevFest Kobe Firebaseハンズオン勉強会