阿里云云平台，物联网可视化web界面简单教程

目前市面上的云平台，多以华为，阿里，中国移动为主。但是了解一个，便可满足需求了。

1.首先，我们要创建一个属于自己的账号，然后尽可能的领取各种限免套餐。

2.打开产品这一栏，选择一项你想要添加的产品类别（这里以物联网项目为例子）

3.找到物联网应用开发，并立即使用（目前是限免，不用购买）

4.在左侧的侧边栏选择项目管理，创建一个普通项目

 （然后我随便创建了一个叫门禁指纹管理的项目，情况如下）

5.选中Web应用中，并新建一个（我创建了一个指纹使用情况的界面）

6.在左侧我们拉出自己想要的组件，甚至有地图，时钟，动态表

组件格式的编辑方式和PPT的编辑相类似，十分简单。

 
7.拖动并创建图表后，右侧选择数据源
 

8.没有数据源的话，那么就需要创建设备（在创建设备前，需要先创建产品）
 

9.创建产品后，点击查看，选择功能定义，通过编辑草稿可以设置一些标识符和功能名称

（标识符 要随手保存到本地的文件中，避免反复查看）
 

10.自定义产品功能，然后选择发布
 

11.产品创建完成后，回到主界面，左侧侧边栏选择设备。
 

12.添加设备

（设备因人而异，选择好合适自己的配置吧）
 

13.选择刚刚创建的设备，点击查看
 

14.右上方点击DeviceSecret，复制三元组，将其和标签符一起保存到本地。

15.回到web网页设置，继续编剧图表数据源，选择刚创建的设备

16.若要试验表格的显示情况，可以在设备详细设置中，选择“设备模拟器”

17.选择产品栏中的Topic类列表，然后选择物理型通信Topic。

18.分别复制好属性上报栏中“post”结尾、属性设置栏中“set”结尾的两条Topic类，并保存到本地

topic
/sys/a1dKFNwJ6As/${deviceName}/thing/event/property/post
/sys/a1dKFNwJ6As/${deviceName}/thing/service/property/set

例如上面两条内容。若使用时，则要删除${…}的所有内容，并填写自己的deviceName

以上的阿里云云平台的配置已经完成了。

为了方便实现数据上传和查看，我使用了DFR0608(掌控板)，选择上传模式并为它烧录代码。

以下是另一个物联网web可视化产品的掌控板代码，大家可以将它作为例子查看一下：

#include 
#include 
// 函数声明
void obloqMqttEventT1(String& message);
// 静态常量
const String topics[5] = {"/sys/a1dKFNwJ6As/handbit/thing/event/property/post","/sys/a1dKFNwJ6As/handbit/thing/service/property/set","","",""};
const MsgHandleCb msgHandles[5] = {NULL,obloqMqttEventT1,NULL,NULL,NULL};
// 创建对象
DFRobot_Iot myIot;


// 主程序开始
void setup() {
	mPython.begin();
	dfrobotRandomSeed();
	myIot.setMqttCallback(msgHandles);
	display.fillScreen(0);
	display.setCursorLine(1);
	display.printLine("等待连接");
	myIot.wifiConnect("DYZ", "12345678");//此处设置自己的wifi账号，建议使用2.4GHz的wifi和较为简单的密码
	while (!myIot.wifiStatus()) {yield();}
	display.fillInLine(1, 0);
	display.setCursorLine(1);
	display.printLine("wifi连接成功");
	myIot.init("iot-as-mqtt.cn-shanghai.aliyuncs.com", "***PRODUCTKEY***","mytest","handbit","bf298449c283b1fd0fcf45234669ad37",topics,1883);//此处需要结合自己保存在本地的文件来填写
	myIot.connect();
	while (!myIot.connected()) {yield();}
	display.setCursorLine(2);
	display.printLine("mqtt连接成功");
}
void loop() {
	display.fillInLine(3, 0);
	myIot.publish(topic_0, (String((String((String((String("{"id":"123","params":{"") + String("SoundDecibelValue"))) + String("":"))) + String((sound.read())))) + String("},"method":"thing.event.property.post"}")));
	display.setCursorLine(3);
	display.printLine("分贝值已发送");
	delay(10000);
	display.fillInLine(3, 0);
	myIot.publish(topic_0, (String((String((String((String("{"id":"123","params":{"") + String("temperature"))) + String("":"))) + String((random(25, 29+1))))) + String("},"method":"thing.event.property.post"}")));
	display.setCursorLine(3);
	display.printLine("温度已发送");
	delay(10000);
}


// 事件回调函数
void obloqMqttEventT1(String& message) {
	rgb.brightness(round(2));
	rgb.write(1, 0x0000FF);
	delay(10000);
	rgb.write(-1, 0x000000);
}