GDG DevFest Kobe Firebaseハンズオン勉強会
1 like1,332 views
Polymer & Firebaseハンズオンの資料です
![bower.json
{
"name": "FirebaseHandson01",
"description": "",
"homepage": "",
"keywords": [],
"author": "",
"private": true,
"dependencies": {
"firebase": "~2.3.1"
}
}
作成後、プロジェクトを右クリックして「bower install」
フロントエンドのパッケージ管理ツールbowerを使う
(Chrome Dev Editorに標準搭載)](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-23-320.jpg)
![ログアウトボタン
<firebase-auth
id="auth"
auto-login
redirect
location="[[firebaseURL]]"
provider="[[firebaseProvider]]"
on-error="onFirebaseError"
on-login="onFirebaseLogin"
on-logout="onFirebaseLogout">
index.html](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-36-320.jpg)
![<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していないと入力できないようにする](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-38-320.jpg)
![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 = [];
};](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-39-320.jpg)
![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>](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-41-320.jpg)
![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にリクエストを行う](https://image.slidesharecdn.com/20151011gdgkobe-151011035332-lva1-app6892/85/GDG-DevFest-Kobe-Firebase-42-320.jpg)
GDG DevFest Kobe Firebaseハンズオン勉強会
- 1. Polymer & Firebase ハンズオン おのうえ(@_likr) 2015/10/11 GDG DevFest Kobe Firebaseハンズオン勉強会
- 2. 自己紹介 • おのうえ（@_likr） • ng-kyoto、GDG Kobeスタッフ • 大学院でWebベース可視化システムの研究・開発
- 3. 今日の目的 • Firebase + Polymerでお手軽 Webアプリ開発を体験してみる
- 4. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 5. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 6. Firebase • BaaS (Backend as a Service) • サーバー機能(Web + App + DB)を提供 • サーバー側プログラミング不要 • クライアントはWeb、iOS、Android、RESTが対応 • Google Cloud Platformの一部
- 7. Firebaseの特徴 • Realtime Database • 透過的な保存と更新 • User Authentication • 様々なProviderによるログイン、ログアウト • Static Hosting • HTTP HeaderやRedirectの設定
- 8. ライブラリ • AngularFire (AngularJS) • EmberFire (Ember) • ReactFire (ReactJS) • PolymerElement (Polymer) • Ionic
- 9. Polymer • Google主導のオープンソースフレームワーク https://www.polymer-project.org/ • WebComponents + α • Webアプリ内の再利用性の高い機能を コンポーネント化し利用しやすくする仕組み
- 10. 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をインポート
- 11. Element Catalog • 公式が配布するPolymerElement集 • https://elements.polymer-project.org/ • マテリアルデザイン、Google API、アニメーショ ン、EC用フォーム、オフライン…
- 12. サンプル <!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を表示 マーカーを作成
- 14. 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要素を定義
- 15. 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の振る舞いを定義 ライフサイクルメソッド
- 16. <!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
- 18. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 19. 準備 • 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
- 20. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 22. プロジェクト作成 Chrome Dev EditorでBlank projectを作成
- 23. bower.json { "name": "FirebaseHandson01", "description": "", "homepage": "", "keywords": [], "author": "", "private": true, "dependencies": { "firebase": "~2.3.1" } } 作成後、プロジェクトを右クリックして「bower install」 フロントエンドのパッケージ管理ツールbowerを使う (Chrome Dev Editorに標準搭載)
- 24. <!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
- 25. 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に書き換える
- 28. デプロイ • コマンドラインツールのインストール $ npm install -g firebase-tools • 設定ファイルの初期化 $ firebase init • デプロイ $ firebase deploy • ブラウザで開く $ firebase open
- 29. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 30. Polymer • コードラボやります • Build Google Maps Using Web Components & No Code! http://www.code-labs.io/codelabs/polymer-maps/ index.html
- 31. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 32. firebase-element • コードラボやります • Interacting with data using the <firebase-element> http://www.code-labs.io/codelabs/polymer-firebase/ index.html
- 33. 訂正 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
- 34. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 35. firebase-element + Google API • PolymerFirebaseCodelabの続きから • FirebaseのOAuthで取得したaccessTokenで Google APIにアクセスしてみる • Google Driveに保存する機能を追加する
- 37. app.onFirebaseLogout = function (event) { }; app.login = function (event) { this.$.auth.login(); }; app.logout = function (event) { this.$.auth.logout(); }; main.js
- 38. <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していないと入力できないようにする
- 39. 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 = []; };
- 40. Drive APIの有効化 Google Developers ConsoleからDrive APIを有効化する
- 41. 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>
- 43. 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)); };
- 44. アップロードボタン <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(); };
- 46. ポイント • FirebaseのOAuth時にscopeを指定する • Firebaseの認証情報からaccessTokenを取得する • REST APIにアクセスする
- 47. 1. 概要 2. 準備 3. Firebase 4. Polymer 5. firebase-element 6. firebase-element + Google API 7. もくもく会
- 48. 参考情報 • Polymer Codelabs (Polymer Summit2015) http://www.code-labs.io/polymer-summit • Developer Docs - Firebase https://www.firebase.com/docs/