Programando Aplicativos com App Inventor 2 - Desenho

Voltar ao Sumário

Desenho

Um aplicativo para desenhar

Dessa vez, vamos criar um aplicativo (App) de desenho simples. As operações que desejamos são: Escolher uma cor, escolher uma espessura do pincel e desenhar traços na tela.


Este tutorial foi inspirado no tutorial PaintPot, no site do App Inventor: PaintPot (Part 1)
Desejávamos ter um App de desenho com instruções em Português para uso na Oficina de Programação com App Inventor. Na adaptação, fizemos algumas alterações.


Para criar o aplicativo, navegue para o site do App Inventor (http://appinventor.mit.edu), clique em Create Apps e faça Login com sua conta no Google. Quando o App Inventor iniciar, escolha a opção de menu Projetos/Iniciar novo projeto... (troque a lingua para Português do Brasil).

Um diálogo vai solicitar o nome do projeto. Escolha um nome e clique no botão Ok (nome sugerido: Desenho). O App Inventor vai criar um novo projeto em branco. Na tela, você vai ver quatro painéis: Paleta, Visualizador, Componentes e Propriedades. Já falamos sobre eles na atividade anterior.




Nesse ponto, é interessante que você desenhe no papel a arrumação visual dos componentes do seu aplicativo. Para a primeira versão, vamos usar quatro botões para cores no topo da tela (preto, vermelho, azul e amarelo), e uma lista para as espessuras do pincel. O restante da tela vai ser reservado para o desenho.

O App Inventor já criou um componente para você, chamado Screen1. Esta é a tela do App. Vamos mudar o título dessa tela, para o nome do seu App. Para isso, role o painel Propriedades até visualizar a caixa de texto Título. Troque o valor para o nome do app (Desenho).

Designer

Selecione os componentes para criar seu aplicativo

Vamos começar escolhendo os quatro botões para as cores.

1 - Arraste o componente Botão do painel Paleta para o painel Visualizador, na área com a imagem do celular. Após arrastar o botão, ele aparece no painel do Visualizador e na lista do painel Componentes como Botão1. Veja o detalhe depois de arrastar o primeiro botão.

2 - No painel Componentes, clique no botão Renomear para mudar o nome do botão. Por exemplo para: btCorPreto. Isso vai nos ser útil mais adiante.

3 - No painel Propriedades, mude a CorDeFundo para a cor escolhida (preto), a Largura para 10% e o Texto para vazio (apagando o que está lá).

Repita todos esses passos para os quatro botões, mudando os nomes e cores de acordo com as cores escolhidas.

Veja na imagem abaixo como sua tela vai estar após estas operações.

4 - Seria melhor que os botões estivessem arranjados na horizontal. Para conseguir isso, abra no painel Paleta o grupo de componentes de Organização, e escolha uma Organização Horizontal. Arraste a organização para o painel do Visualizador, e os botões para dentro da organização (depois do primeiro, jogue os botões um sobre o outro, e arrume).

5 - Ainda sobrou espaço à direita dos botões. Use esse espaço para escolher a largura do pincel. Para isso, no painel Paleta, volte aos componentes de Interface de Usuário e arrraste para dentro da Organização Horizontal um componente ListaSuspensa. Como fez com os botões, mude o nome do componente para lsPincel no painel Componentes. Na caixa CadeiaDeElementos, no painel Propriedades, escreva as opções de espessura do pincel separadas por vírgulas (fino, médio, largo). Mude a Mensagem para Pincel e a Seleção para 1.


Agora, nossa tela deve estar como na imagem abaixo.

6 - Falta um último componente: a tela onde você vai desenhar. Esse componente é uma Pintura. No painel Paleta, no grupo de Desenho e Animação, arraste uma Pintura para a área abaixo dos botões. No painel Propriedades, altere a Altura e Largura para preencher principal.

Neste ponto, você tem todos os componentes de que vai precisar. Mas se tentar fazer funcionar seu app, vai ver que nada acontece com os botões e a tela de pintura. Você precisa criar o programa para fazer seu App funcionar.

Programando com o Editor de Blocos

Para criar seu programa, você precisa passar para a tela de Blocos. Clique no botão que está no canto superior direito da tela.

O Editor de Blocos tem apenas dois painéis: Blocos e Visualizador. No painel de Blocos, você vai encontrar uma série de grupos de blocos para comandos internos (Controle, Lógica, Matemática,...), e, logo abaixo, os grupos de blocos para comandos relativos aos controles que você adicionou ao app no Designer.

Agora que você está no Editor de Blocos, siga os próximos passos para programar seu aplicativo usando blocos.

Desenhando linhas

A função principal do nosso App é criar desenhos na tela. Vamos começar com os blocos do componente Pintura1 (a tela onde você vai desenhar). Clique no grupo, e uma série de blocos vai surgir do lado esquerdo da tela do Visualizador. Estes blocos ainda não estão no seu programa. Para adicionar um bloco, arraste-o da lista para o espaço em branco do lado direito.

1 - O bloco que você escolher vai determinar o comportamento do seu app. A primeira decisão a tomar é se você deseja pintar algo quando o usuário tocar na tela ou quando ele arrastar o dedo sobre a tela. Por enquanto, escolha a segunda opção. Para isso, arraste o bloco quando Pintura1.Arrastado para a tela do Visualizador.


Sua tela vai estar como abaixo:

O App Inventor funciona orientado a eventos. O bloco que você acaba de acrescentar ao programa trata do evento que ocorre quando o usuário arrasta o dedo na tela. Você tem que colocar dentro desse bloco os comandos para executar as ações que vão tratar do evento. É hora de pintar alguma coisa na tela.

2 - Adicione uma ação para pintar uma linha. Este bloco de ação também está no componente Pintura1. Clique no componente, role a tela, se necessário, e arraste o bloco chamar Pintura1.DesenharLinha para dentro do bloco quando Pintura1.Arrastado certifique-se que os dois se encaixem.

Seu programa está comandando o celular para desenhar uma linha sempre que o usuário arrastar o dedo na tela do app. Mas note que alguns encaixes do lado direito do bloco DesenharLinha (roxo) estão vazios. Esses encaixes são os parâmetros que devem ser utilizados na operação. Para traçar uma linha, você precisa de um ponto inicial (x1, y1) e um ponto final (x2, y2). Você tem que passar valores para esses parâmetros da função DesenharLinha.

3 - Na segunda linha do bloco quando Pintura1.Arrastado (bloco marrom, linha que começa com xInicial), existem alguns nomes de parâmetros (valores fornecidos quando o evento foi disparado). Use alguns desses parâmetros para preencher os encaixes.
3a - Passe o mouse sobre os nome do parâmetro xAnterior até que apareçam novos blocos obter e ajustar. Então, arraste obter xAnterior, para o encaixe x1.

3b, 3c, 3d - Repita o passo 3a passando obter yAnterior, obter xAtual e obter yAtual para os encaixes, y1, x2 e y2, respectivamente.

Pronto, você já tem o código para tratar o evento, e, já pode experimentar o funcionamento do seu app.

Para isso, no computador, ative o programa aiStarter, espere que ele esteja pronto, e ative na tela do AppInventor a opção de menu Conectar/Emulador. Se ao invés do emulador você estiver utilizando um dispositivo Android para seus testes, ligue seu dispositivo e inicie o App AI2 Companion. Então, use a opção Conectar/Assistente AI no computador e a opção Scan QR Code no dispositivo.

Em alguns segundos, vai aparecer na tela do emulador a tela do seu app. Experimente fazer movimentos de arrasto na tela, abaixo dos botões. O que acontece?

E o que acontece se você usar os botões de cores, ou a opção de espessura do pincel? Nada! Você ainda não programou as ações para esses componentes. De volta ao trabalho!

Cores

A ação esperada quando se ativa um dos botões de cores é que a cor das linhas desenhadas mude para esta cor. Vamos adicionar a lógica que trata das cores.

Comece com o botão para a cor vermelha.

1 - No painel Blocos, clique no componente btCorVermelho, e arraste o bloco quando btCorVermelho.Clique para um espaço em branco da tela do Visualizador. A escolha de um bom nome para o componente nos ajuda a saber que componente serve para quê no editor de blocos. Novamente um evento! Temos que adicionar blocos no seu interior para tratar o evento - mudar a cor do pincel para vermelho.

2 - O bloco que precisamos está no componente Pintura1. É um bloco verde chamado ajustar Pintura1.cor de pintura para. Você vai ter que rolar a lista de blocos para encontrá-lo. Encaixe esse bloco dentro do bloco quando btCorVermelho.Clique. Temos um encaixe vazio no fim do bloco. Esse encaixe tem que ser preenchido com a cor desejada. Uma boa maneira de definir a cor é usar a cor de fundo do botão.

3 - No painel Blocos, clique no componente btCorVermelho, escolha o bloco btCorVermelho.CorDeFundo (verde claro) e encaixe esse bloco no de ajustar cor de pintura (veja abaixo).

Você precisa repetir esses passos mais três vezes, para os outros botões. Mas não se assuste! Existe um recurso muito útil!

4 - Clique com o botão direito do mouse na parte marrom do bloco quando btCorVermelho.Clique. Um menu vai surgir. Escolha a opção Duplicar. Uma cópia dos blocos vai aparecer perto dos originais. Arraste este conjunto para uma área em branco, e renomeie todo btCorVermelho dentro desse bloco para btCorPreto. Repita para as cores azul e amarelo.

Seu programa deve estar desse jeito:

Experimente seu app novamente, tocando nos botões de cores e arrastando o dedo pela tela. Pronto! Já temos cores! Mas o traço é bem fino!

O Pincel

Por fim, precisamos tratar da escolha de espessura do pincel.

1 - No painel Blocos, clique no componente lsPincel, e arraste o bloco quando lsPincel.DepoisDeSelecionar para um espaço em branco no painel do Vizualizador. Este evento ocorre quando o usuário escolhe uma nova espessura do pincel na lista. Os valores possíveis são: "fino", "médio" e "largo". Em linguagens de programação, quando os valores representam texto, normalmente ficam entre aspas.

2 - Para tratar o evento, precisamos encher o novo bloco com código para modificar a espessura do pincel. No painel de Blocos, clique no componente Pintura1 e arraste o bloco ajustar Pintura1.LarguraDaLinha para para dentro do bloco que trata a seleção de pincel. Mais uma vez, você precisa completar o encaixe vazio, mas dessa vez, o trabalho vai ser um pouco maior.

3 - No bloco DepoisDeSelecionar, existe um parâmetro que contém o texto da seleção feita pelo usuário. Mas a largura do pincel, ou LarguraDaLinha tem que ser um valor numérico. O valor inicial é 1. Se o usuário escolher "médio", queremos usar uma largura 4, e se ele escolher "largo", queremos usar uma largura 8. Temos que fazer a conversão de texto para valor. Na descrição do problema que você acaba de ler, aparecem as palavras se e largura, além de diversos valores numéricos. A palavra se indica que vamor precisar utilizar um bloco se/então. Já a palavra largura associada a valores diferentes, indica que precisamos utilizar uma variável.

4 - Vamos começar com a variável. Na seção de blocos Internos, clique no grupo Variáveis. Dos blocos que surgem, dois têm o mesmo nome - inicializar local nome para. Escolha o que tem pequenos encaixes arredondados na parte de cima e de baixo.

Desencaixe o bloco de ajustar largura da linha, e encaixe esse bloco inicializar local (laranja) dentro do bloco DepoisDeSelecionar (marrom). Mude o texto no campo nome para largura.

5 - Encaixe o bloco LarguraDaLinha dentro do bloco inicializar local.

6 - Passe o mouse sobre o nome da variável - largura - até que apareça um bloco obter largura. Arraste o bloco obter largura e encaixe no bloco ajustar LarguraDaLinha (verde).

7 - Do grupo Matemática, arraste um bloco 0 para o encaixe do bloco inicializar local, e troque o texto de 0 para 1.

Seus blocos devem estar como abaixo. Omitimos os outros, para que fique um pouco mais claro.

Os blocos estão todos encaixados, mas o texto da seleção ainda não foi convertido em um valor numérico. Neste ponto, o valor de largura é 1. Para converter de texto para valores, utilize um comando se/senão. Você vai precisar de dois testes: se a seleção é "médio" e se a seleção é "largo".

8 - No painel de Blocos, abra o grupo Controle e arraste um bloco se então para dentro do bloco inicializar local nome para, logo no início. O bloco verde vai passar para baixo desse automaticamente. Observe que há um símbolo parecido com uma engrenagem no bloco se então. Clique na engrenagem, e surge uma tela onde você pode arrastar blocos senão se e senão para a estrutura do bloco. Adicione um bloco senão se para poder fazer os dois testes.

9 - Os testes serão comparações de texto. Do grupo Texto, arraste um bloco comparar textos para o encaixe do se. Mude o tipo de comparação para =, e arraste para o primeiro encaixe dentro desse novo bloco um bloco obter seleção. Você consegue esse último passando o mouse sobre o parâmetro seleção, no bloco DepoisDeSelecionar.

10 - Para preencher o segundo encaixe, no painel de Blocos, pegue do grupo Texto um bloco com texto " " (vazio). Troque o conteúdo do texto para a palavra "médio".

11 - Passando o mouse sobre a variável largura, no bloco inicializar local largura para, você vai conseguir um bloco ajustar largura para. Arraste este bloco para o encaixe do então e copie para o seu encaixe o número 4 (do grupo de Matemática, bloco 0 alterado para 4). Leia o que você acabou de montar usando suas palavras. Deve ficar mais ou menos assim: "Comece com um valor 1 guardado na variável largura. Se o texto na seleção for igual a 'médio', altere o valor de largura para 4".

Duplique o bloco comparar textos e encaixe a cópia no encaixe senão, se e troque a palavra "médio" para a palavra "largo". Duplique também o bloco ajustar largura para, encaixe no bloco senão, se e troque o valor de 4 para 8.

Agora, seus blocos devem estar como abaixo:

Pronto! Experimente seu aplicativo!

O que falta?

Empacotando o seu aplicativo

Enquanto seu dispositivo (ou emulador) estiver conectado ao App Inventor, o aplicativo vai estar rodando em tempo real no dispositivo. Se você desconectar o dispositivo, o aplicativo vai desaparecer. Se você reconectar o dispositivo, o aplicativo volta a funcionar, mas se você quiser que o aplicativo seja instalado permanentemente no dispositivo Android, você precisa "Empacotar" seu código, para gerar um pacote de aplicativo (arquivo apk).

Para "empacotar" o aplicativo, de forma a poder instalar o mesmo no seu dispositivo Android ou no de outra pessoa, clique na opção de menu Compilar no topo da tela do App Inventor. 

Existem duas opções de compilação:

1. App (fornecer o QR code para o .apk): Esta opção gera um QR Code correspondente ao aplicativo, que pode ser usado para instalar o mesmo, fazendo o dispositivo ler o QR code. O aplicativo App Inventor Companion tem uma opção para ler o QR code. Note que este método só funciona se a conta do Google em que você está desenvolvento o aplicativo for a mesma que você está usando no dispositivo Android. Para instalar em outros dispositivos, é melhor usar a opção 2.

2. App (salvar .apk no meu computador): Você pode baixar o aplicativo no seu computador como um arquivo .apk, que você vai poder distribuir e compartilhar como quiser, instalando-o manualmente em outros dispositivos.

Revisão

Estes foram os conceitos cobertos neste tutorial:

• Você constrói aplicativos selecionando componentes, e definindo como cada um deve se comportar através de blocos de programação.  
• Você usa o Designer para selecionar componentes e ajustar suas propriedades. Alguns componentes são visíveis, e outros não.  
• Você usa o Editor de Blocos para montar blocos que definem o comportamento dos componentes.
• Blocos quando ... fazer ... definem tratamento de eventos, que indicam o que fazer quando alguma coisa acontece (como um toque em um botão).
• Blocos de comandos chamar... realizam ações (como desenhar uma linha).
 

Distribuído sob a licença: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) : https://creativecommons.org/licenses/by-sa/3.0/deed.pt_BR

Passar ao próximo Tutorial: Adivinhe