szjuliet 发表于 2021-3-9 23:17:54

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

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

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

关键术语和概念
Ÿ百科全书 - 一本可以在上面查找某一主题相关信息的书Ÿ起始值- 在AppInventor中,它是您可以从一个屏幕传递到另一个屏幕的信息。

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


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

一种可行的解决方案—App Inventor
Youtube视频教程:https://www.youtube.com/watch?v=5pkf0t1nE1Y
AppGallery中的示例解决方案: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(创建一个新的列表)代码块。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的代码块选项,然后将“fromList_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的代码块部分。我们首先对“返回”按钮进行编程。在“返回按钮”的代码块选项中,选择“whenBack Button click(当返回按钮单击时)”代码块,并将其拖放到代码块编辑器中。接下来,回到到控制部分,获得一个“navigate to Screen1(导航至屏幕1)”代码块,并将其放入“返回按钮”代码块。 20. 进入屏幕2的代码块选项,然后选择“when Screen2 opens(当屏幕2打开时)”代码块,并将其拖放到代码块编辑器中。接下来,进入姓名标签的代码块选项。将“from Name Label set text to(从姓名标签设置文本至)”代码块拖放到屏幕2代码块中。另外,将“fromDescription Label set text to(从介绍标签设置文本至”拖放到“姓名标签”代码块下。
现在,我们需要对这些标签发生的事情进行编程—也就是说,我们需要将它们与本地数据库表中的正确信息进行匹配。
21. 进入本地数据库1的代码块选项,然后将“ in Local_DB1 call get cell(在本地数据库1称为获取单元格)”代码块拖放到姓名标签代码块中。您也可以将此代码块复制并粘贴到下面的“介绍标签”代码块中。 22.进入数学代码块选项,抓取一个空白数字块,并将其放入姓名标签代码块的列开头位置。我们将数字更改为1。复制并粘贴此代码块,然后将其放入“介绍标签”代码块的列开头位置。将此数字更改为2。
太好了,现在将在第1列中调用科学家的姓名,并在第2列中调用介绍。
23. 最后,转到变量的代码块选项。选择一个“app rowNumber(应用程序行号)”代码块,将其放入“姓名”和“介绍”代码块的“rowNum”开头位置。
太棒啦!点击实时测试,对您设计的应用程序进行测试:)

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

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




页: [1]
查看完整版本: 【Technovation官方中文教程】 编程挑战2 - 制作百科全书式app