移动编程导论第二讲课件

移动编程导论第2章编程基础汕头大学计算机系主要内容AppInventor程序结构与程序编写的主要步骤AppInventor开发环境配置编写第一个AppInventor程序：会问好的企鹅

AppInventor程序打包AppInventor源代码的共享AppInventor程序的结构

AppInventor程序设计由两部分组成:程序的组件(用户界面)程序的行为(程序代码)AppInventor程序编写步骤第1步：程序组件设计使用AppInventorDesigner选择应用程序所需的组件，设置组件的属性，完成程序用户界面设计。第2步：程序代码设计使用AppInventorBlocks

定义组件的行为。第3步：程序运行使用emulator运行程序或者使用手机运行程序第1步：利用AppInventorDesigner进行程序组件（用户界面）设计Palette区显示可选择的组件Viewer区显示程序界面的表现形式Components区显示已被选中的组件列表Media区显示程序可用的多媒体文件Properties区显示组件的属性第2步：利用AppInventorBlocks定义组件的行为

可用于添加程序中的的组件的响应事件Workspace区显示程序中组件的事件响应序列程序运行在Designer界面右上角点击OpenBlocksEditor进入此界面AppInventoremulator方法一：选择Blocks上方的Newemulator点击Blocks上方的ConnecttoDevices选择emulator使用模拟器运行程序方法二：设定手机设备：应用程序/开发/USB调试运行浏览器由校直通车设置手机设备能访问外网点击窗口上方的Connect菜单，选AICompanion运行手机设备上的MITAI2Companion215程序点击“ScanQRCode”扫描计算机上的二维码使手机通过WiFi连接到计算机第3步：利用emulator或手机运行程序AppInventor开发环境配置计算机配置安装AppInventor开发工具

手机配置（使用android手机进行调试）安装手机驱动程序将手机设置为程序调试模式

开发环境配置详细过程请见：AppInventor开发环境配置编写你的第一个AppInventor程序设计一个具有以下功能的手机程序：显示企鹅的形象用手抚摸屏幕上的企鹅，企鹅会和大家打招呼开始使用浏览器打开

(按学号末位选择不同的服务器使用)使用汕头大学上网账号登录系统，进入AppInventor开发环境在界面的右上方，选择MyProjects进入项目管理页面在界面的左上方，选择NewProject，新建一个项目，并命名为“HelloPenguin”第1步:进入Designer界面,进行组件设计1.1添加一个Button1.在Palette区的Basic栏找到Button组件，拖到Viewer区，得到Buttong13.将Properties区的Text栏修改文字为“PetMe”Width栏修改为FillParent，Heigth栏改为400可视化的编程方式，拖放式界面…2.在Components区选中需要修改的组件Button11.2添加声音和图像，并在按钮上显示企鹅形象把企鹅的照片显示在按钮上：

1.下载企鹅照片和声音文件

2.在Media区点击Add,将企鹅的照片和声音文件添加到项目中

3.选取Button1，然后在Properties区点击Image栏，选择企鹅的照片方便快捷的媒体处理功能…1.3添加声音控件在Palette区点击Media展开该栏，找到Sound组件，将其拖到Viewer区可以在Viewer下端的Non-visibleComponent区看到Sound控件点击Sound控件，在Properties区找到Source栏，设置为之前我们已经下载的企鹅的声音文件。方便快捷的媒体处理功能…现在我们得到一个设计好的程序界面…所见即所得…第2步.进入Blocks界面，为组件添加行为2.1为Button1创建一个click事件(触摸企鹅)1.点击MyBlocks选项卡2.选择Buton13.在Button1右方的列表中选择Button1.Click，并拖曳到右边空白区域事件驱动的编程方式…2.2为Button1.Click事件添加响应(让企鹅问好)点击Sound1,选取Sound1.Play并拖曳到Button1.ClickBlock的槽口处，得到以下结果这样的含义是：当点击Button1时，Sound1被播放，发出“您好，我是企鹅”的声音。搭积木式的编程方式，不必记住并键入指令…第3步.运行程序

方法一：通过模拟器

方法二：通过手机方法一：通过手机模拟器运行程序点击Blocks编辑器右上方的Newemulator等模拟器初始化完毕（如右图），点击Blocks编辑器右上方的Newemulator的ConnectingtoDevice下拉框，选择一个emulator使用该的手机模拟器运行程序图手机模拟器初始化完毕手机模拟器，方便程序调试…方法二：通过手机运行程序设定手机设备：应用程序/开发/USB调试运行浏览器由校直通车设置手机设备能访问外网点击窗口上方的Connect菜单，选AI……运行手机设备上的MITAI2Companion215程序点击“ScanQRCode”按钮，然后扫描计算机上的二维码使手机通过WiFi连接到计算机，使用手机运行程序现在我们得到一个设计好的HellPenguin程序…屏幕上显示一个企鹅形象点击企鹅，企鹅说：“您好，我是企鹅”图HelloPenguin程序在模拟器上运行第4步.进一步改进：让企鹅说话的时候张开口

前面我们完成的程序，企鹅说话的时候是闭着嘴的，能否让它说话的时候张开口呢？4.1点击企鹅时，把企鹅闭嘴的图片改为企鹅张嘴的图片

在Button1.Click的代码中加入实现以下功能的代码：将Button1.Image修改为penguin2.jpg，（penguin2.jpg是另一张张着嘴的企鹅图片）新的问题：

实现企鹅说完话闭上嘴。需要在企鹅说完话后把张嘴企鹅的图片（penguin2.jpg）改回原来闭嘴企鹅的图片(penguin1.jpg)。但如何知道企鹅说完话了呢？4.2引入一个计时装置：Clock（定时器）

在程序中加入一个定时器，该定时器可以用来计算企鹅说话的（3秒），并在企鹅说完话后触发修改图片的动作。

步骤如下：在Designer的Palette面板的Basic栏中选中Clock，拖曳到Viewer，现在我们得到一个定时器Clock1设置定时器Clock1的属性：令TimerInterval的值为3000（3秒后触发动作）、去掉TimerEnabled的选择框（程序刚开始的时候Clock1不在工作状态）4.3定义Clock（定时器）的Timer事件（1）

当Clock1开始运行的时候，每隔TimerInterval的时间（本例子中是3000毫秒，即3秒）就会运行Clock1.Timer事件中的代码。

Clock1.Timer事件的产生步骤：在Blocks窗口左侧中找到组件Clock1点击Clock1，找到Clock1.Timer块并拖曳到右侧空白的工作区，产生一个Clock1.Timer事件。

4.3定义Clock(定时器)的Timer事件（2）

我们可以把企鹅由张嘴状态改回原来闭嘴状态的代码写在Timer事件中。这样，经过3秒（说话需要的时间），企鹅就可以闭上嘴了。步骤：在Clock1.Timer中把Button1.Image修改为penguin1.jpg（闭嘴企鹅的图片）将Clock1.TimerEnabled修改为True（任务完成，关闭计时功能）图Clock1.Timer代码4.3补充原来点击企鹅时的代码：启动定时器

点击企鹅的时候（企鹅要开始说话了），让定时器Clock1开始计时：在之前的Button1.Click的中加入这样一行操作，把Clock1.TimerEnabled修改为True图补充后的Button1.Click代码现在我们得到一个真正张开口打招呼的企鹅通过改进，我们得到更逼真的程序。当企鹅没有说话的时候是闭着嘴的（图1），当我们点击屏幕上的企鹅，企鹅的真正地张开嘴说话（见图2）。

图1没有说话的企鹅图2正在说话的企鹅第5步.再进一步的改进：

让企鹅相应手机甩动时也能问好

更神奇的功能：让企鹅响应手机甩动

为了实现当你甩动手机时，企鹅也能问好，我们需要：在组件设计器中，在Palette区点击Sensors（传感器）栏找到AccelerometerSensor并将其拖到Viewer区。在Blocks编辑器中找到AccelerometerSensor1，打开并找到AccelerometerSensor1.Shaking块，将其拖到右边空白区域。按前面编写Button1.Click的方法，将相应的块放入AccelerometerSensor1.Shaking槽中。丰富的功能组件及模块（包括多种传感器控制模块等等）…程序打包你编写的AppInventor程序会自动保存在网络服务器中。当你断开手机与计算机的连接，程序将不会保留在你的手机上。如果你需要把程序下载到你的手机上，你需要对程序进行打包，并下载到你的电脑或者手机上。下载步骤：点击Designer界面左上Build菜单，选择：a.

App(provideQRcodefor.apk)，则程序安装到手机上

b.

App(save.apktomycomputer)，则apk包保存到本地计算机源代码的共享

如果希望把所编写的AppInventor程序源代码与其他的程序设计人员共享，那应该怎么办呢？打开系统中MyProjects页面，选中需要共享的项目；点击屏幕左上方的Project菜单，得到一个下拉菜单；在菜单中选择Exportselectedproject(.aia)tomycomputer，系统将生成一个扩展名为.aia的源代码文件包并保存到本地计算机中。其他的程序设计人员得到该源代码包，点击Project下拉菜单中的Imp