ThingsBoard 组件开发实战
🎯
30章 · 从入门到高阶
1
平台初探
架构·租户·设备·资产·仪表板·组件生态
2
开发环境准备
Node.js · VS Code · Docker 本地搭建
3
第一个自定义组件
Widget项目结构 · config · bundle
4
Widget核心API详解
self · settings · datasources · timewindow · state
5
HTML模板与CSS样式
Flex/Grid · 响应式 · 组件UI结构
6
JavaScript逻辑编写
数据订阅 · 事件处理 · DOM操作
7
数据源绑定
单/多数据源 · DataKey映射
8
时间窗口控制
时间选择器 · 实时刷新 · 历史回放
9
组件设置面板开发
settings schema · 配置UI · 保存加载
10
Action与交互
点击 · 悬停 · 自定义Action触发
11
RPC调用集成
发送RPC · 响应处理 · 状态显示
12
告警与状态显示
告警API · 状态指示灯 · 告警列表
13
图表组件开发 (上)
ECharts基础 · 折线/柱状 · 动态更新
14
图表组件开发 (下)
tooltip · legend · dataZoom · 多Y轴
15
表格组件开发
动态渲染 · 排序 · 筛选 · 分页
16
地图组件开发
Leaflet/OpenLayers · 标记 · 轨迹回放
17
仪表盘(Gauge)开发
Canvas/SVG · 指针动画 · 阈值颜色
18
自定义CSS主题
主题变量 · 暗黑模式 · 品牌色系
19
国际化(i18n)支持
多语言配置 · 动态切换 · 日期/数字
20
组件性能优化
虚拟滚动 · 节流/防抖 · 内存泄漏
21
高级数据聚合
AVG/SUM/MIN/MAX · 时间桶配置
22
WebSocket深度解析
协议 · 连接管理 · 重连 · 心跳
23
组件间通信
EventBus · 跨Widget共享 · 全局状态
24
自定义Action Provider
可复用Action · 参数传递 · 链式调用
25
组件测试与调试
Chrome DevTools · 模拟数据 · Jest
26
打包与部署
Widget Bundle · 上传 · 版本管理 · 热更新
27
ThingsBoard API深度使用
REST API · 设备/遥测/属性 · 鉴权
28
复杂业务实战 (一)
设备监控大屏 · 多图表联动 · 控制面板
29
复杂业务实战 (二)
能源管理 · 趋势分析 · 能耗排名 · 预测
30
课程总结与进阶
3.x vs 2.x · Edge · AI集成 · 社区资源