Você está na página 1de 8

CURSO APP INVENTOR

CURSO APP INVENTOR INTRODUÇÃO À PLATAFORMA APP Inventor Brasil contato.appinventorbrasil@gmail.com

INTRODUÇÃO À PLATAFORMA

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

O APP Inventor é uma plataforma para o desenvolvimento de aplicativos para celulares com o sistema operacional Android. Foi desenvolvida pelo Google, mas a partir de 2010 passou a ser continuada pelo MIT Lab. Embora já exista há cinco anos, poucos profissionais da área de informática têm conhecimento sobre o APP Inventor. O sistema está disponível no link http://ai2.appinventor.mit.edu, lembrando que para ter acesso a plataforma é necessária uma conta Google, caso já possua utilize-a no momento em que acessar APP Inventor.

Dentro da plataforma existem duas abas:

Aba designer é responsável pela construção do layout e inserção dos componentes que farão parte do seu aplicativo.

dos componentes que farão parte do seu aplicativo. Figura 01: Aba designer. Na aba Blocks é

Figura 01: Aba designer.

Na aba Blocks é feita a parte lógica e funcional do aplicativo, mas não se assuste, você não terá que aprender aqueles códigos das linguagens de programação. Toda a programação é feita com blocos que dizem o que eles realizam, funciona como um quebra-cabeça. Para nos ajudar somente blocos corretos podem ser encaixados.

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Curso APP Inventor Brasil Figura 02: Aba blocks. Na aba designer você irá encontrar quatro colunas;

Figura 02: Aba blocks.

Na aba designer você irá encontrar quatro colunas; a primeira à esquerda, chamada Palette, possui todos os componentes que podem ser utilizados dentro do programa como botões, caixas de texto, que são elementos visíveis; e câmera, gravador de áudio, que são elementos não-visíveis. No decorrer do curso vamos aprender a lidar com esses elementos.

No decorrer do curso vamos aprender a lidar com esses elementos. APP Inventor Brasil contato.appinventorbrasil@gmail.com

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 03: Palette na aba designer

A segunda coluna é uma tela que simula um dispositivo móvel, onde é possível adicionar ou remover os elementos da sua aplicação, acompanhar como os mesmos ficarão posicionados e modificá-los.

como os mesmos ficarão posicionados e modificá-los. Figura 04: Viewer Na terceira coluna são listados todos

Figura 04: Viewer

Na terceira coluna são listados todos os componentes que você inserir na sua tela atual, na mesma ordem em que foram inseridos na tela. Ainda nessa mesma coluna logo abaixo são mostrados também os arquivos de mídia externos que você pode adicionar ao projeto, basta fazer um upload para o aplicativo, veremos como fazer isso, fique tranquilo.

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Curso APP Inventor Brasil Figura 05: Components e media E por último a coluna de propriedades,

Figura 05: Components e media

E por último a coluna de propriedades, quando um elemento é selecionado na tela do simulador ou na área de componentes vista anteriormente, suas características são apresentadas nesta coluna, como: cor de fundo, largura, altura, visibilidade entre outras. As propriedades variam de elemento para elemento.

outras. As propriedades variam de elemento para elemento. Figura 06: properties Esse curso, que será de

Figura 06: properties

Esse curso, que será de nível básico, está dividido em dez tópicos, em cada um deles iremos construir passo a passo um aplicativo. O aplicativo que vamos desenvolver vai se chamar Agenda de Compromissos, mas fique à vontade para chama-lo como quiser. Ao termino do nosso curso você deverá chegar a esse resulta final.

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil Figura 07: Projeto final O projeto consistirá de uma agenda onde

Curso APP Inventor Brasil

Curso APP Inventor Brasil Figura 07: Projeto final O projeto consistirá de uma agenda onde será

Figura 07: Projeto final

O projeto consistirá de uma agenda onde será cadastrado um compromisso que poderá ser visualizado em uma outra tela da aplicação. Para o nível básico nós só vamos poder colocar um compromisso e futuramente no nível intermediário incrementaremos a aplicação com o cadastro de vários compromissos, uma notificação para lembrar o usuário e outras funções que o APP Inventor nos disponibiliza.

Como serão feito nossos testes? Existem algumas maneiras de testar o aplicativo que está sendo construído, vou citar três. 1- Emulador: você pode fazer o download e instalação de um emulador Android em seu computador, porém não adotaremos esse método aqui no curso, pois este emulador, além de um pouco pesado em pc’s mais fracos, não é fácil de ser instalado, e como nós queremos simplificar seu aprendizado esse não seria um caminho viável. 2- Através do build do seu APP: após terminar sua aplicação você pode ir ao menu conforme mostra a figura abaixo:

você pode ir ao menu conforme mostra a figura abaixo: Figura 08: build projeto Selecionando a

Figura 08: build projeto

Selecionando a opção destacada você terá um arquivo no formato .apk que poderá ser instalado em seu smartphone. Iremos utilizar esta técnica, mas não para efetuar teste durante o desenvolvimento do aplicativo, pois perderíamos muito tempo fazendo o download a cada modificação no projeto.

3- Finalmente a que iremos usar! E mais fácil de todas. O MIT criou um aplicativo (construído no próprio APP Inventor) onde é possível conectar com a plataforma do APP Inventor e acompanhar as

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

alterações em tempo real. Este aplicativo é facilmente encontrado na loja de aplicativos do Google. Basta pesquisar o seguinte nome: mit ai2 companion.

Google. Basta pesquisar o seguinte nome: mit ai2 companion. Figura 09: MIT AI2 Companion A conexão

Figura 09: MIT AI2 Companion

A conexão com a plataforma é muito simples, clique em connect no menu superior e escolha a opção AI Companion.

connect no menu superior e escolha a opção AI Companion. Figura 10: Conexão com AI2 Companion

Figura 10: Conexão com AI2 Companion

Depois será exibida uma caixa com um QR Code, onde você pode passar o scanner do próprio aplicativo ou ainda digitar os 6 caracteres que aparecem ao lado e clicar no botão amarelo, aguardar alguns segundos, e pronto: você poderá acompanhar em tempo real o seu projeto.

APP Inventor Brasil contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Curso APP Inventor Brasil Figura 11: caixa de dialogo No próximo tópico vamos começar a desenvolver

Figura 11: caixa de dialogo

No próximo tópico vamos começar a desenvolver nossa agenda, e nos aprofundaremos em todos os assuntos apresentados aqui.

APP Inventor Brasil contato.appinventorbrasil@gmail.com