Flutter + Firebase(三) : JSON 序列化與Firebase實作

這篇來講講運用Firebase的JSON資料正確姿勢。由於Firebase儲存的是JSON格式，對JavaScript確實十分容易操作，但對Dart這樣的物件導向語言則希望是轉為物件後使用。同時這篇也來複習上一篇的實際操作。

一、前置作業

新開頁面PushUserPage，這頁面功能包含push delete 與列表。

預計最終成果 :

列表項包含Avatar，title名稱，subtitle為該筆資料在firebase的key值，刪除鈕。右下角藍色鈕則可以自動添加資料。

程式碼 : 新開頁面並複製貼上即可

二、JSON Serialization

1. 嘗試 push User

我們先來實作右下角藍色小按鈕每當按鈕被按到時firebase應該要新增一筆資料。

為了方便，先把每一筆user資料寫死了

將_pushUser放上Button並點擊後應該可以看到Firebase資料長這樣 :

2. 獲取資料

獲取Firebase資料來列表呈現

印出來後可以看到長這個樣子 :

就是Key配上裡面的值，可以看到裡面的值包含name與avatar

3. 建立物件

我們應該要為每筆列表建立class，我們就取名為User吧 !，User包含 Name、Avatar、key，與class的建構式。

那我們該如何將JSON轉為物件呢? 官方給了一個語法糖。

fromFirebase可以視為一個User的一個新的建構式，目的是將傳入的map取出裡面的 'name’ & ‘avatar’ 並將值給予此物件的name與avatar。寫好後我們就能重新改寫一下步驟二的getData

4. 建立物件List

我們重新改寫getData，並傳入List。

傳入的snapshot.value可以用forEach來遍歷它，可以看到forEach((key,map))中的map內容為'name’ & ‘avatar’。利用剛剛的fromFirebase()傳入可以直接建構新的User物件。

建立完後加入key並放入list中並最後利用setState渲染頁面。

5. 放上列表

利用flutter的ListView.builder()可以很輕鬆的建立列表。

成功後應該可以看見可滑動的列表呈現了。

6. 刪除按鈕

不難，因為我們已經成功取得key值了。

基本上大功告成了，最後我們再加上及時更新。

7. 即時更新

建立Stream的同時別忘了引入dart:async。

如此一來便完成了。

8. 最終成果

除了Class.fromWhere(Map) : 快速JSON轉物件外。

還有Map<String, dynamic> toJSON=>{}快速將物件轉為JSON，可以用來方便做資料的push詳細可以參考官方文檔。

JSON and serialization

下一篇來講firebase_auth

完整程式碼 :

參考資料與後記 :

參考 : https://flutter.io/docs/development/data-and-backend/json

最近不知道為什麼，有點喪失鬥志了，仔細想想今天1/26居然是我1月裡面第一次認真寫程式，真的是寒假過太爽了。今天1/26是我下定決心戒遊戲的第一天!! (9｀･ω･)9

寒假計畫 :

1. 學習 Scrapy 爬蟲
2. 學習tensorflow 看完臺大李宏毅教授的機器學習課程
3. 玩LineBot