阿里物联网云平台bone web框架开发简单项目介绍

这个阿里的bone web框架是阿里自己将react+redux封装的 Web 开发框架，使用上进行了简化，对部分功能进行了增强。

集成了路由（基于 history.js + react-router），并支持前进、后退状态缓存
使 Component 支持绑定 Model，实现了逻辑与组件分离
提供了灵活的扩展机制（ store 可动态修改 reducer 和 middleware ）
针对常见开发场景的功能抽象（如 Layout、SSR 等)

注意：需要安卓node.js

具体使用参考https://bone.aliyun.com/bone-web/bonewebsdk.html?name=wpgl7p

https://linkdevelop.aliyun.com/web-doc#ox62oi.html

这里介绍我最近做的demo项目的部分代码，从设备信息获取到页面展示

主要是如何调用阿里物联网上的API实现设备数据获取，并展示在页面上

第一步登陆阿里云平台后，进入你的项目中点击设备模型定义，选择新增一个设备，信息填写我就不说明了，按需求填写即可

阿里物联网云平台bone web框架开发简单项目介绍

然后进入创建好的色斑，我选择的是环境感知类型，然后选测试设备，点击新增测试设备，输入设备名确定即可

阿里物联网云平台bone web框架开发简单项目介绍

新增设备后点击**凭证，在弹出的对话框中有三对字符串，这是我们以后获取设备信息的API中要填写的内容

阿里物联网云平台bone web框架开发简单项目介绍

再**凭证的右边有一个在线模拟，点击他，可以添加模拟设备数据，这样就不必用真实设备上传数据了，进入页面后点击右上角的上线，然后填写数值，点击下边的上报即可，记得数据填写的页面不要关闭。

然后我们就可以调用API获取我们测试设备的数据了

这个是设备获取页面的API查看入口：https://linkdevelop.aliyun.com/p/a124DMDsduYSfdIB/resource/api/4/0

根据需求调用不懂得API即可，点击详情进入API页面，选择bone web/mobile，这里就是bone web获取设备信息的API了，复制他到你的代码即可，然后将接口中的value1和value2修改成刚刚设备**凭证中所对应的值，这样就能获得设备数据了

阿里物联网云平台bone web框架开发简单项目介绍

现在我要展示的是我项目中的API调用代码，所以**凭证不一样

我调用了三个API实现动态获取设备信息

impot是引入所需要的各种文件，图片也有通过impot引入，可能有更好引入图片的方式，对react了解不深所以只有这种本办法了

import React, { Component } from "react";

import style from "../home/index.css";

import LOGO1 from "../home/img/xtb8.png";

import LOGO2 from "../home/bjt.png";

import LOGO3 from "../home/img/xtb11.png";

import LOGO4 from "../home/img/xtb12.png";

import LOGO5 from "../home/img/xtb13.png";

import LOGO6 from "../home/img/xtb14.png";

import LOGO7 from "../home/img/xtb15.png";

import LOGO8 from "../home/img/xtb16.png";

import LOGO9 from "../home/img/xtb17.png";

import fangda from "../home/img/an.png";

import { Map, Markers } from 'react-amap';

//引入SDK组件

import { APIGateway } from "@bone/linkdevelop-sdk";

var proId=[{"PM25Value":0},{"LightLuxValue":0},{"CO2Value":0},{"CurrentTemperature":0},{"SoundDecibelValue":0},{"RelativeHumidity":0},{"altitude":0},{"latitude":0},{"longitude":0}];

//产品数量

const num={value:0};

//设备名称

var deciceNameAll=[];

//产品数据

var dataContent=[];

var j=0;

const position=[17+Math.random()*15,-10+Math.random()*30];

export default class App extends Component {

//构造函数

constructor(){

super();

this.center = [17, 2]

this.state={

point:[],

region:"非洲",

situation:"良好（80/80）",

pagePosition:"信息汇总",

environment1:"无设备信息",

environment2:"无设备信息",

environment3:"无设备信息",

environment4:"无设备信息",

prompt:"苏丹，尼日利亚，赞比亚等地区环境严重异常请密切关注，",

useCluster: true,

}

this.Refresh();

this.markersEvents = {

created:(allMarkers) => {

console.log('All Markers Instance Are Below');

console.log(allMarkers);

click: (MapsOption, marker) => {

for (let i = 0; i < this.state.point.length; i++) {

if (this.state.point[i].position[0]==marker.F.extData.position[0]&&this.state.point[i].position[1]==marker.F.extData.position[1]) {

alert("设备名称:"+this.state.point[i].con.name);

}

console.log("*****************************");

console.log('marker:');

console.log(marker);

//alert("position:"+marker.F.extData.position);

console.log("*****************************");

dragend: (MapsOption, marker) => { /* ... */ }

}

//调用api获取设备信息

//获取在线设备数量

GetDeciveNum(){

APIGateway.request("http://api.citylink.aliplus.com/device/list", {

version: "0.2.0",

data: {

// 接口参数

"productKey": "a1rMVcIqC5Y",

"pageNo": "1",

"pageSize": "1"

}

}).then(response => {

num.value = response.data.totalNum;

}).catch(error => {

console.log(error);

});

this.GetName(num.value)

this.GetAttribute(num.value);

this.Delivery();

}

//获取在线设备名称

GetName(num){

var num1=""+num;

APIGateway.request("http://api.citylink.aliplus.com/device/list", {

version: "0.2.0",

data: {

// 接口参数

"productKey": "a1rMVcIqC5Y",

"pageNo": "1",

"pageSize": num1

}

}).then(response => {

let i=0;

do {

var na=response.data.items[i].deviceDTO.name;

deciceNameAll[i]=na;

i++;

} while (i<num);

//console.log("qqw=="+deciceNameAll);

//console.log(response);

}).catch(error => {

console.log(error);

});

//console.log("出");

}

//获取设备全部属性

GetAttribute(num){

for (let index = 0; index <num; index++) {

// console.log("组"+index+"nnnnn="+num);

APIGateway.request("http://api.citylink.aliplus.com/device/property/list", {

version: "0.2.0",

data: {

// 接口参数

"productKey": "a1rMVcIqC5Y",

"deviceName": deciceNameAll[index],

"propertyNames":["Pressure","Lux","CO2","H","T","PM25"]

}

}).then(response => {

//console.log(response);

for (let i = 0; i < 6; i++) {

console.log("shu==="+response.data[i].attribute);

switch (response.data[i].attribute) {

case "PM25":

proId.PM25Value=response.data[i].value;

continue;

case "Lux":

proId.LightLuxValue=response.data[i].value;

continue;

case "CO2":

proId.CO2Value=response.data[i].value;

continue;

case "T":

proId.CurrentTemperature=response.data[i].value;

continue;

case "Pressure":

proId.Pressure=response.data[i].value;

continue;

case "H":

proId.RelativeHumidity=response.data[i].value;

continue;

default:

break;

}

//console.log(proId);

dataContent[index]={"name":deciceNameAll[index],

"PM25Value":proId.PM25Value,

"LightLuxValue":proId.LightLuxValue,

"CO2Value":proId.CO2Value,

"CurrentTemperature":proId.CurrentTemperature,

"Pressure":proId.Pressure,

"RelativeHumidity":proId.RelativeHumidity,};

console.log(dataContent);

console.log("dataContent");

}).catch(error => {

// console.log(error);

});

}

// console.log("dataContent");

// console.log(dataContent);

}

//赋值到state方面数据调用

Delivery(){

//放入地图数据钱转换

var mapDa=[];

for(let i=0;i<dataContent.length;i++){

mapDa[i]={position,con:dataContent[i]};

}

j=j+1;

this.setState({point:mapDa});

this.setState({situation:"良好（"+num.value+"/"+num.value+"）"});

this.setState({environment1:"正常"})

this.setState({environment2:"正常"})

this.setState({environment3:"正常"})

this.setState({environment4:"正常"})

//console.log("mapdata"+j);

console.log(this.state.point);

console.log("===============");

console.log(mapDa);

}

//自动刷新周期3S

Refresh(){

setInterval(()=>{

this.GetDeciveNum();

},500)

}

render() {

return <div className={style.demo}>

{/* 导航 */}

</ul>

<h1 className={style.Nav2}>野外环境监控云平台</h1>

</ul><div className={style.clear}></div>

{/* //中间部分页面 */}

<span className={style.hcf}>{this.state.region}</span>

</div>

<span className={style.hcf}>{this.state.pagePosition}</span>

</div>

<span className={style.hcf}>{this.state.situation}</span>

</div>

<span className={style.hcf}>{this.state.environment1}</span>

</div>

<span className={style.hcf}>{this.state.environment2}</span>

</div>

<span className={style.hcf}>{this.state.environment3}</span>

</div>

<span className={style.hcf}>{this.state.environment4}</span>

</div>

<p className={style.textp} >{this.state.prompt}</p>

</div>

<Markers

markers={this.state.point}

events={this.markersEvents}

useCluster={this.state.useCluster}

</Map>

</div>

{/* 底部 */}

</div>

}

react中的start中定义的属性可以实现页面信息的动态修改，我个人感觉类似react，在构造启动声明的方法会自动加载

希望我的介绍对大家有帮助，

http://a120qqg0rcherxyc.webhost.cloudhost.link/ 这个是已经部署在阿里云上的demo，功能并不健全

然后在阿里物联网上开发bone web项目黑油一个好处，省去了服务器，而且简单

阿里物联网云平台bone web框架开发简单项目介绍

不过感觉唯一不爽的就是有点死板，不像原生页面开发那么灵活，好处就是只需要前段知识就可以胜任，现在项目上传必须在10M以下，图片多一点，大点的项目就不合适了，感觉做小东西比较适合，开发速度比较快

就介绍到这里，其他详细的在官方文档中介绍比我详细

阿里物联网云平台bone web框架开发简单项目介绍

相关推荐