【Technovation官方中文教程】 编程挑战2 - 制作百科全书式app

教程地址：https://bit.ly/TGirlsCN-CodingChallenge2
返回教程目录：https://mc.dfrobot.com.cn/thread-308465-1-1.html

编程挑战2：制作百科全书式应用程序

本挑战将您获得如下课题的积分：应用功能，用户体验和设计，技术学习以及代码复杂性。       为完成本挑战，您将……    Ÿ  运用您所学到的列表知识    Ÿ  创建百科全书式应用程序

关键术语和概念

Ÿ  百科全书 - 一本可以在上面查找某一主题相关信息的书    Ÿ  起始值- 在App  Inventor中，它是您可以从一个屏幕传递到另一个屏幕的信息。

学习

挑战：制作百科全书式应用程序    制作一个应用程序，帮助用户学习任何你想要的主题。 这个主题可以是名人，流行电影，著名景点，即将发生的事件，或其他任何东西。  选择该主题相关的3-6个示例，并在一个屏幕上显示其名称。 （例如，您可以显示一份罗列女科学家姓名的列表。）当用户点击其中一个姓名时，应用程序应向他们提供有关此科学家的更多信息。    欢迎参加第二次编码挑战！这是对您目前为止所学知识进行实践的一个考点。我们建议您尝试使用App Inventor，Thunkable，Thunkable Classic，Java或Swift中解决此挑战！ 以下主要以App  Inventor和Thunkable为例进行说明。    查看此示例应用程序，获得灵感和启发：

活动—编写伪代码

在开始编码之前，请尝试写一些伪代码，描述希望自己的应用程序可以做什么。下面我们在创建解决方案之前写的示例：    ·    当用户打开应用程序时，将出现一份女性发明者列表    ·    当用户单击列表中的一位女发明家时，该应用会将他们带到一个新屏幕    ·    在新屏幕上，有关于发明家，她的姓名和人生经历的信息。    ·    当用户单击“返回”时，该应用程序将返回到女性发明家的主列表

一种可行的解决方案—App Inventor

Youtube视频教程：https://www.youtube.com/watch?v=5pkf0t1nE1Y       App  Gallery中的示例解决方案：ai2.appinventor.mit.edu/?galleryId=6040387383853056       操作指南如下：       以下是我们在这个应用程序中使用的女性发明家的名字和介绍。           姓名 介绍 阿达是一位十九世纪的英国数学家和作家，她因研究查尔斯·巴贝奇早期的机械通用计算机“分析引擎”而闻名。阿达通常被认为是史上第一位程序员，因为她编写了第一个旨在由机器执行的算法     （Ada    Lovelace） 阿达·洛芙莱斯 玛丽是物理学家和化学家，1867年出生于波兰华沙。她与丈夫皮埃尔（Pierre）一起发现了两种新的放射性元素。玛丽于1903年获得诺贝尔物理学奖。她还发现镭气可用于癌症治疗。 玛丽·居里     （Marie Curie） 爱丽丝是一位化学家，1892年出生于西雅图。她是从夏威夷大学毕业的第一位非洲裔美国人，也是第一位女性。年仅23岁的爱丽丝发明了一种治疗麻风病的方法，而在她开展此项研究之前，麻风病似乎是一种无法治愈的疾病。 爱丽丝·鲍尔（Alice Ball） 吴秀兰是粒子物理学家，出生于1940年代初期日本占领香港期间。她在哈佛大学获得博士学位。她领导的团队发现了胶子。她是该领域最重要的粒子物理学家之一，取得了许多突破性的发现。 吴秀兰     （Sau Lan Wu） 帕特里夏是一位眼科医生和发明家，于1942年出生在纽约市的哈林。她仅用了两年半就读完高中，并且知道自己想成为医生。1985年，她完成了一项发明，使得在全世界范围内清除白内障成为可能，帮助千千万万的人恢复了视力。 帕特里夏·巴斯（Patricia Bath）       首先，我们需要设计一个可以显示女性发明家列表的屏幕。为此，我们将使用列表视图。    首先将一个标签拖到屏幕上。将文本更改为你想表达的任何内容。       我们让标签上写道“您想了解谁？” 将ListView（列表视图）拖到屏幕上。       这能让您显示出一个列表。         3. 提示：为了让灰色标题栏脱离屏幕，请在屏幕1（Screen1）的属性中向下滚动。确保“TitleVisible（标题可见）”框未选中。         现在，让我们添加一些信息以供ListView显示。   4.  前往代码块编辑器，创建两个全局变量，并将其初始化为全局[姓名]为。输入每个变量的名称。我们把自己的命名为“姓名”和“介绍”。         5. 抓取make a list(创建一个列表)代码块并将其添加到每个全局变量中。   6. 创建两个列表，一个是女科学家的姓名，另一个是对她们的生活和工作的介绍。每个人姓名和介绍的索引需要匹配。因此，例如，如果居里夫人在姓名列表中排第二，请确保对她的介绍也在介绍列表中排第二。              现在我们已经创建好了列表，我们需要在ListView中显示姓名列表。 7.  单击屏幕1并抓取when       Screen1.initialize（当屏幕1.初始化）代码块，并将其拖动到屏幕上 8. 单击ListView并抓取Set       ListView1.Elements to（设置列表视图1.元素为）代码块。 9. 单击变量并抓取get（获得）代码块，然后从下拉列表中选择全局姓名。         花一点时间测试自己的应用程序。此时，您应该在第一个屏幕上看到一个列表，其中列出了所有女性发明家的姓名。如果看不到，请返回调试应用程序。    现在，我们已经创建了一个女性发明家列表，我们需要创建一种方法，让用户在从列表中选择内容时看到对每位女性的介绍。我们将在另一个屏幕上执行此操作。   10. 返回设计器屏幕，创建一个新屏幕 11. 拖动两个标签至此屏幕上 12. 添加一个按钮并将其命名为“返回         现在，我们需要告诉应用程序，去为用户选择的每个女发明家添加正确的姓名和介绍。首先，我们需要回到屏幕1的代码块编辑器。      13. 从ListView菜单中获取ListView.AfterPicking（列表视图.挑选后）代码块。 14. 在其内部，从控制菜单中添加open       another screen with start value（打开另一个带有起始值的屏幕）代码块。有关起始值的更多信息，请阅读其他资源参考资料。 15. 首先，我们需要告诉自己的应用程序，当用户从列表视图中选择某项时，该打开哪一个屏幕。抓取一个文本代码块，然后输入“屏幕2”。将其添加到您的open another screen with start       value（打开另一个带有起始值的屏幕）代码块。 16. 现在，我们需要将发明家和相应的介绍从屏幕1传递到屏幕2。由于我们有多个信息要传递到屏幕2，所以我们需要创建一个包含该信息的新列表。为此，您需要create a new list（创建一个新的列表）代码块。 [size=13.3333px]17. 该列表上的第一项将是用户选择的某位发明家，为此，我们使用ListView1.selection（列表视图1.选择）代码块。 18. 该列表上的第二项将是我们的介绍列表变量中对本发明家的介绍。为此，我们使用select item from list（从列表中选择项目）代码块。 19. 现在，您需要添加一个列表以供选择。使用变量菜单中的获取变量代码块，然后从下拉菜单中选择全局介绍。 20. 您还需要将索引添加到介绍列表所需的项目中。幸运的是，用户在ListView中选择的发明家的索引与介绍列表中相应介绍的索引相同。我们可以使用ListView1.SelectionIndex（列表视图1.选择索引）代码块。       到这里就差不多要做好了！最后一步是在屏幕2上显示此信息。您刚刚向屏幕2传递了一个起始值（即一个列表）。该起始值包含两部分信息，第一个是女发明家的姓名，然后第二个是介绍。您可以这样设想起始值：       ●        起始值   =    ○        姓名 (索引=1)    ○        介绍 (索引=2)       阅读其他资源，获取有关起始值的更多信息。      21. 首先，我们希望屏幕2在打开时显示发明家的姓名和介绍。抓取when       Screen2.Initialize（当屏幕2.初始化）代码块。    22. 要在标签中显示发明家的姓名，首先抓取set       Label1.text to（设置标签1.文本为)代码块。    23. 您需要起始值中的第一项。请记住，您的起始值是一个列表，因此要从中选择一个项目，抓取select item from list（从列表中选择项目）代码块。    24. 通过为列表姓名添加get       start value（获取起始值）和“1”为索引来完成此代码块。    25. 对标签2再次重复此操作，但请确保使用“2”作为索引。                  最后，您需要一种返回到屏幕1的方法，以便用户可以选择其他发明家来了解。   26. 为返回按钮抓取when       Back.click（当返回.点击）事件处理器    27. 添加open       another screen（打开另一个屏幕）代码块    28. 添加“屏幕1”作为名称          这就可以了！对您的百科全书应用程序进行测试，确保它可以正常运行。如果不行的话，试着重新看一遍视频或再阅读一遍说明。您可以随时向组员或导师寻求帮助！

一种可行的解决方案—Thunkable

Youtube视频教程： https://www.youtube.com/watch?v=jleh4XRjKPg       示例解决方案项目：https://x.thunkable.com/copy/cafaf6d844646b87a449283aac1bf496       操作指南如下：       1. 将Listviewer组件拖放到手机中。Listviewer将显示不同科学家的姓名。          2. 将一个本地数据库组件拖放到应用程序中。本地数据库将存储不同科学家的姓名和信息。接下来，单击编辑“本地数据库”表。             3. 将第1列重命名为“姓名”。  这里将显示科学家的姓名。 接下来，将第2列重命名为“介绍”。 本栏将列出对每位科学家的介绍。             4. 将下表中的姓名和介绍复制并粘贴到本地数据库表中。如果您要自定义自己的应用，可随意添加自己的信息:)       姓名 介绍 阿达·洛芙莱斯（Ada Lovelace） 阿达是一位十九世纪的英国数学家和作家，她因研究查尔斯·巴贝奇早期的机械通用计算机“分析引擎”而闻名。阿达通常被认为是史上第一位程序员，因为她编写了第一个旨在由机器执行的算法。 玛丽·居里（Marie Curie） 玛丽是物理学家和化学家，1867年出生于波兰华沙。她与丈夫皮埃尔（Pierre）一起发现了两种新的放射性元素。玛丽于1903年获得诺贝尔物理学奖。她还发现镭气可用于癌症治疗。 爱丽丝·鲍尔（Alice Ball） 爱丽丝是一位化学家，1892年出生于西雅图。她是从夏威夷大学毕业的第一位非洲裔美国人，也是第一位女性。年仅23岁的爱丽丝发明了一种治疗麻风病的方法，而在她开展此项研究之前，麻风病似乎是一种无法治愈的疾病。 吴秀兰（Sau Lan Wu） 吴秀兰是粒子物理学家，出生于1940年代初期日本占领香港期间。她在哈佛大学获得博士学位。她领导的团队发现了胶子。她是该领域最重要的粒子物理学家之一，取得了许多突破性的发现。 帕特里夏·巴斯（Patricia Bath） 帕特里夏是一位眼科医生和发明家，于1942年出生在纽约市的哈林。她仅用了两年半就读完高中，并且知道自己想成为医生。1985年，她完成了一项发明，使得在全世界范围内清除白内障成为可能，帮助千千万万的人恢复了视力。       您创作的表应该和下图类似：    5. 点击“代码块（blocks）”选项，对屏幕1进行编程。       6. 前往屏幕1的代码块选项。将“When Screen1 opens do（当屏幕1打开时执行）”代码块拖放到代码块编辑器中。          7. 接下来，转到Listviewer的代码块选项，然后将“from  List_Viewer1 set TextItems to（从列表视图器1设置文本术语至）”代码块拖放到屏幕1代码块中。这种组合表示，当屏幕1打开时，将Listviewer文本设置为某些内容。       我们希望将Listviewer的文本设置为我们放入本地数据库中的姓名。       8. 转到本地数据库的代码块选项，将“ in Local_DB1 call get column（在本地数据库1称为获取列）”代码块拖放到Listviewer代码块中。       9. 进入数学代码块选项，抓取一个空白数字块。将此代码块放到此处的开头位置。我们也将0更改为1，因为姓名在表格的第1列中。       现在，当屏幕打开时，您的应用程序会将List_viewer的文本项设置为我们输入数据库中的名称。       10. 我们不知道用户将选择哪个科学家。可能是阿达·洛芙莱斯，可能是玛丽·居里，我们不知道！因此，我们需要在应用程序中添加一个变量。       变量其实就是可更改内容的占位符。       这就好比说，单击一个科学家（变量），我们将为任何您选择的姓名（变量）匹配正确的介绍。       进入变量抽屉，将“initialize app variable（初始化应用程序变量）”代码块拖放到代码块编辑器中。接下来，我们将在把此代码块的“姓名”更改为rowNumber（行号）。同样，此代码块只是行号的占位符。          11. 进入文本抽屉，将一个文本代码块拖放到变量代码块中。我们在这里用“占位符”一词。          12. 我们需要告诉应用程序，当单击List_Viewer上的姓名时，它应该设置变量，来匹配本地数据库中的信息。       进入Listviewer的代码块选项。选择“When List_Viewer1 item click（当列表视图器1项目单击）” 代码块至代码块编辑器中。              13. 接下来，进入变量代码块，然后选择“set app rowNumber to（设置应用程序行号为）”代码块，将其放入Listviewer代码块。然后，只需从提供的Listviewer中获取一个索引代码块，然后将其放到开头就可以了。       做的真棒！现在，当单击Listviewer上的姓名时，将显示相应的介绍。       14. 当姓名被单击后，我们还需要让应用程序转到下一个屏幕。因此，请单击页面顶部的加号符号，添加屏幕。       15. 进入控制部分的代码块选项。将“navigate to Screen1（导航至屏幕1）”代码块拖放到变量代码块下，并将其设置为屏幕2。       16. 单击设计部分，然后转到“屏幕2”。将一个按钮组件和两个标签组件拖放到屏幕2中。       17. 将按钮重命名为“返回按钮”。接下来，将按钮的文本更改为“返回”。          18. 对标签重命名。我们将第一个标签重命名为“介绍标签”，再将第二个标签重命名为“姓名标签”。       19. 进入屏幕2的代码块部分。我们首先对“返回”按钮进行编程。在“返回按钮”的代码块选项中，选择“when  Back Button click（当返回按钮单击时）”代码块，并将其拖放到代码块编辑器中。接下来，回到到控制部分，获得一个“navigate to Screen1（导航至屏幕1）”代码块，并将其放入“返回按钮”代码块。       20. 进入屏幕2的代码块选项，然后选择“when Screen2 opens（当屏幕2打开时）”代码块，并将其拖放到代码块编辑器中。接下来，进入姓名标签的代码块选项。将“from Name Label set text to（从姓名标签设置文本至）”代码块拖放到屏幕2代码块中。另外，将“from  Description Label set text to（从介绍标签设置文本至”拖放到“姓名标签”代码块下。         现在，我们需要对这些标签发生的事情进行编程—也就是说，我们需要将它们与本地数据库表中的正确信息进行匹配。       21. 进入本地数据库1的代码块选项，然后将“ in Local_DB1 call get cell（在本地数据库1称为获取单元格）”代码块拖放到姓名标签代码块中。您也可以将此代码块复制并粘贴到下面的“介绍标签”代码块中。       22.  进入数学代码块选项，抓取一个空白数字块，并将其放入姓名标签代码块的列开头位置。我们将数字更改为1。复制并粘贴此代码块，然后将其放入“介绍标签”代码块的列开头位置。将此数字更改为2。       太好了，现在将在第1列中调用科学家的姓名，并在第2列中调用介绍。       23. 最后，转到变量的代码块选项。选择一个“app rowNumber（应用程序行号）”代码块，将其放入“姓名”和“介绍”代码块的“rowNum”开头位置。       太棒啦！点击实时测试，对您设计的应用程序进行测试:)

举一反三

恭喜您完成了第二次代码挑战！    ●       如果您也想显示每位女性发明家的照片，您将如何更改自己的应用程序？

其他资源

起始值    每次在App  Inventor中创建一个新屏幕时，就像开始一个新的应用程序一样。 每个屏幕都是独立运行的，无法访问其他屏幕上的信息。也就是说，屏幕1中的全局变量在屏幕2中是不可用的。要在屏幕之间传递信息，您将需要使用open a new screen with start value（打开一个带有起始值的新屏幕）代码块。