- Saiba mais sobre programação orientada a eventos
- Compreender os diferentes tipos de blocos na plataforma Thunkable
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 código a ser executado quando esse evento acontece é 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 Thunkable.
O Thunkable tem duas janelas que você usa para criar o app. Clicar em Design na barra do menu superior (canto superior esquerdo da tela) leva você à janela Designer, onde 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.
JANELA DESIGNER DO THUNKABLE
Lista de componentes
Todos os componentes que você adicionou ao app aparecem aqui, organizados hierarquicamente por tela.
Espaço de trabalho
Você arrasta seus componentes para o telefone nesse espaço de trabalho central. Você tem controle sobre onde os componentes são colocados, bem como sobre o tamanho deles.
Adicionar componentes
Você arrasta os componentes visuais desse painel para o espaço de trabalho.
Painel de propriedades
O Properties Panel (painel de prioridades) permite que você defina as propriedades de cada componente. As propriedades são características diferentes que você pode definir para cada componente, como largura, altura e cor. Selecione um componente no mockup e, em seguida, você poderá alterar qualquer uma de suas propriedades no painel de propriedades.
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á a paleta de blocos. Na parte superior estão os componentes da interface do usuário. Cada componente do app tem seu próprio conjunto de blocos. Você clicará no componente para mostrar os blocos que pode arrastar para o espaço de trabalho.
Espaço para programação
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 principais
Os blocos principais são blocos padrão da programação para uso no app. Eles são categorizados de acordo com seu tipo e programado por cores.
Recursos do aplicativo
Esses são recursos invisíveis que podem ser adicionados ao app. Você pode clicar em um deles para adicioná-lo e, em seguida, definir propriedades e arrastar blocos de código para esse recurso.
MANIPULADORES DE EVENTOS
Os blocos manipuladores de eventos no Thunkable 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 o item do ListViewer é clicado
Um ListViewer é como um menu suspenso, portanto, esse evento ocorre quando o usuário escolhe um item na lista. O aplicativo deve fazer algo com o item clicado.
Quando uma Screen (tela) é aberta
Esse evento é usado quando você deseja fazer algo quando o aplicativo é iniciado pela primeira vez ou quando o aplicativo muda para outra tela. Você pode definir variáveis ou atualizar informações da nuvem.
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 Thunkable, os blocos de funções são de cor roxa. Algumas linguagens se referem às funções como métodos ou procedimentos. Elas fazem alguma coisa, então você pode pensar nelas como blocos de ação.
Say
Essa função permite que o aplicativo diga ou fale qualquer texto que você queira que ele fale.
Início do cronômetro e reprodução de som
O componente Timer pode iniciar a contagem. E o aplicativo pode reproduzir um som.
SETTERS E GETTERS
Os blocos verdes estão relacionados às propriedades do componente.
Os blocos verdes claros são chamados de getterse é onde você está obtendo o valor da propriedade.
Texto do botão1
O texto é obtido e salvo na variável numberChoice.
Tempo do timer1 em segundos
O valor dos segundos do cronômetro é obtido e armazenado no texto de Lablel1, de modo que o valor é exibido no rótulo/identificador.
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 Button1
O texto do Button1 é definido com as palavras "Click me!" (Me clique).
Label1.Text
O Text de Label1 é definido como o tempo de Timer1 em segundos.
Intervalo de milissegundos do Timer1
O IntervalMilliseconds do Timer1 (a frequência com que ele dispara) está definido como 3000, ou 3 segundos.
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 (Matemática), na seção principal da paleta de blocos.
Texto ou cadeias de caracteres
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 seção Core (Núcleo) da paleta de 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
Em seguida, siga o vídeo de Dave abaixo para usar Event Handlers e Functions para reproduzir discursos no app.
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: consulte a gaveta de cores para ver como obter uma cor aleatória.
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 do Thunkable de Dave Wolber em draganddropcode.com
O curso gratuito de Thunkable da estudante embaixadora Meenakshi Nair na Udemy é outro ótimo recurso!
