Programação 1

IFES, SERRA-ES.

App Inventor 2

André Felipe Santos Martins

Programação 1

IFES, SERRA-ES.

Sumário

1. O que é o App Inventor 2 ................................................. 3

2. Como instalar e Utilizar .................................................... 4

3. Exemplo de aplicação .................................................... 11

4. Criando um App semelhante ........................................ 14

Programação 1

IFES, SERRA-ES.

1. O que é o App Inventor 2

Conhecido como MIT App Inventor, o App Inventor é uma aplicação de código aberto criada pela Google lançada em 15 de Dezembro de 2010, e hoje mantida pelo Massachusetts Institute of Technology (MIT).

Com ele os programadores iniciantes podem criar aplicativos

para o SO Android. Utilizando uma interface gráfica, que permite ao usuário programar por meio de blocos visuais, que serão posteriormente executados em um dispositivo android.

Na criação do App Inventor o Google deu bastante atenção à

informação educativa e também em ambientes de desenvolvimento Online.

Programação 1

IFES, SERRA-ES.

2. Como instalar e Utilizar

Para que tu possas iniciar o desenvolvimento no App Inventor, apenas é necessário ter instalado Chrome ou Firefox no seu computador. Então acesse esse LINK e clique em Projects -> Start a new Project, digite um nome para seu novo projeto e a tela inicial de desenvolvimento irá abrir.

Programação 1

IFES, SERRA-ES.

Após teu novo projedo ser criado, tu podes iniciar o desenvolvimento, simplesmente selecionando elementos na Aba “Pallete” no lado esquerdo da tela e arrastando para dentro da tela.

Na aba “Properties” do lado direito da tela estão propriedades do elemento selecionado, que podem ser alterados conforme desejado. Na aba components estão todos os componentes que foram arrastados para a tela.

Programação 1

IFES, SERRA-ES.

Faremos aqui um exemplo onde o usuário digita algum texto na textbox, clica no botão e altera o valor da label para o texto digitado, em seguida apaga o que está digitado na textbox. Iniciando por alterar o nome das variáveis. Para isso, na acaba de componentes, apenas selecione o componente e clique em “Rename”, digite o novo nome e confirme.

Programação 1

IFES, SERRA-ES.

Após adicionar os elementos e mudar o nome para o desejado, para iniciar a desenvolver a parte lógica é necessário ir para a área de blocos, clicando no botão “Blocks” no canto superior direito, acima da aba de propriedades.

Nessa área, na aba “Blocks” é onde ficam todos os blocos da área lógica do aplicativo. Para iniciar o desenvolvimento é necessário apenas que selecione o que deseja ser usado e arrastar

Programação 1

IFES, SERRA-ES.

para o quadro branco. Organizando de forma lógica os passos a serem seguidos.

Nesse exemplo os seguintes blocos/eventos foram feitos:

Quando clicar no botão:

Setar valor da saida como o valor que foi digitado

Setar valor da textbox como vazio

Tudo pronto, vamos para a etapa de testes! Para usar um emulador no windows, é necessário baixar o driver aiStarter. Após o download, é necessário fazer a instalação. Ao finalizar a instalação só é necessário abrir o ícone do aiStarter na área de trabalho. Então, na página do App Inventor clicar em Connect -> Emulator. Assim o emulador irá iniciar. Todavia, a melhor opção para testar o aplicativo é utilizando um aparelho android. Para isso é só instalar este App no seu dispositivo android, e ao abri-lo, selecionar para ler um codigo QR. O código QR a ser lido é encontrado ao clicar em Connect -> Al Companion.

Programação 1

IFES, SERRA-ES.

Após a leitura do código, o que foi desenvolvido no App Inventor vai automaticamente ser executado no aparelho. E assim pode ser testado.

Programação 1

IFES, SERRA-ES.

E como foi demonstrado, está tudo funcionando corretamente nesse teste. O App Inventor possui muitos elementos e pode sim ter aplicações muito mais complexas desenvolvidas nele. Visto que o que fizemos aqui foi apenas um exemplo. Para gerar o .apk do aplicativo, é só clicar em Build > App(Save .apk on my computer).

Programação 1

IFES, SERRA-ES.

3. Exemplo de aplicação

Como exemplo de aplicação, desenvolvi um cronômetro. O CronôDroid.

O app tem um uso bem simples, sendo que ao clicar em Iniciar o cronômetro começa a contar.

Programação 1

IFES, SERRA-ES.

Ao clicar em volta, é criada uma lista de voltas, que são usadas para marcar voltas ou algum tempo específico desejado.

Ao clicar em parar o contador para, e o botão torna-se em “Zerar”. Ao clicar em zerar o contador é zerado e todas as voltas são apagadas.

Programação 1

IFES, SERRA-ES.

Link para teste: https://goo.gl/kTNaiw

Programação 1

IFES, SERRA-ES.

4. Criando um App semelhante

O primeiro passo para criar um App semelhante ao CronôDroid é cirar um novo projeto.

Com um novo projeto criado, o primeiro elemento a ser adicionado é o HorizontalArrangement, que é um elemento de layout utilizado para organizar outros elementos de forma horizontal, que são posicionados dentro dele. Apenas clique e arraste-o pela tela. Ele é representado por um painel em branco na tela.

Programação 1

IFES, SERRA-ES.

Na aba de componentes vamos renomea-lo para painelBotoes. Na aba de propriedades vamos alterar a prorpriedade AlignHorizontal para “center” e a propriedade Width para 100%.

Agora vamos arrastar dois botões para dentro do painelBotoes. Em cada botão a propriedade Width deve ser setada para 50%, resultando no seguinte:

Agora vamos adicionar um novo elemento de layout chamado VerticalArrangement, que serve para organizar elementos dentro dele de forma vertical. Vamos renomear esse painel para painelCronometro e setar suas propriedades AlignHorizontal para “center”, AlignVertical para “Top” e Width para 100%.

Programação 1

IFES, SERRA-ES.

Agora, dentro do painelCronograma vamos inserir um label, que é um elemento de texto, que servira de contador. Vamos renomear o label para txtClock. Esse label deve ter as seguintes propriedades setadas:

FontBold: Checado

FontSize: 45

Text: “00:00:00”

TextAlign: Center

Logo abaixo do painelCronometro vamos inserir um botão, com a propriedade Width em 100%.

Após esse novo botão vamos inserir um novo elemento cahamdo ListView, que é um elemento para fazer a exibição de listas, no qual, usaremos para contar as voltas do cronômetro.

O resultado é o seguinte:

Programação 1

IFES, SERRA-ES.

Por fim vamos alterar o label de cada botão, na propriedade

Text, como na imagem seguinte. O tamanho e estilo da fonte

encontram-se todas na aba de propriedades, como mostrado

anteriormente.

Por fim temos que adicionar um novo elemento chamado

Clock que se encontra na aba Sensors da palheta. Basta arrastar

para tela que ele será adicionado. Esse elemento não é visível. Ele

será utilizado para fazer a contagem usando o timer. O relógio tem

uma propriedade chamada TimerInterval que deve ser setada em

100.

Após isso, verifique se os nomes de cada elemento

corresponde ao meu exemplo, assim podemos prosseguir para a

parte lógica.

Programação 1

IFES, SERRA-ES.

Parte Lógica

Dando inicio na parte logica da aplicação, a primeira coisa que fiz

foi declarar as váriaveis globais, como seguinte:

Sendo:

min, seg e mili relativos ao tempo, e seriam usados para

contar e atualizar a label do cronograma.

volta utilizada para contar a quantidade de voltas

tempo que seria o texto equivalente a concatenação do tempo

das variaveis min, seg e mili.

Programação 1

IFES, SERRA-ES.

timeToShow, é o conjunto de todos os tempos a serem

mostrados na lista, separados por virgula, que faz a quebra de

linha na tela.

Em seguida, o primeiro evento que usei foi o de inicialização de

tela, para que o Timer esteja parado e o botão volta desativado

enquanto o cronômetro não está a correr.

O próximo passo foi implementar o clique do botão de

iniciar(btnStart), que usa o bloco seguinte:

A sequencia de eventos é a seguinte:

Seta a propriedade Text do botão btnCleanReset para

“PARAR”, para ficar mais claro ao usuário onde clicar para

que o cronômetro pare.

Alterar a propriedade TimerEnabled do relógio para True,

assim o timer começa a correr, acionando os eventos que

veremos a seguir.

Seta o botão btnVolta como ativado, para que o usuário possa

clicar e marcar voltas, adicionando-as na lista.

Programação 1

IFES, SERRA-ES.

Quando setamos a propriedade do relogio TimerEnabled como

true, um evento é iniciado, e é nele que fazemos a contagem do

tempo, como demonstrado no bloco a seguir.

Onde GetTimeRunning é uma procedure(função), onde é feita

a contagem e OrganizeTime é a função que organiza o label do

cronômetro a ser exibido na tela.

Na função GetTimeRunning está toda a lógica de contagem.

Onde mili sempre é incrementada em +1, e caso seja maior que 9,

ela volta a 0 e incrementa 1 a seg e assim sucessivamente,

efetuando toda a contagem.

Programação 1

IFES, SERRA-ES.

A função OrganizeTime simplesmente faz uma concatenação

de texto do tempo. Verificando se o numero tem apenas um

algarismo para colocar o zero na frente, para ficar visualmente

melhor. Ex: “01:10:01”

Como último passo do evento Timer, o valor da variável tempo

é setado na label txtClock para que seja exibido na tela o valor

atual.

Programação 1

IFES, SERRA-ES.

Para o evento do botão btnVolta foi utilizado os seguintes

blocos.

Esse evento é responsável por concatenar um novo tempo a string

timeToShow. Sendo que os tempos tem de ficar separados por

vírgula para ter uma quebra de linha, visualmente na lista.

Programação 1

IFES, SERRA-ES.

Para o evento do botão btnCleanReset, foram utilizados os

seguintes blocos.

Aqui foi utilizado uma lógica simples na qual, a primeira vez

que o botão é apertado, o botão de volta é desativado, o label do

botão é alterado para “ZERAR” e o Timer é parado.

Caso haja um segundo clique seguido no botão, caso o Timer

esteja parado, a condição do If é verdadeira todas as variaveis

globais são zeradas para o estado inicial.

Programação 1

IFES, SERRA-ES.

Programação 1

IFES, SERRA-ES.

Como resultado final temos o conjunto de blocos na pagina anterior, e o

aplicativo com o seguinte visual.

As questões de cores, tamanhos, posições e entre outras questões

visuais vão de cada pessoa. Todas elas podem ser alteradas nas

propriedades de cada elemento, podendo varias de pessoa para pessoa sem

problemas. O importante para que o aplicativo funcione corretamente está na

parte lógica.