App Inventor和Data-View使用教程 置顶!

  |   0 评论   |   0 浏览   |   蓝汝丶琪

Data-View 介绍

数据视图系统(Data-View)

用户上传不同类型的数据,根据不同的数据类型绘制成不同的图形。实现数据可视化,作为物联网或者 App Inventor 中的数据持久化平台使用。
同样地,你也可以通过 Data-View 制造数据,传输给,从而实现控制硬件。

地址:http://dataview.doiduoyi.com/

你可以通过 Data-View 做什么?

  • App Inventor 或者其他第三方通过接口传数据给 Data-View,Data-View 根据数据变化,实时绘制不同的数据图形。
  • 通过 Data-View 添加数据,第三方可以通过接口获取到数据。
  • Data-View 上绘制成的图形都可以生产 HTML 静态文件下载

基础概念

Data-View 的数据结构分 3 层

  • 频道:
    • 数据域的集合,里面可以包含多个数据域
  • 数据域:
    • 具有特定单一类型数据点的集合。
    • 目前数据域支持的数据点类型有:
      • 整型
      • 字符串类型
      • 布尔类型
  • 数据点:
    • 具体数据

如图:

1.png

频道

2.png

数据域

目前支持的功能有:

  1. 查询选项,可以查询一段时间内所有的数据点
    G9amZt.png

  2. 模拟数据,此功能可以增加数据点,同时也可以通过这个功能给 App Inventor 或者硬件发送数据
    GCFl4S.png

  3. 密钥,通过接口 API 操作数据域的私钥
    GCFtun.png

  4. 可以对数据域信息的修改和订阅数据域(订阅后,会该数据域会出现在仪表盘)
    GCF04U.png

  5. 导出。可以导出 App Inventor 2 积木代码的程序,或者将图形导出成 HTML 格式的文件
    GCFr34.png

数据点

Dava-View 根据多个数据点的数据绘制出图形。

如下图,下图是整型类型的数据点所绘制的图形。
GCFgD1.png

功能

App Inventor 发送数据到 Data-View

  1. 打开 app.wxbit 网站 。网址:https://app.wxbit.com/#503564

  2. 新建一个项目
    GCFh4O.png

  3. 在左边拖拉一个按钮到中间的屏幕中,并重命名为添加数值
    GCF5CD.png

  4. 回到 Data_View,我们创建一个渠道,并且创建一个数据域,名称叫 app,类型选择数值型。
    注意:数据域类型为数值型
    GCkPrn.png

  5. 进入 app 该数据域,并且选择导出,然后点击添加数据点(此时已经成功复制)。
    GCkeGF.png

  6. 回到 app.wxbit,点击右上角的逻辑设计
    GCkNxH.png

  7. 按下 F12 打开浏览器的开发者面板,于面板上方选中 控制台(Console) 选项卡,将已复制的代码粘贴至 控制台(Console) 中的输入框,按下 Enter 后即可将积木导入编辑页面。
    GCkwqI.png

  8. 按下回车后,界面会出现以下函数块
    GCkrIf.png

  9. 点击左边的添加数值,然后拖动第一个模块到界面
    GCkyi8.png

  10. 此时界面有两个代码块
    GCkWss.png

  11. 点击左边的函数,找出添加数据点(数值),拖进界面
    GCk4Zq.png

  12. 点击左边的数学,找出随机 1 到 100 的数值,拖进界面
    GCkHWF.png

  13. 此时界面的图如下
    GCkXLR.png

  14. 这个时候,点击右上角的组件设计,回到设计页面

  15. 选择 http 组件,拖到界面中
    GCACWD.png

  16. 点击右上角逻辑设计,回到代码版块

  17. 点击左边,选择 Http 客户端,拖进界面,并跟外名称为 Web 客户端
    GCAZwt.png

  18. 点击左边,选择计时器,拖入界面
    GCA1yj.png

  19. 点击右上角的逻辑设计,检查代码块
    GCAeTP.png

  20. 此时开发以及完成, 可以导出 APK 到手机安装了
    GCAJwq.png

  21. 将下载的应用安装到手机
    GCAB6J.png

  22. 点击添加数值按钮

  23. 回到 Data-View 的 app 数据域界面
    GCARfO.png

  24. 可以点击导出,点击绘制编辑器。绘制自己想要的图像或者下载图像
    GCAfpD.png

传递数据到 App Inventor

待续


标题:App Inventor和Data-View使用教程
作者:蓝汝丶琪
地址:https://blog.doiduoyi.com/articles/1585233752372.html

评论

发表评论