前端工程師的救星，Firebase的簡介與實作TodoList
日本的開發者寫文章時常常會有這樣的開頭：
爆速開発をするために超絶技巧を学ぶべきこと
字面上總是相當聳動好像是什麼厲害的招式一樣，實際上就是快速開發的意思，今天我也想要來介紹一下爆速開發常用的超絕技巧之一，俗話說工欲善其事，必先利其器，Firebase這項工具將會是幫助我們快速開發Side Project的救星。
什麼是Firebase？Firebase是由Google收購的子公司，所提供的是行動應用程式開發的平台服務，也就是BaaS(Backend as a Service)，它能夠幫助我們快速開發我們的應用程式，並且支援跨平台包括Android、iOS以及Web，幫我們整合大部分建立一個服務所需要的後台功能。主要像是提供雲端給使用者架起網頁、提供資料庫供使用者存取資料以及做後台分析等等。
舉例來說：現今非常熱門的社群平台Instragram，可以讓使用者分享照片與即時動態。要建立這樣的應用程式，會考慮以下幾點問題：
- 我們要有使用者，怎麼管理我們使用者的帳號？
- 按讚，發表動態，留言這些資料，我們要儲存在哪裡？
- 當有人按讚或發表新的文章，我們要如何及時更新頁面和推播通知給使用者？
除了以上，還有很多我們所不知道的問題存在，但是一個簡單的應用大致上都脫離不了上面的那些實作。當然現在的公司可能都有自己的一套實作方法，但要寫出一個好的後台讓應用能負荷萬人以上的使用者，往往需要大量的時間與高深的技術，又或是可以用容器化與微服務架構去部署一個應用程式，GCP和AWS都有提供我們很多解決方案，然而今天我們要來討論的就是Firebase如何幫我們解決這些問題。
如果今天你只是一個菜鳥前端工程師，不會任何後端語言，不懂關聯式資料庫，不會SQL語言查詢，不熟悉怎麼建立一個Web Server，那很好，Firebase將會是你最大的救星。今天我們就來試用Firebase + ReactJS如何完成一個簡單的TodoList吧。
實作TodoList
學習一個程式語言，最開始會練習怎麼叫出一個hello world，學習建立一個應用程式，通常最開始會練習怎麼做一個TodoList，TodoList的重點不外乎就是新增刪除查詢。這次透過Firebase，想要將功能做一點小進化：
- 將資料存放在Firebase的Realtime Database，讓我們有做任何更動時，資料都能立即反應在UI上
- 透過Firebase的Authentication功能，讓你輕鬆完成與Google帳號連動的OAuth認證
- 透過Firebase的Hosting，直接部署我們的應用程式到Firebase上
完成品就像上面那樣。我會用下面幾個步驟來Demo這次Firebase應用的練習，有興趣的人也可以跟著完成，或是直接拉到最底下的懶人包。
1. 建立專案資料夾
使用create-react-app建立我們的專案資料夾，這邊我習慣使用yarn作為我的管理套件，在terminal上輸入:
yarn create react-app <YOUR_PROJECT_NAME>這邊就會建立一個新的react專案的資料夾。
2. 建立Firebase Project
到Firebase Console上新建一個專案，名字隨意即可。
3. 安裝Firebase CLI與Firebase NodeJS SDK
為了能更方便地使用Firebase與初始化我們的專案我們需要安裝Firebase CLI，安裝方法可以參考說明文件，這邊我們使用全域性安裝，一樣打開terminal輸入：
npm install -g firebase-tools安裝完成後，你就可以在terminal使用firebase的指令了，可以直接輸入firebase來檢查有沒有安裝成功，有安裝成功的話會跑出一串指令說明，接下來輸入指令來登入我們的帳號，帳號使用google的帳號即可完成登入：
firebase login登入完成後，需要將Firebase的一些基本設定初始化到我們的project之中，因此需要一個firebase.json的檔案去做配置，根據官方的說明文件，只要輸入下列這行指令，就可以初始化我們的專案：
firebase init
這時畫面上會要我們選擇要加入哪些功能，這邊先選擇Database和Hosting即可，因為目前只需要一個可以幫我們存資料和放app的雲端。
因為官方提供給了NodeJS的API使用，所以我們還需要先安裝Firebase SDK，因此進入我們剛剛創的專案資料夾輸入以下指令：
cd <YOUR_PROJECT_NAME>
yarn add firebase rxfire rxjs你會發現這邊除了firebase以外，我還安裝了其他的module，其中的rxfire是官方推薦用來整合非同步處理的工具，在任何framework下都適用，原理源自於RxJS，有學過observable的話應該不陌生，是一種藉由資料流來處理JavaScript異步事件的方式，這邊就不多加說明，有空的話我想寫一篇文章來比較JavaScript Generator和RxJS的差異，而這些異步事件的處理方法也很常被拿來與redux做整合，用redux-saga和redux-observable來說明或許還不錯。
經過初始化後的專案，會產生一個叫firebase.json的檔案在根目錄，裡面會寫著我們所要使用各項服務的default設定，也可以設定deploy前後可以分別執行哪些task，但這邊暫時不會用到，注意public的資料夾設為build，這個build資料夾會是我們之後要用來deploy的資料夾。
為了讓SDK可以取得Firebase的project來源，這邊需要建立一個config.js的檔案去連接，並且也順便建立一個api.js，放在哪邊可以自己決定，這會是接下來我們要寫使用Firebase api的地方。以上完成後專案結構大致上如下圖：
然後還有兩件事要做，那就是啟用Database和Authentication的功能，打開剛剛的控制台Firebase Console，
- 選擇左側欄位的Database，選擇創建一個Realtime Database，為了方便測試先選擇測試模式，開放所有的存取權限，存取權限的客製化也非常簡單，用類似JS的語法即可完成，有興趣的人可以參考這裡
- 選擇左側欄位的Authentication，選擇登入方式，將供應商Google的狀態更改為啟用
config.js裡面的配置也可以在Firebase Console找到，點選左上角的設定按鈕選擇專案設定，可以找到API_KEY和PROJECT_ID等資訊。將這些值放入config.js裡面如下：
4. 利用Firebase的API來實作登入驗證
首先透過initializeApp傳入剛剛設定的config檔案來取得project，接下來就可以直接使用database和auth等功能，我們可以使用ref直接取得database的節點，這邊將其中一個節點命名為todolist，todolist裡面包含不同的使用者，一個使用者裡面又可以有多個todo，所以取得資料的路徑暫定為todolist/$uid/$todoId。
將API包裝成我們接下來會用到的function：
上面包含了登入、登出以及檢查是否有登入的實作，檢查登入的方式使用rxfire中提供的authState，它能夠將身份驗證的資料包裝成一個observable，回傳使用者登入的狀態，狀態發生改變時也能即時偵測。
provider.setCustomParameters({ prompt: 'select_account' })這段的用意為每次登入都可以讓使用者選擇要切換哪個帳號，否則瀏覽器的cookie會保留登入過的紀錄，讓你每次登入都使用同一組帳號。
5. 利用Firebase的API來實作新增刪除修改
- 用uid以及todoId找到要進行操作的節點
- 新增時，寫入todo事項和完成狀態(未完成)，更新時，允許在節點上切換完成與未完成
- 刪除時，整個todo的節點拔掉
而在getTodo裡，list是rxfire裡面的提供我們query一連串資料的方法，也會回傳一個observable，能夠偵測即時更新。
6. 簡單實作UI
剩下的就是實作UI的操作了，就是把剛剛寫的那些打Firebase api的函數丟到我們的React組件之中，因為這部分涉及太多React，不是這篇的主題，可以參考看看就好，為了測試用，就隨便做了一個簡單的UI，CSS的部分就應個人喜好去調整吧。
完成的話效果會像下面這樣：
按下登出按鈕，會立刻要求使用者再次登入
完成以上步驟後，把它放到Firebase Hosting試試看吧，deploy的方法非常簡單只要輸入以下指令：
yarn buildbuild完後執行：
firebase deploy
成功後會順便告訴你Hosting的網址，去Firebase Console裡也能找到。
總結
使用Firebase，可以幫助開發者省下很多管理與實作基礎架構的時間，以上的Project應用到了安全身份認證(Authentication)、即時資料庫(Realtime Database)以及網頁託管服務(Hosting)，我覺得這些服務帶給我們最大的優點是：
- 快速實作支援各平台(Github, Google, Facebook, …)的登入身份認證系統
- 能夠提供使用者即時同步的數據體驗，且不需要伺服器架構
- 即使離線後，保有Local Cache幫助我們優化體驗
- 資料庫擁有安全的存取機制，而且客製化的方法簡單
- 部署簡單且能夠快速傳遞內容給使用者
然而這也只是Firebase功能的一小部分而已，更多的應用功能，下次會繼續介紹。懶人包的話，可以直接參考我完整的repository。
