iT邦幫忙

1

IoT Project ( Flutter + Python + ZigBee ) 冒險闖關記 -- Part 3

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

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

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

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

花了2天才解決https://i.stack.imgur.com/i49F4s.png

後來從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 設定的目標,有空會繼續往下做
希望之後寫出來的東西,也能解釋的很好./images/emoticon/emoticon41.gif


1 則留言

0
aquila_w
iT邦新手 5 級 ‧ 2020-07-23 16:09:07

是flutter!! 從firebase轉firestore是一開始必經之路xd
之後不單單只有map的話 Dart(flutter)那邊要宣告超多東西 可能還要再下個功課

我要留言

立即登入留言