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

时间 2019-12-10 标签阿里联网平台 bone web 框架开发简单项目介绍

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

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

注意：须要安卓node.jshtml

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

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

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

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

源码下载地址：https://download.csdn.net/download/qq_29950673/11183671redux

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

而后进入建立好的色斑，我选择的是环境感知类型，而后选测试设备，点击新增测试设备，输入设备名肯定便可api

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

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

而后咱们就能够调用API获取咱们测试设备的数据了

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

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

如今我要展现的是我项目中的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项目黑油一个好处，省去了服务器，并且简单

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

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