Fullstack IoT 2017 專欄, #3: React 與 Web of Things 初體驗

[jollen]

初步認識 Web of Things 後，接下來就是動手時間了。以下步驟，展示的是如何將 ESP8266 裝置取得的溫度數值：

• 經由 Web of Things 的概念
• 經由 IoT broker 的架構
• 即時推送到 Web app (用戶端)

以下是本專案需要的環境：

• Node.js v4.3+
• React
• ESP8266 開發板
• PC 或 Notebook 一台
• Microsoft Azure 雲端平台

以下的過程並不會寫到程式碼。

目標

建立 Real-time Sensor Dashboard，並使用 WebSockets、CoAP 與 Web of Things 技術，來建立一個無線感測器網路（wireless sensor networks）。

上圖是本專案的目標：建立一個 real-time 的 dashboard，以接收並顯示溫度感測數據。這個專案用到的是 Web of Things 架構，因此首要之務是了解 Web of Things 架構。根據 Wiki 上的定義：

The Web of Things (WoT) provides an Application Layer that simplifies the creation of Internet of Things applications1. WoT reuses existing web technologies, such as REST, HTTP, Websockets, CoAP and etc. 1.

另外也可以閱讀 #22 。

架構

WSN (Wireless Sensor Network) 是由 nodes 所構成的網路架構2。在 Sensor Network 裡的 node 負責收集資訊，並與其它 node 溝通2。因此，這個專案要解決的問題有 2 個：

• 如何收集並傳送 sensor data
• node 與 node 間如何溝通，也就是 M2M (machine-to-mahchine) 或 P2P (peer-to-peer) 技術

圖 1: Wireless Sensor Network (Source: https://en.wikipedia.org/wiki/Wireless_sensor_network. License: Public Domain)

Wireless sensor network 的拓璞 (topologies) 之一，就是 Star Network3。在 Star Network (星狀網路) 架構中，每一個 node 都連接到 Gateway Sensor Node。在 Star Network 裡的 node 會將收集到的資訊，傳送給 Gateway Sensor Node。這個專案將使用 Star Network 架構，因此，除了上述的 2 個問題外，還要再解決另一個問題：

• 佈署 Gateway Sensor Node

Figure-2: Star Network (Source: https://en.wikipedia.org/wiki/Star_network. License: CC BY-SA 3.0)

WoT.City 使用案例: Star Network 架構

Figure-3: Goal of 201-web-of-things-dashboard

Figure-3 is a simple Web of Things architecture. In the figure:

• We will call Gateway Sensor Node as "Proxy"
• We will take advantge of ESP8266 as "Temperature Node", marked as "Node" in Figure-3
• Temperature Node will gather temperature information and send it to Proxy over "CoAP"
• We will connect Proxy to an IoT cloud server, the IoT cloud server is called "Endpoint"
• We will deploy "Endpoint" at Microsoft Azure through App Service
• We will build a web frontend "Dashboard" and connect "Dashboard" to "Endpoint" for viewing temperature information

Some technical details:

• "Temperature Node" sends temperature information to "Proxy" over CoAP
• "Proxy" is real-time pushing temperature information to "Endpoint" over Websockets
• "Endpoint" is real-time pushing temperature information to "Dashboard" over Websockets

We will implement "Endpoint", "Proxy", "Node" and "Dashboard" in sequence.

Setup "Endpoint"

The following steps show that how to deploy "Endpoint" to Azure web service.

Please change your working directory to this project.

$ cd <your-path>/devify-server/templates/201-web-of-things-dashboard

The project structre is as the following.

.
├── README.md
├── esp8266
│   └── coap-temperature.lua  The sample code of "Temperature Node"
├── package.json
├── server.js                 The sample code of "Endpoint"
└── server.proxy.js           The sample code of "Proxy"

We will deploy this project to Azure App Service. Azure App Service will run server.js automatically after we finish deploying our project.

You may need to visit Microsoft Azure if you want to know more about Microsoft Azure, or you have to sign up a new Azure account.

It's suggested that you read App Service if it's the first time to use App Service of Microsoft Azure.

Step 1: Install azure-cli

$ npm install azure-cli -g

Step 2: Create Azure Site

You must login to Azure in advance:

azure login

Then use the command line to create an Aure site:

azure site create --git

Input your site information at the prompt mode. This is an example:

$ azure site create --git
info:    Executing command site create
help:    Need a site name
Name: devify-temperature
+ Getting locations                                                            
+ Getting sites                                                                
+ Getting locations                                                            
help:    Choose a location
  1) East Asia
  2) North Europe
  3) West Europe
  4) Southeast Asia
  5) West US
  6) East US
  7) Japan West
  8) Japan East
  9) South Central US
  10) East US 2
  11) North Central US
  12) Central US
  13) Brazil South
  : 7
info:    Creating a new web site at devify-temperature.azurewebsites.net
-info:    Created website at devify-temperature.azurewebsites.net              
+
info:    Executing `git init`
info:    Creating default iisnode.yml file
info:    Initializing remote Azure repository
+ Updating site information                                                    
info:    Remote azure repository initialized
+ Getting site information                                                     
+ Getting user information                                                     
info:    Executing `git remote add azure https://[email protected]/devify-temperature.git`
info:    A new remote, 'azure', has been added to your local git repository
info:    Use git locally to make changes to your site, commit, and then use 'git push azure master' to deploy to Azure
info:    site create command OK

Please append --git option to the command line. This option could make Azure CLI to add the remote git of our new created site to local project. We will use git to deploy our site.

Step 3: Get Endpoint

After finishing creating site, remember the name of your site. Please looking for the Created website at message line to get your endpoint name.

The endpoint name is devify-temperature.azurewebsites.net in this example.

Step 4: Create Site Credentials

Run the command line to create credentials (the username and password):

azure site deployment user set

This is an example:

$ azure site deployment user set
info:    Executing command site deployment user set
Git username: jollen
Git password: *********
Confirm password: *********
+ Setting user credentials                                                     
info:    site deployment user set command OK

Step 5: Deploy Site

Use git to commit and push your project files to web site:

$ git add --all
$ git commit -m 'deploy to azure'
$ git push azure master

The is an example:

$ git add --all
$ git commit -m 'deploy to azure'
$ git push azure master
Password for 'https://[email protected]': 
fatal: Authentication failed for 'https://[email protected]/devify-temperature.git/'
Moko365de-iMac:201-web-of-things-dashboard apple$ git push azure master
Password for 'https://[email protected]': 
Counting objects: 10, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (8/8), done.
Writing objects: 100% (10/10), 5.16 KiB | 0 bytes/s, done.
Total 10 (delta 1), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '0f244b55bf'.
remote: Generating deployment script.
remote: Generating deployment script for node.js Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling node.js deployment.
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Deleting file: 'hostingstart.html'
remote: Copying file: '.gitignore'
remote: Copying file: 'iisnode.yml'
remote: Copying file: 'package.json'
remote: Copying file: 'README.md'
remote: Copying file: 'server.js'
remote: Copying file: 'server.proxy.js'
remote: Copying file: 'esp8266\coap-temperature.lua'
remote: Using start-up script server.js from package.json.
remote: Generated web.config.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 4.2.3.
remote: Selected npm version 3.5.1
remote: ....
.
.
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://[email protected]/devify-temperature.git
 * [new branch]      master -> master

Step 5: Enable Websockets

To enable web sockets:

azure site set -w

This is an example:

$ azure site set -w
info:    Executing command site set
Web site name: devify-temperature
Web site slot [enter for none]: 
\ Updating site config information                     

Setup "Proxy"

The simplest way to run "Proxy" is to use the laptop.

$ cd <your-path>/devify-server/templates/201-web-of-things-dashboard
$ npm install
$ export ENDPOINT=devify-temperature.azurewebsites.net
$ export HOST=192.168.1.100
$ export PORT=8000
$ node server.proxy.js

There are three variables for configuration options.

• ENDPOINT is the endpoint name of "Endpoint" server
• HOST is the IP address of the laptop
• PORT is the listening port

Setup "Node"

Open coap-temperature.lua file. Fill in with the WiFi hotspot name and password.

wifi.sta.config("<SSID>", "<PASSWORD>")  

Then, please find this line, fix the IP address and listening port.

uri="coap://192.168.1.100:8000/object/5550937980d51931b3000009/send"

The "Proxy" and "Node" should be connected to the same WiFi station.

Setup "Dashboard"

Please install Devify CLI to speed up setup "Dahsboard".

$ npm install devify-cli

Download a sample dashboard.

$ devify ui ui-moving-line

It will download ui-moving-line repo, a simple web frontend of moving line chart.

Change directory to ui-moving-line, and start a web server to serve ui-moving-line.

$ cd ui-moving-line
$ devify serve ./

Open your browser with http://localhost:3000/index.html#testman/wot.city/temperature. You will immediately see a demo.

The URL format is as index.html#<DeviceID>/<Endpoint>/<Y-Axis-Key>.

• <DeviceID> is the device ID, please check it out with the URI in coap-temperature.lua
• <Endpoint> is the "Endpoint"
• <Y-Axis-Key> is the key of the display value, please check it out with JSON output in coap-temperature.lua

This is an example:

index.html#5550937980d51931b3000009/devify-temperature.azurewebsites.net/temperature