Azure IoT Service and Remote monitoring widget setup and customization

1. Caesar Chi
Remote monitoring
widget setup and customization
EXMA-Square

2. Agenda
Azure Iot 環境簡介及數據困境
Open source 解決⽅案 - Remote Monitoring Solution with Azure IoT
基礎架構說明及安裝需知
使⽤介紹及安裝
客製化設置及內部組件建立介紹
客製化設置加入外部數據

6. 雲端架構
企業內部開發

7. 雲端架構
企業內部開發
操作介⾯
數據視覺

9. https://azure.microsoft.com/zh-tw/resources/videos/iot-remote-monitoring-demo/

10. Remote
Monitoring
UI
https://github.com/Azure/pcs-remote-monitoring-webui

11. 需要具備基本概念
• JavaScript
• Node.js
• React / Redux
• Bootstrap

12. ⽀援公司與法律疑問
執⾏單位 ⽀援公司 授權範圍
JavaScript JS Foundation
Microsoft / Google / Firefox /
Apple …
MIT
Node.js JS Foundation Microsoft / Google / Netflix … MIT
React / Redux Facebook
Facebook / Microsoft / Twitter
…
MIT
Bootstrap Twitter Twitter / Microsoft / Google … MIT

13. 運作介紹
https://github.com/Azure/pcs-remote-monitoring-webui

14. npm install
套件安裝

15. npm run start
啟動指令

16. 客製化
Widget
https://github.com/Azure/pcs-remote-monitoring-webui

17. https://getbootstrap.com/docs/5.0/layout/grid/

18. https://getbootstrap.com/docs/5.0/layout/grid/

19. https://getbootstrap.com/docs/5.0/layout/grid/

20. https://getbootstrap.com/docs/5.0/layout/grid/

21. https://getbootstrap.com/docs/5.0/layout/grid/

22. https://getbootstrap.com/docs/5.0/layout/grid/

23. Maintenance - Error tasks management

25. https://azure.microsoft.com/zh-tw/resources/videos/iot-remote-monitoring-demo/

26. Make the World
Better
Thanks
https://exma-square.co/