Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)

5,078 views

Published on

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

現場 Live Demo Code
https://github.com/doggy8088/jsdc2016-ng2-firebase

Published in: Technology
  • Be the first to comment

使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)

  1. 1. 使用 Angular 2 與 Firebase 實現 Serverless 網站架構 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. 簡介 Firebase Firebase Introduction
  3. 3. https://firebase.google.com/ 一個基於 BaaS (Backend as a Service) 的雲端服務 方便用來建立 Mobile 與 Web 應用程式 產品眾多,但主要產品為 Realtime Database (即時資料庫) 也有 Firebase Hosting 用來放置靜態網頁與網頁相關檔案 什麼是 Google Firebase 服務
  4. 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. 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. 6. 簡介 Serverless 架構 Serverless Architecture
  7. 7. 無伺服器 不需要維護伺服器 不用管有多少伺服器 強迫以分散式架構進行軟體設計 Backend as a Service ( BaaS ) Function as a Service ( FaaS ) • AWS Lambda / Azure Functions 什麼是 Serverless 架構? http://martinfowler.com/articles/serverleshs.html
  8. 8. 傳統的 Server 架構 http://martinfowler.com/articles/serverleshs.html
  9. 9. 新穎的 Serverless 架構 http://martinfowler.com/articles/serverleshs.html
  10. 10. Angular 2 與 Firebase 快速上手 Angular 2 and Firebase Quick Start
  11. 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. 12. 使用 npm 安裝套件 $ npm install firebase angularfire2 --save 使用 yarn 安裝套件 $ yarn add firebase angularfire2 安裝 Firebase 相關 npm 套件
  13. 13. 請到 https://console.firebase.google.com/ 登入主控台 建立新專案 & 調整 Realtime Database 的存取權限 將 Firebase 加入您的網路應用程式 ( 複製 firebase 設定 ) 匯入 AngularFireModule 至 AppModule
  14. 14. 匯入 AngularFireModule 至 AppModule
  15. 15. 編輯 src/typings.d.ts 檔案 /// <reference path="../node_modules/firebase/firebase.d.ts" /> 加入 firebase 模組定義檔參考 Cannot find namespace 'firebase'. · Issue #234 · angular/angularfire2 (崩潰的討論串)
  16. 16. 匯入型別 import { AngularFire, FirebaseListObservable } from 'angularfire2'; 注入 AngularFire 元件 constructor(af: AngularFire) {} 在元件中注入 AngularFire 服務
  17. 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. 18. 直接透過 push 新增物件進去 var data = this.items$.push({ name: 'Will', description: 'Hello World' }); var key = data.key; 新增資料
  19. 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. 20. <ul> <li *ngFor="let item of items | async"> {{item.$key}} - {{item.$value}} {{item.name}} </li> </ul> 輸出資料到頁面上 自動訂閱 / 取消訂閱 Observable 序列中的資料 如果是原始型別,必須 透過 $value 屬性取得資料 如果是物件型別,可以 透過屬性名稱取得資料
  21. 21. 刪除資料 this.items$.map(items => items[0]) .subscribe(item => this.item$ = item); this.item$.remove(); 刪除一筆資料 this.af.database.object('items/'+item.$key) .remove(); 刪除資料
  22. 22. 部分欄位更新 this.item$.update({ name: 'NEW VALUE' }); 取代整筆資料 this.item$.set({ name: 'NEW VALUE' }); 更新資料
  23. 23. 發佈 Angular 2 應用程式 Deploy Angular 2 Apps into Firebase Hosting
  24. 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. 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. 26. Thank you
  27. 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 聯絡資訊

×