跳转到内容
ESP32 IoT 教程

Scratch可视化编程入门

Scratch可视化编程入门

Section titled “Scratch可视化编程入门”

前置条件

Section titled “前置条件”
  • 基本熟悉Scratch或其他积木式编程界面
  • ESP32开发板

关键概念

Section titled “关键概念”

什么是可视化编程？

可视化编程让用户无需编写C++语法，而是通过拖放逻辑积木块来构建程序。积木块代表循环、条件判断、变量操作等编程概念，用户只需将它们像拼图一样组合即可。

为什么ESP32开发特别适合引入可视化编程？

ESP32的硬件交互（LED闪烁、传感器读取、Wi-Fi连接）能让学生立刻看到编程的物理效果。可视化编程特别适用于以下场景：

  • K-12教育：学生学习编程逻辑而无需为语法困扰
  • 快速原型：无需写代码即可快速测试硬件想法
  • 非开发者受众：产品经理、设计师和教育工作者快速了解ESP32能力
  • 工作坊设置：短时间课程中重点在硬件交互而非编码

有哪些支持ESP32的可视化工具？

工具基础技术平台代码生成最适合
mBlockScratch 3.0桌面/WebArduino C++K-12 STEM项目
MixlyGoogle Blockly桌面(多OS)Arduino C++中国教育市场
ArduBlockOpenBlocksArduino IDE插件标准Arduino代码从积木过渡到文本编程
Arduino PLC IDE-桌面-工业（不推荐ESP32）

mBlock与其他工具相比有什么优势？

mBlock是目前最成熟的ESP32 Scratch平台。它支持：

  • 拖放积木块生成Arduino C++代码
  • 积木视图与代码视图切换
  • 内置串行监视器
  • 直接上传到ESP32
  • Wi-Fi和MQTT积木块扩展

Mixly是中国教育市场的主力选择（~100 MB轻量安装，中英文界面）。ArduBlock则适合已在Arduino IDE中工作、希望渐进过渡的用户。

实现步骤

Section titled “实现步骤”

如何安装mBlock并连接ESP32？

  1. 从 mblock.makeblock.com 下载并安装桌面应用程序
  2. 启动mBlock，进入 Devices 标签，添加新设备
  3. 搜索”Arduino”或”ESP32”，选择适当开发板（如”Arduino Uno”——mBlock用作通用代码生成器）
  4. 通过USB连接ESP32

注意：mBlock生成Arduino C++代码，通过标准Arduino上传过程上传。你需要预先安装ESP32 Arduino Core（见01-04）。

如何创建第一个闪烁程序？

按顺序拖放以下积木块：

  1. 从 Events 拖出”when Arduino starts”
  2. 从 Control 拖出”forever”循环
  3. 在循环内依次添加：
    • Pins → “set pin 2 to HIGH”
    • Control → “wait 1 seconds”
    • Pins → “set pin 2 to LOW”
    • Control → “wait 1 seconds”
when Arduino starts
  forever
    set pin 2 to HIGH
    wait 1 seconds
    set pin 2 to LOW
    wait 1 seconds

点击 Upload 编译上传。大多数ESP32 DevKit的内置LED在GPIO 2上，应立即开始闪烁。

如何添加传感器读取？

以DHT11温湿度传感器为例：

  1. 连接DHT11到ESP32：VCC → 3.3V，DATA → GPIO 4，GND → GND
  2. 在mBlock扩展菜单中搜索并添加”DHT11”扩展
  3. 在”forever”循环中使用积木块：
when Arduino starts
  forever
    set variable temperature to (read temperature from DHT11 pin 4)
    set variable humidity to (read humidity from DHT11 pin 4)
    Serial print (join "Temp: " temperature)
    Serial print (join " Humidity: " humidity)
    Serial print newline
    wait 5 seconds

打开串行监视器即可看到实时温湿度数据。

积木块背后生成了什么C++代码？

切换到 Code View（代码视图），mBlock会展示积木块对应的Arduino C++代码：

#include <Arduino.h>
#include <DHT.h>


DHT dht(4, DHT11);
float temperature = 0;
float humidity = 0;


void setup() {
  Serial.begin(115200);
  dht.begin();
  pinMode(2, OUTPUT);
}


void loop() {
  temperature = dht.readTemperature();
  humidity = dht.readHumidity();
  Serial.print("Temp: ");
  Serial.print(temperature);
  Serial.print(" Humidity: ");
  Serial.print(humidity);
  Serial.println();
  delay(5000);
}

这是可视化工具最强大的学习功能：学生可以直观看到积木块如何转化为真实代码，建立从积木编程到文本编程的桥梁。

验证

Section titled “验证”
  • mBlock（或所选工具）成功安装并检测到ESP32
  • 闪烁程序上传并正确执行
  • 传感器读取程序在串行监视器中显示正确的值
  • 可以查看和理解生成的C++代码
  • 可以在积木视图和代码视图之间切换

故障排除

Section titled “故障排除”

mBlock中检测不到开发板怎么办？

通常是USB驱动问题：

  1. 安装CP2102或CH340驱动（根据你的开发板芯片）
  2. 在mBlock中进入 Connect 并选择正确的USB端口
  3. 安装驱动后重启mBlock

代码能编译但上传失败？

检查Arduino IDE中是否正确安装了ESP32开发板包。mBlock依赖后台Arduino IDE进行编译：

  1. 先在Arduino IDE中手动安装ESP32开发板支持
  2. 在mBlock中验证上传设置指向正确的开发板
  3. 必要时通过Arduino IDE手动上传导出的.ino文件

特定传感器的积木块不可用？

  1. 检查mBlock扩展库中是否存在对应扩展
  2. 使用”自定义积木块”功能编写简单Arduino代码片段
  3. 对于不支持的传感器，切换到Arduino IDE或PlatformIO

最佳实践

Section titled “最佳实践”
  • 积木视图用于逻辑学习，代码视图用于语法过渡：最大优势是展示积木块和代码之间的联系
  • K-12教育从mBlock开始：ESP32支持最好、积木库最大、课堂资源最多
  • 将可视化编程限制在入门内容：理解逻辑后（通常4-8次课后）应过渡到文本编程
  • 结合物理计算：连接真实LED、传感器和电机时最具吸引力
  • 用于售前演示：向非技术买家展示ESP32工作方式而不展示代码

总结

Section titled “总结”
  1. 可视化编程工具（mBlock、Mixly、ArduBlock）无需编写C++代码即可编程ESP32
  2. mBlock是最全面的选择，通过扩展支持Wi-Fi、MQTT和常见传感器
  3. 可视化工具生成标准的Arduino C++代码——学生可以看到积木块背后的代码
  4. 最适合K-12教育、快速原型设计和非开发者受众
  5. 可视化编程应作为通往文本编程的阶梯（Arduino IDE或PlatformIO）

参考资料

Section titled “参考资料”

正在开发商业 IoT 产品？

我们提供 ESP32 ODM 定制设计与制造服务。从原型到量产——编写这套教程的团队，可以和你一起实现。

联系我们 →