2021-3-9 23:17:54 [显示全部楼层]
577浏览
查看: 577|回复: 0

[Technovation] 【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为例进行说明。
  
查看此示例应用程序,获得灵感和启发:
image001.gif image002.gif
  
  
活动—编写伪代码
  
在开始编码之前,请尝试写一些伪代码,描述希望自己的应用程序可以做什么。下面我们在创建解决方案之前写的示例:
  
·    当用户打开应用程序时,将出现一份女性发明者列表
  
·    当用户单击列表中的一位女发明家时,该应用会将他们带到一个新屏幕
  
·    在新屏幕上,有关于发明家,她的姓名和人生经历的信息。
  
·    当用户单击“返回”时,该应用程序将返回到女性发明家的主列表
  
一种可行的解决方案—App Inventor
  
  
  
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(列表视图)拖到屏幕上。       这能让您显示出一个列表。
  
image003.png
  









      3. 提示:为了让灰色标题栏脱离屏幕,请在屏幕1Screen1)的属性中向下滚动。确保TitleVisible(标题可见)框未选中。  
  
image004.png
  
现在,让我们添加一些信息以供ListView显示。
  4.  前往代码块编辑器,创建两个全局变量,并将其初始化为全局[姓名]。输入每个变量的名称。我们把自己的命名为“姓名”和介绍      
  5. 抓取make a list(创建一个列表)代码块并将其添加到每个全局变量中。
  6. 创建两个列表,一个是女科学家的姓名,另一个是对她们的生活和工作的介绍。每个人姓名和介绍的索引需要匹配。因此,例如,如果居里夫人在姓名列表中排第二,请确保对她的介绍也在介绍列表中排第二。
      
  
image005.png
  
现在我们已经创建好了列表,我们需要在ListView中显示姓名列表。
7.  单击屏幕1并抓取when       Screen1.initialize(当屏幕1.初始化)代码块,并将其拖动到屏幕上
8. 单击ListView并抓取Set       ListView1.Elements to(设置列表视图1.元素为)代码块
9. 单击变量并抓取get(获得)代码块,然后从下拉列表中选择全局姓名  
  
image006.png
  
花一点时间测试自己的应用程序。此时,您应该在第一个屏幕上看到一个列表,其中列出了所有女性发明家的姓名。如果看不到,请返回调试应用程序。
  
现在,我们已经创建了一个女性发明家列表,我们需要创建一种方法,让用户在从列表中选择内容时看到对每位女性的介绍。我们将在另一个屏幕上执行此操作。
  10. 返回设计器屏幕,创建一个新屏幕
11. 拖动两个标签至此屏幕上
12. 添加一个按钮并将其命名为返回  
  
image007.png
  
现在,我们需要告诉应用程序,去为用户选择的每个女发明家添加正确的姓名和介绍。首先,我们需要回到屏幕1的代码块编辑器。
  
image008.png
  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.选择索引)代码块。
  
image009.png
  
到这里就差不多要做好了!最后一步是在屏幕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作为索引。
       image010.png       
  
最后,您需要一种返回到屏幕1的方法,以便用户可以选择其他发明家来了解。
  26. 为返回按钮抓取when       Back.click(当返回.点击)事件处理器
  
27. 添加open       another screen(打开另一个屏幕)代码块
  
28. 添加屏幕1作为名称
  
  
image011.png
  
这就可以了!对您的百科全书应用程序进行测试,确保它可以正常运行。如果不行的话,试着重新看一遍视频或再阅读一遍说明。您可以随时向组员或导师寻求帮助!
  
  
一种可行的解决方案—Thunkable
  
  
    
  
操作指南如下:
  
  
1. Listviewer组件拖放到手机中。Listviewer将显示不同科学家的姓名。
  
  
image012.png
  
2. 将一个本地数据库组件拖放到应用程序中。本地数据库将存储不同科学家的姓名和信息。接下来,单击编辑“本地数据库”表。
  
image013.png
  
  
  
3. 将第1列重命名为“姓名”。  这里将显示科学家的姓名。 接下来,将第2列重命名为“介绍”。 本栏将列出对每位科学家的介绍。
  
image014.png
  
  
  
4. 将下表中的姓名和介绍复制并粘贴到本地数据库表中。如果您要自定义自己的应用,可随意添加自己的信息:)
  
  
姓名
介绍
阿达·洛芙莱斯(Ada Lovelace)
阿达是一位十九世纪的英国数学家和作家,她因研究查尔斯·巴贝奇早期的机械通用计算机“分析引擎”而闻名。阿达通常被认为是史上第一位程序员,因为她编写了第一个旨在由机器执行的算法。
玛丽·居里(Marie Curie)
玛丽是物理学家和化学家,1867年出生于波兰华沙。她与丈夫皮埃尔(Pierre)一起发现了两种新的放射性元素。玛丽于1903年获得诺贝尔物理学奖。她还发现镭气可用于癌症治疗。
爱丽丝·鲍尔(Alice Ball)
爱丽丝是一位化学家,1892年出生于西雅图。她是从夏威夷大学毕业的第一位非洲裔美国人,也是第一位女性。年仅23岁的爱丽丝发明了一种治疗麻风病的方法,而在她开展此项研究之前,麻风病似乎是一种无法治愈的疾病。
吴秀兰(Sau Lan Wu)
吴秀兰是粒子物理学家,出生于1940年代初期日本占领香港期间。她在哈佛大学获得博士学位。她领导的团队发现了胶子。她是该领域最重要的粒子物理学家之一,取得了许多突破性的发现。
帕特里夏·巴斯(Patricia Bath)
帕特里夏是一位眼科医生和发明家,于1942年出生在纽约市的哈林。她仅用了两年半就读完高中,并且知道自己想成为医生。1985年,她完成了一项发明,使得在全世界范围内清除白内障成为可能,帮助千千万万的人恢复了视力。
image015.png
  
  
您创作的表应该和下图类似:
  
5. 点击“代码块(blocks)”选项,对屏幕1进行编程。
  
image016.png
  
6. 前往屏幕1的代码块选项。将“When Screen1 opens do(当屏幕1打开时执行)”代码块拖放到代码块编辑器中。
  
image017.png
  
  
7. 接下来,转到Listviewer的代码块选项,然后将“from  List_Viewer1 set TextItems to(从列表视图器1设置文本术语至)”代码块拖放到屏幕1代码块中。这种组合表示,当屏幕1打开时,将Listviewer文本设置为某些内容。
  
image018.png
  
我们希望将Listviewer的文本设置为我们放入本地数据库中的姓名。
  
  
8. 转到本地数据库的代码块选项,将“ in Local_DB1 call get column(在本地数据库1称为获取列)”代码块拖放到Listviewer代码块中。
  
image019.png
  
9. 进入数学代码块选项,抓取一个空白数字块。将此代码块放到此处的开头位置。我们也将0更改为1,因为姓名在表格的第1列中。
  
image020.png
  
现在,当屏幕打开时,您的应用程序会将List_viewer的文本项设置为我们输入数据库中的名称。
  
  
10. 我们不知道用户将选择哪个科学家。可能是阿达·洛芙莱斯,可能是玛丽·居里,我们不知道!因此,我们需要在应用程序中添加一个变量。
  
  
变量其实就是可更改内容的占位符。
  
  
这就好比说,单击一个科学家(变量),我们将为任何您选择的姓名(变量)匹配正确的介绍。
  
  
进入变量抽屉,将“initialize app variable(初始化应用程序变量)”代码块拖放到代码块编辑器中。接下来,我们将在把此代码块的“姓名”更改为rowNumber(行号)。同样,此代码块只是行号的占位符。
  
  
image021.png
  
11. 进入文本抽屉,将一个文本代码块拖放到变量代码块中。我们在这里用“占位符”一词。
  
image022.png
  

  
12. 我们需要告诉应用程序,当单击List_Viewer上的姓名时,它应该设置变量,来匹配本地数据库中的信息。
  
  
进入Listviewer的代码块选项。选择“When List_Viewer1 item click(当列表视图器1项目单击)” 代码块至代码块编辑器中。
      
  
image023.png
  
13. 接下来,进入变量代码块,然后选择“set app rowNumber to(设置应用程序行号为)”代码块,将其放入Listviewer代码块。然后,只需从提供的Listviewer中获取一个索引代码块,然后将其放到开头就可以了。
  
image024.png
  
做的真棒!现在,当单击Listviewer上的姓名时,将显示相应的介绍。
  
  
14. 当姓名被单击后,我们还需要让应用程序转到下一个屏幕。因此,请单击页面顶部的加号符号,添加屏幕。
  
image025.png
  
15. 进入控制部分的代码块选项。将“navigate to Screen1(导航至屏幕1)”代码块拖放到变量代码块下,并将其设置为屏幕2
  
image026.png
  
16. 单击设计部分,然后转到“屏幕2”。将一个按钮组件和两个标签组件拖放到屏幕2中。
  
image027.png
  
17. 将按钮重命名为“返回按钮”。接下来,将按钮的文本更改为“返回”。
  
image028.png
  
  
18. 对标签重命名。我们将第一个标签重命名为“介绍标签”,再将第二个标签重命名为“姓名标签”。
  
image029.png
  
19. 进入屏幕2的代码块部分。我们首先对“返回”按钮进行编程。在“返回按钮”的代码块选项中,选择“when  Back Button click(当返回按钮单击时)”代码块,并将其拖放到代码块编辑器中。接下来,回到到控制部分,获得一个“navigate to Screen1(导航至屏幕1)”代码块,并将其放入“返回按钮”代码块。
  
image030.png
  
20. 进入屏幕2的代码块选项,然后选择“when Screen2 opens(当屏幕2打开时)”代码块,并将其拖放到代码块编辑器中。接下来,进入姓名标签的代码块选项。将“from Name Label set text to(从姓名标签设置文本至)”代码块拖放到屏幕2代码块中。另外,将“from  Description Label set text to(从介绍标签设置文本至”拖放到“姓名标签”代码块下。  
  
image031.png
  
现在,我们需要对这些标签发生的事情进行编程—也就是说,我们需要将它们与本地数据库表中的正确信息进行匹配。
  
  
21. 进入本地数据库1的代码块选项,然后将“ in Local_DB1 call get cell(在本地数据库1称为获取单元格)”代码块拖放到姓名标签代码块中。您也可以将此代码块复制并粘贴到下面的“介绍标签”代码块中。
  
image032.png
  
22.  进入数学代码块选项,抓取一个空白数字块,并将其放入姓名标签代码块的列开头位置。我们将数字更改为1。复制并粘贴此代码块,然后将其放入“介绍标签”代码块的列开头位置。将此数字更改为2
  
image033.png
  
太好了,现在将在第1列中调用科学家的姓名,并在第2列中调用介绍。
  
  
23. 最后,转到变量的代码块选项。选择一个“app rowNumber(应用程序行号)”代码块,将其放入“姓名”和“介绍”代码块的“rowNum”开头位置。
  
image034.png
  
太棒啦!点击实时测试,对您设计的应用程序进行测试:)
  
举一反三
  
恭喜您完成了第二次代码挑战!
  
●       如果您也想显示每位女性发明家的照片,您将如何更改自己的应用程序?
  
其他资源
  
起始值
  
每次在App  Inventor中创建一个新屏幕时,就像开始一个新的应用程序一样。 每个屏幕都是独立运行的,无法访问其他屏幕上的信息。也就是说,屏幕1中的全局变量在屏幕2中是不可用的。要在屏幕之间传递信息,您将需要使用open a new screen with start value(打开一个带有起始值的新屏幕)代码块。
image035.png
  



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2022 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail