第1章Hello Purr
本章将开启你的创立应用之旅。这里介绍了App Inventor的关键要素——组件设计器与块编辑器，并手把手地引导读者创立第一个应用：HelloPurr。在完本钱章的学习之后，就可以开始创立自己的应用了。app开发实例
每当搭建了新的开发环境，通常运行的第一个程序就是显示“Hello World〞，来证明系统已经就绪。这个传统可以追溯到20世纪70年代，从Brian Kernighan 在贝尔实验室使用C语言开始〔Brian现在是谷歌App Inventor团队的访问学者！〕。使用App Inventor，即便是创立最简单的应用，也可以实现声音的播放以与对屏幕触摸的响应，而不只是显示文字。想想都令人感到兴奋，那么，让我们马上开始吧。第一个应用是“HelloPurr〞〔如图1-1〕，当你触摸这只猫时，它会发出“喵呜〞声；当你摇晃它时，那么将发出嘟嘟的震颤。
图1-1 HelloPurr应用
学习要点
本章用到了以下组件和概念：
•选择组件来创立应用：决定了应用的外观；
•为组件设定行为：做什么以与何时做；
•使用组件设计器选择组件，在Android设备上，有些组件可以显示，有些那么不可见；
•从本地计算机加载媒体文件〔声音或图像〕，并添加到应用中；
•用块编辑器来组装程序块，以此来设定组件行为；
•用App Inventor的实时测试功能对应用进行测试。你可以一边创立应用，一边在上看到它们外观以与运行情况；
•将应用打包并下载到Android设备上。
App Inventor的开发环境
App Inventor的编程环境包括以下三个重要组成局部，如图1-2所示：•如图1-2A所示，组件设计器运行在浏览器中，创立应用过程中，用它来进行组件的选择，并进行属性设置；
•如图1-2B所示，像组件设计器一样，块编辑器也在浏览器中运行，用于创立组件的行为；
•测试设备：在开发应用过程中，可以用Android设备对应用进行同步的运行与测试；如果你手边没有Android设备，你可以使用系统中集成的Android模拟器来测试应用。
图1-2A 组件设计器
图1-2B 块编辑器
在浏览器中访问即可启动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，但窗口中大局部是空的〕。如果您还有问题，请重温中的安装说明。
设计组件
我们使用的第一个工具就是〔也只能是〕组件设计器。组件是你用来创立应用的根本元素，就像菜谱中的原料。有些组件非常简单，如“Label〞〔标签〕组件，它用于在屏幕上显示文字；或者如“Button〞〔按钮〕组件，轻按它那么引起一个动作。其它组件那么要更复杂：一个绘图的
“Canvas〞〔画布〕组件可以容纳静止图像或动画；
“accelerometerSensor〞〔加速度传感器〕组件是一种运动传感器，它的工作原理类似于Wii 控制器，它可以检测到设备的移动或摇晃；还有的组件用于编写并、播放音乐和视频以与从获取信息等等。
当你翻开Designer时，其外观如插图1-4所示。
图1-4 App Inventor的组件设计器
Designer被划分为如下几个区域：
•中部的白区域称为预览窗口〔Viewer〕，用于放置应用中所需的组件，你可以按照自己的喜好来安排这些组件。预览窗口只能粗略地显示应用的外观，例如，与测试设备中的应用相比，在预览窗口中，一行文字可能会在不同的地方换行。如果想看到应用的实际外观，可以将应用下载到测试设备上〔稍后我们会在“打包应用程序并下载〞的局部详细介绍〕，或者下载App Inventor自带的模拟器。
•预览窗口的左侧是组件面板〔Palette〕，其中包含了可供选择的各类组件。该面板按类别划分为几个局部，默认情况下，只有用户界面〔User Interface〕组件可见，可以通过点击其他类别的标题，如Media〔媒体〕等，来查看其他组件。
•预览窗口的右侧是组件列表〔Components〕，显示了工程中的所有组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该工程中只有一个组件：Screen1，它代表设备的屏幕。
•组件列表下方是媒体列表〔Media〕，显示工程中的所有媒体资源〔图像和声音〕。本工程XX未添加任何媒体资源，不过很快就会添加。
最右边的局部用于显示组件的属性〔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〔无背景〕，从显示的颜列表中选择蓝，并

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。