[官方案例教程]Web应用-智能灯光

2116浏览
查看: 2116|回复: 0

[官方案例教程] Web应用-智能灯光

[复制链接]
本帖最后由 螺丝钉yy 于 2019-8-8 11:03 编辑

之前写的阿里云的应用都是写的关于移动App应用或者结合到钉钉使用,偶然间接触到Web可视化的开发,感觉比移动App好玩一些,组件和可移植性都比App要强些。但是不好的地方在于如果要移植的话就需要绑定域名,意味着需要付费啦但如果只是自己玩一玩,在自身电脑上操作就不必绑定域名。
  话不多说,就按上次的智能灯光来创建一个Web可视化开发。
  需要材料:阿里云入门套件 x1
这次可不需要手机了,哈哈。
  创建产品和设备。不懂的可以去我的第一篇帖子看一看如何创建产品和设备,我在这里就不多赘述了。  程序的更改页请参照第一篇帖子智能灯光。
  进入Web可视化操作:

Web可视化开发Web可视化开发操作方式跟移动应用开发类似,大致可以分为以下5个步骤:
新建 Web可视化开发
— Web页面编辑;
可用账户设置(可选);
—  Web可视化发布
— Web查看
新建 Web可视化开发
选中左侧导航栏的推荐-> Web可视化开发选项,点击新增Web应用,即可进入Web可视化配置界面。
Web应用-智能灯光图1
在弹出的移动可视化开发页面,选择模板,填写应用名称信息,单击完成。该名称即为Web的名称。

Web应用-智能灯光图2
Web应用-智能灯光图3


Web页面编辑
Web页面编辑跟App页面编辑是类似的,明显的不同之处在于Web页面没有首页模块,组件种类更多,操作方法上也是差不多的,所以我这里就不过多赘述了。Web应用-智能灯光图4
下面就进入Web的页面编辑
Step1:将自定义新增页1改为LED
Web应用-智能灯光图5
Step2:添加组件。
为了美观,我们放上一张背景图,所以先添加一张图片,将图片拖到画布中,设置为底层。然后上传一张比较好看的图片。背景图原图如下。


                 Web应用-智能灯光图6
                            Web应用-智能灯光图7
添加文字。将文字拖到画布中,改为小智的家,将字体颜色改为蓝色,贴合背景色。
Web应用-智能灯光图8

添加指示灯。将指示灯拖到画布中,然后配置参数,产品配置为LED,设备配置为LED1,属性为工作开关,点击确定,这就配置完成了,不需要像App应用开发那样首次需要验证数据格式。
Web应用-智能灯光图9

添加开关。将开关拖到画布中,然后配置参数,产品配置为LED,设备配置为LED1,属性为工作开关,点击确定

Web应用-智能灯光图10

将指示灯和开关的颜色进行修改,符合背景图的颜色。配置完成后如下第二张图。

  Web应用-智能灯光图11
Web应用-智能灯光图12

可用账户设置(可选)
Web可视化如果要移植使用,需要绑定域名,为了安全需要,绑定域名使用阿里云设置了付费。如果需要移植使用的,可参考设置->域名管理CDN付费原则。如果只是个人需要不必添加域名,默认系统的域名即可。
Web应用-智能灯光图13












Web可视化发布
点击右上角的发布选项,然后跳到第二张图,备注网页信息,不用填写,直接点击确定,然后得到网页链接。注意:如果不需要绑定域名,直接点击网页链接,不要点击其他选择。
Web应用-智能灯光图14
Web应用-智能灯光图15Web应用-智能灯光图16

















  Web查看
  Web的页面已经生成,可直接在网页上点击开关按钮,实物LED就会执行相应的命令。
Web应用-智能灯光图17

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail