O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Criando um App com App Inventor 2

5.304 visualizações

Publicada em

Nesse documento falo um pouco sobre a ferramenta App Inventor 2 e ensino como criar um aplicativo simples. (Cronômetro)

Publicada em: Tecnologia

Criando um App com App Inventor 2

  1. 1. Programação 1 IFES, SERRA-ES. App Inventor 2 André Felipe Santos Martins
  2. 2. 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
  3. 3. 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.
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. 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
  8. 8. 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.
  9. 9. 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.
  10. 10. 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).
  11. 11. 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.
  12. 12. 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.
  13. 13. Programação 1 IFES, SERRA-ES. Link para teste: https://goo.gl/kTNaiw
  14. 14. 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.
  15. 15. 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%.
  16. 16. 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:
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 24. Programação 1 IFES, SERRA-ES.
  25. 25. 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.

×