下列練習步驟參考Firebase Documentation,以For Web的Get Started Guide開始...
- 假設你已開通帳號,那就直接進入Firebase控制台建立新專案。
- 新專案建立後,進入該專案的管理畫面,首先看到的Overview部分有個"將 Firebase 加入您的網路應用程式",點選</>,進行註冊應用程式的程序,然後就可得到引入Firebase JavaScript SDK來使用Authentication、Storage、Realtime Database的初始設定語法,你看到的程式碼內容像是的這篇Add Firebase to your Web Project的說明。
- 新專案裡面的資料庫預設是需要通過驗證才能存取的,可以參考這篇Get Started with Database Rules的說明。為了讓第一次測試不要耗在使用者驗證關卡,暫時就先設定為PUBLIC的狀態。
- 然後我們就可以試著寫入資料,參考這篇Save Data on the Web說明,以set()將資料寫入。可參考放在JSFiddle或JSBin的程式碼,將初始設定語法改成你自己的版本(因為先前設定為PUBLIC狀態而只要有databaseURL那行即可),然後執行看看,應該會看到專案裡面的資料庫已經寫入一個名為slide物件,裡面包含currentslideX與currentslideY兩個資料。
- 前述操作如有不清楚的,也可以參考別人寫的Firebase 心得(Started)、Firebase 心得(Realtime Database)說明。
- 至於要讀取Firebase上的資料,參考Firebase的Retrieve Data on the Web說明,以on()偵測'value'變化事件發生就執行Reveal.slide()將頁面切換到指定頁碼處。這樣的動作在Firebase執行非常簡單,這就是其特別強調的Realtime Database優點(參考Deep Dive into the Realtime Database影片介紹)。而且就算是免費帳號,其Simultaneous connections還是可以到100個連線喔。
- 然後我們就可以試著寫兩支程式,一支寫資料到Firebase(請參考放在JSFiddle或JSBin的程式碼),一支程式以on()偵測資料變化事件發生(請參考放在JSFiddle或JSBin的程式碼),而這兩支程式都是搭配Google Maps API來呈現座標位置,這樣的應用應該可以激發大家想一些有趣的應用。
- Firebase資料庫的結構是採用NoSQL的JSON格式,請參考這篇Structure Your Database說明。Firebase is actually a great system and there are ways to use it "relationally" by planning your data storage and queries correctly, here are some great blogs post by the Firebase team about using their database in a more SQL-style way:
Denormalizing Your Data is Normal
Common SQL Queries Converted for Firebase
Advanced Searches with Firebase, made Plug-and-Play Simple