Mit Inventor_1ª experiência

Programação Android

App Inventor 2

António Mansilha

Apresentação com adaptações feitas pela prof. Ana Paula Santos

antonio.mansilha@gmail.com

Caraterísticas do App Inventor

Simples e potente

Programação por blocos

(como no Scratch!)

Interface gráfico do tipo drag and drop, fácil de usar

Promove o Pensamento Computacional

Visual e intuitivo

Projetos alojados na cloud

Desenvolvimento criativo!

O que é o App Inventor?

Plataforma de desenvolvimento de aplicações para Smartfones e

Tabletes Android, do Instituto Tecnológico de Massachusetts (MIT).

Open-source, significa TOTALMENTE GRÁTIS

Objetivo: Democratizar o desenvolvimento de apps

Publicação na Internet

O que é possível fazer?

Diferentes tipos de aplicações!

Com imaginação e criatividade podemos criar:

••••

Jogos.Aplicações para a educação.Aplicações de produtividade.Aplicações que controlam robôs.

E muito mais!!!!!

Exportação do projeto de app

Permite exportar o projeto de app:

••

Formato AIA (próprio de App Inventor)Formato APK (executável Android)

Pode ser descarregado no computador e/ou

Smartfone ou Tablet Android (QR).

Por onde Começar?

Browser, Conta e Registo

••

Ferramenta baseada na cloud.Construir as app’s diretamente no web browser

(não funciona com o Internet Explorer, recomendo o Chrome, Firefox ou Safari).

O software App Inventor, ou "serviço" está disponível no site

ai2.appinventor.mit.edu.

Fazer o registo no site clicando em

Software necessário

MIT_Appinventor_Tools_2.3.0 Pacote de software necessário para quem utiliza o emulador ou a ligação por cabo USB ao telemóvel Android.

(~80 MB)

Deve, após a instalação, iniciar osoftware clicando no icon aiStarter

O que é necessário para usar o App Inventor?

Ligação estável à internet

Conta Gmail

É, ainda, importante termos:

Dispositivo Android (Smartfone e/ou Tablet)

Ligação WIFI na mesma rede que o computador

Desenvolvimento e testes

Enquanto desenvolve a app, pode e deve ir testando o seu funcionamento no

telemóvel ou emulador. As alterações feitas são imediatamente implementadas!

Desenvolvimento e testes

Desenvolver aplicações de imediato.

(A área de Designer e o Editor Blocos corre no browser.)

Permite realizar live testings. As três opções para a configuração dos live

testings são:

Ligação por Wi-fi na mesma rede.(Recomendada)

Utilização do Android Emulator.

Ligação ao telemóvel por cabo USB.

Software necessário

MIT AI2 CompanionPacote de software que deve ser instalado no smartfone ou no tablet. Só funciona corretamente se os dois dispositivos se encontrarem na mesma rede WiFi.

Passo a passo…

1º passo: Aceder ao site ai2.appinventor.mit.edu;2º Clique em Create apps!

3º Iniciar sessão com a

conta de e-mail do gmail.

Passo a passo…

4º passo: Clique em Allow;

Passo a passo…

5º passo: Ler e aceitar as condições do serviço;

Passo a passo…

6º passo: Clique em Take SurveyLater;

Passo a passo…

7º passo: Clique em Continue;

Passo a passo…

8º passo: Clique Start new project;

O meu primeiro programa

Designer –Interface do utilizador

Paleta de

componentes

Encontre e arraste o componente para sua

Botão BlocksMudar para o interface Blocks.

app.

Viewer ou ecrã da app

Arraste os componentes da paleta e veja como fica a sua

Propriedades

Selecione um componente da lista Components e altere as suas propriedades (cor, tamanho, etc…).

app.

O meu primeiro programa

O meu primeiro programa

“Escreva o seu nome:

O meu primeiro programa

“Clique aqui”

O meu primeiro programa

Agora vamos começar a “programar” os nossos blocos!!

Limpar o texto

BlocksEditor -Programação

Blocos de comandos: Encontre Blocos que lhe permitem definir a ação que

Botão DesignerMudar para o

pretende adicionar à sua app e arraste-os

para o BlockViewer.

interface Designer.

Bloco de comandos

Viewer área de trabalho para onde são arrastados os blocos de comandos.

Componentes adicionados à app no

Designer Viewer para os quais pode

adicionar comandos específicos (programar

os componentes).

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

Vamos testar a nossa app selecionando a opçãoEmulator do menu Connect.

Aprocessominutos!!!Paciência….

primeira

vezlento,

quepodendo demorar alguns

abrir

emulador, o

Se tudo correr bem,verá o ecrã do Emulador,e da sua aplicação em funcionamento (Não esqueça de iniciar os serviços de aiStarter).

O meu primeiro programa

Adicionar uma saudação ao app:

O meu primeiro programa

Vamos melhorar esta app?

Próximo passo:vamos inserir um som nesta app!!!Para isso,deve aceder à área de Designer.

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

Altere a sua app de forma a deixa-la assim:

Para adicionar ao bloco join itens (por defeito tem 2):

-Clicar na "roldana". Este símbolo aparece em todos os blocos em que é configurável o número de itens a incluir. É só arrastar os que necessita. Para terminar basta clicar novamente na "roldana".

Agora teste a sua app!!!!

O meu primeiro programa

Para uma melhor

experiência,

recomendo

uso

de

um telemóvel em substituição do emulador.

Para isso,clique em Reset Connection:

E depois em AICompanion no seu telemóvel e faça a leitura do QRCode. (Não se esqueça que têm que estar na mesma rede.

O meu primeiro programa

O meu primeiro programa

Esta foi a vossa primeira app!

Os principais constrangimentos estão ultrapassados!

Espero

ter

despertado

vosso

interesse

curiosidade pelo AppInventor.

Obrigado!