App Inventor

—— 圆程序员之梦兰州大学分布式与嵌入式系统实验室

郭守超

自测题

自测题

地震科普知识漫画

1.1 App Inventor 简介、特点

• App Inventor 简介：• App Inventor 是一款谷歌公司开发的手

机编程软件• 软件使用者不需要掌握任何编程知识• 创意 + 代码拼接 = 你自己的应用程序

App Inventor 特点： 开发过程简单，易操作 开发创造自己的应用程序 不需要太多的编程知识 代码拼接的编码方法 创意 + 代码拼接 = 自己的程序

• Harold Abelson

• 麻省理工学院教授• Father of App Inventor

• 计算机程序的构造和解释等

学习资料

• App Inventor 中文网• 网址： http://www.appinventor.com.cn/

• 参考书目：

1.2 App Inventor 开发环境

• App inventor 需要在 web 浏览器和 Java 相关程序上运行

• Java 环境配置： Java 6• 浏览器： Mozilla Firefox 3.6 或更高 Apple Safari 5.0 或更高 Google Chrome 4.0 或更高 IE 7 或更高• 操作系统：• Macintosh: Mac OS X 10.5, 10.6  • Windows: Windows XP, Windows Vista, Windows 7 • GNU/Linux: Ubuntu 8+, Debian 5+

• 手机配置• 勾选未知来源• 勾选 USB 调试• 手机必须还有 SD 卡• 有时还需要禁止屏幕自动旋转

• 从 http://www.java.com 下载 java 并安装• 进入下面链接，下载安装 App Inventor

• http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe

• 利用 google 邮箱账户登录• http://beta.appinventor.mit.edu/

• 即可进行程序编辑

1.3 App Inventor 环境搭建

离线开发• 自己搭建服务器• 在线开发的基础上，解压以下文件• appengine-java-sdk-1.7.5.rar• AppEngine.rar • BuildServer.rar • 离线开发时• 运行 AppEngine\startAI.cmd• 运行 BuildServer\launch-buildserver32.cmd• 浏览器登录 http://localhost:8888 即可

• 登录后，首页如图所示• 点击 new ，创建新程序• 点击 More Actions ，• 可以添加本地程序• 点击进入程序设计界面

2.1 App Inventor 开发过程

开发流程

• 如图所示，视图设计界面主要包括如下五部分• Palette• （控件集）• Viewer• （视图区）• Components• （组成控件）• Media• （资源管理）• Properties （属性）

• 从 Palette 拖取所需 component （控件）至 Viewer 中• 在 Components 中选择 component ，并可以重命名或删

除• 在 Properties 中对 component 的属性值进行修改• 在 Media 中对音乐、图像等资源进行存储• 完成设计后，点击 Open the Blocks Editor• 下载 JNLP 文件 , 运行该文件• 启动 Java Web Start ，打开 Blocks Editor （模块编辑）• 也可点击 Package for Phone ，把所编辑程序以 apk 下载

至电脑上

• Blocks Editor 结构如图所示• 左边部分包含了主要的函数和属性模块• Built-In• (常用基本函数 )• My Blocks • ( 自定义 component)

• advanced• (component 属性值 )• 从图中可以看出• 在编码过程中，• Built-In 中所有基本函数可以直接使用， advanced 包含了

自定义 component 的基本属性，把所需函数模块从 My Blocks 中直接拖拽至右边编码区进行拼接即可。

• 点击 New Emulator生成模拟器，• 点击 Connect to Device• 链接模拟器进行程序测试• 也可使用 USB连接手机进行测试• 测试完成后，点击 Package for Phone• 下载 apk 安装程序

• 新建一个 hello 工程• 选择 Button 、 label 、 sound

• 添加一个 hello.mp3

• 修改相关属性• 设计完成后，打开• Blocks Editor

2.2 开发一个小程序

• 所要完成功能：• 点击按钮• 显示 hello提示文字• 播放 hello提示音• 所需操作：• 触发按钮点击事件• 设置 label 文本• 播放音频文件• 设置参数• 调试程序，完成后下载安装包

总结• App Inventor 操作简单• 开发过程简明易懂• 有助于掌握计算机基础概念、思想• 充分发挥想象力，锻炼动手实践能力• 掌握界面布局、设计等人机交互原理• 有效培养计算思维、创新思维

程序设计界面

模块编辑界面

程序运行示意图

• 谢谢