Thunkable:近距离观察

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

这些是本课的活动:

活动

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

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

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

停谈

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

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

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

Thunkable 有两个窗口用于创建应用程序。点击顶部菜单栏(屏幕左上方)中的 "设计",就会进入 设计器在这里你可以设计用户界面。用户界面用户界面是应用程序中用户可以与之交互的所有内容。这些东西可以是按钮、导航栏、文本框、图片等。

可拆卸的设计师橱窗

Thunkable 设计器窗口
1

组件清单

您添加到应用程序中的所有组件都会出现在这里,并按屏幕分级排列。

3

工作空间

在这个中央工作区中,您可以将组件拖到 手机上。您可以控制组件的位置和大小。

2

添加组件

您可以将可视化组件从该面板拖入工作区。 

4

属性面板

通过 "属性 "面板,您可以设置每个组件的属性。 属性是你可以为每个组件设置的不同特性,如宽度、高度和颜色。在模型上选择一个组件,然后就可以在属性面板中更改其任何属性。

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

块编辑

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

可分块编辑器
1
积木调色板

左侧是图块调色板。顶部是用户界面组件。应用程序中的每个组件都有自己的块集。点击组件,就会显示可以拖入工作区的图块。

4

编码工作区

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

2

核心模块

核心代码块是在应用程序中使用的标准编码块。它们根据类型进行分类,并用颜色编码。

3

应用程序功能

这些是您可以添加到应用程序中的隐形功能。您可以点击其中一个进行添加,然后为该功能设置属性并拖出代码块。

活动负责人

Thunkable 中的事件处理程序块是金色的,形状像一个开放的块,因此你可以把块扣在里面。只有当事件发生时,这些块才会运行。

Thunkable 按钮点击事件块

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

Thunkable 列表查看器项目点击事件块

单击 ListViewer 项目时
ListViewer 就像一个下拉菜单,因此当用户在列表中选择一个项目时就会发生该事件。应用程序应该对点击的项目进行处理。

可线程屏幕打开事件块

屏幕打开时
当应用程序首次启动或切换到另一屏幕时,如果您想执行某些操作,就会用到该事件。您可以设置变量或从云中更新信息。

功能

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

功能块


此功能可让应用程序说出或讲出您希望它说出的任何文字。

计时器启动和声音播放
计时器组件可以开始计数。 应用程序还能播放声音。

设置器和获取器

绿色块与组件的属性有关。 

浅绿色块称为 获取器因为您正在获取属性的值。

可沉式获取块

按钮 1 的文本
获取文本并保存在变量 numberChoice 中。

定时器 1 的时间(秒
定时器的秒值被获取并存储在 Lablel1 的文本中,因此该值会显示在标签中。 

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

可沉式设置块

按钮 1 的文本
Button1 的文本设置为 "点击我!"。

Label1.Text
Label1 的文本设置为 Timer1 的时间(秒)。

定时器 1 的 IntervalMilliseconds(间隔毫秒数
定时器 1 的 IntervalMilliseconds(间隔时间)设置为 3000 或 3 秒。

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

 

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

导师提示由 AmeriCorps 提供支持。

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

数据块

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

可丢弃的数学积木

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

可插入文本块

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

可重构布尔型图块

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

活动:音板教程

预计时间45 分钟

请观看下面的视频教程

在此下载媒体文件(更多详情请观看戴夫的视频)
然后按照 Dave 的视频在应用程序中使用事件处理程序和函数播放演讲。

挑战

在活动中,您使用了

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

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

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

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

 提示:查看颜色抽屉,了解如何获得随机颜色。

反思

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

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

关键术语回顾

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

其他资源

查看更多 Dave Wolber 的 Thunkable 教程,请访问 draganddropcode.com

学生大使 Meenakshi Nair 的免费 Thunkable 课程是另一个很好的资源!