Post on 20-Jan-2017
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.
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.