扯淡時間

前段時間，辦了一張流量卡。有了新的手機號碼那就可以薅一波資本主義的羊毛了，所以我在京東上使用0.1大洋包郵的價格喜提了一個多肉，（在此之前我養過挺多的花，所有的都是忘了澆水被渴死了）此次痛並思痛，一定要讓我0.1大洋的的多肉看到明年的太陽。

思路

養花幾乎不用管，只需要兩件事

充足的陽光：我現在住的距離太陽還是挺近的，陽光的事情不用擔心。
有營養的土和充足的水：土比較好搞定，去小區的花壇裡面扣點就行了，主要就是水，經常想不起來去澆水，所以得搞一個能知道土壤溼度的東西，提醒我澆水。

我的思路如下

收集資料-首先手機花盆裡面的土壤溼度
儲存資料-將花盆的溼度進行持久化儲存
資料展示通知-頁面通過讀取持久化儲存的資訊展示出來，並可以設定一個預警值，在一定的規則下面通知到我

思路有了就開幹

收集資料

我的這個實現思路也算是傳說中的物聯網了，畢竟花盆都上網了嘛，現在實現這種的板子有很多，那個便宜來那個就行了。經過百度一下，選擇了ESP8266-NodeMCU + 溼度感測器作為資料收集方式（為啥選擇這個呢？因為便宜啊，還自帶wifi能上網。硬體真便宜，一共20塊搞定，還包郵），esp8266可以使用Arduino進行開發，語法跟c差不多，庫啥的自己搜搜吧，我也是自己搜的。俺看的是這個教學

收集資料主要是幹兩件事：1. 讀取溼度，2. 上報資料 程式碼如下

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <ArduinoJson.h>
// 讀取溫度
#define PIN_AO A0  //土壤感測器AO接ESP8266引腳A0
//#define PIN_DO 4  //溼度高於設定值時，DO輸出高電平，模組提示燈亮

int M0 = 1024;  //在空氣中AO讀取的值最大為1024，代表乾燥時的讀數
int M1 = 164;   //浸泡在水裡的最小值 464（最小值會改變），代表100%溼度

float i=0;
float j=0;

#define SERVER_IP "http://區域網ip:3001/sendCurrentTemp"

const char* name = "名字";               //這裡改成你的裝置當前環境下要連線的接入點名字
const char* password = "密碼";  //這裡改成你的裝置當前環境下要連線的接入點密碼
// 上報時間間隔
int outTime = 1000 * 60 * 5;
// int outTime = 1000 * 60;
void setup() {
  // 設定引腳
  pinMode(PIN_AO, INPUT);

  Serial.begin(115200);  // 啟動串列埠通訊，波特率設定為115200

  Serial.println("未連線");


  Serial.println("開始連線");

  WiFi.begin(name, password);
  Serial.print("正在連線到");
  Serial.print(name);

  while (WiFi.status() != WL_CONNECTED)  //判定網路狀態
  {
    delay(500);

    Serial.print("網路連線成功");

    Serial.print("連線到的接入點名字:");

    Serial.println(name);  // 告知使用者建立的接入點WiFi名

    Serial.print("連線到的接入點密碼:");

    Serial.println(password);  // 顯示使用者建立的接入點WiFi密碼

    Serial.print("無線模式成功開啟，網路連線成功");
  }
  if (WiFi.status() == WL_CONNECTED) {
    Serial.print("無線IP地址為: ");
    Serial.println(WiFi.localIP());
  }
}

void loop() {
  // put your main code here, to run repeatedly:

  if (WiFi.status() == WL_CONNECTED) {
    http_post();
    WiFi.forceSleepBegin();  // Wifi Off
    delay(outTime);
    WiFi.forceSleepWake();  // Wifi On
  }
}



void http_post() {

  //建立 WiFiClient 範例化物件
  WiFiClient client;

  //建立http物件
  HTTPClient http;

  //設定請求地址
  http.begin(client, SERVER_IP);  //HTTP請求
  Serial.print("[HTTP] begin...\n");
  // 長度
  DynamicJsonDocument doc(96);

  float data = analogRead(PIN_AO);
  Serial.println(data);
  i = data / 1023;
  j = (1 - i) * 100;

  Serial.println(j);

  // 寫入當前溫度值
  doc["temp"] = j;
  String output;
  serializeJson(doc, output);

  //啟動連線並行送HTTP報頭和報文
  int httpCode = http.POST(output);
  Serial.print("[HTTP] POST...\n");

  //連線失敗時 httpCode時為負
  if (httpCode > 0) {
    //將伺服器響應頭列印到串列埠
    Serial.printf("[HTTP] POST... code: %d\n", httpCode);

    //將從伺服器獲取的資料列印到串列埠
    if (httpCode == HTTP_CODE_OK) {
      const String& payload = http.getString();
      Serial.println("received payload:\n<<");
      Serial.println(payload);
      Serial.println(">>");
    }
  } else {
    Serial.printf("[HTTP] POST... failed, error: %s\n", http.errorToString(httpCode).c_str());
  }
  //關閉http連線
  http.end();
}

儲存資料

資料儲存，得需要一個伺服器，我這裡正好一個衝動消費買的樹莓派，就讓他當伺服器吧（你要有個這個可以不用買esp8266了，直接開幹就完了）我的思路，在樹莓派上起一個服務，讓esp8266可以通過http的協定上報溫度，資料展示也可以通過這個服務來獲取資料，當然了我還想外網存取：我這裡用的是花生殼，搞了一個內網穿透，這個送1g流量，6塊還能給一個https的域名，省了備案的事情。

服務簡單的來就使用nodejs啟動一個服務吧
資料庫我使用的SQLite，看人家說這個挺小的，還支援關聯查詢。程式碼如下

const http = require('http');
const os = require('os');
const urlInfo = require('url')
// 讀取資料庫
const querystring = require("querystring")
var sqlite3 = require('sqlite3').verbose()

// 要使用的埠號
const PORT_NUMBER = 3001


var db = new sqlite3.Database('./temp.db', sqlite3.OPEN_READWRITE, (err) => {
    if (err) {
        return console.log(err.message)
    }
    console.log('資料庫連結成功')
})

/** 追加資訊 */
const appendTemp = (temp) => {
    return new Promise((resolve, reject) => {
        const currentTime = new Date().getTime()
        const addData = `INSERT INTO temp (time,temp)  VALUES(${currentTime},${temp})`
        db.run(addData, function (err, data) {
            if (err) {
                console.log(err)
                reject(err)
            }
            resolve()
        })
    })

}

const selectTemp = (paramInfo) => {
    return new Promise((resolve, reject) => {
        const { pageIndex = 1, pageSize = 10, all = false,startTimestamp,endTimestamp } = paramInfo
        let sqlStr = `select * from temp`
        if (startTimestamp && endTimestamp) {
            sqlStr = `select * from temp where time >= ${startTimestamp} and time <= ${endTimestamp}`
        }
        // 預設展示所有
        if (all === false) {
            sqlStr += ` limit(${(pageIndex - 1) * pageSize}),${pageSize}`
        }
        db.all(sqlStr, function (err, data) {
            if (err) {
                return console.log(err)
            }
            resolve(data)
        })
    })
}


// 2. 建立服務
// req(request):本次請求  res(response):本次響應     每次收到瀏覽器的請求,它就會執行一次回撥
const server = http.createServer(function (req, res) {
    const { method, url } = req
    // 接收到請求資料
    if (method === 'POST' && url === '/sendCurrentTemp') {
        //建立空字元疊加資料片段
        var data = '';
        //2.註冊data事件接收資料（每當收到一段表單提交的資料，該方法會執行一次）
        req.on('data', (chunk) => {
            // chunk 預設是一個二進位制資料，和 data 拼接會自動 toString
            data += chunk;
        })
        req.on('end', () => {
            try {
                console.log(data)
                const info = JSON.parse(data)
                appendTemp(info.temp)
                res.end('{status:200}');
            } catch (e) {
                console.error(e)
            }
        })
    }
    const { pathname, path } = urlInfo.parse(req.url)
    if (method === 'GET' && pathname === '/getTemp') {
        // 返回查詢的資訊
        selectTemp(param2Obj(path)).then(list => {
            let retObj = {
                status: 200,
                list
            }
            res.end(JSON.stringify(retObj));
        })
    }

    // 獲取資料請求
});


// 3. 啟動服務
server.listen(PORT_NUMBER, function () {
    console.log(`伺服器啟動成功，請在http://${getIpAddress()}:${PORT_NUMBER}中存取....`)
});


/** 獲取當前ip地址 */
function getIpAddress() {
    var ifaces = os.networkInterfaces()
    for (var dev in ifaces) {
        let iface = ifaces[dev]
        for (let i = 0; i < iface.length; i++) {
            let { family, address, internal } = iface[i]
            if (family === 'IPv4' && address !== '127.0.0.1' && !internal) {
                return address
            }
        }
    }
}


function param2Obj(url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    const paramObj = JSON.parse('{"' + (search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
    Object.keys(paramObj).map(key => {
        paramObj[key] = decodeURIComponent(paramObj[key])
    })
    return paramObj
}

資料展示

使用vue寫一個頁面，去從服務拉取到資料

展示曲線
展示所有資料分頁展示（後期想加個圖片，每隔一段時間上傳一個圖片，搞一個延遲攝影的效果）

全部程式碼地址

最後放一張效果圖吧

閒來無事-夏天防止花被渴死

扯淡時間

思路

思路有了就開幹

收集資料

儲存資料

資料展示

全部程式碼地址