返回 首页

App Inventor 编程实例及指南

第 1 章 Hello 猫咪

作者介绍

Hal Abelson

{%}

关于Abelson教授的故事很难用一段简短的文字来说明。他是MIT电子工程与计算机科学系的一名教授,获得过MIT、IEEE以及ACM颁发的多种奖项,如果必须用一个词来概括他的贡献,那就是"教育"!正如他在获奖时所说,“无论有多少获奖的理由,对我来说只有‘教育’是最有意义的,这也是我在MIT给自己的定位:一名教师。”

Abelson教授作为MIT计算机教育的领导者,执教已超过30年,至今仍担当重要角色。他与Gerry Sussman合著的教科书《计算机程序的构造和解释》改变了人们对计算的认识,并被世界范围内的高等学校所采用(中译本由北京大学裘宗燕教授翻译)。书中淡化了具体编程语言的特殊性,而将抽象的思维方法作为所有编程语言的共同基础。

在Abelson的教学实践中,更关注的是学习的本质:在与真实世界的交互中学习。App Inventor就是这种思想的具体体现。作为App Inventor开发团队的领导者,Abelson力图让初学者在创作实践中体会编程语言的内涵,并掌握编程的方法。用建构主义(Constructionism)论的发展者Papert的话说,“生活在‘数学王国’里的人学习数学,就像法国人学习法语一样的顺理成章。”

除此之外,Abelson是开源运动的倡导者,是共创组织及自由软件基金会的创始领导人之一,也是推动MIT开放课程的主要力量。

本章将开启你的创建应用之旅。这里介绍了App Inventor的关键要素——组件设计器及块编辑器,并手把手地引导读者创建第一个应用:HelloPurr。在完成本章的学习之后,就可以开始创建自己的应用了。

{%}

{%}

图 1-1 HelloPurr应用

每当搭建了新的开发环境,通常运行的第一个程序就是显示“Hello World”,来证明系统已经就绪。这个传统可以追溯到20世纪70年代,从Brian Kernighan 在贝尔实验室使用C语言开始(Brian现在是谷歌App Inventor团队的访问学者!)。使用App Inventor,即便是创建最简单的应用,也可以实现声音的播放以及对屏幕触摸的响应,而不只是显示文字。想想都令人感到兴奋,那么,让我们马上开始吧。第一个应用是“HelloPurr”(如图1-1),当你触摸这只猫时,它会发出“喵呜”声;当你摇晃它时,则将发出嘟嘟的震颤。

学习要点

本章用到了以下组件和概念:

  • 选择组件来创建应用:决定了应用 的外观;

  • 为组件设定行为:做什么以及何时做;

  • 使用组件设计器选择组件,在Android设备上,有些组件可以显示,有些则不可见;

  • 从本地计算机加载媒体文件(声音或图像),并添加到应用中;

  • 用块编辑器来组装程序块,以此来设定组件行为;

  • 用App Inventor的实时测试功能对应用进行测试。你可以一边创建应用,一边在手机上看到它们外观以及运行情况;

  • 将应用打包并下载到Android设备上。

App Inventor的开发环境

App Inventor的编程环境包括以下三个重要组成部分,如图1-2所示:

  • 如图1-2A所示,组件设计器运行在浏览器中,创建应用过程中,用它来进行组件的选择,并进行属性设置;

  • 如图1-2B所示,像组件设计器一样,块编辑器也在浏览器中运行,用于创建组件的行为;

  • 测试设备:在开发应用过程中,可以用Android设备对应用进行同步的运行与测试;如果你手边没有Android设备,你可以使用系统中集成的Android模拟器来测试应用。

{%}

图 1-2A 组件设计器

{%}

图 1-2B 块编辑器

在浏览器中访问ai2.appinventor.mit.edu即可启动App Inventor。如果你是第一次使用App Inventor,你会看到弹出的项目(Projects)窗口,它多半是空的,因为你还没有创建过任何项目。单击页面左上角的“ProjectStart new project…”创建一个项目,输入“HelloPurr”作为项目名称(注意不带空格),然后单击OK。

打开的第一个窗口是组件设计器(Designer),你可以单击窗口右上角的Blocks按钮来切换到块编辑器。

在Project右侧的Connect下拉菜单中有三个可选项(三类测试设备),如图1-3所示。

{%}

图 1-3 单击“Connect”并选择“AI Companion”(应用开发伴侣,或简称AI伴侣)

如果手边的Android设备可以通过WIFI访问互联网,用该设备访问Google Play,搜索MIT的AICompanion,下载、安装并启动它。然后在“Connect”下拉菜单中选择“AI Companion”,并按照弹出窗口以及AI伴侣中的提示进行操作。除此之外,也可以使用Android模拟器来测试应用,选择“ConnectEmulator”来加载Android模拟器,大约要等30秒钟。

如果一切正常,将会看到组件设计器窗口、块编辑器按钮,如果你选择了Emulator选项,你还可以看到模拟器窗口(屏幕上看起来应该像插图1-2A和1-2B,但窗口中大部分是空的)。如果您还有问题,请重温网站http://ai2.appinventor.mit.edu中的安装说明。

设计组件

我们使用的第一个工具就是(也只能是)组件设计器。组件是你用来创建应用的基本元素,就像菜谱中的原料。有些组件非常简单,如“Label”(标签)组件,它用于在屏幕上显示文字;或者如“Button”(按钮)组件,轻按它则引起一个动作。其它组件则要更复杂:一个绘图的“Canvas”(画布)组件可以容纳静止图像或动画;“accelerometerSensor”(加速度传感器)组件是一种运动传感器,它的工作原理类似于Wii 控制器,它可以检测到设备的移动或摇晃;还有的组件用于编写并发送短信、播放音乐和视频以及从网站获取信息等等。

当你打开Designer时,其外观如插图1-4所示。

{%}

图 1-4 App Inventor的组件设计器

Designer被划分为如下几个区域:

  • 中部的白色区域称为预览窗口(Viewer),用于放置应用中所需的组件,你可以按照自己的喜好来安排这些组件。预览窗口只能粗略地显示应用的外观,例如,与测试设备中的应用相比,在预览窗口中,一行文字可能会在不同的地方换行。如果想看到应用的实际外观,可以将应用下载到测试设备上(稍后我们会在“打包应用程序并下载”的部分详细介绍),或者下载App Inventor自带的模拟器。

  • 预览窗口的左侧是组件面板(Palette),其中包含了可供选择的各类组件。该面板按类别划分为几个部分,默认情况下,只有用户界面(User Interface)组件可见,可以通过点击其他类别的标题,如Media(媒体)等,来查看其他组件。

  • 预览窗口的右侧是组件列表(Components),显示了项目中的所有组件,拖动到预览窗口中的任何组件都将显示在该列表中。目前,该项目中只有一个组件:Screen1,它代表设备的屏幕。

  • 组件列表下方是媒体列表(Media),显示项目中的所有媒体资源(图像和声音)。本项目中尚未添加任何媒体资源,不过很快就会添加。

最右边的部分用于显示组件的属性(Properties),在预览窗口中单击某个组件,将在Properties下方看到该组件的一系列属性。属性描述了组件的详细信息(如,单击Label组件可以看到它的颜色、文字内容、字体的属性。),可以修改属性值。当前显示的是屏幕(名为Screen1)的属性,包括背景颜色、背景图像及标题等。

HelloPurr应用中需要两个可视组件(可以理解为应用中确实可见的组件):Label组件显示文字“宠物小猫”,而Button组件中有一张猫的图片;还需要一个非可视的Sound(声音)组件,用来播放声音,如猫叫声;还有一个AccelerometerSensor(加速度传感器)组件,用于检测设备的移动或摇晃。不必担心,我们将按一步一步地教你使用这些组件。

创建一个Label(标签)

添加的第一个组件是Label:

1. 转到组件面板(Palette),单击Label(列表中的第五个),并将其拖动到预览窗口(Viewer)中。你会看到一个矩形框出现在预览窗口中,框里写着Text for Label1。

2. 看组件设计器右侧的Properties(属性)框,它显示了Label的属性。在中间位置有一个Text属性,下面是Label中显示的文字。将文字改为“宠物小猫”并按回车键。你会看到在预览窗口中的文字也改变了。

3. 单击BackgroundColor(背景色)下面的方框来改变Label的背景色,目前属性值为None(无背景色),从显示的颜色列表中选择蓝色,并将Label的TextColor(文字颜色)属性改为黄色。最后将FontSize(字号)属性改为20。

Designer的外观如图1-5所示:

{%}

图 1-5 应用中有了一个Label(标签)

要确保Android测试设备或模拟器处于连接状态。在设计器中添加的Label会在测试设备上显示出来。在App Inventor中,在设计器中为应用添加组件,等同于在设备上构建应用。这样一来,你可以随时看到应用的外观,这就是所谓的实时测试,你很快就会看到,这样的测试也同样适用于在块编辑器中为组件添加行为。

添加Button(按钮)组件

HelloPurr应用中的猫咪用Button组件来实现:创建一个普通Button,然后将Button的图像更改为猫咪。在组件设计器(Designer)的组件面板(Patatte)中单击Button(在列表的顶部),将它拖到预览窗口(Viewer)中,置于Label下方。你会看到一个矩形按钮出现在预览窗口中。几秒钟后,该按钮就会出现在Android设备上。试着轻击设备上的按钮,有什么反应吗?不会的,因为应用没有向Button发布命令。这是理解App Inventor的第一个要点:添加到设计器中的组件,必须在块编辑器中创建相应的程序,才能使组件产生某种行为(在设计器中添加一个组件之后要做这件事)。

我们希望当点击这个Button时,它会发出猫叫声,但我们希望这个button开起来相隔小猫,而不是一个普通的方块,因此需要为button设置图片:

1. 首先,需要下载的小猫的图片,并保存在你的电脑上。从kitty.png下载名为kitty.png的图片文件(png是与jpg、gif等类似的标准图像格式,在App Inventor中,所有这些都是有效的文件类型,与常用的标准声音文件.mpg或.mp3一样),同时从meow.mp3下载声音文件(选择“网页另存为”来保存声音文件)。

2. 在预览窗口中点击该按钮,属性框中将显示其属性。点击中部Image属性(现在显示的是None)。显示“Upload File…”按钮。

3. 点击“Upload File…”按钮,再单击弹出窗口中的“选择文件”按钮,浏览并选择之前下载的文件kitty.png,然后单击确定。

4. 几秒钟之后,kitty.png被列为Button的Image属性的选项,单击“OK”。与此同时,ketty.png也出现在设计器窗口组件列表下面的Media区域中。在测试设备中,也将显示猫咪的图片,此时按钮看起来像一只小猫咪。

5. 注意到猫咪的图片上显示文字“Text for Button1”,我们不希望在应用中看到这些,因此将Button1的Text属性改为“宠物小猫”一类的文字,或者干脆删除所有文字。

现在设计器看起来如图1-6。

{%}

图 1-6 应用中的一个Label和一个显示为图像的Button

添加猫叫声

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

1. 如果meow.mp3文件尚未下载,现在点击链接meow.mp3下载;

2. 在左侧的组件面板中,单击Media类的标题打开Media组件列表。向预览窗口中拖放一个Sound组件。无论你把它放在哪里,它都会出现在预览窗口的底部,并被标记为“Non-visible components(非可视组件)”。非可视组件在应用中发挥特定作用,但不会显示在用户界面中;

3. 点击Sound1以显示其属性。设置其Source属性为meow.mp3。同猫咪图片一样,需要从电脑中加载这个声音文件。加载完成后,Media列表中将出现kitty.png与meow.mp3两个文件。表1-1中列出了现有的组件。

表1-1 HelloPurr中的组件

组件类型 面板中分组 命名 作用
Button User Interface Button1点击发出猫叫声
Label User Interface Label1 显示文本“宠物小猫”
Sound Medi undefined Sound1播放猫叫声

添加组件行为

刚刚添加了Button、Label、以及Sound组件来构建我们的第一个应用,现在使用块编辑器来实现点击Button产生猫叫声的功能。单击设计器右上角的“Blocks”按钮切换到块编辑器。

在块编辑器窗口中,可以为组件设定行为:做什么以及何时做。此处是让小猫按钮在用户点击它时播放声音。如果把组件比作菜谱中的原料,那么块(Blocks)则相当于烹饪过程说明。

发出猫叫声

在块编辑器窗口的左侧,“Blocks”标题下面,可以看到许多分属不同类别的按钮,其中包括了我们在设计器中创建的所有组件:Screen1、Button1、Label1以及Sound1,点击它们就像打开抽屉,将看到一组适用于该组件的可选程序块(Blocks)。点击Button1打开抽屉,显示了与Button有关的程序块,可以用它们来设置Button的行为,最上面的Block就是Button1.Click,如图1-7所示。

{%}

图 1-7 点击Button1时显示适用于Button组件的程序块(Blacks)

单击标有Button1.Click的块并将其拖到工作区。注意,Button1.Click这个块上包含了when。凡是包含when的块都被称为事件处理程序,用来定义当组件上发生了某种特定事件时,应用该做什么。在本例中,当用户点击猫咪(其实是按钮)时发生了有趣的事情,如图1-8所示。下面我们将在程序中添加一些块,来响应发生的事件。

计算机协会(Association of Computing Machinery),创立于1947年,是世界性的计算机从业员专业组织,面向研究与教育,工作方式为专业期刊、兴趣小组及设立奖项。主要期刊为《计算机学会通讯(Communications of the ACM)》,在全球有35个兴趣小组,设立了8个奖项,其中的图灵奖相当于计算机界的诺贝尔奖。

OER

开放教育资源(Open Educational Resources):将文档、媒体等实用的教学资源向以教学、评估及研究为目的使用者免费开放。这是教育资源开发的基本特征,它源于人们试图抑制知识商品化的愿望。MIT作为开放运动的先锋,开放了许多优秀的视频课程,英语好的同学真是有福了。

译者提示

本章非常重要,一个简单的例子,贯穿了一个完整的开发过程,从界面设计到代码编制,从开发环境到测试设备,从普通媒体(图片)到手机特有的摇晃、震动。对于初学者,这是一个幸福的开端

资源下载

kitty.png

meow.mp3

HelloPurr.aia

AI伴侣

前言
第 2 章 油漆桶
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
简介
序言
前言
第 1 章 Hello 猫咪
第 2 章 油漆桶
第 3 章 打地鼠
第 4 章 开车不发短信
第 5 章 瓢虫快跑
第 6 章 巴黎地图旅游
第 7 章 安卓,我的车在哪?
第 8 章 总统测验
第 9 章 木琴
第 10 章 出题及答题
第 11 章 广播中心
第 12 章 遥控机器人
第 13 章 亚马逊掌上书店
第 14 章 理解应用的结构
第 15 章 软件工程与应用调试
第 16 章 应用中的存储
第 17 章 创建动画应用
第 18 章 程序中的决策:条件块
第 19 章 数据列表编程
第 20 章 循环
第 21 章 定义过程
第 22 章 数据库
第 23 章 传感器
第 24 章 与Web API通信

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }