{"id":1568,"date":"2022-05-30T14:06:37","date_gmt":"2022-05-30T17:06:37","guid":{"rendered":"https:\/\/liag.ft.unicamp.br\/act\/?p=1568"},"modified":"2023-02-03T22:11:05","modified_gmt":"2023-02-04T01:11:05","slug":"aula-3-app-inventor-com-the-good-guys","status":"publish","type":"post","link":"https:\/\/liag.ft.unicamp.br\/act\/2022\/05\/30\/aula-3-app-inventor-com-the-good-guys\/","title":{"rendered":"App Inventor 2.0 &#8211; The Good Guys &#8211; Aula 3"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introdu\u00e7\u00e3o<\/h2>\n\n\n\n<p>Dando continuidade ao conte\u00fado da nossa oficina, hoje estaremos vendo o que s\u00e3o as famosas estruturas condicionais, tamb\u00e9m chamadas de desvios condicionais, e um pouco sobre os la\u00e7os de repeti\u00e7\u00e3o.<\/p>\n\n\n\n<p>Ao final desta aula teremos uma atividade para praticarmos um pouco dos conceitos vistos at\u00e9 agora.<\/p>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Estrutura Condicional<\/h2>\n\n\n\n<p><strong>V\u00eddeo aula, parte 1<\/strong> &#8211; Estrutura Condicional<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Aula 03 (Parte 1) - APP INVENTOR 2.0 - The Good Guys\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/zEV_t_apSCw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><sup>Inscreva-se no <a href=\"https:\/\/www.youtube.com\/channel\/UCCYzDDWYhHEt9-NODBosjqg\" target=\"_blank\" rel=\"noreferrer noopener\">canal!<\/a><\/sup><\/figcaption><\/figure>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Antes de falar sobre a estrutura condicional, vamos pensar em algo mais simples para depois escalar para o desvio condicional.<\/p>\n\n\n\n<p>Vamos imaginar um programa simples, onde o usu\u00e1rio digita um n\u00famero e o programa deve mostrar o dobro desse n\u00famero.<\/p>\n\n\n\n<p>O programa seguiria a seguinte forma:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita um n\u00famero;<\/li>\n\n\n\n<li>Programa calcula o dobro do n\u00famero;<\/li>\n\n\n\n<li>Programa mostra o resultado para o usu\u00e1rio;<\/li>\n\n\n\n<li>Fim do programa.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"296\" height=\"476\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-413.png\" alt=\"\" class=\"wp-image-1569\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-413.png 296w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-413-187x300.png 187w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/figure>\n<\/div>\n\n\n<p>Simples correto? Mas imagina que voc\u00ea queira pegar este n\u00famero e mostrar se ele \u00e9 par. Neste caso a gente tem que fazer uma verifica\u00e7\u00e3o, ent\u00e3o ficaria assim:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita um n\u00famero;<\/li>\n\n\n\n<li>Programa calcula o resto deste n\u00famero por 2;<\/li>\n\n\n\n<li>Programa pergunta: \u201c<strong>SE<\/strong> o resto for igual a 0\u201d;<\/li>\n<\/ol>\n\n\n\n<p>Se sim:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra que o n\u00famero \u00e9 par;<\/li>\n<\/ol>\n\n\n\n<p>Caso contr\u00e1rio:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Segue para o passo 5;<\/li>\n\n\n\n<li>Fim do programa.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"340\" height=\"632\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-414.png\" alt=\"\" class=\"wp-image-1570\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-414.png 340w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-414-161x300.png 161w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/figure>\n<\/div>\n\n\n<p>Agora passando para o AppInventor vamos ver como ficaria.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-415.png\" alt=\"\" class=\"wp-image-1571\" width=\"394\" height=\"615\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-415.png 462w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-415-192x300.png 192w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"276\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-416.png\" alt=\"\" class=\"wp-image-1572\" \/><\/figure>\n\n\n\n<p>Agora na nossa programa\u00e7\u00e3o, para iniciar colocaremos o evento de click. Ent\u00e3o \u201cquando <em>btn_mostrar<\/em> for clicado fa\u00e7a:\u201d.<\/p>\n\n\n\n<p>Devemos ent\u00e3o colocar uma estrutura de controle chamado \u201c<em>if\u201d<\/em>. Este \u00e9 o que chamamos de desvio condicional.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"162\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-417.png\" alt=\"\" class=\"wp-image-1573\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-417.png 457w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-417-300x106.png 300w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/figure>\n\n\n\n<p>Ent\u00e3o no nosso programa fica com a seguinte cara:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Quando <em>btn_mostrar<\/em> for clicado, fa\u00e7a;<\/li>\n\n\n\n<li>O resto de txt_<em>numero <\/em>dividido por 2 \u00e9 igual a 0?<\/li>\n<\/ol>\n\n\n\n<p>Se sim:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Defina o texto de <em>lbl_resultado <\/em>para \u201cN\u00famero par\u201d.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"165\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-418.png\" alt=\"\" class=\"wp-image-1574\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-418.png 712w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-418-300x70.png 300w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/figure>\n\n\n\n<p>Ok, ent\u00e3o at\u00e9 aqui a gente t\u00e1 vendo o que acontece caso uma premissa seja verdadeira. Mas e se eu quiser que meu programa tamb\u00e9m mostre se um n\u00famero \u00e9 \u00edmpar? Nesse a l\u00f3gica do nosso programa segue a seguinte estrutura:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita um n\u00famero;<\/li>\n\n\n\n<li>Programa calcula o resto da divis\u00e3o do n\u00famero dividido por 2;<\/li>\n\n\n\n<li><strong>SE <\/strong>o resto for igual a 0:<\/li>\n<\/ol>\n\n\n\n<p>Fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201cN\u00famero par\u201d para o usu\u00e1rio;<\/li>\n<\/ol>\n\n\n\n<p>Caso contr\u00e1rio, fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201cN\u00famero \u00edmpar\u201d para o usu\u00e1rio;<\/li>\n\n\n\n<li>Fim do programa.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"628\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-419.png\" alt=\"\" class=\"wp-image-1575\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-419.png 433w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-419-207x300.png 207w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/figure>\n<\/div>\n\n\n<p>Agora no appInventor, vamos nos manter com a mesma tela e a mesma programa\u00e7\u00e3o que est\u00e1vamos usando. Adicionaremos um \u201c<em>else<\/em>\u201d nesta estrutura condicional. Para isso, basta clicar na engrenagem do nosso \u201c<em>if<\/em>\u201d e adicion\u00e1-lo em nossa estrutura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"316\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-420.png\" alt=\"\" class=\"wp-image-1576\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-420.png 270w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-420-256x300.png 256w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/figure>\n\n\n\n<p>Basta ent\u00e3o apenas definir para caso a premissa do \u201c<em>if\u201d<\/em> seja falsa, o texto de <em>lbl_resultado <\/em>para \u201cN\u00famero \u00edmpar\u201d. Ficamos da seguinte forma:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"749\" height=\"225\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-421.png\" alt=\"\" class=\"wp-image-1577\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-421.png 749w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-421-300x90.png 300w\" sizes=\"(max-width: 749px) 100vw, 749px\" \/><\/figure>\n\n\n\n<p>Ent\u00e3o agora j\u00e1 vimos como fica essa estrutura \u201cse algo for verdade fa\u00e7a x a\u00e7\u00e3o, caso contr\u00e1rio fa\u00e7a y a\u00e7\u00e3o\u201d. Mas podemos ir al\u00e9m novamente.<\/p>\n\n\n\n<p>Vamos imaginar que quero fazer um programa onde o usu\u00e1rio vai digitar 3 n\u00fameros, e quero descobrir qual o menor entre eles. Nossa l\u00f3gica vai seguir algo como:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita 3 n\u00fameros;<\/li>\n\n\n\n<li><strong>SE <\/strong>n\u00famero 1 for menor que n\u00famero 2:<\/li>\n<\/ol>\n\n\n\n<p>Fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>SE <\/strong>n\u00famero 1 for menor que n\u00famero 3:<\/li>\n<\/ol>\n\n\n\n<p>Fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201c\u2018<em>n\u00famero 1\u2019<\/em> \u00e9 o menor\u201d;<\/li>\n<\/ol>\n\n\n\n<p>Caso contr\u00e1rio, fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201c\u2018<em>n\u00famero 3<\/em>\u2019 \u00e9 o menor\u201d;<\/li>\n<\/ol>\n\n\n\n<p>Caso contr\u00e1rio, fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>SE <\/strong>n\u00famero 2 for menor que n\u00famero 3:<\/li>\n<\/ol>\n\n\n\n<p>Fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201c\u2018<em>n\u00famero 2\u2019<\/em> \u00e9 o menor\u201d;<\/li>\n<\/ol>\n\n\n\n<p>Caso contr\u00e1rio, fa\u00e7a:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mostra \u201c\u2018<em>n\u00famero 3<\/em>\u2019 \u00e9 o menor\u201d;<\/li>\n\n\n\n<li>Fim do programa.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"668\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-422.png\" alt=\"\" class=\"wp-image-1578\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-422.png 762w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-422-300x263.png 300w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/figure>\n<\/div>\n\n\n<p>Sendo assim, a gente consegue ver que tamb\u00e9m podemos ter \u201c<em>if\u2019<\/em>\u201d dentro de \u201c<em>if<\/em>\u201d e assim criar estruturas mais complexas.<\/p>\n\n\n\n<p>Para criar essas estruturas no appInventor basta adicionar \u201c<em>else<\/em>&#8211;<em>if<\/em>\u201d em sua estrutura \u201c<em>if<\/em>\u201d ou outras estruturas \u201c<em>if\u201d<\/em> dentro dela.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"315\" height=\"328\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-423.png\" alt=\"\" class=\"wp-image-1579\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-423.png 315w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-423-288x300.png 288w\" sizes=\"(max-width: 315px) 100vw, 315px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"187\" height=\"152\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-424.png\" alt=\"\" class=\"wp-image-1580\" \/><\/figure>\n\n\n\n<p>Ent\u00e3o basicamente \u00e9 isto, essas s\u00e3o as estruturas condicionais. S\u00e3o estruturas onde dependendo se uma premissa \u00e9 verdadeira ou falsa o programa pode seguir um caminho diferente\/tomar um desvio.<\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">La\u00e7o de repeti\u00e7\u00e3o<\/h2>\n\n\n\n<p>Para falarmos de la\u00e7o de repeti\u00e7\u00e3o vamos tamb\u00e9m come\u00e7ar pensando em algo mais simples.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Aula 03 (Parte 2) - APP INVENTOR 2.0 - The Good Guys\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/VR0MWM0MvSk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><sub><strong>V\u00eddeo aula, parte 2 <\/strong>&#8211; La\u00e7o de repeti\u00e7\u00e3o<\/sub><\/figcaption><\/figure>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Vamos imaginar que temos que fazer um programa onde o usu\u00e1rio informa um n\u00famero e voc\u00ea deve mostrar a tabuada daquele n\u00famero. Voc\u00ea deve imaginar que ficaria algo como:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita um n\u00famero;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 1 = \u2018<em>n\u00famero<\/em>\u2019\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 2;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 2 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 3;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 3 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 4;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 4 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 5;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 5 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 6;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 6 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 7;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 7 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 8;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 8 = \u2018<em>resultado<\/em>\u201d<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 9;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 9 = \u2018<em>resultado<\/em>\u201d<\/li>\n\n\n\n<li>Calcula <em>n\u00famero <\/em>vezes 10;<\/li>\n\n\n\n<li>Mostra na tela \u201c<em>\u2018n\u00famero\u2019<\/em> X 10 = \u2018<em>resultado<\/em>\u201d;<\/li>\n\n\n\n<li>Fim do programa.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"182\" height=\"746\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-425.png\" alt=\"\" class=\"wp-image-1581\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-425.png 182w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-425-73x300.png 73w\" sizes=\"(max-width: 182px) 100vw, 182px\" \/><\/figure>\n<\/div>\n\n\n<p>Fazer desta maneira n\u00e3o est\u00e1 errado, por\u00e9m n\u00e3o \u00e9 a melhor forma. Imagina que ao inv\u00e9s de ser uma tabuada do 1 a 10 voc\u00ea quer que seja do 1 a 1000. Seria totalmente invi\u00e1vel basicamente ter que ficar copiando e colando o mesmo trecho de c\u00f3digo, al\u00e9m de aumentar as chances de erro tamb\u00e9m.<\/p>\n\n\n\n<p>Sendo assim, seria ideal se tiv\u00e9ssemos uma forma deste trecho de programa se repetir at\u00e9 completar um n\u00famero x de itera\u00e7\u00f5es certo? E temos, \u00e9 o que chamados de la\u00e7o de repeti\u00e7\u00e3o.<\/p>\n\n\n\n<p>Ent\u00e3o basicamente esse enorme c\u00f3digo que vimos ficaria assim utilizando la\u00e7o de repeti\u00e7\u00e3o:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00edcio do programa;<\/li>\n\n\n\n<li>Usu\u00e1rio digita um n\u00famero;<\/li>\n\n\n\n<li>Inicializa uma vari\u00e1vel chamada contador com o valor 1;<\/li>\n\n\n\n<li><strong>ENQUANTO <\/strong>ocontador for menor ou igual a 10 fa\u00e7a:\n<ol class=\"wp-block-list\">\n<li>Calcula n\u00famero vezes o contador;<\/li>\n\n\n\n<li>Mostra na tela \u201c\u2018<em>n\u00famero<\/em>\u2019 X \u2018<em>contador<\/em>\u2019 = \u2018resultado\u2019\u201d;<\/li>\n\n\n\n<li>Aumenta 1 em contador (ent\u00e3o se contador for igual a 1, agora vira 2);<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Fim do programa;<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"647\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-426.png\" alt=\"\" class=\"wp-image-1582\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-426.png 277w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-426-128x300.png 128w\" sizes=\"(max-width: 277px) 100vw, 277px\" \/><\/figure>\n<\/div>\n\n\n<p>Bem melhor correto? Desta forma, caso queira trocar a tabuada de 1 a 10 para de 1 a 1000, basta trocar o n\u00famero 10 por 1000 na estrutura do la\u00e7o condicional.<\/p>\n\n\n\n<p>Ent\u00e3o vejamos como isso fica no appInventor, primeiro em nossa tela temos o seguinte:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"637\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-427.png\" alt=\"\" class=\"wp-image-1583\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-427.png 387w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-427-182x300.png 182w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"275\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-428.png\" alt=\"\" class=\"wp-image-1584\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-428.png 273w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-428-150x150.png 150w\" sizes=\"(max-width: 273px) 100vw, 273px\" \/><\/figure>\n\n\n\n<p>Agora em nossa programa\u00e7\u00e3o vamos adicionar o evento de click no bot\u00e3o. Ent\u00e3o \u201cquando <em>btn_mostrar<\/em> for clicado fa\u00e7a:\u201d.<\/p>\n\n\n\n<p>Devemos primeiro modificar o texto da nossa \u201c<em>lbl_tabuada<\/em>\u201d para algo vazio (para garantir que apenas uma tabuada apare\u00e7a por clique de bot\u00e3o) e logo ap\u00f3s adicionar nosso la\u00e7o repeti\u00e7\u00e3o, este se encontra nos blocos controle, e ent\u00e3o trocar o segundo valor de 5 para 10.<\/p>\n\n\n\n<p>A leitura desta estrutura seria algo como \u201cpara cada n\u00famero de 1 a 10 aumentado de 1 em 1, fa\u00e7a:\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"156\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-429.png\" alt=\"\" class=\"wp-image-1585\" \/><\/figure>\n\n\n\n<p>Agora basta definir o texto de <em>lbl_tabuada <\/em>para o que j\u00e1 estava nela (para n\u00e3o perder os valores anteriores) e a estrutura da frase \u201c\u2018<em>n\u00famero<\/em>\u2019 X \u2018<em>contador<\/em>\u2019 = \u2018resultado\u2019\u201d. Para isso vamos estar usando um \u201c<em>join<\/em>\u201d, que basicamente vai juntar blocos para formar algo \u00fanico, no nosso caso, junta os blocos para formar nossa frase da tabuada. Ficando da seguinte forma:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-430-1024x453.png\" alt=\"\" class=\"wp-image-1586\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-430-1024x453.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-430-300x133.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-430-768x340.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-430.png 1176w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ent\u00e3o basicamente \u00e9 isto, est\u00e1 \u00e9 a estrutura de repeti\u00e7\u00e3o. Ela vai repetir um conjunto de instru\u00e7\u00f5es enquanto uma certa premissa seja verdadeira.<\/p>\n\n\n\n<p>\u00c9 claro que esta estrutura n\u00e3o se limita apenas a n\u00fameros, as premissas podem ser diversas, ter mais de uma premissa, passar por todos os itens de uma lista, dentre outros. Ent\u00e3o convido voc\u00eas para explorarem um pouco dessas estruturas que nos d\u00e3o uma vasta possibilidade de caminhos para tomar em nossos programas juntamente com as estruturas condicionais.<\/p>\n\n\n\n<div style=\"height:18px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Atividade<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Pegue o pomo 2.0<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Aula 03 (Parte 3) - APP INVENTOR 2.0 - The Good Guys\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/_Kd4PEFbIWM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><sub><strong>V\u00eddeo aula, parte 3 <\/strong>&#8211; Exerc\u00edcio<\/sub><\/figcaption><\/figure>\n\n\n\n<p>Seguindo o <a href=\"https:\/\/drive.google.com\/drive\/folders\/1E3q6sFr986tP5Km-Btop7lA649IPU5B5?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">exemplo disponibilizado<\/a>, complete o jogo para quando o jogador capturar os pomos eles ficarem invis\u00edveis.<\/p>\n\n\n\n<p>Os pomos devem se mover para uma posi\u00e7\u00e3o aleat\u00f3ria a cada unidade x de tempo e ao capturar todos os pomos o jogo deve encerrar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Solu\u00e7\u00e3o<\/h3>\n\n\n\n<p>Dentro do bloco de colis\u00e3o (when player.CollidedWith) inclua um bloco de controle if-then, ap\u00f3s isso, clique na engrenagem e adicione dois blocos else-if. Fazendo isso formamos a primeira estrutura necess\u00e1ria para a resolu\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"382\" height=\"346\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-431.png\" alt=\"\" class=\"wp-image-1591\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-431.png 382w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-431-300x272.png 300w\" sizes=\"(max-width: 382px) 100vw, 382px\" \/><\/figure>\n\n\n\n<p>Agora, v\u00e1 em \u201cMath\u201d, selecione o bloco de compara\u00e7\u00e3o de igualdade e coloque um em cada encaixe para \u201cif\u201d.<\/p>\n\n\n\n<p>Passe o mouse sobre a palavra \u201cother\u201d, selecione \u201cget Other\u201d e coloque um em cada um dos if\u2019s. Ent\u00e3o selecione os pomos para coloca-los no segundo espa\u00e7o para a compara\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"372\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-432.png\" alt=\"\" class=\"wp-image-1592\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-432.png 532w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-432-300x210.png 300w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n\n\n\n<p>Agora basta modificar a visibilidade de cada pomo para falso quando ocorrer uma colis\u00e3o.<\/p>\n\n\n\n<p>V\u00e1 no pomo e selecione o bloco \u201cset pomo .Visible to\u201d e ent\u00e3o encaixe o bloco \u201cfalse\u201d que \u00e9 poss\u00edvel encontrar na no conjunto l\u00f3gico (Logic).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-433.png\" alt=\"\" class=\"wp-image-1593\" width=\"567\" height=\"397\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-433.png 697w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-433-300x210.png 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<p>Vamos ent\u00e3o configurar o controle para finalizar a partida. No mesmo bloco de colis\u00e3o, adicione outro bloco de if-then. Nele voc\u00ea vai comprar se os tr\u00eas pomos est\u00e3o com a visibilidade no falso. Para isso, usaremos dois blocos l\u00f3gicos de \u201cand\u201d e tr\u00eas de \u201cMath\u201d para comparar se a visibilidade \u00e9 falsa ou verdadeira.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"92\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-434-1024x92.png\" alt=\"\" class=\"wp-image-1594\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-434-1024x92.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-434-300x27.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-434-768x69.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-434.png 1462w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Agora basta adicionar um bloco de notifica\u00e7\u00e3o utilizando textos e configurar o \u201cclock\u201d para estar desativado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"191\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-435-1024x191.png\" alt=\"\" class=\"wp-image-1595\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-435-1024x191.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-435-300x56.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-435-768x143.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-435.png 1332w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>No final teremos o seguinte bloco para colis\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"377\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-436-1024x377.png\" alt=\"\" class=\"wp-image-1596\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-436-1024x377.png 1024w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-436-300x110.png 300w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-436-768x283.png 768w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-436.png 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Agora iremos configurar a movimenta\u00e7\u00e3o dos pomos, para isso utilizaremos o bloco \u201cWhen clock1 .Timer\u201d.<\/p>\n\n\n\n<p>Como queremos que apenas os pomos que ainda est\u00e3o em jogo se movimentem, utilizaremos tr\u00eas blocos de if-then para isso.<\/p>\n\n\n\n<p>Ent\u00e3o basta adicion\u00e1-los, e colocar uma compara\u00e7\u00e3o de igualdade para saber se suas visibilidades s\u00e3o \u201ctrue\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"521\" height=\"311\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-437.png\" alt=\"\" class=\"wp-image-1597\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-437.png 521w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-437-300x179.png 300w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/figure>\n\n\n\n<p>Dentro de \u201cthen\u201d colocaremos blocos para modificar o x e o y de cada pomo utilizando as fun\u00e7\u00f5es criadas para gerar esse n\u00famero aleat\u00f3rio.<\/p>\n\n\n\n<p>No final teremos o seguinte c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"525\" height=\"421\" src=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-438.png\" alt=\"\" class=\"wp-image-1598\" srcset=\"https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-438.png 525w, https:\/\/liag.ft.unicamp.br\/act\/wp-content\/uploads\/sites\/27\/2022\/05\/image-438-300x241.png 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Aula 03 (Parte 4) - APP INVENTOR 2.0 - The Good Guys\" width=\"630\" height=\"354\" src=\"https:\/\/www.youtube.com\/embed\/Pe8Y66j7xno?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><sub><strong>V\u00eddeo aula, parte 4 &#8211; <\/strong>Solu\u00e7\u00e3o do Exerc\u00edcio<\/sub><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Arquivos da aula:<\/strong> <a href=\"https:\/\/drive.google.com\/drive\/folders\/1E3q6sFr986tP5Km-Btop7lA649IPU5B5?usp=sharing\">https:\/\/drive.google.com\/drive\/folders\/1E3q6sFr986tP5Km-Btop7lA649IPU5B5?usp=sharing<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introdu\u00e7\u00e3o Dando continuidade ao conte\u00fado da nossa oficina, hoje estaremos vendo o que s\u00e3o as famosas estruturas condicionais, tamb\u00e9m chamadas de desvios condicionais, e um pouco sobre os la\u00e7os de repeti\u00e7\u00e3o. Ao final desta aula teremos uma atividade para praticarmos um pouco dos conceitos vistos at\u00e9 agora. Estrutura Condicional V\u00eddeo aula, parte 1 &#8211; Estrutura [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":2887,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"class_list":["post-1568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/comments?post=1568"}],"version-history":[{"count":9,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1568\/revisions"}],"predecessor-version":[{"id":2894,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/posts\/1568\/revisions\/2894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media\/2887"}],"wp:attachment":[{"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/media?parent=1568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/categories?post=1568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liag.ft.unicamp.br\/act\/wp-json\/wp\/v2\/tags?post=1568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}