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 -