1.什么是Hacklab WebIDE1.1 優(yōu)勢(shì)1.2 趨勢(shì)2. 使用方法2.1 功能介紹2.2 編譯第一個(gè)程序2.3 搭建esp32的開(kāi)發(fā)環(huán)境2.4 建立開(kāi)發(fā)板與云平臺(tái)的連接M5Stack串口驅(qū)動(dòng)Device Agent簡(jiǎn)介遠(yuǎn)程串口打印3.優(yōu)勢(shì)與特點(diǎn)

1.什么是Hacklab WebIDE

Hacklab WebIDE是阿里云物聯(lián)網(wǎng)云端開(kāi)發(fā)環(huán)境，Hacklab WebIDE提供遠(yuǎn)程的Linux服務(wù)，并預(yù)先安裝了物聯(lián)網(wǎng)開(kāi)發(fā)需要的環(huán)境，能實(shí)現(xiàn)AliOS Things的云端編譯，本地?zé)浀墓δ?。?jiǎn)單的說(shuō)，就是一款集成了編譯環(huán)境，永不掉線(xiàn)并且只要有網(wǎng)可以隨時(shí)開(kāi)發(fā)工程的在線(xiàn)IDE。網(wǎng)址為https://hacklab.aliyun.com。

1.1 優(yōu)勢(shì)

對(duì)于阿里云這款hacklab的編譯器來(lái)說(shuō)，從我個(gè)人使用的角度來(lái)看，優(yōu)勢(shì)主要有以下幾點(diǎn)

• 不用安裝環(huán)境，直接遠(yuǎn)程開(kāi)發(fā)。

• 不需要很高的電腦配置，只要裝上瀏覽器就可以開(kāi)發(fā)，編譯速度不受電腦性能限制。

• 不用帶電腦，只要有自己的賬號(hào)，就可以實(shí)現(xiàn)辦公室，家里或者其他外出環(huán)境下進(jìn)行開(kāi)發(fā)。

• 工程用git進(jìn)行管理，可進(jìn)行協(xié)調(diào)開(kāi)發(fā)工作。

• 可實(shí)現(xiàn)在線(xiàn)調(diào)試，在線(xiàn)下載的功能。

• 可直接對(duì)接阿里云物聯(lián)網(wǎng)平臺(tái)，方便設(shè)備與云的聯(lián)調(diào)，節(jié)省嵌入式開(kāi)發(fā)調(diào)試時(shí)間。

1.2 趨勢(shì)

隨著物聯(lián)網(wǎng)與網(wǎng)絡(luò)技術(shù)的快速發(fā)展，越來(lái)越多的工具層出不窮，嵌入式開(kāi)發(fā)必然會(huì)走向快速產(chǎn)品成型的道路。當(dāng)芯片的性能越來(lái)越強(qiáng)大，這時(shí)就不用再考慮內(nèi)存和性能的問(wèn)題，可以用Arduino將產(chǎn)品快速成型，直接很快的推向市場(chǎng)。這才是物聯(lián)網(wǎng)與嵌入式的快速開(kāi)發(fā)模式。有市場(chǎng)就有需求，有需求就有產(chǎn)品，我認(rèn)為WebIDE是一種很好的嵌入式開(kāi)發(fā)模式，這樣的開(kāi)發(fā)方式加快產(chǎn)品的成型速度，借助阿里云物聯(lián)網(wǎng)平臺(tái)，就算是幾個(gè)人也能做出很不錯(cuò)的物聯(lián)網(wǎng)產(chǎn)品。

2. 使用方法

由于Hacklab WebIDE還是在不斷完善和功能擴(kuò)展的階段，所以在使用時(shí)文檔信息并不是很全面，需要自己摸索的地方很多。下面一步一步的嘗試使用，并且實(shí)現(xiàn)在我們自己的esp32開(kāi)發(fā)板上的聯(lián)調(diào)工作。

2.1 功能介紹

注冊(cè)和進(jìn)入阿里云物聯(lián)網(wǎng)平臺(tái)，然后通過(guò)自己的阿里云平臺(tái)賬號(hào)和密碼進(jìn)入https://hacklab.aliyun.com。

通過(guò)查看文件列表，可以看到這是一個(gè)標(biāo)準(zhǔn)的Linux操作系統(tǒng)，直接看一下這臺(tái)電腦的性能

CPU是Platinum(鉑金) 8163，采用的是intel的至強(qiáng)處理器。

這是阿里云第四代服務(wù)器采用的CPU，Skylake架構(gòu)，主頻2.5GHz，計(jì)算性能問(wèn)題。8163這款型號(hào)在intel官網(wǎng)上并沒(méi)有相關(guān)信息，應(yīng)該是阿里云向阿里云定制的，與之相近的Intel Xeon Platinum 8168，價(jià)格是$5890，約合￥38900元。

此類(lèi)服務(wù)器提供的ECS實(shí)例族包括通用型實(shí)例g5、計(jì)算型實(shí)例c5、內(nèi)存型實(shí)例r5、本地 SSD 型實(shí)例 i2、突發(fā)性能實(shí)例 t5、超級(jí)計(jì)算集群計(jì)算型實(shí)例規(guī)格族 scc、通用型神龍?jiān)品?wù)器規(guī)格族 ebmg5等。

所以對(duì)于開(kāi)發(fā)及編譯來(lái)說(shuō)，根本沒(méi)有問(wèn)題。

查看一下Linux的版本信息

采用的是Ubuntu16.04。

2.2 編譯第一個(gè)程序

既然是已經(jīng)集成好的Linux開(kāi)發(fā)環(huán)境，那么直接可以編譯運(yùn)行一個(gè)測(cè)試程序。下面我們直接從gcc來(lái)進(jìn)行程序的編譯。內(nèi)部已經(jīng)集成好了arm-Linux的編譯環(huán)境。

然后，簡(jiǎn)單測(cè)試一下編譯和運(yùn)行。

在工程目錄下新建一個(gè)文件夾

編寫(xiě)一個(gè)Hallo Hacklab的C語(yǔ)言程序

#include  #include  int main() { printf("hello Hacklab!\n");
}

在命令行輸入

gcc test.c -o test 

編譯完成后，直接運(yùn)行即可看到結(jié)果

2.3 搭建esp32的開(kāi)發(fā)環(huán)境

以上測(cè)試了WebIDE的簡(jiǎn)單使用方法，下面來(lái)連接esp32的硬件設(shè)備進(jìn)行開(kāi)發(fā)測(cè)試。

可以通過(guò)搜索庫(kù)來(lái)進(jìn)行。例如我們使用的開(kāi)發(fā)板類(lèi)型是M5Stack。

直接進(jìn)去搜索我們需要的庫(kù)進(jìn)行開(kāi)發(fā)。

第一步：選擇創(chuàng)建工程

第二步：填寫(xiě)工程相關(guān)的信息

可以看到工程配置完成

接著編寫(xiě)測(cè)試代碼。這里編寫(xiě)一個(gè)在LCD上顯示圖形的程序

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

點(diǎn)擊編譯，發(fā)現(xiàn)有錯(cuò)誤。選擇編譯開(kāi)始進(jìn)行編譯

這是因?yàn)闆](méi)有找到頭文件，因?yàn)槲覀儧](méi)有安裝M5Stack的庫(kù)。

選擇相應(yīng)的庫(kù)

然后再做編譯就可以了。

編譯過(guò)程中，會(huì)出現(xiàn)兩個(gè)錯(cuò)誤。直接屏蔽掉就好了，目前暫時(shí)不做詳細(xì)說(shuō)明。

編譯完成后，可以看到如下的效果

固件及環(huán)境已經(jīng)搭建完成。

2.4 建立開(kāi)發(fā)板與云平臺(tái)的連接

由于esp32用的是串口進(jìn)行下載，所以需要一個(gè)串口代理，將串口設(shè)備轉(zhuǎn)移到遠(yuǎn)程WebIDE上。阿里云的Hacklab就提供了這樣一個(gè)工具。

M5Stack串口驅(qū)動(dòng)

要建立連接，需要開(kāi)發(fā)板與電腦的串口進(jìn)行連接。串口驅(qū)動(dòng)型號(hào)是CP210x系列

解壓后直接安裝即可。

Device Agent簡(jiǎn)介

Hacklab IDE device agent是一個(gè)運(yùn)行在本地開(kāi)發(fā)機(jī)、將物理開(kāi)發(fā)板通過(guò)瀏覽器連接到云端IDE開(kāi)發(fā)環(huán)境的后臺(tái)程序，接下來(lái)文檔中的device agent就是指這個(gè)后臺(tái)程序。

上圖是云端IDE、Device Agent和設(shè)備之間運(yùn)行時(shí)的關(guān)系示意，Device Agent和設(shè)備通過(guò)設(shè)備的串口進(jìn)行通訊。Device Agent內(nèi)置連接認(rèn)證機(jī)制，確保每個(gè)用戶(hù)的Device Agent只能連接到自己的云端IDE工作空間。

我們提供了可運(yùn)行在64位Windows, Mac以及Linux上的Device Agent程序。接下來(lái)就介紹如何快速在本地機(jī)器上快速運(yùn)行 Device Agent.

下載后解壓壓縮包

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

可以看到有兩個(gè)設(shè)備在線(xiàn)，由于電腦上插入兩個(gè)設(shè)備，可以看到兩個(gè)，點(diǎn)擊下面一個(gè)可以看到設(shè)備信息。

遠(yuǎn)程串口打印

可以通過(guò)遠(yuǎn)程串口進(jìn)行信息打印。程序進(jìn)行稍微修改

編譯后，點(diǎn)擊下載程序

運(yùn)行后，通過(guò)串口打印，就可以看到信息了

此時(shí)，可以看到串口打印信息，同時(shí)，也可以看到M5Stack上顯示圖形畫(huà)面。

可以確定，代碼已經(jīng)正常的下載進(jìn)去。

3.優(yōu)勢(shì)與特點(diǎn)

通過(guò)Hacklab WebIDE進(jìn)行遠(yuǎn)程調(diào)試ESP32，建立ESP32的開(kāi)發(fā)環(huán)境，類(lèi)似的建立esp8266開(kāi)發(fā)環(huán)境也是如此。通過(guò)建立在線(xiàn)開(kāi)發(fā)環(huán)境，遠(yuǎn)程服務(wù)器可以永不關(guān)機(jī)，下次環(huán)境直接用。同時(shí)節(jié)省了環(huán)境搭建的麻煩。

其實(shí)通過(guò)Hacklab WebIDE還有其他的優(yōu)勢(shì)，比如可以很方便的與阿里云物聯(lián)網(wǎng)平臺(tái)進(jìn)行聯(lián)調(diào)，這一塊后面再慢慢涉及。

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