前端工程師看似光鮮亮麗，可以做出任何想要的功能與介面，不過當碰到後端技術與各式資料庫，許多人就會立刻投降，乖乖等待後端工程師將 API 寫好才能繼續開發。否則，你就要開始研究另一個全新的後端開發世界，往全端工程師邁進。不過一個人的時間資源有限，你在一個地方獲得，就會在另一個地方失去。有鑑於最近正夯的 Serverless (無伺服器) 架構正在興起，本次演講我將示範如何利用 Angular 2 搭配 Google Firebase 打造一個無伺服器的網站開發架構，用純前端技術就能打造出完整又即時的網站。 現場 Live Demo Code https://github.com/doggy8088/jsdc2016-ng2-firebase

1. 使用 Angular 2 與 Firebase
實現 Serverless 網站架構
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. 簡介 Firebase
Firebase Introduction

3. https://firebase.google.com/
一個基於 BaaS (Backend as a Service) 的雲端服務
方便用來建立 Mobile 與 Web 應用程式
產品眾多，但主要產品為 Realtime Database (即時資料庫)
也有 Firebase Hosting 用來放置靜態網頁與網頁相關檔案
什麼是 Google Firebase 服務

4. 2011 年由 Envolve 公司開始 ( founded by Tamplin and Lee )
• 最早主要提供線上聊天室的 API 供其他網站進行功能整合
• 發行之後發現許多人並不用 Firebase 來當成聊天用途
• 早期使用者開始用來當成多人即時狀態同步的利器
2012 年 4 月改成立 Firebase 公司
• 2012 年 5 月募資 $1.4 million
• 2013 年 6 月募資 $5.6 million
2014 年 10 月 21 日 Firebase 公司被 Google 收購
關於 Google Firebase

5. Google Firebase 的服務
分析 (Analytics)
• Firebase Analytics
成長 (Grow)
• Firebase Notifications
• Firebase App Indexing
• Firebase Dynamic Links
• Firebase Invites
開發 (Develop)
• Firebase Cloud Messaging
• Firebase Auth
• Realtime Database
• Firebase Storage
• Firebase Hosting
• Firebase Remote Config
• Firebase Test Lab for Android
• Firebase Crash Reporting

6. 簡介 Serverless 架構
Serverless Architecture

7. 無伺服器
不需要維護伺服器
不用管有多少伺服器
強迫以分散式架構進行軟體設計
Backend as a Service ( BaaS )
Function as a Service ( FaaS )
• AWS Lambda / Azure Functions
什麼是 Serverless 架構？
http://martinfowler.com/articles/serverleshs.html

8. 傳統的 Server 架構
http://martinfowler.com/articles/serverleshs.html

9. 新穎的 Serverless 架構
http://martinfowler.com/articles/serverleshs.html

10. Angular 2 與 Firebase 快速上手
Angular 2 and Firebase Quick Start

11. 驗證 ng 版本
$ ng -v
angular-cli: 1.0.0-beta.17
node: 6.8.1
os: win32 x64
建立初始專案
$ ng new jsdc2016 --skip-npm
$ cd jsdc2016
$ yarn
使用 Angular CLI 快速建立專案範本

12. 使用 npm 安裝套件
$ npm install firebase angularfire2 --save
使用 yarn 安裝套件
$ yarn add firebase angularfire2
安裝 Firebase 相關 npm 套件

13. 請到 https://console.firebase.google.com/ 登入主控台
建立新專案 & 調整 Realtime Database 的存取權限
將 Firebase 加入您的網路應用程式 ( 複製 firebase 設定 )
匯入 AngularFireModule 至 AppModule

14. 匯入 AngularFireModule 至 AppModule

15. 編輯 src/typings.d.ts 檔案
/// <reference path="../node_modules/firebase/firebase.d.ts" />
加入 firebase 模組定義檔參考
Cannot find namespace 'firebase'. · Issue #234 · angular/angularfire2 (崩潰的討論串)

16. 匯入型別
import { AngularFire, FirebaseListObservable }
from 'angularfire2';
注入 AngularFire 元件
constructor(af: AngularFire) {}
在元件中注入 AngularFire 服務

17. 宣告取值的屬性
items$: FirebaseListObservable<any[]>;
item$: FirebaseObjectObservable<any>;
從 Firebase 取得多筆資料 (Observable)
this.items$ = af.database.list('items');
從 Firebase 取得單筆資料 (Observable)
this.item$ = af.database.object('items/-KUxx');
取得資料路徑參考

18. 直接透過 push 新增物件進去
var data = this.items$.push({
name: 'Will',
description: 'Hello World'
});
var key = data.key;
新增資料

19. 從 Firebase 取得多筆資料 (Observable)
this.items$.subscribe(items => {
console.log(items);
});
從 Firebase 取得單筆資料 (Observable)
this.item$.subscribe(item => {
console.log(item);
});
this.item$.subscribe(console.log);
讀取資料

20. <ul>
<li *ngFor="let item of items | async">
{{item.$key}} - {{item.$value}}
{{item.name}}
</li>
</ul>
輸出資料到頁面上
自動訂閱 / 取消訂閱
Observable 序列中的資料
如果是原始型別，必須
透過 $value 屬性取得資料
如果是物件型別，可以
透過屬性名稱取得資料

21. 刪除資料
this.items$.map(items => items[0])
.subscribe(item => this.item$ = item);
this.item$.remove();
刪除一筆資料
this.af.database.object('items/'+item.$key)
.remove();
刪除資料

22. 部分欄位更新
this.item$.update({
name: 'NEW VALUE'
});
取代整筆資料
this.item$.set({
name: 'NEW VALUE'
});
更新資料

23. 發佈 Angular 2 應用程式
Deploy Angular 2 Apps into Firebase Hosting

24. 大致步驟
• 建立 Firebase 專案
• https://console.firebase.google.com/
• 安裝 Firebase CLI
• npm install -g firebase-tools
• 進入專案根目錄資料夾
• firebase login
• firebase init
• firebase use --add
• firebase deploy
• 測試網頁執行
• http://<YOUR-FIREBASE-APP>.firebaseapp.com
• 設定網站自訂域名
發布到 Firebase Hosting

25. 相關連結
AngularFire2 GitHub
https://github.com/angular/angularfire2
AngularFire2 Documentation
https://github.com/angular/angularfire2/tree/master/docs
Google Firebase
https://firebase.google.com/
Documentation | Firebase
https://firebase.google.com/docs/

26. Thank you

27. The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
• http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
• http://www.facebook.com/will.fans
Will 保哥的噗浪
• http://www.plurk.com/willh/invite
Will 保哥的推特
• https://twitter.com/Will_Huang
聯絡資訊