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();
}

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