App Inventor智能手机编程与开发
广州市教育局”十二五“规划研究立项课题资助成果
App Inventor智能手机编程与开发
图文教程
（电子简略版）
主编：吕超
编著：邓小华等
广州市培正中学技术课程教程
2015年8月
使用说明
本书是广州市培正中学承担的2014年中央电教馆国家级课题《普通高中校本课程的开发与应用的研究》及广州市教育局2014年十二五规划课题《高中校本课程的开发与应用的研究》的研究成果之一。
麻省理工大学研究小组与谷歌（中国）公司于2014年正式在国内推出了号称“不需要编程基础，会打字就会写程序”的App Inventor在线安卓手机编程平台，用户只需要像拖拉积木一样把代码块拖入工作平台，输入必要的数字或字符，开发平台就会自动把这些积木程序转化为智能手机可以识别和运行的APK程序包！大大降低了手机编程的技术门槛。本书以App Inventor为基础，尽量以简洁的文字和图片讲解主要操作，引导中学生通过模仿和改进来学习开发自己的手机程序，促成“每个人都能开发自己的手机程序”愿望的实现！
App Inventor是一个很大程序上简化了用户编程基础的开发工具，不需要记忆大量的程序代码、函数使人们能够将更多的时间和精力放在利用信息手段解决实际问题的计算思想上，是一个很好的学习和应用的程序开发工具。但，如果你是一个对计算机程序设计有兴趣、有天赋的高手，那么，更为规范的编程平台，如C、C++、.NET、PHP等高级语言与开发平台会让你的想法实现得更灵活、更强大！
学习的初期或许有人会觉得痛苦的，但学习过程中的喜悦同样是吸引人的，特别是你花费了很长时间都没有解决的问题突然得到解决，那种幸福感和满足感会让你欲拔不能！
现在开始写你自己的程序，让大家都喜欢你的程序吧！
邓小华
2015年9月2日
目录
序
第一章了解App Inventor2(AI2)................................邓小华1
第二章AI编程基础.............................................邓小华4
第一节注册与登录 (4)
第二节开发界面简介 (6)
第三节第一个程序：猜数字 (9)
第四节安装PC端安卓模拟器 (15)
第三章初级程序开发入门
例程1：会叫的青蛙............................................戚宇辰22例程2：生成指定个数的随机数..................................邓小华28例程3：钞票我来了....................................邓小华、李煜熙32例程4：10以内的加减法程序....................................邓小华37
第四章中级进阶
例程1：打地鼠游戏.....................................张思涵、蔡敏灵40
作业
3节课后完成开发任务，10月7日前提交
设计、开发一个程序，达到以下最低技术要求：
1、3个屏幕以上；第一屏介绍程序功能，第2，3屏实现对应功能
2、使用到上述教程中的全部组件（如：标签、按钮、图片、布局、时钟），能够实现一个赛事的程序功能。
3、填写程序开发规划表（第3次课发）
4、提交程序源代码文件（导出AIA文件上交）
第一章了解App Inventor2(AI2)
智能手机已经普及到几乎每一个人，之所以称之为智能手机是因为在手机的内部集成了很多的传感器，并通过程序控制传感器做到一些单纯机械或电子设备不能实现的功能。安卓系统是目前全球最普遍的开源手机系统平台，因此，只要遵循一定的程序规则就可以给它写程序，利用手机的传感器进行程序开发和使用。
但是，一涉及到复杂的各种语言代码，许多人都会摇头兼叹气......
于是，一些创造家们就开始利用他们的高技术开发出一些不需要写代码的程序开发平台来满足让每一个人都能写程序的愿望，App Inventor就是智能手机编程平台中不需要懂得什么代码就能开发出手机程序的技术平台。
引用MIT麻省理工大学开发团队在微博中的定义是：【App Inventor是一款免费在线移动应用(app)开发平台，基于所見即所得(WYSIWYG)的概念。老师们，同学们无需任何编程基础，在可视化编程的界面下，通过模块拼接的方式(类似搭积木的形式)，制作app,并能在手机上运行。】
这一“在线移动应用开发平台”指的是直接使用浏览器进行在线开发，官方推荐使用谷歌的Chrome浏览器或火狐浏览器进行在线开发，个人推荐使用Chrome浏览器，问题少些。
图1-1App Inventor项目主导者Hal Abelson教授与李伟华同学的合影为了普及与推广AI这一工具平台，麻省理工大学的AI团队在中国多个省份开展了工作坊培训活动，许多大、中、小学教育工作者参加了AI培训活动
为了吸引更多的青少年朋友了解和参与到AI平台手机开发的队伍中来，由麻省理工大学、谷歌（中国）、广州市教育局联合举办了2015年第二届全国App Inventor应用开发全国中学生挑战赛，从官方微博中截取比赛信息如下：
大赛主页:https://www.360docs.net/doc/691259155.html,/GAIC2015/
大赛背景:
App Inventor由MIT（麻省理工学院）开发，是一款免费的在线开发工具。同学们无需任何编程基础，在可视化编程界面下，通过模块拼接的方式，类似搭积木的形式，制作Android手机程序，并可以在手机上运行。
大赛面向在校高年级小学生、初中生和高中生，分为初中组（含小学高年级）和高中组，在App Inventor平台上锻炼计算思维，把创新的点子动手实践吧。独立制作一款手机APP？你也可以！不用写代码，编程可以像搭积木一样简单又好玩！只要你有创意，就可以来挑战！参赛对象:
●在挑战赛提交截止日当天（2015年10月15日）须是在校小学五～六年级或初中生或
者高中生；小学五～六年级和在校初中生纳入初中组；在校高中生为高中组；
●个人或团队（团队人数不可超过两人）均可参加挑战赛，每人限参加一个团队，不得
跨组别组队；
●参赛者仅可提交一个参赛方案
●参赛者必须获得家长或合法监护人的同意才能参加本次挑战赛
更多参赛资格，请访问比赛规则https://www.360docs.net/doc/691259155.html,/GAIC2015/regulation.jsp
评审标准:
创新性（30%）用户体验（40%）技术复杂性（30%）
大赛奖项:
大赛分为初中组（含小学5～6年级）和高中组，各组别的奖项为：
特等奖（1名）：获奖学生获得一部Android智能手机，获奖学生所在学校获赠书籍100本
一等奖（2名）：获奖学生获得一部Android平板电脑，获奖学生所在学校获赠书籍50本二等奖（7名）：获奖学生获得一个电子阅读器
三等奖（30名）：获奖学生获得一个U盘
参与奖（按提交要求成功提交App Inventor应用程序）：Android纪念品
优秀组织奖：针对参赛者指导老师的奖项，获奖教师可获得奖牌一枚
大赛日程（2015年):
现在～10月15日：报名及提交参赛作品
10月底／11月初：公布晋级决赛名单
11月底／12月初：决赛现场评比，同时完成颁奖典礼
国内资源推荐：
国内最早引入AI，也是最早、最全中文教程的老巫婆博客：https://www.360docs.net/doc/691259155.html,/jcjzhl 这是一个资料与资源非常齐全的AI教程博客，它最早将AI官方认可的教程全部翻译成中文，免费放置于博客中供爱好者学习，并且将不断探索和实践的例子也做成图文教程共享出来，是AI爱好者学习的最佳网站！
国内AI服务器：广州电教馆AI服务器https://www.360docs.net/doc/691259155.html,/
图1-3广州市电教馆搭建的国内AI第一个服务器
广州市电教馆是获得麻省理工大学AI团队授权与技术支持的国内第一个官方事业单位，在2015年AI国际研讨大会上，AI团队曾解释，因为项目技术人员时间与精力问题，短期内，国内正式的AI服务器将只有广州市电教馆，而此服务器的性能与电教馆自身技术支持力量也应该可以应付短期内国内AI爱好者们对AI开发平台使用的需求。
对AI感兴趣的同学们、朋友们可以进行这个网站注册自己的帐号体验手机开发的乐趣。
第二章AI编程基础
导读：在本章中，我们将学习以下内容：
●以个人邮箱在线注册国内AI开发网站帐号；
●AI2开发界面介绍及PC端的手机模拟器安装；
●利用AI在线开发平台编写一个“猜数字”的小游戏；
第一节注册AI开发帐号
使用AI平台推荐的谷歌Chrome浏览器或火狐FireFox浏览器打开网址：https://www.360docs.net/doc/691259155.html,，进入AI的登录界面：
图2-1国内首个AI在线开发服务器首页
广州市的一名编程高手已经将QQ帐号登录集成进了本服务器中，不想另外注册的同学可以使用QQ帐号登录。如果注重帐号安全，则可以点击“登陆”按钮下的“申请新帐号/重设密码”链接进入注册界面（图2-2）：
图2-2申请/修改帐号页面
注册操作非常简单，只需要输入自己一个可用邮箱，点击“发送链接”按钮，大约1分钟后登陆刚才输入的注册邮箱，就会收到一封确认邮件，内容大致如下：
图2-3注册确认邮件截图
将邮件中的链接网址复制到浏览器地址栏中打开，按照个人的喜好设定在https://www.360docs.net/doc/691259155.html, 上的个人帐号信息，确认后，就可以在此网站上使用刚才注册使用的信息登陆了！
操作小结：
1、进入https://www.360docs.net/doc/691259155.html,网站，点击“注册新帐号”链接进入注册页面；
2、输入个人可用邮箱，收取注册确认邮件，获取注册链接；
3、完善个人信息（用户名、登陆密码等），完成注册；
4、回网站首页登陆！
第2节开发界面与各组件介绍
要点导读：
●App Inventor2开发界面介绍
●下载和安装AI助手
图2-4第一次进入AI开发界面
一、选择平台语种
如果你想改变页面显示的语种，你可以点击右上角语言项，选择你喜欢的语种：
二、创建新的项目
点击“新建项目”，会弹出以下窗口：
图2-5新建项目窗口
注意！AI开发平台的项目名称规定只能输入字母、数字及下划线，不支持中文！
我们输入一个易记、易分辨的项目名称，如：sample_01；确定后，页面自动转入组件设计界面：
组件面板工作面板组件列表组件属性
图2-6组件设计界面
三、功能区说明：
组件面板区：在此区域上可以选择编程所需要的组件（如：闹钟、按钮、图像、声音等），通过拖放的方式放置到工作面板上；
工作面板区：显示界面效果，容纳各种可见及不可见组件；但由于各种手机屏幕像素不一致，这里所见的效果并不是手机上显示的效果，通常需要通过布局组件或其它方式实现最终界面一致；
组件列表区：此区域显示的是使用到的组件名称列表；
组件属性区：显示当前选择的组件的属性内容，可作具体调整；
组件库主要有：用户界面、界面布局、多媒体、绘图动画、传感器、社交应用、数据存储、通信连接、乐高机器人共9大类，具体组件如图2-7所示：
图2-7九大类组件库列表
第三节“猜数字”！我的第一个手机程序接下来，我们就通过编写“猜数字”的手机小游戏来看看怎么使用AI来开发手机程序吧！
“猜数字”程序功能描述：
这是一个手机数字游戏，程序运行后会生成一个100以内的随机整数，用户通过输入猜测的数字，通过程序的提示来修改数字大小，通过多次输入后确定正确的数字，输入次数越少，猜测数字的准确性越高。是一个机率与数学思维结合的小游戏。
任何程序开发都包含两大内容：用户界面与后台处理程序。通常，我们都要先设计给用户的界面，再完善后台处理程序。“猜数字”程序的屏幕设计如下：
图2-8第一屏组件设计图2-9第二屏组件设计程序功能描述：
1、用户启动程序后，在第一页屏幕中显示游戏规则，点击“开始”按钮进入第二页；
2、点击“数字，来吧！”按钮后，程序将自动生成一个随机数字，用户可以在输入框中输入
推测的数字，点击确定后，结果提示栏会对每次输入的数字作出“大了”、“小了”或“猜对了”的提示；
3、为了避免有的人一直猜不中随机数，设置了一个“查看随机数”按钮，能显示这个随机数。
要试试程序的效果，请从https://www.360docs.net/doc/691259155.html,/s/1c0ubqA8下载“猜数字”APK（1.4MB）及猜数字aia源码文件（5.6KB，可直接导入AI在线开发平台）。
开发步骤：
第一部分：组件设计（界面设计）
首先，构思好这个程序在手机上的显示界面，如图2-8，2-9；第一个屏幕旋转了一个水平布局组件，一个标签显示提示文字，一个按钮供用户确认进入正式界面，属性设置如下：序号组件名称所属功能区属性
1垂直布局布局界面默认
2标签用户界面背景颜色：绿色
字号：16
宽度：300像素
文本：“猜数字”游戏规则游
戏开始后，在输入框输入一个数字，根
据提示修正数字大小，直到正确为止，
猜的次数越少，猜数字的能力越强！
3按钮用户界面文本：开始游戏
其次，实现当用户点击“开始游戏”后，程序进入下一屏幕的操作：
图2-10增加屏幕的操作按钮
在浏览器开发页面的左上角，找到“增加屏幕”的按钮，点击它，就会打开新的屏幕。
注意：AI2没有设定默认启动界面的功能，程序执行的首页面是当前编译的页面。
因此，当所有程序编写完毕，要记得手动把屏幕点击回到你设定的第一个页面，否则，它就会为用户显示当前屏幕内容。当然，这个“漏洞”对于检查程序效果来说是好事。
然后，我们在第2屏上放置以下内容：
序号组件名称所属功能区组件属性
1标签1用户界面文本：请点击下面按钮生成随机数。
2按钮1用户界面文本：数字，来吧!
3标签2用户界面文本：结果提示：
4水平布局布局界面默认
5文本输入框1用户界面提示：请输入您的“心水”数字
6按钮2用户界面文本：确定
7按钮3用户界面文本：查看随机数
第二部分：逻辑设计
上一部分的操作是用户看见的界面设计，一个良好的界面设计是吸引用户的关键！但再漂亮的外观设计，也要有对应的后台程序代码来实现相对的功能，在App Inventor中，不需要输入C语言或其它语言的代码，只需要在功能区拖动对应的代码模块就行了！这对于不想深入学习编程，又想写出自己的手机程序的人来说是一个很实用的工具。
图2-11逻辑设计操作按钮
设计好界面后，点击右上角的“逻辑设计”，进入图形代码模块界面，
图2-11代码模块区图2-12代码图形显示示意
在逻辑设计界面中，左边是代码模块，当鼠标点击“控制、逻辑…“等任一模块时，就会在旁边显示具体的代码图形块，如图2-12所示。
图2-13工作面板区（图形程序放置区）
工作面板区左下角的这个图示，实时提醒设计者程序是否正确。
工作面板右下角的垃圾桶图标，用来将错误的、不要的图形代码拖放到此删除。（也可以在要删除的代码块上点击右键，选择”删除代码块“）
试一试：根据形状及颜色，请将以下图形代码放置在各自屏幕的逻辑设计界面中
提示：根据代码块颜色到对应颜色的模块中寻找！形状对应才能自动粘附到主程序块中。
第一屏逻辑代码图：
图2-14第一屏代码块
第二屏逻辑代码图：
图2-15第二屏游戏主屏代码块（1）
图2-16第二屏游戏主屏代码块（2）
当上面的代码块都已经放好，请检查一下工作面板左下方的，如果上面的两个数字都是“0”，说明代码的逻辑没有问题，可以进行测试了！
关键代码讲解：
1、生成随机数；在”数学“模块中，由电脑随机获得
一个整数，整数的范围可以通过修改代码块中的数字来改变。
2、变量的使用：与变量相关的代码块都在”变量“模
块中，每个变量在程序中都是唯一的，这个唯一性通过变量名来确定（如var1，也可以是bianliang1），变量名的起名应该简单易懂，让人一看就知道这个变量有什么用。
3、代码解释：
*设定一个变量var1,程序首次运行时
把它的值设为数字0；
*当按钮1被点击时，把var1设为0；
*生成一个1~100范围内的整数，并将
它赋值给变量var1;
注：设……为…….是赋值语句
●只允许用户输入数字
●将变量值用按钮的文本显示出来
合并文本代码块，将2个以上文本合并为1个文本；
组件属性”启用“，使用“逻辑“中的”是、否“来控制；
第4节手机程序调试的方法
方法1：在PC上安装安卓手机模拟器
这个方法最大的好处是：进入模拟手机界面后，如果在平台上修改了界面或程序，在模拟界面上能够实时反映出来，不需要关掉模拟手机界面哦！
一般情况下，我们是先在电脑上设计好界面和逻辑代码，最方便的还是在电脑上测试我们的程序效果，所以，我们要安装AI的PC模拟器，首先我们要下载安装一个最新的AI开发助手，它的文件名通常为MIT_App_Inventor_Tools_2.***.exe，可以百度搜索下载。也可以打开我的百度网盘下载链接获取（https://www.360docs.net/doc/691259155.html,/s/1jG7xMYi）：
下载的安装包：，安装PC端的安卓手机模拟器操作步骤如下：
1、双击运行安装包：
同意其安全及安装请求：
图2-17安装AI助手
一路点击“next”、“Agree”，记得开放给所有用户使用：
这一步，记得勾选“Desktop Icon”，要不安装后都不知道支哪里打开这个模拟器程序！
图2-19勾选生成桌面图标
通常使用默认的安装位置，然后连续点击”next”，直到安装完成。