Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

4.451 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Ingenieurwesen
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

  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

×