描述

這是我整理的一個教程，旨在盡可能多地解釋使用 Arduino 和一些網絡技術制作一個簡單的實時氣象站的過程。在這個項目中，我將嘗試從 DHT11 溫度、濕度傳感器獲取傳感器數據，并將其顯示在一個漂亮的 Web 用戶界面中。

對于系統的后端，我將使用一個名為 Express 的 Javascript Web 框架。從 Arduino 讀取的傳感器將通過串行通信發送，在 javascript 的幫助下，我將讀取這些串行通信并使用 socket.io 操作數據以發送到前端。另外，我還集成了MoosunMv API以顯示一些額外的天氣信息。MoosunMv API 是建立在馬爾代夫氣象站之上的開放 API。

注意：所有天氣信息都來自我自己的服務器。它不會使氣象服務器超載。我們的服務器每 12 小時從馬爾代夫氣象站獲取天氣信息并將其存儲在我們的數據庫中：)

使用的網絡技術

• 表達
• 套接字.io
• Vuejs
• 愛訊

?

?

要求：

• 阿杜諾
• DHT11 傳感器
• 面包板
• 3 跨接電纜
• USB 電纜類型 A/B 標準 USB 2.0 電纜

- 硬件接線：

將硬件組件連接到 arduino。接線圖如下圖所示：

?

?

注意：我使用的傳感器有一個內置電阻器，因此我的傳感器中會缺少一個引腳。

- 使用 Arduino IDE 編寫 Arduino 代碼：

#include "DHT.h"
//Sensor digital pin
#define DHTPIN 8
//Setting the sensor type
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
void setup() {
//Starting the serial communication
Serial.begin(9600);
dht.begin();
}
void loop() {
//delay for 2 second before reading again
delay(2000);
//setting humidity
float humidity = dht.readHumidity();
//setting temperature
float temperature = dht.readTemperature();
Serial.print(temperature);
//Output for splitting the string into two array during serial read.
Serial.print(",");
Serial.println(humidity);
}

我用來從傳感器讀取數據的 Arduino 庫是 adafruit 的 DHT-sensor-library。DHT 庫。

- 讀取串行數據并發送到前端：

通過串口發送傳感器數據后。我正在使用一個名為Serial Port的 javascript 庫來讀取 Arduino 發送的串行數據并將數據字符串拆分為兩個變量。數據從逗號開始的地方拆分。

將日期發送到前端是這樣完成的：

var today = new Date();
var date = today.getDate() + "-" + (today.getMonth() + 1) + "-" + today.getFullYear();
weekday = [
"Sunday", "Monday", "Tuesday", "Wednesday", "Thurday", "Friday", "Saturday"
];
var day = weekday[today.getDay()];
var secondDay = weekday[today.getDay() + 1];
var thirdDay = weekday[today.getDay() + 2];
var fourthDay = weekday[today.getDay() + 3];

到目前為止，我所做的是使用 WebSocket 連接獲取我需要發送到前端的所有信息。現在我將使用一個名為socket.io的 javascript 庫將數據從后端實時發送到前端。

這部分的代碼如下所示：

io.sockets.emit('data', {
humidity: humidity,
temperature: temperature,
date: date,
day: day,
secondDay: secondDay,
thirdDay: thirdDay,
fourthDay: fourthDay
});

現在，這幾乎就是后端需要做的所有事情。不是世界上最復雜的事情。第二天發送到前端僅用于演示。它上面的溫度數據是完全靜態的。繼續！！..

讓我們回憶一下。我正在將傳感器數據從 Arduino 發送到串行端口。在我的情況下，它的 COM5。Javascript Serial Port 庫比從串口讀取串行數據并根據設置拆分鍵的位置拆分數據。在這種情況下，我使用逗號將字符串分隔為兩個變量。我還設置了一些有關要發送到前端的數據的日期和信息。最后，我使用 socket.io 通過 WebSocket 發送數據。在前端，socket.io 將監聽數據來自的端口，我使用 VUEJS 綁定 socket.io 接收的數據以在 HTML 中顯示它們。

- 將一切連接在一起：

前端javascript代碼如下所示：

feather.replace()
var socket = io.connect('http://127.0.0.1:4000/');
var temperature = new Vue({
el: '#app',
data: {
ApiUrl: 'http://moosunmv.jinas.me/v1/latest',
temperature: '',
humidity: '',
date: '',
day: '',
wind: '',
secondDay: '',
thirdDay: '',
fourthDay: ''
},
methods: {
getWeather(){
var vm = this;
axios.get(this.ApiUrl)
.then(function (response) {
vm.wind = response.data.wind;
console.log(vm.wind);
})
}
},
mounted: function () {
socket.on('data', function (data) {
this.temperature = data.temperature;
console.log(this.temperature);
this.humidity = data.humidity;
console.log(this.humidity);
this.date = data.date;
this.day = data.day;
this.secondDay = data.secondDay;
this.thirdDay = data.thirdDay;
this.fourthDay = data.fourthDay;
}.bind(this));
this.getWeather();
}
});

然后將 VUEJS 設置的數據綁定到 HTML 文件中。我正在使用一個名為axios的 JavaScript 庫從 MoosunMv API 獲取天氣信息。

它是這樣完成的：

<div class="info-side">
<div class="today-info-container">
<div class="today-info">
<div class="precipitation"> class="title">PRECIPITATION</span>0 %span>
<div class="clear"></div>
div>
<div class="humidity"> class="title">HUMIDITY</span>{{humidity}} %span>
<div class="clear"></div>
div>
<div class="wind"> class="title">WIND</span>{{wind}}span>
<div class="clear"></div>
div>
</div>
div>

注：本項目中使用的 Html、Css 模板取自 codepen。向科林·埃斯皮納斯大喊。

這個項目就差不多了。您可以在下面找到該項目的所有代碼：

• Arduino代碼
• 前端和后端