0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

物联网全栈教程-从云端到设备(十)

技新电子 2018-05-28 11:26 次阅读

上一篇文章零妖老哥已经通过一行代码即 bone init 初始化了一个默认的Web应用,通过执行另外一行代码 bone start 启动了本地的Web服务,并且可以通过谷歌浏览器来查看这个网页的效果。今天我们就去查找一些官方的帮助文档,然后根据提供的例程代码来修改为己用。

有些坑零妖已经跳过了,所以就直接放出四个网址,里面都是干货。整个物联网弹幕器的项目中的Web应用所遇到的问题,都是通过浏览这四个网址来解决的。

Bone Web 的官方介绍

UI组件的详细介绍

数据可视化组件

物联网设备相关的API说明

注意:使用一些组件的时候,要先安装它们到电脑上。然后再修改package.json这个文件,把对这个组件的依赖添加进去,这样上传到服务器之后网页就会正常运行。具体方法零妖接下来会说。

我们的目标是把设备上报的温度数据通过仪表盘的形式显示到网页上。在网页上显示一个仪表盘的代码最简单的做法就是去复制别人的代码然后简单修改一下啊。我们用到的其实是一个叫做“数据可视化”的组件,这个组件零妖认为在物联网项目中将会经常用到,因为大数据和物联网无非就是一些数据的交换和显示。

进入查看React的官方例程代码。

10.1.jpg

通过VSCode打开我们已经初始化好的那个Web应用,零妖是直接在桌面上新建了一个叫做 Web 的文件夹,里面就是全部需要的文件。用VSCode直接打开这个文件夹就算作打开整个项目了(其实你也可以用其他文本编辑器打开对应的文件)。然后打开index.js这个文件,我们将要重点编写它里面的代码。其他没有涉及的地方就不要管了,反正最后达到目的就行了。

10.2.jpg

接下来开始复制官方代码,先让咱的网页上显示出一个和例程一模一样的仪表盘再说。

10.3.jpg

写代码讲究一个“稳”字,咱们一步一步来,慎防粗心大意导致出错。先把要import的东西给复制过来,运行一下看看会不会出错。

直接复制到index.js这个文件的前面,然后保存这个文件,打开“终端”,启动Web服务。详解见下图。

10.4.jpg

结果就是,出错了。下图这个错误提示是谷歌浏览器直接显示的。

10.5.jpg

遇到这种问题,唯一的解决方案就是安装这个组件。方法依然很简单,一行代码搞定。打开命令行,然后输入如下代码并回车即可完成 bnpm install -g viser-react 。如果你是安装别的组件,那么后面的viser-react换成别的组件的名字即可完成。

为了完美地完成这个流程,你还需要再查看一下它的版本号,一行代码搞定:npm list -g viser-react 。

然后用VSCode打开package.json这个文件,添加如下内容:

10.6.jpg

最后,在VSCode的“终端”里面,执行一个命令来结束添加外部组件的工作: bnpm install

10.7.jpg

好了,零妖已经教会你安装一个外部组件的方法了,如果你遇到了别的组件不是系统自带的,那么你就可以通过这种方法来安装,是不是很简单啊。你再保存一下index.js这个文件,键盘快捷键 Ctrl+s ,那么谷歌浏览器就会自动根据当前的代码进行刷新,如果不出意外这次肯定没问题了,不过显示的页面还是 Hello Bone 。

一切OK之后,你就可以把 import 这部分内容之后的全部代码给删掉了,因为没有用啊,我们想要的是一个仪表盘。直接把仪表盘例程中,import之后的代码复制粘贴一下,然后保存文件,那么谷歌浏览器会自动刷新,见证奇迹吧!一个一模一样的仪表盘哦。

然后你就不要怕犯错,不断猜测某个数值可能是什么意思,然后修改它观察显示效果,当然如果能参考官方说明最好,因为有的组件会做一个手册告诉你哪些参数是什么意思。这个过程是要靠你不断去实践探索的,光靠看书是没有用的。

这篇文章你要靠自己勤劳的双手来完成一个仪表盘的显示,你自己要调整一下它的大小什么的,零妖就不在这里限制你的想象力了。

其实我们更关心的是数据如何显示到上面。下一篇文章零妖就带你查看一下API的例程,读取设备的温度属性,然后想一个简单的方法显示到仪表盘上。

原文

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 单片机
    +关注

    关注

    6030

    文章

    44486

    浏览量

    631863
  • 物联网
    +关注

    关注

    2900

    文章

    44037

    浏览量

    370051
  • 阿里云
    +关注

    关注

    3

    文章

    932

    浏览量

    42925
  • IOT
    IOT
    +关注

    关注

    186

    文章

    4160

    浏览量

    195933
收藏 人收藏

    评论

    相关推荐

    特斯拉FSD,自研智能驾驶的未来

    技术已然成为各车企研发的主要方向之一。在众多自动驾驶技术的探索者中,特斯拉(Tesla)凭借FSD(Full Self-Driving)系统,占据了行业的领先地位。FSD系统自发布以来,经历了外部合作到自研的转型,并在感知
    的头像 发表于 10-29 16:27 175次阅读
    特斯拉FSD,<b class='flag-5'>从</b><b class='flag-5'>全</b><b class='flag-5'>栈</b>自研<b class='flag-5'>到</b>智能驾驶的未来

    如何提高联网设备的互联性

    联网(IoT)正在改变我们的生活方式,智能家居工业自动化,设备间的互联性是实现这些变革的基础。然而,不同制造商和不同技术之间的兼容性问
    的头像 发表于 10-29 11:35 289次阅读

    联网设备的标准与规范

    联网(IoT)正在改变我们的生活方式,智能家居工业自动化,再到智慧城市,联网
    的头像 发表于 10-29 11:34 291次阅读

    【星闪派联网开发套件体验连载】智能交通灯

    感谢电子发烧友,感谢润和软件,提供星闪派联网开发套件试用。 本次试用计划: 用星闪派联网开发套件,先实现本地交通灯项目,接入WiFi连上云端
    发表于 10-05 13:00

    边缘设备云端平台,合宙DTU&amp;RTU打造无缝联网解决方案

    ​ 如今,联网(IoT)技术飞速发展,万互联的时代已然到来,那么,高效、稳定地连接边缘设备云端平台,实现数据的实时采集、传输与处理,就
    的头像 发表于 09-18 14:55 279次阅读
    <b class='flag-5'>从</b>边缘<b class='flag-5'>设备</b><b class='flag-5'>到</b><b class='flag-5'>云端</b>平台,合宙DTU&amp;RTU打造无缝<b class='flag-5'>物</b><b class='flag-5'>联网</b>解决方案

    什么是联网技术?

    什么是联网技术? 联网技术(Internet of Things, IoT)是一种通过信息传感设备,按约定的协议,将任何物体与网络相连
    发表于 08-19 14:08

    智慧联网网关是什么

    型的设备和传感器进行通信。 首先,功能层面来看,智慧联网网关能够实现设备联网,使得
    的头像 发表于 08-13 13:42 685次阅读

    Modbus联网网关是什么

    Modbus联网网关是一种专门用于将基于Modbus协议的设备连接到联网(IoT)的设备或软
    的头像 发表于 08-10 13:49 372次阅读
    Modbus<b class='flag-5'>物</b><b class='flag-5'>联网</b>网关是什么

    【天拓四方】联网网关硬件和云端分别实现了哪些功能?

    联网(IoT)的广阔领域中,联网网关硬件和云端各自扮演着不可或缺的角色。它们通过一系列功能,共同确保
    的头像 发表于 04-19 16:18 268次阅读

    联数据网关是什么?

    联数据网关就是联网智能网关。 联数据网关是
    的头像 发表于 03-29 17:10 269次阅读

    如何解决联网设备的安全问题

    依据统计数据显示,当前联网技术所面对的挑战,主要来自联网设备开发商急于开发未得到适当保护的
    发表于 02-29 14:58 562次阅读
    如何解决<b class='flag-5'>物</b><b class='flag-5'>联网</b><b class='flag-5'>设备</b>的安全问题

    现场云端:造纸机生产数据链条采集及可视化解决方案

    现场云端:造纸机生产数据链条采集及可视化解决方案 造纸机作为造纸工业的核心设备,其运行效率和稳定性直接关系到企业的经济效益。然而,传统
    的头像 发表于 02-21 15:42 367次阅读
    <b class='flag-5'>从</b>现场<b class='flag-5'>到</b><b class='flag-5'>云端</b>:造纸机生产数据<b class='flag-5'>全</b>链条采集及可视化解决方案

    工业联网平台实现智能化云端计算与策略控制  

    随着科技的飞速发展,工业联网平台以其便捷的系统架构和智能的算力资源,能够赋予工业设备不一样的生命与活力,其中实现智能化云端计算与策略控制是重要组成部分。它能够补足自动化控制系统的不足
    的头像 发表于 01-11 17:36 356次阅读
    工业<b class='flag-5'>物</b><b class='flag-5'>联网</b>平台实现智能化<b class='flag-5'>云端</b>计算与策略控制   

    联网可视化运维监控平台

    监控企业的各种应用、系统、网络和设备,提供实时的性能指标、日志和事件数据,帮助企业快速发现和解决问题,提高系统的可用性和稳定性。 运维监控平台通常包括以下几个方面的功能: 1应用监控: 监控企业的各种应用程序,包括Web应用
    的头像 发表于 01-11 11:46 1222次阅读
    <b class='flag-5'>物</b><b class='flag-5'>联网</b><b class='flag-5'>全</b><b class='flag-5'>栈</b>可视化运维监控平台

    如何将工业设备快速接入ZWS联网云平台

    工业设备作为工业互联网的底层终端,承担着数据感知和智能控制的重要作用。本文将介绍如何将工业设备快速接入ZWS
    的头像 发表于 11-30 08:24 851次阅读
    如何将工业<b class='flag-5'>设备</b>快速接入<b class='flag-5'>到</b>ZWS<b class='flag-5'>物</b><b class='flag-5'>联网</b>云平台