1.
Full-Stack IoT Development
探索之旅
Simen Li
simen.li@sivann.com.tw
www.sivann.com.tw

2.
物聯網
1
異
質
混
合
機
器
區
網
同
質
網
路
獨
立
連
網
Cloud/Web
物聯網方案不會只有一種，
但它們都往
同一個地方匯流。
這意味著「 」

3.
Full-Stack Web Development
2
前端 後端
全端
Example
MEAN Stack
前端語言：JavaScript, HTML, CSS
前端(框架)：JQuery, Bootstrap, Handlebars, Backbone, Angular, React, 五花八門
後端語言：Node.js, PHP, Ruby, Python, ...
後端框架：Express, Laravel, Rails, Django, ...
資料庫：SQL, MongoDB, …

4.
Full-Stack IoT Development
3
前端
後端
機器網路
公開或專用、私有標準
通訊協定的選擇
節點硬韌體 (通訊晶片/模組)
是否需要閘道器
機器網路管理
裝置連網有簡單、也有複雜的做法
使 Web 開發者輕鬆投入 IoT 成為可能

5.
不 Full-stack 都不行
4
物聯網
應用
 Web/Cloud 服務
 儲存設施
 API Gateway
 周邊裝置設計 (硬/韌體)
 組織網路 (PAN/WAN) 與網管
 (本地) 機器網路應用程式
 閘道器之需求與設計
 視覺設計
 體驗設計
 (跨平台)應用程式

6.
Web Front End and
Back End
5

7.
Web Front/Back Ends
6
後端
Server
傳統架構 (Web 1.0)
前端
靜態
前端是靜態的，
它是後端 MVC 的 V
Router
/Controller
前端
Client
模板引擎 (Template Engine)

8.
Ajax/Comet
7
Web 2.0+：動態、即時、互動性強
前端從「頁面」走向「應用程式」
後端
Server
Router
/Controller
前端
前端
Client
動態
HTML
HTTP RSP
JS
WS
SSE
AJAXJS
HTML
Web 2.0+
前端可以獨立獲取數據，
因此有了自己的 MVC

9.
在後端環境進行前端開發
8
Task
Runner
Package Manager
Pre-compiler
Transpiler
Bundler
Linter
Dev
Server
npm, bower, spm, pip, gem
webpack, RequireJS (AMD), Browserify (CommonJS)
Non-JS Resources (via plugin, transform, loader)
Babel (ES6, ES7, JSX), less, sass
Utils
JSHint, ESHint
uglify, watchify
grunt, gulp,
npm, webpack

10.
Node.js
9
Node.js Core
Node.js Bindings (C++)
Google V8 (C++) libuv
JavaScript Engine Cross-platform Async I/O
Server-side, JS runtime
┌───────────────────────┐
┌─>│ timers │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O callbacks │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ idle, prepare │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ poll │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ check │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
└──┤ close callbacks │
└───────────────────────┘
[ ]
[ ]
[ ]
[ ]
[ ]
[ ]
Concurrency – Event Loop
Network I/O
TCP, UDP, TTY, …
File
I/O
DNS
Ops.
User
code
uv__io_t
epoll kqueue event ports
IOCP
TRD
Pool
Linux OSX/BSD SunOS Windows
Async I/O – libuv

11.
設計命令行工具 (CLI Tool)
10
使用 JavaScript 寫命令行工具
process.argv[]
命令行剖析／問答式框架
 node-optimist minimist (substack)
 nomnom commander (tj)
 yargs
 inquirer, liftoff, vantage, vorpal
終端著色 / 圖形工具 / 框架
 chalk, cli-color
 clui, ora, cli-spinners
 blessed, react-blessed

12.
除錯工具
11
$ npm install iron-node -g
$ iron-node app.js
$ npm install devtool -g
$ devtool app.js
Chrome DevTools
IDE 內建/外掛除錯環境
 WebStorm, VS Code, Cloud9, Nuclide, Eclipse, ATOM, brackets, …
break; $ node debug app.js # c, n, s, o
$ npm install node-inspector -g
$ node-debug app.js
原生除錯工具
第三方工具

13.
除錯訊息與日誌 (Logging)
12
stdout / stderr [ + pipe ] [ + redirect ]
時間戳
格式
層級
位置
uuid
捲動
console.log();
console.error();
$ node app.js
$ node app.js > ./mylog
$ npm install winston --save
$ node app.js
$ npm install bunyan --save
$ node app.js | bunyan [opts]
$ npm install pino --save
$ node app.js | pino-<xxx>
json
text$ npm install debug --save
$ DEBUG=namespace node app.js
 intel, log4js, loggly, bole
第三方模組

14.
測試框架/工具
13
Test Framework
Assertions Test Double
Code
Coverage
Hosted CI Services
Travis CI, Circle CI, GitLab CI, wercker, codeship
mocha,
jasmie-node,
tape, tap
istanbul,
JSCover,
blanket.js
sinon.jsassert, should, expect, chai

15.
物聯網大亂鬥
14

16.
網路拓撲
15
E C
Point-to-Point
Star Network
C
E
E
EE
E
E
Star-of-Starts Network
C
E
G E
E
E
E
GE
E
E
Mesh Network
C
E
E E
E
E
R
R
RE
R R
R E
E

17.
依區域範疇劃分
16
# 空間範疇 典型距離 協定範例
1 Near Field < 10 cm NFC Forum
2 PAN 1 m ~ 50 m Bluetooth, ZigBee, Thread, IEEE 802.15.4
3 LAN 50 m ~ 1 km Wi-Fi, Ethernet
4 (LP)WAN 1 km ~ 50 km SigFix, LoRa, 5G, 4G, 3G, Internet
距離
資
料
傳
輸
率 LPWAN
WANPAN
LAN

18.
常見 PAN/WAN 之特性
17
# 協定 耗電量 室內距離 MESH 開放度 易用度 網際網路
1 EnOcean 非常低 < 30 m 否 低 中等 否
2 ZigBee 低 < 50 m 是 低 困難 否
3 Thread 低 < 50 m 是 中 中等 是
4 BLE 低 < 50 m 2016 (否) 中 中等 否
5 WiFi 高 (新低) < 30 m 否 高 簡單 是
# 協定 耗電量 距離 下行 開放度 覆蓋率
1 Weightless 非常低 20+ km 受限 中 中
2 SigFox 非常低 30+ km 受限 低 中高
3 LoRa 非常低 30+ km 受限 中 中
4 3G/4G 高 50+ km 是 高 高
5 5G 非常低 未知 未知 高 部分佈建

19.
協定堆疊
18
OSI
7 Layers
Physical
Data Link
Network
Transport
Session
Presentation
Application
Internet Protocol
Suite (TCP/IP)
Application
Transport
Network
Physical
(Link)
FTP
TLS SSL
ZigBee
IEEE 802.15.4
6LoWPAN IPv6 IPv4
IEEE 802.3/
IEEE 802.11
(Ethernet/WiFi)
TCPUDP
HTTPMQTTMQTT-SNCoAP
SigFox
LoRa
EnOcean
BLE
Thread

20.
LWM2M：輕量型機器對機器協定
19
網路組織與裝置管理
Machine ServerBootstrap Server
Machine Network Management Layer (REST Interface)
register deregister update read write
write attrs execute create delete observe
bootstrap
notify
end-nodes
 LWM2M URLs /{object}/{instance}/{resource}
/3303/0/5700 (= /temperature/0/sensedValue)

21.
BLE
20
降低物聯網應用開發門檻。
立志以 Node.js 掀起全端物聯網開發革命！
機器網路
後端
前端
LoRa Thread
01
02
03
04
ZigBee
CoAP
MQTT