Workshop MIT app Inventor

WorkshopMIT app inventor

Miguel [email protected]

João [email protected]

Outubro de 2015

Programar por blocosAntes de começarmos, se nunca programou por blocos, aceda a https://blockly-games.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.0Aceda 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ã dotelemóvel um objeto tipo “Button” e outro dotipo “Label”

Altere as propriedade do ecrã de modo a que os objetosfiquem 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 TextLabel coloque um “0”

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

- 3 -

Programação:

Passe para o modo de programação

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

Selecione agora a “Label1” e complete aprogramaçã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, Vamosligar 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 nocomputador.

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

Se tudo correu bem deverá ter agora a aplicaçãoa 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úmerosPara ouvirmos ler os números representados vamos juntar umrecurso “TextToSpeepch” ao nosso projeto.

- 5 -

Volte para o modo Designer e arraste para o projetoum recurso do tipo “TextToSpeepch” queencontrará 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 deprogramaçã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 tudocorreu bem, deverá ouvir a contagem....

Agitar para voltar a zero...Volte ao modo “Designer” e junte o recurso“AccelorometerSensor” que ficará na zona dosrecursos não visíveis.

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

Tente agora agitar o telefone e verifique

- 6 -

se o contador volta a zero. Caso não funcione tenteaumentar a sensibilidade do Acelerómetro naspropriedades do objeto, no modo “Designer”

Juntar outra línguaVamos agora juntar dois botões para que o programafuncione em duas línguas diferentes.

Para que os botões fiquem lado a lado utilize um objetodo tipo “HorizontalArrangement” que encontra no grupoLayout. De seguida arraste dois botões para dentro desseobjeto 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 quedeverá funcionar em ambasas 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 imagenscorrespondentes às bandeiras de Portugal e Inglaterrae guarde-as no seu computador com os nomes“pt.jpg” e “ing.jpg” respectivamente.

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

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 blocosseguintes:

- 8 -

Teste de novo o seuprograma...

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 -