oficina app inventor

76

Click here to load reader

Upload: marco-antonio-sanches

Post on 27-Jan-2017

1.903 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Oficina App Inventor

Professor Marco Antonio

Page 2: Oficina App Inventor

AppI

nven

tor

Google App Inventor é uma ferramenta desenvolvida pela Google que permite a criação de aplicativos para smartphones que rodam o sistema operacional Android, sem que seja necessário conhecimento em programação.

O App Inventor

O que é o App

Inventor?

Page 3: Oficina App Inventor

AppI

nven

tor

Por que utilizar o App Inventor?A maioria das pessoas dizem que o App Inventor é fácil de usar por causa de seu visual e sua interface do tipo clique-e-arraste. Mas o que isso significa? Porque que o App Inventor é tão fácil de usar?

• Você não precisa lembrar das instruções ou saber programação.

• Você monta sua aplicação a partir de um conjunto de opções.

• Como em um quebra cabeças, apenas alguns blocos vão ligar-se ao outro.

• Você lidar com eventos diretamente.

Page 4: Oficina App Inventor

AppI

nven

tor

O que posso fazer com o App Inventor?Você pode construir diferentes tipos de aplicativos com o App Inventor. Use sua imaginação e você poderá criar todos os tipos de diversão ou aplicativos úteis.

• Jogos.• Aplicativos educacionais.• Aplicativos para geolocalização (GPS).• Aplicativos que controlam robôs.• E muito mais!!!!!

Page 5: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Interface para o “designer” do aplicativo

Page 6: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Paleta de componentes

Page 7: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Tela principal ou tela do aplicativo

Page 8: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Componentes e suas propriedades

Page 9: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimentoMenu superior

Menu Connect

Escolha da interface

Page 10: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Interface de programação por meio de blocos de código

Page 11: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

Blocos de comando

Observe que os elementos que foram adicionados à tela do aplicativo aparecem nos blocos. Para cada um deles,

existem comandos específicos!!!!

Page 12: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimentoBlocos de comando

Ao selecionar o elemento TextBox1, observe que são apresentados os blocos de comando que poderão ser utilizados com esse elemento.

Page 13: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento

  

• Observe também, que os comandos funcionam como um quebra-cabeças!!!!

• Todas as instruções que serão passadas ao aplicativos são “encaixadas” umas nas outras, formando um bloco maior!!!

ATENÇÃO!!! Se os blocos não encaixarem é porque sua estrutura está com erros!!! Neste caso, procure ajuda do professor.

Page 14: Oficina App Inventor

AppI

nven

tor

Interfaces para desenvolvimento• Observe também, que os comandos funcionam

como um quebra-cabeças!!!!• Todas as instruções que serão passadas ao

aplicativos são “encaixadas” umas nas outras, formando um bloco maior!!!

Page 15: Oficina App Inventor

AppI

nven

tor

O que são eventos?• Simplificadamente, vamos definir “evento” como

sendo uma ação a ser realizada pelo usuário ou pelo dispositivo.

• Um exemplo bem comum, que utilizaremos praticamente em todo o curso é o evento de clicar em um botão:

Page 16: Oficina App Inventor

Vamos programar?!

Page 17: Oficina App Inventor

AppI

nven

tor

Acessando a plataforma

Abra o navegador Google Chrome e digite:

http://appinventor.mit.edu/

No canto superior direito, clique em

Page 18: Oficina App Inventor

AppI

nven

tor

Acessando a plataforma

Antes de iniciarmos, é necessário aceitar os termos de permissão do aplicativo!!Entre com seu email e senha. Na tela seguinte, clique em Allow (Permitir)!!

Page 19: Oficina App Inventor

AppI

nven

tor

Acessando a plataforma

Page 20: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 21: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 22: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 23: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Digite seu nome:

Agora vamos começar a “programar” nossos blocos!!

Page 24: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Clique aqui

Agora vamos começar a “programar” nossos blocos!!

Page 25: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Agora vamos começar a “programar” nossos blocos!!

Page 26: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 27: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 28: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 29: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 30: Oficina App Inventor

AppI

nven

tor

Meu primeiro programaVamos testar nosso app clicando em Connect e depois em Emulator

A primeira vez que você abre o emulador, o processo é bem lento, podendo demorar até 2 minutos!!!Tenha paciência, por favor!!!!Se tudo correr bem, você verá a tela do Emulador, e sua aplicação rodando.

Page 31: Oficina App Inventor

AppI

nven

tor

Meu primeiro programaAdicionando uma saudação ao app:

Page 32: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

O que você acha de

melhorarmos um pouco esse app?

Próximo passo: vamos inserir um som nesse aplicativo!!!Para isso, acesse a área de Designer

Page 33: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 34: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 35: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Page 36: Oficina App Inventor

AppI

nven

tor

Meu primeiro programaDê uma melhorada em seu app e tente deixa-lo assim:

Agora teste o seu aplicativo no simulador!!!!

Page 37: Oficina App Inventor

AppI

nven

tor

Meu primeiro programaPara uma melhor experiência, recomendo o uso de um celular real, em substituição ao emulador.Para isso, clique em Reset Connection:

E depois em AI Companion no seu celular e faça a leitura do QR Code.

Page 38: Oficina App Inventor

AppI

nven

tor

Meu primeiro programaPara uma melhor experiência, recomendo o uso de um celular real, em substituição ao emulador.Para isso, clique em Reset Connection:

E depois em AI Companion no seu celular e faça a leitura do QR Code.

Page 39: Oficina App Inventor

AppI

nven

tor

Meu primeiro programa

Este foi nosso

primeiro aplicativ

o!!!

Os próximos aplicativos serão um pouco menos detalhados!!!! Caso você tenha alguma dúvida, pare a aula e pergunte ao seu professor!!!!

Page 40: Oficina App Inventor

Calculadora simples!

Page 41: Oficina App Inventor

AppI

nven

tor

Calculadora simplesAgora vamos construir uma calculadora simples. Inicie um novo projeto e escolha um nome para ele.

Page 42: Oficina App Inventor

AppI

nven

tor

Calculadora simplesDeixe a tela principal com os seguintes elementos:

Observe que para esse novo projeto, utilizaremos uma ferramenta para o arranjo horizontal dos botões

Page 43: Oficina App Inventor

AppI

nven

tor

Calculadora simplesDeixe a tela principal com os seguintes elementos:

A ideia é a seguinte:• Vamos digitar dois

números nos campos 1 e 2.

• Quando pressionarmos a operação desejada, o resultado deverá aparecer na primeira linha (Resultado).

Page 44: Oficina App Inventor

AppI

nven

tor

Calculadora simplesAltere para o modo de blocos, para começarmos a dar forma à nossa aplicação:

Agora é só associar o evento clique dos botões para ler os números digitados, realizar a operação e exibir o resultado. Ou seja:

O botão 1 é soma, então vamos pegar a operação correspondente e Math:

Page 45: Oficina App Inventor

AppI

nven

tor

Calculadora simplesJuntando tudo, fica assim:

Agora teste sua aplicação. Se tudo estiver ok, repita o procedimento para os outros 3 botões.

Page 46: Oficina App Inventor

AppI

nven

tor

Calculadora simplesPara finalizar, vamos adicionar um botão para limpar os campos de digitação:

E com um código simples, limpamos os campos:

Page 47: Oficina App Inventor

Calculando minha média!!

Page 48: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaAgora vamos construir um app para o cálculo da média escolar. Inicie um novo projeto e escolha um nome para ele.

Page 49: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaDeixe a tela principal com os seguintes elementos:

Page 50: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaDepois altere suas propriedades para que ele fique com essa cara:

Page 51: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaAltere para o modo Blocks e vamos inserir o código para o cálculo da média. Quando clicamos no botão, devemos:

1. Ler a média digitada no 1º Trimestre;2. Ler a média digitada no 2º Trimestre e

multiplica-la por 2;3. Subtrair 36 da soma de 1 e 2 e dividi-la por 3.4. Exibir o resultado na Label 4.

Page 52: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaPrimeiro montaremos a equação:

Agora é só testar a aplicação!!!!

Page 53: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaVamos melhorar um pouquinho o app, para que fique assim:

Page 54: Oficina App Inventor

AppI

nven

tor

Calculando minha médiaPara isso, adicione o código para o botão “Limpar”:

Page 55: Oficina App Inventor

Pintando o sete!!

Page 56: Oficina App Inventor

AppI

nven

tor

Pintando o seteAgora vamos construir um app para o brincar um pouco com o colega do lado. Inicie um novo projeto e escolha um nome para ele.

Page 57: Oficina App Inventor

AppI

nven

tor

Pintando o setePrimeiro vamos adicionar três botões. Escolha um layout horizontal e alinhe os botões dentro dele!! Mude a cor e o nome de cada um deles.

Agora adicione um Canvas à tela principal:

Page 58: Oficina App Inventor

AppI

nven

tor

Pintando o seteAdicione outros dois botões logo abaixo do Canvas. Se tudo deu certo, sua tela deverá ficar assim:Os botões acima servirão para selecionar a cor da caneta que usaremos para pintar a tela. Clique em Blocks e faça a configuração a seguir:

Page 59: Oficina App Inventor

AppI

nven

tor

Pintando o seteAgora vamos configurar os botões. Mas antes, vamos adicionar mais dois elementos à minha tela:

Depois selecione Camera e solte em qualquer lugar

na tela

Page 60: Oficina App Inventor

AppI

nven

tor

Pintando o seteAgora vamos configurar os botões. Mas antes, vamos adicionar mais dois elementos à minha tela:

Primeiro selecione ImagePicker, arraste e coloque-o ao lado do

botão

Page 61: Oficina App Inventor

AppI

nven

tor

Pintando o seteRenomeie o ImagePicker e sua tela ficará assim:

Retorne à interface de Blocks e vamos configurar os três botões e também o evento que acontece quando desenhamos na tela.

Page 62: Oficina App Inventor

AppI

nven

tor

Pintando o setePrimeiro o botão limpar:

O botão para selecionar uma imagem do celular é o ImagePicker, que ficará assim:

Quando clicamos em tirar foto, devemos iniciar a câmera: E depois da foto tirada, vamos

mudar o Canvas:

Page 63: Oficina App Inventor

AppI

nven

tor

Pintando o seteQuase pronto!!! Agora vamos configurar o que acontece quando desenhamos na tela.Primeiro escolhemos Canvas1.Dragged e configuramos assim:

Page 64: Oficina App Inventor

AppI

nven

tor

Pintando o seteFinalmente escolhemos o Canvas1.Touched e configuramos assim:

Prontinho!! Agora é só diversão!!!

Page 65: Oficina App Inventor

Conversor simples de Temperatura

Page 66: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaVamos adicionar um novo projeto!

Page 67: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaAdicione à tela principal os seguintes elementos:

Para esse novo projeto, utilizaremos uma ferramenta para o arranjo horizontal dos botões

Page 68: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaAdicione à tela principal os seguintes elementos:

Também serão utilizadas 2 label, dois TextBox e três botões

Page 69: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaComo utilizaremos somente números nos TextBox, altere a propriedade dos campos para “NumberOnly”

Aproveite e selecione a Screen1 e altere para Conversor de Temperatura

Page 70: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaAltere as propriedades dos elementos para que fiquem assim: As propriedades do

arranjo horizontal deverá ser alterada como mostra a figura abaixo:

Page 71: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaMude para a interface de blocos para começarmos a desenvolver nosso app.

Agora teremos que trabalhar um pouco com matemática!!! As fórmulas que utilizaremos são as seguintes:

T C=5T F−160

9T F=

9T C+1605

Na conversão de ºC para ºF

Na conversão de ºF para ºC

Page 72: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaAssim, utilizaremos os blocos matemáticos para as conversões:• Quando pressionamos o botão 1, devemos pegar

o valor contido no TextBox2 e convertê-lo para ºC.

• Quando pressionamos o botão 2, devemos pegar o valor contido no TextBox1 e convertê-lo para ºF.

Page 73: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaVamos utilizar os blocos do menu Math para montar nossas fórmulas:

T C=5T F−160

9

Page 74: Oficina App Inventor

AppI

nven

tor

Conversor simples de TemperaturaVamos utilizar os blocos do menu Math para montar nossas fórmulas:

T F=9T C+160

5

Page 75: Oficina App Inventor

AppI

nven

tor

Conversor simples de Temperatura

Page 76: Oficina App Inventor

FIMwww.sosneuronios.com.br