【Technovation官方中文教程】编程挑战1 - 建立图片库

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

编程挑战1：建立图片库

本挑战将帮您获得如下课题的积分：应用功能，用户体验和设计，技术学习以及代码复杂性。       为完成本挑战，您将……    Ÿ  使用您所学到的事件处理程序和用户界面    Ÿ  创建自己的图片库应用程序

关键术语和概念
伪代码—用普通语言而不是代码编写算法

代码1挑战：建立一个图片库

挑战：建立一个图片库    创建一个允许用户查看至少三张不同图片的应用程序。这个应用程序应该具有“图库/画廊”的感觉，这样用户应该能够查看每一张图片，一次看一张。    欢迎来到您的第一次编码挑战！这是对您目前为止所学知识进行实践的一个考点。我们建议您尝试使用App  Inventor，Thunkable，Swift，Thunkable  Classic或Java（因为这些语言是可以提交至我们的竞赛项目的）来解决这一挑战！以下主要以App  Inventor和Thunkable为例进行说明。    这里有一些不同的解决方案，可以帮助您获得灵感！

活动—编写伪代码

在开始编码之前，您可以写一些伪代码，描述希望自己的应用程序可以做什么，是很有帮助的一种方式。请记住，伪代码是用普通语言写出算法，而不是用代码写。在创建解决方案之前该怎么写呢，请看下面的例子。       屏幕上将有3个按钮 当单击按钮时，将出现一个图像 当单击另一个按钮时，将出现一个不同的图像

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

这里有一支Technovation校友Jennifer制作的视频解决方案，请点击查看： Code Challenge 1  VideoSolution    设计您的用户界面    在这个应用程序中，您将创建一个幻灯片，让用户可以浏览不同的图像。在设计屏幕时，您将放置一个图像和按钮，供用户单击以查看不同的图像。首先，您需要在设计器屏幕中创建用户界面。       在您的屏幕上添加一个图像。     调整图像宽度和高度，使其适合您的屏幕！ 我们选择让图像“fill        parent”。当您选择“fill parent”时，即是在告诉组件去填充它所在位置的空间。图像1位于屏幕内部，但是按钮位于水平排列的容器内部。您可以通过组件菜单中列出的方式，查看哪些事物在其他事物中。    在图像下方的屏幕上添加一个水平布局。 拖放三个按钮到水平布局中。     点击组件菜单中的按钮，编辑文本，使按钮显示为图片1、图片2、图片3     您还应该更改按钮的名称，帮助您记住按钮的功能！比如我们将其改为“图片1”、“图片2”和“图片3”。可以点击组件下方的“重命名”来做到这一点。        将您想使用的图片上传至图库！          对功能块 (block) 进行编程    说明：现在用户界面已经创建好了，您需要让它做一些事情，实现一些功能。您需要让自己的应用程序在用户按下按钮时显示不同的图像。为此，您将使用事件处理程序（event handlers）按钮。       点击之前命名为“图片1”的按钮，查看所有可以使用的功能块。抓取“when       button.click”（何时按钮.单击）功能块，并将其拖放到工作区中。 单击图片1查看可以用于图像的所有功能块。抓取“set Image1.picture to”（设置图片1.图像至）。把这个功能块放到when       button.click事件处理程序中。 抓取一个空文本功能块，输入图片的名称。将此功能块附加到set Image1.picture to功能块中。     提示：名称必须完全匹配。例如，我们的图片被命名为“图片1.png”    对每个按钮重复此操作。

一种可行的解决方案—Thunkable

以下连接是Thunkable的一个视频解决方案： https://youtu.be/0qZ5-7t4f70    Starter  project（启动项）: https://x.thunkable.com/copy/1a2eb266717aa077a066d70989387615       将一个图片组件拖放到该应用程序构建器中。             设置图像的高度至50%，宽度为“90%”。                      将一个行组件拖放到应用程序构建器中。行组件将充当容器，并允许您在容器内添加和组织按钮。                将三个按钮拖放到行组件中。 单击每个按钮，然后将其重命名为图片1按钮，图片2按钮和图片3按钮。 接下来，将按钮的文本更改为图片1，图片2和图片3。                在图库中上传您要使用的图片！您不必使用我们选择的图片。为此，请单击图片组件，然后可在图片部分中上传图片。          您刚刚创建了一个用户界面，真是太棒了！    现在，您需要对用户界面的工作方式进行编程。为此，您将使用blocks. Click（功能块.单击）部分。    8. 单击“图片1按钮”的功能块选项，查看可以使用的所有功能块。拖放“when Image 1 Button click do”（当图片1按钮单击时执行）功能块到编辑器中。    9. 单击图片1的功能块选项。拖放“from Image1 set picture to（从图片1设置图像至）”功能块至功能块编辑器中。将此功能块放在“when.Image 1 Button  click（当图片1按钮单击时）”功能块中。    10. 复制并粘贴此功能块组合2次。现在您应该总共有3个功能块组合了。转到第二个功能块组合。在第一个功能块的下拉菜单中，将功能块设置为“when image 2 button  click（当图片2按钮单击时）”。接下来，单击所设置图片功能块的下拉菜单。让功能块将图片设置为马拉拉.jpg。    11. 转到第三个功能块组合。在第一个功能块的下拉菜单中，将功能块设置为“ when image 3 button  click当图片3按钮单击时）”。接下来，单击所设置图片功能块的下拉菜单。将功能块设置为RBG.jpg。       12. 在您的移动设备上打开Thunkable Live App。确保使用与电脑上相同的帐户登录。单击电脑上的实时测试（live test），在您的移动设备上测试该应用程序！       解决方案： https://x.thunkable.com/copy/cac3e112fee7271d018e866f0bd57960

举一反三

您刚刚已经完成了第一个编码挑战！下面有三个问题，需要您和小组一起思考。       您能否建议对幻灯片应用进行任何改进，使其更有趣，更有用？ 如何为无法触摸按钮的用户重新设计此应用程序 有没有可能通过手机的摄像头拍摄照片，然后将照片添加到幻灯片中？您需要App       Inventor或Thunkable具有什么样的编程功能？您要如何学习将其构建到自己的应用程序中？     提示：进行谷歌搜索，与您的组员分享自己的发现。

其他资源

在App Inventor上使用多重屏幕    您可能已经注意到，解决这一挑战的方法不依赖于创建多个屏幕。 App Inventor可以很容易地为应用添加更多屏幕，但需要小心不要添加太多屏幕。这是因为，在App Inventor中使用大量屏幕会占用大量内存。创建10个以上的屏幕后，您的应用可能无法再运作了。    与其添加更多屏幕，您应该找到可重复使用的用户界面部分，就像这个代码挑战中所展示的解决方案一样。设计应用程序时，请记住这一点。在其他代码挑战中，您还将看到更多关于如何重复使用用户界面部分的示例。

另一个可行的解决方案—Thunkable    您可以使用多重屏幕创建一个图片库。以下是使用Thunkable的另一个解决方案：https://www.youtube.com/watch?v=OPqStzw3SbQ&feature=youtu.be