Aprenda a fazer seu primeiro app!

Celulares são uma parte muito importante da nossa vida e a cada dia um aplicativo novo é criado. Eles existem para todos os gostos, mas sempre acabam tendo algum aspecto que você acha que poderia ser diferente. E se você pudesse fazer o seu próprio aplicativo?!

Isso é totalmente possível, mesmo que você nunca tenha visto programação na vida!

A Google com o apoio do MIT(Massachusetts Institute of Technology) desenvolveram o AppInventor, um software online que possibilita a criação de aplicativos para quem nunca teve contato na área.

A interface do AppInventor tenta ser a mais intuitiva possível, além disso ela é divida em 2 partes.

  1. Design do aplicativo:
  2. Programação em blocos:

Mas vamos começar com algo mais básico… Entrem no site e vamos criar o nosso primeiro aplicativo. Podemos ver no lado esquerdo da tela, após aberto o projeto novo, que temos uma variedade de componentes para utilizarmos.

Para utilizar algum destes componentes, você só precisa clicar e arrastar ele até a tela do celular no meio da página.

Então vamos puxar os seguintes componentes:

  • Uma legenda
  • Uma imagem
  • Um botão

E a sua tela deve ficar assim:


Como vocês podem ver, por enquanto o nosso aplicativo não está muito bonito. Para melhorar a cara dele, podemos deixar o texto que usaremos pegando a tela inteira, assim como o botão. Para isso, clique na legenda e vá na parte chamada Propriedades.

 

Vamos alterar a largura para ela preencher a nossa tela

E depois disso vamos alterar o Texto dele para “Meu primeiro aplicativo”.

Faça a mesma coisa no botão e altere o texto dele para “Som”. Perceba que agora o nosso aplicativo está ganhando uma cara melhor, mas ainda falta colocar alguma coisa na imagem que adicionamos, não é? Então escolha uma imagem da internet, clique no componente imagem e vá na seguinte opção:

Como vocês já devem ter percebido o nosso aplicativo irá tocar um som ao clicarmos no botão, mas para isso precisamos de um componente de som, assim o programa pode saber o que utilizaremos.

Então iremos arrastar o seguinte componente para o nosso celular.

Deixando o nosso aplicativo assim:

Agora encontre um som que você gostaria que o seu aplicativo tocasse e vamos fazer o upload dele, clicando aqui:

Essa opção, está logo abaixo dos Componentes.
(Dica: A melhor extensão para adicionarmos um som no AppInventor é o “.wav”.)

Após esse passo, a parte do design está pronta e precisamos ir para a programação. No canto direito da tela mudaremos a opção da edição:

Agora temos uma interface completamente diferente, vamos entender um pouco dela.

Em vermelho temos as categorias onde estão divididos os nossos “blocos” de programação e em azul a nossa área de trabalho. Além de você poder escolher os blocos procurando-os pelas categorias, o AppInventor permite a pesquisa (clicando no visualizador e começando a digitar). Escolha o melhor caminho para você.

Precisamos falar que quando clicarmos no botão, ele deve vibrar e tocar um som, então precisamos do evento “Quando Botão1 clicado”:

A opção de vibrar o celular e tocar o som que adicionamos estão na opção “Som1”.

Então, arraste as duas e conecte-as ao bloco que pegamos anteriormente.

Agora precisamos complementar o bloco de vibrar, pois ele precisa saber por quanto irá vibrar. Vá na categoria “Matemática” e pegue o primeiro bloco, conectando-o assim:

E não esqueça de alterar este “0” para “1”.

No entanto, se testarmos o nosso aplicativo, ele ainda não vai estar tocando o som que escolhemos, pois o componente Som1 não sabe o que deve tocar. Para isso, volte na tela de Design e clique neste componente:

Escolha o som que você adicionou no começo do projeto e clique em “OK”.

Pronto, nosso primeiro aplicativo está finalizado, agora só precisamos testá-lo. Você pode baixar esse aplicativo em qualquer dispositivo Android!

Ao instalar, vá ao seu programa e você encontrará duas opções:

  • Visualizar o aplicativo conforme você o desenvolve (não instala o aplicativo no seu celular).

Fazer o download e instalação do seu aplicativo no celular.

Escolha a opção que preferir e no MIT AI2 Companion clique na seguinte opção:

Agora você só precisa scannear o QR Code que aparece no AppInventor e pronto, pode testar o seu primeiro aplicativo! Quer aprender mais funcionalidades do AppInventor e criar diversos novos apps?! Conheça mais sobre nosso curso.