跨越地平線: 物聯網軟硬體整合技術圖譜

1. 李健榮
Simen Li
simen.li@sivann.com.tw
Tutorial
跨越地平線
物聯網軟硬體整合技術圖譜

2. 關於我
2
竹科
北科
內科
E.E.狂想曲
www.eebreakdown.com
相量大法好
www.yottau.com.tw

3. 今天談什麼
3
目標放在軟硬體整合的概念，先從大家熟悉的硬體開始
因為我們只有一個小時
Machine x Frontend x Backend
「硬體是怎麼樣跟軟體結合，在系統中動起來的呢？」
解開那些曾經存在我心中的謎團

4. 人物
4
Mark Weiser US, 1952 -1999
普適計算之父、思想@1988
Tim Berners-Lee UK, 1955 -
WWW/Web 之父、HTTP@1990、W3C 創辦人@1994、爵士@2004、
Time 100@2009
Kevin Ashton UK, 1968 -
Auto-ID Lab、Auto-ID Center (MIT)、全球標籤產品網路、
Internet of Things 術語之父@1999

5. Web of Things (WoT)
5
IoT 的最終匯聚之地
後端
Backend
前端
Frontend
機器網路
M2M Network

6. 技術鳥瞰
6
各層面有不同的軟硬體開發工具
Web / Mobile / Desktop Apps
Cloud / Web Service
Edge / Field Devices
Sensors, Actuators, Displays
Wired Nodes Non-IP Nodes IP Nodes
Conventional / Smart Gateway
Embedded Systems
Operation Technology
Backend Services
Network/Infrastructure
Information Technology
GUI Development

7. OT/IT
7
這其中有一些問題存在
7
7
業務邏輯與應用軟體 (Mobile Apps, Web Apps, …)
M2M 整合平台
舊：內部／私有伺服器
新：外部／雲端服務
Edge Nodes
IoT應用M2M應用
本地場域自動化
資料/訊息濃縮
現場總線介面／資料
IT
Information Technology
OT
Operational Technology
企業應用介面
Domain Know-How

8. 8
硬體如何在系統中動起來
軟硬體整合
Tutorial
01

9. 數位可調增益放大器
9
假設這是一個千年大作
𝐴 𝑣 = −
𝑅𝑓
𝑅𝑖
+
−𝑣𝑖𝑛
𝑣 𝑜𝑢𝑡
𝑅𝑓
𝑅𝑖
𝐺𝐶𝑊
𝑣𝑖𝑛 𝑣 𝑜𝑢𝑡
𝐺𝐶𝑊
硬體規格
…
…
GCW: 3-bit wide, 8 Levels
3 - b i t w i d e
V G A

10. Application Processor
10
將你的硬體整合進某種應用系統
𝑣𝑖𝑛 𝑣 𝑜𝑢𝑡
𝐺𝐶𝑊
AP
3 - b i t w i d e
AP韌體
占 用 3 支 G P I O s
#1 直接讀寫暫存器
GPIOA->BRR = 0x01;
P1_bit.P1_0 = 1;
#2 使用 HAL Driver
GPIO_SetBits(GPIOB, GPIO_Pin_0);
HalGpioSet(HAL_GPIO_4, 1);
#3：包裝成函式(或函式庫)
VGA_Set_Gain(6);

11. 高精度 VGA
11
總共有 1024 個 Levels 可調
𝑣𝑖𝑛 𝑣 𝑜𝑢𝑡
𝐺𝐶𝑊
AP
1 0 - b i t w i d e
AP韌體
占 用 1 0 支 G P I O s
#1 直接讀寫暫存器
GPIOA->BRR = 0x01;
P1_bit.P1_0 = 1;
#2 使用 HAL Driver
GPIO_SetBits(GPIOB, GPIO_Pin_0);
HalGpioSet(HAL_GPIO_4, 1);
#3：包裝成函式(或函式庫)
VGA_Set_Gain(820);

12. 超級 VGA 陣列
12
一顆 IC 內封裝了 8 組高精度 VGAs
𝑣𝑖𝑛1 𝑣 𝑜𝑢𝑡1
𝐺𝐶𝑊1
𝑣𝑖𝑛8 𝑣 𝑜𝑢𝑡8
𝐺𝐶𝑊8
𝑣𝑖𝑛_𝑁 𝑣 𝑜𝑢𝑡_𝑁
𝐺𝐶𝑊_𝑁
需要96根Pins
顯然不合理
8 0 - b i t w i d e
V G A
8 i n p u t s 8 o u t p u t s

13. 改進：超級 VGA 陣列
13
內部使用暫存器來儲存增益設定
𝑣𝑖𝑛_𝑁 𝑣 𝑜𝑢𝑡_𝑁
𝐺𝐶𝑊
96根Pins降到29根
1 0 - b i t w i d e
V G A
8 i n p u t s 8 o u t p u t s
𝑣𝑖𝑛1 𝑣 𝑜𝑢𝑡1
𝐺𝐶𝑊1
𝑣𝑖𝑛8 𝑣 𝑜𝑢𝑡8
𝐺𝐶𝑊8
GCW1 GCW2 GCW7 GCW8
DEMUX
𝑆𝐸𝐿𝐺𝐶𝑊
𝑆𝐸𝐿
3 - b i t w i d e

14. 再改進：超級 VGA 陣列
14
使用介面通訊，VGA 內部設計剖析器
𝑣𝑖𝑛_𝑁 𝑣 𝑜𝑢𝑡_𝑁
96根Pins降到29根
再降到18根
(僅考慮資料線，不考慮GND)
2 - b i t w i d e
V G A
8 i n p u t s 8 o u t p u t s
𝑣𝑖𝑛1 𝑣 𝑜𝑢𝑡1
𝐺𝐶𝑊1
𝑣𝑖𝑛8 𝑣 𝑜𝑢𝑡8
𝐺𝐶𝑊8
GCW1 GCW2 GCW7 GCW8
𝐷𝐴𝑇𝐴
𝐷𝐴𝑇𝐴TRX & Parsing Unit
SOF SEL EN GAIN EOF (UART, 1-Wire, 3-Wire, I2C, …)

15. Application Processor
15
將你的硬體整合進某種應用系統
𝑣𝑖𝑛 𝑣 𝑜𝑢𝑡
𝐺𝐶𝑊
AP
2 - b i t w i d e
AP韌體
占 用 2 支 G P I O s
#1 直接讀寫TRX暫存器 (如果有)
SCON_bit.SM0 = 0;
SBUF = data;
#2 使用 HAL Driver
Hal_Uart_Send(pMsg, len);
Hal_Send_Bytes(pBuf, len);
#3：包裝成函式(或函式庫)
VGA_Set_Gain(N, gain);
TRX
TRX

16. 範例
16
Driver of ADF4113 4.0 GHz Frequency Synthesizer
Ref: ADF4110/ADF4111/ADF412/ADF4113 RF PLL Frequency Synthesizers Data Sheet Rev. F, Analog Devices Inc.

17. 範例
17
AP
3 - b i t w i d e
占 用 3 支 G P I O s
TRX
Driver of ADF4113 4.0 GHz Frequency Synthesizer
𝑆𝐶𝐿𝐾
𝑆𝐷𝐴𝑇𝐴
𝐿𝐸
𝐶𝐸
𝐿𝐷𝐸𝑇
ADF4113
src: https://github.com/simenkid/adf4113_driver

18. 範例
18
Driver of ADF4113 4.0 GHz Frequency Synthesizer

19. SoC
19
內建超級 VGA
Super VGA
0x0000_0000
Vender Specific
External Device
External RAM
Peripherals
SRAM
CODE
0xFFFF_FFFF
0xE000_0000
0xDFFF_FFFF
0xA000_0000
0x9FFF_FFFF
0x6000_0000
0x5FFF_FFFF
0x4000_0000
0x3FFF_FFFF
0x2000_0000
0x1FFF_FFFF
Memory Mapping
Super VGA
CMSIS
ARM Core
Chip SDK
Board SDK
Ref: STM32F030xC Value-line ARM®-based 32-bit MCU Data Sheet Rev. 3, STMicroelectronics, Jan. 2017

20. System Bus
20
在電腦的情況
CPU PCI Bridge RAML2 Cache
cache bus mem bus
I/O Bridge
(Southbridge)
Disk
(ATA)
LAN Graphics
USB
Disk
(IDE)
ISA Audio
Mouse Keyboard PrinterDMA
Poll/Interrupt
PCI/PCI-E bus
PCI/ISA bus

21. OS
21
For example: Embedded Linux
OS
User Space
Device Driver
Block Char
Platform Driver
V G A
檔案操作
/sys/class/gpio/
…
檔案操作
/dev/ttyO1
…

22. 22
知道硬體是如何透過軟體在系統中動起來
就可以展開 IoT 節點與閘道器設計的征途
TL;DR
再加上一點點對通訊協定的了解

23. 23
訊號如何在遠端裝置之間傳輸
訊號的傳輸
Tutorial
02

24. 無線通訊協定
24
按應用之物理範疇區分
Proximity
5 km10 cm 100 km
WPAN WHAN WFAN WLAN WNAN Cellular (licensed)WWAN
LPWA (unlicensed)
LPWA (licensed)
Personal
Home
Factory
Local
Neighbor
Wide-Area
ZigBee
ZWave
Thread
(6LoWPAN)
Enocean
…
WirelessHART
ISA 100.11a (6LoWPAN)
…
Bluetooth
ANT+
…
802.11
a/b/g/n/ac
ah/p/af
Wi-SUN (6LoWPAN)
ZigBee NAN (6LoWPAN)
Wireless M-Bus
…
LoRa
SigFox
Telensa
…
LTE
LTE-MTC
GSM
WCDMA
EC-GPRS
CDMA2000
WiMAX
3GPP NB-IoT
NFC

25. 常見的協定堆疊
25
OSI 7 Layers
Physical
Data Link
Network
Transport
Session
Presentation
Application
IP Suite
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

26. 通訊抽象
26
以 Socket 為例
User Process User Process User Process
Socket
(system abstraction of comm)
TCP UDP
IP
PHY
TCP
Socket()
Connect()
Send/Receive()
Close()
Listen()
Accept()
Send/Receive()
Close()
Bind()
Socket()
建立連接
阻塞
Client
Server
Socket programming

27. 27
雖然通訊不一定總是抽象成 Socket (或者被抽象為更高層次)
是組織和管理機器網路的必要之途
TL;DR
對於選定的協定有所了解

28. 28
人機互動介面的設計
應用可視化
Tutorial
03

29. 最早的 Web
29
文字檔 (text) 加上一種鏈結標籤結構的文字檔 (hypertext)，可在網路中連來連去
後端
Server
Web 1.0
前端
靜態
前端是靜態的，
它是後端 MVC 的 V
Router
/Controller
前端
Client
HTTP REQ
HTML
HTTP RSP
模板引擎 (Template Engine)

30. Ajax/Comet
30
不用 Reload 也能刷新網頁的技術
Asynchronous JavaScript + XML
Web 2.0+
Web 2.0
動態、即時、互動性強、從「頁面」走向「應用程式」
後端
Server
Router
/Controller
前端
前端
Client
動態
HTMLHTTP RSP
HTTP REQ
JS
WS
SSE
AJAXJS
HTML
前端可以獨立獲取數據，
因此有了自己的 MVC

31. MVX
31
模型與視圖分離
V M
C
user
update/ind
MVC Model 2 (Web 1.0)
V M
C
user V
HTTP
Server SideClient Side
MVP (Web 2.0+)
V M
P
user M
Notify/
ajax poll
Client Side Server Side
MVVM (Framework)
V Muser M
Notify/
ajax poll
Client Side Server Side
VM

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

33. 測試框架/工具
33
不管開發什麼，軟體設計都需要做測試 TL;DR
Test Framework
Assertions Test Double
Code
Coverage
Hosted CI Services
mocha,
jasmie-node,
tape, tap
assert, should, expect, chai sinon.js
istanbul,
JSCover,
blanket.js
Travis CI, Circle CI, GitLab CI, wercker, codeship

34. 34
前端是跟使用者最靠近的部分
選一種自己想要的方式去做
TL;DR
前端 作法/框架/工具… = 五花八門

35. 35
在 Web 的服務設計
建應用服務
Tutorial
04

36. Concurrency
36
工作拆分與組織，多個工作一起進行中，不等於同時執行中
Concurrency is a way to structure a thing so that you can, maybe, use
parallelism to do a better job. But parallelism is not the goal of concurrency;
concurrency's goal is a good structure.
- R. Pike, Golang co-inventor
TCP
Server
Tasks spread over threads
Requests
t
TCP
Server
Tasks spread over time
Requests
t

37. Web Server
37
伺服器要同時服務很多客戶才行
Client
Client
Client
Client
HTTP Server
Port 80
Accept
TRX/Processing
Client
Client
Client
Client
HTTP Server
Port 80
Accept
Create
TRX/Processing
TRX/Processing
TRX/Processing
TRX/Processing
Child/Thread

38. 負載平衡
38
一種工作量要分散開的概念
Client
Client
Client
Client
HTTP Server
負載層
Application Server
帳戶系統 訂單系統
物流系統 XX系統
靜態資源
Application Server
帳戶系統 訂單系統
物流系統 XX系統
Application Server
帳戶系統 訂單系統
物流系統 XX系統
Load Balance

39. 負載平衡
39
一種工作量要分散開的概念
Client
Client
Client
Client
HTTP Server
負載層
Application Servers
業務服務層
帳戶系統
訂單系統
物流系統
靜態資源
XX系統
或是這樣

40. 負載平衡
40
Example: Niginx + Tomcat
Client
Client
Client
HTTP Server
Niginx
Tomcat
App
Cache
Database
HTTP Server
Niginx
Client
Client
Client
Cache
Database
Tomcat
App
Tomcat
App
Tomcat
App
記憶體耗盡？

41. 快取
41
記憶體資料庫：Redis
HTTP Server
Niginx
Client
Client
Client
Redis
Database
Tomcat
App
Tomcat
App
Tomcat
App
Redis
Redis
Cache Sharding

42. 負載平衡單點失效
42
高可用性 (HA)
HTTP Server
NiginxClient
Client
Client
Redis
Database
Tomcat
App
Tomcat
App
Tomcat
App
Redis
Redis
Cache Sharding
Standby
Niginx
Keepalived

43. 資料庫
43
高可用性 (HA)
HTTP Server
NiginxClient
Client
Client
Redis
Database
Tomcat
App
Tomcat
App
Tomcat
App
Redis
Redis
Cache Sharding
Standby
Niginx
Keepalived
還有Database
交易ACI D 、讀寫分離、冗餘、一致性之類的 …TL;DR

44. Linux Virtual Server
44
建立網路中的負載平衡管理器
Client
Client
Client
LVS Server
Real Server
Real Server
Real Server
Real Server

45. 增加吞吐量
45
LVS + Load Balancer
LVS
ServerClient
Client
Client
Niginx #1
Niginx #2
Niginx #3
業務服務叢集
Standby
LVS Server
Keepalived

46. 46
後端實在博大精深
總之，先把服務給 Run 起來
TL;DR
要學的東西太多了 比如說安全性、單點登入、容器之類的

47. 47
有人說．．．
雲端服務
Tutorial
05

48. Cloud Services
48
高水平擴展性、高可用性、按需付費
IaaS
基礎設施即服務
Infrastructure as a Service
Amazon AWS
Digital Ocean
Linode
Google GCP
Microsoft Azure
PaaS
平台即服務
Platform as a Service
Heroku
Google App Engine
Amazon AWS
Microsoft Azure
OpenShift
SaaS
Software as a Service
軟體即服務
iCloud
Google Apps (Gmail, …)
Office 365
Evernote
SAP S/4HANA

49. Cloud Stack
49
各有其優勢與目標客戶
Ref: Michael Kavis, Architecting The Cloud: Design Decisions for Cloud Computing Service Model, New Jersey: Wiley, 2014
Service Models Cloud Stack Stack Components Who is Responsible
IaaS
PaaS
SaaS
Infrastructure
Application Stack
Application
User
Data Center Disk Storage
Servers Firewall
Network Load Balancer
OS Language
App Server Middleware
Database Monitoring
Authentication Authorization
User Interface Transactions
Reports Dashboard
Login
Registration
Administration
Vendor
PaaSVendor
SaaSVendor
Customer
Customer
Customer

50. 追求精緻卓越
謝謝
敬請指教