【Technovation官方中文教程】编程挑战1 - 建立图片库
本帖最后由 szjuliet 于 2021-3-4 20:05 编辑教程地址：https://bit.ly/TGirlsCN-CodingChallenge1
返回教程目录：https://mc.dfrobot.com.cn/thread-308465-1-1.html
编程挑战1：建立图片库
本挑战将帮您获得如下课题的积分：应用功能，用户体验和设计，技术学习以及代码复杂性。 为完成本挑战，您将……使用您所学到的事件处理程序和用户界面创建自己的图片库应用程序
关键术语和概念
伪代码—用普通语言而不是代码编写算法
代码1挑战：建立一个图片库
挑战：建立一个图片库创建一个允许用户查看至少三张不同图片的应用程序。这个应用程序应该具有“图库/画廊”的感觉，这样用户应该能够查看每一张图片，一次看一张。欢迎来到您的第一次编码挑战！这是对您目前为止所学知识进行实践的一个考点。我们建议您尝试使用AppInventor，Thunkable，Swift，ThunkableClassic或Java（因为这些语言是可以提交至我们的竞赛项目的）来解决这一挑战！以下主要以AppInventor和Thunkable为例进行说明。这里有一些不同的解决方案，可以帮助您获得灵感！
活动—编写伪代码
在开始编码之前，您可以写一些伪代码，描述希望自己的应用程序可以做什么，是很有帮助的一种方式。请记住，伪代码是用普通语言写出算法，而不是用代码写。在创建解决方案之前该怎么写呢，请看下面的例子。
[*]屏幕上将有3个按钮
[*]当单击按钮时，将出现一个图像
[*]当单击另一个按钮时，将出现一个不同的图像
一种可行的解决方案—App Inventor
这里有一支Technovation校友Jennifer制作的视频解决方案，请点击查看： Code Challenge 1VideoSolution设计您的用户界面在这个应用程序中，您将创建一个幻灯片，让用户可以浏览不同的图像。在设计屏幕时，您将放置一个图像和按钮，供用户单击以查看不同的图像。首先，您需要在设计器屏幕中创建用户界面。
[*]在您的屏幕上添加一个图像。
[*]调整图像宽度和高度，使其适合您的屏幕！
[*]我们选择让图像“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-7t4f70Starterproject（启动项）: 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 Buttonclick（当图片1按钮单击时）”功能块中。10. 复制并粘贴此功能块组合2次。现在您应该总共有3个功能块组合了。转到第二个功能块组合。在第一个功能块的下拉菜单中，将功能块设置为“when image 2 buttonclick（当图片2按钮单击时）”。接下来，单击所设置图片功能块的下拉菜单。让功能块将图片设置为马拉拉.jpg。11. 转到第三个功能块组合。在第一个功能块的下拉菜单中，将功能块设置为“ when image 3 buttonclick当图片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
页:
[1]