gdg devfest kobe firebaseハンズオン勉強会
TRANSCRIPT
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. firebase-element
6. firebase-element + Google API
7. もくもく会
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-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のPolyfillをロード
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.jsmy-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
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
準備• Googleアカウントをつくる
https://accounts.google.com/signup
• Firebaseアカウントをつくるhttps://www.firebase.com/
• Node.jsをインストールするhttps://nodejs.org/
• Chrome Dev Editorをインストールするhttps://chrome.google.com/webstore/category/apps
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
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
var firebaseURL = 'https://<your-app-id>.firebaseio.com'; var ref = new Firebase(firebaseURL + '/message');
ref.on('value', function (snapshot) { var message = snapshot.val(); if (message) { document.getElementById('date').innerHTML = new Date(message.date); document.getElementById('message').innerHTML = message.message; } });
document.getElementById('message-form') .addEventListener('submit', function (event) { event.preventDefault(); ref.set({ message: document.getElementById('message-input').value, date: Firebase.ServerValue.TIMESTAMP }); });
main.js 各自のアプリケーションIDに書き換える
デプロイ• コマンドラインツールのインストール$ npm install -g firebase-tools
• 設定ファイルの初期化$ firebase init
• デプロイ$ firebase deploy
• ブラウザで開く$ firebase open
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
Polymer
• コードラボやります
• Build Google Maps Using Web Components & No Code!http://www.code-labs.io/codelabs/polymer-maps/index.html
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
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-firebase/issues/1
http://www.code-labs.io/codelabs/polymer-firebase/index.html#4
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
firebase-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
<link rel="import" href="bower_components/paper-button/paper-button.html">
paper-buttonのimportを追加
<paper-button on-click="login">Login</paper-button> <paper-button on-click="logout">Logout</paper-button>
paper-buttonを追加
<paper-input value="{{newItemValue}}" placeholder="Enter you item here…" disabled="[[!loggedIn]]"> </paper-input>
loginしていないと入力できないようにする
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) { this.updateItems(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) { this.updateItems(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('\n\n'); this.$.uploadFile.generateRequest(); };
ポイント
• FirebaseのOAuth時にscopeを指定する
• Firebaseの認証情報からaccessTokenを取得する
• REST APIにアクセスする
1. 概要
2. 準備
3. Firebase
4. Polymer
5. firebase-element
6. firebase-element + Google API
7. もくもく会
参考情報
• Polymer Codelabs (Polymer Summit2015) http://www.code-labs.io/polymer-summit
• Developer Docs - Firebasehttps://www.firebase.com/docs/