App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

App Inventor编程教程-目录

想象一下,你像往常一样,正在一条熟悉的路上慢跑,突然被一个念头打动——一款全新的杀手级移动应用!一路上,你甚至忘记了回家…

首先介绍App Inventor中两个重要的组成部分——设计视图及编程视图,然后介绍应用开发的基本步骤,并带领读者完成第一个应用:你好猫咪。

在完成本章的学习之后,你就可以独立地创建应用了。 在程序员中有一个惯例,通常在搭建好新的开发环境之后,运行的第一个程序是“Hello World!”:通过输出(在屏幕上显示)文字“Hello World!”来测试系统是否已经就绪。这个传统可以追溯到20世纪70年代,从Brian Kernighan 在贝尔实验室使用C语言开始。

使用App Inventor的最大优势,就是利用安卓手机的多媒体功能——即便是最简单的应用,也可以实现声音的播放以及对触屏的响应,而不仅仅是显示文字。想想都令人感到兴奋,那么,让我们马上开始吧。第一个应用是“你好猫咪”(如图1-1),当你触摸这只猫时,它会发出“喵呜”的叫声;当你摇晃它时,手机将产生振动。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-1 你好猫咪

学习要点

本章涵盖了以下要点:

  • 创建应用包括两个步骤:为应用添加组件以及为组件设定行为;
  • 在设计视图中选择并添加组件,有些组件会显示在设备的屏幕上,有些则看不见;
  • 从电脑中上传应用中所需的素材文件(图片、音频等);
  • 在编程视图中拼装代码块,来定义组件的行为;
  • 利用App Inventor的实时测试功能来测试正在创建的应用,边做边测,观察应用的外观,并体验应用的功能;
  • 将制作完成的应用打包下载到安卓设备上。

App Inventor的开发环境

打开浏览器,在地址栏中输入ai2.appinventor.mit.edu,就可以打开App Inventor最新版本 的开发环境,该版本发布于2013年12月,有人称其为App Inventor 2,不过它的正式名称依然是App Inventor,此前的版本则被称为App Inventor Classic(经典版)。本书使用的是新版本 。 App Inventor的编程环境包括以下三个重要组成部分:

  • 设计视图:如图1-2所示,用于为应用添加组件,并对组件的属性进行设置;
  • 编程视图:如图1-3所示,用于定义组件的行为(例如,当用户点击按钮时应用作何响应);
  • 测试设备:在开发应用过程中,使用安卓设备对应用进行实时测试;如果你手边没有安卓设备,也可以使用系统中自带的安卓模拟器来测试应用。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
图1-2 设计视图:用于设置应用的外观
App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
图1-3 编程视图:用于设定应用的行为
如果你是第一次访问网站ai2.appinventor.mit.edu,你会看到项目页,它多半是空的,因为你还没有创建过任何项目。单击页面左上角的菜单“项目→新建项目”创建一个项目,输入“你好猫咪”作为项目名称(注意不带空格),然后单击“确定”按钮。

新建项目后打开的第一个窗口是设计视图,此时,你可以单击窗口右上角的编程按钮来切换到编程视图。

App Inventor是一个基于云计算的开发工具,也就是说,当你在开发项目时,项目中的所有信息都保存在网络服务器上,因此,当你关闭App Inventor,然后再重新打开它时,项目依然还在,你不需要像使用微软公司的Word那样,在本地电脑上保存任何信息,

设计组件

你的第一步操作是在设计视图中完成的,设计视图也被称为“组件设计器”。组件是应用的组成元素,就像一个菜谱中的配料。有些组件功能单一,例如标签,它仅用于在屏幕上显示文字;再例如按钮,点击按钮将引发一个活动;有些组件功能复杂,例如画布组件,它可以容纳静态图片或动画,又如加速度传感器组件,它具有运动感知能力,可以侦测到设备的移动或摇晃;另一些组件可以编写并发送短信、播放音乐、视频或者从网络上抓取信息,等等。

设计视图的外观如图1-4所示。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-4 App Inventor的设计视图
设计视图被划分为如下几个区域:

  • 中部的白色区域被称为工作区域,用于放置应用中的所有组件(可视组件与非可视组件)。工作区域的中央是用户界面的预览窗口,对应于设备的屏幕,你可以根据自己的需要来安排用户界面上的可视组件。预览窗口中只能粗略地显示应用的外观,例如,同样的一行文字,在测试设备上的换行位置,可能与预览窗口中的不同。如果想看到应用的实际外观,需要用安卓设备或模拟器进行测试(稍后我们会详细介绍测试方法)。
  • 工作区域的左侧是组件面板,其中列出了可供选择的所有组件。组件按类别分为九个组。默认情况下,只有用户界面类组件处于可见状态,其他组件隐藏在各自的类别名称下,点击类别名称,如多媒体,可以显示该类别的组件。
  • 紧邻工作区域右侧的是组件列表,显示了项目中的所有组件,拖动到工作区域中的所有组件都将显示在该列表中。此时,该项目中只有一个组件:Screen1,它代表设备的屏幕。
  • 组件列表下方是素材区,显示项目中的所有素材资源(图片和声音等)。本项目中尚未添加任何素材资源,不过稍后就会添加。
  • 最右边的部分是属性面板,用于显示组件的属性。在工作区域或组件列表中单击某个组件,将在属性面板中看到该组件的全部属性。属性描述了组件的详细信息(例如,如果点击标签组件,将看到与颜色、显示文本及字体相关的属性。),可以在属性面板中修改组件的属性。当前显示的是屏幕(名为Screen1)的属性,包括背景颜色、背景图片及标题等。

你好猫咪应用中需要两个可视组件(可以理解为应用中可以被用户看到的组件):标签组件用于显示文字“可爱的猫咪”,按钮组件用于呈现一张猫咪的图片;应用中还需要两个非可视组件:音效播放器组件,用来播放声音,如猫叫声;以及加速度传感器组件,用于检测设备是否被摇晃。别担心,我们将一步一步地教你如何使用这些组件。

创建一个标签

在项目中添加的第一个组件是标签:

  1. 添加标签:在组件面板中,打开用户界面类组件(假设它处于关闭状态),单击标签(用户界面组件列表中的第七项),并将其拖动到预览窗口中。你会看到预览窗口的左上角出现一个矩形框,框内有“标签1文本”字样。
  2. 修改标签的显示文本属性:观察设计视图右侧的属性面板,其中显示了标签的属性。大约在中间位置有一个“显示文本”属性,它的下方是标签中显示的文字。将文字改为“可爱的猫咪”并按回车键。你会看到在预览窗口上方的文字也改变了。
  3. 修改标签的其他属性:单击背景颜色属性下方的方框,可以改变标签的背景颜色,背景颜色的当前值为透明(无背景色),从显示的颜色列表中选择蓝色,将标签的文本颜色属性改为黄色,将字号属性改为20。

设计视图的外观如图1-5所示:

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-5 应用中有了一个标签
添加按钮组件

你好猫咪应用中的猫咪图片要用按钮组件来实现:添加一个标准的按钮,然后将它的图片属性更改为猫咪图片。在设计视图的组件面板中单击按钮(在用户界面类组件列表的顶部),将它拖到预览窗口中,置于标签下方。你会看到一个矩形按钮出现在预览窗口中。

好,现在按钮已经就位,我们想要实现的功能是,当它被点击时,播放一个声音,但首先我们要把它装扮一下,让它看起来像一只猫,而不是一个呆板的矩形。要做到这一点需要完成以下操作:

  1. 首先下载一个猫咪的图片文件,将其保存在你的电脑桌面上。
  2. 此时,属性面板中显示的应该是按钮的属性,如果不是,可以点击预览窗口中的按钮组件,以便在右侧的属性面板中查看按钮的属性。在属性面板中找到“图片”属性,点击其下方的方框(其中显示文字“无...”)。
  3. 点击素材区的"上传文件"按钮,点击“选择文件”按钮,从你的电脑桌面上找到刚才下载的文件Kitty.png,点击“确定”,将完成图片的上传。
  4. 这时,ketty.png将出现在组件列表下方的素材区中。与此同时,在按钮的图片属性的下拉列表中,也将出现Kitty.png选项。点击该选项,并点击确定按钮。这时,屏幕中的按钮变成了猫咪的图片。
  5. 注意到猫咪的图片上显示了文字“按钮1文本”,我们不希望在应用中看到这些字,因此将按钮1的显示文本属性修改为空(删除所有字符)。

现在设计视图看起来应该如图1-6所示。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-6 应用中的一个标签和一个显示为图片的按钮
添加猫叫声

我们希望当点击按钮时,应用会发出猫叫声。为此需要添加猫叫的声音文件,并通过设定按钮的行为来实现这一功能:

  1. 下载meow.mp3
  2. 在设计视图左侧的组件面板中,单击多媒体类组件,打开多媒体组件列表。向预览窗口中拖放一个音效播放器组件。无论你把它放在预览窗口中的什么位置,它都将出现在工作区域底部的“非可视组件”区。非可视组件在应用中用于实现特定的功能,但它们不会显示在用户界面中;
  3. 点击音效播放器1以便显示其属性。设置其源文件属性为meow.mp3。同猫咪图片一样,需要从电脑中上传这个声音文件。上传完成后,素材列表中将出现kitty.png与meow.mp3两个文件。

表1-1中列出了项目中现有的组件。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

实时测试

在使用App Inventor开发应用的过程中,可以随时连接安卓设备,对应用进行测试。这种边做边测的开发方式非常重要,这也是那些经验老道的程序员们的惯常做法,可以节省大量无效的工作时间。

使用安卓设备进行测试需要具备两个条件,首先,你的手机连接到了WIFI网络上,其次,在你的手机上需要安装一个叫做"AI伴侣"的应用(无需在电脑上安装任何软件)。如果你手头没有安卓设备,则需要在电脑上安装一个特殊的软件,来实现模拟器的功能,关于这一点,可以访问以下网址。

如果你有一部安卓设备,请执行下列操作:

  1. 用安卓设备访问谷歌商店,搜索并下载安装“MIT AI2 Companion”应用,安装成功后运行该应用;
  2. 让你的测试手机与开发电脑连接到同一个WIFI上;
  3. 在App Inventor开发环境(浏览器)中,从窗口上部的菜单中,打开“连接”菜单,并选择“连接AI伴侣”,如图1-7所示。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
    图1-7 点击“连接”并选择“AI伴侣”
  4. 运行在测试设备上的AI伴侣如图1-8所示,选择“扫描二维码(scan QR code)” ,当条码扫描程序启动后,将手机摄像头对准电脑屏幕上的条码开始扫描。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
图1-8 测试设备上运行的AI伴侣,点击“扫描二维码”
如果一切顺利,你好猫咪应用将运行在测试设备上,你可以看到应用中添加的可视组件,此时,如果你在设计视图或编程视图中作任何修改,测试设备上的应用都将随之发生改变,这就是实时测试的含义。

如果应用已经在测试设备上运行起来,试着触摸一下按钮,想想看会发生什么事情?什么事儿也不会发生,因为你还没有对它下达任何指令。用App Inventor开发应用,首先要明确一点,也是最重要的一点,即:在设计视图中添加的每一个组件,必须在编程视图中为其编写程序,组件才能具备你所预期的那些功能。

为组件添加行为

此前我们已经为应用添加了按钮、标签及音效播放器组件,但它们只是构成应用的“硬件”,现在我们来为这些“硬件”编写必要的“软件”。首先,当触摸按钮时,让应用发出猫叫声。这些工作需要在编程视图中完成,点击设计视图右上角的“编程”按钮,切换到编程视图。 留心观察编程视图,这里将是你向组件下达指令的地方,让它们做什么,何时做,都将在这里实现。眼下,你将命令猫咪按钮,在被触碰(点击)时,发出猫叫声。如果把组件比作一个菜谱的食材,那么即将使用的代码块就是烹调一道菜的具体实施步骤。

让猫发出叫声

在编程视图窗口的左侧、“代码块”标题下面,可以看到三个大的代码块分组:内置块、Screen1以及任意组件,其中Screen1分组中列出了这个应用中的全部组件:标签1、按钮1以及音效播放器1;点击其中的任何一个组件的名称,将打开该组件的代码块抽屉,你将看到一组隶属于该组件的可选代码块。点击按钮1,打开按钮1的代码块抽屉,将看到与按钮1有关的代码块,可以用它们来设置按钮的行为,最上面的代码块是“当按钮1被点击时”,如图1-9所示。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-9 点击按钮1显示该组件的代码块
点击代码块“当按钮1被点击时”,代码块将落在工作区内。注意代码块上的文字“当”,那些包含了“当”字的黄色的代码块被称为“事件处理程序”,用来定义某个特定事件发生时,应用中组件的行为(不只是发生事件的组件——译者注)。在这个例子中,我们感兴趣的事件发生在用户点击猫咪图片时(实际上点击的是按钮),如图1-10所示,接下来我们将在这个块中添加一段程序,来响应这个点击事件。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-10 在事件处理程序中设置对点击事件的响应
点击“音效播放器1”打开代码块抽屉,找到并拖出“让音效播放器1播放”块。(记得吗,我们之前将音效播放器1的源文件属性设置为加载到项目中的文件meow.mp3。)此时,你可能已经注意到,“让音效播放器1播放”块在外形上刚好与按钮1的点击事件块相吻合,这是App Inventor的特别设计,以便只有那些相匹配的块才能连接到一起。在这个例子中,包含“让”字的块用来引发组件的行为,与点击事件块连接到一起,共同构成一个整体。如图1-11所示,当两个块连接到一起时,会发出一个清脆的“咔哒”声。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网

图1-11 这时如果点击按钮,将发出猫叫声
不同于传统的程序代码(通常像混乱的“天书”一般),在App Inventor中,使用事件响应块,以一种简单明了的方式拼出组件的行为。在本例中,我们相当于直接说,“嘿,App Inventor,当有人点击猫咪按钮时,播放猫叫声。”

添加振动效果

当点击按钮时,让猫咪发出叫声,同时产生振动效果,这要借助于手机的振动功能来实现。这听起来很难,其实非常容易,因为用来播放猫叫声音的音效播放器组件也可以使设备产生振动。App Inventor可以帮助你挖掘设备的核心功能,而无需考虑这些功能(如振动)是如何实现的。现在,不必在设计视图中作任何改动,只是在编程视图中,向按钮点击事件块中添加另一个功能:

  1. 在编程视图中,单击音效播放器1,打开其代码块抽屉;
  2. 选择“让音效播放器1振动”块,将其拖动到“当按钮1被点击”块中,置于“让音效播放器1播放”块下方,恰好与原来的块吻合,如图1-12所示;如果不吻合,可尝试拖动它,使振动块顶部的凹陷恰好与播放块底部的凸起相对。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网图1-12 在按钮点击事件中播放声音并产生振动
  3. 注意:在"让音效播放器1振动"块的右下角写着“参数:毫秒数”字样,并且旁边还有一个开放的插槽。这种开放的插槽表示需要填入其他块,来设定行为的具体方式。本例中,开放插槽用于设定振动的时长——毫秒数。毫秒是多数编程语言中惯用的时间单位,1秒=1000毫秒。如果想让设备振动半秒钟,需要输入数字块“500”。打开内置块分组中的数学抽屉,会看到一列蓝色的代码块,如图1-13所示。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网图1-13 打开数学块抽屉
  4. 在数学块列表顶部,是数字块“0”,拖出该块,可以将0改写为需要的数字,如图1-14所示。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
    图1-14 选择数字块0(0为数字块的默认值)
  5. 选中数字0,并输入新的值500,如图1-15所示。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
    图1-15 将数值改写为500
  6. 将数字块500拖到振动块的开放插槽中,如图1-16所示。
    App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
    图1-16 将数字块500拖入毫秒数插槽

摇晃设备

现在继续挖掘安卓设备的特色,为应用添加最后一项功能:摇晃设备时发出猫叫声。为此要用到加速度传感器组件,它可以检测到设备的摇晃或移动。

  1. 在设计视图中,展开组件面板中的传感器分组,将加速度传感器组件拖入到预览窗口中。不必介意把它放在什么位置,像任何非可视组件一样,无论放在哪儿,它最终都会落到工作区域底部的“非可视组件”区。
  2. 摇晃设备的事件需要与单击按钮事件分开处理。这意味着需要一个新的事件处理程序。进入编程视图,发现在代码块的Screen1分组中增加了一个加速度传感器1组件,打开其代码块抽屉,拖出“当加速度传感器1被晃动时”块(代码块抽屉中的第二个块)。
  3. 像点击按钮时播放声音一样,将“让音效播放器1播放”块放在摇晃事件块的缺口中,摇动设备试试看。

图1-17中显示了完整的你好猫咪应用中的所用代码块。

App Inventor编程教程-第2课-你好猫咪-少儿编程教育网
图1-17 应用中的全部代码块

将应用下载到安卓设备中

App Inventor的实时测试功能依赖于开发设备与测试设备在同一个WIFI网络中,测试的过程虽然很方便,但问题是,如果设备与App Inventor之间的网络连接断开,则应用将无法运行——在设备上根本找不到这个应用,因为从来没有在设备上安装过它,它只是运行在AI伴侣应用中。

一个应用在开发完成后,可以将其下载并安装到安卓设备上,这样,即便安卓设备脱离了开发环境,应用也可以照常运行。现在,距离应用的完成还差一步——设置应用的发布图标:当应用安装在设备上,它会显示为一个小图片,凭借这个图片,你可以在设备中众多的应用中找到它。在设计视图中,选中Screen1组件,点击图标属性下面的方框(其中显示“无”),然后选择“上传文件”,从电脑中选择一张可以充当图标的图片(也可以不必另外上传文件,直接使用kitty.png作为图标。)。

下面来确认一下你的设备,看它是否允许从安卓商店以外的地方下载安装应用。大多数的安卓设备,都可以通过以下方法进行设置:选择“设置→安全”,并选中“未知来源”项。

现在再返回到App Inventor,在设计视图中(也可以在编程视图中——译者注),从顶部菜单中选择“编译→显示二维码”,此时,电脑屏幕上将显示一个进度条,这个过程大约需要1分钟时间。当编译完成时,屏幕上将显示一个二维码,打开你设备中的条码扫描软件 ,扫描条码。扫描完成后,设备可能会提示你输入Google帐户的密码(很多手机不会有这一项提示——译者注),输入密码之后,设备开始下载应用,这时设备的通知栏中会显示下载图标。打开通知栏,等应用下载完成后,选择安装。

安装完成后,设备上将出现“你好猫咪”的图标,这正是你刚刚创建的应用,现在可以在设备上使用它了。像运行其它应用一样,运行它。(确保你运行的是刚刚安装的应用,而不是App Inventor的AI伴侣应用。)现在,你可以退出AI伴侣,甚至将设备的连接断开,而设备上新安装的应用依然还在。

你要知道,一个经过编译并安装到设备上的应用,已经从你创建的App Inventor项目中分离出来,此时,你依然可以在开发环境中对项目进行改进,并在AI伴侣中进行测试,但这些修改不会体现在设备中已经安装的应用中。如果想让这些修改体现在编译后的应用中,你需要重新进行编译,下载新的版本来替换掉设备上原有的旧版本。

应用的分享

有两种方式可以分享应用:分享安装文件(.apk文件)或分享项目文件(.aia文件)。

首先说明如何分享安装文件。在App Inventor项目中单击顶部菜单“编译→下载到本地”,此操将在电脑上生成一个扩展名为apk的文件。将该文件作为电子邮件的附件发送给其他人,收件人可以用安卓设备来接收并打开邮件,安装该应用;或者,也可以将该文件上传到网络上(例如Dropbox 上),让其他人下载安装。需要强调的是,设备的安全设置中“未知来源”一项必须选中,才能安装来自于安卓市场 之外的应用。

你也可以将.apk文件存放在网络上,并生成一个网络地址的二维码(图片),发布在网页上,甚至可以印刷在海报上,人们可以用自己的安卓设备扫描这个二维码,来完成下载的操作。网络上有很多可以将网址转化成二维码的工具(比如可以访问qrcode.kaywa.com),你只要将生成的二维码图片发布到网页上,或添加到印刷的文档中即可。

接下来解释源文件的分享。源文件可以在开发者之间分享。在App Inventor开发环境中,打开需要分享的项目(如本章的例子你好猫咪),点击顶部菜单中的“项目→导出项目(.aia)”,此操作将生成一个扩展名为aia的文件(你好猫咪.aia),并保存到电脑上默认的下载文件夹中。你可以用电子邮件把文件发送给其他人。收件人打开App Inventor,选择“项目→导入项目(.aia)”,并选择.aia文件,就可以在自己的开发环境中还原你的项目。此后使用者对该项目所做的任何修改,都不会影响到你的原有版本。

不久的将来,App Inventor还将拥有自己的应用发布平台,在这里,你可以分享自己的应用,也可以获得来自世界各地的开发者分享的项目,并改写这些项目。

改进建议

在这本书里,每当完成一个应用,我们鼓励你做进一步的思考,考虑如何改进你的应用。每一章的结尾处,我们都会给出一些有针对性的建议,供你参考和尝试。这些建议引导你从组件(设计)以及代码(编程)的角度,来探索程序改进的可能性。而不仅仅满足于教程中提供的那些方法。

下面是你好猫咪应用中可以改进的部分:

  • 当摇晃设备时,猫的叫声听起来有点儿奇怪,好像有回声。这是因为在1秒钟内,加速度传感器多次触发摇动事件,所以猫叫声是重叠的。在设计视图中,你会发现音效播放器组件有一个最小间隔属性,它决定了两次声音播放之间的时间间隔。当前设置为不足半秒钟(400毫秒),这个间隔小于单次猫叫的持续时间(播放软件上显示该音频文件的时间长度为1秒钟。——译者注)。通过改变播放的最小间隔,可以改变声音的重叠。
  • 如果你带着安装了这个应用的手机走在街上,每当你突然移动时,设备就会发出猫叫声,这难免会让你觉得尴尬。通常安卓应用一旦开始运行,就会一直处于运行状态,即使这时屏幕已经关闭,也就是说,这时应用程序与加速度传感器之间的通信不会中断,因而猫叫声也会相继传来。要想真正退出程序,需要唤出应用,然后点击设备的系统菜单按钮,并选择“退出应用(Stop this application )”,如此才能完全关闭应用。

小结

以下是本章中涵盖的内容:

  • 创建应用的过程:在设计视图中选择并添加组件,并在编程视图中设定它们的行为——做什么以及何时做;
  • 有些组件是可视的,有些则不可视。可视组件会出现在应用的用户界面中;不可视组件实现诸如播放声音这类的功能;
  • 通过在编程视图中组装代码块来定义组件的行为。先拖出一个事件处理程序,如“当按钮1被点击时”,然后将命令代码块嵌在其中,如“让音效播放器1播放”。这样,当用户点击按钮1时,事件处理程序中的所有代码块(命令)都将被执行;
  • 有些命令需要附加特定信息才能起作用。例如音效播放器的振动命令,就需要设定振动的毫秒数。这些附加信息被称为参数;
  • 数字块用来表示数字。你可以将这些数字块插入到需要数字参数的命令块中;
  • App Inventor支持许多传感器组件,加速度传感器可以检测到设备的移动或摇晃;
  • 你可以将创建完成的应用打包并下载到手机上,它们将独立于App Inventor而运行。