从头开始学App Inventor

白二娃

App Inventor既方便，又强大，可以创建出各种有趣又实用的应用，充分发挥你的想象力。我们将根据现实场景，提出问题，转化成APP开发需求，通过创意构思、组件设计、逻辑设计、连接调试，完成一系列APP实例的开发，逐步掌握APP程序设计的基础知识和基本方法。

App Inventor是由Google公司开发的一款在线Android编程工具软件，目前由麻省理工学院MIT行动学习中心维护，具有如下特点：

1.方便的环境搭建：采用浏览器+云服务模式，无需复杂软件安装。所有开发代码储存在云端服务器上，保证了源代码的一致性和安全性。

2.简单的开发过程：无需关注复杂的语法规则，通过图形化积木式的组件拖放来完成APP开发，没有编程基础的用户也可以开发APP。

3.组件模块：有多媒体、传感器、乐高机器人等丰富的组件，方便开发者实现创意。

4.调试功能：通过AI伴侣进行调试，所有代码的变更会自动同步到进行调试的手机或者模拟器中，无需重装应用，就可以看到最新效果。

一般来说，开发一个项目的流程可以用一个公式加以描述：

项目开发=创意构思+屏幕设计+功能设计+测试运行

与此对应，利用App Inventor开发APP的过程就是：

APP开发=创意构思+组件设计+逻辑设计+连接调试

App Inventor的官网是appinventor.mit.edu，因为在国外时常无法正常登录。我们可以登录并注册广州市电化教育馆提供的中文版App Inventor（http：//app.gzjkw.net/）。

App Inventor采用可视化的设计开发方法，将“组件面板”中的组件拖至“工作面板”，就能设计APP的运行效果。当向屏幕Screen1中拖放某些组件后，这些组件会显示在“组件列表”中。在“工作面板”或者“组件列表”中选择任意组件，便会在“组件属性”中出现其对应的属性。

切换到“逻辑设计”视图，“模块”栏列出了所有内置块和该屏幕中所有组件。“素材”栏可用于直接上传素材文件。“工作面板”占据了大部分空间，其左下角显示的是当前项目中出现的错误或者警告个数;右上方是一个书包，可以实现多个屏幕之间的代码复制;右下方是一个垃圾桶，可以把不要的积木块放进去，从而实现删除功能。

模块是“多彩”的。在内置块中，“控制”是土黄色，“逻辑”是黄绿色，“数学”是蓝色，“文本”是玫红色，“列表”是浅蓝色，“颜色”是灰色，“变量”是橙色，“过程”是紫色。单击模块栏中任何一个组件，会弹出该组件所关联拥有的编程模块，土黄色模块表示触发事件，深绿色模块用来设置属性，浅绿色用来读取属性，紫色模块表示调用方法。注意，触发事件模块总在最外层，其他模块总被“包裹”在里面。

三、 做个点名神器APP

点名是校园学习生活中最常见的环节，检查出勤率要点名，回答问题要点名……那么，第一个手机应用就来做“点名神器”吧！通过设计和制作这个简单的APP，我们可以熟悉App Inventor从设计到组件搭建程序编写和APK安装调试的全流程。

“点名神器”是老师的好帮手，摇一摇手机或者点击按钮，即可随机显示学生的学号，并语音播报出来，以此达到随机点名的目的。这要比老师随机叫学生名字更能让学生集中注意力。

1） 新建项目

用自己的账号登錄开发网站，选择“项目→新建项目”，创建一个新项目“DianMing”。项目名称是以字母开头的字母、数字和下划线的组合，尽管是中文版，但目前项目名称不支持中文，命名要做到见名知意，这样才能一目了然。

2） 选择组件

选择所需的6个组件，拖放至工作面板中。分别是：

Screen（屏幕），1个（默认）。

按钮，2个。

音效，1个。

文本语音转换器，1个。

加速度传感器，1个。

其中，音效、文本语音转换器和加速度传感器是非可视组件，不会直接显示在Screen中，而是显示在屏幕下方的“非可视组件”栏中。

我们要养成给组件命名的习惯，虽然组件有默认名，但是后期逻辑设计时一个好分辨的名字会让我们轻松不少。

现在有两个按钮，分别命名为“按钮_点名”“按钮_学号”。

3） 设置Screen组件属性

在App Inventor中，每个APP至少有一个Screen组件。在新建项目时默认建立了一个Screen1组件，这是后面应用开发的基础。工作面板上方的3个屏幕按钮可以实现增加和删除屏幕以及多屏幕间的切换。本例中只有一个屏幕，这几个按钮用不上。

在Screen组件中需要根据需求设置相应属性值，这些属性将影响到APP的屏幕和交互效果。在本例中，整个Screen1 组件的属性设置如图所示。

“水平对齐”和“垂直对齐”改为居中，“应用名称”是APP的名称，在手机中安装后会显示在APP图标下;“背景颜色”改为黑色;“图标”即应用安装后所显示的图标，如果不设置，APP安装后将使用App Inventor默认的图标，我们可以找一个合适的图片在“素材”中上传;“屏幕方向”为竖屏;“标题”就是显示在屏幕左上角标题栏的文字。

4） 设置按钮组件属性

按钮可以感知用户的触摸。从“用户屏幕”组件栏中拖放两个“按钮”组件到Screen1中，用于响应用户点击事件和学号的显示。

“按钮_点名”组件属性，背景橙色;启用;粗体;字号50;高度200像素;宽度200像素;形状椭圆;勾选“显示交互效果”;文本“点名”;居中;黑色。

“按钮_学号”组件属性，背景白色;启用;粗体;字号50;高度200像素;宽度200像素;形状椭圆;“显示交互效果”不勾选;文本“学号”;居中;红色。

按钮属性中并没有对按钮本身设置对齐方式，但是两个按钮组件却居于屏幕的中间。这是因为在Screen1的“水平对齐”属性设置为“居中”。組件的对齐方式是由它的父容器所决定的。所谓父容器，就是它所被安放进的组件。本例中，Screen1 就是该按钮组件的父容器。

5） 音效

音效组件是一种多媒体组件，可以播放声音文件，也可以让手机产生震动。本例中，组件属 性使用默认值。

6） 文本语音转换器

这个组件可以让设备将文字用语音读出来。“音调”设置合成语音的音调，范围为0～2，值越低，音调越低;“语速”范围为0～2。本例组件属性使用默认值。

注意，“文本语音转换器”组件默认调用的是安卓Pico TTS引擎（TTS即Text To Speech，从文本到语音），该引擎不支持中文，需要用户自行在应用商店中安装百度语音助手、讯飞语音+，然后在“手机→设置→高级设置→语言和输入法→文字转语音（TTS）输出”中选择为默认引擎，这一步在APP无法正常播放中文时才需要操作。

7） 加速度传感器

该组件用于检测手机摇一摇，本例属性使用默认值。

本例流程为：点击按钮——显示随机学号——手机震动——播报学号

代码非常简单，毕竟我们的目标是让第一个APP成功地在手机上运行。点击按钮和摇一摇手机完成相同的动作，具体代码如图。

App Inventor中的行为是由事件驱动的。所谓事件，就是发生了某种特殊情况，如某个按钮被点击、手机接收到一条新的短信等。事件类型有多种，不同组件能响应的事件也不尽相同。

当事件发生时，APP会调用一系列过程模块来做出相应的处理。我们把响应某个事件而执行的一系列过程模块称为事件处理器。事件处理器是App Inventor执行的基本入口单元，任何功能模块代码都必须包含到某个事件处理器中才有可能被执行。

完成“点名神器”的代码后，我们需要在手机上做调试。App Inventor提供了3种连接调试方式，推荐AI伴侣方式。

将计算机和安卓设备连接到同一网络（相同网段），选择“帮助→AI伴侣信息”，扫码安装Al伴侣，然后使用手机AI伴侣扫码“连接→AI伴侣”中的二维码。这样代码中的修改就能实时反应到手机中。

调试完成后，可以打包APK，将APP安装在手机中。

至此，我们就初步完成了设计、编写、分发APP的全部流程，为今后编写更加复杂的APP打好了基础。