Criando um App com App Inventor 2

download

of 25

  • date post

    20-Jan-2017
  • Category

    Technology
  • view

    256
  • download

    8

Embed Size (px)

transcript

  • Programao 1

    IFES, SERRA-ES.

    App Inventor 2

    Andr Felipe Santos Martins

  • Programao 1

    IFES, SERRA-ES.

    Sumrio

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

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

    3. Exemplo de aplicao .................................................... 11

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

  • Programao 1

    IFES, SERRA-ES.

    1. O que o App Inventor 2

    Conhecido como MIT App Inventor, o App Inventor uma aplicao de cdigo aberto criada pela Google lanada 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 grfica, que permite ao usurio programar por meio de blocos visuais, que sero posteriormente executados em um dispositivo android.

    Na criao do App Inventor o Google deu bastante ateno

    informao educativa e tambm em ambientes de desenvolvimento Online.

  • Programao 1

    IFES, SERRA-ES.

    2. Como instalar e Utilizar

    Para que tu possas iniciar o desenvolvimento no App Inventor, apenas necessrio ter instalado Chrome ou Firefox no seu computador. Ento 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.

    http://ai2.appinventor.mit.edu/

  • Programao 1

    IFES, SERRA-ES.

    Aps 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 esto propriedades do elemento selecionado, que podem ser alterados conforme desejado. Na aba components esto todos os componentes que foram arrastados para a tela.

  • Programao 1

    IFES, SERRA-ES.

    Faremos aqui um exemplo onde o usurio digita algum texto na textbox, clica no boto 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 variveis. Para isso, na acaba de componentes, apenas selecione o componente e clique em Rename, digite o novo nome e confirme.

  • Programao 1

    IFES, SERRA-ES.

    Aps adicionar os elementos e mudar o nome para o desejado, para iniciar a desenvolver a parte lgica necessrio ir para a rea de blocos, clicando no boto Blocks no canto superior direito, acima da aba de propriedades.

    Nessa rea, na aba Blocks onde ficam todos os blocos da rea lgica do aplicativo. Para iniciar o desenvolvimento necessrio apenas que selecione o que deseja ser usado e arrastar

  • Programao 1

    IFES, SERRA-ES.

    para o quadro branco. Organizando de forma lgica os passos a serem seguidos.

    Nesse exemplo os seguintes blocos/eventos foram feitos:

    Quando clicar no boto:

    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, necessrio baixar o driver aiStarter. Aps o download, necessrio fazer a instalao. Ao finalizar a instalao s necessrio abrir o cone do aiStarter na rea de trabalho. Ento, na pgina do App Inventor clicar em Connect -> Emulator. Assim o emulador ir iniciar. Todavia, a melhor opo 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 cdigo QR a ser lido encontrado ao clicar em Connect -> Al Companion.

    http://appinv.us/aisetup_windowshttps://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

  • Programao 1

    IFES, SERRA-ES.

    Aps a leitura do cdigo, o que foi desenvolvido no App Inventor vai automaticamente ser executado no aparelho. E assim pode ser testado.

  • Programao 1

    IFES, SERRA-ES.

    E como foi demonstrado, est tudo funcionando corretamente nesse teste. O App Inventor possui muitos elementos e pode sim ter aplicaes 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).

  • Programao 1

    IFES, SERRA-ES.

    3. Exemplo de aplicao

    Como exemplo de aplicao, desenvolvi um cronmetro. O CronDroid.

    O app tem um uso bem simples, sendo que ao clicar em Iniciar o cronmetro comea a contar.

  • Programao 1

    IFES, SERRA-ES.

    Ao clicar em volta, criada uma lista de voltas, que so usadas para marcar voltas ou algum tempo especfico desejado.

    Ao clicar em parar o contador para, e o boto torna-se em Zerar. Ao clicar em zerar o contador zerado e todas as voltas so apagadas.

  • Programao 1

    IFES, SERRA-ES.

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

    https://goo.gl/kTNaiw

  • Programao 1

    IFES, SERRA-ES.

    4. Criando um App semelhante

    O primeiro passo para criar um App semelhante ao CronDroid 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 so posicionados dentro dele. Apenas clique e arraste-o pela tela. Ele representado por um painel em branco na tela.

  • Programao 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 botes para dentro do painelBotoes. Em cada boto 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%.

  • Programao 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 boto, com a propriedade Width em 100%.

    Aps esse novo boto vamos inserir um novo elemento cahamdo ListView, que um elemento para fazer a exibio de listas, no qual, usaremos para contar as voltas do cronmetro.

    O resultado o seguinte:

  • Programao 1

    IFES, SERRA-ES.

    Por fim vamos alterar o label de cada boto, 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 no visvel. Ele

    ser utilizado para fazer a contagem usando o timer. O relgio tem

    uma propriedade chamada TimerInterval que deve ser setada em

    100.

    Aps isso, verifique se os nomes de cada elemento

    corresponde ao meu exemplo, assim podemos prosseguir para a

    parte lgica.

  • Programao 1

    IFES, SERRA-ES.

    Parte Lgica

    Dando inicio na parte logica da aplicao, a primeira coisa que fiz

    foi declarar as vriaveis 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 concatenao do tempo

    das variaveis min, seg e mili.

  • Programao 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 inicializao de

    tela, para que o Timer esteja parado e o boto volta desativado

    enquanto o cronmetro no est a correr.

    O prximo passo foi implementar o clique do boto de

    iniciar(btnStart), que usa o bloco seguinte:

    A sequencia de eventos a seguinte:

    Seta a propriedade Text do boto btnCleanReset para

    PARAR, para ficar mais claro ao usurio onde clicar para

    que o cronmetro pare.

    Alterar a propriedade TimerEnabled do relgio para True,

    assim o timer comea a correr, acionando os eventos que

    veremos a seguir.

    Seta o boto btnVolta como ativado, para que o usurio possa

    clicar e marcar voltas, adicionando-as na lista.

  • Programao 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(funo), onde feita

    a contagem e OrganizeTime a funo que organiza o label do

    cronmetro a ser exibido na tela.

    Na funo GetTimeRunning est toda a lgica 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.

  • Programao 1

    IF