In time, you will call me master -- Star Wars

剛入門flutter，大概有1個月的經驗，做過一些小程式練習，已經可以寫得動project了，而且我滿喜歡flutter UI的．

開始吧，上次講到資料成功上傳到firestore，但其實一開始我是把資料放在realtime firebase的，也只花一天就做出拿資料顯示圖表分析，但在關掉app重開時，就有error顯示

Unhandled Exception: MissingPluginException(No implementation found for method Query#observe on channel plugins.flutter.io/firebase_database)

花了2天才解決

後來從realtime firebase 換到 firestore ， 並且不要按照firebase指示，跳過步奏4,5，不需要在AppDelegate.swift加上任何程式碼．

Flutter 程式部分

1. 從firestore拿取資料
   • 拿下來data 存到 Map的 data structure 裡, key:是第幾筆資料 value:是溫度跟亮度
2. 用 fl_chart 顯示資料圖表
   • 特別的只有一點 fl_chart 用的是 FlSpot 來存放顯示圖表的x,y軸
   • 但package範例裡 fl_chart 是直接放data寫死的
   • 所以要這樣 List<FlSpot> 之後再把Map的溫度,亮度放進去

The snapshots() method returns a Stream, therefore you can call the method listen() that will subscribe to the stream and keep listening for any changes in Cloud Firestore.

import 'package:cloud_firestore/cloud_firestore.dart';
final databaseReference = Firestore.instance;
// create a Map to store key time series
var time_temp_dict = new Map();
var time_light_dict = new Map();

databaseReference
        .collection("iot-zigbee")
        .snapshots()
        // listen for realtime updates
        .listen((result) {
      result.documentChanges.forEach((res) {
        if (res.type == DocumentChangeType.added) {
        // limit data display in chart to only 10
          if (cnt>10){
            temp.clear();
            light.clear();
            time_temp_dict.clear();
            time_light_dict.clear();
            cnt = 0;
          }
          print("added");
          // get temperature data
          print(res.document.data["temperature"]);
          // get illuminance data
          print(res.document.data["illuminance"]);
          temp.add(res.document.data["temperature"].toString());
          // Map data type key : count number value : temperature
          time_temp_dict[cnt] = res.document.data["temperature"].toString();
          
          light.add(res.document.data["illuminance"].toString());
          // Map data type key : count number value : illuminance
          time_light_dict[cnt] = res.document.data["illuminance"].toString();
          cnt+=1;
        }

以上程式碼，都不是完整的，只是大概的樣子，之後有放到GitHub再附上連結
reference : https://medium.com/firebase-tips-tricks/how-to-use-cloud-firestore-in-flutter-9ea80593ca40
心得 : 可以做出來，但自己不太會解釋自己怎麼做的，當下寫程式很清楚，過幾天就比較模糊了，目前完成 phase 1 設定的目標，有空會繼續往下做
希望之後寫出來的東西，也能解釋的很好．