基于App Inventor的多人协作绘画板App的设计与实现

杨道全

摘要：该文基于App Inventor系统，运用 MQTT 即时通信技术，设计并实现了一个能够多人协作绘画的手机应用。在教学实践中，由于App Inventor系统不要求学生先学习编程语法就能开始编程，极大地降低编程门槛。通过讲解该实例的开发，对培养学生的编程兴趣，增强学生对网络通信技术的理解有较好的效果。

关键词：图形化编程;App Inventor;画板;MQTT

中图分类号：TP319      文献标识码：A

文章编号：1009-3044（2022）16-0097-03

1 引言

智能手机的普及，各种各样的手机应用渗透到使用者的工作和生活中。尽管如此，智能手机的用户仍时常找不到合适使用的手机应用，想要自己开发却苦于没有掌握编程技术。“App Inventor的出现旨在普及手机应用开发技术，并在各种教育环境中用作学习计算思维的工具，教人们构建应用程序以解决工作与生活中的问题，让普通人也能开发属于自己的手机应用。”[1-2]本文基于App Inventor系统设计和实现的手机应用，为编程爱好者和计算思维教学提供参考。

2 相关技术

2.1 App Inventor技术简介

“App Inventor是一个直观的可视化编程环境，允许每个人为 Android 手机、iPhone 和 Android/iOS 平板电脑构建功能齐全的应用程序。那些刚接触App Inventor的人，可以在 30 分钟内完成第一个简单应用程序的制作。App Inventor项目旨在帮助所有人，尤其是年轻人，从技术消费转向技术创造，从而实现软件开发的普及化。”[3]截至本文完稿时，App Inventor支持 iPhone（iOS）应用的功能尚未开发完成，还未在官方服务器[4]上线。

App Inventor基于 Apache2 协议开源，因此在国内外有很多个分支版本，本文选用的是国内的 WxBit 图形化编程系统。该版本针对国内用户做了大量本地化的开发工作，支持多点触控并且提供MQTT客户端组件，支持多人同时连接调试和跨网段调试，对使用者更加友好，也更加适合用于网络教学。

2.2 MQTT技术简介

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议）由 IBM 在1999年发布，构建于 TCP/IP 协议之上，是一种基于发布/订阅模式的轻量级二进制网络通信协议。由于 MQTT 协议灵活的订阅机制、服务质量（Quality of Service）、遗愿消息（Will Message）等特性，适用于低带宽、不可靠的网络下提供实时可靠的消息服务，使其在物联网、小型设备、移动应用等方面有广泛的应用[5]。MQTT 的订阅模式如图1所示。

3 系统设计

3.1 启动界面设计

本文设计的多人协作绘画板，允许多位安装该应用的用户同时绘画，每一位用户所绘制的图画，即时在其他用户的画板中显示。在应用启动时要求用户填写画板名称，只有使用相同名称画板的用户，才能在一起绘画，这样能够避免多人同时使用该应用时造成混乱。原型设计如图2所示。

3.2 绘画界面设计

用户填写画板名称进入后，即可开始绘画。默认选中黑色的画笔，用户手指按在屏幕上移动，移动的轨迹连接起来，就是所画出的线条。允许多个手指同时按在屏幕上绘画，以便用户可以快捷画出多层的线条或其他特殊的效果。应用根据手指按在屏幕的顺序给予编号，可以为每个序号的手指设置不同的画笔粗细和颜色。原型设计如图3所示。

3.3 协作设计

用户输入画板名称开始绘画，实际就是向MQTT Broker发布和订阅画板名称设置的主题。当用户手指（触控点）在屏幕移动时，应用将接收到的屏幕坐标发送到该主题，本应用和其他使用相同主题的应用都会接收到坐标消息。考虑到教学所需的可读性，坐标消息设计为JSON文本，数据结构设计如下：

{"id"："client1"，"paths"：{"1"：{"size"：1，"color"：-16777216，"points"：[[12，10]，[14，20]，[20，30]，[22，43]]}，"2"：{"size"：2，"color"：-20561，"points"：[[100，80]，[90，90]，[93，95]，[93，124]，[99，135]]}}}

id：绘画板的标识，也是MQTT客户端的标识，用于区分消息来源。

paths：笔画记录，对应触控点的移动轨迹。

size：画笔的粗细，单位为dp（Density-independent Pixels）。

color：画笔的颜色，为ARGB表示颜色对应的整数值。

points：笔画的坐标点，记录触控点依次经过的屏幕坐标。

4 系統实现

打开浏览器登录 WxBit 图形化编程系统，新建一个名称为“多人协作绘画板v1”的项目开始制作。创建项目完成后自动进入编程界面，在项目名称条的右边有2个按钮，代表系统的两种视图：组件设计和逻辑设计。在组件设计视图中摆放好使用到的组件，再切换到逻辑设计视图完成图形化编程。

4.1 启动界面的组件设计

按照设计，在开始绘画前，需要用户填写绘画板的名称。Screen1为应用启动的第一个屏幕，首先在Screen1的组件属性中，将对齐方式设置为“上中”，屏幕方向设置为“锁定横屏”，去除“是否显示状态栏”和“是否显示标题栏”前面的勾选。然后从组件面板的“界面布局”中拖入一个水平布局，对齐方式设置为正中，宽度设置为充满，高度为50dp。再按照图2的原型设计，添加输入框和按钮等其他组件，完成的设计如图4所示。

4.2 启动界面的逻辑设计

进入逻辑设计视图前，先“增加屏幕”，命名为DrawingBoard，也就是点击“开始绘画”按钮后进入的屏幕。当“开始绘画”按钮被点击时，如果画板名称不为空，就进入 DrawingBoard 屏幕，否则显示提示信息。进入逻辑设计视图，点击模块中的“按钮_开始绘画”，将“当‘按钮_开始绘画被点击”图形块拖进工作面板，开始逻辑设计，完成的设计如图5所示。

4.3 绘画界面的组件设计

首先在屏幕属性中，将屏幕方向设置为“锁定横屏”，隐藏状态栏和标题栏。从“界面布局”中将“层叠布局”拖入工作面板，宽高设置为充满，再从“绘图动画”中拖入画布放到层叠布局中，宽高设置为充满。按照图3的原型设计加入其他组件，完成后如图6所示。

在工作面板的下方，有三個不可见组件，其中的 MQTT 客户端用于向 MQTT Broker 发布和订阅消息，计时器又是什么用途呢？在绘画时，随着手指的移动短时间产生大量坐标点信息，如果直接将这些坐标点发布出去，将会发生消息堵塞或者错位。因为 MQTT Broker 可能对消息的发布频率有限制，而且由于每次发送消息的网络通信时间不确定，相差若干毫秒的两个消息，可能出现先发送的消息后到达服务器的情况。为此，需要先将笔画坐标点放到消息队列中，在计时器到达设定时间间隔后再发送，降低发送消息的频率。如果时间间隔设置过长，就会出现比较大的消息延迟，如果设置过短又会导致前面所述的问题。一般设置为MQTT客户端与MQTT Broker连接延迟的3倍以上，不低于100毫秒。

4.4 绘画界面的逻辑设计

从启动界面进入绘画界面时，将所填写的画板名称记录到全局变量中，并尝试连接MQTT Broker，连接成功才启动计时器定时处理笔画消息队列，具体实现如图7所示。

当手指在画布按下时设置笔画列表为空，在画布组件中移动时将划过的坐标点加入消息队列，具体实现如图8和图9所示。

当计时器到设定的计时间隔点，将笔画信息发布到MQTT Broker，以便本机及其他订阅了相同主题的手机收到。需要注意的是，将笔画信息加入消息队列后要将全局变量中记录的笔画信息清空，并将最后一个坐标点放回笔画记录字典中，实现如图10所示。

当MQTT客户端收到消息时，将文本格式的JSON转为字典结构，读出笔画信息并据此在画布中绘画。实现如图11所示。

5 结束语

本文实现的“多人协作绘画板”实例涉及变量、函数、数据结构、网络通信等多方面的知识，限于篇幅不能展开讨论。实现部分也只能粗略介绍消息发布与订阅相关的逻辑，没有进行异常处理及容错，如连接MQTT失败时如何继续本地绘画等，如何完善留待读者思考。画布的撤销与重做机制也没有实现，在教学环节中这些“不足”与“缺陷”可以根据教学时长扩展，也可以作为留给学生的作业，让学生继续探索以加深理解。

参考文献：

[1] Wolber D，Abelson H，Spertus E，et al.App inventor[J]. O'Reilly Media，Inc.，2011.

[2] Patton E W，Tissenbaum M，Harunani F.MIT App Inventor：Objectives，Design，and Development [C]//Computational thinking education.Singapore：Springer，2019：31-49.

[3] About Us[EB/OL].[2021-09-20].http：//appinventor.mit.edu/about-us.

[4] MIT App Inventor 2[EB/OL].[2021-09-20].http：//ai2.appinventor.mit.edu.

[5] MQTT：The Standard for IoT Messaging[EB/OL].[2021-09-20].https：//mqtt.org.

【通联编辑：谢媛媛】