Flutter + Firebase(二) : RealTimeDB CRUD

來到Firebase的CRUD章節啦!! 今天是2018年的最後一天了，過了今天後正式進入期末考週期了，還有一堆報告、考試和兩個Demo啊~想到就頭疼。Flutter+Firebase系列大概還會寫Firebase_auth跟Firebase_Storge吧，不過大概要到寒假的時間了。

一、事前準備

別忘了先將firebase用測試模式啟動喔

先把 /lib/main.dart 裡面的代碼清一清，建立五個按鈕做CRUD。重新建立一個MyHomePage的Widget。 下面給出代碼，直接複製貼上應該可以。

貼上之後應該可以看到。

二、CRUD

進行CRUD之前我們要先建立一個物件連接Firebase與Flutter。

final DatabaseReference fireBaseDB = FirebaseDatabase.instance.reference();

之後就能利用fireBaseDB進行各種操作了!

1. SET

由於Firebase是以鍵值對為主體的資料庫，因此我們要用Map包住data來進行資料的整理。此外，大家在JS很熟悉的非同步操作，在Flutter中是被一個叫Future對象來實踐。我們Set Data上去後使用Future的whenComplete方法做等待回傳操作，回傳完print finsh。如下:

當完成後會印出finish set，如果失敗則印出error。完成後將_set放在set button的onPress，並點擊成功後可以看到Firebase有資料了。

2. PUSH

PUSH就是會自動幫你生成key值的東西。算是Firebase的array的替代方案，例如我現在要加入興趣。

放上按鈕後，多按它幾次後就能看到

3. Update

其實跟set差不多，差在set是直接整體覆蓋，Update則是部分更新。我現在要把系所改成資管系。

4. Fetch

先講Fetch，這邊是once的Fetch之後再講怎麼實作及時資料更新。

將滑鼠移到once的then，可以看到裡面要求輸入一個函式，資料型態為DataSnapshot。回傳的snapshot.value可以得到裡面的值。我們來回傳並將螢幕上的系所更新起來。

5. Remove

我們來刪掉第一個興趣吧!不過首先要得到它的key值，key值可以利用snapshot.value.keys得到，再轉為List。

順利的話可以看到firebase內少一個興趣了。

三、 及時資料更新

這都叫做RealTimeDB 當然要有即時資料更新啊。及時資料更新較為複雜一些。我們先引入dart:async，並建立SubScription 來監聽變化，監聽的物件為Event。

我們要在這個Widget起始時幫它設定listen對象

我們監聽user/userId這個firebase reference，當有變化，為通知onValue，回傳event，利用這個就能自動更新畫面了。

當然也別忘了設定dispose，Widget消失時也關閉Subscription。利用的是StreamSubscription的cancel方法。

下一篇來講 Firebase_auth

完整代碼 :

後紀:

今天是2018年最後一天，明天就是元旦了，又到了一年一度的立Flag大會。 是說，時光飛逝、歲月如梭。每年大概到這時候都會開始感慨，今年又做了哪些事啊?有什麼完成的目標啊之類的，不過大部分答案都是令人失望的。引用大佬說的話: 我這是 “間歇性躊躇滿志，持續性混吃等死”。不過新年新希望，還是希望2019年 :

1. 英文變好
2. 考到好的研究所
3. 專題做好

留於 2018.12.31 ，2019年年末再回來看看。

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