应用程序发明家近距离观察

  • 了解事件驱动编程
  • 了解 MIT App Inventor 平台中不同类型的区块

这些是本课的活动:

活动

移动应用程序基于事件驱动编程。 

事件驱动编程基于事件,而不是自上而下地运行代码。有些程序只是一次性执行所有代码,但移动应用程序是根据用户与程序的交互方式运行的。

移动应用程序的运行基于 事件事件是指触发代码运行的事件。例如,用户点击一个按钮。用户点击时即为事件。事件触发代码运行,称为 事件处理程序.

停谈

你能想出一些与手机互动的方式以及手机的功能吗?下面是一些可供参考的方法:

  • 点击某个应用程序的图标后,该应用程序就会打开。
  • 当你点击 "发送 "短信时,它会发送信息并发出声音。
  • 当您尝试登录应用程序时,应用程序会要求您输入密码。
女孩们在讨论

让我们先来看看 App Inventor 平台的各个部分。

App Inventor 有两个窗口用于创建应用程序。单击设计器按钮(屏幕右上方)可进入 设计器在这里您可以设计用户界面。用户界面用户界面是应用程序中用户可以与之交互的一切。这些东西可以是按钮、导航栏、文本框、图片等。

应用程序发明者设计器窗口

App Inventor 设计器窗口
1

调色板

你可以从调色板中选择组件添加到窗口中间的查看器中。有几个组件抽屉可供探索和使用。

2

查看器

您可以将组件拖到 查看器。组件是从左侧自上而下添加的。您必须使用 "布局组件 "和 "对齐方式 "来更精确地控制组件出现的位置。

3

组件清单

该列表为您提供了屏幕上元素的分级列表。您可以通过点击查看器或列表中的元素来选择它们。

4

属性面板

属性面板允许你设置每个组件的属性,如字体大小、对齐方式、颜色等。

5

不可见部件

不可见组件不会出现在屏幕上,但仍是应用程序的一部分。拖放时,它们会出现在屏幕下方。

当有人使用您的应用程序时,他们会通过点击按钮、输入文本等方式与您的用户界面进行交互。您需要决定您的应用程序应该做什么,并编写程序来做这些事情。

块编辑

点击 "区块 "进入 块编辑器窗口,在这里你可以完成所有的编码工作。你可以将左侧面板中的块拖入屏幕中央的工作区。

App Inventor 区块编辑器
1
积木调色板

左侧是可以拖入工作区的图块。它们被分为控制(Control)和逻辑(Logic)等类别/抽屉。

3

查看器

这是您的工作区,您可以在此拖动所有图块。您可以随意移动它们,将它们相互卡入或卡出。您还可以删除任何您不需要的图块。

2

组件块

应用程序中的每个组件都有自己的区块集。点击 组件以显示区块,然后将其拖入工作区。

活动负责人

App Inventor 中的事件处理程序块为金色,形状为开放式块,因此您可以将块嵌入其中。只有当事件发生时,这些区块才会运行。

按钮点击事件块

点击按钮时
您已经用过了。当用户点击某个按钮时,您希望应用程序做一些事情,比如打开另一个屏幕或发送一条消息。

屏幕 1 方向改变事件块

改变屏幕方向时
如果用户将手机从纵向(垂直)转为横向(水平),你可能需要做一些事情,比如改变屏幕的布局或组件的大小。

改变滑块位置时
滑块可让用户拖动它,沿其选择某个值。这可能会触发对另一个组件的更改。例如,您可以使用滑块增大绘图应用程序中钢笔的尺寸。

功能

函数函数是可以执行某些操作的代码块。它们可以在应用程序中多次运行。在 App Inventor 中,函数块的颜色为紫色。有些语言将函数称为方法或过程。事实上,App Inventor 通常将其称为 程序.它们会做一些事情,所以你可以把它们看作动作块。

功能块

TextToSpeech.Speak
TextToSpeech 组件可以说或讲任何你想让它说的文字。

相机拍照
相机组件可以用手机拍照。

声音播放
声音组件可以播放声音。

设置器和获取器

绿色块与组件及其属性有关。 

可以与另一个图块连接的浅绿色图块称为 获取器因为您正在获取属性的值。

定位器是深绿色的,它们可以被折叠,末端有一个打开的槽。这样就可以设置属性的值。

应用程序发明者设置器和获取器块

按钮 1 的文本
获取Button1 的文本并将其存储在变量 global greeting 中。

按钮 1 的文字
按钮 1 的文本设置为 "我爱编码"。按钮上将显示 "我爱编码 "字样。

标签文本1
标签 1 的文本设置为声音源 1。这意味着声音文件名将显示在标签 1 中。

声音源 1
设置标签的文本实质上是显示标签中值,因此声音文件的名称将显示在 Label1 中。

标签 1 的文本

TextToSpeech 获取 Label1 的文本内容并将其语音化。无论 Label1 显示的是什么文本,都会被语音播报。 

最佳做法:提醒学生这与真正的编码工作如出一辙。我们使用的奇怪词汇(函数、getters、setters)正是编码员使用的词汇。

 

向学生提出指导性问题:你能想出一些日常功能吗?(例如:烤蛋糕、刷牙--任何有可重复步骤的事情)。函数与算法非常相似!

导师提示由 AmeriCorps 提供支持。

风格化的 A,海军蓝的 AmeriCorps 徽标

数据块

在使用设置器块时,您可能会使用其他一些内置块来表示数据或可在应用程序中使用的信息。下面是一些可以使用的数据块示例。

应用程序发明家数学积木

数字
数值可在应用程序中用作数据。这些区块可在区块调板的数学抽屉中找到。

文本或字符串
文本(有时也称为字符串)可用作数据。这些是可在应用程序中使用的字母、单词和句子。这些块可在块调板的文本抽屉中找到。

应用程序发明家布尔图块

布尔型
这种数据类型只有两个可能的值--true 或 false。 这些数据块可以设置或测试某些东西的 "状态",并将用于条件式中,您将学到更多相关知识。

活动:音板教程

预计时间45 分钟

请观看下面的视频教程

点击此处查看 App Inventor 图库中的启动项目,将应用程序加载到 App Inventor,
,然后按照 Dave 在下面视频中的指导进行操作。

请注意,视频从 1:11 开始,跳过加载说明。如果您使用上述链接加载了启动项目,则不需要这些说明。

挑战

在活动中,您使用了

  • 事件处理程序块
  • 功能块

让我们尝试在 Soundboard 应用程序中添加一些 setter 和 getter 块。

当用户点击任何图片播放相关语音时,更改屏幕背景颜色。 颜色。

您可以将其更改为一种特定的颜色,但这样您就不能轻易将其更改为起始颜色--黑色,因此您可以将屏幕背景更改为随机颜色。 

提示:查看颜色抽屉,查找 制作色块.然后在数学抽屉中查找随机整数块。颜色由 3 个数字组成,RGB 表示红、绿、蓝,范围在 0-255 之间。

反思

现在您已经对不同的代码块有了一些了解,请考虑一下您的应用程序解决方案:

您的应用程序需要哪些组件?
应用程序中哪些事件需要事件处理程序?
在应用程序中触发事件时会发生哪些操作?
上一张幻灯片
下一张幻灯片

关键术语回顾

  • 用户界面 - 应用程序中用户可以进行交互的所有内容
  • 设计器- 窗口,在这里您可以为应用程序添加组件并设计它们的外观
  • 程序块编辑器- 窗口,在这里您可以为应用程序编写代码块
  • 事件- 触发代码运行的事件
  • 事件处理程序- 告诉应用程序在事件发生时该如何处理的代码块
  • 事件驱动编程- 基于事件进行编程,而不是从上到下运行整个代码
  • 功能- 运行并可多次运行的代码块

其他资源

在以下网站查看更多 Dave Wolber 的 App Inventor 入门教程 appinventor.org