Uma aplicação desenvolvida em MIT app inventor

Workshop MIT app inventor

Miguel Figueiredo miguel.figueiredo@ese.ips.pt Jo達o Torres joao.torres@ese.ips.pt

Outubro de 2015

Programar por blocos Antes de começarmos, se nunca programou por blocos, aceda a https://blocklygames.appspot.com/puzzle e complete o puzzle...

Viu como é fácil? Vamos então criar a nossa primeira aplicação para telemóveis!

Aplicação contagem 1.0 Aceda a http://ai2.appinventor.mit.edu/ Depois de fornecer a senha google deverá chegar a:

Aceda a “Projects” e escolha a opçõa “Start a new project”

Atribua um nome ao seu projeto

-2-

Arraste para a representação do ecrã do telemóvel um objeto tipo “Button” e outro do tipo “Label”

Altere as propriedade do ecrã de modo a que os objetos fiquem centrados horizontal e verticalmente Altere também a cor de fundo do ecrã para cinza claro.

Altere o tamanho da letra da Label para 80 e em Text Label coloque um “0”

Altere o nome do botão para contagem e o texto sobre o botão para “pressione-me!”

-3-

Programação: Passe para o modo de programação

Seleccione o botão “Contagem” e arraste o bloco de comandos “Wen contagem.click” para a área de programação

Selecione agora a “Label1” e complete a programação conforme a figura ao lado.

Procure os blocos necessários em “Math” Esta linha de programação irá somar o valor 1 ao valor que estiver representado na Label 1. Assim, cada vez que premirmos o botão estaremos a incrementar o número representado na Label 1, Vamos ligar o telemóvel e testar!

Ligação do telemóvel Vamos agora ligar o telemóvel para testar a aplicação. Instale no seu telemóvel a aplicação MIT “App Inventor 2 Companion”

-4-

Abra a aplicação e, no computador, aceda à opção “Al Companion”

Deverá aparecer um ecrã com um QR code.

No telemóvel, escolha a opção “Scan QR Code” e aponte o telemóvel para QR code exibido no computador.

Em alternativa (caso o seu telemóvel não tenha máquina fotográfica) pode escrever o código de seis dígitos escrito ao lado do código.

Se tudo correu bem deverá ter agora a aplicação a correr no seu telemóvel.

Tente pressionar o botão e veja como vão surgindo sequencialmente os número na Label 1.

Leitura dos números Para ouvirmos ler os números representados vamos juntar um recurso “TextToSpeepch” ao nosso projeto.

-5-

Volte para o modo Designer e arraste para o projeto um recurso do tipo “TextToSpeepch” que encontrará na secção “Media”.

Trata-se de um elemento não visível, pelo que ficará no fundo do ecrã...

Passe novamente para o modo de programação “Blocks” .

Selecionando o objeto “TextToSpeepch” arraste o comando “call TextToSpeepch.

Speak” conforme a figura e depois junte o comando “Label1.Text” que encontrará selecionando o objeto Label1.

Teste de novo o programa no telemóvel, se tudo correu bem, deverá ouvir a contagem....

Agitar para voltar a zero...

Volte ao modo “Designer” e junte o recurso “AccelorometerSensor” que ficará na zona dos recursos não visíveis.

Passe para o modo de programação e arraste os blocos seguintes.

Tente agora agitar o telefone e verifique -6-

se o contador volta a zero. Caso não funcione tente aumentar a sensibilidade do Acelerómetro nas propriedades do objeto, no modo “Designer”

Juntar outra língua Vamos agora juntar dois botões para que o programa funcione em duas línguas diferentes.

Para que os botões fiquem lado a lado utilize um objeto do tipo “HorizontalArrangement” que encontra no grupo Layout. De seguida arraste dois botões para dentro desse objeto que deverão ficar lado a lado, como na figura.

Altere o texto do primeiro botão para Português e do segundo para Inglês.

Altere agora o nome dos botões pata “bt_pt” e “bt_ing” respectivamente e a cor de fundo

“BackgroundColor” para verde e cinza escuro, respectivamente.

Passe agora para o modo de programação e junte o código seguinte:

-7-

Teste agora o programa que deverá funcionar em ambas as línguas!

Juntar a bandeira e informação para agitar para voltar a zero No modo “Designer” junte um recurso do tipo “Image” ao seu projecto. Procure na internet imagens correspondentes às bandeiras de Portugal e Inglaterra e guarde-as no seu computador com os nomes “pt.jpg” e “ing.jpg” respectivamente.

Carrege as imagens para o seu projecto (Botão Upload).

Altere o nome do objecto “image” para “Bandeira”.

Altere também a sua largura “Width” e altura Height para 150 pixels. Em Picture escolha o ficheiro “pt.jpg” que já deverá estar carregado no projecto.

Passe para o modo de programação e junte os blocos seguintes:

-8-

Teste de novo o seu programa...

Juntar a frase “Agitar para voltar a zero” e botão “Sair” Para que o utilizador saiba esta informação vamos criar mais uma Label com esta informação que, obviamente deverá também estar traduzida em ambas as línguas. Chamaremos a esta label “info”.

Esta mensagem também será traduzida cada vez que passarmos para o funcionamento em inglês.

Podemos ainda juntar um botão “Sair”, que permita fechar a aplicação e chamaremos a este botão “sair”. Este botão não funcionará no modo emulador, mas sim quando a aplicação for corrida de modo autónomo Depois de juntar estes dois elementos o código final ficará

-9-

Se tudo funcionar corretamente pode agora gravar a aplicação no seu computador num ficheiro .apk Esse ficheiro poderá ser instalado autonomanente num telemóvel ou tablet androide!

Parabéns, criou a sua primeira aplicação!

- 10 -