Primeira Oficina de AppInventor

De MediaWiki do Campus São José
Ir para navegação Ir para pesquisar

A ideia desse primeiro aplicativo é simples, um animal sera colocado na tela do aparelho e clicando no mesmo, sera possível ouvir o som que é por ele feito. O primeiro passo deve ser escolher o animal para que a foto e o audio possam ser localizados na internet e salvos no computador utilizado.

Os Animais e Seus Sons

Primeiramente vamos definir os componentes que serão utilizados na criação do aplicativo, os componentes sitados a baixo devem ser escolhidos no “Pallet” do App inventor. A localização do mesmo já foi mostrada em um tutorial anterior. Usaremos:

  • Um Button
    And20.png
  • Uma Label
  • Um Sound
  • A imagem de um animal a sua escolha
  • O som de um animal a sua escolha

Começando a criação

Aqui se dará inicio a criação do design do aplicativo, nessa parte você tem liberdade maior para fazer as coisas do seu jeito, mas claro, com muita ponderação.

Button

Primeiro arraste o button para a área de design, depois disso, vá para a opção propriedades e procure por “Image”, ao lado ira estar escrito algo como “none”, clique e em seguida deve aparecer a opção “Upload file”. Clique na opção “Escolher arquivo” que deve ter aparecido e navegue ate o local onde a imagem do animal escolhido foi colocado e por final a selecione. Novamente nas propriedades dos button, procure por “Text” e delete o conteúdo da caixa ao lado dessa opção. Após isso use as propriedades “Height” e “Width” para redimensionar o botão para o tamanho correto.

Label

Agora vamos a segunda parte. Posicione a label a cima do button com a foto do animal e em seguida vá para as propriedades da label, lá configure as opções da seguinte maneira:

  • Na área “Text” você deve dar um nome ao animal de sua escolha.
  • Na área “FontSize” altere o tamanho do texto para um tamanho a sua escolha.
  • Na área “TextAlignment” altere para Center.
  • Por fim altere a propriedade width (Largura) para Fill parent.

Sound

Por fim selecione o áudio no pallet(note que o mesmo apareceu no inferior da tela). Clique no mesmo para seleciona-lo e em sequência vá para as suas propriedades. Lá procure pela opção “Source” e clique no espaço ao lado. Proceda como no momento em que você escolheu a imagem mas dessa vez selecione o áudio do animal escolhido.

No editor de Blocos

And21.png

Agora vem a parte que a programação realmente ocorre, o editor de blocos.É importante deixar claro que aqui você deve seguir a risca oque é dito, só modifique os códigos se tiver total consciência do que vai fazer. Clique no botão ao canto direito da tela, como já foi explicado em outro relatório. No editor de blocos, selecione o button e em seguida procure a opção “Button1.click”. arraste essa opção para a área em branco (a direita). Agora clique no sound e procure a opção “sound1.play”, quando a achar, arraste-a para dentro do “Button1.click” e solte. Por fim salve o aplicativo em forma de APK e seu animalzinho de estimação esta pronto. Para testa-lo, basta usar uma maquina virtual.