摘要：嘗試目標(biāo)下一步是連接前端和序列化服務(wù)，實(shí)現(xiàn)在前端圖表中讀取傳感器發(fā)送的數(shù)據(jù)。序列化服務(wù)對(duì)應(yīng)的更新后前端程序位于面臨的挑戰(zhàn)是啟動(dòng)數(shù)據(jù)庫(kù)前端程序序列化服務(wù)。系統(tǒng)啟動(dòng)費(fèi)后，可以使用腳本下用檢查運(yùn)行狀態(tài)。

這章節(jié)我們將為系統(tǒng)建立一個(gè)簡(jiǎn)單的前端界面。首先安裝一些依賴環(huán)境并運(yùn)行起來(lái)，按照下面的步驟開(kāi)始：

如果還沒(méi)有準(zhǔn)備好，可以先在獲取的代碼倉(cāng)庫(kù) micro-services-tutorial-iot 下運(yùn)行npm install命令，完成之后運(yùn)行如下命令：

cd frontend/api

node index.js

打開(kāi)瀏覽器（推薦使用chrome、firefox），輸入地址http://localhost:10001. 可以看到一張圖表，簡(jiǎn)單吧。

接下來(lái)將開(kāi)始建立數(shù)據(jù)庫(kù)。這步將借助于Docker，如果沒(méi)有鏡像，可以使用一行命令獲取：

docker pull tutum/influxdb

如何運(yùn)行influxdb容器可以參考文檔: https://hub.docker.com/r/tutu...

難點(diǎn)是運(yùn)行起influxDB容器，一旦成功運(yùn)行，可以在瀏覽器中查看influx的網(wǎng)頁(yè)界面。

使用如下命令啟動(dòng)容器

docker run -d -p 8083:8083 -p 8086:8086 tutum/influxdb

在step1/services/influx/文件夾中有簡(jiǎn)便啟動(dòng)influx容器的命令集

使用命令獲取容器中的IP地址

docker-machine ip default

在瀏覽器中輸入http://:8083/打開(kāi)influx控制臺(tái)

-p 參數(shù)用于將容器的8083、8086端口暴露給宿主機(jī)；

-d 參數(shù)告知docker運(yùn)行后臺(tái)模式

當(dāng)在本地運(yùn)行docker容器時(shí)，特別留意每個(gè)多帶帶的虛擬機(jī)使用各自的IP地址（尤其是Mac系統(tǒng)、Windows系統(tǒng)）

使用docker kill命令可以隨時(shí)停止容器

目前數(shù)據(jù)庫(kù)已經(jīng)運(yùn)行，接下來(lái)將創(chuàng)建微服務(wù)用于讀寫數(shù)據(jù)庫(kù)。已經(jīng)編寫好了序列化服務(wù)代碼，位于step1/services/serializer文件夾下

當(dāng)前目標(biāo)是編寫一個(gè)小腳本，運(yùn)行后可將溫度數(shù)據(jù)寫進(jìn)influx數(shù)據(jù)庫(kù)。當(dāng)服務(wù)啟動(dòng)后，可以使用下面的命令將數(shù)據(jù)點(diǎn)提交給服務(wù)程序。

curl -X POST -d "{"role": "serialize", "cmd": "write", "sensorId": "1", "temperature": 32}" http://localhost:10000/act  --header "Content-Type:application/json"

提示 如果檢查serializer.js源文件 ，可以發(fā)現(xiàn)使用了下列環(huán)境變量:

INFLUX_HOST

serializer_PORT

初始化腳本應(yīng)確保正確設(shè)置了上述變量數(shù)據(jù)

通過(guò)瀏覽器中的influx網(wǎng)頁(yè)界面輸入下列查詢語(yǔ)句，可以檢查數(shù)據(jù)點(diǎn)被真實(shí)寫入influx中

use temperature;
select * from temperature;

在step2/services/influx文件夾包含influx容器啟動(dòng)腳本

在step2/services/serializer文件夾包含序列化服務(wù)源代碼

使用 step2/services/serializer/run.sh (Windows用run.bat)腳本啟動(dòng)服務(wù)

使用 step2/services/serializer/testWrite.sh (windows用testWrite.bat)腳本發(fā)送測(cè)試數(shù)據(jù)

使用influx控制臺(tái)查看數(shù)據(jù)點(diǎn)

注意 序列化程序是一種seneca¹微服務(wù)。Seneca作為獨(dú)立層可實(shí)現(xiàn)多種傳輸機(jī)制，包括TCP, HTTP, RabbitMQ, Redis, NATS等。在本教程中，使用Json格式數(shù)據(jù)通過(guò)HTTP傳輸機(jī)制。

下一步是連接前端和序列化服務(wù)，實(shí)現(xiàn)在前端圖表中讀取傳感器發(fā)送的數(shù)據(jù)。

序列化服務(wù)對(duì)應(yīng)的更新后前端程序位于 step2/frontend.

面臨的挑戰(zhàn)是啟動(dòng)Influx數(shù)據(jù)庫(kù)、前端程序、序列化服務(wù)。需要編寫腳本實(shí)現(xiàn)啟動(dòng)前端服務(wù)和序列化服務(wù)。

當(dāng)啟動(dòng)這兩個(gè)服務(wù)，使用testWrite.sh腳本發(fā)送數(shù)據(jù)到influx數(shù)據(jù)庫(kù)后，就可以在前端頁(yè)面查看。

注意 如檢查更新后的前端代碼，可發(fā)現(xiàn)如下環(huán)境變量

PROXY_HOST

serializer_PORT

frontend_PORT

在打開(kāi)前端前，需要設(shè)置上述變量。

使用step3/services/influx下的腳本啟動(dòng)influx容器

運(yùn)行腳本 step3/services/serializer/run.sh (windows下用 run.bat) 啟動(dòng)序列化服務(wù)

Start the frontend with the script 運(yùn)行腳本step3/frontend/run.sh (or run.bat)啟動(dòng)前端界面

在瀏覽器中輸入 http://localhost:10001/顯示前端頁(yè)面

使用腳本step3/services/serializer/testWrite.sh (windows下用 testWrite.bat)發(fā)送一些測(cè)試數(shù)據(jù)

前端頁(yè)面中應(yīng)出現(xiàn)數(shù)據(jù)點(diǎn)的表格

現(xiàn)在系統(tǒng)只有3個(gè)模塊，但已經(jīng)很難管理。在這步中，面臨的挑戰(zhàn)是讓系統(tǒng)通過(guò)Fuge運(yùn)行。Fuge是一種微服務(wù)開(kāi)發(fā)環(huán)境，幫助簡(jiǎn)化應(yīng)對(duì)本地進(jìn)程和docker容器

在 step3/fuge 包含兩個(gè)文件:

compose-dev.yml - 使用docker compose格式指定系統(tǒng)所用的進(jìn)程等

fuge-config.json - fuge全局配置文件

面臨的挑戰(zhàn)是使用fuge終端運(yùn)行系統(tǒng)，可以查看fuge相關(guān)文檔https://github.com/apparatus/...。 系統(tǒng)啟動(dòng)費(fèi)后，可以使用腳本step3/services/serializer/testWrite.sh (windows下用testWrite.bat)檢查運(yùn)行狀態(tài)。前端頁(yè)面圖表可直觀展示數(shù)據(jù)。

提示 必須先停止之前所有進(jìn)程及容器

提示 確認(rèn)使用 npm install -g fuge命令安裝了fuge.

提示 可以使用 fuge shell 開(kāi)啟fuge終端

step4/fuge 文件夾包含fuge終端的配置

啟動(dòng)fuge

fuge shell fuge/compose-dev.yml

啟動(dòng)所有服務(wù)

start all

打開(kāi) http://localhost:10001 查看圖表

使用腳本 step4/services/serializer/testWrite.sh 發(fā)送數(shù)據(jù)到序列化服務(wù)

注意 Fuge用于關(guān)聯(lián)進(jìn)程和dock 容器，使用如下機(jī)制:

注入環(huán)境變量到每一個(gè)進(jìn)程

啟動(dòng)內(nèi)部代理，在進(jìn)程和容器間進(jìn)行橋接

本系列文章：

按步搭建簡(jiǎn)單IoT微服務(wù)(1)

按步搭建簡(jiǎn)單IoT微服務(wù)(2)

按步搭建簡(jiǎn)單IoT微服務(wù)(3)