Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

全端物聯網探索之旅 - 重點整理版

3 780 vues

Publié le

對 Full-Stack IoT Development 與 Node.js 的導覽

Publié dans : Ingénierie
  • Soyez le premier à commenter

全端物聯網探索之旅 - 重點整理版

  1. 1. Full-Stack IoT Development 探索之旅 Simen Li simen.li@sivann.com.tw www.sivann.com.tw
  2. 2. 物聯網 1 異 質 混 合 機 器 區 網 同 質 網 路 獨 立 連 網 Cloud/Web 物聯網方案不會只有一種, 但它們都往 同一個地方匯流。 這意味著「 」
  3. 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. 4. Full-Stack IoT Development 3 前端 後端 機器網路 公開或專用、私有標準 通訊協定的選擇 節點硬韌體 (通訊晶片/模組) 是否需要閘道器 機器網路管理 裝置連網有簡單、也有複雜的做法 使 Web 開發者輕鬆投入 IoT 成為可能
  5. 5. 不 Full-stack 都不行 4 物聯網 應用  Web/Cloud 服務  儲存設施  API Gateway  周邊裝置設計 (硬/韌體)  組織網路 (PAN/WAN) 與網管  (本地) 機器網路應用程式  閘道器之需求與設計  視覺設計  體驗設計  (跨平台)應用程式
  6. 6. Web Front End and Back End 5
  7. 7. Web Front/Back Ends 6 後端 Server 傳統架構 (Web 1.0) 前端 靜態 前端是靜態的, 它是後端 MVC 的 V Router /Controller 前端 Client 模板引擎 (Template Engine)
  8. 8. Ajax/Comet 7 Web 2.0+:動態、即時、互動性強 前端從「頁面」走向「應用程式」 後端 Server Router /Controller 前端 前端 Client 動態 HTML HTTP RSP JS WS SSE AJAXJS HTML Web 2.0+ 前端可以獨立獲取數據, 因此有了自己的 MVC
  9. 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. 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. 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. 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. 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. 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. 15. 物聯網大亂鬥 14
  16. 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. 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. 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. 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. 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. 21. BLE 20 降低物聯網應用開發門檻。 立志以 Node.js 掀起全端物聯網開發革命! 機器網路 後端 前端 LoRa Thread 01 02 03 04 ZigBee CoAP MQTT

×