2013.09.231(49) 移动编程导论 第二讲 AppInventor 编程基础 2013.09.232(49) 主要内容 o AppInventor 程序结构与编程主要步骤 o AppInventor 开发环境配置 o 编写第一个AppInventor 程序： 会问好的企鹅 o 编写第二个AppInventor程序： 母亲节贺卡 o AppInventor 程序打包与源代码的共享 2013.09.233(49) AppInventor 程序的结构 App Inventor 程序由两部分组成: o 程序的组件（用户界面） o 程序的行为（事件消息） 2013.09.234(49) AppInventor 编程主要步骤 o 第1步：打开AppInventor o 第2步：程序组件（用户界面）设计 使用AppInventor Designer 选择应用程序所需 的组件，设置组件的属性，完成程序用户界面设计 。 o 第3步：程序行为设计 使用App Inventor Blocks Editor 定义组件 的行为。 o 第4步：程序运行 使用手机(平板)或emulator运行程序。 2013.09.235(49) 第1步：打开AppInventor ： 2013.09.236(49) 第1步：打开AppInventor ：创建一个新项目 2013.09.237(49) 第1步：打开AppInventor ：创建一个新项目“Test” 2013.09.238(49) 第2步：程序组件（用户界面）设计 Components区显示已 被选中的组件列表 Palette区显示可选择的组件 Viewer区显示 程序界面的表现形式 Media区显示 程序可用的多媒体文件 Properties区显示 组件的属性 2013.09.239(49) 第2步：程序组件（用户界面）设计：添加组件Button 2013.09.2310(49) 第2步：程序组件（用户界面）设计：添加组件Sound 2013.09.2311(49) 第2步：程序组件（用户界面）设计：添加多媒体文件 2013.09.2312(49) 第3步：程序行为设计：进入编程环境 在主界面右上角点击”Block”进入Block编程界面 2013.09.2313(49) 第3步：程序行为设计：Block编程界面 可用于添加程序 中的的组件的响 应事件 Workspace区显示程序中组件的事件响应序列 点击右上角“Block”旁边的“Designer”按钮，可返回组件设计界面 2013.09.2314(49) 第3步：程序行为设计：按钮Button1的点击事件 2013.09.2315(49) 第3步：程序行为设计：点击按钮后播放音乐 2013.09.2316(49) o 将AI2 Companion安装到移动设备上 o 确认计算机及移动设备可连接到互联网 o 在移动设备上运行AI Companion o 点击主界面上方的Connect 下拉菜单选择AI Companion o 用移动扫描计算机屏幕上出现的二维码，并点击 ”Connect with code” o 程序即可在移动设备上运行 第3步：利用移动设备（手机或平板电脑）运行程序 p以上方式为推荐方式，其他运行方式可详见： phttp:/appinventor.mit.edu/explore/ai2/setup.html 2013.09.2317(49) 编写App Inventor程序： 设计一个具有以下功能的 手机程序： o 显示企鹅的形象 o 用手抚摸屏幕上的企鹅， 企鹅会和大家打招呼 2013.09.2318(49) 第一步：创建新项目 “HelloPenguin” o 使用浏览器打开 o 选择一个服务器，并使用汕头大学上网账号登 录系统，进入App Inventor开发环境 o 在界面的左上方，选择My Projects 进入项 目页面 o 在界面的左上方，选择New, 新建一个项目， 并命名为“HelloPenguin” 2013.09.2319(49) 第二步：界面设计添加一个按键 2013.09.2320(49) 第二步：界面设计修改按键的属性 o 属性 Text 的内容改为“Pet Me” o 属性 Width 改为“Fill Parent” o 属性 Height 改为 400 o 属性 Image 改为“penguin1.jpg” o 属性 FontBold 改为选择 o 属性 FontSize 改为 20 2013.09.2321(49) 第二步：界面设计修改按键的属性 2013.09.2322(49) 第二步：界面设计添加其他多媒体 2013.09.2323(49) 第二步：界面设计添加声音组件 所见即所得 2013.09.2324(49) 第三步：编程进入编程环境 2013.09.2325(49) 第三步：编程 - 点击（触摸）企鹅 2013.09.2326(49) 第三步：编程让企鹅说话 搭积木式的编程方式，不必记住并键入指令 2013.09.2327(49) 第四步：运行程序 o 将AI2 Companion安装到移动设备上 o 确认计算机及移动设备可连接到互联网 o 在移动设备上运行AI Companion o 点击主界面上方的Connect 下拉菜单选择AI Companion o 用移动扫描计算机屏幕上出现的二维码，并点击 ”Connect with code” o 程序即可在移动设备上运行 2013.09.2328(49) 现在我们得到一个设计好 的HellPenguin程序 o 屏幕上显示一个企鹅形象 o 点击企鹅，企鹅说：“您 好，我是企鹅” 图 HelloPenguin程序在模拟器上运行 第四步：运行程序 2013.09.2329(49) o 前面我们完成的程序，企鹅说话的时候是闭着 嘴的，能否让它说话的时候张开口呢？ 问题：怎样让企鹅张嘴说话？ 2013.09.2330(49) o 点击企鹅时，把企鹅闭嘴的图片改为企鹅 张嘴的图片。程序如下： 一种解决问题的方法 2013.09.2331(49) 新的问题：企鹅说完话后 o 实现企鹅说完话闭上嘴。 解决方案： o 需要在企鹅说完话后把张嘴企鹅 的图片改回原来闭嘴企鹅的图片 。 o 如何知道企鹅说完话了呢？图 程序在模拟器上运行 再次运行程序 2013.09.2332(49) o 在 App Inventor 众多的组件中，有一个组 件“Clock”（在Basic下），它可以记录时 间，也可以当定时器用。 o 当点击企鹅时，我们启动定时器，然后等定时 器记录3秒（企鹅说话的时间约3秒）后，触 发修改图片的动作，即企鹅说完话后闭嘴。 让企鹅说完后闭嘴 思路 2013.09.2333(49) 让企鹅说完后闭嘴 添加Clock 3000代 表3秒 2013.09.2334(49) o 当Clock1开始运行的时候，每隔 TimerInterval的时间（本例子中是 3000毫秒，即3秒）就会运行 Clock1.Timer事件中的代码。 o 我们在Clock1.Timer事件中让企鹅的闭 嘴图片，并停止定时器。 让企鹅说完后闭嘴 定时事件 2013.09.2335(49) o 首先，点击企鹅时启动定时器 让企鹅说完后闭嘴 编程 2013.09.2336(49) o 3秒后，企鹅闭嘴，且停止定时器 让企鹅说完后闭嘴 编程 2013.09.2337(49) 现在我们得到一个真正张 开口打招呼的企鹅 o 当企鹅没有说话的时候是 闭着嘴的（图1），当我 们点击屏幕上的企鹅，企 鹅的真正地张开嘴说话（ 见图2）。 图1 没有说话的企鹅 图2 正在说话的企鹅 再次运行程序 2013.09.2338(49) 让企鹅响应手机甩动打招呼 o 为了实现当甩动手机时，企鹅也能问好，我们 需要使用组件： AccelerometerSensor o 在 AccelerometerSensor. Shaking 事件中 让企鹅说话，并启动定时器。 更神奇的功能 2013.09.2339(49) 更神奇的功能 - 添加传感器 丰富的功能组件 及模块（包括多 种传感器控制模 块等等） 2013.09.2340(49) 更神奇的功能 编程 2013.09.2341(49) 编写App Inventor程序2： 设计一个母亲节贺卡的 手机程序： o 利用连续的4格图像，讲述与 妈妈的故事 o 点击屏幕便切换到下一格图像 o 点击最后一张图像，播放声音： “妈妈，节日快乐！” 注. 本例子的图片资源来自于网络，仅限用于教学演示及学习的用途 2013.09.2342(49) 第一步：创建项目及第1个屏幕 o登录网站，并创建项目MotherCard，把四张图片上载到系统 o在Screen1界面上创建一个Button1 o设定Button1的image属性为图片a-01.jpg o设定Button1的width属性为Fill Parent（该数字请根据具 体设备屏幕大小进行调整） o设定Button1的Height属性为400（该数字请根据具体设备 屏幕大小进行调整） 2013.09.2343(49) 第二步：创建一个新的屏幕(1) o 点击屏幕左上方Add Screen按钮创建1个新的屏幕，将屏幕 命名为Screen2 (图1) o 屏幕自动切换到Screen2(图2) 图1 图2 2013.09.2344(49) 第二步：创建一个新的屏幕(续) o 在Screen2界面上创建一个Button1 o 设定Button1的image属性为图片a-02.jpg o 同第一步，对Button1的其他属性进行设置 2013.09.2345(49) 第三步：创建屏幕间的联系 o 在左上角的Screen下拉菜单中选择Screen1 o 点击右上角的Block按钮,进入Screen1对应的Block编辑环境 我们将实现，点击Screen1上的图片，就跳转到Screen2 2013.09.2346(49) 第三步：创建屏幕间的联系（续） o创建Control抽屉里的Button1.click事件(图1) o在Control抽屉里选择Open another screen块 (图2) 图2 图1 2013.09.2347(49) 第三步：创建屏幕间的联系（续） o创建Text抽屉里的字符串块（图1） o将字符串填写为“Screen2” ，放到Open another screen块的 槽口中（图2） (图1) (图2) 当我们点击Screen1上的图片，就可以跳转到Screen2 (图1) (图2) 2013.09.2348(49) 第四步：创建其他屏幕及联系 o 重复第二步和第三步，可以创建其他屏幕及联系 2013.09.2349(49) 第五步：设置背景音乐 o在第一格屏幕中Screen1, 加入添加播放器player 1，播放背景音乐。 o设置player1的Source属性为指定音乐的文件 o在Screen1的抽屉中选择Screen1.Initialize事件（图1） o在Screen1.Initialize事件的槽中加入player1.start的块（图2）， (图1) (图2) o程序打开时，第1个屏幕显示的时候开始播放背景音乐 2013.09.2350(49) 第五步：设置背景音乐（续） o在第四格屏幕Screen4, 加入添加sound组件，播放背景音乐。 o设置sound的Source属性为指定音乐的文件 o在Button1.click中添加Sou