《AppInventor》第一章HelloPurr appinventor

特别提示:《AppInventor编程实例及指南》中文译本上线,请访问www.17coding.net。
第一章 HelloPurr


本章将开启您的创建应用之旅。这里介绍了AppInventor的关键要素——组件设计器及块编辑器,并手把手地引导您创建第一个应用:HelloPurr。在完成本章的学习之后,您就可以准备创建自己的应用了。
一个新系统刚搭建起来,通常第一个程序就是输出“HelloWorld”,用以证明一切连接正确。这个传统可以追溯到20世纪70年代,从BrianKernighan【1】在贝尔实验室使用C语言开始(Brian现在是谷歌App Inventor团队的访问学者!)。使用AppInventor,即使是最简单的应用,也可以实现声音的播放、对屏幕触摸的响应,而不仅仅是显示文字消息。那么,让我们马上开始那些令人兴奋的应用吧,你的第一个应用是“HelloPurr”(如图1-1),当你触摸这只猫的图片时,它将发出猫叫声;当你摇晃它时,则将发出嘟嘟的震颤声。
图1.1 HelloPurr应用
学习内容
本章覆盖了如下专题:App Inventor的开发环境AppInventor的编程环境包括三个重要组成部分,如图1-2所示:图 1-2A 组件设计器


图 1-2B 块编辑器
启动AppInventor需要在浏览器中访问ai2.appinventor.mit.edu。如果你是第一次使用AppInventor,你会看到项目(Projects)页面,它多半是空的,因为你还没有创建任何项目。单击页面左上角的New创建一个项目,输入项目名称“HelloPurr”(注意不带空格),然后单击OK。
打开的第一个窗口是Designer(组件设计器),你可以单击窗口右上角的Blocks按钮来切换到块编辑器。打开块编辑器之后,你会在屏幕的左上方看到一个带三个可选项的下拉菜单Connect,如图1-3所示。
图 1-3 单击“Connect”并选择“AI Companion”(应用开发伴侣,或简称AI伴侣)
如果你有可用的Android设备,并且可以通过WIFI访问互联网,请用这台设备访问PlayStore,搜索MIT的AICompanion并安装它。然后在“Connect”下拉菜单中选择“AICompanion”,并按照弹出窗口以及AI伴侣中的提示进行操作。相反,如果你想使用Android模拟器来测试应用,则选择“Emulator”选项来加载Android模拟器,之后要等待约30秒。
如果一切正常,你将会看到组件Designer(设计器)窗口、Blocks(块编辑器)按钮,如果你选择了Emulator选项,你还可以看到仿真器窗口(你的屏幕看起来应该像插图1-2A和1-2B,但窗口中大部分是空的)。如果您还有问题,请重温ai2.appinventor.mit.edu中的安装说明。
设计组件
您将使用第一个工具就是组件Designer(也只能是Designer)。组件是创建应用的组成元素,就像菜谱中的原料。有些组件非常简单,如“Label”(标签),它只管在屏幕上显示文字;或者如“Button”(按钮),轻按它可以发起一个动作。其它组件则要更复杂:一个绘图的“Canvas”(画布)组件可以容纳静止图像或动画;“accelerometerSensor”(加速度传感器)组件是一种运动传感器,它的工作原理类似于Wii【2】控制器,它可以检测到设备的移动或摇晃;还有的组件用于编写并发送短信、播放音乐和视频以及从网站获取信息等等。
当你打开Designer时,其外观如插图1-4所示。
图1-4 App Inventor的组件Designer
Designer被划分为如下几个区域:最右边的部分用于显示组件的Properties(属性),当您在Viewer中单击某个组件,你会在Properties下方看到它的一些列相关属性。属性描述了每个组件的详细信息,你可以修改它们(例如,当单击一个Label组件,你可能会看到相关的颜色、文字内容、字体属性等。)。眼下它显示的是屏幕(名称为Screen1)的属性,包括背景颜色,背景图像和标题等。
对于HelloPurr这个应用,你需要两个可视组件(你可以把它们理解为这个应用的真实呈现):Label组件显示文字“宠物小猫”,而Button组件中有一张猫的图片。您还需要一个非可视的Sound(声音组件),它知道如何播放声音,如猫叫声;还有一个AccelerometerSensor(加速度传感器)组件,用于检测该设备是否被摇晃。不必担心,我们将按步骤引导您部署每一个组件。
创建一个Label(标签)
要添加的第一个组件是Label:
  1. 转到Palette,单击Label(组件列表中的第五个),并将其拖动到Viewer中。你会看到一个矩形框出现在Viewer中,框里写着Textfor Label1。
  2. 看设计面板右侧的Properties(属性)框,它显示了Label的属性。在中间位置有一个Text的属性,下面是Label中显示的文字。将文字改为“宠物小猫”并按回车键。你会看到在Viewer中的文字也改变了。
  3. 单击BackgroundColor(背景色)之下的方框来改变Label的背景色,目前属性值为None(无背景色),从显示的颜色列表中选择一种。选择蓝色,并将Label的TextColor(文字颜色)属性改为黄色。最后将FontSize(字号)属性改为20。

图 1-5 应用中有了一个Label(标签)
要确保你有Android设备或仿真器处于连接状态,并且块编辑器是打开的。当你在设计器中添加Label时,设备上也应该有所显示。在AppInventor中,当你在设计器中为应用添加组件时,同时也是在设备上构建应用。这样一来,你可以随时看到应用的外观,这就是所谓的实时测试,而且这样的测试也适用于在块编辑器中为组件添加行为,你很快就会看到。
添加Button(按钮)
HelloPurr应用中的猫咪用一个Button组件来实现:创建一个普通Button,然后将Button的图像更改为猫咪。为了生成这个最简单的按钮,在Designer(设计器)的Patatte中单击Button组件(在组件列表的顶部),将它拖到Viewer中,置于Label下方。你会看到一个矩形按钮出现在Viewer中。大约10秒后,该按钮就应该显示在Android设备上。继续,轻击设备上的按钮,你觉得会发生什么呢?不会的,因为你的应用还没有告诉Button做什么。这是理解AppInventor的第一个要点:每一个被添加到设计器中的组件,你必须切换到块编辑器窗口,并创建相应的代码,才能使组件产生某种行为(我们会在向设计器中添加完一个所需的组件后,来做这件事情)。
现在,我们已经有了Button,当有人点击它是,我们让它来触发声音效果,但我们真的希望它看起来像小猫,而不是一个普通的老式矩形方块。为了使按钮看起来像小猫:
  1. 首先,你需要下载的小猫的图片,并保存在您的电脑桌面上。您可以在kitty.png下载名为kitty.png的图片文件(png是与jpg、gif等类似的标准图像格式,在AppInventor中,所有这些都是有效的文件类型,如同常用的标准声音文件一样,如.mpg或.mp3),您也可以在meow.mp3下载所需的声音文件(选择“网页另存为”来保存声音文件)。

此时设计器的外观如图1-6所示。

图 1-6 应用中有了一个Label和一个显示为图像的Button
添加猫叫声
在应用中,当你轻点按钮,猫咪会喵喵叫。为了做到这一点,你需要添加猫叫的声音,并设定Button的行为来实现点击按钮播放声音的功能:
  1. 如果还没有将meow.mp3文件下载到您的计算机桌面,现在按链接meow.mp3下载;
  2. 现在使用Viewer窗口的左侧的Palette,单击标签为Media的标题打开Media内容列表。向设计器中拖放一个声音组件。无论你把它放在哪里,它都会出现在Viewer的底部,并标记为“Non-visiblecomponents(非可视组件)”。非可视组件在应用中有用的对象,但不会出现在可视化的用户界面中;
  3. 点击Sound1以显示其属性。设置其Source属性为meow.mp3。你需要从你的电脑中加载这个文件,方法与加载猫咪图片的步骤相同。加载完成后,你会看到kitty.png与meow.mp3两个文件出现在设计器的Media列表中。
你现在已经有了表1-1中描述的三个组件。
表1-1 你在HelloPurr应用中添加的组件

组件类型

在面板中的分组

组件名称

使用目的

Button

User Interface

Button1

按动时发出猫叫声

Label

User Interface

Label1

显示文字“宠物小猫”

Sound

Media

Sound1

播放猫叫声


为组建添加行为
你刚刚为你的第一个应用添加的Button、Label、以及Sound组件作为构建模块。现在让我们使用块编辑器来实现点击Button触发猫叫的功能。单击设计器右上角的“Blocks”按钮。
看看块编辑器窗口,你可以在这里设定某些组件做什么以及何时做。你将设定小猫按钮,当用户点击它时播放声音。如果组件是菜谱中的原料,你可以把这些块当做烹饪说明。
产生猫叫声
在窗口的左上部,在“Blocks”这个标题下面,你会看到许多分属于不同可折叠主菜单的项。在这一列中,你还会看到在Designer中创建的每个组件:以Screen1为主菜单的子菜单项——Button1、Label1以及Sound1,它们的作用像一个个的抽屉。当你点击一个抽屉,你会得到一组适用于该组件的可选程序块(Blocks)。点击Button1的抽屉,抽屉被打开,显示了一些被筛选出来的Blocks(程序块),你可以用它来设置Button的行为,在顶部的第一个Block就是Button1.Click,如图1-7所示。
图 1-7 点击Button1时显示适用于该组件的blacks
单击标记为Button1.Click块并将其拖到工作区。当你寻找Block时,你会发现,When已经包含在Button1.Click这个Block上了。包含When的Block被称为事件处理程序,他们指定当某些特定的事件发生时,组件该做什么。在这个例子中,当用户点击猫咪(这其实是一个按钮)时发生了我们感兴趣的事件,如图1-8。接下来,我们将在程序中添加一些模块,来对该事件的发生做出相应。
图 1-8 你可以对用户的点击事件,在“Button.Click”块中定义一个响应。
点击Sound1打开声音组件的抽屉,并拖出“callSound1.Play”块(请记住,我们前面将Sound1的属性设置为你下载到电脑的meow.pm3声音文件)。您可能会注意到,此时“callSound1.Play”块的形状,恰好可以嵌入到Button1.Click块中标有“do”的缺口处。AppInventor的这种设置,确保只有特定的块可以组合在一起,这样一来,始终确保连在一起的块可以协同工作。在这个例子中,块上的字call指定了组件的行为。这两个块应该结合在一起,形成一个单元,如图1-9,你会听到两个块在连接时发出“啪”的一声。
图 1-9 现在,当某人点击按钮时,将播放猫叫声
不同于传统的编程代码(通常看起来就像一团混乱的“天书”一般),在AppInventor中,Blocks拼出了你想创建的行为。在本例中,我们等于说,“嘿,AppInventor,当有人点击该小猫按钮时,播放猫叫声。”

测试你的应用:让我们通过检查来确保一切正常——每当你添加了新东西,就要测试一下您的应用,这非常重要。在设备上点击该按钮(或在模拟器上单击它)。你应该听到猫叫声。恭喜你,你的第一个应用跑起来了!


添加震动效果
现在,当你轻点按钮时,我们要让猫咪发出“Purr”声和“Meow”声。我们通过让设备振动来模拟“Purr”声。这听起来很难,但事实上很容易做到,因为我们用过的播放“meow”的声音组件也可以使设备产生振动。AppInventor可以帮助你挖掘这种核心器件的功能,而无需考虑设备实际上如何振动。您不需要在设计器中做特别的事情,只需在块编辑器中向“Button1.click”块内添加第二个行为:
  1. 进入块编辑器,然后单击Sound1打开抽屉;
  2. 选择call Sound1.Vibrate块并拖动它放在When Button1.Click 插槽内的callSound1.Play块下。这个块应该刚好可以嵌入其中————,如图1-10。如果没有,请尝试拖动它以便使callSound1.Vibrate块顶部的小凹陷与call Sound1.Play块底部的小凸起相接触。
  3. 你可能已经注意到,在callSound1.Vibrate块的右下角有文字millisecs(毫秒)。一个块上的开放插槽表示你可以在其中插入东西,来设定这个行为的具体工作方式。在本例中,你必须告诉callSound1.Vibrate块应该振动多长时间。您需要以毫秒(千分之一秒)为单位输入时间数,毫秒是多数编程语言中惯常使用的时间单位。因此,为了使设备振动半秒钟,需要输入500毫秒的值。为了输入500这个值,你需要找到一个“数字”块。点击Math(数学)抽屉,如图1-11所示。你可以看到第一项为“0”;“0”表示这代表一个数字块。
  4. 在列表的顶部点击“0”块,你会看到一个带有数字0的蓝色块,如图1-12所示。
  5. 通过点击并输入一个新的值将“0”改成“500”,如图1-13所示。
  6. 将“500”数字块插入到call Sound1.Vibrate块右侧的插座里,如图1-14所示。

图 1-10 Click事件引起的播放声音和振动

图 1-11。打开Math抽屉
图 1-12 选择一个数字块(0为默认值)


图 1-13 将值改为500

《AppInventor》第一章HelloPurr appinventor
图 1-14。将500毫秒插入插座

测试您的应用:试试吧!点击设备上的按钮,你会感觉到半秒钟的嘟嘟声(震动)。


摇晃手机
现在让我们来添加最后一个元素,它会在Android设备上实现另一个很酷的功能:在摇晃设备时发出猫叫声。要做到这一点,要用到AccelerometerSensor(加速度传感器)组件,它可以检测到设备的摇晃或移动。
  1. 在Designer(设计器)中,展开Palette(组件列表面板)中的Sensors(传感器)区域,并拖出一个AccelerometerSensor(加速度传感器)。不要担心把它拖到哪里,像任何非可视化组件一样,无论你在Viewer的什么地方,它会移动到Viewer底部的“非可视组件”区域。
  2. 摇晃设备的事件需要与单击按钮事件分开单独处理。这意味着需要一个新的事件处理程序。进入Blocks(块编辑器)。在Screen1中会发现一个新抽屉AccelerometerSensor1。打开它,并拖出第二个块AccelerometerSensor1.Shaking块。
  3. 就像你用声音来应对按钮点击一样,拖曳出一个呼叫Sound1.Play块并插入在AccelerometerSensor1.Shaking的缺口处。尝试一下通过摇动设备。
图1-15显示了完成HelloPurr应用程序块。

图 1-15 HelloPurr应用中的程序块
将应用打包以供下载
App Inventor是一个云计算的工具,这意味着你的应用作为你的作品存储在谷歌的在线服务器上。所以,如果你关闭AppInventor,那么当你重新返回时,您的应用还在那里,你不必像处理Word文件或音轨文件那样,在您的电脑上保存任何东西。除此之外,当设备处于连通状态时,你也可以轻松地测试应用(我们称之为实时测试),而无需向您的设备下载任何文件。唯一的问题是,如果你的设备与AppInventor断开连接,该设备上运行的应用将停止,由于它从来就没有真正的安装过,因此你也无法在某处找到它的图标。
您可以将应用下载并安装到任何Android设备上,以使该设备在不连接计算机时,应用也能运行。首先,确保你的设备允许从AndroidMarket以外的地方下载应用。通常情况下你可以这样做:在设备上选择“设置”→“安全”,并勾选UnknownSource(未知来源)一项。然后回到App Inventor设计器中,单击Build并选择App(provide QR codefor .apk)。您会看到窗口中的progress bar(进度条)信息,这个过程需要长达一分钟时间。在progressbar消失后,继续等待10-15秒,会显示完整应用的QR码。用条码扫描软件获取QR码之后,设备会提示您输入谷歌帐户的密码;当密码输入完成,应用将下载到设备上。如果你的设备中没有条码扫描软件,去playstore搜索并下载一个。一旦应用已被下载,你需要进入下载文件夹并选择HelloPurr.apk文件。此时会出现一个提示,询问您是否要安装,请单击安装。(关于下载安装,如果设备上已经安装了MITAI2 Companion,用其中的条码扫描功能,可以顺利实现下载安装。)
一旦你安装完成,您的设备上会看到HelloPurr应用——我们刚刚构建的应用。像运行任何其他应用一样运行它。(请确保您运行的是新安装的应用,而不是之前与AppInventor连接的应用。)现在,您可以拔下甚至重新启动设备,并删除AppInventor中的所有应用,而你的新应用依然存在。
重要的是你要明白:已经打包的应用已经与App Inventor中的项目彻底分离。您还可以像之前一样,在AppInventor项目中,在连接设备上使用AICompanion(AI伴侣)做进一步的工作。但是,这不会改变已经安装在设备上的应用。如果您在AppInventor项目中对应用做进一步修改,你要将修改结果重新打包,并下载安装新版本来替换设备上的旧版本。
马上用您的设备下载并安装HelloPurr应用吧,这样,你就可以与家人和朋友一起分享了!
分享应用
你有两种方式可以分享应用。第一,分享可执行的应用:首先在AppInventor项目中单击Build,然后选择App(save .apk to mycomputer),这将在您的电脑上创建一个扩展名为apk的文件。你需要将这个文件上传到web上以供访问。一旦应用上传到网络上,其他人可以通过打开设备的浏览器进行下载和安装。仅需告诉他们将设备的安全设置中的“未知来源”一项选中,以便于安装来源于AndroidMarket之外的应用。
您也可以与其它App Inventor开发人员共享应用的源代码(块)。要做到这一点,请点击Project项下的MyProjects,选中要共享的应用(本例中是HelloPurr),然后选择project→Export selectedproject (.aia) to mycomputer。您的计算机上会生成一个扩展名为aia的文件(HelloPurr.aia),存放在默认的下载文件夹中。你可以通过电子邮件把文件发给别人,他们可以打开AppInventor,选择Project→Importproject,并选择.aia文件。这样,应用的完整拷贝就给到了用户手里,他们可以对其进行编辑并定制化,而不会影响原有版本。
共享应用的过程非常简单,更多的有趣的作品可以在网站gallery.appinventor.mit.edu的分享社区中找到。
改进
现在,你的应用已经创建完成,并可以随时运行它(或许还可以下载并与他人分享)。你可能已经注意到了几件事情。来看看下列问题,并考虑怎样在应用中解决它们。正如你所预见,通常你会先创建一个应用,然后设法完善并改变它,再用程序来实现你的新想法。不必担心,这是一件好事,这正是一名成熟的应用开发者的必经之路!总结
以下是本章中的一些概念:

【1】于1942年生于加拿大多伦多,加拿大计算机科学家,曾服务于贝尔实验室,参与Unix的研发,也是AMPL与AWK的共同创造者之一。现为普林斯顿大学计算机科学系教授。他曾与DennisRitchie共同写作了C语言的第一本著作《C程序设计语言》,他的名字也因此开始为人所熟知。他创作了许多Unix上的程式,包括在Version7 Unix上的 ditroff 与cron。

【2】日本任天堂公司2006年推出的家用游戏机。


  

爱华网本文地址 » http://www.413yy.cn/a/25101015/247737.html

更多阅读

《坐井观天》第一课时教学设计 坐井观天名师教学设计

《坐井观天》第一课时教学设计教学内容:人教版小学语文第三册第13课《坐井观天》。教材分析:《坐井观天》这则寓言,课文短小精悍,图文对应,青蛙和小鸟的对话浅显易懂,通过生动有趣的对话,给孩子们讲述了一个寓意深刻的故事。文章通过青

《长城》第一课时教学设计课件评课 泉城第一课时评课

《长城》第一课时教学设计叶琴文教学目标:1、初读课文,能正确认读8个生字,会写3个生字,理解“崇山峻岭、蜿蜒盘旋、气魄雄伟、屯兵、堡垒、瞭望口”等词语的意思。2、学习课文一、二自然段,学习由远及近、由整体到部分的观察方法3、

《金蝉脱壳》第一课时教学设计 金蝉脱壳第一课时课件

《金蝉脱壳》第一课时教学设计寿安里小学 杨建华一、教学目标:1、学会本课的生字、新词。2、正确、流利地朗读课文。3、初读课文,了解文章内容,理清脉络。二、教学重点:1、学会本课的生字、新词。2、整体感知课文,理清脉络三、教学难

青雪故事《地下》第一季28-30 青雪故事 博客

原著南派三叔之《大漠苍狼》这些事情,你永远也不可能在档案资料中看到。因为,它们都是一些“不应该存在的”事实。层层揭露地底深处那些令人窒息的机密——青雪故事《地下》第一季28——

《鸟岛》第一课时教学设计_weigefeng 鸟岛第二课时教学设计

今天执教了《鸟岛》第一课时,希望听课的老师能给我提出宝贵的意见,谢谢。教材分析:苏教版小学语文第四册第十八课《鸟岛》主要写了闻名中外的青海湖鸟岛春夏两季的景象和鸟儿活动的情景,字里行间流露了对鸟岛的喜爱,初步进行了保护野生

声明:《《AppInventor》第一章HelloPurr appinventor》为网友紫翼魔王灬分享!如侵犯到您的合法权益请联系我们删除