Hacklab WebIDE在线调试ESP32笔记

1.什么是Hacklab WebIDE
- 1.1 优势
- 1.2 趋势
2. 使用方法
3.优势与特点

1.什么是Hacklab WebIDE

Hacklab WebIDE是阿里云物联网云端开发环境，Hacklab WebIDE提供远程的Linux服务，并预先安装了物联网开发需要的环境，能实现AliOS Things的云端编译，本地烧录的功能。简单的说，就是一款集成了编译环境，永不掉线并且只要有网可以随时开发工程的在线IDE。网址为https://hacklab.aliyun.com。

1.1 优势

对于阿里云这款hacklab的编译器来说，从我个人使用的角度来看，优势主要有以下几点

不用安装环境，直接远程开发。
不需要很高的电脑配置，只要装上浏览器就可以开发，编译速度不受电脑性能限制。
不用带电脑，只要有自己的账号，就可以实现办公室，家里或者其他外出环境下进行开发。
工程用git进行管理，可进行协调开发工作。
可实现在线调试，在线下载的功能。
可直接对接阿里云物联网平台，方便设备与云的联调，节省嵌入式开发调试时间。

1.2 趋势

随着物联网与网络技术的快速发展，越来越多的工具层出不穷，嵌入式开发必然会走向快速产品成型的道路。当芯片的性能越来越强大，这时就不用再考虑内存和性能的问题，可以用Arduino将产品快速成型，直接很快的推向市场。这才是物联网与嵌入式的快速开发模式。有市场就有需求，有需求就有产品，我认为WebIDE是一种很好的嵌入式开发模式，这样的开发方式加快产品的成型速度，借助阿里云物联网平台，就算是几个人也能做出很不错的物联网产品。

2. 使用方法

由于Hacklab WebIDE还是在不断完善和功能扩展的阶段，所以在使用时文档信息并不是很全面，需要自己摸索的地方很多。下面一步一步的尝试使用，并且实现在我们自己的esp32开发板上的联调工作。

2.1 功能介绍

注册和进入阿里云物联网平台，然后通过自己的阿里云平台账号和密码进入https://hacklab.aliyun.com。

通过查看文件列表，可以看到这是一个标准的Linux操作系统，直接看一下这台电脑的性能

CPU是Platinum(铂金) 8163，采用的是intel的至强处理器。

这是阿里云第四代服务器采用的CPU，Skylake架构，主频2.5GHz，计算性能问题。8163这款型号在intel官网上并没有相关信息，应该是阿里云向阿里云定制的，与之相近的Intel Xeon Platinum 8168，价格是$5890，约合￥38900元。

此类服务器提供的ECS实例族包括通用型实例g5、计算型实例c5、内存型实例r5、本地 SSD 型实例 i2、突发性能实例 t5、超级计算集群计算型实例规格族 scc、通用型神龙云服务器规格族 ebmg5等。

所以对于开发及编译来说，根本没有问题。

查看一下Linux的版本信息

采用的是Ubuntu16.04。

2.2 编译第一个程序

既然是已经集成好的Linux开发环境，那么直接可以编译运行一个测试程序。下面我们直接从gcc来进行程序的编译。内部已经集成好了arm-Linux的编译环境。

然后，简单测试一下编译和运行。

在工程目录下新建一个文件夹

编写一个Hallo Hacklab的C语言程序

#include <stdio.h>
#include <stdlib.h>
int main()
{
    printf("hello Hacklab!\n");
}

在命令行输入

gcc test.c -o test

编译完成后，直接运行即可看到结果

2.3 搭建esp32的开发环境

以上测试了WebIDE的简单使用方法，下面来连接esp32的硬件设备进行开发测试。

可以通过搜索库来进行。例如我们使用的开发板类型是M5Stack。

直接进去搜索我们需要的库进行开发。

第一步：选择创建工程

第二步：填写工程相关的信息

可以看到工程配置完成

接着编写测试代码。这里编写一个在LCD上显示图形的程序

#include <M5Stack.h>
// the setup routine runs once when M5Stack starts up
void setup() {
  // initialize the M5Stack object
  M5.begin();
  // Lcd display
  M5.Lcd.fillScreen(WHITE);
  delay(500);
  M5.Lcd.fillScreen(RED);
  delay(500);
  M5.Lcd.fillScreen(GREEN);
  delay(500);
  M5.Lcd.fillScreen(BLUE);
  delay(500);
  M5.Lcd.fillScreen(BLACK);
  delay(500);
  // text print
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(1);
  M5.Lcd.printf("Display Test!");
  // draw graphic
  delay(1000);
  M5.Lcd.drawRect(100, 100, 50, 50, BLUE);
  delay(1000);
  M5.Lcd.fillRect(100, 100, 50, 50, BLUE);
  delay(1000);
  M5.Lcd.drawCircle(100, 100, 50, RED);
  delay(1000);
  M5.Lcd.fillCircle(100, 100, 50, RED);
  delay(1000);
  M5.Lcd.drawTriangle(30, 30, 180, 100, 80, 150, YELLOW);
  delay(1000);
  M5.Lcd.fillTriangle(30, 30, 180, 100, 80, 150, YELLOW);
}
// the loop routine runs over and over again forever
void loop(){
  //rand draw
  M5.Lcd.fillTriangle(random(M5.Lcd.width()-1), random(M5.Lcd.height()-1),       random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), random(0xfffe));
  M5.update();
}

点击编译，发现有错误。选择编译开始进行编译

这是因为没有找到头文件，因为我们没有安装M5Stack的库。

选择相应的库

然后再做编译就可以了。

编译过程中，会出现两个错误。直接屏蔽掉就好了，目前暂时不做详细说明。

编译完成后，可以看到如下的效果

固件及环境已经搭建完成。

2.4 建立开发板与云平台的连接

由于esp32用的是串口进行下载，所以需要一个串口代理，将串口设备转移到远程WebIDE上。阿里云的Hacklab就提供了这样一个工具。

M5Stack串口驱动

要建立连接，需要开发板与电脑的串口进行连接。串口驱动型号是CP210x系列

解压后直接安装即可。

Device Agent简介

Hacklab IDE device agent是一个运行在本地开发机、将物理开发板通过浏览器连接到云端IDE开发环境的后台程序，接下来文档中的device agent就是指这个后台程序。

上图是云端IDE、Device Agent和设备之间运行时的关系示意，Device Agent和设备通过设备的串口进行通讯。Device Agent内置连接认证机制，确保每个用户的Device Agent只能连接到自己的云端IDE工作空间。

我们提供了可运行在64位Windows, Mac以及Linux上的Device Agent程序。接下来就介绍如何快速在本地机器上快速运行 Device Agent.

下载后解压压缩包

然后就可以看到串口代理了。

可以看到有两个设备在线，由于电脑上插入两个设备，可以看到两个，点击下面一个可以看到设备信息。

远程串口打印

可以通过远程串口进行信息打印。程序进行稍微修改

编译后，点击下载程序

运行后，通过串口打印，就可以看到信息了

此时，可以看到串口打印信息，同时，也可以看到M5Stack上显示图形画面。

可以确定，代码已经正常的下载进去。

3.优势与特点

通过Hacklab WebIDE进行远程调试ESP32，建立ESP32的开发环境，类似的建立esp8266开发环境也是如此。通过建立在线开发环境，远程服务器可以永不关机，下次环境直接用。同时节省了环境搭建的麻烦。

其实通过Hacklab WebIDE还有其他的优势，比如可以很方便的与阿里云物联网平台进行联调，这一块后面再慢慢涉及。

总之，工欲善其事必先利其器，有了好的工具和装备，才能更好的，更加高效的完成工作。