App Inventor和Data-View使用教程

原文博客：Doi技术团队
链接地址：https://blog.doiduoyi.com
初心：记录优秀的Doi技术团队学习经历

Data-View介绍

数据视图系统(Data-View)
用户上传不同类型的数据，根据不同的数据类型绘制成不同的图形。实现数据可视化，作为物联网或者App Inventor中的数据持久化平台使用。
同样地，你也可以通过Data-View制造数据，传输给，从而实现控制硬件。
项目地址：https://dataview.doiduoyi.com/

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

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

基础概念

Data-View的数据结构分3层

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

如图：

1.png

频道

2.png

数据域

目前支持的功能有：

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

   
   
   3.png

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

   
   
   4.png

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

   
   
   5.png

4. 可以对数据域信息的修改和订阅数据域（订阅后，会该数据域会出现在仪表盘）

   
   
   6.png

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

   
   
   7.png

数据点

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

如下图，下图是整型类型的数据点所绘制的图形。

8.png

功能

App Inventor发送数据到Data-View

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

   9.png

2. 新建一个项目

   
   
   10.png

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

   
   
   11.png

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

   
   
   Image.png

5. 进入app该数据域，并且选择导出，然后点击添加数据点（此时已经成功复制）。

   
   
   12.png

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

   
   
   13.png

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

   
   
   14.png

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

   
   
   15.png

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

   
   
   16.png

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

    
    
    17.png

11. 点击左边的函数，找出添加数据点（数值），拖进界面

    
    
    18.png

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

    
    
    19.png

13. 此时界面的图如下

    
    
    20.png

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

15. 选择http组件，拖到界面中

    
    
    21.png

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

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

    
    
    22.png

18. 点击左边，选择计时器，拖入界面

    
    
    23.png

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

    
    
    24.png

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

    
    
    25.png

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

    
    
    26.png

22. 点击添加数值按钮
    23.回到Data-View的app数据域界面

    
    
    27.png

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

    
    
    28.png