Module 04 · Final Project and Assessment期末项目与评估
Hands-on Lab: Thunkable-UI from Hand Drawn Images动手实验：从手绘图像创建 Thunkable 界面
预计所需时间：60分钟
在这个实验中，您将使用 Thunkable 创建一个销售应用程序。这个销售应用程序允许用户选择一个类别并导航到所选类别的客户列表，在那里用户可以选择特定客户并继续查看他们的详细信息。
目标
完成此实验后，您将能够：
- 登录 Thunkable 并为销售应用程序创建一个新项目
- 在 Thunkable 上添加设计组件
- 使用 Thunkable 上的代码块启用交互性
- 使用网页预览测试应用程序
Thunkable 概述
Thunkable 是一个无代码平台，允许用户创建应用程序，提供 50 多个设计组件、简单的动画、无限的逻辑块和开放的连接器，而无需编写一行代码。这些原生应用程序可以访问设备的所有功能和能力，包括相机、蓝牙、GPS、传感器等。
练习 1：在 Thunkable 上注册并创建一个项目
- 要在 Thunkable 上注册，请点击 开始使用。
- 注册完成后，您应该会看到以下图片中的项目创建页面。
- 如果您没有自动重定向到我的项目选项卡，请从顶部菜单栏中点击我的项目选项卡，然后点击创建新项目以创建一个新应用程序。
- 您应该会看到一个弹出窗口，如下图所示。请将项目名称输入为销售移动应用程序，类别选择教育（您也可以选择其他任何类别），将可访问性设置为公开，并勾选以启用拖放构建器。现在，点击创建按钮以创建应用程序。
注意：确保您的浏览器没有阻止任何弹出窗口。如果收到允许弹出窗口的警告消息，请允许弹出窗口。
- 现在，您应该会看到另一个弹出窗口，其中包含一些后续问题，例如选择角色（这是可选的）。您可以跳过此步骤并继续创建应用程序。
- 一旦项目创建完成，您应该会看到 Thunkable 应用程序，如下所示。
- 左侧面板（黄色高亮）是设计面板，我们可以从中选择设计应用所需的任何设计元素。
- 中间面板（绿色高亮）是模拟/预览面板，我们可以将设计面板中的所有设计元素拖放到这里。
- 右侧面板（红色高亮）是编辑面板，我们可以在这里编辑添加到应用程序中的所有设计元素。
练习 2：为销售应用创建主屏幕
- 我们先从设计主屏幕开始。导航到设计面板，在组件树中找到屏幕 1。点击编辑按钮并将其重命名为主屏幕。
- 接下来，为屏幕设置背景颜色。在编辑面板中，导航到背景并选择您喜欢的颜色。
- 让我们添加一个销售标志，可以从互联网下载销售标志或保存其图像 URL。现在，将图像组件拖放到屏幕上。在右侧的编辑面板中，点击“无文件源选项”，然后您将获得上传图像文件或输入销售标志 URL 的选项。此外，将组件树中的图像组件重命名为
logo。
- 为了准确调整标志的大小和位置，请在编辑面板中导航到布局部分。将 X 坐标设置为 50，Y 坐标设置为 100，宽度和高度设置为 100 像素。您可以随意修改这些值或自定义图像的位置。
- 或者，您可以使用下图中突出显示的图像组件周围的白色方块或红线来调整组件的大小，以及使用粉色线对齐组件。
- 要添加标题，将标签组件拖放到屏幕上。然后从编辑面板中选择标签选项，并将其重命名为
Sales Application。将组件树中的标签组件重命名为title。
- 将标题放置在标志旁边，并通过选择字体颜色、大小和对齐方式来定制其外观，以符合您的偏好。
- 按照与标题相同的过程，添加另一个标签
Select Category，并将其放置在标志和标题下方。 - 让我们为类别添加按钮组件。将按钮组件拖放到屏幕上，并在编辑面板中将其命名为
Retail。将组件树中的按钮组件重命名为retail_button。根据您的偏好调整字体、文本颜色和大小。您可以向下滚动以访问更多样式选项，以修改按钮的背景颜色、边框和阴影。
- 要创建其余的类别按钮，通过点击编辑面板中的三个点并选择重复选项来复制之前的按钮组件。
- 弹出窗口将出现；点击重复的按钮组件以创建按钮组件的副本。
- 将出现的重复按钮拖到
Retail按钮的上方，并将其放置在下方作为第二个按钮组件。
- 将第二个按钮组件重命名为
Hotel。重复该过程以添加另外两个按钮组件，并分别重命名为Education和Technology。
您的主屏幕设置现在已完成。
注意：确保从左侧的组件树中将所有标签、图像和按钮组件重命名为适当的名称。
练习 3：创建零售客户屏幕
- 设计一个零售客户屏幕（屏幕 2）。首先，从组件树中选择主页屏幕，然后点击编辑面板中的三个点，选择
Duplicate选项。会出现一个弹出窗口；点击Duplicate按钮。这将创建一个重复的屏幕。将这个重复的屏幕重命名为Retail Customers。
- 在组件树中找到销售图标，通过点击图像组件旁边的删除按钮将其删除，如下图所示。
- 根据需要调整标题，并更新按钮上的文本以显示四个客户的名称，遵循提供的截图中的示例。
- 现在使用图像组件添加
Home和Back按钮。您可以从互联网上下载适合这些按钮的图标，类似于提供的截图中所示的图标。
练习 4：创建零售客户详情屏幕
- 要创建一个零售客户详情屏幕（屏幕 3），请按照练习 3 中概述的步骤复制屏幕。然后将屏幕重命名为
Retail Customer Details。 - 首先移除文本和按钮。然后，下载并添加一个客户头像作为个人资料图片。此外，从互联网下载电话、电子邮件地址、地址和收入的图标。最后，确保添加所有必要的细节，如截图所示。包括
Home和Back按钮。
练习 5：使用代码块进行交互
- 为了启用屏幕之间的导航交互。首先访问代码块面板。您可以选择
retail_button，然后在编辑面板中点击添加块选项（高亮显示为 1），或者点击左上角的Blocks面板（高亮显示为 2）。
- 在代码块部分点击
控制，找到导航到块。拖动此块并将其放置在右侧，按照提供的屏幕截图中的箭头方向。
- 为了从主屏幕导航到零售客户屏幕，从左侧列出的 UI 组件中选择 retail_button 组件。然后，点击
当 retail_button 被点击块。
- 接下来，将
导航到块拖放到 retail_button 的执行部分，如截图所示。点击块中的主屏幕，这将提示显示可用屏幕的下拉列表。从该列表中选择零售客户屏幕。
- 添加导航块并选择零售屏幕后，块应如下所示。
- 通过添加此块，当您从主屏幕点击
零售按钮时，它将导航到零售客户屏幕。
- 要测试导航，首先通过选择左上角的
设计选项导航到设计页面。然后，点击网页预览，如提供的屏幕截图中所示。请确保您在主屏幕上。
- 在网页预览模式下，您将看到主屏幕，您可以与之互动。共有三个选项如下：
- 在新窗口中预览：这将打开一个新的浏览器标签，显示屏幕预览。
- 屏幕缩放：从此下拉列表中选择
适合缩放选项以查看完整屏幕。 - 返回编辑：如果您希望返回编辑模式，请点击此处。
现在，通过点击主屏幕上的零售按钮测试导航。它应该导航到零售客户屏幕。
- 请按照之前概述的步骤在以下配对之间创建交互：（请参考下面的屏幕截图）
- 零售客户屏幕上的返回按钮和主页按钮导航到主屏幕。
- 确保零售客户详细屏幕上的返回按钮导航回零售客户屏幕，而主页按钮导航回主屏幕。
练习 6：测试和分享应用程序
完成之前的练习后，预览整个应用程序以测试其交互性是至关重要的。
- 要开始预览，请首先点击主屏幕，因为交互从这个初始屏幕开始。然后，从顶部菜单中选择
Web Preview以继续测试应用程序。 - 预览后，点击位于顶部的
Share按钮，并从下拉菜单中选择Share App。
- 现在应该出现一个生成链接的弹出窗口，点击
Generate Link按钮。
- 链接生成后，点击
Copy并将其粘贴到记事本文本文件中。此文件可用于从网页浏览器测试和预览您的应用程序。
摘要
在这个实验中，你学习了如何在 Thunkable 中创建一个销售应用程序。你学习了如何在 Thunkable 上注册，设计应用程序的主页、客户页面和客户详情页面。你使用代码块启用了屏幕导航的交互。并通过网页预览测试了该应用程序。