Firebase的資料庫最大特色是它的即時性(Realtime)，我們可以從這個Realtime HTML5 Presenter tool with Firebase and Reveal.js例子看到其應用潛力，那就讓我們來練習看看如何做出這個應用吧(參考Hack : Control your presentations from anywhere in real time)。
- 首先要用到的是reveal.js這個HTML Presentation Framework，到Github下載完整檔案。(如果只是要產出以reveal.js語法呈現純HTML簡報則可以使用slides.com設計)
- 解壓縮後的資料夾，有個完整的demo.html與陽春的index.html，用記事本或Notepad++開啟其中一個檔案來改寫吧。
- 主控端的相關程式碼請參考放在JSFiddle或JSBin的內容及註解說明，變更後的html另存成一個檔名。
- 主控端這個部分的程式邏輯最主要是以Reveal.addEventListener()偵測'slidechanged'就將目前頁碼indexh及indexv寫到Firebase資料庫，而寫入資料庫的語法是跟第一個練習相同，寫入一個名為slide物件，裡面包含currentslideX與currentslideY兩個資料。
- 被控端的相關程式碼請參考放在JSFiddle或JSBin的內容及註解說明，變更後的html另存成一個檔名。
- 被控端這個部分的程式邏輯是參考Firebase的Retrieve Data on the Web說明，以on()偵測'value'變化事件發生就執行Reveal.slide()將頁面切換到指定頁碼處。這樣的動作在Firebase執行非常簡單，這就是其特別強調的Realtime Database優點(參考Deep Dive into the Realtime Database影片介紹)。而且就算是免費帳號，其Simultaneous connections還是可以到100個連線喔。
最後，把整個資料夾上傳到Google雲端硬碟吧，容量夠大，又能執行。(只要依使用雲端硬碟代管網頁做些設定，不過該說明在目前的雲端硬碟已經沒有直接提供"預覽"的URL了，但基本上就是 https://googledrive.com/host/xxx/檔名.html，而前述的xxx就是HTML檔所在資料夾的共用連結裡的id，自己找一下囉!)
把前述的例子再做點深入的研究，發現Reveal.js有個Auto-sliding的功能，也就是可以讓頁面自動輪播。當加上文件上所說的那個Reveal.configure程式碼，就會發現在畫面左下角出現一個播放鈕，可以切換自動/暫停輪播。在這樣的情況下，主控端與被控端的程式各要如何修正呢?
- 若我們考慮讓被控端能自動輪播，就要考慮當跟著主控端換頁時，應該要停掉被控端的自動輪播，不然被控端還是會依據設定的間隔時間往下走，那就不像是能完全被主控端控制的感覺了。
- 所以，勢必在Firebase再多加一個autoSlide參數來讓主控端設定為0或1，0代表要停掉自動輪播效果，但等到主控端要結束控制時就再將該參數設定為1，讓被控端可以回復自動輪播的狀態。要多寫入這樣一個參數就跟前述介紹的方法一樣，但是為了能在程式中讀這個參數(非監聽事件)的方法，就要用到Read data once的方法囉。
- 在主控端的程式邏輯，主要就是偵測到使用者按下停止輪播之事件發生就將autoSlide參數設定為0，而偵測到切換回自動輪播之事件發生就將autoSlide參數設定為1。要做到這樣的事件偵測，就是Auto-sliding裡面有提到的autoslideresumed與autoslidepaused事件。
- 好的，大致理解上述邏輯之後，就可以去看看放在JSFiddle或JSBin的主控端之主要程式碼，以及放在JSFiddle或JSBin的被控端之主要程式碼。
- 請注意，如果你還是下載reveal.js的Github解壓縮後的demo.html來做練習，請注意其中有包含Markdown的語法就會無法正確執行(但不清楚為何如此?)，所以請記得刪除demo.html裡面的下列部分，就可以正確執行囉。
p.s. 每次講到程式開發，總是要跟大家提醒先從網路上搜尋別人的經驗，而非自己一股腦兒背語法查手冊從無到有自己寫。好的程式設計師們也知道，他們不是世界上第一個遇到某個問題的人。他們使用 Google 搜尋，運用適當的關鍵字搜尋，來找尋一切可能的解答，並小心地評估這個解答，從中找出真正有用的內容。