6. 从零到一：用MIT App Inventor打造专属手机APP，实时显示STM32上传至阿里云的数据

1. 项目背景与准备工作

第一次把STM32的数据成功上传到阿里云时，我兴奋地刷新着网页控制台看数据变化。但很快发现这太不方便了——总不能随时随地开电脑吧？于是决定做个手机APP来实时查看数据。MIT App Inventor这个可视化编程工具完美解决了我的需求，不需要懂Java就能开发安卓应用，特别适合物联网爱好者快速实现想法。

你需要准备：

• 已完成STM32+ESP8266连接阿里云的项目（前5篇教程基础）
• 阿里云物联网平台账号（免费版即可）
• 电脑浏览器（推荐Chrome）
• 安卓手机（用于测试APP）

我用的硬件组合是STM32F103C8T6+ESP-01S，成本不到50元。软件方面除了阿里云，主要用两类工具：

1. 开发工具：Keil for STM32编程，串口助手调试AT指令
2. APP开发：MIT App Inventor网页版（完全免费）

注意：所有操作在普通网络环境下即可完成，不需要特殊网络配置

2. 阿里云双设备配置实战

2.1 创建APP专用设备

登录阿里云物联网平台，进入之前创建的产品。点击"设备管理"→"添加设备"，新建一个名为"app_device"的设备。这个设备将作为手机APP与阿里云通信的桥梁，和STM32设备属于同一产品下。

关键点在于：

• 设备名称建议全小写不带特殊字符
• 记住三元组信息（后续APP连接要用）
• 不需要重新定义物模型（沿用现有定义）

2.2 建立数据流转Topic

在"Topic类列表"中新建两个Topic：

1. /sys/a1xxxxxx/device1/thing/event/property/post （STM32上传原始数据）
2. /sys/a1xxxxxx/app_device/user/get （APP接收数据）

务必将app_device的Topic权限设置为"发布和订阅"，否则会导致数据无法接收

3. 云产品流转规则设置

3.1 配置数据转发规则

进入"云产品流转"→"创建规则"，按以下步骤操作：

1. 规则名称填"STM32_to_APP"
2. 数据源选择STM32设备
3. 编写SQL语句：

sql复制SELECT 
    deviceName() as deviceName,
    items.temperature.value as temperature,
    items.humidity.value as humidity 
FROM 
    "/sys/a1xxxxxx/device1/thing/event/property/post"

3.2 设置数据目的地

在"转发数据"部分：

1. 目标选择"发布到另一个Topic"
2. 目标Topic填写/sys/a1xxxxxx/app_device/user/get
3. 启动规则后记得点击"启动"按钮

我在这里踩过坑：第一次忘记启动规则，调试了半天才发现。所以特别提醒大家要确认规则状态是"运行中"。

4. MIT App Inventor开发详解

4.1 界面设计

访问MIT App Inventor官网，新建项目。主要组件包括：

• Web客户端：用于MQTT通信
• 标签：显示连接状态
• 表格布局：展示传感器数据
• 按钮：手动刷新功能

设计技巧：

• 使用水平排列布局适应不同屏幕
• 设置组件宽度为"充满"提升显示效果
• 添加蓝色标题栏提升专业感

4.2 关键代码块

在"逻辑设计"中拖拽以下模块：

1. 连接阿里云：

blocks复制当 连接按钮.点击 执行
设置 Web客户端.连接参数
    MQTT主机: "a1xxxxxx.iot-as-mqtt.cn-shanghai.aliyuncs.com"
    端口: 1883
    客户端ID: "a1xxxxxx|securemode=3,signmethod=hmacsha1|"
    用户名: "app_device&a1xxxxxx"
    密码: "计算得到的加密字符串"
调用 Web客户端.连接

2. 数据解析处理：

blocks复制当 Web客户端.收到消息 执行
如果 收到消息.Topic = "/sys/a1xxxxxx/app_device/user/get" 则
    设置 温度标签.文本 = 连接JSON文本解析(收到消息.消息内容,"temperature")
    设置 湿度标签.文本 = 连接JSON文本解析(收到消息.消息内容,"humidity")

5. 调试与优化技巧

5.1 常见问题排查

• 连接失败：检查三元组信息是否与阿里云一致，特别注意时间戳有效期
• 收不到数据：确认云流转规则已启动，用MQTT.fx工具测试Topic是否正常
• 数据显示异常：检查物模型标识符是否完全匹配，包括大小写

5.2 性能优化建议

1. 添加数据缓存机制，避免网络中断时界面空白
2. 实现自动重连功能，设置10秒心跳包
3. 增加数据图表展示，用扩展组件实现曲线绘制

实测发现，在4G网络下平均延迟约1.2秒，WiFi环境下可降至800毫秒。对于温湿度监控这类场景完全够用。如果想进一步降低延迟，可以调整阿里云地域选择（就近原则），或者改用TCP直连方式。

6. 项目扩展思路

完成基础功能后，可以尝试这些进阶玩法：

• 添加报警功能：当温度超过阈值时手机震动
• 实现历史数据查询：调用阿里云API获取过去24小时数据
• 开发控制功能：通过APP下发指令控制STM32继电器

我在自己的智能花盆项目中就扩展了浇水控制功能。当土壤湿度低于20%时，APP不仅会弹窗提醒，还能一键启动水泵。整个过程从传感器到APP完全自研，这种成就感是现成APP无法比拟的。