4.1 - Desenvolvimento de Apps

AppCores - Componentes e Eventos

A app desta aula 📱

Vais criar uma app com três botões, um por cada cor. Quando clicares num botão, o fundo do ecrã muda para essa cor. No final podes personalizar a app à tua maneira.

Parte 1 — Criar o projeto

Vai a appinventor.mit.edu e entra com a tua conta Google
Clica em "Start new project" e chama-lhe AppCores (sem espaços, sem acentos).
O projeto abre no Designer — é aqui que vais construir o aspeto da app.

Parte 2 — Adicionar os botões no Designer

Na Palette do lado esquerdo, abre a categoria User Interface.
Arrasta um componente Botão para o centro do ecrã. Vai ao painel Properties (lado direito) e muda:
- Campo Text → escreve Vermelho
- Campo BackgroundColor → escolhe a cor vermelha
Arrasta um segundo Botão para baixo do primeiro. Muda:
- Campo Text → escreve Azul
- Campo BackgroundColor → escolhe a cor azul
Arrasta um terceiro Botão para baixo do segundo. Muda:
- Campo Text → escreve Verde
- Campo BackgroundColor → escolhe a cor verde

A tua app já tem aspeto, mas se clicares agora, não acontece nada. Falta o cérebro: os blocos!

Desafio 🚀: Consegues descobrir como mudar o título de Screen1 para AppCores?

Parte 3 — Adicionar a lógica nos Blocks

Clica no botão Blocos no canto superior direito para mudar para a vista de blocos.
No painel esquerdo, clica em Botão1 (o botão Vermelho). Aparece um menu com vários blocos - arrasta "quando Botão1.Clique" para a área de trabalho.
Ainda no painel esquerdo, clica em Screen1. Arrasta o bloco "ajusar Screen1.CorDeFundo" para dentro do bloco de clique - encaixa na abertura interior.
No painel esquerdo, vai à categoria Cores. Arrasta o bloco da cor vermelha e encaixa-o no conector do bloco anterior.
Repete os passos 2, 3 e 4 para o Botão2 (Azul) — desta vez com a cor azul.
Repete novamente para o Botão3 (Verde) — com a cor verde.

Como deve ficar ✅: deves ter três blocos separados na área de trabalho, um por cada botão. Cada um muda o fundo para uma cor diferente quando é clicado!

Parte 4 — Testar no telemóvel

No menu do App Inventor, clica em Connect → AI Companion.
Aparece uma janela com um código QR e um código de 6 letras.
No telemóvel, abre o MIT AI2 Companion e digita o código de 6 letras (ou lê o QR code se estiveres na mesma rede Wi-Fi).
A tua app aparece no telemóvel. Clica em cada botão e o fundo deve mudar de cor! 🌈

Parte 5 — Personaliza a tua app

Já tens a app a funcionar? Agora faz dela algo teu. Aqui ficam algumas ideias:

Muda as cores para as tuas favoritas. Experimenta cores menos óbvias como laranja, roxo ou rosa.
Muda o texto dos botões — em vez de "Vermelho" podes escrever "Fogo", "Oceano", "Floresta".
Adiciona um quarto botão com uma cor à tua escolha. Segue os mesmos passos das partes 2 e 3.
Experimenta alterar a aparência de cada botão. Exemplo: Muda o tamanho ou o tipo de letra dos botões usando as propriedades TamanhoDaFonte e FamiliaDaFonte no painel Properties.

Desafios Extra

Desafio 1 — Mostrar o nome da cor

Faz com que, além de mudar o fundo, apareça uma mensagem no ecrã, abaixo dos botões, a dizer qual foi a cor escolhida.

No Designer, adiciona um Legenda abaixo dos botões. Deixa o campo Texto vazio.
Nos Blocks, dentro de cada bloco de clique, adiciona "ajustar Legenda1.Texto" e escreve o nome da cor correspondente.

Desafio 2 — Modo "Escuro/Claro"

Cria um botão que alterna o fundo entre preto e branco cada vez que é clicado.

No Designer, adiciona um Botão com o texto "Escuro / Claro".
Nos Blocos, vais precisar de uma variável para guardar o estado atual (escuro ou claro). Para isso:
- Em Variáveis, arrasta "inicializar global" e chama-lhe modo com o valor de texto "claro".
No bloco de clique do botão, usa um bloco se/então:
- SE modo = "claro" ENTÃO muda o fundo do ecrã para preto e muda modo para texto "escuro"
- SENÃO muda o fundo para branco e muda modo para "claro"

Atenção: este desafio usa dois conceitos novos - variáveis e condições. Vais aprendê-los em detalhe nas próximas aulas. Se ficares preso, não te preocupes, porque voltaremos a isto em breve!

Blocos finais

Page updated

Google Sites

Report abuse