2021-3-4 20:05:10 [显示全部楼层]
590浏览
查看: 590|回复: 0

[Technovation] 【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挑战:建立一个图片库
  
挑战:建立一个图片库
  
创建一个允许用户查看至少三张不同图片的应用程序。这个应用程序应该具有“图库/画廊”的感觉,这样用户应该能够查看每一张图片,一次看一张。
  
欢迎来到您的第一次编码挑战!这是对您目前为止所学知识进行实践的一个考点。我们建议您尝试使用App  Inventor,Thunkable,Swift,Thunkable  Classic或Java(因为这些语言是可以提交至我们的竞赛项目的)来解决这一挑战!以下主要以App  Inventor和Thunkable为例进行说明。
  
这里有一些不同的解决方案,可以帮助您获得灵感!
  
   
image001.gif
image002.gif
   
image003.gif
  
  
  
  
活动—编写伪代码
  
在开始编码之前,您可以写一些伪代码,描述希望自己的应用程序可以做什么,是很有帮助的一种方式。请记住,伪代码是用普通语言写出算法,而不是用代码写。在创建解决方案之前该怎么写呢,请看下面的例子。
  


      
  • 屏幕上将有3个按钮
  • 当单击按钮时,将出现一个图像
  • 当单击另一个按钮时,将出现一个不同的图像
  
一种可行的解决方案—App Inventor
  
这里有一支Technovation校友Jennifer制作的视频解决方案,请点击查看: Code Challenge 1  VideoSolution
  
设计您的用户界面
  
在这个应用程序中,您将创建一个幻灯片,让用户可以浏览不同的图像。在设计屏幕时,您将放置一个图像和按钮,供用户单击以查看不同的图像。首先,您需要在设计器屏幕中创建用户界面。
  


      
  • 在您的屏幕上添加一个图像。


         
    • 调整图像宽度和高度,使其适合您的屏幕!
    • 我们选择让图像“fill        parent”。当您选择“fill parent”时,即是在告诉组件去填充它所在位置的空间。图像1位于屏幕内部,但是按钮位于水平排列的容器内部。您可以通过组件菜单中列出的方式,查看哪些事物在其他事物中。
      
  • 在图像下方的屏幕上添加一个水平布局。
  • 拖放三个按钮到水平布局中。


         
    • 点击组件菜单中的按钮,编辑文本,使按钮显示为图片1、图片2、图片3


           
      • 您还应该更改按钮的名称,帮助您记住按钮的功能!比如我们将其改为“图片1”、“图片2”和“图片3”。可以点击组件下方的“重命名”来做到这一点。
         
      
  • 将您想使用的图片上传至图库!
  
  
image004.png
  
对功能块 (block) 进行编程
  
说明:现在用户界面已经创建好了,您需要让它做一些事情,实现一些功能。您需要让自己的应用程序在用户按下按钮时显示不同的图像。为此,您将使用事件处理程序(event handlers)按钮。
  


      
  • 点击之前命名为“图片1”的按钮,查看所有可以使用的功能块。抓取when       button.click”(何时按钮.单击)功能块,并将其拖放到工作区中。
  • 单击图片1查看可以用于图像的所有功能块。抓取set Image1.picture to”(设置图片1.图像至)。把这个功能块放到when       button.click事件处理程序中。
  • 抓取一个空文本功能块,输入图片的名称。将此功能块附加到set Image1.picture to功能块中。


         
    • 提示:名称必须完全匹配。例如,我们的图片被命名为“图片1.png
      
  • 对每个按钮重复此操作。
  
image006.png
  
一种可行的解决方案—Thunkable
  
以下连接是Thunkable的一个视频解决方案: https://youtu.be/0qZ5-7t4f70
    


      
  • 将一个图片组件拖放到该应用程序构建器中。
  
  
image008.png
  


      
  • 设置图像的高度至50%,宽度为“90%”。
  
  
image010.png
  
  
  
  


      
  • 将一个行组件拖放到应用程序构建器中。行组件将充当容器,并允许您在容器内添加和组织按钮。
  
  
image012.png
  
  


      
  • 将三个按钮拖放到行组件中。
  • 单击每个按钮,然后将其重命名为图片1按钮,图片2按钮和图片3按钮。
  • 接下来,将按钮的文本更改为图片1,图片2和图片3
  
  
image014.png
  
  


      
  • 在图库中上传您要使用的图片!您不必使用我们选择的图片。为此,请单击图片组件,然后可在图片部分中上传图片。
  
  
image016.png
  
您刚刚创建了一个用户界面,真是太棒了!
  
现在,您需要对用户界面的工作方式进行编程。为此,您将使用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。
  
image018.png
  
12. 在您的移动设备上打开Thunkable Live App。确保使用与电脑上相同的帐户登录。单击电脑上的实时测试(live test),在您的移动设备上测试该应用程序!
  
image020.png
  
  
举一反三
  
您刚刚已经完成了第一个编码挑战!下面有三个问题,需要您和小组一起思考。
  


      
  • 您能否建议对幻灯片应用进行任何改进,使其更有趣,更有用?
  • 如何为无法触摸按钮的用户重新设计此应用程序
  • 有没有可能通过手机的摄像头拍摄照片,然后将照片添加到幻灯片中?您需要App       InventorThunkable具有什么样的编程功能?您要如何学习将其构建到自己的应用程序中?


         
    • 提示:进行谷歌搜索,与您的组员分享自己的发现。
      
  
其他资源
  
App Inventor上使用多重屏幕
  
您可能已经注意到,解决这一挑战的方法不依赖于创建多个屏幕。 App Inventor可以很容易地为应用添加更多屏幕,但需要小心不要添加太多屏幕。这是因为,在App Inventor中使用大量屏幕会占用大量内存。创建10个以上的屏幕后,您的应用可能无法再运作了。
  
与其添加更多屏幕,您应该找到可重复使用的用户界面部分,就像这个代码挑战中所展示的解决方案一样。设计应用程序时,请记住这一点。在其他代码挑战中,您还将看到更多关于如何重复使用用户界面部分的示例。
另一个可行的解决方案—Thunkable
  
您可以使用多重屏幕创建一个图片库。以下是使用Thunkable的另一个解决方案:https://www.youtube.com/watch?v=OPqStzw3SbQ&feature=youtu.be


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

本版积分规则

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

硬件清单

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

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

mail