[Firebase 學習筆記] 初心者的 5 分鐘教學

Firebase是一種協助開發者處理數據的雲端應用服務，其透過引入API的函式庫或是使用Restful API來進行數據資料的操作，只要簡單幾行前端（HTML + CSS + JavaScript）的程式碼便可輕鬆開發出即時（real-time）的應用服務（不需要用到後端程式，所以有資安疑慮的資料還是要注意，若需要也可以整合後端程式碼）。這樣可以讓工程師專注在產品的開發，而不用擔心後端程式資料串接的細節問題，持續完善整個產品的使用者體驗。



在Firebase的官方網站上也有提供許多的互動式教學，以下透過官網上的 5 minute tutorial 來讓大家實際體驗Firebase神奇之處吧！



JS Bin

Step 2：連結存取Data的URL位置（註冊帳號後可以創建App所對應的Data URL）
在Firebase存取資料是透過連結獨立網址進行存取，此例使用：

https://msl7tpfpta0.firebaseio-demo.com/

var myDataRef = new Firebase('https://msl7tpfpta0.firebaseio-demo.com/');

Firebase核心概念即是每一單元的Data都有對應的獨立URL，可以透過以下三種方式存取：
1. 藉由Firebase客戶端函式庫（目前範例）
2. 透過 REST API（支援多種程式語言）
3. 透過網址由瀏覽器觀看
JS Bin

Step 3：寫入資料
透過set方法可以寫入資料，此例為透過使用者於表單輸入資料後按確認鍵（Enter），可以寫入資料到Firebase（Firebase 和JS物件一樣支持 number, boolean, and string 資料型態）：

myDataRef.set('User ' + name + ' says ' + text);

JS Bin

Step 4：使用物件寫法
亦可以使用物件寫法寫入資料，方便閱讀：

myDataRef.set({name: name, text: text});

JS Bin on jsbin.com

Step 5：寫入Lists
Firebase同樣也支援list寫法，所以可以透過push方法，新增多個object到同一list中，且Firebase使用 chronologically-ordered、globally-unique IDs當做key，不用擔心衝突問題。
JS Bin

Step 6：擷取資料
當我們寫入資料時，將會在所連結的Firebase 位置下創造出一個Child，所以此處取資料時將監聽 child_added 事件（共有五種事件：1. Value、2. Child Added、3. Child Changed、4. Child Removed、5. Child Moved），亦即當資料寫入後 callback function 將執行後續動作。
JS Bin

Step 7：使用回傳資料Snapshots
使用jQuery將callback function傳回的資料渲染在瀏覽器上。當你完成這一步後，先給自己一些鼓勵吧，你已經運用Firebase建立了一個real-time的應用程式了呢！
JS Bin