Como Criar Um Aplicativo Android - [ Criando o Primeiro APP - Parte 1 ]

Este tutorial iremos começar a criar seu primeiro aplicativo: Uma foto de um gatinho que mia quando você acariciá-lo. Você também pode assistir a um vídeo e este aplicativo ser construído. Quando você terminar de construir Purr Olá, você estará pronto para projetar e construir aplicativos em seu próprio país. Antes de começar, certifique-se que você configurar seu computador .

Como você pode construir o app Olá Purr você vai aprender como as três principais ferramentas de trabalho do App Inventor:

• O Designer , o lugar onde você projetar sua aplicação. Ele é executado em seu navegador.
• O Editor de Blocos , o lugar onde você definir o comportamento do aplicativo. É uma aplicação separada com sua própria janela.
• O telefone , conectado ao computador através de um cabo USB.

Para construir Purr Olá você vai precisar de uma imagem do gatinho e também um som miado. Baixar estes arquivos para o computador:

• Kitty imagem
• som meow

DICA:

Caso não tenha visto o tutorial de como Configurar APP Inventor, antes de proceguir leia o nosso tutorial aqui, para que possa configurar corretamente o seu APP Inventor em sua maquina.

Inicie o Designer e criar um novo projeto

Em seu navegador, acesse o site da App Inventor no http://appinventor.mit.edu . Se esta é a primeira vez que usei App Inventor, você verá a página de Projetos, sem projetos nele ainda. Deve olhar como este:

Criar um novo projeto

1. Clique Novo no lado esquerdo, na parte superior da página.
2. Digite o nome do projeto HelloPurr (uma palavra, sem espaços) na caixa de diálogo que aparece, clique em OK.

O navegador irá abrir o Designer , o lugar onde você seleciona componentes para o seu aplicativo, e deve ficar assim:

Selecione os componentes para projetar seu aplicativo

App Inventor componentes estão localizados no lado esquerdo do ecrã Designer sob o título paleta . Os componentes são os elementos básicos que você usa para fazer aplicações no telefone Android. Eles são como os ingredientes em uma receita. Alguns componentes são muito simples, como uma etiqueta componente, o que só mostra o texto na tela, ou um botão componente que você toque para iniciar uma ação. Outros componentes são mais elaborado: um desenho de lona que pode conter imagens estáticas ou animações, um acelerômetro (movimento) sensor que funciona como um controlador de Wii e detecta quando você mover ou agitar o telefone, os componentes que fazem ou enviar mensagens de texto, os componentes que tocam música e vídeo, componentes que recebem informações de sites da Web, e assim por diante.

Para usar um componente em seu aplicativo, você precisa clicar e arrastá-lo para o espectador no meio do Designer. Quando você adiciona um componente para o espectador, que também irá aparecer na lista de componentes no lado direito do espectador.

Componentes têm propriedades que podem ser ajustadas para alterar a forma como o componente aparece dentro do aplicativo.Para ver e alterar as propriedades de um componente, você deve primeiro selecionar o componente desejado na lista de componentes.

Passos para a seleção dos componentes e definindo suas propriedades

Queremos HelloPurr ter um botão componente que tem a propriedade de imagem definido para o arquivo que você baixou anteriormente kitty.png. Para definir esta:

1. Arraste e solte o botão componente para Tela1 . O botão componente está localizado na seção Básico da Paleta.
2. Na lista de propriedades, em Imagem, clique em nenhum ...
3. Clique Adicionar ...
4. Selecione o arquivo a kitty.png você baixou anteriormente.
5. Excluir Texto para Button1 listadas sob o Texto propriedade usando a tecla Backspace.

Sua Designer deve ficar assim:

Abra o Editor de Blocos e ligar para o emulador

O Designer é uma das três principais ferramentas que você vai usar na criação de seus aplicativos. O segundo é o Editor de Blocos . Você vai usar o Editor de Blocos para atribuir comportamentos de seus componentes, como o que deve acontecer quando o usuário do seu aplicativo bate um botão.

O Editor de Blocos é executado em uma janela separada. Quando você clica em Abra o editor de blocos a partir da janela de designer, os blocos de arquivo de programa Editor deve baixar e executar. Este processo pode levar 30 segundos ou mais. Se nunca o Editor de Blocos abre, pode ser porque o seu navegador não está configurado para executar aplicativos Java baixado automaticamente. Neste caso, procure o arquivo baixado chamado AppInventorForAndroidCodeblocks.jnlp e abri-lo. A janela Editor de Blocos deve olhar como mostrado abaixo, com "gavetas" para os blocos do programa para a esquerda, e um grande vazio "tela" de espaço para a colocação de blocos de montar o programa, que você vai fazer a seguir.

Antes de continuar a construir o aplicativo, você precisa iniciar o emulador. Clique no emulador Novo botão na parte superior da janela. Você receberá um aviso dizendo que o emulador está começando, e pedir-lhe para ser paciente: a partir do emulador pode levar um par de minutos. O emulador será inicialmente aparecer com uma tela vazia preto. Aguarde até que o emulador está pronto, com um fundo de tela colorida como mostrado abaixo. Mesmo depois que o fundo aparece, você deve esperar até que o telefone emulado terminou a preparar o seu cartão SD: haverá um aviso no topo da tela do telefone, enquanto o cartão está sendo preparado. Você também pode precisar usar o mouse na tela do telefone emulado para desbloquear o dispositivo, arrastando o botão de bloqueio verde para a direita.

Quando o emulador está finalmente pronto, clique no Conectar ao dispositivo ... botão, selecione o emulador na lista suspensa e clique nele. Você vai ver um movimento seta amarela animado e para trás, mostrando que o App Inventor é ligar para o telefone emulado. Criando essa conexão pode levar um ou dois minutos. Quando tudo é feito, a seta irá parar de se mover e ficar verde, e se você olhar para a tela do telefone emulado, você vai ver o gatinho lá.

Caso esse tutorial te ajudou, demostre seu agradecimento e nos ajude, basta clicar me uns dos botão abaixo, no Like, Tweet ou no +1 que iremos agradecer. Obrigado.

Fonte: AppInventor