- Saiba mais sobre programação orientada a eventos
- Compreender os diferentes tipos de blocos na plataforma MIT App Inventor
Estas são as atividades para esta lição:
EVENTOS
aplicativos são baseados em programação orientada por eventos.
Programação orientada a eventos baseia-se em eventos, em vez de executar o código de cima para baixo. Alguns programas executam todo o código de uma só vez, mas o aplicativos funciona com base na interação do usuário com ele.
Aplicativos trabalham baseados em eventosque são coisas que acontecem para acionar a execução do código. Um exemplo seria: o usuário clica em um botão. O evento é quando o usuário clica. E o evento aciona o código a ser executado, chamado de manipulador de eventos.
PARE E CONVERSE
Você consegue pensar em algumas maneiras de interagir com seu telefone e no que ele faz? Aqui estão algumas para começar:
- Quando você clica em um ícone de um aplicativo, o aplicativo é aberto.
- Quando você clica em "enviar" para uma mensagem de texto, ele envia a mensagem e emite um som.
- Quando você tenta fazer login em um aplicativo, o aplicativo solicita uma senha.
Vamos começar examinando as diferentes partes da plataforma do App Inventor .
App Inventor tem duas janelas que você usa para criar o app. Clique no botão Designer (canto superior direito da tela) leva você à janela Designeronde você projeta a interface do usuário. A interface de usuário é tudo no app com o qual o usuário pode interagir. Essas coisas podem ser botões, barras de navegação, caixas de texto, imagens etc.
APP INVENTOR JANELA DE DESIGN
Palette (Paleta)
Você escolhe componentes da paleta para adicionar ao Viewer, que fica no meio da janela. Há várias gavetas de componentes para explorar e usar.
Viewer (Visualizador)
Você arrasta seus componentes para o Viewer. Os componentes são adicionados de cima para baixo, à esquerda. É necessário usar os componentes Layout e alinhamento para obter mais controle sobre onde exatamente os componentes aparecem.
Lista de componentes
Essa lista fornece uma lista hierárquica dos elementos na tela. Você pode selecioná-los clicando neles no Viewer ou nessa lista.
Painel de propriedades
O painel Properties permite que você defina as propriedades de cada componente, como tamanho da fonte, alinhamento, cor etc.
Componentes não visíveis
Os componentes não visíveis não aparecerão na tela, mas ainda fazem parte do aplicativo. Eles aparecem abaixo da tela quando você os arrasta e solta.
Quando alguém usa o aplicativo, interage com a interface do usuário, clicando em botões, inserindo texto etc. Cabe a você decidir o que o aplicativo deve fazer e programá-lo para fazer essas coisas.
EDITOR DE BLOCOS
Clicar em "Blocks" leva você ao Blocks Editor onde você faz todas a programação. Você arrasta os blocos do painel à esquerda para o espaço de trabalho no centro da tela.
À esquerda, você encontrará os blocos que pode arrastar para o espaço de trabalho. Eles estão em categorias/desenhos como Controle e Lógica.
Viewer (Visualizador)
Esse é o espaço de trabalho em que você arrasta todos os blocos. Você pode movê-los, e encaixá-los uns nos outros. Também é possível excluir os blocos que não forem necessários.
Blocos de componentes
Cada componente do app tem seu próprio conjunto de blocos. Você clicará no componente para exibir os blocos que você pode arrastar para o espaço de trabalho.
MANIPULADORES DE EVENTOS
Os blocos manipuladores de eventos no App Inventor são dourados e têm o formato de um bloco aberto, de modo que você pode encaixar blocos dentro dele. Esses blocos são executados somente quando o evento ocorre.
Quando o botão é clicado
Você já usou isso. Quando o usuário clica em um determinado botão, você deseja que o aplicativo faça algo, como abrir outra tela ou enviar uma mensagem.
Quando a orientação da tela é alterada
Se o usuário mudar o telefone de retrato (vertical) para paisagem (horizontal), talvez você queira fazer algo, como alterar o layout da tela ou o tamanho dos componentes.
Quando a posição do controle deslizante é alterada
Um controle deslizante (slider/slider position) permite que o usuário o arraste para escolher algum valor ao longo dele. Isso pode acionar uma alteração em outro componente. Por exemplo, você pode aumentar o tamanho da caneta em um aplicativo de desenho usando um controle deslizante.
FUNÇÕES
Funções são blocos de código que fazem alguma coisa. Elas podem ser executadas várias vezes em um aplicativo. No App Inventor, os blocos de funções são coloridos em roxo. Algumas linguagens se referem às funções como métodos ou procedimentos. De fato, o App Inventor geralmente se refere a elas como procedimentos. Elas fazem algo, portanto, você pode pensar nelas como blocos de ação.
TextToSpeech.Speak
O componente TextToSpeech pode dizer ou falar qualquer texto que você queira que ele fale.
Camera.TakePicture
O componente Camera pode tirar uma foto com o telefone.
Sound.Play
O componente Sound pode reproduzir um som.
SETTERS E GETTERS
Os blocos verdes estão relacionados aos componentes e suas propriedades.
Os blocos verdes claros que podem se encaixar em outro bloco são chamados de gettersporque você está obtendo o valor da propriedade.
Setters são verdes mais escuros e podem ser encaixados, com um slot aberto na extremidade. Isso permite que você defina o valor da propriedade.
Texto do botão1
O texto do Button1 é obtido e armazenado na variável global greeting.
Texto do Botão1
O Text of Button1 é definido como as palavras "Eu amo programação". As palavras "Eu amo programação" serão exibidas no botão.
Texto do rótulo1
O texto do Label1 é definido como a fonte do Sound1. Isso significa que o nome do arquivo de som seria exibido no Label1.
Fonte do Sound1
A fonte de Sound1 (o nome do arquivo de som) é obtida e armazenada na propriedade Text de Label1. Definir o texto de um rótulo basicamente exibe o valor no rótulo, portanto, o nome do arquivo de som apareceria em Label1.
Texto do Label1
O TextToSpeech obtém o conteúdo do Text de Label1 e o fala. Qualquer texto exibido em Label1 será falado.
Dica de mentores(as)
Práticas recomendadas: Lembre as estudantes que isso é exatamente como o programação real é. O vocabulário estranho (funções, getters, setters) que estamos usando é exatamente o que os programadores usam.
Perguntas orientadoras para fazera estudantes: Você consegue pensar em algumas funções cotidianas que realiza? (exemplo: fazer um bolo, escovar os dentes - qualquer coisa que tenha etapas repetidas). As funções são muito semelhantes aos algoritmos!
As dicas são fornecidas com o apoio do AmeriCorps.
BLOCOS DE DADOS
Ao usar blocos setter, você pode usar outros blocos incorporados que representam dados ou informações que podem ser usados em seu aplicativo. Alguns exemplos de blocos de dados que podem ser usados são vistos abaixo.
Números
Os valores numéricos podem ser usados como dados em um aplicativo. Esses blocos podem ser encontrados na gaveta Math, na paleta de blocos.
Texto ou strings
O texto, às vezes chamado de strings, pode ser usado como dados. São letras, palavras e frases que podem ser usadas em um aplicativo. Os blocos são encontrados na gaveta Text (Texto) da paleta Blocks (Blocos).
Booleano
Esse tipo de dados tem apenas dois valores possíveis: verdadeiro ou falso. Esses blocos podem definir ou testar o "estado" de algo e serão usados em condicionais, sobre os quais você aprenderá mais.
ATIVIDADE: TUTORIAL DE MESA DE SOM
Siga o tutorial em vídeo abaixo
e siga as instruções de Dave no vídeo abaixo.
Observe que o vídeo começa em 1:11 para pular as instruções de carregamento. Essas instruções não serão necessárias se você tiver carregado o projeto inicial usando o link acima.
DESAFIO
Na atividade, você usou:
- Blocos de manipuladores de eventos
- Blocos de funções
Vamos tentar usar alguns blocos setter e getter adicionando-os ao seu aplicativo Soundboard.
Quando o usuário clicar em qualquer imagem para reproduzir o discurso associado, altere a cor de fundo da tela.
É possível alterá-lo para uma cor específica, mas não é possível alterá-lo facilmente para a cor inicial, preto, portanto, altere o plano de fundo da tela para uma cor aleatória.
Dica: Verifique a gaveta Color e procure a opção criar um blocode cores . Em seguida, procure na gaveta Math um bloco de número inteiro aleatório. As cores são compostas de 3 números, RGB para vermelho, verde e azul, que variam de 0 a 255.
REFLEXÃO
Agora que vocês aprenderam um pouco mais sobre os diferentes blocos de código, pensem na solução do seu aplicativo:
REVISÃO DOS PRINCIPAIS TERMOS
- Interface do usuário - tudo em seu aplicativo com o qual um usuário pode interagir
- Designer - janela na qual você pode adicionar componentes ao seu aplicativo e projetar a aparência deles
- Editor de blocos - janela em que você programa os blocos do seu aplicativo
- Evento - algo que acontece para acionar a execução do código
- Manipulador de eventos- blocos de código que informam ao seu aplicativo o que fazer quando um evento acontece
- Programação orientada a eventos - programação baseada em eventos, em vez de executar todo o código de cima para baixo
- Funções - um bloco de código que é executado e pode ser executado várias vezes
RECURSOS ADICIONAIS
Confira mais tutoriais de Dave Wolber para iniciantes no App Inventor em appinventor.org
