AppInventor2-精要-全-

AppInventor2 精要（全）

原文：zh.annas-archive.org/md5/120c9c3016116e82f4bc7cc3037cf135

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

几乎每个人都有过为应用程序想出一个点子的想法，或者可能已经宣布过，“我希望有一个应用程序来做这件事！”但直到最近，将一个想法转化为一个功能完善的应用程序，可能需要雇佣一名专家软件程序员并支付成千上万的钱。移动应用程序开发的领域一直是精英群体——熟练的程序员——的专属领域。App Inventor 项目旨在通过民主化软件开发来改变这一现实。App Inventor 2 是一种免费、基于积木、拖放式的可视化编程语言，它使任何人，甚至没有任何编程经验的人，都能将一个想法转化为一个功能完善的应用程序。

作为教育工作者，我们推广全球教育和赋能人们从技术使用者转变为技术创造者的热情，是撰写这本书的灵感来源。借助 App Inventor，一个 12 岁的孩子、一个言语治疗师、一个棒球教练或任何人都可以开发一个对他们个人、有意义且有用的应用程序。来自所有背景和教育水平的人都可以开发一个解决他们社区中看到的问题的数字解决方案。任何 App Inventor 应用程序，如教育游戏、音乐教程或垃圾回收计划，都可以在应用程序市场中发布或出售，从而产生全球影响或激发创业、协作和社区建设的机会。

App Inventor 提供了一种更易于使用且不那么令人畏惧的计算机科学入门途径，它比传统的晦涩难懂的黑白屏幕编程更具亲和力。五彩斑斓的积木块，就像拼图一样拼接在一起，以及设计工具的使用，使用户能够学习编码和用户体验设计技能。此外，鉴于计算机科学领域存在巨大的性别差距——男性在课程和工作中都占主导地位——我们同样热衷于利用 App Inventor 介绍更多女孩和女性了解移动计算机会，例如 Technovation 的应用程序竞赛(www.technovationchallenge.org)和 Girls Who Code 的编码俱乐部(www.girlswhocode.com)。

因为您可以将任何想法转化为移动应用，所以想象、创造力和创新的机遇确实是无限的。本书的目的是帮助激发这种创造力，同时向您介绍基本的计算机科学原理、计算思维和编程。本书教会您如何导航 App Inventor 平台，并通过构建三个不同移动应用的逐步教程帮助您熟悉其功能。在整个书中，我们提供设计工具和技巧，作为用户体验设计的途径，因为用户界面是任何移动应用的一个至关重要的部分。最终，到本书结束时，您将具备足够的技能，从头开始开发自己的移动应用。我们期待看到您受到启发的应用，并希望您能与我们一起分享。

我们非常兴奋能与您分享我们对移动应用开发的热情，并希望这本书能激发您对创造个人化、有意义且有用的技术的创造火花。我们感谢 Hal Abelson、Mark Friedman 以及所有原始 App Inventor 开发者和愿景家，他们创建了演变为 App Inventor 2 的平台。我们自豪地继续推进 App Inventor 的使命，并鼓励所有初露头角的软件程序员将 App Inventor 与其他非编码者分享。我们一起可以赋权他人，成为连接和影响世界数字创造力的不断增长运动的一部分。

	"我们期待了解您设计的数字解决方案或您在移动计算领域的演变。祝您好运，继续连接！"
	--费利西亚·卡姆里亚尼和克里希南德·罗伊

本书涵盖内容

第一章, 使用 MIT App Inventor 2 释放创造力，向您介绍 MIT App Inventor 软件，并通过考察将应用想法转化为原型的设计流程和技术，探索移动应用开发者的多方面角色。通过展示像您这样的人已经制作的各种应用，这一章节揭示了使用 App Inventor 所能产生的学习成果和技能范围。

第二章，设置 MIT App Inventor 2，将指导你设置 Google 账户以登录 App Inventor、下载软件，以及使用 Mac、Windows 或 GNU/Linux 通过 Wi-Fi 或 USB 将你的电脑连接到你的移动设备。MIT App Inventor 2 是一个免费的在线应用，在你的电脑上的网页浏览器中运行，并将你的项目保存在云端。App Inventor 的神奇之处在于，你可以通过集成开发环境（IDE）实时测试你构建的应用。如果你没有移动设备，不要担心，有关于如何使用屏幕模拟器使用 App Inventor 的说明。虽然我们提供了起步的逐步指南，但我们承认有时建立连接可能是一个挑战。因此，我们包括了大量的故障排除和帮助选项。

第三章，导航 App Inventor 平台，使你熟悉 App Inventor 项目视图、设计器屏幕和积木编辑器。本章教你如何构建一个名为 Fling 的游戏应用。逐步教程将组件和属性集成到设计中，使用彩色的拼图样式的积木来编写游戏的行为。你将学习如何创建开始或重置游戏的按钮、移动球、通过触摸改变球的方向、让球从屏幕边缘弹回，以及结束游戏。在开发过程的每个步骤中，我们都会向你展示如何在你的移动设备上查看这些更改。到本章结束时，你将构建一个功能齐全的应用！然而，我们的应用开发之旅才刚刚开始。

第四章, Fling 应用 – 第二部分，使用我们在第三章中构建的基本应用作为进一步技能发展的起点：调试和通过添加更复杂的功能来扩展应用。由于大多数游戏都有计分、级别递增和难度增加，我们增强了 Fling 教程，使其成为一个更高级的应用。你将学习如何创建计分机制、显示分数、增加球的速度、创建关卡、增加游戏的难度，并通过更新“播放”和“重置”按钮进行调试。

第五章, 构建活动应用，提供了一个构建第二个应用的教程——这次是一个中级活动规划应用。这样的应用对于需要聚集人们开会、派对或活动的人来说非常有用。它收集想要参加的人的信息，包括他们的名字、宾客数量以及要带来的拼盘食物。作为回报，应用会向用户显示宾客名单和活动信息，如地址和地图。教程教你如何包含图片和艺术品、创建导航菜单、使用背包工具、添加多个屏幕、扩展标签的使用，以及包含地图组件。到本章结束时，你已经取得了很大的成就，但活动应用的开发还只是进行到一半。

第六章, 数据库简介，将涵盖数据库，因为它们是应用设计的重要组成部分，因为它们存储持久数据，这意味着当应用关闭并重新打开时，之前输入的数据将保留在应用中。没有数据库，当应用运行时用户输入的任何数据在应用关闭后都会丢失。为了收集活动应用的用户输入信息，本章的教程演示了如何创建一个 RSVP 表格、建立 Google API 凭证、使用 Google Fusion Tables 在数据库中存储和请求信息，以及显示宾客名单。

第七章, 使用抽奖应用学习循环，将涵盖第三个教程——这次是关于一个包含列表、循环和变量等计算机科学原理的抽奖应用。抽奖应用（一个常规抽奖的数字版本）可以在派对、会议休息时间或作为破冰活动，让参与者参与一个短暂有趣的活动。参与者向抽奖组织者的手机发送一条特定信息，应用会从接收到的号码列表中随机选择一个赢家，然后通知赢家他或她赢得了奖品，并给其他参与者发送短信告知他们没有中奖。在这里，你将学习如何使用变量和循环高效地编码，因为应用会重复相同的操作（发送“很抱歉您没有中奖！”的信息）给许多人。

第八章, 扩展您的移动应用开发技能，包括更多设计原则和 App Inventor 技巧，以拓宽您的技能范围，从使用引导教程构建应用过渡到从头开始创建移动应用。还包括应用分享工具，让您能够贡献您的创意并从其他应用开发者那里学习。由于所有 App Inventor 应用都可以上传、分享，甚至可以在应用市场中出售，您开发的应用可以产生全球社会影响或触发您的企业家之路。世界期待您的贡献！

你需要构建移动应用

• 一个免费的 Google 账户

• 一台 Android 移动设备（手机或平板电脑）

  • Android 操作系统 2.3（“姜饼”）或更高版本

• 拥有列出的操作系统之一的计算机：

  • Macintosh（带 Intel 处理器）：Mac OS X 10.5 或更高版本

  • Windows：Windows XP、Windows Vista、Windows 7、8 或 10

  • GNU/Linux：Ubuntu 8 或更高版本，Debian 5 或更高版本

• 一个网络浏览器：

  • Mozilla Firefox 3.6 或更高版本（注意：如果您使用带有NoScript扩展的 Firefox，您需要关闭该扩展。请参阅故障排除页面上的说明。）

  • Apple Safari 5.0 或更高版本

  • Google Chrome 4.0 或更高版本

  • Microsoft Internet Explorer 不受支持。Windows 用户应使用 Chrome 或 Firefox

这本书面向谁

这本书是为任何想要学习如何为 Android 创建移动应用的人而写的。不需要任何先前的编码经验。

惯例

在这本书中，您会发现许多不同的文本样式，用于区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称按以下方式显示：“该文件命名为appinventor2-setup_1.1.tar.gz，它是一个 GZIP 压缩的 TAR 文件。”

任何命令行输入或输出都按以下方式编写：

> /usr/google/appinventor/commands-for-Appinventor/aiStarter &

新术语和重要词汇以粗体显示。您在屏幕上看到的单词，例如在菜单或对话框中，在文本中显示如下：“有五种游戏可供选择，包括重新聚焦、真彩色、快速选择、求和和表达式谜题。”

注意

警告或重要注意事项以如下方式显示。

小贴士

小贴士和技巧看起来像这样。

读者反馈

读者反馈始终欢迎。请告诉我们您对这本书的看法——您喜欢什么或觉得有什么挑战。读者反馈对我们很重要，因为它帮助我们开发您会发现有用和有教育意义的资源。

要发送给我们一般性的反馈，只需发送电子邮件至 <feedback@packtpub.com>，并在邮件主题中提及本书的标题。

如果您在某个主题上具有专业知识，并且您对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

现在您已经是 Packt 图书的骄傲拥有者，我们有许多事情可以帮助您从您的购买中获得最大收益。

勘误

尽管我们已经尽最大努力确保内容的准确性，错误仍然可能发生。如果您在我们的某本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这一点，我们将不胜感激。通过这样做，您可以避免其他读者感到沮丧，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告它们。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站或添加到该标题的勘误部分现有的勘误列表中。

要查看之前提交的勘误，请访问www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将出现在勘误部分下。

侵权

互联网上版权材料的侵权是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何形式的非法复制我们的作品，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过链接mailto:copyright@packtpub.com与我们联系，并提供涉嫌侵权材料的链接。

我们感谢您在保护我们的作者和我们为您提供有价值内容的能力方面的帮助。

问题

如果您对本书的任何方面有任何问题，您可以通过mailto:questions@packtpub.com与我们联系，我们将尽力解决问题。

第一章. 使用麻省理工学院 App Inventor 2 释放创造力

移动应用无处不在。几乎有应用可以做到任何事情——娱乐、社交、餐饮、旅行、慈善、购物、教育、导航等等。几乎每个拥有智能手机或平板电脑的人都在使用它们来使他们的生活变得更轻松或更好。但您已经决定从仅仅使用移动应用转向创建移动应用。恭喜！多亏了麻省理工学院 App Inventor 2，移动应用开发不再是经验丰富的软件程序员的专属领域。这款软件赋予任何有想法的人创造移动技术的能力。这本书为所有年龄段的人提供了使用麻省理工学院 App Inventer 2 创建移动应用的逐步指南。虽然这种可视化编程语言是那些几乎没有编程经验的人的理想工具，但不要被软件的功能性是基础的错觉所迷惑！简单的拖放块格式实际上是一种强大的编程语言，能够创建复杂和高级的移动应用。

本章的目的是概述麻省理工学院 App Inventor 2，以及您作为移动应用开发者的新角色。您将获得比您想象的更多技能发展！当然，您将学习编写移动应用代码，但移动应用构建过程中融入了无数其他有价值的技能。最重要的是，您将学会以不同的方式思考，发现设计思维过程，成为一个问题解决者，并变得富有资源。本章还提供了关于设计原则和头脑风暴应用想法的技巧。最后，它揭示了麻省理工学院 App Inventor 2 的潜力，并展示了一系列移动应用，以便您，一个初露头角的应用设计师，可以开始思考所有可能性的全谱系。这些移动应用示例不仅展示了麻省理工学院 App Inventor 2 的能力和功能，而且有助于激发想法，培养创新思维，并在您开始下一章的移动应用制作过程中帮助您设定视觉目标。

本章涵盖了以下主题：

• 什么是麻省理工学院 App Inventor 2，以及为什么您应该学习使用它？

• 成为移动应用开发者

• 发现麻省理工学院 App Inventor 2 的可能性

什么是麻省理工学院 App Inventor 2？

MIT App Inventor 2 是一种免费、拖放式、基于积木的视觉编程语言，它使人们无论编程经验如何，都能为 Android 设备创建移动应用。在 2008 年，iPhone 和 Android 手机刚刚进入市场。麻省理工学院教授 Hal Abelson 有了一个想法，即创建一种易于使用的编程语言，以便制作能够利用新兴智能手机技术的移动应用。配备快速处理器、大容量存储和传感器，智能手机使人们能够以前所未有的方式监控和交互他们的环境。Abelson 的目标是使移动应用开发过程民主化，让任何人都能轻松创建对他们有意义且重要的移动应用。在加利福尼亚州山景城的谷歌公司休假期间，Abelson 与工程师 Mark Friedman 以及其他许多开发者一起创建了 App Inventor（是的，它最初被称为 Google App Inventor）。

在 2011 年，Abelson 将 App Inventor 带到了麻省理工学院，并与媒体实验室和 CSAIL（计算机科学与人工智能实验室）一起创建了移动学习中心。在 2013 年 12 月，Abelson 和他的开发团队推出了 MIT App Inventor 2（从现在起简称为 MIT App Inventor），这是一个功能更强大的基于网络的集成开发环境（IDE）版本。IDE 意味着当你在线构建移动应用时，你可以在连接的移动设备上看到它变得生动起来。你所需要的只是一台电脑（Mac 或 PC）、互联网连接（或 USB 连接）、一个谷歌账户和一个 Android 设备（手机或平板电脑）。但是，如果你没有 Android 设备，不要担心！你仍然可以使用屏幕上的模拟器创建应用并利用实时开发模式。

MIT App Inventor (appinventor.mit.edu/) 的界面包括两个主要屏幕，一个是设计屏幕，这是一个图形用户界面（GUI），你可以在这里创建应用的外观和感觉（选择你希望应用包含的组件），另一个是积木编辑器，你可以通过用彩色积木进行编码来为应用添加行为。用户通过从菜单栏拖动组件和积木到工作空间（称为查看器）和连接的 Android 设备（或模拟器）上，实时显示进度。所有应用都保存在麻省理工学院服务器上；一旦完成，它们可以在 MIT App Inventor 画廊中共享，提交到应用竞赛（如 MIT App of the Month），或者上传到 Google Play 商店（或其他应用市场）进行共享或销售。

到目前为止，MIT App Inventor 已经使数百万人通过学习成为移动应用开发者，从而成为技术创造者。现在，你将成为其中的一员！

理解你在移动应用开发者中的角色

既然你在阅读这本书，那么可以合理假设你不仅经常使用移动应用，而且偶尔也会产生这样的想法：“真希望有款应用能做这个！”现在，借助 MIT App Inventor 和这本移动应用开发指南，你很快就能说：“我可以为这个创建一个应用！”

在接受你作为移动应用开发者的新角色时，你将不仅学习如何编码；你还将学习一系列其他有价值的技能。你将学会以不同的方式思考。每次你打开一个应用，你都会从开发者的角度去审视它，而不仅仅是作为一个用户。你会开始注意到哪些功能是逻辑简单，哪些是复杂不直观。你将学会从你的环境中获取灵感。什么样的应用可以使我的俱乐部/课程/会议的出勤过程更加流畅或高效？什么样的应用想法可以帮助解决健身房中库存不准确的问题？你将学会在不经意间成为一个数据收集者。当人们评论应用时，你的耳朵会竖起来，你会记下这些评论。你将开始提出类似的问题，比如，为什么你更喜欢 Waze 而不是谷歌地图？

你将学会成为一个问题解决者。你将学会逻辑思考，以便能够以逐步的方式告诉计算机如何执行操作。任何软件开发者都会证实编程是一个迭代的过程。它是一个不断循环的编码、故障排除和调试的过程。试错将变成第二天性，同样，退一步思考为什么刚才还正常的东西现在看起来出了问题。而且，你将学会扮演设计师的角色。再也不能准确地说程序员只是独自坐在电脑前，在黑色屏幕上创建基于白色文本的代码了。移动应用的开发者也是设计师，他们思考并创建吸引人且直观的用户界面（UI）。大部分的设计工作并不在电脑上进行；它包括与潜在用户的对话，涉及钢笔、纸张和便利贴，并使用故事板或草图。只有在你将你的应用在纸上设计好之后，你才会坐在电脑前开始编码。然后，你不会找到传统的黑白界面，因为 MIT App Inventor 平台是交互式的，充满了可以拼接在一起的多彩积木。

脑暴想法应用

很可能你已经有一个移动应用的想法。如果没有，你怎么会想到一个？开始头脑风暴应用想法的最好方式是从你所知道的事情开始。你希望存在哪个应用？你和你朋友、同事或家人会使用、需要或喜欢哪个应用？你社区、网络或朋友圈中的哪个问题可以用数字解决方案来解决？也许，你借书给朋友，但没有一个系统来跟踪谁借了什么。也许，你想和你尺寸相同的人交换衣服，所以你想发布你可用于交换的物品的照片，并查看你尺寸的列表中的其他物品。也许，你有一个你经常使用的最喜欢的应用，但你希望它有另一个功能。也许，当你在一个公共场所遇到朋友时，如果没有大量的短信往来，很难知道他们是否在附近，所以你想创建一个可以在一个屏幕上显示每个人位置的应用。可能性是无限的！

成功头脑风暴的关键是写下你所有的想法，无论它们多么疯狂，然后与人交谈以获取反馈。他人的意见是确保你的应用想法成为人们愿意使用、购买的应用所需的研究的重要组成部分。在最近的一次商务旅行中，我们有一个旅行应用的想法，因为我们似乎总是忘记至少一件重要物品。在酒店的早餐时，我们与几位同事讨论了应用想法，并收到了一些我们没有想到的惊人见解，例如在旅行前很久就提醒填写任何处方，以及一个天气组件，这样我们就可以确保为每个目的地打包合适的衣服。你交谈的人越多，你进行的市场研究就越多，整体应用的概念就会越明确。

设计思维过程

设计思维（更多关于设计思维的信息可以在dschool.stanford.edu找到）是一个以用户为中心的创造性问题解决过程。虽然设计思维过程并非专门为移动应用开发而设计，但当应用于移动应用开发时，它特别有效。我们建议使用以下设计阶段：

很可能，你不会创建一个只有你自己会使用的应用，因此你必须发现潜在用户在应用中需要、想要或偏好的东西。

同理心

你的第一个目标是理解将使用你的应用的人。因此，这个阶段被称为同理心。你可以通过采访一系列潜在用户，询问他们目前使用哪些类型的应用，他们喜欢或不喜欢哪些应用功能，他们希望存在哪些应用，以及他们是否会使用你计划制作的应用来轻松地进行研究。采访可以提供宝贵的反馈，并成为新想法的灵感来源。

例如，如果你计划创建一个协调多人日历的读书俱乐部应用程序，以便在大家都有空的时间内安排读书俱乐部讨论，你可以询问读书俱乐部成员他们希望在应用程序中看到哪些功能。是否会有一个确认参加或取消的按钮？是否会有前往地点的指示？有哪些交通或停车选项？是否会有链接到亚马逊购买或下载下个月书籍的功能？应用程序如何帮助成员决定下一本要读的书？由于会议是拼盘餐，是否有选项包括每位成员将带来什么食物或饮料？有什么快速有效的方式联系所有成员？通过这个数据收集阶段，你可能会发现许多你之前未曾想到的新功能，或者你可能会得到一个确认，即你确实走在正确的轨道上。了解潜在用户的需求是应用程序构建过程中的一个重要部分，从概念创建的最初阶段一直到部署的最后阶段。

定义

一旦你收集了研究数据，你将如何处理这些信息以及如何将其融入你的设计？在定义阶段，你将综合你所收集的数据，以创建一个更清晰的图像，说明你的应用程序将做什么，它将如何运行，以及它将服务的目的。你可能已经收集了来自访谈的页页想法和评论。在回顾它们时，哪些主题或模式出现？哪些想法看起来最突出？人们最兴奋的是哪些应用程序功能？审查用户反馈将帮助你构建和简化你的应用程序概念，使其目的和功能清晰具体。这个阶段将想法梳理出来，以便最好的想法浮现出来，也将帮助你创建下一阶段准确的视觉元素。

想象

考虑到你从潜在用户那里需要和想要的所有输入，你的应用可以提供哪些解决方案？现在，是时候进入创意阶段，用笔、纸和便利贴来创建一个体验地图或故事板，以界定应用的所有功能。每张纸代表一个屏幕，并显示为该屏幕指定的用户界面（UI）。这个过程通常需要很多修订，可能会产生多个应用版本，你希望保留它们，因为它们在创建更新时可能会有所帮助。我们发现将所有图纸都贴在墙上很有帮助，这样你可以可视化整个应用地图及其顺序。这也是你加入你喜欢的或觉得吸引人的设计功能的时候。记住，市场上所有的应用都是以同样的方式开始的，从一个想法开始。一个想法的灵感可能在任何时候、任何经历中产生。我们建议专门为想法准备一个笔记本，这样你就可以在受到启发或看到你喜欢的界面和感觉的应用时记下笔记。这将是你继续应用制作道路上的宝贵资源。与任何设计过程一样，这个创意阶段需要时间。这是好事，因为你想给你的想法留出时间慢慢酝酿和发酵。休息一下，用新的眼光回到你的草图上通常能提供新的视角、想法和清晰度。

原型

现在你已经进入了原型阶段，是时候坐在电脑前构建你的应用了。一开始这可能会让你感到有些 daunting，因为你正在学习如何使用 MIT App Inventor，但本书中的逐步指南会带你走过应用开发的每个阶段。提供的教程将教会你关于各种 MIT App Inventor 组件的知识，它们的功能，以及如何通过拼接积木来为它们添加行为。一旦你熟悉了组件功能并掌握了使用积木编码的技巧，你就能将这项知识应用到创建自己的应用中。由于你已经在本章中完成了设计思维过程的全部阶段，并为你的应用奠定了基础，因此你将能够特别专注于构建应用所需的组件。

测试

当您认为自己应用程序完成时，再想想！在将应用程序推向应用程序市场之前，先测试一下您的小组用户。这些 alpha 和 beta 测试者将帮助您发现错误或问题是否按预期工作。学会故障排除通常是一个令人沮丧的过程；但到这一阶段，您将已经磨练了您的问题解决技能，并且您将有更多关于如何修复错误的想法。此外，第八章，“扩展您的移动应用程序开发技能”，专门介绍了扩展您的应用程序开发技能的工具。而且，尽管测试阶段看起来像是最后的阶段，但您会发现它实际上是一个新的开始！设计思维过程实际上是一个循环的，因为总有改进、精炼和当然，版本 2 的空间。

如果你在任何时候遇到困难，可以在 MIT App Inventor 网站上找到许多资源，网址为appinventor.mit.edu/和www.appinventor.org/，以帮助您。除了教程外，还有一个 MIT App Inventor 画廊，您可以在这里查看其他人们创建和分享的应用程序及其源代码。如果您想在自己的应用程序中包含某些功能，但还不知道如何编码，您可以下载该应用程序，查看积木，并自学如何编码它们！此外，还有一个在线社区论坛，您可以在那里提问并向经验更丰富的用户学习。

计算思维

在成为移动应用程序开发者时，您将学习许多有价值的角色：头脑风暴者、观察者、研究者、数据解释者、综合者、设计架构师、策略家、创造性思维者，最后但同样重要的是，程序员。成为移动应用程序开发者的一部分是学习像计算机一样思考，即能够告诉计算机您想要它做什么，以便它执行特定的操作。计算机并不直观；它们不知道您的意思或解释您的话。通过编程或编写代码，您为计算机提供清晰的、一步一步的逻辑指令，使其执行您想要它执行的操作，例如检索数据、显示信息或打开另一个应用程序。但是有时，即使您认为自己很清晰和逻辑，计算机也不会按您期望的方式响应。由于编码是一个迭代的过程，有很多次尝试看看是否有效，然后当它不起作用时，再尝试其他方法。失败得越多，您就越接近找到成功的路径。学会故障排除、调试程序或想出另一种解决方案伴随着愿意开放、创造性思考和不断尝试。您很快会发现，通过成为程序员，您也在磨练自己的问题解决技能。

设计应用程序的最佳实践

由于可用的 Android 应用数量众多，你可以轻松地研究设计原则。

注意 UI 的所有功能。例如，看看 10 个不同的棋类游戏、单人纸牌游戏或天气应用。你会看到各种各样的 UI，并开始了解不同的开发者如何处理完全相同的应用。哪些应用易于导航和使用？什么让一个应用比另一个更有吸引力？哪些主屏幕提供了应用功能的最佳概览？菜单和抽屉是如何显示的？返回上一屏幕有多容易？如何导航到主屏幕？使用时文本元素是如何高亮的？屏幕是如何布局的？你可以在哪里找到说明？你可以在哪里找到帮助？注意提示，例如什么颜色、动画或弹出消息发生，让你知道 X 正在发生。

优秀的设计是简洁的。通常，人们倾向于希望自己的应用能做所有的事情。你从面试中收到了大量的反馈，并希望将所有这些精彩的想法融入到你的应用中。由于这是你第一次使用 MIT App Inventor 制作应用，我们建议你选择必要的核心功能，并使它们清晰易用。如果需要，你可以在未来的版本中始终添加更复杂的功能。考虑一下你自己的应用使用情况。我们大多数人使用应用都非常快或断断续续的（除非我们在乘坐长途地铁，玩手机游戏或阅读电子书）。你很少在任何时候使用应用的所有功能。大多数情况下，你使用应用完成特定目的后就会结束。保持你的应用简单。

重复迭代，重复迭代。设计，就像编码一样，需要具备接受实验的能力。幸运的是，App Inventor 通过 IDE 提供即时反馈，简化了这一过程。尝试一个组件，添加行为（积木），然后查看你的连接设备上发生了什么。添加不同的行为；查看你的连接设备上发生了什么。添加颜色、布局和字体；查看你的连接设备上发生了什么。你明白这个流程了吗？设计涉及大量的试验、错误和失败，这最终是一件好事，因为它能让你朝不同的方向前进。你可能对某个设计想法情有独钟，但一旦尝试过后，你可能并不那么喜欢它。不要气馁！这是时候去探索其他选项了。尝试这个，尝试那个，然后测试。通过几轮的玩耍和测试，扩展你的创意范围。

应用程序设计，就像任何艺术追求一样，需要时间。尽量不让创意过程匆匆而过。确实，麻省理工学院 App Inventor 使制作移动应用程序变得容易，但要制作一个设计精美、外观吸引人且无缝工作的应用程序，需要投入时间、激情和创造力。经常休息，花时间在户外，玩一个游戏或投身于另一个项目，这样当您回到您的应用程序时，您将以全新的视角、精力、思想和灵感来对待它。

MIT App Inventor – 目的和潜力

在使用 MIT App Inventor 制作应用程序时，发生的事情远不止学习编码。MIT App Inventor 的使命是使编码民主化，让每个人，无论年龄、教育背景或职业，都有机会创造技术。教练、运动员、教师、学生、医生、病人、指挥家、大提琴家、飞行员或乘客都可以制作对他们来说重要的移动应用程序，使他们的生活更快乐、更好或更有效率。

作为一种数字解决方案，您的应用程序最初可能旨在解决您观察到或经历的问题。但一旦您在应用程序市场中分享它，它可能会影响到您甚至不知道的人，也许永远都不会见面。麻省理工学院 App Inventor 使您能够将您的影响范围从您所在的本地社区扩展到全球规模。您可以用一个简单的游戏带给他人快乐和笑声，您可以帮助即将进入大学的高中生准备标准化考试，或者您可以为旅行者提供教授其他语言常用短语的工具。为社会做出积极贡献是使用您新获得的 MIT App Inventor 摇滚明星技能的一种了不起的方式。

当您开始创建应用程序并看到它们对他人产生的影响时，您可能会扩大您认为对自己可能的事情的范围。您想过成为社会企业家吗？人们会为您创建的技术付费吗？您的应用程序是否有增长潜力，以服务新的和不同的用户？您如何扩大您的商业洞察力，学习如何构建和营销成功的移动应用程序？尽管您将从一个简单的小应用程序开始，但请始终记住，在您所做的事情和您是谁上都要有远大的梦想。

虽然 MIT App Inventor 提供了一种简单易学的方式来了解编码和软件开发，但它确实也可以作为进一步计算机科学教育的入门途径。一旦您看到技能增长潜力，比如创造技术如何积极影响他人，或者您可以出售您的数字解决方案，您可能会对通过深入研究其他软件语言或科学学习机会（如创客空间或黑客马拉松）来进一步扩展您的技术知识产生兴趣。

发现 MIT App Inventor 的可能性

MIT App Inventor 使任何年龄或编程经验的人都能将应用想法转化为原型，最终转化为完整的移动应用。你的应用将做什么？当你开始应用制作之旅时，你可能想知道你能用 App Inventor 创建哪些类型的应用？由于你制作的应用将被用于在 Android 智能手机或平板电脑上共享或销售，你可以创建访问这些设备全部功能的应用。你的应用可以执行诸如说话、拍照（或自拍）、打电话、发短信、翻译短信、推文、播放音乐或视频、使用 GPS（地图或其他网站）、扫描条形码、设置计时器（闹钟或提醒）、控制机器人、启动其他应用、跟踪你的移动等活动。鉴于 Android 设备的众多功能，可能性似乎是无限的！

MIT App Inventor 示例

在开始学习 MIT App Inventor 之前，我们认为回顾一些 MIT App Inventor 应用的示例是有帮助的，这样你就可以提前了解一系列的可能性。当你开始学习 MIT App Inventor 时，你可以从制作简单的应用开始；但别忘了这些应用示例，因为它们可以成为目标或灵感，帮助你激发创造力和设计技能。如果你想要成为一名水彩画家，但从未画过画，你会查看许多专业画家或比你经验更丰富的人制作的水彩画，以获得灵感，了解可能性的视觉，并学习画作是如何创作的。

以下示例是 MIT App Inventor 初学者、中级和高级应用的混合体。有些是由个人创建的，他们受到启发制作了特定的应用，而另一些则是由一群人为项目或作为竞赛提交而创建的。所有这些应用共同的一点是，在应用开发者花费数小时完善他们的用户界面和创建代码块之前，他们就像你一样，从几乎没有编程经验开始。在这本书中通过基本和中级应用制作所发展的所有技能，都将为你提供一个坚实的基础，以便你能够构建更复杂、更高级的应用。入门教程将教你 MIT App Inventor 的基础知识，并使你能够从头开始进行应用制作。

秒表和计时器

来自芬兰的 Jari Pohjasmäki 开发了以下有用且简单的秒表和计时器应用：

所用组件：按钮、标签、文本框、图片、列表选择器、布局、时钟和通知器

Yahtzee

此应用模仿了经典的Yahtzee游戏，游戏的目标是通过掷五枚骰子来得分。在回合中，骰子可以掷到三次，游戏将包括 13 轮。每位玩家将他们的掷骰子得分记录在 13 个类别中的一个。一旦某个类别被使用，就不能再次使用。掷出一个Yahtzee（五子同花）得 50 分，是所有类别中最高的。得分最高的人将获胜！

以下截图显示了不同骰子角色的总游戏得分：

使用的组件：按钮、标签、通知器和对齐

BYJ3S

维森塔·阿尔贝尔多和耶稣·吉尔创建了数字宠物游戏BYJS3。此应用允许你与、喂养和洗澡你自己的虚拟宠物。以下截图显示了开发者所动画的手绘图像：

使用的组件：时钟、TinyDB、图像、对齐、画布和声音

Loops

由意大利的安德烈亚·扎法迪开发，Loops在 2015 年 6 月的 MIT App of the Month 比赛中获胜。这是一款需要玩家在时间耗尽前旋转管道以形成闭合环路的益智游戏。游戏有 100 个难度级别。以下截图显示了游戏的不同阶段：

使用的组件：图像、玩家、时钟、声音、TinyDB、按钮、标签、滑块和对齐

Quartet

来自印度的阿伦·梅塔博士为他喜欢跳舞却讨厌数学的侄女创建了名为Quartet的应用。他想向她展示数学如何将运动转化为图形和音乐等事物。只需轻轻挥动手机，应用就会播放最多四种乐器（钢琴、排箫、弦乐和锡鼓）的音乐，同时显示动画图形。音乐可以通过简单的屏幕触摸来开始和停止。一个按钮显示供用户选择的乐器列表。如果只选择了一种乐器，应用将播放该乐器所有单个键的音。将手机以不同的模式移动将创造出新的音乐！

以下截图显示了应用播放音乐时的视觉效果：

使用的组件：加速度计、画布、球、图像精灵、按钮、标签、声音、玩家、对齐和动画

Brain Reaction Accelerator

由印度的梅格拉杰·辛格创建的Brain Reaction Accelerator是一款益智应用，提供在时间限制内解决的谜题。有五种游戏可供选择，包括Refocus、True Color、Quick Pick、Sum It Up和Expression Puzzle。与你的最佳得分或全球用户竞争。以下截图显示了从注册到选择和玩游戏的过程：

使用的组件：按钮、标签、对齐、列表选择器、文本字段、画布、图像精灵

ConstHelp – Contractor Tools

由来自美国的 Derek Drew 创建，Construction Calculator 是为建筑工地人员设计的工具。它执行单位转换，协助项目管理，提供待办事项列表管理器，并测量距离。它具有自动拨号功能，用于拨打客户或供应商的电话，但在开车前往或离开工地时包含自动文本功能以确保安全。以下截图显示了主屏幕、计算体积的屏幕和位置屏幕：

使用组件：按钮、标签、WebViewer、位置传感器、对齐方式、短信消息、列表选择器和文本字段

UMATI

2015 年春季，麻省理工学院的 Carolina Morgan、Fei Xu、Marcel Williams 和 Rida Qadri 为学生设计课程 11.S938: 群众参与城市——社交媒体、技术和规划流程 创建了移动应用程序 UMATI。该课程使学生能够与实际的规划和倡导组织合作，为规划问题开发数字技术解决方案。内罗毕的 Matatus 公交线路没有标准化。它们通常由私人司机根据个人喜好或交通状况随意创建和更改，很难知道哪些公交车行驶哪些路线以及公交车停靠的位置。麻省理工学院公民设计实验室、内罗毕大学、可持续城市发展中心和 GroupShot 帮助使用 GPS 创建地图，但麻省理工学院学生面临的挑战是保持地图的准确性和时效性。他们的解决方案使用 MIT App Inventor 创建 UMATI，一个众包应用程序，以追踪乘客的路线和停靠点。他们通过提供代币（称为 MaTokens）来激励乘客收集数据，这些代币可以在当地商家享受折扣。以下截图显示了主屏幕和“追踪我”屏幕：

使用组件：按钮、时钟、通知器、图像、标签、位置传感器、活动启动器、FusiontablesControls 和对齐方式

Ez School Bus Locator

由来自印度钦奈的八年级学生阿琼·桑托什·库马尔创建，Ez School Bus Locator 是一个位置追踪应用程序，允许学校、家长和学生通过语音激活或按键来监控校车的位置。学生在上下车时扫描二维码，这样家长就可以追踪孩子的上学和放学的路线。自动短信消息使家长保持知情。以下截图显示了主屏幕和位置追踪屏幕的两个视图：

使用组件：短信消息、GPS、地图、二维码、按钮、图像和对齐方式

青少年广播

这是一个允许播客听众对广播节目进行评分并提供反馈的应用程序。

青年广播电台是一家位于加利福尼亚州奥克兰的非营利组织。青年广播电台的项目通过教授广播新闻和科技技能，赋能年轻人创作媒体内容。学生们创建的许多播客在美国全国公共广播电台播出。为了与听众互动、开发相关内容并获得反馈，青年广播电台的学生们使用 MIT App Inventor 2 开发了一个移动应用程序，使听众能够对广播节目进行评分、添加评论以及提出未来主题的建议。

以下截图显示了听众与青年广播电台互动的不同方式：

所用组件：按钮、时钟、通知器、图像、相机、TinyDB、播放器、分享、标签、位置传感器、FusiontablesControls、对齐和媒体存储

Rover 800 Remote

Rover 800 Remote 应用程序是物联网的 MIT App Inventor 示例。来自英国的保罗·克莱门茨（Paul Clements）为他的汽车构建了一个蓝牙控制器，借助微控制器（传感器），可以控制车门锁、行李箱释放、燃油盖释放、喇叭和灯光。它还记住汽车的位置（如果可用），因此如果装有应用程序的手机不小心与钥匙一起锁在车内，另一部手机发送的短信可以解锁汽车。此应用程序可以修改用于各种车辆。以下截图显示了主屏幕、注册屏幕和概览屏幕：

所用组件：蓝牙、列表选择器、按钮、标签、图像和对齐

摘要

尽管这本书的大部分内容集中在学习使用 MIT App Inventor 编码上，但这一特定章节突出了参与移动应用程序开发过程中获得的许多其他学习成果。将应用程序概念转化为实际移动应用程序是一个具体且富有创造性的过程。对细节的关注和迭代对于代码和设计的有效协同工作至关重要。无论你是为与朋友一起玩的游戏、在校园内推广慈善参与的应用程序，还是在你所在的社区启动回收计划的应用程序，设计思维过程都是应用程序开发的一部分，就像编码一样。如头脑风暴、研究、访谈、综合、构思、故事板、设计、故障排除、问题解决和测试等技能不仅对构建应用程序至关重要，而且可以转移到其他学科，有助于在任何事业中激发创造力和流畅性。

现在你已经了解了 MIT App Inventor 以及你作为应用程序设计师和开发者的新角色，下一步将是学习如何设置 MIT App Inventor。让我们开始吧！

第二章：设置 MIT App Inventor 2

现在您已经了解了 MIT App Inventor 2，并且您已经了解了您作为应用开发者和设计师的新角色，让我们开始技术设置！MIT App Inventor 是一个免费的基于 Web 的应用程序，它运行在浏览器上，并将您的项目保存在云端。MIT App Inventor 的神奇之处在于您可以在开发的每个阶段实时测试您的应用。为了做到这一点，您需要设置连接性，包括下载软件以将您的计算机连接到您的 Android 移动设备或屏幕上的模拟器。

本章涵盖以下主题：

• 系统要求

• 设置 Google 账户

• 使用无线互联网（WiFi）将您的计算机连接到您的移动设备

• 使用 USB 线将您的计算机连接到您的移动设备

• 将您的计算机连接到屏幕上的模拟器

初始设置

要使用 MIT App Inventor，您需要一个连接到互联网的计算机、一个 Web 浏览器、一个 Google 账户、一部 Android 手机或平板电脑（如果您没有，您可以使用屏幕上的模拟器），以及一种将您的计算机连接到手机的方式（无论是通过 WiFi 还是 USB 线）。首次设置 MIT App Inventor 可能会有点令人畏惧，但如果您根据您的操作系统和您将如何连接（通过 WiFi、USB 线或模拟器）遵循步骤，它可以是一个直接的过程。并且记住，一旦完成技术设置，您就可以开始构建移动应用了！

系统要求

在本节中，我们将介绍您系统（PC、浏览器和 Android 设备）必须具备的推荐软件要求，以便无障碍地运行 MIT App Inventor。

计算机和操作系统要求：

• Macintosh（带 Intel 处理器）：Mac OS X 10.5 或更高版本

• Windows：Windows XP、Windows Vista、Windows 7、Windows 8 或 Windows 10

• GNU/Linux：Ubuntu 8 或更高版本，或 Debian 5 或更高版本（注意：GNU/Linux IDE 仅支持计算机和 Android 设备之间的 WiFi 连接）

浏览器要求：

• Mozilla Firefox 3.6 或更高版本（如果您使用 Firefox 并且已安装 NoScript 扩展，您将需要通过关闭扩展来禁用它）

• Apple Safari 5.0 或更高版本

• Google Chrome 4.0 或更高版本

• 注意：Microsoft Internet Explorer 不受支持

Android 设备（手机或平板）要求：

• Android 操作系统 2.3（姜饼）或更高版本

注册 Google 账户

如果您已经有一个 Google 账户（或 Google Gmail 账户），请跳转到以下部分：登录 MIT App Inventor。

MIT App Inventor 项目的登录认证和存储与 Google 账户相关联。因此，您需要设置一个账户。这是免费的！当您准备好将完成的应用上传到 Google Play 市场时，您也需要这个 Google 账户。您还有一个创建在线个人资料的选择，您可以将其设置为公开或私有。

注意

您可以创建带有或不带有 Gmail 电子邮件账户的 Google 账户。例如，一些学校系统使用带有 Google 账户的 Google for Education，但学生没有 Gmail 地址。

在荷兰，设置 Google 账户的最低年龄是 16 岁，在西班牙和韩国是 14 岁，在美国和其他所有国家是 13 岁。

在 accounts.google.com/signup 上注册 Google 账户。表单要求您创建用户名和密码；您将需要这些信息来使用 MIT App Inventor。虽然有一个输入手机号码的字段，但这不是必填项。然而，您需要输入电子邮件地址以完成设置。如果您没有电子邮件 ID，请请家长、监护人或老师填写一个。它用于安全目的，例如，帮助恢复忘记的密码。

登录 MIT App Inventor

一旦您设置了 Google 账户，您就可以在 ai2.appinventor.mit.edu/（或通过点击主页上的创建应用！按钮 appinventor.mit.edu/）首次登录 MIT App Inventor。两种方法都会将您带到 Google 登录屏幕。

如果您尚未登录 Google 账户，将出现一个登录屏幕，要求您输入用户名和密码。如果您之前已经登录了 Google 账户，您将看到以下消息：

MIT App Inventor 版本 2 的应用程序请求访问您的 Google 账户权限。请选择您想要使用的账户。

您的 Google 账户将出现在旁边的单选按钮旁边。点击允许按钮，或者如果您有其他账户，可以选择另一个账户。选项将如下所示：

登录后，您将被带回到 MIT App Inventor，新用户需要通过点击页面底部的按钮同意 MIT App Inventor 的隐私政策和使用条款，该按钮将如下所示：

接下来，您将被带到项目页面。一个弹出窗口将要求您完成一个简短的调查。您提供的信息是保密的，它将有助于研究并帮助 MIT App Inventor 团队改进其为全球用户的服务。调查是可选的；点击以下截图中的三个选项之一：

然后，您将看到一个类似于以下截图的弹出窗口：

当登录到 MIT App Inventor 时，此类信息窗口会定期出现（除非你通过点击不再显示复选框来取消选择），以提供我们开发者关于更新和发布的最新信息。它们还提供帮助你连接的链接。确保它们出现时阅读这些信息，以便你可以获取有关 MIT App Inventor 更新的相关信息。然后，点击继续按钮。

要创建你的第一个 MIT App Inventor 项目，请点击屏幕左上角的开始新项目按钮，如图所示：

一个弹出窗口（如图所示）将要求你命名你的项目。项目名称中不允许有空格：

输入名称后，点击确定按钮。你刚刚命名的项目将存在于顶部菜单栏中的项目和我的项目下（如图所示）：

恭喜！你现在已经在设计师窗口中（如图所示）；这是图形用户界面（GUI），你将在其中创建应用的外观和感觉：

你现在可以建立连接了！

如果在连接设置过程中任何时候你需要额外的帮助，请点击设计师窗口顶部菜单栏右上角的指南（如图所示）：

连接设置

这套说明适用于所有拥有安卓移动设备的用户，无论你将通过何种方式将此设备连接到电脑（WiFi 或 USB 线缆），以及无论你的电脑操作系统是 Mac、Windows 还是 GNU/Linux。如果你将使用屏幕模拟器，请跳转到“连接模拟器或通过 USB 线缆连接”部分：连接模拟器或通过 USB 线缆连接。

现在你已经完成了在 MIT App Inventor 中创建项目的初始设置，你几乎准备好创建应用了。但首先，你需要将你的电脑连接到你的安卓移动设备，这样你可以在构建应用时看到它的形状。为此，你需要免费的 AI2 伴侣应用。

下载 AI2 伴侣应用

你可以通过两种方式将 AI2 伴侣应用安装到你的安卓设备上：通过 Google Play 商店或直接下载。以下是两种方法的说明：

• Google Play（推荐自动更新）：如果你的设备已安装 QR 码阅读器应用，你可以扫描此 QR 码（如图所示）。它将带你到 Google Play 商店，你可以在那里将 AI2 伴侣应用下载到你的设备上。（如果你没有 QR 码阅读器，你可以在 Google Play 商店中免费找到它。）

  或者，您可以在设备上的网络浏览器中输入以下 URL 来通过 Google Play 商店下载 AI2 伴侣应用程序：

  play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

• 直接 APK 下载（需要手动更新）：如果由于某种原因您无法访问 Google Play 商店，您可以通过扫描以下二维码（见下图）直接在手机上下载应用程序（见下图）：

  或者，您可以在设备上的网络浏览器中输入以下 URL 来下载应用程序：appinv.us/companion。

注意，当直接下载应用程序（也称为侧载）时，您需要按照以下步骤操作：

1. 将您的设备设置更改为允许安装来自未知来源的应用程序。对于 Android 4.0 之前的版本，请转到设置 | 应用程序，然后勾选未知来源旁边的框。对于运行 Android 4.0 或更高版本的设备，请转到设置 | 安全或设置 | 安全与屏幕锁定，然后勾选未知来源旁边的框并确认您的选择。

2. 手动更新 MIT AI2 伴侣应用程序。由于您将不会从 Google Play 商店接收自动更新，每次您登录 App Inventor 并看到一个信息窗口弹出，指示 MIT AI2 伴侣应用程序已升级时，您需要通过重复直接下载（侧载）步骤来安装新版本。但首先，您必须卸载 MIT AI2 伴侣应用程序的旧版本。要卸载，找到您的手机上 MIT AI2 伴侣应用程序的图标，点击并按住它，直到您看到一个带有卸载选项的消息。点击卸载。

使用 WiFi 连接您的计算机和 Android 设备

这些说明适用于 Android 设备用户，他们将通过网络无线互联网（WiFi）连接到他们的计算机。

使用 MIT App Inventor 构建应用程序的有趣之处在于实时测试，即实时看到您的进度出现在您的移动设备上。为了确保 IDE 正常工作并自动更新您的设备上的应用程序；您必须确保您的计算机（运行 MIT App Inventor）和您的 Android 设备（运行 AI2 伴侣应用程序）连接到相同的 WiFi 网络。请在继续之前确保这一点。

在您的计算机上，在设计师窗口中，点击顶部菜单项连接，然后从下拉列表中选择AI 伴侣，如图下所示：

在您的计算机屏幕上会出现一个带有二维码和六位字符码的弹出窗口。

在您的移动设备上，通过点击应用程序图标启动 AI2 Companion。将出现以下选项：输入六位代码或扫描二维码：

• 使用二维码连接：点击您移动设备上显示“扫描二维码”的蓝色按钮。这将启动 AI2 Companion 应用中的二维码阅读器。将移动设备对准电脑屏幕上的二维码以自动扫描。

• 使用六位代码连接：只需将电脑屏幕上显示的六位代码输入到您移动设备上显示“六位代码”的白色文本框中（不要在键盘上按回车或 Enter 键）。然后，点击橙色按钮“使用代码连接”。

以下截图总结了连接步骤：

您电脑和移动设备上的代码

几秒钟内，您将在移动设备上看到设计窗口中的Screen1。

如果不是，请尝试以下故障排除选项：

• 您的设备可能未连接到 WiFi。请确保您在手机或平板电脑的 AI2 Companion 应用屏幕底部看到 IP 地址（参见前面的截图）。

• 您的移动设备和电脑可能连接的不是同一个 WiFi 网络。

连接模拟器或通过 USB 线连接

这些说明（步骤 1-4）适用于模拟器用户或通过 USB 线将电脑连接到移动设备的人。

如果您没有移动设备，请不要担心；您仍然可以使用屏幕上的模拟器测试您用 MIT App Inventor 构建的应用程序。它模拟了 Android 移动设备（尽管有一些功能无法测试，例如加速度计）。您可以使用模拟器与他人分享应用程序，甚至可以通过 Google Play Store。许多人就是这样构建应用程序的。

另一方面，您可能有一台 Android 设备，但您的学校或组织可能有防火墙阻止使用 WiFi。在这种情况下，您仍然可以通过使用 USB 线将电脑连接到您的移动设备来进行现场测试。

无论您是连接到模拟器还是通过 USB 线连接移动设备，都需要相同的软件和设置。

第 1 步 – 安装 App Inventor 设置软件

按照您电脑操作系统的说明进行操作。

为 Mac OS X 安装 App Inventor 设置软件

使用以下步骤在您的 Mac OS X 上安装 App Inventor 设置软件：

1. 通过appinv.us/aisetup_mac下载安装程序。

2. 双击下载的文件（很可能位于“下载”文件夹中）以启动安装程序AppInventor_Setup_v_X.X.dmg（其中X.X是版本号）。

3. 根据你的设置，你可能看到一个弹出窗口通知你文件无法打开（如下所示截图）：

4. 如果 MIT App Inventor 设置软件无法打开，请转到系统偏好设置 | 安全性与隐私 | 通用，然后点击如下所示截图中的仍然打开按钮：

5. 如果你的设置被锁定，你可能需要输入管理员密码才能进行更改。

6. 你将看到一个欢迎信息，如下所示截图。然后，点击继续按钮。

7. 读取并接受软件许可协议（未显示）。

   在标准安装屏幕（如下所示截图）上，点击安装：

   小贴士

   注意：不要更改安装位置。

   

8. 输入你的计算机密码以确认你想要安装软件（未显示）。点击确定。

9. 安装程序确认 App Inventor 设置包已安装（如下所示截图）：

根据你将如何连接你的计算机到你的设备，Mac 用户可以继续到步骤 3 – 打开项目并连接到模拟器或步骤 4 - 使用 USB 线设置你的设备。

安装 Windows 的 App Inventor 设置软件

这套说明包括第一部分和第二部分。

软件安装 – 第一部分

1. 在你的计算机上的网络浏览器中输入以下网址以下载安装程序：appinv.us/aisetup_windows。

2. 在你的下载文件夹或桌面上找到MIT_App_Inventor_Tools_2.3.0_win_setup.exe（约 80 MB）文件。你计算机上下载文件的存储位置取决于你的浏览器配置。

3. 双击文件打开。

4. 你可能会被询问是否允许来自未知发布者的程序对此计算机进行更改（如下所示截图）。然后，点击运行按钮。

5. 你将看到一个欢迎来到 MIT App Inventor 工具 2.3.0 设置窗口（如下所示截图）。然后，点击下一步按钮。

6. 读取并接受软件许可协议（如下所示截图）。然后，点击我同意按钮。

7. 在安装选项中进行选择。您可以选择是否为所有用户或单个用户安装设置工具。请注意，如果您选择所有用户，您将需要管理员权限（如图所示）。然后，点击下一步按钮。

8. 安装位置设置为默认位置，具体取决于您是以单个用户或所有用户身份运行 32 位或 64 位机器（如图所示）。然后，点击下一步按钮。

9. 选择安装组件。默认情况下，安装程序将安装设置工具，但您可以选择添加桌面图标（如图所示）。然后，点击下一步按钮。

10. 选择开始菜单文件夹。默认情况下，它设置为MIT App Inventor Tools（如图所示）。然后，点击安装按钮。

11. 您现在将看到一个进度条，显示正在安装的文件以及安装状态（完成百分比）。等待几分钟，直到此过程完成。

12. 安装 MIT App Inventor Tools 后，默认情况下最后屏幕将自动为您启动aiStarter程序。如果您不希望在此时启动它，请取消选中此选项（如图所示）。点击完成。

驱动程序安装 – 部分 B

如果您选择通过 USB 线将您的 Android 设备连接到 Windows 机器，那么您将需要安装特殊的 Windows 驱动程序软件。不同的设备可能需要不同的驱动程序。制造商通常创建并提供驱动程序。您可能需要在网上搜索以找到适合您的 Android 设备的适当驱动程序。

注意

更多信息和安装说明可在developer.android.com/sdk/win-usb.html和appinventor.mit.edu/explore/content/windows-drivers.html找到。

Windows 用户，继续进行第二步 - 启动 aiStarter。

为 GNU/Linux 安装 App Inventor 设置软件

您需要sudo（超级用户执行）权限来完成安装。

注意，设置程序是 32 位软件。如果您有一个 64 位系统，您可能需要安装允许您的机器运行 32 位软件的库。一种方法是运行以下命令：

> sudo apt-get install lib32z1

但是，这可能在所有 GNU/Linux 发行版上都不起作用，您可能需要针对您的特定系统对此进行一些调查。

可安装 Debian 包的系统说明（例如 Debian 或 Ubuntu）

1. 通过在电脑上的网络浏览器中输入以下网址下载文件：commondatastorage.googleapis.com/appinventordownloads/appinventor2-setup_1.1_all.deb。Debian 文件名为 appinventor2-setup_1.1_all.deb。下载文件在电脑上的位置取决于您的浏览器配置。通常，它将进入您的 下载 文件夹。

2. 如果您的系统可以通过点击包文件来简单地安装包，那么请这样做。

3. 如果您的系统不支持可点击的包安装程序，那么导航到文件所在的目录，并运行以下命令：

   > sudo dpkg --install appinventor2-setup_1.1_all.deb
   
   

4. 使用任何一种方法，您可能需要确保 Debian 文件及其所在目录对所有人都是可读和可执行的。在某些系统上，sudo 默认没有读取和执行所有文件的权限。软件将被安装到 /usr/google/appinventor。

5. 您可能还需要配置系统以检测您的设备。请参阅以下链接中的 Android 开发者说明：developer.android.com/guide/developing/device.html#setting-up。在 (#3) Set up your system to detect your device 下找到说明。前往以 If you're developing on Ub****untu Linux… 开头的第三点。

其他 GNU/Linux 系统的说明

1. 从以下链接下载文件：commondatastorage.googleapis.com/appinventordownloads/appinventor2-setup_1.1.tar.gz。文件名为 appinventor2-setup_1.1.tar.gz，它是一个 GZIP 压缩的 tar 文件。下载文件在电脑上的位置将取决于您的浏览器配置。通常，它将进入您的 下载 文件夹。

2. 通过首先解压缩文件，然后将 appinventor 目录及其内容复制到 /usr/google/appinventor 位置（使用适合您操作系统的适当方法）来安装文件。

GNU/Linux 用户继续进行下一步。

第 2 步 – 启动 aiStarter

此步骤适用于使用模拟器或 USB 线缆连接的 Windows 和 GNU/Linux 用户。使用模拟器连接的 Mac 用户可以跳到 Step 3 – opening a project and connecting to the emulator。使用 USB 线缆连接的 Mac 用户可以跳到 Step 4 – setting up your device with a USB cable。

启动 aiStarter

aiStarter 程序管理网络浏览器和 Android 设备之间的通信（注意，在 Mac 平台上，aiStarter 程序在登录时自动启动）。无论何时您在 GNU/Linux 或 Windows 机器上使用模拟器或 USB 线缆登录以使用 MIT App Inventor，您都需要启动 aiStarter 程序。

GNU/Linux 用户可以使用以下命令进行操作：

> /usr/google/appinventor/commands-for-Appinventor/aiStarter &

Windows 用户可以从开始菜单或通过双击桌面上的 aiStarter 快捷方式（如果您在 MIT App Inventor 设置工具安装过程中安装了它）来定位 aiStarter 程序。

为了方便，您可能希望设置此命令在您登录或系统启动时自动运行。具体方法取决于您使用的 GNU/Linux 发行版。如果您不熟悉，请查阅您发行版附带的文档。

继续进行下一步。

步骤 3 – 打开项目并连接到模拟器

此步骤适用于所有使用模拟器连接的用户，无论操作系统如何。所有使用 USB 连接的用户可以跳转到步骤 4 – 使用 USB 线设置您的设备。

由于您已经创建了第一个项目并为其命名，我们现在将连接模拟器以显示它。

在您的计算机上，在设计窗口中，点击顶部菜单栏上的连接，然后从下拉列表中选择模拟器。

将弹出一个窗口通知您模拟器正在连接。这可能需要几分钟。

模拟器最初将显示一个空的黑屏（#1）。等待直到模拟器准备好带有彩色背景的屏幕（#2）。背景出现后，您应该继续等待，直到模拟器完成其 SD 卡的准备；在准备卡的过程中，手机屏幕顶部将会有通知（#3）。连接后，模拟器将启动并显示您在 MIT App Inventor 中打开的应用（#4为空，因为目前新项目是空的）。

步骤 4 – 使用 USB 线设置您的设备

此步骤适用于所有使用 USB 线连接的用户，无论操作系统如何。

在您的 Android 设备上，前往设置 | 开发者选项，将其打开，并确保USB 调试已开启。

在大多数运行 Android 3.2 或更早版本的设备上，您可以在设置 | 应用程序 | 开发下找到此选项。

在 Android 4.0 及更高版本中，您可以在设置 | 开发者选项中找到它。

注意

在 Android 4.2 及更高版本中，开发者选项默认隐藏。要使其可用，请前往设置 | 关于手机 | 构建号，并连续点击构建号七次。返回上一屏幕，前往设置 | 开发者选项 | USB 调试，并点击它以启用它（在某些设备上，它可能列为准Android 调试）。

步骤 5 – 连接您的计算机和设备（如有必要进行认证）

这些说明从步骤 4 – 使用 USB 线设置您的设备继续，适用于所有使用 USB 线连接的用户，无论操作系统如何。

使用 USB 线将您的 Android 设备连接到电脑。确保设备连接为 存储设备（而不是 媒体设备），并且它没有作为驱动器挂载在您的电脑上。

小贴士

注意，如果设备已挂载，您可以使用以下说明找到卸载设备，但请确保您的设备通过 USB 线连接到电脑。

有三种方法可以卸载您通过 USB 线连接 Android 设备时挂载的任何驱动器。具体如下：

• 右键点击以弹出

• 点击它并将其拖到垃圾桶中

• 使用 Finder（在 Mac 上）或 我的电脑（在 Windows 上）并点击名称旁边的箭头

第一次将您的 Android 设备（4.2.2 及更高版本）连接到电脑时，您的设备上会出现一个弹出窗口，显示消息：允许 USB 调试？ 按 确定。这将验证电脑与设备，允许电脑与其通信。您需要为每个您想要连接到设备的电脑执行此操作，但每个电脑只需执行一次。

第 6 步 – 测试连接

这些说明从 第 5 步 – 连接您的电脑和设备（如有必要进行验证） 继续适用于所有使用 USB 线连接且无论操作系统如何的用户。

在您的移动设备仍然连接到电脑的情况下，前往 appinventor.mit.edu/test（这将在新标签页中打开您的浏览器）并查看是否收到确认，表明您的电脑可以检测到设备。如果测试失败，请访问 appinventor.mit.edu/explore/ai2/connection-help.html 并查看电脑的 USB 帮助（Windows 或 Mac）。在解决连接问题之前，您将无法使用 USB 线使用 App Inventor。

摘要

如您可能发现的，从您电脑上的 MIT App Inventor 网页应用建立与 Android 移动设备或屏幕模拟器的连接需要一些时间和耐心。但我们保证这是值得的。当您开始构建应用程序并看到它在移动设备（或模拟器）上的实时开发时，这不仅令人兴奋和满足，而且对于设计、故障排除和测试来说是必要且有帮助的。如果您遇到困难，您始终可以访问 MIT App Inventor 网站的帮助页面（[http://appinventor.mit.edu/](http://appinventor.mit.edu/））或在社区论坛中寻求帮助。现在技术设置已经完成，乐趣即将开始！让我们学习如何使用 MIT App Inventor 制作移动应用程序！

第三章。导航 App Inventor 平台

现在你已经创建了一个新项目并设置了连接，你准备好开始学习如何制作移动应用了！本章将提供一步一步的指南，通过构建一个名为 Fling 的游戏应用的过程来导航 App Inventor 网络应用。你将使用：

• 项目视图

• 设计师（一个图形用户界面）

  • 面板

  • 查看器

  • 组件

  • 属性

• 块编辑器（一种可视化编程语言）

• 集成开发环境（IDE）

项目视图

在第二章中，设置 MIT App Inventor 2，你第一次登录 App Inventor，创建了一个新项目，并为其命名，因此目前你只有一个 App Inventor 项目。一旦你开始构建更多应用程序，所有与你的 Google 账户关联的项目都将列在“我的项目”下。每次你登录 App Inventor，平台都会自动打开你最近工作的项目。要选择不同的项目，请点击顶部菜单栏中的我的项目，或者要开始一个新项目，请点击屏幕左上角的开始新项目。

创建新项目

我们将在本章中构建一个游戏。它将与 Pong 类似，但你会用手指来弹球而不是使用球拍。让我们创建一个名为Fling的新项目。请注意，不包含空格的项目名称必须以字母开头。只能使用字母、下划线和数字。点击屏幕左上角的开始新项目。会出现一个弹出窗口，如下面的截图所示。输入单词Fling。一旦你点击确定，你将被带到设计师界面。

如果你恰好已经在设计师中打开了一个项目，你仍然可以通过点击顶部菜单栏中列出的项目下的开始新项目来在这个视图中开始一个新项目，如下面的截图所示：

设计师

当你打开一个项目或开始一个新项目时，App Inventor 会带你进入设计师。这个窗口是一个图形编辑器，你可以通过选择组件（按钮、标签、图片等）、布局（水平/垂直对齐）、颜色、字体等方式来创建你的移动应用的外观和感觉。下一张截图是设计师的布局（包含一些有用的导航提示）：

打开项目的名称显示在左上角。在右上角，你会看到设计师和块编辑器（设计师按钮目前处于禁用状态，因为我们目前处于设计师视图）的切换按钮。设计师由五个面板组成，以下将逐一解释。

面板

调色板（位于前一个设计师图像的左侧列）包含一些抽屉，这些抽屉中存放着称为组件的工具集。抽屉根据类型如用户界面、布局、媒体、绘图和动画、传感器、社交、存储、连接性和乐高 Mindstorms对组件进行分组。记住哪个抽屉存放哪些组件以及它们的功能需要一点时间。关于组件的更多内容将在后面介绍！

查看器

查看器（位于前一个设计师图像的中间）是设计师窗口中间的白色工作区。当你首次创建项目时，默认的工作区名称是Screen1。你不能更改 Screen1 的名称，尽管你可以更改屏幕标题。这可以在属性面板中完成（如下所示）。新的屏幕名称将在查看器中显示，并被应用程序用户看到。稍后，你可能想要向你的应用程序添加更多屏幕，并且你可以重命名后续的屏幕。要构建你的应用程序，你需要将组件从调色板抽屉拖动到查看器中。在我们的 Fling 应用程序中，我们将使用视觉组件，因此当它们被拖动到查看器中时，它们将保持可见。在随后的章节中，我们将演示非可视组件的使用，这些组件在添加时不会保留在查看器中，而是位于查看器下方。

组件

组件位于设计师窗口左侧的调色板抽屉中（一旦我们开始构建应用程序，我们将演示不同组件的功能）。一旦组件被拖动到查看器中，它们也会出现在组件面板中（位于设计师图像的中间右侧）。组件面板列出组件，并按屏幕组织它们。你可以根据需要折叠和展开屏幕组件内容。组件按列列出，这样就可以很容易地看出它们是否独立存在或包含在其他组件中。

为了说明一些组件位于其他组件内部，组件面板将以嵌套（缩进）列表的形式显示它们。请注意，当你点击查看器中的组件时，它将在查看器和组件面板中突出显示，并在属性面板（在下一节中描述）中显示可编辑选项。相反，如果你在组件面板中点击一个组件，它也会在查看器中突出显示。一旦点击组件并使其变为活动状态，你可以通过点击重命名或删除按钮来重命名或删除它，或者你可以在属性面板中查看或编辑其设置。

属性

属性面板（位于前面设计师图像的右侧列中）显示了一组可配置的设置（例如大小、颜色和对齐方式），用于查看器中添加的每个屏幕和组件。在随后的章节中，你将添加越来越多的组件（和屏幕），所以在更改其设置之前，请确保正确地突出显示了项目。活动组件（或屏幕）的名称出现在属性面板的顶部（在早期设计师截图的属性面板顶部，活动属性是Screen1，如属性面板顶部所示）。

媒体

媒体面板位于组件面板下方（见设计师截图）。此功能允许你从你的电脑上传图片、声音文件或其他媒体文件到你的项目中。如果你在网上找到一个你想要在应用中使用但属于创意共享（免费共享，无版权）的图片，你必须首先下载它，然后点击媒体面板中的上传文件按钮（你不能直接从互联网下载图片到 App Inventor）。一旦文件上传，它将同时在媒体面板和属性面板中列出（要删除媒体文件，点击媒体文件名，将出现一个弹出窗口以删除文件）。请注意，尽管媒体文件也可以添加到属性面板，但它们不能从属性面板中删除。如何在应用中使用图片、声音或视频文件将在未来的章节中解释。

创建游戏应用

你已经使用你的谷歌账户登录了 App Inventor，创建了一个新的项目，将其命名为 Fling，并学习了如何导航设计师屏幕。是时候创建你的第一个移动应用了！

小贴士

由于这是一个教程，我们将解释如何玩我们的游戏。但是，如果你是从零开始创建自己的游戏，你想要确保你已经投入了时间、精力和努力来弄清楚你想要它做什么以及你想要它看起来像什么。我们在第一章中概述了移动应用创建的设计过程，使用 MIT App Inventor 2 释放创造力。现在可能是复习它的好时机。

Fling 游戏应用的目标是使用手指将移动的球体抛出，以防止它撞击屏幕底部并结束游戏。当点击播放按钮时，球体将从顶部开始向下移动。如果用户在将其抛出之前，球体撞击到屏幕底部边缘，游戏将停止，屏幕上会出现游戏结束通知。重置按钮将球体重置到屏幕顶部，播放按钮开始新一轮游戏。在这个游戏中，你将学习使用以下组件来设计用户界面：球体、画布（游戏板）、水平布局、按钮和标签。你将学习编程：

• 一个随机移动的动画对象（球体）

• 球体对屏幕触摸做出响应的条件

• 当球体触摸屏幕底部时，游戏结束的机制

• 游戏结束时显示游戏结束信息

• 一个按钮，通过将球体向下移动来开始游戏

• 一个按钮，通过将球体重新定位到屏幕顶部并擦除“游戏结束”显示来重置游戏

当你构建你的应用时，你将实时在你的移动设备或模拟器上看到你的进度展开，使用IDE（集成开发环境）。让我们开始吧！

在设计师中创建 UI

在一个新项目中，你首先会注意到 Screen1 自动存在于查看器中。如图下所示，Screen1 的名称出现在三个地方：在查看器中、组件面板和属性面板中。请注意，这也适用于任何添加到查看器的组件。当一个组件在组件面板中被突出显示（如图中用浅绿色框所示）时，你将在属性面板中看到与之对应的属性。虽然 Screen1 的名称不可编辑，但与 Screen1 相关的属性，如标题，尽管我们不会在 Fling 中更改 Screen1 的属性。

要为 Fling 应用创建游戏界面，我们将：

1. 将画布组件添加到Screen1。

2. 点击调色板抽屉：绘图和动画。它将展开以显示三个组件：画布、ImageSprite和球体。

3. 点击画布并将其拖动到查看器中，如图下所示：

你的设计师窗口将看起来像以下截图。画布组件将自动在组件面板中命名为Canvas1。如果你要添加另一个画布，它将自动命名为 Canvas2。虽然我们不会在这个教程中重命名 Canvas1，因为它已经有一个合适的名字。你可以看到它在查看器和组件面板中都是活动的（因为它被浅绿色框突出显示）。活动意味着你能够在属性面板中看到并编辑其属性。

画布将容纳我们的球体组件，因此我们需要将其大小调整为整个屏幕，而不仅仅是现在这样的一小部分屏幕。要更改画布的大小，转到属性面板并点击高度元素下方的白色文本框（目前填写着单词自动）。将弹出一个带有单选按钮的选择框，如图所示。点击填充父级旁边的单选按钮。点击确定按钮。

重复这些步骤来设置宽度。你会看到画布现在填满了整个查看器。接下来我们将更改颜色。在属性面板的顶部，点击背景颜色下方的单词白色。将出现一个颜色下拉列表（未显示）；选择灰色。设计师窗口现在应该看起来像以下截图，灰色画布填满了整个查看器。

接下来，我们将添加一个球体。回到绘图和动画资本调色板抽屉，点击球体，并将其拖动到查看器中的画布上，如图所示：

球体将落在画布上的任何位置，你在组件面板中可以看到它被命名为 Ball1。注意 Ball1 如何在组件面板列表中嵌套（缩进）。这是因为你将其放置在另一个组件内部，即 Canvas1。

你可以在属性面板中定位球体的起始位置、大小和颜色。由于Ball1已经处于活动状态，你可以开始编辑属性面板中的选项。将设置更改为与以下截图所示匹配。实际上，一旦我们开始编程，我们将改变球体的起始位置，但这只是为了让你熟悉属性面板中可用的功能。

接下来，你将在屏幕底部创建一个菜单栏。由于我们希望按钮在屏幕底部水平排列，我们将打开布局调色板抽屉。将水平排列拖动到查看器的底部，使其位于画布下方而不是内部。它应该看起来像以下截图：

您可以通过查看组件面板来了解您是否正确执行了此操作。HorizontalArrangement 应该在 Canvas1 所在的同一列中列出，而不是像 Ball1 那样缩进。如果它缩进了，这意味着 HorizontalArrangement 组件位于 Canvas 内部。我们不希望这样，所以如果它缩进了，请转到查看器，将HorizontalArrangement组件从Canvas中拖出，并将其放置在Canvas下方。要缩小 HorizontalArrangement 的大小，请在属性面板中编辑高度和宽度选项，使其与下面的匹配。有两种方法可以检查您是否正确执行了此操作。在查看器中，HorizontalArrangement 将在灰色 Canvas 下方创建空白区域，如图中所示。此外，在组件面板中，HorizontalArrangement 将与 Canvas1 对齐，如图中所示。如果您不小心将 HorizontalArrangement 放在 Canvas 内部，查看器中灰色 Canvas 下方将没有空白区域，并且 HorizontalArrangement 组件将缩进，并直接对齐在 Ball1 下方。

要调整HorizontalArrangement的大小，请在属性面板中编辑高度和宽度选项，使其与以下截图匹配：

接下来，将按钮从用户界面调色板抽屉拖动到Screen1底部的HorizontalArrangement组件中。按钮将显示为Button1 的文本，如图中所示：

注意

您可以通过查看您的屏幕是否与前面截图中的查看器相匹配来验证您是否正确执行了此操作。此外，在组件面板中，您将看到Button1将嵌套在HorizontalArrangement之下，因此将缩进。

IDE

在构建应用程序的任何阶段，您都可以在您的移动设备或模拟器上实时查看您的进度。您在构建应用程序时将想要使用此功能，这样您就可以在设计师中更改更改后立即看到更新，以跟踪您的进度，并查看您的应用程序在设备上的外观。由于我们已经做了一些更改，让我们现在连接，这样您就可以熟悉这个过程。由于您已经在第二章中完成了技术设置，即设置 MIT App Inventor 2，您可以轻松开始使用集成开发环境（IDE）。

对于拥有移动设备的用户：在设计师窗口的计算机上，转到顶部菜单栏，单击连接，然后从下拉菜单中选择AI Companion，如图中所示：

在您的计算机屏幕上会出现一个带有二维码和六位字符码的弹出窗口。在您的移动设备上启动 AI2 伴侣应用程序，并扫描二维码或输入六位字符码。请注意，要扫描二维码，您需要在您的移动设备上按蓝色按钮扫描二维码，然后将移动设备举到计算机屏幕上以捕获图像。使用您的移动设备扫描二维码后，几秒钟后会自动启动您的 Fling 应用程序。要使用代码连接，请在您的移动设备上的白色文本框中输入计算机屏幕上显示的六位字符码，然后点击橙色按钮使用代码连接以在您的移动设备上显示 Fling 应用程序。

对于没有移动设备的用户：在设计师窗口的计算机上，转到顶部菜单栏，点击连接，然后从下拉菜单中选择模拟器，如图所示：

模拟器将需要几分钟才能启动。您将看到有关进度和模拟器状态的弹出消息（要了解如何与模拟器连接，请参阅第二章，设置 MIT App Inventor 2）。

注意，在整个应用程序构建过程中，如果您遇到连接问题或连接模式变为灰色，您可能需要从下拉菜单中选择重置连接，如图所示：

点击重置连接后，连接选项将再次变为可点击。选择您之前使用的方法：AI 伴侣或模拟器（记住，为了 WiFi 连接工作，您的计算机和移动设备必须在同一 WiFi 网络上）。通过 USB 连接，请参阅第二章中的说明，设置 MIT App Inventor 2。

连接后等待几秒钟，您将看到以下图像之一（左侧是移动设备的截图，右侧是模拟器的截图）：

现在您已经将项目连接到您的移动设备或模拟器，您在计算机上所做的所有更改将自动更新到您的设备或模拟器上。这特别有用，因为您计算机屏幕上的组件在您的移动设备或模拟器上可能显示得略有不同。定期检查您的应用程序在移动设备或模拟器上的形状总是一个好主意。

让我们回到设计师界面。您可以通过编辑属性来更改Button1的外观和文本。将选项更改为反映以下截图：

注意你的移动设备或模拟器也会实时更新，并显示你刚刚对 Button1 所做的更改，如下面的图片所示（左侧为移动设备的截图，右侧为模拟器的截图）：

你现在将要向HorizontalArrangement组件中添加另一个Button。

当你从用户界面调色板抽屉中拖动Button时，App Inventor 会将此按钮命名为Button2，如下面的截图所示：

注意你的移动设备或模拟器也会实时更新，如下面的图片所示（左侧为移动设备的截图，右侧为模拟器的截图）：

当你拥有多个同类型组件时，或者要反映它们的功能时，始终重命名你的组件是一个好习惯。不久你的应用将会有多个按钮、屏幕等。所以，使用特定的名称是有帮助的。Button1是Play按钮，所以让我们相应地重命名它。点击Button1，使其在组件面板中高亮显示。然后，点击面板底部的重命名。一个弹出窗口将给你输入新名称的选项，如下面的截图所示：

你将在组件面板中看到新的名称。注意，App Inventor 将两个单词之间的空格转换成了下划线。

注意，如果我们之前在添加第二个按钮之前将 Button1 的名称更改为 Play_Button，当你拖出第二个按钮时，它将被命名为 Button1。这可能会造成混淆，所以始终将组件重命名而不是追踪它们的添加顺序是一个好主意，尤其是在这个例子中，Button1 并不是你第一个添加的按钮，而是第二个。

重复之前列出的步骤，将Button2重命名为Reset按钮。然后，根据以下截图编辑Reset_Button的属性：

注意

注意，虽然我们将Button组件的名称更改为Play_Button和Reset_Button，但按钮上的文本仍然是我们在文本字段中输入的内容：Play和Reset。

注意你的移动设备或模拟器也会实时更新。这是一个很好的例子，说明了为什么你想利用集成开发环境。正如你在之前的截图中所见，设计器中两个按钮之间出现了一个空格，但在移动设备（在这种情况下，是一个平板电脑）和模拟器上，没有空格，如下面的截图所示。通过在构建过程中持续监控你的应用在设备上的外观（以及后来的功能），你确保了在每一步都能让你的应用以你期望的方式显示和运行。

现在，我们将添加一个标签来显示一些文本（最终是得分）。转到用户 界面抽屉，并将一个标签拖放到水平排列上。您可以在菜单栏的任何位置放置它，但为了本教程的目的，我们将将其拖放到播放和重播按钮之间。调整标签属性，以便在下一张截图中反映出来，并将标签组件重命名为得分（注意，在文本属性下方，我们已经删除了标签 1 的文本，因此它看起来是空的）。

恭喜！您已经完成了 Fling 应用程序的用户界面设计！请注意，当按下任一按钮时，球体都没有发生任何变化。这是因为我们还没有编程组件的行为。接下来，我们将切换到积木编辑器开始编码。

积木编辑器

要切换到积木编辑器，请点击菜单栏右上角的积木按钮。

积木窗口有一个积木面板（左侧）、一个查看器（大型白色工作区）和一个媒体面板（在左下角）。媒体面板的操作方式与设计师相同，尽管我们不会在这个应用程序中使用它。

您在窗口左侧的积木面板中可以找到所有用于编程应用程序的工具。显示的小色块组成的第一个积木集称为内置（您将在构建我们的应用程序时了解这些）。在内置积木下方是关于您在设计师中刚刚添加的组件的积木。在组件积木下方是任何组件积木的列表。在本章中，我们将不会使用这些积木。

在积木编辑器中导航与设计师类似。当您点击积木面板中的任何积木时，会出现一个弹出抽屉，显示许多彩色的拼图状积木。您点击的积木将自动出现在称为查看器的白色工作区中。要编程您的应用程序，您需要将一个积木拖放到另一个积木上，并听到和看到它“咔哒”一声到位。

一旦您开始在查看器中填充积木，它可能会变得拥挤。有两种方法可以更有效地使用工作空间：使用底部和侧面的灰色滚动条，或者点击并拖动白色空间本身。一旦积木就位，这一点就会变得明显。

积木抽屉

当您点击积木面板中的任何积木类别时，会出现一个包含可用积木的弹出抽屉。以下截图显示了用于 Play_Button 组件的一些可用积木（灰色滚动条表示屏幕上显示的积木数量多于实际数量。您可以通过向下滚动查看其余的积木）：

积木类型

组件积木由不同类型的积木组成。对于这个应用程序，我们将使用三种类型的积木：事件、设置器和获取器。

• 事件块：它们是金色的，如果某个组件存在，它们将出现在任何弹出块抽屉的顶部。它们启动一个事件，例如when Play_Button.Click。要编程点击播放按钮时发生的事情，你可以拼接其他称为设置器和获取器的拼图块。

• 设置器：它们是深绿色或橙色的拼图块，上面写着“设置”，因为它们设置属性值。请注意，设置器在末端有一个开口。另一种类型的块，获取器，可以放入那个空间，因此设置器可以获取值。

• 获取器：它们是拼图块，可以放在设置器的末端。它们为设置器提供属性值。

内置块有多种不同的颜色和用途。我们将在使用时解释它们。

使用块编程 Fling

现在，我们将开始使用块来编写我们的应用程序。

播放按钮

在块面板中点击Play_Button以打开其抽屉。然后，点击下一张截图所示的最上面的金色when Play_Button.Click事件块。现在它将出现在查看器中。

当用户点击应用程序的播放按钮时，我们希望游戏开始，球开始移动。因此，我们需要编写这些步骤。

首先，我们将把球放在屏幕顶部，并让它向下移动到屏幕底部。但我们不想把它完全放在屏幕顶部，因为在下一章中，我们将编写我们的应用程序，这样每次球击中顶部边缘时，用户都会得一分。为了避免仅通过按下播放或重置来得分，我们必须将球放置在顶部边缘稍低的位置。为此，我们需要设置一对(x, y)值。x 值是球在屏幕上的水平位置，y 值是球的垂直位置。x 值定义为从 Canvas 左边缘的像素数，y 定义为从 Canvas 顶部边缘的像素数。我们决定不希望 y 为 0，因为球会接触到边缘，所以我们可以将 y 值设置为接近 0 的值，例如 2。我们可以将 x 值设置为 Canvas 宽度上的任何值。为了使游戏更具不可预测性，我们将编写应用程序以随机选择 x 值。然后，每次用户点击播放或重置时，球将在屏幕上的不同水平位置开始（尽管它始终从顶部开始 2 像素，因为我们设置了 y = 2）。为了设置球的起始位置，我们将从 Ball1 抽屉中选择一个块。

在块面板中点击Ball1。将打开一个包含Ball1所有可用块的抽屉。使用弹出抽屉右侧的灰色滚动条向下滚动，以跳过金色事件块。点击下一张截图所示的紫色过程块：call Ball1.MoveTo x, y：

紫色过程块现在将出现在 查看器 中 when Play_Button.Click 金色事件块的旁边。注意这个紫色块的形状如何适合在金色块内。继续将紫色块放入金色块中（通过用鼠标点击并拖动它）。金色块会扩展以容纳紫色块。你会听到并看到它“咔哒”一声到位，如以下右侧的截图所示：

我们知道我们希望 y 的值等于 2，所以我们将找到一个块（一个获取器）来获取这个值。点击 内置 部分的 数学 块。内置数学 块旁边有一个小蓝色方块。一个抽屉会打开，显示可用的蓝色 数学 获取器块。点击下一个带有 0 值的块，如下一个截图所示：

0 块将出现在 查看器 中，你可以将其拖动并吸附到 y 值上。点击 0 以突出显示它。你可以输入数字 2 将值更改为 2，如以下截图所示。接下来，我们将设置 x 值为随机整数。回到 数学 块，点击前面截图显示的最后一个块：1 到 100 的随机整数。将此块拖动到 x 值，如以下所示：

由于用户将使用不同屏幕尺寸的移动设备，我们不知道宽度将是 100 像素还是 350 像素。因此，为了使游戏能够在不同尺寸的屏幕上播放，我们可以删除具有 100 值的 数学 块，并插入一个获取器块来获取用户使用的移动设备的屏幕宽度。要删除蓝色 100 块，点击它以将其轮廓突出显示为黄色。一个小手图标会出现。这表示你可以将块从插槽中拖出，如以下截图所示：

注意，如果你没有看到手图标，这仅仅意味着你点击了实际的数字而不是块。这会通过数字右侧的光标和一小块空白来表示。再次点击实际的蓝色数字拼图部分，你会看到手图标，这将允许你拖动块出来。

要删除此块（或任何不需要的块），点击它（如果它尚未突出显示为黄色），然后在电脑键盘上按 Delete。或者，你可以将块拖动到查看器的右下角，将其扔进垃圾桶。将块悬停在垃圾桶上，盖子会打开。当你释放块时，它会消失。你会看到它逐渐消失并听到折叠的声音。

要添加表示用户屏幕宽度的模块，请点击屏幕 1在模块调色板中，并从抽屉中选择屏幕 1.Width。它将在底部附近，因此您可以使用灰色滚动条向下滚动以找到它。

注意，要将此模块放入另一个模块内部（无论是一个方程还是单个模块），请将模块左侧的小拼图针与模块开口左侧的针孔空间对齐，它将轻松地卡到位。您的模块应该看起来如下：

每当用户按下播放按钮时，球将被定位在屏幕宽度上的不同位置，并且距离屏幕顶部2像素。

现在我们已经定位了球，接下来我们将编程使其移动。

移动球

由于我们已经编程使球从屏幕顶部开始，我们希望球向下移动。而不是每次都直接垂直下落或以相同的角度下落，我们可以设置角度为随机值。一个圆有 360 度，但我们只想让球在特定的角度范围内下落，这些角度表示向下，适合屏幕宽度，但不在屏幕边缘。下面的图示显示了右侧边缘是0度，左侧边缘是180度。我们感兴趣的实际空间是下半部分，即180到360度之间的角度。由于我们不希望球沿着边缘移动，我们将在选择数字时消除两个极端。我们决定选择200到340度之间的角度。我们将编写应用程序，使程序在球移动的角度范围内选择一个随机数字。

您已经从我们之前的模块中学习了如何编程随机整数，现在让我们重复这些步骤。前往数学模块，并选择蓝色从...到...的随机整数模块。您也知道如何填写这些数字。为了复习，请选择数学模块中最上面的蓝色模块：带有0的模块。您可以在其中输入200，然后通过点击它来突出显示并复制粘贴该模块（确保它有一个黄色的轮廓）。如果您不想复制粘贴，您始终可以拖出一个另一个数学 0模块。点击复制的模块中的数字并输入340。然后，将200模块放入从位置，将340模块放入到位置。

我们的从...到...的随机整数模块需要放置在某个位置，它将提供哪些信息？另一种问法是：哪个模块将获取这些信息？如果您猜对了球体，您是正确的！球体需要这些信息来知道它必须移动的角度。因此，我们需要找到代表球体方向的球体模块。这个模块被称为Ball1.Heading，它代表球体移动的度数。点击Ball1模块抽屉以找到深绿色的Ball1.Heading模块（您需要滚动过金色和紫色的模块才能找到它）。一旦它在您的查看器上，将其与您刚刚创建的蓝色从...到...的随机整数模块连接起来。然后，将这些连接的部件插入到金色当 Play_Button.Click模块的底部。现在，您的模块应该看起来像以下截图：

现在我们已经知道了球体的位置和它前进的方向（以度为单位），我们需要编程让它实际移动。为此，我们首先将球体设置为启用状态。从Ball1模块抽屉中，选择深绿色的设置 Ball1.Enabled模块。然后，从逻辑模块抽屉中，选择顶部的浅绿色true模块，如图下截图所示：

将true模块插入到设置 Ball1.Enabled模块中，并将它们添加到当 Play_Button.Click事件底部，如图下截图所示：

现在球体已经准备好移动，我们可以通过设置速度和间隔来移动它。回到Ball1模块抽屉，选择深绿色的设置模块，设置 Ball1.Speed。接下来，从同一个抽屉中，选择设置 Ball1.Interval。

间隔是球体移动的时间，以毫秒为单位（1000 毫秒=1 秒），速度是球体在该时间段内移动的像素数。玩弄这些数字以查看您可以使球体移动多快或多慢很有趣。我们决定让球体每50毫秒移动10像素，因此我们将编程模块设置为如下所示：

将这些模块插入到当 Play_Button.Click事件底部。您的模块将类似于以下截图：

到目前为止，我们的应用程序是这样做的：当Play按钮被点击时，它将球体移动到距离屏幕顶部边缘2像素的位置，并随机移动到屏幕左侧边缘1像素和右侧边缘之间的任意位置。它将以10像素每50毫秒的速度在200到340度之间的随机方向滚动球体！

投掷球体

游戏的目标是将向下移动的球抛离底部边缘，因为如果球掉落到屏幕底部边缘，游戏将结束。接下来，我们需要编写这些事件。

首先，让我们编程应用来抛掷球。

球如何知道手指触摸它以及如何移动到另一个方向（不是向下）？我们可以通过使用Ball1块抽屉中的when Ball1.Flung块来编程这些事件。点击这个金色事件块将其添加到查看器中。你可以让球以任何你喜欢的速度移动，但我们将保持相同的速度，只是方向不同。为此，你可以从when Play_Button.Click事件复制并粘贴set Ball1.Speed to和set Ball1.Interval to块（注意当你点击深绿色设置块并复制粘贴时，附加的蓝色获取块也会复制粘贴）。将这些块添加到when Ball1.Flung事件，使其类似于以下截图：

接下来，我们将调整球的方向使其向上移动（当用手指抛掷时）。我们可以将航向设置为 10 到 170 度之间的任意度数（见图片 #39）或者我们可以用一个方程使球向上移动。让我们更多地练习方程。复制并粘贴set Ball1.Heading块从when Play_Button.Click事件（记住航向块决定了球移动的角度）。将其拖到when Ball1.Flung事件的底部。我们希望球移动的方向与它原来的航向相反，而不是一个随机的整数，因此你可以通过突出显示并按键盘上的delete键或通过点击蓝色块并将其拖到垃圾桶中来删除附加的蓝色块。为了使球向相反方向移动，我们将当前球的航向（方向）从 360 度（可能的总度数）中减去。为了编写这个代码，从Math Blocks抽屉中选择减号块。在第一个空白处，添加数字360。从when Ball1.Flung事件复制并粘贴50蓝色块，并将数字更改为360。将其插入减号左侧的空白处。

接下来，从Ball1块抽屉中选择浅绿色获取块，Ball1.Heading。将其插入减号右侧的空白处（将块尖与空白尖对齐）。这是我们编写的代码：当球被触摸并抛掷时，程序将球的航向（或方向）移动到 360 度减去旧的方向（或航向）。你的块将看起来像下一个截图：

结束游戏或使球弹跳

现在播放按钮开始使球向下移动，用户可以将其抛向不同的方向，我们想要编程以下动作：

• 当球触碰到底部边缘时结束游戏

• 球从左边、上边和右边弹跳

我们可以使用 if/then 块来编程这些操作。如果球碰到底部边缘，那么球将停止，游戏将结束。如果球碰到其他边缘，那么球将弹回，游戏将继续。

让我们先编写程序，当球碰到底部边缘时停止并结束游戏。App Inventor 使这变得很容易。转到 Ball1 块抽屉，并点击 when Ball1.EdgeReached 事件。一旦事件块出现在查看器中，将鼠标悬停在块的左侧浅橙色单词 edge 上（不要点击），您将看到一个弹出窗口，如下一张截图所示。选择顶部深橙色 get edge 块。这是一个变量。将其放在一边；我们将在一分钟内使用它。

我们将在 when Ball1.EdgeReached 事件内部添加一个 if then 事件。但首先我们需要配置它。转到最顶部的 Blocks 抽屉，称为 Control，并点击第一个金色 if then 块。

当块首次出现在您的 Viewer 中时，它将看起来像以下图片中的 步骤 1。如果您点击左上角的蓝色颜色方块，将出现一个弹出窗口。将光标移至弹出窗口左侧的底部 else 块，点击它，并将其拖入弹出窗口右侧的 if 开口中，如 步骤 2 和 步骤 3 所示。一旦 else 块就位，您将看到原始的 if then 事件块变为 if then else 块。您将看到 else 现在已添加到块的底部，如 步骤 3 和 步骤 4 所示：

将此 if then else 块添加到 when Ball1.EdgeReached 块的内部，如以下截图所示：

注意

注意我们放在一边的获取边缘块周围有一个感叹号和三角形的错误消息。这是一个错误消息警报，提示您该块未连接，需要设置器块。

要编程，如果球碰到底部边缘，那么球将停止，游戏将结束。我们将使用 math equals 块。它是 Math Blocks 抽屉中从上数第二个，如下一张截图所示：

在等号左侧的第一个开口内，添加我们之前放置的深橙色 get edge 块。您会注意到，直到我们将数学块与 if 块连接到位，警报将一直保留在这个块上，我们将在不久后这样做。

在下一张图片中，您将看到每条边都由一个数字表示：

由于底部边缘等于-1，向此等于块添加一个数字数学块，并输入数字-1。将蓝色数学块拖入if块，如下所示（并且你会看到警报消失）。

当达到底部边缘时，我们希望球停止，游戏结束，应用程序显示文本游戏结束。我们已经知道如何使球移动：我们将属性启用设置为true。因此，现在我们想要球停止或不动，我们必须将启用属性设置为false。在Ball1块抽屉中，选择设置 Ball1.Enabled 为，然后在逻辑块抽屉中选择false块。将这组块滑入if then else块的then空间，如下所示。

接下来，我们将编程应用程序显示表示游戏结束的文本。我们将使用我们命名为Score的标签（在下一章中，我们还将使用此标签显示分数）。转到Score块抽屉，并选择深绿色设置 Score.Text to块，如下面的截图所示：

此设置块需要获取一些文本，因此我们将添加一个获取文本块。转到粉红色的文本块抽屉，并选择第一个块，它是一个带有引号的空格，如下面的截图所示：

您将添加此粉红色文本块到设置 Score.Text to块，并将其插入then事件中的设置 Ball1.Enabled to块下方。单击粉红色文本块并键入单词游戏结束，如下所示：

我们已经编程了应用程序，如果球击中底部边缘，它将停止移动，标签将显示文本：游戏结束。

最后一步，else块，是在球击中除-1（底部）之外的边缘时使用。如果球击中任何其他边缘，我们希望球从边缘弹回，游戏继续。为此，我们将使用紫色的调用 Ball1.Bounce块。我们将使用之前使用的相同橙色获取边缘块，但这次我们不会指定特定的边缘。球接触的任何边缘（除了底部边缘）都会使球弹起。复制并粘贴获取边缘块，将其添加到紫色调用 Ball1.Bounce块中，并将其插入else槽中，如下所示：

将else视为表示否则。如果球击中等于-1的边缘，则执行then代码，否则执行else代码。换句话说，如果if选项不满足（如果球没有击中-1边缘），则程序将跳过then并跳转到else。

以下是我们应用在球击中底部边缘、停止并显示游戏结束时的截图。

重置按钮

本章我们将要做的最后一件事是配置重置按钮。当球击中底部边缘后，游戏结束，此时会按下重置按钮。它不像播放按钮那样启动游戏；它仅仅是将球重新定位到屏幕顶部，并使屏幕上的游戏结束文本消失（标签）。

进入重置按钮块并选择金色的当重置按钮点击事件。我们想要将球从屏幕底部移动到顶部。我们已经知道如何做，因为我们为播放按钮做了这件事。你可以复制并粘贴球 1 移动到紫色块（当你点击紫色块并复制粘贴时，它将自动复制并粘贴附带的蓝色x、y、获取器块）。将你的块添加到当重置按钮点击事件中，你的块将看起来像以下截图：

这些方块将球重新定位到屏幕顶部（到一个随机的x位置），但游戏结束文本仍然会显示。为了使重置按钮擦除这个文本，我们将简单地将得分文本设置为空白文本而不是游戏结束。从当球 1 边缘到达事件块中复制并粘贴深绿色的设置得分.Text块（复制并粘贴绿色的设置器块也会复制并粘贴粉色的文本块）。点击游戏结束文本并按删除，使文本区域为空。将这组块添加到当重置按钮点击事件块的底部，如下所示：

以下是在按下重置按钮后我们应用的截图。它显示了球在屏幕顶部，以及之前游戏结束文本出现的地方的空白区域。

我们的第一版 Fling 应用现在完成了！我们设计和编码了 Fling 应用，所以当点击播放按钮时，球会随机定位到屏幕顶部并开始滚动向下。用手指弹球会使球向相反方向移动。球会从所有边缘弹起，除了底部。当球击中底部边缘时，它会停止，应用会显示游戏结束。重置按钮将球重新定位到屏幕顶部的随机位置。此时，你可能已经或还没有发现我们有一个 bug！它与播放和重置按钮有关。我们将在下一章揭示并修复这个 bug。

概述

哇！在本章中，你已经对 App Inventor 平台有了很多了解，并且你已经构建并编写了你的第一个应用程序！这是一个巨大的成就！但是，正如你可能已经注意到的，我们有一个问题需要解决。我们将演示如何调试你的第一个错误，以及如何添加更多功能。实际上，这仅仅是你的移动计算冒险的开始。还有更多需要学习和创造的东西！我们的 Fling 应用程序功能齐全且简单，但我相信你能想出无数更多功能来增强它。在下一章中，你将学习如何通过创建一个在球触碰到顶部边缘时显示的计分机制，允许球只从屏幕的下半部分发射，以及创建关卡和提高球的速度来扩展应用程序的复杂性

通过学习如何向现有应用程序添加更多功能，你将获得开发多个版本的经验。这个过程就是开发者经常做的事情。最终，一旦你在像 Google Play 这样的应用市场中发布你的应用程序，新版本将作为更新发布。

让我们把我们的游戏提升到下一个层次！

第四章。Fling 应用 – 第二部分

在第三章，“导航 App Inventor 平台”，你通过创建你的第一个完全功能性的移动应用学习了如何使用 MIT App Inventor 设计器和块编辑器！在本章中，我们将向你展示如何通过添加更多复杂的功能来扩展基本的 Fling 应用。我们将演示如何启用：

• 当球触碰到顶部边缘时显示的得分机制

• 代码，因此球只能从屏幕的下半部分抛出

• 通过增加球速来增加难度级别

我们还将开始调试。调试是应用开发中的标准实践，应将其视为流程的一部分，而不是消极的东西。

每次你向你的应用添加新组件时，我们鼓励你与他人分享你的应用以获取反馈。这不仅会给你的设计提供想法，而且还会帮助你了解用户对应用游戏的需求。一旦你开始从头设计应用，此类信息将非常有价值。本章不仅将帮助你发现增强游戏应用的新方法，还会激发新的创意路径！到本章结束时，你的 Fling 应用将类似于以下图像：

添加得分功能

由于大多数游戏应用都包含某种得分功能，因此我们将此代码添加到我们的 Fling 应用中。得分将显示在同一个标签上，该标签也会显示游戏结束文本。

编码得分块

我们在上章中留下了球从所有边缘弹回，除了底部边缘。现在，我们想要编程应用，以便每次球达到顶部边缘时增加一分。我们将使用另一个if/then块，并将其添加到when Ball1.EdgeReached事件中现有的if/then/else块的else部分，如图所示：

你能猜到哪个块可以放入if的开口吗？如果球击中顶部边缘，则应用将增加1分。在第三章，“导航 App Inventor 平台”，你学习了底部边缘由-1（顶部边缘由 1 表示）。由于我们已经为球击中底部边缘创建了一个 if/then 场景，因此我们可以复制这一组块，并调整它以适应球击中顶部边缘。

从现有的if块中复制蓝色块（注意，通过复制蓝色块，你也将自动复制嵌入的橙色获取边缘块和蓝色-1数学块）。将这些粘贴的块放入新的if块中，并将-1更改为1，如图所示：

我们已经编写了代码：如果触及顶部边缘，会发生什么？我们希望应用记录一个分数。要编写得分功能，我们首先创建一个全局变量。全局变量是任何块都可以使用的值，而局部变量是只能由为其设计的特定块使用的值。转到变量块抽屉并选择橙色，初始化全局名称到块。

点击名称并更改文本为分数。接下来，在数学抽屉中，选择0蓝色数学块。将其连接到初始化全局分数为块。你的块现在将如下面的截图所示。请注意，这个初始化全局名称块不适用于任何其他块；它独立存在，并附有数学0块。

通过将全局变量设置为0，实际上，我们已经建立了要设置的初始分数为0。现在，我们可以编程应用将1加到这个分数上。返回到变量块抽屉并选择设置为块。点击块中间的小箭头并从下拉菜单中选择全局分数（现在我们可以选择，因为我们创建了全局变量）。将块插入到如以下截图所示的空然后槽中：

你将把一个数学块插入到设置全局分数为块中，因为每次顶部边缘被触及时，我们都会想要获取当前的分数（在这种情况下，0）并将其加 1。因此，我们需要如以下截图所示的蓝色数学加法块：

第一个空格将填入一个橙色获取全局分数块，在加号后的第二个块中，将有一个填入1的数字块，如下面的截图所示。有两种方法可以找到获取全局分数块。一种是在变量抽屉中。点击“获取到”块，然后点击向下箭头从下拉菜单中选择全局分数。或者，你可以悬停（不点击）在初始化全局分数块上，将同时出现一个设置和获取全局分数块。选择获取全局分数块。我们之所以使用获取全局分数块而不是 0 块，是因为我们想要将 1 加到最新的分数上。游戏开始时，分数是 0，但一旦球击中顶部边缘，新的全局分数将是 0+1，然后 1+1（以此类推）：

因此，我们现在已经创建了每次顶部边缘被触及时更新分数的代码。但我们还没有创建显示分数的代码。让我们接下来做这件事。

更新分数标签

查看以下截图中的第一个然后部分中的方块，并注意我们的分数标签名称的变化。由于分数标签将显示分数和等级，我们决定在标签名称中明确这一点。在设计师中，我们将标签从分数重命名为 Score_Level_Label。这个更改也在方块编辑器中更新。方块名称最初是，将分数的文本设置为现在是，将 Score_Level_Label.Text 设置为。方块抽屉也进行了更新。我们在开发过程中展示这个编辑，因为有时候，无论你的应用构思多么周全，你可能在开始编码时发现改进它的方法。更改标签名称并不一定是我们应用功能的核心，但它有助于我们在设计中更加清晰。

由于标签现在将显示分数和等级，我们需要编写相应的代码。从 if/then/else 块中复制绿色的设置 Score_Level_Label.Text 为方块。因为它还会复制粉色的“游戏结束”文本方块，你可以简单地删除这个方块，因为我们不需要它。相反，进入粉色的文本方块并选择连接方块，如下面的截图所示：

我们需要这个方块来设置标签文本以显示信息：分数和等级。如果你这么想，我们不能只显示两个数字，因为用户不知道它们代表什么。我们必须显示：单词分数和实际的分数（无论是什么数字）以及单词“等级”和实际的等级（无论是什么数字）。首先，我们将只添加两个东西，单词分数和实际的分数。你可能可以猜到，第一个连接到连接块的方块是另一个空白文本方块。输入单词分数：冒号后面有一个空格（因此单词和分数数字之间会有一个空格）。第二个方块是橙色获取全局分数方块。

增加难度

如果你停下来思考我们目前的应用，作弊会非常容易！用户只需将球保持在顶部边缘附近，轻轻一扔就能获得大量分数！如果你想让用户得分更难，我们将向你展示一种增加难度的方式。另一方面，如果你是为年轻用户制作这个应用，并希望他们容易得分，那么你可以跳过这一部分。

改变游戏动态

就目前游戏而言，球正在向下移动，并且每当您的手指触摸它时，它将向另一个方向（确切地说，是 360 度减去它原来的方向）被抛出。我们可以编程应用程序，使球仅在它位于屏幕中间下方时响应抛出。你能猜到我们可能会如何编程吗？如果你猜到使用if/then块，你就对了！如果球位于屏幕中间下方，那么它可以被抛出。

目前，我们的块看起来如下所示：

我们希望告诉应用程序首先检查并查看球是否位于屏幕中间下方。如果您记得，当我们使用Screen1.Width块时，我们已经编写了类似的内容。由于我们不知道每个用户的屏幕尺寸，所以我们不能直接输入一个特定的数字并将其除以 2。但我们可以使用Screen1.Height块来获取用户的屏幕尺寸，并将其除以 2。在第三章中，导航 App Inventor 平台，您也学习了x用于表示宽度，y用于表示高度。x和y的值从屏幕左上角的0开始。因此，我们将使用表示高度的y变量。我们知道y从上到下逐渐增大。因此，我们希望使球在y大于屏幕尺寸除以2时可以被抛出。例如，假设屏幕的高度为100（顶部值为0，底部值为100）。如果球在y = 51的位置，它将正好在中间下方。因此，它将被启用以被抛出。

要开始临时编写此场景的代码，请从当 Ball1.Flung 事件块中移除set Ball1.Heading及其相关块。向if开孔添加一个if/then块和一个大于 Math块（选择等于 Math 块，然后通过点击块中央的向下箭头从下拉菜单中选择大于符号），如图所示：

接下来，将鼠标悬停在带有变量y的浅橙色框上（不要点击），该框位于当 Ball1.Flung 事件块中。这将弹出一个窗口。选择顶部的选项，获取 y，如图所示：

将获取 y块插入大于符号之前的第一空位。请记住，我们不会在第二个空位中添加一个数字，而是一个屏幕高度除以 2 的等式。

在第二个开口处，插入另一个Math块——这次是一个除法Math块，因为我们希望y值大于屏幕高度除以2。从Screen1块抽屉中获取Screen1.Height块，从Math抽屉中获取number块，并将值改为2。将Screen1.Height块插入到Math除法块的第一个开口中，将数字 2 块插入到除号之后的开口中。

将你之前移除的Ball1.Heading块重新插入到if/then块的then开头，如图所示：

现在，我们的应用会检查球的高度值是否低于屏幕中间点。如果是，则球会按照我们的公式360 - Ball1.Heading指示的方向被弹射出去。如果不是，则不会发生任何事。

创建级别

计算机游戏通常包含多个级别，游戏的难度会随着玩家得分的增加而逐渐提升。这就是游戏之所以有趣、具有挑战性，甚至有些上瘾的原因。我们希望在游戏中也加入级别系统。

让游戏难度逐渐增加的一个简单方法是在玩家继续得分时增加球的速度。你可以创建任何你喜欢的层级，但为了本教程的目的，我们将创建一个简单的层级系统：每当玩家得分 5 分，玩家就完成了一个级别。再次强调，为了保持简单，当完成一个级别时，我们不会暂停游戏（这在大多数计算机游戏中很常见）。玩家将自动进入下一个级别，球的速度也会相应增加。

为了确定是否需要更改级别，我们将编写代码让应用不断检查得分的值。每次得分增加时，应用都会检查它是否是 5 的倍数（例如，得分=5、10、15、20 等等）。如果得分确实是 5 的倍数，这意味着玩家又得了 5 分，应该发生级别更改。为了更改级别，我们只需稍微增加速度即可。

如本章前面所述，事件Ball1.EdgeReached包含增加得分的代码：set global score to块。每当得分增加时，标签会更新以显示新的得分（之前的得分加 1）。正如你在下面的屏幕截图中所看到的，得分增加块之后的块是set Score_Level_Label.text to块，用于更新显示的得分。

现在，我们将在set Score_Level_Label.text块之后立即添加一个if/then块。你还记得在哪里可以找到if/then块吗？

现在，让我们思考一下我们想在if旁边的空槽中插入的条件。我们想检查并查看分数是否是 5 的倍数（如果是 5 的倍数，则余数将为 0）。为了做到这一点，我们需要完成以下步骤：

1. 获取分数的当前值。

2. 将其值除以 5 并计算余数。

3. 检查余数是否等于 0。

为了完成这三个子任务，我们首先获取get global score块，就像我们使用这个块来增加分数时做的那样。这个块可以从Variables块中选择，也可以从你当前的块集中复制。这完成了任务 1。

接下来，我们将从Math块下面获取块的余数。这一步并不明显。当你进入 Math 块时，你不会看到任何余数块。相反，选择modulo of块，如下面的截图所示：

点击modulo of右侧的向下箭头，从下拉列表中选择remainder of。模数、余数和商是与除法相关的不同数学运算。因此，它们都属于同一个块。将get global score块放入remainder of块的第一个插槽中。由于我们想计算分数除以 5 的余数，将数字5放入remainder of块的第二个插槽中（即插入一个 Math 数字块并将值从 0 改为 5）。这完成了第二步。

最后，我们想检查这个余数是否等于 0。如果它等于 0，那么是时候增加等级（速度）了。如果不等于，等级（速度）将保持不变。为了检查数字的相等性，我们需要从Math块中获取一个equal to块。将我们在第二步中创建的remainder of块（及其伴随的get global score / 5块）插入到equal to块的左侧，并将数字0插入到右侧。以下截图显示了连接到if语句的完成步骤：

放在if/then语句的then部分中的块仅在将条件连接到if语句时执行。在这种情况下，当分数是 5 的倍数时（即整个余数等于 0 且 if 块评估为真），我们希望增加速度。我们需要从 Ball1 抽屉中获取两个块。第一个块，Ball1.Speed，给出了Ball1的速度属性的当前值。第二个块，set Ball1.Speed，让我们改变速度。

由于我们想相对于当前速度增加速度，我们将使用这两个块：

1. 使用Ball1.Speed来获取当前速度。

2. 通过增加Ball1.Speed值来增加一小部分。

3. 使用结果来设置新的速度。

要完成这些步骤，需要从Math块拖动一个add块并将其连接到set Ball1.Speed块。将Ball1.Speed块插入加号左侧的开口，并在加号右侧的开口插入一个设置为 2（我们增加速度的小量）的number Math 块。这完成了任务 1、2 和 3。最后，我们将块放入如下截图所示的then块中：

总结来说，每当用户得一分时，新的分数将被计算。然后，应用将检查新的分数是否是 5 的倍数。如果是 5 的倍数，应用将略微增加速度以使游戏更难。如果分数不是 5 的倍数，则没有任何变化；速度将保持不变。

我们已经完成了应用等级部分的编码！你能想到还缺少什么吗？我们需要在标签中显示新的等级！

更新分数标签以显示等级

在我们的游戏中，我们有一个标签显示分数或单词"Game Over"。现在我们已经实现了等级，我们还想在标签中显示等级。

如以下截图所示，我们使用了join块将两块信息连接起来并在标签中显示——单词Score:（冒号后有空白）和分数的值。现在我们想要显示等级，我们将向这个join块添加三个更多信息。在分数（值）之后还有一个空白，然后是单词"Level: "（这里也有一个空白），最后是等级的值。

为了为这三个新信息腾出空间，我们需要向现有的join块添加字符串。点击join块左上角的蓝色方块。这将打开一个弹出窗口。在这个弹出窗口中，从左上角拖动string块到右侧的join块中。这样做三次。每次添加另一个string，你将在get global score块下方看到join块中出现一个新的空白。

如果你正确完成了这些操作，将会有三个空槽，如下面的截图所示。现在，点击弹出菜单外的任何地方以关闭弹出菜单。

现在，我们准备好插入与等级相关的三个新信息。在第一个开放的插槽（空白文本块是文本块抽屉中的第一个块）中插入一个空白文本框。尽管这看起来像包含一个空白空间，但我们必须创建一个。在空白文本中点击并按下键盘的空格键以创建一个空格。在下一个空槽中，插入另一个空白文本块，并点击并输入单词等级：并在冒号后留一个空格。

正如你可能正确猜到的，我们将插入到连接块的最后一部分文本是等级值。你可能想知道这个等级值从哪里来。实际上，我们将从当前的分数值中计算出这个等级值。

当我们实现等级时，我们假设分数增加 5 将触发等级变化。因此，分数 0 到 4 对应等级 0，分数 5 到 9 对应等级 1，分数 10 到 14 对应等级 2，依此类推。我们可以使用一些数学来计算从分数中得出的等级。正如你可能猜到的，我们在这里将要使用的数学是商操作。更具体地说，我们将分数除以 5，并使用商部分来确定我们的等级。

要使用商块，请返回到数学块抽屉，并拖动一个取模块。然后，点击向下指向的三角形将其更改为商。复制一个获取全局分数块并将其插入到商块的第一个开放插槽中。将一个数学数字块插入第二个开口，并将其更改为5。完成的块在以下屏幕截图中显示：

这正是重新连接您的移动设备到 Fling 应用的最佳时机。您的标签现在将显示分数和等级，如下面的屏幕截图所示：

更新重置按钮

不要以为我们已经忘记了我们的错误！你弄清楚错误是什么了吗？”在上一章中，我们编程了重置按钮，将球移动到屏幕顶部（y=2）和随机的 x 值。但是，在播放按钮开始移动球之前，它也会将球移动到随机的 x 位置。问题是，这并不是重置按钮之前设置的位置。所以球在重置时移动一次，在播放时再次移动。我们可以修复这个问题！”开始新段落。从“除了修复错误之外，我们对重置和播放按钮还有一些其他更新。现在我们已经将计分和等级添加到我们的游戏中，我们需要编辑重置按钮。与重置游戏相关的有几个任务。如下所示：

1. 停止球的运动并重置球的位置。

2. 重置分数变量。

3. 更新用于显示分数的标签。

另一点需要注意的是，我们不能假设用户按下重置按钮的唯一原因是球击中底部边缘并结束游戏。我们还得考虑用户按下重置按钮来停止游戏的情况。

为了重置球的位置，我们将重用我们在 第三章 中编写的 Ball1.MoveTo 块，导航 App Inventor 平台，当时我们创建了 Play_Button.Click 事件。当用户按下 播放 按钮时，球将移动到介于 1 和屏幕宽度之间的随机 x 坐标。

你可能还记得在 第三章 中，导航 App Inventor 平台，我们编程了 重置 按钮将球移动到介于 1 和屏幕宽度之间的随机整数，如图所示：

根据当前应用程序的编程，重置按钮将球移动到屏幕顶部的随机 x 位置，播放按钮也将球移动到屏幕顶部的随机 x 位置，但这两个随机位置并不相同。想象一下这样的场景：球击中底部边缘并结束游戏。用户按下重置按钮将球移回屏幕顶部。它到达一个随机的 x 位置。然后，当用户按下播放按钮时，球再次重置到一个新的随机 x 位置，然后开始向下移动。

我们首先编程播放按钮将球定位在屏幕顶部，因为第一次玩游戏时，用户不会按下重置按钮，而是按下播放按钮。然而，一旦游戏玩了一次，用户就会按下重置按钮，因此播放按钮就不再需要重新定位球，因为重置按钮将执行这个功能。

我们希望播放按钮能够让球从重置按钮之前随机选择的位置开始移动。为此，我们需要编程我们的应用程序，以便播放按钮从 重置 按钮获取球的 x 位置。

为了让这个重置按钮和播放按钮进行通信，我们首先创建一个名为 randomX 的变量。这个变量最初将被设置为 0。初始化一个变量到某个值（即使这个值后来没有使用）也是非常重要的。从 变量 块抽屉中选择 初始化全局名称为 块。将名称更改为 randomX。选择一个数字 Math 块并将其连接，如图所示（注意，这组块独立存在；它不适用于其他事件块）：

在初始化全局变量 randomX 之后，我们现在可以使用它来更新重置和播放按钮。如果您还记得，当我们编程 Play_Button.Click 事件时，我们启用了球开始移动。我们将设置 Ball1.Enabled 块的值设置为 true，如下截图所示：

因此，对于重置按钮，我们希望禁用球。我们通过将其值设置为false来实现这一点。

首先，复制并粘贴设置 Ball1.Enabled 块；它也会复制并粘贴附加的true块。只需单击“true”一词右侧的箭头，您就可以选择false。这个块禁用了球的移动。这是我们目标之一，因为用户会期望在按下重置按钮时游戏停止。

接下来，从 变量 块中选择设置全局 randomX 块（它将在块抽屉中作为选项可用，因为我们初始化了全局变量 randomX）。我们将为 x 坐标生成一个随机整数并将其存储在这个 randomX 变量中。您知道如何做，因为我们已经创建了将球移动到随机 x 整数的块。复制并粘贴从...到随机整数块，并将它们添加到设置全局 randomX 到块中，如下截图所示。一旦我们将全局 randomX 变量设置为随机整数，我们将在调用 Ball1.MoveTo块中使用这个变量。以下截图显示了如何生成随机数，将其存储在变量中（设置全局 randomX），然后使用这个变量（获取全局 randomX）。这完成了 任务 1。

任务 2 和 任务 3 相对简单。由于重置按钮也会将分数重置为零，因此我们还将分数变量设置为零。为此，我们将从 Ball1.EdgeReached 事件复制并粘贴设置全局分数块，并将右侧修改为仅是值为 0 的 Math 数字块。对于 任务 3，我们将简单地复制并粘贴我们在本章中之前创建的 Score_Level_Label.Text 块。此块始终使用最新的分数和级别更新标签。由于我们在执行此块之前将分数重置为 0，因此此块将正确地将标签重置为显示分数和级别为 0。（注意：块从上到下执行。）

更新播放按钮

当我们构建播放按钮时，块看起来像以下截图：

但现在，我们想要重新做播放按钮的块，因为我们不再想让播放按钮设置球的 x 随机位置。相反，我们想让播放按钮从重置按钮获取球的位置。这样，当按下播放按钮时，球将从它已经被重置到屏幕顶部的位置开始移动，这是在用户第一次玩游戏时，播放按钮将使用我们已编程的块设置球的随机位置。然后，当第一次（以及随后的时间）按下重置按钮并将球的位置设置在屏幕顶部时，我们希望球在按下播放按钮时从该位置开始移动。

在这一点上，可能很明显我们会使用一个if/then/else事件块。然而，推理过程却有点反直觉。唯一一次播放按钮决定球 x 位置的情况是用户第一次玩这个应用的时候。这时，全局变量 randomX 的值为 0。我们不是要说如果全局变量 randomX 等于 0，那么就做某事，而是要说如果全局 randomX不等于 0，那么就做某事。我们将以这种方式编程这些块，因为只有一次这种情况不会发生。每次应用检查这个信息时，全局 randomX 确实会是一个介于 1 和屏幕宽度之间的值（正如我们在重置按钮中编码的那样）。如果全局 randomX不等于0，那么将球移动到重置按钮设置的 global randomX 位置。否则（else），我们将球移动到 1 和屏幕宽度之间的一个随机整数位置（此代码只会发生一次——即用户第一次玩 Fling 应用时）。

摘要

我们希望你觉得这一章节既有挑战性又有所收获。你已经学会了如何通过添加更多复杂的功能和代码，将一个简单的应用提升到中级水平。每个功能、评分、抛掷能力以及等级都需要大量思考，以确定它们如何运作以及如何相互交互。正如你所体验到的，启用评分和等级机制需要我们在多个代码块位置进行代码修改。同样，我们也必须重新审视我们的按钮功能，并重新编程按钮。你会发现，这通常是编码过程中的一个典型步骤。改变或添加一个东西需要重新评估其他事物的工作方式和交互方式。此外，这一章节还展示了在规划应用时需要投入多少思考。在本章的早期，我们决定将标签从“Score”更新为“Score_Level_label”，以反映它将显示评分、等级和游戏结束。如果你最初没有足够的时间在纸上规划你的应用设计，那么你很可能会发现自己需要做比预期更多的重做工作。大多数编程工作都需要程序员在过程中进行一些故障排除，所以如果你发现你的应用构建包括许多重写，不要气馁。但是，通过提前真正思考你应用功能的每个方面，你可以避免大规模的改造。

在下一章中，我们将开始着手制作一个中级应用，一个用于策划活动、派对或会议的事件应用。

第五章。构建活动应用程序

现在我们已经成功创建了一个游戏应用程序，让我们尝试一些新的东西！在本章中，您将学习使用更多组件和块——这次是为了创建一个活动应用程序。这种应用程序有助于组织一个您将聚集一群人进行特定活动的事件，例如派对、读书俱乐部、外出或会议。在构建此类应用程序时，您将学习以下内容：

• 包含图像

• 创建一个按钮导航菜单

• 添加多个屏幕

• 使用多个标签

• 设置地图功能

我们正在过渡到初学者到中级水平的应用程序制作，因此你会发现这个应用程序中的一些功能需要多个步骤。例如，在本章中，我们将设置 RSVP 表单和嘉宾列表显示的用户界面，但实际上我们将在第六章中创建数据库和编写这些功能的代码，数据库简介。

就像任何教程一样，这个教程可能会激发您关于如何使用这些组件或您可能想要添加到应用程序中的更多功能的创意想法。当这些灵感出现时，请确保在笔记本上记下来。我们建议将您的应用程序构建想法和概念保存在一个地方。当您完成教程并开始自己的应用程序开发时，您将积累一个宝贵的资源。

活动应用程序的用户界面

通过点击 App Inventor 主页上的创建应用程序按钮(appinventor.mit.edu/explore/)并登录您的 Google 账户来登录 App Inventor。一旦您进入 App Inventor，请点击屏幕左上角的新建项目（无论您是在项目视图还是设计器视图中，位置都是相同的）。将出现一个弹出窗口（如下面的截图所示）；为项目名称输入EventApp：

一旦您点击确定，您将被带到设计器视图。

设置背景图像

在本章中，您将获得使用媒体工具将图片包含到您的应用程序中的经验。所有应用程序都包含某种形式的艺术品（标志、图标、照片等），因此学习包含图像文件将非常有用。我们决定为 EventApp 教程创建一个泳池派对，并且为了保持主题一致，我们将 Screen1 的背景图像设置为水景图像。需要注意的是，您不能在您的应用程序中使用来自互联网的任何图像、标志或艺术品。艺术品（包括摄影）是受版权保护的，如果您未经许可（并且没有付费）使用他人的艺术品，您将违反版权法。因此，我们花时间解释如何找到可用的、免费的艺术品。Google 使查找可免费重用或混搭的艺术品变得容易。

1. 在 Google 搜索栏中输入您要查找的主题。在这种情况下，我们将输入泳池。按键盘上的回车键或点击搜索栏旁边的蓝色放大镜图标。

2. Google 将显示结果。在搜索栏下方，您将看到一个水平选项列表；点击图片。

3. 在图片的右侧，点击搜索工具。此按钮将显示一个包含更多选项的弹出窗口。它们包括以下内容：

   • 未按许可证过滤（不要使用此选项）

   • 标记为可修改后重用

   • 标记为可重用

   • 标记为非商业性再利用并可修改

   • 标记为非商业性再利用

4. 以下截图显示了我们的泳池图片搜索的 Google 搜索选项：

在下拉菜单中选择一个选项，在这种情况下，标记为可重用将过滤显示的结果，只包括具有该特定类别许可证的图片。我们再次强调，选择标记为可重用的图片是良好的实践。这样，如果您决定出售您的应用程序，您就可以在商业上使用它们。

这里是一些有用术语的快速解释：

• 免费使用或分享：如果您不更改内容，则允许您使用或分享内容

• 免费使用、分享或修改：您可以使用、分享或更改内容

• 商业用途：如果您认为您可能希望出售使用来自互联网的艺术作品的应用程序，请确保您选择可供商业使用的艺术作品

您还可以在网上搜索带有许多不同许可证的创意共享图片。一些照片需要署名，这意味着您必须通过包含文本：“照片由（以及摄影师的姓名）”来给摄影师提供信用。如果艺术作品可以免费商业使用或被认为是公共领域（免费无限制使用），则不需要署名。

注意

要获取有关许可证类型的更详细信息，请访问creativecommons.org/licenses/。一个特别有趣的旁注是：创意共享组织是由麻省理工学院 App Inventor 的创造者 Hal Abelson 共同创立的。

一旦您找到可以免费使用的图片，请将其下载到您的电脑上（在 Windows 机器上通过右键点击图片或通过在 Mac 上点击并按住选项键）。您将看到一个弹出窗口。点击另存为...。这将启动另一个弹出窗口，您可以在其中将文件重命名为描述性或易于记忆的名称，并选择您希望在电脑上保存图片的位置。

一旦图片保存在您的电脑上，有两种方法可以上传照片：通过媒体面板或通过属性面板——两者的步骤完全相同。请注意，删除媒体文件的唯一方式是通过媒体面板。

由于我们将在应用中添加一个泳池水图片作为背景图片，因此我们将它上传到 Screen1。当Screen1被高亮显示时，在属性面板中会有一个名为BackgroundImage的选项。由于我们的屏幕是空的，它将显示None。当你点击文本None时，会出现一个下拉菜单，允许你上传图片，如下面的截图所示：

当你点击上传文件…按钮时，会出现一个弹出窗口，允许你从你的电脑中选择一张图片。我们将其命名为Pool Image.png：

一旦点击确定，图片名称将出现在属性和媒体面板的下拉菜单中，并且实际图片将作为背景图片出现在Screen1上，如下面的截图所示（注意：我们命名为Pool Image.png；但上传到 App Inventor 时，它被分配了一个新的名称：PoolImage.png，没有空格）。如果你的照片没有居中，你可以通过从下拉菜单中选择居中来调整水平对齐和垂直对齐属性，如下面的截图所示：

添加图片组件

接下来，我们将添加另一张图片覆盖在背景图片之上。我们使用了 Illustrator 和 Photoshop 来创建一些艺术作品，并将其保存为.png文件。如果你没有这些软件程序，你可以使用免费的编辑器，如 Inkscape（Windows/Linux）、Affinity Designer（Mac）或 Gimp（多平台）来创建艺术作品。你可以制作一个类似我们的图片或新的设计，或者在网上找到 Creative Commons 图片。

在设计师的左侧列中，在用户界面调色板抽屉中，选择图片组件并将其拖动到查看器中。你会注意到一个小图片组件图标位于查看器的左上角。我们希望将其居中。有两种方法可以实现：

• 在组件面板中点击Screen1，然后在属性面板中，从水平对齐和垂直对齐的下拉列表中选择居中。

• 由于我们将在主屏幕上添加许多组件，我们将向您介绍一种更复杂的方法，该方法需要额外的组件。转到布局抽屉，将VerticalArrangement组件拖动到Viewer上。注意它位于Image组件图标下方。单击Image Component图标，将其拖入 VerticalArrangement 框中。在Components面板中，选择VerticalArrangement并转到Properties面板。在Height和Width选项中，从下拉菜单中选择Fill Parent并单击每个选项的OK。您将看到 VerticalArrangement 组件扩展以填充屏幕。仍然在Properties面板中，转到AlignVertical和AlignHorizonal选项，并从每个下拉菜单中选择Center。注意，Image 组件现在在 Viewer 的 Screen1 上居中。

接下来，我们将更改图像组件的名称。转到Components面板并选择Image1。一旦它高亮显示，点击面板底部的Rename以看到一个弹出窗口，您可以在其中输入新名称，Pool Party Message。单击OK：

注意，App Inventor 将空格替换为下划线，因此图像组件名称现在将显示为Pool_Party_Message在Components面板中。现在，我们将上传实际的图像作为图像组件。当Pool_Party_Message高亮显示时，转到Properties面板，并在Picture下的None处单击以打开Upload File对话框。选择您想要使用的图像（我们以类似的方式命名我们的图像：PoolPartyMessage.png）并单击OK。注意，图像名称现在在Properties面板下的Picture和Media面板中显示，并且实际图像在 Viewer 中的 Screen1 背景图像上显示，如以下截图所示：

作为移动应用用户，您可能已经注意到应用中存在某种类型的导航栏。我们将通过添加五个按钮来构建我们的导航栏：Home、Info、RSVP、Guests和Map。

添加按钮

我们将把按钮放置在HorizontalArrangement组件中。从与找到 VerticalArrangement（布局抽屉）相同的位置拖动它，并将其放置在当前存在于Viewer上的VerticalArrangement下方。您可以通过查看以下截图中的组件面板列中的名称是否对齐来确认HorizontalArrangement确实位于 VerticalArrangement 下方而不是其中。组件列表显示 Pool_Party_Message 缩进，因此它确实位于 VerticalArrangement1 组件内部，但 HorizontalArrangement1 不是。接下来，将HorizontalArrangement1的属性设置为与以下截图所示相匹配：

前往用户界面调色板，拖出一个按钮，并将其放置在查看器中的HorizontalArrangement内。重复此步骤四次。现在屏幕底部将有五个按钮，如下面的截图所示。由于我们已将 HorizontalArrangement 的高度设置为50像素，因此可以将所有按钮的Height属性设置为填满父级。这样，它们只会伸展到50像素的高度。以相同的方式为Width属性设置，所有按钮将自动均匀地分布在屏幕宽度上：

在组件面板中点击Button1，并将其重命名为HomeButton。在属性面板中，将BackgroundColor更改为None，勾选Enabled和FontBold，并将FontSize设置为14。在文本下，输入Home，并选择居中作为TextAlignment，以及黑色作为TextColor，如下面的截图所示：

对所有其他按钮重复这些步骤，重命名按钮，并更改按钮上的文本，以反映以下截图中的名称。将所有按钮的TextColor设置为白色。我们使用不同的颜色来辅助导航。当用户处于主页屏幕时，他将看到主页按钮的TextColor为黑色，而其他按钮将是白色，如下一个截图所示。当我们构建下一个屏幕（信息）时，我们将信息按钮的文本设置为黑色，并将主页文本按钮改为白色，就像其他按钮一样：

这是一个理想的例子，说明了为什么你总是想要利用实时开发环境并监控你在移动设备上对应用程序所做的更改。左侧的截图来自设计师窗口中的查看器。它显示了带有背景图片、图形和刚刚构建的底部菜单栏的主屏幕（Screen1）。如果你只依赖电脑屏幕上的这个视图，你可能会尝试重新排列按钮，因为它看起来右边的按钮被切掉了。

但是，如果你在移动设备上查看这个相同的视图，你会看到右侧的截图，其中所有按钮均匀地分布在屏幕上。

添加活动启动器

我们的应用程序将包含一个地图，因为每次你举办活动时，客人都需要知道地址，通过 GPS 提供位置信息很有帮助。为了让 EventApp 应用程序在用户按下地图按钮时启动谷歌地图，我们将使用 ActivityStarter 组件。转到设计器，在连接调色板中，将ActivityStarter拖放到查看器上，注意它如何落在查看器下方（见以下截图），与迄今为止我们使用的所有其他组件不同。这是因为ActivityStarter是一个不可见组件；用户在屏幕上看不到它，甚至不知道他们已经启动了它：

为了让应用程序启动正确的地图，你需要在属性面板中输入一些指令。将以下文本插入到每个属性标题下方的空白文本框中Action、ActivityClass、ActivityPackage和DataUri，如下所示：

• Action: android.intent.action.VIEW

• ActivityClass: com.google.android.maps.MapsActivity

• ActivityPackage: com.google.android.apps.maps

• DataUri: http://maps.google.com/mapsq=1600+Amphitheatre+Parkway+Mountain+View+CA

你可能想知道所有这些属性的含义。ActivityPackage属性告诉 ActivityStarter 启动哪个包（在 Android 编程术语中，应用程序文件被称为包）。每个 Android 应用程序都包含一个或多个活动。将这些活动视为应用程序的主要部分。ActivityClass属性具体说明了要启动的地图应用程序的活动。Action属性提供了有关正在启动的活动更多详细信息。最后，DataUri属性指定了地图指向的网页位置。URL 的第一部分，maps.google.com/maps?q=，基本上意味着我们正在查询谷歌地图（q代表查询），URL 的第二部分指定了我们正在寻找的确切位置。在 URL 中，不允许有空格，因此传统格式是将所有空格替换为加号。因此，当我们指定我们泳池派对的地址（虚构地位于加利福尼亚州山景城的谷歌总部）时，不同单词之间的所有空格都将被加号替换，如前文在DataUri属性标题下所示列表中所示。

当你使用不同位置创建自己的活动应用程序时，你将使用相同的Action、ActivityClass和ActivityPackage信息，但对于DataUri属性，你将在等号后插入你的地址(maps.google.com/maps?q=)。请记住，将你地址中的所有空格替换为加号。

以下是一个您屏幕应类似示例。由于您的屏幕上的文本框很小，不使用箭头键将光标向右滚动，将无法显示完整信息：

添加屏幕

我们目前的主屏幕称为 Screen1（因为 App Inventor 不允许您重命名 Screen1）。现在我们将添加另外三个屏幕；每个屏幕都将与一个按钮相关联。在顶部菜单栏的查看器上方和项目下方，您将看到一排三个按钮：Screen1（我们当前的屏幕）、添加屏幕...和删除屏幕，后者为灰色，如图所示：

点击添加屏幕按钮，将弹出一个窗口要求您输入新的屏幕名称。按照以下截图所示，键入Info_Screen。点击确定：

重复相同的步骤添加另外两个屏幕，并将它们命名为RSVP_Screen和GuestList_Screen。现在，所有屏幕都将出现在第一个菜单按钮下的下拉菜单中，您可以通过选择不同的屏幕在屏幕之间导航。下一张截图显示了按钮上的名称Screen1，以指示当前打开的屏幕名称：

。

一旦您添加了额外的屏幕，您将需要为它们重新创建用户界面。这意味着，对于每个屏幕，您将添加一些与 Screen1 相同的元素：泳池图像作为背景图像，一个 VerticalArrangement，一个 HorizontalArrangement 和五个按钮。请注意，将五个按钮重命名为与 Screen1 上完全相同的名称至关重要，因为我们将为每个按钮使用相同的名称来执行相同的事情（打开其适当的屏幕），如果某个屏幕上的按钮名称错误，则它将无法工作（请注意，我们指的是实际的按钮名称，而不是按钮上显示的文本）。此外，请记住将所有按钮的文本设置为白色，除了您当前打开的屏幕的按钮（即，当 GuestList_Screen 打开时，Guests 按钮文本应为黑色；当 RSVP_Screen 打开时，RSVP 按钮文本应为黑色，依此类推）。

编程积木

现在我们已经设计了大部份 Event 应用程序的用户界面，我们将切换到 Blocks 编辑器来编程我们的应用程序。在设计师右上角点击Blocks按钮。您会发现，在整个构建此应用程序的过程中（就像任何应用程序一样），您将在设计师和 Blocks 编辑器之间来回切换。

在屏幕之间导航和启动地图

在 Blocks 编辑器中，我们将编写导航按钮的代码以启动适当的屏幕。例如，当用户按下 Info 按钮时，我们希望应用程序打开 Info_Screen。

Screen1

在块编辑器中，确保您在 Screen1 上，通过验证菜单按钮上显示的是 Screen1（而不是其他屏幕之一）。在水平排列下的块调色板中，您将看到您在设计师中刚刚创建的按钮列表。（注意按钮名称在水平排列下缩进，这是一个视觉提示，提醒您它们包含在水平排列组件中。）如果您在调色板中看不到所有按钮，请单击水平排列左侧的加号，它将切换为减号并显示这些项目（在这种情况下，5 个按钮）。

• 点击InfoButton以显示块抽屉并选择第一个金色块当 InfoButton.Click。

• 在内置块下，单击金色控制块并向下滚动到打开另一个屏幕 screenName块。将此块插入到当 InfoButton.Click块中。

• 向其中添加一个空白的粉色文本块，并输入Info_Screen到空白处。将其连接到打开另一个屏幕 screenName块。

• 为RSVPButton和GuestsButton重复这些步骤。

对于 MapButton，我们不会打开另一个屏幕；相反，我们将启动 ActivityStarter（我们已将其设置为打开 Google Maps），如下所示：

• 在MapButton抽屉中，选择第一个块，当MapButton.Click。

• 在ActivityStarter1块抽屉中，选择紫色调用 ActivityStarter1.StartActivity块。将两个块连接在一起。

• 以下截图显示了所有之前的步骤：

使用背包在屏幕间共享块

如果您仔细想想，所有屏幕上的所有按钮都会做同样的事情。我们不必为所有其他屏幕重建完全相同的块集，我们可以使用背包工具。在块查看器的右上角有一个小背包图标，如前面的截图所示。此工具使您能够在屏幕和项目之间共享块（请注意，当您注销时，背包会清空）。

添加块到背包有两种方式。如下所示：

• 您可以直接将块拖到背包中（最简单的方法）。

• 或者，您可以在要添加的块上右键单击（类似于复制或粘贴块，在背包中右键单击添加块，将添加所有附加的块）。例如，右键单击当 InfoButton.Click块（或者在 Mac 上，在单击事件块的同时按键盘上的控制按钮）并会出现一个下拉列表，如下面的截图所示。选择第五个选项，添加到背包；这将添加此组中的三个块（如果您打开了计算机的声音，您将听到指示音）。

第一次这样做时，下拉列表中的括号中的数字将是0（如前面的截图所示）。但是，在您将第一组块添加到Backpack并重复下一步骤以添加下一组块之后，该数字将增加。这个数字会告诉您您已将块添加到Backpack的次数。

以您选择的方式将另外三个块集添加到Backpack中。添加块后，点击Backpack以显示您已添加的四个块集，如下面的截图右侧所示。点击Viewer中的任何空白区域以关闭Backpack：

现在我们可以切换屏幕并检索我们的 Backpack 块。点击Viewer上方的Screen1按钮，从下拉列表中选择另一个屏幕。选择Info_Screen。

如果您仔细想想，我们只需要添加到BackPack中的四组块中的三组。我们不需要InfoButton块，因为我们目前处于Info屏幕上，所以我们不希望InfoButton执行任何操作。要使按钮不活跃或不执行任何操作，我们只需不为其创建任何块（代码）。

从Backpack中添加块的方式与从抽屉中添加块的方式完全相同。点击Backpack以显示您已添加的块选择，然后点击RSVPButton块。您将看到这些块出现在Viewer上。重复这些步骤以从Backpack中添加GuestsButton和MapButton块。

当我们在Screen1上时，我们不需要创建HomeButton块，因为这本质上就是主屏幕。但是，我们需要在其他屏幕上激活主按钮，以便用户可以导航回Screen1（或主屏幕）。既然我们现在在“Info_Screen”上，让我们现在就做这件事。将屏幕上的任何事件块复制并粘贴，然后点击按钮名称右侧的金色箭头。它将显示所有按钮的下拉列表；选择HomeButton。将粉红色的文本块中的文本更改为Screen1。您的Info_Screen块应该看起来像以下图像。重复相同的步骤将主按钮块添加到RSVP_Screen和GuestList_Screen：

向屏幕添加文本

Info_Screen的目的是为了让组织者（您）向客人提供有关活动的信息。此屏幕将显示静态文本，但可以轻松更新。让我们切换回Designer。

向屏幕添加文本的一个简单方法是使用标签。（或者，您也可以使用 Photoshop 或 Gimp（或另一个设计工具）在电脑上创建文本，并将其保存为图像文件（JPG 或 PNG），然后使用媒体工具将其上传到 App Inventor）。您可以在用户界面抽屉中找到标签组件。我们将创建八行文本，所以将一个标签拖到查看器上，然后重复此操作七次。在属性面板中，在文本下的文本框中输入您的信息。您可以复制以下截图所示的格式，包括字体、颜色和布局，或者设计您自己的样式：

摘要

您已经完成了设置活动应用的第一部分。在本章中，您学习了如何在网络上找到可用的图片，以及如何将一张图片作为多屏幕的背景图。您还学会了如何将电脑上的艺术品添加到背景图上。您创建了一个按钮导航栏，编写了打开其他屏幕的按钮代码，使用背包工具将块从一个屏幕复制到另一个屏幕，使用标签输入信息性文本，并为启动谷歌地图进行了设置。

在下一章中，我们将主要集中创建一个数据库，用于存储我们将收集的所有数据——宾客的名字、参加人数和拼盘物品。为此，我们将教您如何使用谷歌融合表格，以及如何使用ListView创建 RSVP 表格和宾客名单显示。我们已完成了大约一半的非常实用的应用，您可以用它来完成多种目的。而且，您正在学习的技能将对任何未来的应用制作尝试都非常有用。

第六章. 数据库简介

现在我们已经成功创建了事件应用的第一部分，是时候让它更加功能化了。在本章中，我们将通过添加代码来扩展我们的事件应用，使客人能够通过发送 RSVP（法语中的“请回复”——répondez s'il vous plaît）来回应邀请。应用将汇总所有数据并显示宾客名单，以便宾客和派对组织者都能看到谁将参加。

为了让应用能够从个人中央存储库收集所有 RSVP 数据，我们必须使用在线数据库。App Inventor 内置了对三个在线数据库的支持，包括 TinyWebDB 和 Google 融合表（我们将使用它）。

TinyWebDB 和 Google 融合表在聚合数据方面都有其局限性。TinyWebDB 虽然易于使用，但不安全。这意味着任何人都可以访问数据库，可能会不小心（或故意）删除或更改收集的数据。另一方面，Google 融合表是安全的，但使用起来更复杂。为了将融合表集成到我们的应用中，同时保持应用设计相对简单，我们必须做出一些权衡。学习目标是向您介绍使用相对简单的应用构建数据库的过程。但是，正如您将发现的，生成的应用对广泛公众的传播具有挑战性。在本书出版时，另一个 App Inventor 数据库替代品 FirebaseDB 正在开发中。我们将提供 FirebaseDB 采用更新的信息，一旦它可用。您可以在 Packt Publishing 和 MIT App Inventor 网站上检查补充材料，以获取有关 FirebaseDB 的新信息。

在本章中，你将学习：

• 如何创建 Google 融合表

• 如何建立 Google API 凭证

• 如何设置 RSVP 表格

• 如何将 App Inventor 应用中的数据推送到 Google 融合表

• 如何从 Google 融合表请求和接收数据到 App Inventor 应用

• 如何显示宾客名单

创建数据库

在这个应用中，受邀者将发送 RSVP 来告知派对组织者（和其他宾客）他们是否能参加活动。因此，自然地，我们必须包括一个机制来收集所有分散的信息到一个中央位置。为了实现这一点，我们将使用 Google 融合表创建一个在线数据库。在专业编程中，这个方面通常被称为创建后端。

创建 Google 融合表

要创建 Google 融合表，请访问您电脑上的drive.google.com网站，点击屏幕左上角的大红色按钮，按钮上标有新建。向下滚动选项列表，选择更多，然后选择Google 融合表：

如果你之前从未使用过谷歌融合表，那么当你点击更多时，你可能会看不到列出的谷歌融合表选项。如果是这种情况，选择带有加号的最后一个选项，连接更多应用。一个弹出窗口将出现，其中包含许多你可以连接到你的谷歌驱动器中的应用。你应该会看到一个类似于以下截图的视图。在这个弹出窗口的左上角，你会看到一个默认显示单词所有的按钮。这个按钮让你可以按各种类别过滤应用。点击它，并从下拉菜单中选择第二个选项，按谷歌，如以下截图所示：

现在，你将看到所有由谷歌创建的应用列表，如前一个截图的右侧所示。在列表中找到谷歌融合表应用，并点击它。完成之后，下次你点击drive.google.com中的红色新建按钮并选择更多时，谷歌融合表将作为一个选项出现。

当你创建一个新的融合表时，你将会有选项创建一个空表（以及其他一些选项）。出于我们的目的，选择创建空表。

接下来，我们将使表格的格式适合我们的应用。首先，重命名表格以给它一个有意义的名字。点击屏幕左上角的当前表格名称新表。这将打开一个表格信息窗口。给你的表格起一个描述性的名字，例如EventApp Table，然后点击保存按钮：

在这个表格准备好作为我们活动应用的后端使用之前，我们需要对其进行进一步的修改。默认情况下，融合表中会插入一个空白行。我们希望我们的表格是完全空的。为了清空表格，选择屏幕左上角表格名称下方的编辑标签。你会看到一个删除所有行的选项；点击它并确认你想要删除所有行：

现在我们已经有一个干净的表格了，我们需要决定使用哪些列。对于这个活动应用，我们想知道谁会来（宾客的名字），这个人会带来多少人（宾客数量），以及这位宾客会带来哪些物品到派对上（拼盘）。这些信息将被组织者用来计划派对。

这三个信息点中的每一个都将保存在融合表的一个列中。创建融合表时自动包含四个列。由于我们只需要三个列，我们将删除四个默认列中的一个，并修改其他三个。

你点击以删除所有行并清理表格的编辑选项卡还包含另一个名为更改列的选项。我们现在将使用该选项多次来对列进行所有更改。默认列名是文本、数字、位置和日期。我们将它们更改为宾客姓名、NumGuests和ItemsBringing。

要将第一列更改为宾客姓名，点击编辑选项卡并选择更改列选项，你将看到以下截图。默认选中第一列（左侧面板上的灰色背景表示它是活动的）。将列名更改为Guest Names。此列已经配置为保存文本数据（类型选项），因此我们在这里不需要做任何更改：

现在我们已经更改了第一列，我们将对第二列做同样的操作。选择第二列（目前称为数字）。一旦点击它，背景将变为灰色。现在将列名更改为NumGuests。由于此列已经配置为存储数字，我们在这里不需要做任何更改：

接下来，我们需要重命名第三列（目前称为位置）。就像前面的例子一样，选择该列并将其名称更改为ItemsBringing。默认情况下，此列预先配置为存储位置数据。我们实际上想要存储文本数据（宾客将带来的物品）。因此，我们需要更改数据类型。当你点击位置（类型选项）时，将出现一个下拉菜单，如下面的截图所示。选择文本选项。

最后，由于我们只需要三列，我们将通过悬停在第四列上使其变为活动状态（灰色）并点击其旁边的x（如下面的截图所示）来删除第四列，并在弹出框中确认删除：

现在表格已准备好使用，点击左上角的文件选项卡，并从下拉菜单中选择关于此表格。

另一个页面将打开，显示表格的详细信息。注意最后一项信息中给出的信息，即Id，如下面的截图所示。双击该字母数字字符串以突出显示它，将其复制/粘贴到你的电脑上的另一个位置，例如记事本文件或空白文档。（你可能需要使用浏览器中的复制/粘贴功能来完成此操作，因为键盘快捷键可能不起作用。你可以在浏览器窗口顶部的编辑菜单下找到复制/粘贴。）你将在 App Inventor 应用程序中使用此Id将数据推/拉到/从这个表格中：

我们将对 Fusion Table 进行一个小小的最终修改（修改其Sharing设置），但，我们目前还没有准备好进行这一步。所以请保持 Fusion Table 窗口打开，并在单独的浏览器窗口中开始使用 App Inventor。

设计 RSVP 屏幕

对于我们的应用，我们要求受邀宾客提供他们的姓名、总宾客数量以及将在野餐中分享的食物或饮料。一旦宾客按下Send RSVP按钮，就会发生神奇的事情。我们将把应用中的所有数据推送到我们创建的 Fusion Table 中。

在设计窗口中创建 GUI

在第五章中，我们在构建活动应用中创建了RSVP_Screen，现在我们将构建宾客将使用的 GUI（图形用户界面）。在Designer窗口中导航到 RSVP 屏幕。屏幕除了背景池图像和底部添加的导航按钮外，其他都是空的。

由于您在前面章节中已经积累了添加各种组件的经验，我们对您的能力非常有信心。当然，我们也会帮助您指定使用哪些组件！嘉宾在此提供了三份数据：姓名、宾客数量以及需要携带的物品。我们将把与这三份数据相关的所有组件放置在 VerticalArrangement 中，以实现简洁的外观。因此，首先需要添加的组件是：VerticalArrangement。将其拖动到Viewer中，并将其Height和Width属性设置为Fill parent。

要收集第一份数据，即姓名，添加一个Label，在其下方通过拖动添加一个Textbox到Viewer中的 Vertical Arrangement 中。将Label重命名为NameLabel，并将BackgroundColor属性更改为Dark Gray。勾选FontBold属性，并将Text属性更改为Name。

同样，将Textbox重命名为NameTextBox。将Width属性更改为Fill parent。在Hint属性中输入Enter your first and last name。

对于第二份数据，即宾客数量，添加一个Label和另一个名为ListPicker的组件（在User Interface调色板中的Label组件下方找到）。将组件拖动到 Label 和 Textbox 下方的 VerticalArrangement 中。将此 Label 重命名为GuestsLabel。将BackgroundColor属性更改为Dark Gray，勾选FontBold属性，并将Text属性更改为Number of guests (including you)。

我们将使用 ListPicker 组件来跟踪当客人提交 RSVP 时参加的人数。ListPicker 是一个按钮，点击后会打开一个列表，用户可以从中选择。将 ListPicker 重命名为 NumGuestListPicker。我们将对 ListPicker 属性进行两项更改。将 1,2,3,4,5,6,7 作为 ElementsFromString 属性。这些是我们希望在用户点击 NumGuestListPicker 时显示的项目。我们假设客人数量（包括完成 RSVP 的人）在 1-7 之间。您可以按需添加更多或更少的客人选项。

只需记住，您指定的逗号分隔的数字是用户可以选择的选项。最后，将 Selection 属性设置为 1。这意味着，如果用户没有从 NumGuestListPicker 中选择数字，则默认值 1 将用于计算发送 RSVP 的用户。

最后，我们将添加一个 按钮 并将其重命名为 SendRSVPButton。用户在完成表格后点击此按钮发送 RSVP。就像我们对标签所做的那样，将 BackgroundColor 设置为深灰色，并将 Text 属性插入为 发送 RSVP。

接下来，将 FusiontablesControl 组件从 存储面板 拖动到查看器中。（注意 FusiontablesControl1 组件是如何在 查看器 下方展开的，因为它是一个不可见组件。）添加所有组件后，RSVP_Screen 将类似于以下截图：

这完成了 RSVP_Screen 的 GUI。在专业编程术语中，这也称为创建前端。

设置 Google 身份验证

Fusion Tables 是 Google 设计的软件。由于各种安全和隐私相关的问题，Google 只希望经过验证的软件向/从 Fusion Tables 发送/接收数据。因此，在我们的事件应用与 Google Fusion Tables 交换数据之前，我们需要建立我们的身份。在本节中，我们将描述如何创建 Google 服务级身份验证以建立此凭证。

要建立服务级身份验证凭证，请按照以下说明操作：

1. 前往 console.developers.google.com/ 并使用您的 Google 账户登录（如有必要）。在 入门 页面上，点击 使用 Google API 按钮，如图所示：

   缩写 API 代表应用程序编程接口。用非常简单的方式描述，API 定义了计算机与网站交互的方式（本质上是为了软件程序能够与之交互）。像 Twitter、Facebook 和 Google 这样的公司的开发者创建了他们的软件协议，以便其他程序能够与之通信。在这种情况下，App Inventor 将与 Google Fusion Tables API 通信。

2. 您将被提示创建一个使用 API 的新项目。将您的项目命名为事件应用项目。进行以下截图所示的选项选择，然后点击创建：

3. 在右侧，您将看到一个名为已启用 API（7）的标签页，如下所示。点击该标签页：

   这将显示默认启用的 API 列表。由于我们不会使用这些 API，请点击每个 API 旁边的禁用选项，并禁用每个 API。

   

   在禁用所有 API 后，您的屏幕将如下截图所示：

   

4. 我们下一个目标是启用我们的应用将使用的单一 API——Fusion Tables API。要做到这一点，请查找其他流行 API列。您将在以下截图所示的链接底部右边的组中找到它（寻找蓝色菱形图标）：

5. 点击此列中列出的Fusion Tables API。然后，在下一个屏幕中，点击以下截图所示的蓝色启用 API按钮：

6. 现在我们已经启用了Fusion Tables API，是时候创建凭据（软件验证其他软件真实性的方式）了。点击左侧垂直面板上的凭据选项，如下截图所示：

   这将弹出一个带有蓝色添加凭据按钮的窗口，如下截图所示。点击该按钮，然后选择最后一个选项——服务帐户。

   

   在下一个窗口中，进行以下截图所示的选项选择，然后点击创建：

   

   这将创建服务帐户并将一个特殊的文件下载到您的计算机上。此文件具有.p12扩展名。根据您浏览器的设置，您可能会看到一个如下所示的窗口。此窗口询问您将文件保存到何处。将文件保存到您的硬盘上的某个位置，并记住位置。稍后我们将此文件上传到 App Inventor：

   

   如果你没有看到之前显示的弹出窗口，那么很可能你的浏览器被设置为将所有内容下载到默认的 下载 文件夹。在这种情况下，.p12 文件将自动保存在该文件夹中：

   

   在此 .p12 文件已下载到您的计算机后，您将看到类似于之前显示的消息。点击 关闭 按钮以关闭消息。

7. 现在我们已经创建了将要使用的凭证，Google 将自动生成一个与该凭证关联的电子邮件地址。这个电子邮件地址是我们需要在 App Inventor 中指定的内容。如图所示，在 服务 账户下将显示一个长而复杂的电子邮件地址。复制此电子邮件并将其粘贴到您之前用于存储您创建的融合表 ID 的文档中。就像融合表的 ID 一样，您稍后还需要这个电子邮件地址：

8. 融合表 API 现已启用，并且凭证已建立。

通过服务账户电子邮件共享融合表

当你在前面的部分创建融合表时，你使用的是自己的 Google 账户。所以现在只有你可以访问和更改融合表。然而，为了让这个应用工作，你需要确保所有客人都有能力向融合表插入数据并从融合表读取数据。

在上一步中创建的服务账户电子邮件将非常有用，以实现这一点。该电子邮件与您的应用相关联，而不是任何个人。因此，只要该电子邮件地址有权访问融合表，任何其他使用该应用的人都应该能够访问融合表。

要启用对融合表的电子邮件级别访问权限，请回到您的融合表（在单独的浏览器窗口/标签页中打开）并点击右上角的蓝色 共享 按钮。这将打开 共享设置 菜单，如图所示。

将您之前保存的服务电子邮件地址复制并粘贴到 邀请人员 框中。确保框旁边的按钮上写着 可以编辑，然后点击 发送。

此步骤确保任何应用用户（而不仅仅是您）都能够向融合表插入数据或接收数据。

将应用连接到 Google 融合表

到目前为止，我们已经创建了一个融合表和 RSVP_Screen 的 GUI，并建立了我们的 Google API 凭证。现在是时候为 RSVP_Screen 创建代码了。

我们的目标

当用户点击 发送 RSVP 按钮：

1. 应用从 NameTextBox 中获取名称，从 NumGuestListPicker 中获取选择，并将 ItemsBringingTextBox 中的内容作为一个单独的行插入到融合表的相应列中。

2. 然后，应用程序清除文本框并重置 Listpicker 选择为 1。

我们创建了服务级凭证（.p12文件和服务级电子邮件地址），以便我们的应用程序有权从 Google 融合表发送或接收信息。接下来，我们需要将此信息提供给应用程序中的FusiontablesControl组件。我们希望在用户打开RSVP_Screen时执行此操作。

如以下截图所示，在设计师中的RSVP_Screen中，在组件列下选择FusionTablesControl1组件。这将显示FusiontablesControl1的所有属性。在KeyFile属性下，当前显示为无。然后点击上传文件按钮：

这将打开另一个弹出窗口，允许您选择要上传的文件。以下截图显示了弹出窗口。选择您之前下载到计算机上的.p12文件，然后点击确定按钮：

接下来，复制您在文档中保存的服务级电子邮件地址，并将其粘贴到ServieAccountEmail属性中。

最后，勾选UserServiceAuthentication复选框。

将数据推送到融合表

当使用多个屏幕时，您希望在块编辑器中根据屏幕组织您的块。由于我们即将为 RSVP_Screen 编程块，我们需要确保我们在块编辑器中的 RSVP_Screen。

要检查这一点，请查看 EventApp 名称旁边绿色菜单栏中的第一个三个按钮。如果你刚刚在设计师中完成了 RSVP_Screen 的工作并切换到块编辑器，你将位于 RSVP_Screen。如果不是，你可以通过点击显示另一个屏幕名称（如下一个截图所示的 Screen1）并从下拉菜单中选择 RSVP_Screen 来轻松导航到 RSVP_Screen：

当用户点击发送 RSVP按钮时，我们希望将所有三份数据插入到融合表中。以下截图显示了实现这一目标的块。这看起来可能有些吓人，但实际上相当简单：

由于我们希望应用程序对发送 RSVP按钮的点击做出反应，我们当然需要获取SendRSVPButton.Click事件。正如你可能已经猜到的，你将在SendRSVPButton抽屉中的块调色板中找到这个事件块。

紫色调用 FusiontablesControl1.InsertRow块使应用程序能够将一行数据插入到融合表中。在Fusiontables1块抽屉中，选择并将FusiontablesControl1.InsertRow块放置在SendRSVPButton.Click事件中。

如你所见，InsertRow块有三个空插槽。第一个插槽是你想要使用的表的Id。回想一下，我们在上一步创建表时找到了我们表的Id。在这里复制并粘贴那个Id，在一个空的Text块中。

在InsertRow块的第二个插槽中，我们将指定列名。当将包含多个数据片段（列）的行插入到 Fusion Table 中时，我们需要指定这些数据片段适合哪些列。回想一下，我们给列命名为Guest Names、NumGuests和ItemsBringing。在一个空的Text块中，输入列名，用单引号括起来，并用逗号分隔，如下截图所示（注意没有空格）：

InsertRow块需要的第三和最后一个信息是实际要插入到 Fusion Table 中的值。就像列名一样，我们将把多个数据片段输入到 Fusion Table 的单行中。与列一样，这三个数据片段必须用单引号括起来，并用逗号分隔，但我们将以不同的方式插入。为了从RSVP_Screen中的三个单独字段中收集的三个信息片段创建一个单引号、逗号分隔的文本，我们将使用一个join块。从内置的Text块抽屉中，将join块拖动并连接到InsertRow的值插槽。

我们需要连接 11 个东西——三个信息片段、六个单引号（每个信息片段前后各一个）和两个逗号来分隔三个单引号信息片段。默认情况下，join块连接两个东西。因此，我们需要为另外九个东西腾出空间。点击join块左上角的蓝色按钮，并将弹出窗口左边的字符串块拖动到弹出窗口右边的join块中，如下所示。这将创建更多的插槽在join块中。这样做九次：

第一个、第三个、第五个、第七个、第九个和第十一个join插槽将包含一个单引号，输入到文本框中。第四和第八个插槽将包含一个逗号，输入到文本框中。在第二个插槽中，应用将获取用户输入的第一组信息：他们的名字和姓氏。因此，我们需要一个允许用户输入名字的块。你将在NameTextBox块中找到它。选择并连接浅绿色的NameTextBox.Text块到第二个join插槽。

第六个插槽将获取用户从列表选择器中选择的客人数量。在 NumGuestListPicker 块中，选择并连接浅绿色的 NumGuestListPicker.Selection 块。在第十个插槽中，应用将获取用户输入的哪些食物/饮料项目的信息。在 ItemsBringingTextBox 块中，选择并连接浅绿色的 ItemsBringingTextBox.Text 块。

再次，回想一下我们在本节中指定的第一个目标：获取客人提供的三个信息，并将它们插入到 Fusion 表中。这三个数据来自 NameTextBox 文本属性、NumGuestListPicker 选择属性和 ItemsBringingTextBox 文本属性。这一步很复杂，但确保这一组块正确设置非常重要，因为如果不这样做，就不会有数据被插入到 Fusion 表中。

现在我们已经完成了 InsertRow 块，剩下要做的就是清除文本框并将 ListPicker 选择重置为默认值 1。由于块是从上到下执行的，我们希望在应用将信息发送到 Fusion 表之后清除文本框并重置 ListPicker，因此将下一组块插入到 InsertRow 块之后。找到 set NameTextBox.Text to、set ItemsBringingTextBox.Text to 和 set NumGuestListPicker.Selection 块，并将它们插入到 when SendRSVPButton.Click 块的底部。前两个块——set NameTextBox.Text to 和 set ItemsBringingTextBox.Text to——得到空白文本块。将文本框设置为空字符串将清除之前的数据。由于我们希望 set NumGuestListPicker.Selection 将 NumGuestListPicker 的默认选择属性重置为 1，附加一个 Math 0 块并将数字改为 1。最后，我们将调用一个过程来确保在客人输入信息时可能弹出的任何键盘都被隐藏。在 NameTextBox 块中找到调用 NameTextBox.HideKeyboard 块，并将其连接到块的底部。

确保不插入空白行

目前，InsertRow 没有任何方法来判断它所插入的数据是否有效。例如，用户可能会不小心点击 SendRSVPButton，这将插入一个空白行。我们可以在插入任何内容之前检查确保客人至少输入了名字来解决这个问题。

为了实现这一点，我们可以将我们创建的所有块放置在一个 if / then 语句中。我们将检查的条件是 NameTextBox.Text 是否为空。如果 NameTextBox.Text 不为空，这意味着客人必须已经输入了一些内容，我们将允许插入操作发生。“如果 NameTextBox.Text 为空，则 if 语句不成立，并且 then 块集将不会触发。结果，什么也不会发生。以下屏幕截图显示了 if 语句的块：

您可以在 Build In Logic 块抽屉中找到那块浅绿色的（不等）块。该块将显示一个等号，如下所示：

点击箭头并从下拉菜单中选择不等选项。在第一个空白处插入 NameTextBox.Text 块，在第二个空白处插入一个空的 Text 块。现在我们的代码表明，如果姓名字段不为空，则应该获取数据并将其插入到 Fusion Table 中。

查看嘉宾名单

现在我们已经实现了 RSVP_Screen，我们为客人提供了一个发送 RSVP 的方式，并将不同客人的所有 RSVP 聚集到 Fusion Table 中。在任何活动组织应用中，让其他人能够看到已经 RSVP 的嘉宾名单是有帮助的。

GuestList_Screen 的目的就是——让所有参会者（包括组织者）能够看到还有谁会参加这个活动。为了显示在 Fusion Table 中收集到的信息，我们将使用一个标签。在设计师窗口中，导航到 GuestList_Screen。就像在 RSVP_Screen 中一样，首先将一个 VerticalArrangement 拖动到 GuestList_Screen 的顶部区域，位于 HorizontalArrangement 之上，该区域包含所有导航按钮。将 VerticalArrangement 的 BackgroundColor 属性设置为 None。同时设置 Height 和 Width 属性为 Fill parent。现在将一个 Label 组件拖动到 VerticalArrangement 中。将标签重命名为 GuestListLabel。将 GuestListLabel 的 BackgroundColor 属性更改为 None。将 FontSize 属性更改为 18（根据您的设备屏幕大小和屏幕分辨率，您可能需要尝试此属性的多个值）。最后，将 TextColor 属性更改为 White。然后添加一个 FusiontablesControl 组件，就像在 RSVP_Screen 中做的那样。您可以在以下屏幕截图中查看更改：

就像在 RSVP_Screen 中一样。我们将更改 FusiontablesConrol1 组件的三个属性。由于您已经知道如何更改三个 FusiontablesControl1 属性——KeyFile、ServiceAccountEmail 和 UseServiceAuthentication——我们在这里不会详细介绍。只需遵循我们在 连接应用至 Google Fusion Table 部分中完成的步骤即可。

在 RSVP_Screen 中，应用将信息发送到融合表，而在 GuestList_Screen 中，应用从融合表请求信息，接收它然后显示。要编程这个，前往Blocks编辑器。

编写块代码 – 请求数据

我们需要编写的第一个代码是请求从融合表获取数据。在块抽屉中点击GuestList_Screen，并拖动when GuestList_Screen.Initialize事件。这个事件会在每次屏幕启动时自动触发。我们希望在GuestList屏幕启动时从融合表请求数据。因此，我们将添加到这个事件的call FusiontablesControl1.GetRows块。这个块将允许我们从融合表请求数据。你可以在FusiontablesControl1块抽屉中找到这个块。GetRows块需要两块信息来从融合表获取行：表的 ID 和列名。我们在创建融合表时已经识别了表 ID。将这个 ID 粘贴到GetRows块的tableId插槽中，使用一个Text块。使用另一个Text块来指定列名，'Guest Names'。注意单引号；就像在InsertRows块中一样，这里的列名也必须用单引号。下面的截图显示了完成的块集：

编写块代码 – 接收数据

之前的块从融合表请求数据，现在我们需要编写接收从融合表信息的数据。when FusiontablesControl1.GotResult块执行这个操作。你可以在FusiontablesControl1块中找到它。正如我们之前提到的，当从融合表接收到数据时，这个事件会被触发。数据放置在这个事件的结果变量result中。

默认情况下，我们从融合表接收到的数据是一块文本，每行放在自己的行上。这些数据还包括列标题。所以，假设我们的融合表中的 Guest Names 列有三行，名字分别是 Olivienne、Dash 和 Eva。那么放置在结果变量中的数据有四行——Guest Names、Olivienne、Dash 和 Eva（列标题后面跟着三个名字）。

由于我们希望when FusiontablesControl1.GotResult事件自动显示客人名字（以及标题），选择并连接set GuestListLabel.Text to块。我们希望它显示什么？result变量。将光标悬停在嵌入在金色事件块中的浅橙色result变量上。会出现一个带有两个橙色块的弹出窗口，如下面的截图所示。选择get result块并将其连接到GuestListLabel.Text块中的开放插槽：

就这些！现在您的 GuestList_Screen 将显示所有已 RSVP 的客人。以下截图显示了完成的块集：

是时候尝试您的应用了！填写 RSVP 表格以查看它是否填充到您的 Fusion Table 中。然后，应用是否清除 RSVP 屏幕字段并在 Guest List 屏幕上显示名称？

如果您还记得，我们设置了我们的应用以收集 RSVP 之外的其他数据，除了客人名单。我们创建了字段，让客人可以输入他们要带的人数以及要分享的食物/饮料项目。您也可以将此信息显示给其他客人查看，但真正重要的是这些数据是为主持人准备的，他可以轻松地查看我们创建的 Fusion Table 列中的名称。

共享事件应用

使用事件应用，我们希望向您介绍收集和检索数据的过程。现在，您从更多开发者的角度接近应用，您可能已经意识到，每次您将电子邮件地址或其他信息输入到应用中时，这些数据就会被存储到数据库中。但是，正如我们在本章开头提到的，Fusion Tables 作为数据库有其局限性。如果您将事件应用的原样与多个活动组织者共享，他们将在不同的设备上开始使用它，那么将出现问题，因为该应用使用单个 Fusion Table 作为后端。如果许多人使用该应用为他们的不同活动，所有不同设备的数据都将汇总到一个单独的 Fusion Table 中。当然，这将给活动组织者（和客人）造成极大的混乱，因为不同派对的全部数据都将混合在一起！

在我们概述可能的解决方案之前，让我们讨论一下我们在该应用中做了什么。由于我们的应用访问和修改 Fusion Table，我们必须创建 Google 服务级别身份验证。这一步骤确保我们的应用获得 Google 授权以访问 Fusion Tables。然后，我们将 Fusion Table Id 插入到我们的应用中，让应用知道要访问哪个 Fusion Table。此外，我们为我们的应用创建了一个服务电子邮件地址，并使用此服务电子邮件地址共享 Fusion Table。这些步骤确保 Fusion Table 允许我们的应用读写数据。因此，我们基本上有三个不同的实体在相互交互 - Google 服务级别身份验证、我们的应用和 Fusion Table。

解决与事件应用关联的单个 Fusion Table 问题的方法之一是，开发者创建不同副本的应用，这些应用使用不同的 Fusion Table 副本。这意味着每个应用副本都必须更新为新副本的 Fusion Table Id。此外，这也意味着必须将 Fusion Table 重新共享给应用的服务级别电子邮件地址（使用原始服务电子邮件地址）。

这比听起来容易。首先，打开你之前使用的融合表，转到文件菜单并选择“制作副本”。这将创建一个包含我们对列和设置所做的所有更改的新融合表副本。如果你的上一个融合表中有任何数据，你需要清除数据。接下来，重复在“创建 Google 融合表”部分最后几段中概述的融合表 ID 识别步骤。（由于你正在创建一个新的融合表，你必须使用这个新表的 ID。）你还需要为这个新的融合表重复“通过服务账户电子邮件共享融合表”部分（使用原始服务电子邮件地址）。

最后，在“块”编辑器中，将新的融合表 ID 粘贴到文本框中（连接到调用“FusiontablesControl1.InsertRow”块的“TableID”槽），以确保应用程序使用新的融合表。

注意

如果你想要与 7 个人分享你的事件应用，你需要重复这些步骤 7 次，以确保每个人都有一个具有唯一融合表的应用版本。

摘要

在本章中，我们探索了许多 App Inventor 高级功能，特别是数据库。Google 融合表使我们能够在后端存储数据。我们学习了如何创建新的融合表，以及如何建立 Google API 凭证，以便我们的应用有权访问 Google 融合表。最后，我们学习了如何从融合表中插入、检索和显示数据。

你正在积累一个相当丰富的编程工具包！在下一章中，你将学习另一个可以帮助扩展你的编程技能的工具。循环是一种结构或指令序列，它允许你重复执行步骤，直到满足某些条件。这很方便，因为，我们不需要为长列表中的每个项目复制和粘贴相同的代码块来执行相同的功能，我们可以编写一组代码块来重复执行。

第七章. 使用抽奖应用学习循环

在前面的章节中，你多次使用了if-then-else控制块。if then else块使应用能够做出决策。这是任何编程语言中都存在的根本计算概念之一。还有一个第二个根本的编程概念——循环，我们将在本章中探讨。循环允许程序重复代码。更具体地说，在 App Inventor 中，一个循环将允许我们多次执行一系列的代码块。

为了说明循环的概念，我们将在本章中创建一个数字抽奖应用。如果你不熟悉传统的（非数字）抽奖，我们将解释。抽奖组织者给参与者一张带有数字的票，并将该票的副本放入碗中。当所有票都已发放（并放入碗中）后，抽奖组织者然后从碗中随机抽取一张票（通常戴着眼罩）并宣布中奖票号。持有匹配票号的参与者随后领取奖品。

使用 App Inventor 创建数字抽奖应用并不是一个新想法。其他人之前已经创建了类似的程序。例如，www.appinventor.org/content/howDoYou/RecordingInfo/phone展示了如何创建一个非常简单的数字抽奖应用。我们将扩展这个想法并创建一个更通用的数字抽奖应用。对于我们的数字抽奖应用，参与者将带有特定代码的短信发送给抽奖组织者。抽奖组织者在其手机上运行该应用，该应用跟踪所有参与者的 incoming 短信和电话号码，并选择一个随机获胜者。然后，应用通知获胜者她或他已经中奖，并通知其他参与者他们没有中奖。这是一个适合聚会、活动或会议休息时间的有趣参与游戏。

在本章中，你将学习以下内容：

• 为抽奖应用创建用户界面

• 创建并初始化一个列表和一个变量

• 使用短信组件发送/接收短信

• 向列表中添加项目

• 选择一个随机获胜者

• 通知获胜者他或她已中奖

• 使用循环向所有未中奖的参与者发送相同的通知电子邮件

• 清除列表和变量

创建项目和构建 GUI

在准备使用抽奖应用之前，抽奖组织者将向所有希望参加抽奖的人提供两份信息：组织者的电话号码和一个代码。抽奖组织者可以通过口头分享或写下这些信息供所有人看到来分发这些信息。参与者然后将带有代码的短信发送到抽奖组织者的电话号码。当应用（在抽奖组织者的手机上运行）接收到包含代码的所有短信时，它将把所有发送者的电话号码保存在列表中。然后，抽奖组织者将点击一个按钮，从电话号码列表中随机选择一个获胜者。获胜的电话号码将显示在抽奖组织者的手机屏幕上，应用还将向获胜者的手机发送一条短信通知，表明他们已经获胜。同时，应用将通知其他参与者他们没有获胜。

创建新项目

您将首先创建一个新项目。在这个阶段，这个步骤可能对您来说非常熟悉，因为您已经在之前的章节中做过几次了。如下面的截图所示，在登录 App Inventor 后，点击开始新项目按钮。然后，在随后的弹出消息框中，为这个应用提供一个合适的名称。我们将使用名称 Digital_Raffle。

创建用户界面 (UI)

现在我们已经创建了一个新的项目，是时候添加我们将要使用的第一个组件了，一个标签。抽奖组织者将创建一个代码，与所有参与者分享。由于抽奖组织者可能要举办多次抽奖，我们将使用一个标签来在组织者的手机上显示代码。对于这个应用，我们选择了代码：我想赢。我们将编程这个应用来比较这个代码，我想赢，与抽奖组织者手机接收到的任何短信文本。如果匹配，应用将把相关的电话号码保存到列表中。如下面的截图所示，从用户界面调色板抽屉中拖动一个标签到查看器：

在此阶段，我们想再次强调适当地命名组件的重要性。合适的命名有助于程序员在 Blocks 编辑器中创建行为时。此外，合适的名称使理解代码的逻辑更加容易。最后，如果您在首次创建此应用六个月后决定扩展它，恰当地命名的组件将帮助您记住每个组件的目的。

既然如此，将Label1重命名为CodeLabel。要重命名Label1，在组件列中选择Label1。回想一下，选择一个组件将在屏幕上将其背景变为绿色，这表示它处于活动状态。然后，单击面板底部的重命名按钮。在弹出的窗口中，输入新名称。

我们将使用此标签来显示代码（文本）I want to win。在文本属性框中输入I want to win（不带引号）。为了使代码易于查看，我们将字体大小属性设置为45。最后，将此标签的宽度设置为填充父级。

接下来，我们将在CodeLabel下方添加一个按钮。这是抽奖组织者将点击以选择获胜者的按钮。如图所示，从用户界面调色板中将Button拖放到Viewer上：

将Button1重命名为WinnerButton。默认情况下，按钮的文本属性显示为Button1 的文本。通过在文本框中单击并输入Pick Winner来更改文本属性，使其更具信息性。同时，将宽度属性更改为填充父级，以便按钮的宽度与上面的标签相同。

在添加 CodeLabel 和 WinnerButton 后，添加第三个组件，另一个标签，用于显示获胜者的电话号码。就像CodeLabel一样，将另一个Label拖放到 WinnerButton 下方，并将其重命名为WinnerLabel。由于我们将在选择获胜者后使用此标签，因此删除文本属性下的所有内容，以便WinnerLabel不显示任何内容。为了保持一致的外观，将宽度属性设置为填充父级。

最后，将字体大小属性设置为35，以便显示的获胜者电话号码不会太小。以下截图显示了添加并配置了WinnerLabel的应用程序：

由于抽奖应用可能会被多次使用，我们需要有一个重置应用的方法。为此，在WinnerLabel下方添加一个额外的按钮。将其重命名为ClearButton，将按钮的宽度属性更改为填充父级，最后将文本属性更改为Clear，如以下截图所示：

接下来，我们需要一种方法让应用发送和接收文本消息。为此，使用Texting组件。您将在社交调色板抽屉中找到Texting组件。将Texting组件拖放到Viewer上。如图所示，Texting组件是一个不可见组件，位于 Viewer 下方。我们不需要为此组件设置任何属性。

这完成了抽奖应用的 GUI。在下一节中，我们将使用 Blocks 编辑器编程应用的行为。

编程数字抽奖应用的行为

总结一下，当应用收到参与者的短信时，如果短信正文包含指示的代码（在这种情况下，I want to win），则发送者的电话号码将被添加到列表中。当抽奖组织者点击 WinnerButton 时，应用将从该电话号码列表中随机选择一个赢家。然后，应用将向赢家发送一条短信，通知他们获胜。应用还将向所有其他参与者发送短信，让他们知道他们没有获胜。

我们将通过完成以下子步骤来实现所有这些：

• 创建和初始化列表和变量

• 接收短信，如果代码匹配，则将发送者的号码添加到列表中

• 从列表中随机选择一个项目（赢家）

• 发送赢家通知

• 向其他参与者发送通知，让他们知道他们没有获胜

创建和初始化变量和列表

对于这个应用，我们需要一个列表来存储所有参与者的电话号码。我们还将使用一个变量来临时存储获胜号码。要创建列表和变量，请转到Variables块面板，并将最顶部的块initialize global name拖动到如下截图所示的位置。这样做两次。

双击两个块中的“name”，并输入新名称，列表为ListOfNumbers，变量为WinningNumber，如下截图所示：

每次你（作为程序员）创建一个列表或变量时，都需要用初始值对其进行初始化。对于我们的列表，我们希望从一个空列表开始。App Inventor 使这变得很容易。在Lists块中，选择create empty list块，如下截图所示，并将其连接到initialize global ListOfNumbers to块：

对于WinningNumber变量，我们将将其初始化为0。在Math块中，选择0块（如下截图所示）并将其连接到initialize global WinningNumber to块：

完成这些步骤后，列表和变量的初始化块将看起来像以下截图：

接收参与者的短信

在本节中，你将学习如何接收参与者的短信并将他们的电话号码存储在列表中。

在创建 UI 时，我们在设计标签中添加了不可见的 Texting1 组件。我们将使用此组件来发送和接收短信。如图所示，此组件有一个单独的金色事件块，当 Texting1.MessageReceived 时。每当抽奖组织者的设备收到任何短信时，此事件将被触发。

点击when Texting1.MessageReceived事件块，将其添加到查看器中。如图所示，此事件有两个相关变量——number和messageText。每当收到短信并触发此事件时，number变量包含发送者的电话号码，而messageText包含短信的内容。

注意

当你想存储一些数据时，你可以创建全局变量。在之前的步骤中，我们明确创建了名为ListOfNumbers和WinningNumber的自己的全局变量，并初始化了它们。一旦创建了一个全局变量，应用程序中的任何块都可以使用该变量。

另一方面，当应用程序运行时，各种事件可能也需要暂时存储数据，因此可能需要一个变量。这些内置在块中的变量被称为局部变量。它们出现在一个块中，可以通过鼠标悬停来访问。它们的生存期限于特定的事件。应用程序的其他块不能使用它们。实际上，如果你尝试在它们所属的事件块之外使用变量，你会得到一个错误消息。局部变量的例子是number和messageText；它们与特定的块when Texting1.MessageReceived相关联。

因此，number和messageText变量存储与when Texting1.MessageReceived事件块相关的关键数据。每当收到短信时，此事件将被触发，与短信相关的信息（发送者的电话号码和短信内容）将被放入这两个变量中，并可以被该事件内的块使用。

由于抽奖组织者的手机可以在收到抽奖短信的同时收到与抽奖无关的短信，我们希望过滤掉与抽奖相关的短信。这是我们设计代码（我想赢）的主要原因，以过滤掉与抽奖相关的短信。

请记住，与when Texting1.MessageReceived事件相关的messageText变量包含短信的文本。因此，一旦收到短信，我们希望应用程序检查messageText变量是否匹配我想赢。你能想到我们会用什么类型的块来确定代码是否匹配吗？

如果你想到了if then块，你是正确的！你记得在哪里找到它吗？选择一个if then块并将其连接到when Texting1.MessageReceived事件。如你所知，我们需要将一个条件块插入到if插槽中。在这种情况下，我们想要匹配两个文本。App Inventor 使这变得容易。如下面的截图所示，在Text块中，选择并连接compare texts块到空的if插槽：

由于我们想要检查两条短信是否匹配，请点击小于符号旁边的向下箭头并选择等于符号，如下面的截图所示：

将鼠标指针悬停在事件块中浅橙色messageText变量上。这将触发一个弹出窗口，如下面的截图所示。选择getMessageText块并将其放置在等于符号左侧的compare texts块的第一个开口处。此块将从传入的短信（任何短信）获取文本：

对于第二个开口，我们想要输入我们创建的代码，以便我们可以将其与接收到的短信文本进行比较。如果你还记得，在Designer属性中，我们将Codelabel的Text属性设置为我们的代码，I want to win。因此，在Screen1下，转到CodeLabel块并选择CodeLabel.Text块。

将CodeLabel.Text块插入到compare texts块中等于符号右侧的开口处，如下面的截图所示。我们现在已经编程应用以检查短信（messageText）是否与CodeLabel的Text属性（代码，I want to win）匹配。

将所有参与者的电话号码添加到列表中

如果短信确实包含正确的代码，我们知道这条短信来自抽奖参与者。因此，我们希望应用将发送者的电话号码添加到我们之前创建的列表中。为此，转到List块并选择add items to list块，如下面的截图所示。将其添加到if/then块的then开口处。

add items to list块需要两块信息，我们将将其附加到空插槽——要添加项目的列表名称和要添加的项目。要指定列表，转到Variables块并选择get块并将其连接到add items to list块的list插槽。

然后，点击get块的向下指向的三角形，并从下拉菜单中选择如图所示的global ListOfNumbers。当我们初始化一个全局变量，就像我们对ListOfNumbers所做的那样，它就可供我们在整个应用程序中使用。这就是为什么它的名字出现在下拉菜单中的选项中。

如我们之前提到的，与Texting1.MessageReceived块关联的number变量包含发送者的电话号码。您可以使用get number块来访问此号码。将鼠标悬停在number变量上以查看弹出窗口，如下面的图像所示。选择get number块并将其连接到add items to list块的item插座。

以下截图显示了接收短信的完成块集：

到目前为止，我们已经编程了应用程序执行以下操作：接收短信，验证消息文本是否包含I want to win代码，如果是，则将发送者的电话号码添加到我们创建的列表中（ListOfNumbers）。如果短信不匹配 CodeLabel Text，则不会发生任何操作（电话号码不会添加到列表中。）

选择获奖者

在设计 UI 时，我们添加了一个WinnerButton，抽奖组织者将点击它来随机选择一个获奖者。App Inventor 也使这变得很容易。我们将使用pick a random item块从ListOfNumbers中选择一个获奖者。您可以在Lists块下找到pick a random item块，如下面的截图所示：

由于抽奖组织者将点击一个按钮来选择获奖者，请选择WinnerButton.Click事件（在WinnerButton块中找到）。接下来，转到Variables块，选择一个set to块，并将其放置在WinnerButton.Click事件中。在set to块中，点击向下指向的三角形并选择global WinningNumber。使用我们之前选择的pick a random item块连接到此块。pick a random item块有一个开放的插座，表示一个列表。你能想出哪个块可以连接到它吗？由于我们希望随机选择的项（电话号码）来自我们的数字列表，请从上一节中的add items to list块复制并粘贴get global ListOfNumbers块，并将其连接到pick a random item块。以下截图显示了到目前为止完成的块集：

我们在这里究竟在编写什么代码？我们正在编程应用以从列表（所有电话号码列表）中随机选择一个项目（电话号码）并将其存储在WinningNumber变量中（将全局 WinningNumber 设置为块）。你可能想知道为什么我们需要这样做。正如本章后面将会明显显示的，我们将多次重用这个获奖号码。因此，我们需要暂时将其存储在某个地方。

一旦我们得到获奖号码，我们希望应用在组织者的手机上显示获奖号码。为此，我们将设置WinnerLabel的Text属性为WinningNumber。如图所示，选择设置 WinnerLabel.Text（在WinnerLabel块下）并将其连接到获取全局 WinningNumber块（你将在变量块抽屉中找到）。它将列为一个橙色的获取块，你需要点击向下指向的三角形来从下拉列表中选择全局 WinningNumber。你的块应该类似于以下截图：

让我们回顾一下。我们已经编程应用以从所有参与者的电话号码（全局ListOfNumbers）中随机选择一个获奖者（电话号码），我们将把获奖电话号码保存到变量全局 WinningNumber变量中，并在WinnerLabel中显示获奖号码。下一步是通过向获奖号码发送短信来通知获奖者。

通知获奖者

我们之前用来接收参与者短信的不可见Texting1组件将再次被使用。为了向获奖者发送短信，我们将设置Texting1.Message属性和Texting1.PhoneNumber属性。在Texting1块下找到设置块。选择并将它们放置在WinnerButton.Click事件中，如图所示。对于Texting1.Message属性，连接一个空白文本块并输入信息"恭喜！你赢了"。对于Texting1.PhoneNumber属性，复制并粘贴全局 WinningNumber块并将其连接到空插槽。

Texting1组件有一个名为call Texting1.SendMessage的紫色块。这是实际发送短信的块。Texting1组件的PhoneNumber属性用于接收者的号码，Message属性用于短信正文。因此，在实际上传短信之前，使用call Texting1.SendMessage块发送短信之前，正确设置这两个属性非常重要。如图所示，再次转到Texting1块，并将紫色call Texting1.SendMessage块拖到所有块的底部：

我们现在已经编写了抽奖应用，可以向获奖者发送祝贺通知。

通知其他人

通常，获胜者会兴奋地宣布自己获胜。但如果没有发生这种情况，我们希望向所有未获奖的参与者发送通知消息，以确保没有人对抽奖结果感到困惑。向ListOfNumbers中的所有项目发送一个“很抱歉，您没有获奖”的通知似乎很合理，因为这个列表存储了所有参与者的电话号码。然而，这个逻辑有一个缺陷。你能猜出问题是什么吗？目前，ListOfNumbers包含所有号码，包括获奖号码。因此，在我们将ListOfNumbers作为“很抱歉”通知的来源之前，我们需要从这个列表中移除获奖号码。

如以下截图所示，我们将使用移除列表项块来移除获奖号码。您可以在List块中找到移除列表项。此块需要两份数据（因此有两个空插孔）：列表的名称和要移除的项目（索引）的位置。指定列表的名称很容易。只需复制并粘贴，并将全局 ListOfNumbers块连接起来。

找到获奖号码的位置稍微复杂一些。我们需要添加另一个List块，即列表中的索引块来找出这个位置。如图所示，将列表中的索引块连接到移除列表项块的空索引插孔：

注意

索引是列表中一个项目的位置。

移除列表项块可以从特定位置移除一个项目。首先，我们需要确定获奖号码（即那个东西）在列表中的位置。然后，我们将使用这个位置来移除获奖号码。

索引是列表中一个项目的位置。

让我们回顾一下。我们已经确定了获奖号码在列表中的位置，并移除了该位置的项目，从而从列表中移除了获奖号码。现在，我们准备使用这个列表向未获奖的参与者发送通知。

就像之前为获胜者创建的通知消息一样，我们将重用Texting1组件向所有未获奖的参与者发送通知。复制并粘贴setTexting1.Message to块（这将复制附加的文本块）。将文本块中的文本从“恭喜 !! 您获胜”更改为“很抱歉，您没有获胜”。您可以根据自己的喜好更改此消息并个性化它。

注意

注意，块执行始终是自上而下的。因此，实际上，在将通知发送给失败参与者之前，获胜号码已被从ListOfNumbers中移除。此外，Texting1.Message设置为块消息“很抱歉，你没有赢”将覆盖先前的文本消息“恭喜你！！你赢了”。

将通知发送给获胜者和这种通知之间的重要区别是，此通知将发送到列表ListOfNumbers中的所有号码，除了获胜号码。本质上，这意味着我们需要重复将 Texting1.PhoneNumber 设置为块，然后是调用 Texting1.SendMessage块——对于ListOfNumbers中的每个项目各一次。这使我们来到了循环的概念！

使用循环

任何编程语言中，包括 App Inventor，都存在的一个基本编程概念被称为循环。循环允许我们重复代码，因此我们将在这里使用循环。我们将在循环中放置两个块：将 Texting1.PhoneNumber 设置为和调用 Texting1.SendMessage。

循环可在控制块抽屉中找到。有不同类型的循环。我们将使用对于列表中的每个项目循环，如图所示。选择对于列表中的每个项目循环并将其放置在WinnerButton.Click事件的底部。此循环要求我们指定一个将与循环一起使用的列表。循环允许我们将放置在循环内的任何块重复一次，对于关联列表中的每个项目。当循环运行时，在每次迭代期间，列表中的相应项目也将放置在项目变量中。当循环第一次执行时，ListOfNumbers的第一个项目将可用在循环关联的项目变量中。同样，当循环第二次执行时，第二个项目将在项目变量中可用，依此类推：

此循环将执行与ListOfNumbers中电话号码数量相同的次数。要指定列表，只需复制并粘贴，并将获取全局 ListOfNumbers块连接到循环中的空列表插槽。

现在循环的轮廓已经准备好了，我们需要指定循环体。首先，将将 Texting1.PhoneNumber 设置为块拖动到循环的do部分，如图所示：

接下来，将鼠标悬停在对于列表中的每个项目块的项目变量上，并拖动获取项目块并将其连接到将 Texting1.PhoneNumber 设置为块的空插槽，如图所示：

接下来，复制并粘贴，并将紫色调用 Texting1.SendMessage块放置在循环的底部do部分，如图所示：

此循环逐个访问列表上的每个项目，将其设置为Texting1.PhoneNumbers，并向该电话号码发送短信。因此，这个循环使我们能够多次重复将 Texting1.PhoneNumber 设置为积木，然后是调用 Texting1.SendMessage积木（对于ListofNumbers中的每个项目）。

数字抽奖现在已完成。获胜者已经被告知获胜，其他参与者已经被告知他们没有获胜（请注意，通常会给获胜者某种奖品）。

清除列表和变量

在使用抽奖应用后，如果您想用不同组别的参与者举办另一场抽奖，您需要清除ListOfNumbers列表和变量WinningNumber，这两者是我们（程序员）明确创建的。应用中使用的其他变量是局部变量（number和messageText来自Texting1.MessageReceived事件）。这些不是由我们创建的，而是由积木本身生成的；因此，这些变量会由程序自动使用和清除。

清除列表和变量以重置应用有两种方法。第一种方法不需要编程。您可以简单地关闭应用程序并重新打开它。这将使列表变为空，并将WinningNumber设置为 0。你能猜出重置应用的第二种方法吗？如果你还记得，我们在设计师中为 UI 创建了一个ClearButton功能。我们可以编程这个ClearButton来清除应用。

在ClearButton积木中，选择ClearButton.Click事件。此积木将帮助我们清除存储参与者电话号码的列表和存储WinningNumber的变量。回想一下，当我们开始编写应用时，我们初始化了全局变量。我们将list设置为空，并将变量设置为0。因此，现在在当 ClearButton.Click事件中，添加积木执行相同的事情。您已经在这个应用中编程过一次，所以我们想象您将再次配置这些积木会非常熟练。但是，以防万一您需要复习，选择设置全局 ListOfNumbers积木并将其连接到创建空列表积木，然后选择设置全局 WinningNumber积木并将其设置为0。您的最终积木组合将类似于以下截图：

摘要

在本章中，我们创建了一个有用且有趣的应用程序，您可以使用它来举办数字抽奖。我们探讨了全局和局部变量以及文本组件的许多方面，以发送和接收短信。我们还了解了一些与列表相关的先进积木——选择随机列表项、在列表中搜索项以及删除项。最后，我们探索了编程的一个重要基本概念——循环。我们看到了循环如何使我们能够多次重复行为（积木堆）。

在下一章中，我们将提供一些关于通过设计提示和分享选项来扩展您的移动应用开发技能的技巧。

第八章. 扩展您的移动应用开发技能

在本书的教程中，您一直在提升您的应用开发技能。毫无疑问，您渴望在此基础上构建知识，从头开始创建应用。因此，我们想为您提供各种建议，以扩展您的技能集。在本章中，您将学习以下内容：

• 设计原则

• 设计工具

• 研究应用市场

• App Inventor 附加功能

• 分享您的应用

设计原则

除了学习使用积木编码外，在开发移动应用时还有很多需要注意的事项。一个重要方面是设计。我们所说的设计是什么意思？设计这个词似乎意味着外观和感觉，但它还包括功能。一个设计良好的应用不仅视觉上吸引人，而且易于导航和直观。当刚开始构建移动应用时，人们往往希望应用能做所有的事情，并且有很多花哨的功能。但事实上，您希望应用在功能和目的上清晰直接。比如说，您正在构建一个显示用户输入的书籍评论的应用。您不希望它也包含音乐评论。仅仅因为您的应用可以轻松添加更多类别，并不意味着您应该添加更多内容或功能。在开始时，最好为您的应用设定一个明确、精确的目的和范围。而且，由于移动设备屏幕相对较小，拥有一个干净、简单且易于导航的界面至关重要。

以用户为中心的设计

想想您自己使用移动应用的时候。您是否在一个应用上花费了几个小时？不太可能。大多数人使用应用是断断续续的，有很多中断。据说人们在忙碌、迷路或无聊时使用移动应用。前两种情况包括对快速信息的需求，但第三种并不一定意味着长时间的使用。一个无聊的人可能只需要短暂的分散注意力或娱乐自己几分钟。了解设计原则的最好方式是通过开发者的视角来观察 Android 应用。研究人们何时、如何以及多久使用移动应用。监控您自己应用的行为，并询问他人他们最常使用应用的时间。是在排队时？在乘坐公共交通工具时？去见某人时？在转到其他事情之前，您在一个应用上花费了多少时间？接下来，分析性地查看应用——您经常使用的以及新的应用。检查一切——字体、颜色、按钮或导航工具的位置，看看它们是如何运作和显示的。记录您的发现，记下您期望看到和意外发现的因素。

请记住，手机用户会用他们的拇指来浏览你的应用，因此确保按钮足够大以便于导航是至关重要的。如果你使交互元素太小且难以触发，用户可能会感到沮丧并避免使用你的应用。底部导航栏也使得用拇指控制应用变得容易，这也是为什么你会在许多应用中看到这个标准。此外，请记住，并非所有用户都有完美的视力。创建具有高对比度颜色和易于所有年龄段人群阅读的文本的应用。让各种各样的人查看你的应用并就颜色、对比度、可读性和导航便捷性等方面提供反馈是一个很好的主意。

视觉层次

你在元素中根据重量或重要性显示的方式称为视觉层次。你可以通过使用字体大小、颜色、位置、对比度、形状或一致性来创建视觉重要性。有些 Android 元素对用户来说很熟悉，例如包含按钮的动作栏，这些按钮可以轻松地在应用中移动。用户会期望在每个屏幕上找到一致性以及导航的便捷性。例如，在游戏应用中，停止、播放或退出应该很简单。在事件应用中，我们展示了通过改变按钮的文本颜色来让用户知道他们所在的屏幕的一种方法。你还可以使用其他视觉提示，例如突出显示特定的导航按钮或创建对比度高的背景颜色。这些建议中的一些可能看起来很明显，但当你开始从头创建应用时，你会惊讶地看到有多少人忘记了这些显而易见的事情。

响应式设计

响应式设计可以指很多事物。你的应用对用户友好吗？它是否做了用户认为它会做的事情？应用是否按预期响应用户交互？请注意，响应性和速度不是同一回事。如果你的应用需要时间来加载某些内容，只要应用在响应用户输入并且用户知道应用正在响应，这是可以的。响应式设计还意味着应用会根据用户的屏幕尺寸进行调整。在创建应用时，你不知道用户会使用手机还是平板电脑。某个屏幕尺寸上看起来不错的内容，如果不确保其正确显示，则不一定能在另一个屏幕尺寸上正确显示。响应式设计就是为任何屏幕尺寸创建布局和内容。App Inventor 使这一过程变得简单。在Screen1的属性面板中，有一个名为Sizing的属性，如下面的截图所示。默认选项是固定；但如果你点击该词，将显示第二个选项：响应式。

选择响应式后，之前在查看器中灰显的选项将变为可见。立即，在查看器窗口上方，你现在可以点击检查以查看平板尺寸预览旁边的复选框。一旦这样做，文本将变为“取消选中”，查看器将显示你的应用的平板预览，如下面的截图所示，其中包含EventApp：

如果你没有平板电脑，想要测试你的应用在平板电脑上的外观，这尤其有帮助。

研究应用市场

如果你渴望将你的想法转化为移动应用，理解应用市场至关重要。你该如何做到这一点？你可以通过研究移动应用来实现。开始查看 Google Play 或其他 Android 应用市场，看看哪些应用是新的或流行的。最重要的是，使用这些应用，记下你的反应，你喜欢和不喜欢的地方，并阅读评论。发现为什么某些应用在某一类别中比其他应用更受欢迎，哪些应用功能吸引了你，以及哪些类型的应用正在流行。从开发者的角度研究应用将帮助你看到内容、设计和用户体验中的主题。阅读应用描述，看看例如，一个棋类游戏的简介是如何与其他棋类游戏的品牌定位不同的。正如我们在本书中一直推荐的那样，记录你的观察、反应和精选内容，因为就像任何市场一样，随着时间的推移，变化是不可避免的。阅读你 6 个月前在市场上注意到的内容，并将其与你上周的研究发现进行比较，这将是有帮助的。

如果你没有购买应用的预算，不要担心；你仍然可以对免费应用或导致应用内购买的应用进行有价值的研究。注意哪些功能是免费的，哪些被认为是更有价值需要付费的。当你达到应用内购买的阶段，你想要进行购买吗？为什么或为什么不？免费应用有广告吗？如果有，是哪些应用？哪些广告？如果你升级了应用，免费增值版本和付费版本之间的区别是什么？

这种研究类型在你完成这本书并需要帮助决定自己要创建哪种类型的应用程序时将非常有价值。找到成功创建应用程序的最简单方法就是提供用户想要的东西。你可以通过研究哪些应用程序正在销售和流行来发现用户的需求。许多初出茅庐的应用程序开发者没有研究应用程序市场，而是只专注于提出他们喜欢的一个想法，并将这个概念转化为原型，希望人们会发现这个应用程序，下载它，使用它，并喜欢它。通过关注用户已经下载的内容以及他们愿意为之付费的内容，你可以创建一个理解了哪些内容已经吸引用户的理解的应用程序。然后，你可以决定是跟随这个趋势还是颠覆它。研究可以帮助确保一旦你将应用程序上传到应用程序市场，你的应用程序就会更加成功。使用你应用程序的人越多，你将获得的反馈就越有价值。评分和评论可以帮助你改进后续版本或指导你未来的应用程序开发。

设计工具

你可以在索引卡片、笔记本纸、海报大小纸张或白板上绘制你的应用程序屏幕，或者你可以使用一些数字工具。有许多免费资源可以帮助你创建纸张或数字原型。在 Google 上搜索mobile apps paper prototyping，或者如果你更喜欢数字方式，搜索mobile apps wire framing（请注意，我们在搜索中添加了mobile apps这个词，因为还有许多用于设计网页的资源）。我们甚至发现了一个混合选项(popapp.in/)，它允许你拍摄你手绘的草图并将其纳入应用程序中。

App Inventor 附加功能

我们想向你介绍一些你可能不知道的 App Inventor 功能。

快捷方式

在这本书中，我们向你展示了如何在块编辑器中查找和选择块。但是，如果你已经知道你想要的块，有一个快速的方法可以获取它。你只需要在查看器窗口的空白区域点击任何地方并开始输入。例如，如果你想找到When GuestsButton.Click事件块，开始输入单词when，就会弹出一个下拉列表，允许你在以wh开头的其他块中选择你想要的块。一旦你选择了块，它就会出现在查看器中。

我们最初没有给你这个快捷方式，是因为我们希望你能熟悉组件存放的位置以及它们是如何分组的（并不是因为我们想让你更努力工作）。

帮助

在使用 App Inventor 的过程中，有多种方式可以获得帮助。在设计器中，你可能已经注意到了组件调色板右侧的小问号，如下面的截图所示：

点击一个问号会弹出一个包含有关组件信息的弹出窗口，如下面的截图所示：

在窗口底部，您将看到一个更多信息链接，该链接将引导您进一步了解该组件的文档。

在块编辑器中，您可以通过将光标悬停在块上轻松找到有关块的信息。如图所示，悬停在不同的块上会启动一个消息，揭示块的目的或类型：

获取 App Inventor 帮助的另一种方式是在顶部菜单栏中点击指南，如图所示：

指南按钮将引导您到 App Inventor 文档库。您也可以通过appinventor.mit.edu/explore/library访问此网站。

如果您找不到问题的答案或感到困惑，App Inventor 论坛是与其他拥有平台丰富经验用户互动的一种方式。论坛链接位于指南文档下的支持和故障排除部分。

标题

虽然您不能更改Screen1的名称，但您可以更改Screen1（或任何屏幕）的标题，以便用户看到不同的名称。默认情况下，标题是Screen1（或如果您在另一个屏幕上，它将填充您在创建屏幕时选择的屏幕名称）。确保您在Screen1（如果您有多个屏幕）上，并从组件面板中选择Screen1以便突出显示。然后，滚动到属性面板的底部，如图所示。您将看到标题选项。在下面的文本框中点击“Screen1”，它将突出显示名称并允许您重命名它。您将在查看器的顶部以及您在设备上查看应用时看到更改。您可以使用此方法重命名任何屏幕。

图片

目前，App Inventor 对应用的大小限制为 5 MB。这一点不会影响你们中的许多人；但随着您在应用开发中进一步深入并创建更复杂的应用，您可能会接近这个大小限制。一个可以帮助的方法是减小任何图片的大小。在创建应用时，请注意不要使用高分辨率图片，因为它们会占用大量空间。

虚拟屏幕

在第五章，构建事件应用，和第六章

你可能会注意到的一个有趣的事情是我们将所有组件放置在两种不同的垂直排列中。我们将想要放在Screen1上的所有组件放在VerticalArrangement1中，而将想要放在Screen2上的所有组件放在VerticalArrangement2中。当应用启动时，我们将保持VerticalArrangement1可见并隐藏VerticalArrangement2（隐藏或使其不可见会自动使垂直排列中的所有组件也变得不可见）。然后，每当用户按下按钮输入名字时，我们将隐藏VerticalArrangement1并显示VerticalArrangement2。随后，当用户按下按钮返回时，我们将显示VerticalArrangement1并隐藏VerticalArrangement2。

换句话说，我们将切换显示一个垂直排列并隐藏另一个。这会给用户造成多个屏幕的错觉，尽管应用只有一个屏幕。

让我们探索这个过程的全部细节。以下是你需要在设计师中实现这些步骤：

1. 前往Screen1的属性面板，并将Title属性从Screen1更改为其他内容。如下所示截图，我们将其更改为Virtual screen demo：

2. 接下来，添加两个垂直排列。将两个垂直排列的Height和Width属性都设置为Fill parent。这将使它们都占据Screen1的整个宽度，并使每个的高度是Screen1的一半，如下所示截图：

3. 现在，在VerticalArrangement 1中添加一个标签、一个文本框和一个按钮。将Label1的Text属性更改为Enter your name:。删除TextBox1的Hint属性。最后，将Button1的Text属性更改为Enter。以下截图显示了完成此步骤的结果：

4. 在VerticalArrangement 2中添加一个标签和一个按钮。App Inventor 将自动将它们命名为Label2和Button2。删除Label2的Text属性并保持为空。将Button2的Text属性更改为Go Back。你的Viewer将如下所示：

5. 最后，取消选中VerticalArrangement2的Visible属性。这将隐藏VerticalArrangement2及其中的所有组件。当你这样做时，你的设计器将如下所示：

切换到Blocks编辑器以创建行为——在显示和隐藏两个垂直排列之间切换，以创建多屏幕的错觉。按照以下步骤操作：

1. 当用户点击Button1（显示Enter的按钮）时，你需要执行以下步骤：

   1. 通过将VerticalArrangement1.Visible属性设置为false来隐藏 VerticalArrangement1。

   2. 通过将VerticalArrangement2.Visible属性设置为true来显示 VerticalArrangement2。

   3. 通过使用TextBox1.Text获取器块从TextBox1获取文本，将此文本与填充有"You Entered: "的空白文本块连接起来。通过将Label2.Text设置为join块的结果来设置Label2。

   4. 通过将TextBox1.Text属性设置为空字符串来清除 TextBox1。

   以下截图显示了实现步骤a到d的块：

   

2. 当用户点击Button2（显示Go Back的按钮）时，你需要执行步骤 1a和 1b的相反操作，即：

   1. 通过将VerticalArrangement1.Visible属性设置为true来显示 VerticalArrangement1。

   2. 通过将VerticalArrangement2.Visible属性设置为false来隐藏 VerticalArrangement2。

   以下截图显示了实现步骤 2a和 2b的块：

   

当你测试此应用或应用首次启动时，你将看到VerticalArrangement1及其所有组件，如下所示截图：

当你在TextBox1中输入一个名字并点击标有Enter的按钮时，你会看到以下截图：

最后，当你点击标有返回的按钮时，你会看到应用启动时看到的第一个画面。这就是如何在实际上只有一个屏幕的情况下创建多个屏幕的错觉，从而减少应用对内存的需求，并使应用更加高效。

备份

App Inventor 在你创建应用时会自动保存你的应用。尽管你将在项目菜单下看到保存项目选项，但请放心，平台会定期保存你的应用。然而，随着你构建应用，保存进度副本对于你想要回退到早期版本或，例如，在你遇到错误之前检查你的代码以确定出了什么问题来说非常重要。项目菜单下的下拉列表中的一个选项是另存为…（如以下左边的截图所示）。此选项允许你创建一个带有新名称的项目副本。然后，新的副本将成为你的当前工作项目。

另一方面，在开发过程中定期使用检查点选项提供了一种以系统化的方式创建备份的同时继续在同一版本的应用上工作的方法。当你选择检查点（如以下右边的截图所示）在项目菜单下时，App Inventor 将在幕后无缝创建备份。例如，我们的 Event App 版本将被保存为EventApp_Checkpoint1、EventApp_Checkpoint2等等。这样，你可以在开发的不同阶段打开 Event App 的任何版本。一旦你完成你的应用并创建了最终版本，你可以删除检查点版本，因为你将不再需要它们。

分发你的应用

我们确信你已经注意到了，无论是在应用商店还是在你的设备上，所有的应用都有图标。这个小图像使用户能够轻松地识别一个应用与另一个应用的区别。在分享你的应用之前，你将想要上传一个图标。这可能是你在应用中使用的一些艺术作品，或者如果你创建了一个，那就是一个标志。你可以轻松地在属性面板下Screen1选项中的图标处上传这张图片。你会在选项面板的中间位置找到它。

App Inventor 图库

无论你是通过教程还是从头开始制作了一个应用，你都有权与他人分享你的应用。有许多方法可以做到这一点。最简单的方法是在 App Inventor 内部使用图库。

查看图库应用

你可能已经注意到了一个名为图库的菜单项，如以下截图所示：

如果您点击画廊按钮，您可以浏览许多其他人分享的杰出应用。您不仅可以查看应用以获取灵感，还可以将画廊用作学习工具，因为您可以查看其中任何应用的源代码。点击一个看起来有趣的应用图标或您想学习如何构建的应用图标，它将打开一个带有打开应用按钮的窗口。

点击按钮，将出现一个弹出框，用于保存应用或重命名它，如下面的截图所示：

这种方法会将应用保存到您的项目列表中，您可以在设计器中打开文件并检查 UI，在块编辑器中检查代码，以了解应用是如何制作的。您可以通过添加或更改块来混搭应用，创建自己版本的 app，或者将一些现有的块复制到背包中，并将它们加载到您正在工作的另一个项目中（保存在背包中的块可以被您的任何项目访问，直到您退出 App Inventor）。这是一种学习新代码、发现他人构建应用的方式以及学习混搭项目艺术的好方法。

在画廊中分享您的应用

由于画廊是一个用于学习和协作的开源资源工具，请记住您必须接受与他人分享您自己的代码的做法。要与他人分享您在画廊中的应用，请点击顶部菜单栏中的我的项目按钮，然后通过点击应用名称旁边的复选框选择您想要分享的应用。执行此操作时，两个原本灰显的按钮变为活动状态（删除项目按钮和发布到画廊按钮），如下面的截图所示：

当您将应用发布到画廊时，您可以选择接收电子邮件通知，告知您的应用已被下载和点赞。您还可以获得一个分享链接，该链接将引导他人访问您的应用。在将应用发布到 Google Play Store 之前获取对应用的反馈是测试市场的好方法。

创建 AIA 文件

.aia文件是在您在画廊中分享应用或与他人分享时需要创建的文件类型。此文件类型允许您将应用加载到项目列表中并检查 UI 和源代码。当您与他人协作进行项目或您希望某人查看您的代码时，它也非常有用。在 App Inventor 中，创建一个与他人分享的.aia文件非常简单。

点击菜单栏中的项目按钮，然后从下拉菜单中选择第八个选项，将选定的项目（.aia）导出到我的电脑，如下面的截图所示：

此操作将文件放置在你的下载文件夹（或你指定的其他位置）。你可以通过在电子邮件中附加文件将.aia文件发送给合作者。接收者首先将文件下载到他的或她的电脑（到下载文件夹），然后通过选择之前图片中的第三个选项，从我的电脑导入项目（.aia），轻松地将文件上传到他的或她的 App Inventor 项目列表。

当你将应用发布到 Google Play Store 时，强烈建议你保存你自己的源代码的额外副本，并将其存储在安全的地方。你很可能会创建你应用的新版本和更新，所以建议保留应用文件的副本，以防 App Inventor 上的副本出现问题。按照之前的步骤将选定的项目（.aia）导出到我的电脑，然后将.aia文件复制到闪存驱动器或硬盘驱动器。

下载和分享

到目前为止，在我们的应用开发中，我们一直在 App Inventor 内部工作——无论是构建和实时测试我们的应用，还是现在在图库中分享它。但是，当你从头开始创建自己的应用时，在广泛分发之前，在尽可能多的设备上下载和测试你的应用是有意义的。为了将你的应用下载到你的设备或使其可供他人下载，你有几种选择。

无论你决定使用哪种选项，为了确保你的设备允许下载除了来自 Google Play Store 之外的其他文件，你可能需要调整你的移动设备设置。你可能还记得我们在第二章中解释了侧载的步骤，设置 MIT App Inventor 2，当时我们提供了直接下载 AI2 Companion App 的说明。我们建议你遵循这些步骤以确保你的设备可以安装来自未知来源的应用。对于 Honeycomb 或更早版本的设备，请转到设置 | 应用程序并勾选未知来源。对于 Ice Cream Sandwich 和更高版本，请转到设置 | 安全或设置 | 安全与屏幕锁定来勾选未知来源的框。

创建 APK

注意

当你在像 Google Play Store 这样的应用市场中分发你的应用时，你不会分享你的源代码，所以你需要一个除了.aia文件之外的其他文件类型。在这种情况下，你需要将你的应用构建成一个.apk文件。在 App Inventor 中这很容易完成。

创建.apk文件有两种选项：使用二维码或侧载。

二维码

点击顶部菜单栏中的构建按钮，并从下拉菜单中选择第一个选项：应用（提供.apk 的二维码），如下面的截图所示：

这将启动构建过程，几分钟后，您的电脑屏幕上会出现一个二维码。不要使用 AI2 伴侣应用程序扫描此二维码，因为它不会工作。您需要使用移动设备上的二维码阅读器扫描代码。Google Play 商店上有许多免费的二维码阅读器应用程序；您可以通过搜索找到其中一个。二维码仅在特定时间段内可用，因此请注意以下截图中的时间限制：

使用您的移动设备扫描二维码后，点击打开以开始下载过程。接下来，您将看到一个安装屏幕，询问您想要安装此应用程序吗？如果是，它将获得以下权限。您将看到设备上应用程序需要访问的项目列表。此列表由应用程序中的组件确定。由于您创建了此应用程序，您可以轻松地同意权限。点击安装。安装完成后，您的应用程序将存储在您的设备上；您可以在与设备上其他应用程序相同的位置找到它。

直接下载（或侧载）

要将 .apk 文件直接下载到您的电脑上，请点击构建菜单选项，然后选择第二个选项，应用（将 .apk 保存到我的电脑）。

文件将花费一些时间来构建，并将保存到您的下载文件夹或您指定的位置。您可以通过搜索轻松找到您的文件，因为文件名将以扩展名 .apk 结尾。要将您的应用程序传输到移动设备，您有几个选择。您可以执行以下操作：

• 通过 USB 将您的 Android 移动设备连接到电脑，并将文件拖到手机或平板电脑图标上以复制它。

• 通过将文件附加到电子邮件并发送给自己，然后在您的移动设备上打开电子邮件并将文件下载到您的设备上来发送文件。

• 将文件上传到共享网络存储位置，例如 Google Drive（因为它连接到您的 Google 账户），然后通过您的设备访问该文件。为此，您需要在您的设备上安装 Google Drive 应用程序或通过以下网址使用手机登录您的账户：drive.google.com。一旦您在设备上打开 Google Drive，找到您的 .apk 文件并打开它。

无论您使用哪种方法，一旦您点击文件打开它，您将看到一个（前面提到的）安装屏幕，询问您想要安装此应用程序吗？如果是，它将获得以下权限：点击安装。安装完成后，您的应用程序将存储在您的设备上；您可以在与设备上其他应用程序相同的位置找到它。

Google Play 商店

在你考虑将应用发布到 Google Play 商店时，App Inventor 中有一些你可能之前没有注意到的事情，你需要留意。在 Google Play 上发布的应用需要 VersionCode 和 VersionName。这两个都可以在 App Inventor 的设计窗口中找到，位于 Screen1 属性面板的底部，如下面的截图所示：

这些属性对于 Google Play 和 Android 都需要，以跟踪更新并确保用户拥有应用的最新版本。每次你提交一个新版本的应用时，VersionCode 必须比上一个版本大一个整数。VersionName 不一定是数字，但它应该在版本之间保持一致，因为用户会看到这些信息。要开始 Google Play 商店发布流程，进入你的 App Inventor 项目，选择你想要在 Google Play 上分发的应用，构建 .apk 文件，并将其下载到你的电脑上。

接下来，确保你已经登录到你的 Google 账户，并访问 play.google.com/apps/publish。这个链接将带你到 Google Play 开发者控制台，你需要做的第一件事是注册一个开发者账户，这需要支付费用。由于 Google 有时会修改流程，我们建议你访问 App Inventor 网站文档 appinventor.mit.edu/explore/ai2/google-play.html，以获取如何发布到 Google Play 的最新步骤。

需要注意的一点是，Google Play 提供了三种发布选项：Alpha 测试或 Beta 测试或生产发布。一旦你完成了一个应用，我们确信你将迫不及待地想要将你的应用与全世界分享；但即使你已经自行进行了相当数量的测试，我们仍然建议你抓住另一个机会继续测试。Alpha 测试是一个你可以指定的小群体，Beta 测试是在更大但有限的受众中进行测试，当然，生产发布则是将应用与公众分享。每次你制作了一个新版本，我们建议你在发送到生产之前，先在 Alpha 和 Beta 测试者中进行测试。

摘要

本书为你提供了想法、工具、教程和指导，帮助你成为使用 MIT App Inventor 的移动应用开发者。你已经学会了以下内容：

• 为 App Inventor 进行技术设置

• 使用设计思维过程来构思应用想法

• 在构思阶段和原型阶段进行应用研究。

• 导航 App Inventor 平台

• 考虑设计原则来创建用户界面

• 构建一个用户交互游戏、一个活动应用和一个抽奖应用，并在此基础上添加更复杂的功能。

• 使用序列、if/then 语句、多个屏幕、虚拟屏幕、图像、数据库和循环编写代码块

• 研究应用程序市场

• 与他人分享你的应用程序

正如你所经历的，制作移动应用程序需要投入大量的时间、精力、迭代、奉献和创造力。我们确信，这本书中分享的内容不仅仅激发了你对移动应用开发的兴趣。你已经学会了编码和设计技能，这两者都将帮助你开始你的新角色——应用开发者。毫无疑问，你已经对制作应用程序着迷，并打算进一步扩展你的技能。创建具有社会影响力的应用程序的可能性确实是无限的，我们希望你在本书中学到的编码、设计、研究和创业技能能让你成为一位终身的技术创造者！

第九章：索引

A

• ActivityStarter, 事件应用

  • 添加 / 添加 ActivityStarter

• AI2 伴侣应用

  • 下载 / 下载 AI2 伴侣应用

• AIA 文件

  • 创建 / 创建 AIA 文件

• aiStarter

  • 启动 / 步骤 2 – 启动 aiStarter

  • 开始 / 开始 aiStarter

• 首字母测试 / Google Play 商店

• Android 开发者说明

  • URL / 适用于可安装 Debian 软件包的系统说明（例如 Debian 或 Ubuntu）

• APK，创建选项

  • 二维码 / 二维码

  • 直接下载（或侧载） / 直接下载（或侧载）

• App Inventor，功能

  • 关于 / App Inventor 扩展功能

  • 快捷键 / 快捷键

  • 帮助 / 帮助

  • 标题 / 标题

  • 图片 / 图片

  • 虚拟屏幕 / 虚拟屏幕

  • 备份 / 备份

  • URL / Google Play 商店

• 应用，分发

  • 关于 / 分发你的应用

  • 图库 / App Inventor 图库

  • 图库应用，查看 / 查看图库应用

  • 应用，在图库中分享 / 在图库中分享你的应用

  • AIA 文件，创建 / 创建 AIA 文件

  • 下载和分享 / 下载和分享

  • APK，创建 / 创建 APK

  • Google Play 商店 / Google Play 商店

B

• 背景图片，事件应用

  • 设置 / 设置背景图片

• 背包工具 / 使用背包在屏幕间共享块

• 测试版测试 / Google Play 商店

• 块，事件应用

  • 编程 / 编程块

  • 屏幕和启动地图，在之间导航 / 在屏幕和启动地图之间导航

  • 屏幕 1 / Screen1

  • 屏幕间共享，使用背包 / 使用背包在屏幕间共享块

  • 文本，添加到屏幕 / 向屏幕添加文本

• 块，类型

  • 关于 / 块类型

  • 事件块 / 块类型

  • setters / 块类型

  • getters / 块类型

• 块，用于程序抛射

  • 播放按钮 / 播放按钮

  • 球，移动 / 移动球

  • 球，抛射 / 抛射球

  • 球，弹跳 / 结束游戏或弹球

  • 游戏，编码 / 结束游戏或弹球

  • 重置按钮 / 重置按钮

• 块编辑器

  • Blocks 抽屉 / Blocks 抽屉

• Blocks 编辑器

  • 关于 / Blocks 编辑器

• 大脑反应加速器 / 大脑反应加速器

• 按钮，事件应用

  • 添加 / 添加按钮

• BYJ3S / BYJ3S

C

• 连接设置，MIT App Inventor 2

  • 关于 / 连接设置

  • AI2 伴侣应用，下载 / 下载 AI2 伴侣应用

  • 电脑和 Android 设备，通过 WiFi 连接 / 通过 WiFi 连接您的电脑和 Android 设备

  • 模拟器，连接 / 连接模拟器或使用 USB 线连接

  • USB 线，用于连接 / 连接模拟器或使用 USB 线连接

  • App Inventor 设置软件，安装 / 安装 App Inventor 设置软件的步骤 1

  • App Inventor 设置软件，为 Mac OS X 安装 / 为 Mac OS X 安装 App Inventor 设置软件

  • App Inventor 设置软件，为 Windows 安装 / 为 Windows 安装 App Inventor 设置软件，软件安装 - 部分 A，驱动安装 - 部分 B

  • App Inventor 设置软件，为 GNU/Linux 安装 / 为 GNU/Linux 安装 App Inventor 设置软件

  • Debian 软件包，安装说明 / 适用于可安装 Debian 软件包的系统（例如 Debian 或 Ubuntu）的说明")

  • GNU/Linux 系统，安装说明 / 其他 GNU/Linux 系统的安装说明

  • aiStarter，启动 / 步骤 2 – 启动 aiStarter

  • aiStarter，启动 / 启动 aiStarter

  • 模拟器，连接到项目 / 步骤 3 – 打开项目并连接到模拟器

  • 项目，打开 / 步骤 3 – 打开项目并连接到模拟器

  • 设备，设置 USB 线缆 / 步骤 4 – 使用 USB 线缆设置您的设备

  • 计算机和设备，连接 / 步骤 5 – 连接您的计算机和设备（如有必要进行认证）")

  • 测试 / 步骤 6 – 测试连接

• 施工计算器 / ConstHelp – 承包商工具

• CSAIL（计算机科学与人工智能实验室） / 什么是 MIT App Inventor 2？

D

• 数据

  • 推送到 Fusion Table / 将数据推送到 Fusion Table

  • 请求 / 编码块 – 请求数据, 编码块 – 接收数据

  • 接收 / 编码块 – 接收数据

• 数据库

  • 创建 / 创建数据库

  • Google Fusion Table，创建 / 创建 Google Fusion Table

• 设计师

  • 组件 / 组件

• 设计师

  • 关于 / 设计师

  • 调色板 / 调色板

  • 查看器 / 查看器

  • 属性 / 属性

  • 媒体 / 媒体

• 设计原则，移动应用

  • 关于 / 设计原则

  • 以用户为中心的设计 / 以用户为中心的设计

  • 视觉层次结构 / 视觉层次结构

  • 响应式设计 / 响应式设计

  • 研究 / 研究应用市场

  • 设计工具 / 设计工具

• 设计思维过程

  • 关于 / 设计思维过程

  • 定义 / 定义

  • 发想 / 发想

  • 原型 / 原型

  • 测试 / 测试

E

• 事件应用

  • 用户界面 / 事件应用的用户界面

  • 背景图片，设置 / 设置背景图片

  • 图片组件，添加 / 添加图片组件

  • 按钮，添加 / 添加按钮

  • ActivityStarter，添加 / 添加 ActivityStarter

  • 屏幕，添加 / 添加屏幕

  • 块，编程 / 编程块

• Ez 学校巴士定位器 / Ez 学校巴士定位器

F

• Fling 应用

  • 计分功能，添加 / 添加计分功能

  • 难度，增加 / 增加难度

  • 动态，改变 / 改变游戏动态

  • 级别，创建 / 创建级别

  • 分数标签更新，以显示标签 / 更新分数标签以显示级别

  • 重置按钮，更新 / 更新重置按钮

  • 播放按钮，更新 / 更新播放按钮

• 融合表

  • 创建 / 创建 Google 融合表

  • 共享，使用服务账户电子邮件 / 通过服务账户电子邮件共享融合表

  • 应用，连接到 / 将应用连接到 Google 融合表，我们的目标

  • 数据，推送 / 将数据推送到融合表

  • 空行 / 确保不插入空行

  • 客人名单，查看 / 查看客人名单

  • 数据，请求 / 编码块 - 请求数据

  • 数据，接收 / 编码块 - 接收数据

G

• 图库应用

  • 查看 / 查看图库应用

• 游戏

  • 动态，改变 / 改变游戏动态

• 游戏应用

  • 创建 / 创建游戏应用

  • 设计器中的 UI，创建 / 在设计器中创建 UI

  • 集成开发环境 (IDE) / IDE

• Google 身份验证

  • 设置 / 设置 Google 身份验证

• Google Play 商店

  • 关于 / Google Play 商店

• 图形用户界面 (GUI) / 登录 MIT App Inventor

• 客人名单

  • 查看 / 查看客人名单

我

• 图像组件，事件应用

  • 添加 / 添加图像组件

• 集成开发环境 (IDE)

  • 关于 / 创建游戏应用, IDE

L

• 级别

  • 创建 / 创建级别

• 库

  • 网址 / 帮助

• 许可证类型

  • 网址 / 设置背景图片

• 循环 / 循环

M

• MIT App Inventor

  • 目的 / MIT App Inventor – 目的和潜力

  • 潜力 / MIT App Inventor – 目的和潜力

  • 可能性，探索 / 探索 MIT App Inventor 的可能性

  • 示例 / MIT App Inventor 示例

  • 秒表和计时器 / 秒表和计时器

  • Yahtzee / Yahtzee

  • BYJ3S / BYJ3S

  • 循环 / 循环

  • 四重奏 / 四重奏

  • 大脑反应加速器 / 大脑反应加速器

  • ConstHelp / ConstHelp – 承包商工具

  • Umati / UMATI

  • Ez 学校巴士定位器 / Ez 学校巴士定位器

  • 青少年广播 / 青少年广播

  • Rover 800 遥控器 / Rover 800 遥控器

• MIT App Inventor 2

  • 关于 / 什么是 MIT App Inventor 2？

  • 网址 / 什么是 MIT App Inventor 2？, 测试, 登录 MIT App Inventor

  • 移动应用开发者角色 / 理解您作为移动应用开发者的角色

  • 应用程序想法，头脑风暴 / 头脑风暴应用程序想法

  • 设计思维过程 / 设计思维过程

  • 计算思维 / 计算思维

  • 应用程序设计，最佳实践 / 设计应用程序的最佳实践

  • 初始设置 / 初始设置

  • 系统，需求 / 系统需求

  • Google 账户，注册 / 注册 Google 账户

  • 登录 / 登录 MIT App Inventor

  • 连接设置 / 连接设置

• 移动应用程序

  • 设计原则 / 设计原则

P

• 播放按钮

  • 更新 / 更新播放按钮

• 项目视图

  • 关于 / 项目视图

  • 新项目，创建 / 创建新项目

Q

• 二维码 / 二维码

• 四重奏 / 四重奏

R

• 抽奖应用

  • 项目，创建 / 创建项目和构建 GUI

  • GUI，构建 / 创建项目和构建 GUI

  • 新项目，创建 / 创建新项目

  • 用户界面 (UI)，创建 / 创建用户界面 (UI)")

  • 数字抽奖应用，行为编程 / 编程数字抽奖应用的行为

  • 从参与者接收短信 / 从参与者接收短信

  • 所有参与者的电话号码，添加到列表 / 将所有参与者的电话号码添加到列表中

  • 获胜者，选择 / 选择获胜者

  • 获胜者，通知 / 通知获胜者

  • 其他所有人，通知 / 通知其他所有人

  • 循环，使用 / 使用循环

  • 列表和变量，清除 / 清除列表和变量

• 重置按钮

  • 更新 / 更新重置按钮

• Rover 800 遥控器 / Rover 800 遥控器

• RSVP 屏幕

  • 设计 / 设计 RSVP 屏幕

  • GUI，在设计窗口中创建 / 在设计窗口中创建 GUI

S

• 分数标签

  • 更新，以显示等级 / 更新分数标签以显示等级

• 计分功能

  • 添加 / 添加评分功能

  • 评分块，编码 / 编码评分块

  • 评分标签，更新 / 更新评分标签

• 服务账户邮箱

  • 融合表格，共享 / 通过服务账户邮箱共享融合表格

• 尺寸属性 / 响应式设计

• 秒表和计时器 / Stopwatch and Timer

U

• Umati / UMATI

V

• 视觉层次结构 / Visual hierarchy

Y

• Yahtzee / Yahtzee

• 青少年广播电台 / Youth Radio