Mit Inventor_1ª experiência

antonio.mansilha@gmail.com

António Mansilha

App Inventor 2

Programação Android

Curso:

Desenvolvimento criativo!

Projetos alojados na cloud

Visual e intuitivo

Promove o Pensamento Computacional

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

(como no Scratch!)

Programação por blocos

Simples e potente

Caraterísticas do App Inventor

Objetivo: Democratizar o desenvolvimento de apps

Open-source TOTALMENTE GRÁTIS

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

Plataforma de desenvolvimento de aplicações para Smartfones e

O que é o App Inventor?

Publicação na Internet

E muito mais!!!!!

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

••••

Com imaginação e criatividade podemos criar:

Diferentes tipos de aplicações!

O que é possível fazer?

Smartfone ou Tablet Android (QR).

Pode ser descarregado no computador e/ou

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

••

Permite exportar o projeto de app:

Exportação do projeto de app

Fazer o registo no site clicando em

ai2.appinventor.mit.edu.

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

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

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

••

Browser, Conta e Registo

Por onde Começar?

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

(~80 MB)

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.

Software necessário

Ligação WIFI na mesma rede que o computador

Dispositivo Android (Smartfone e/ou Tablet)

É, ainda, importante termos:

Conta Gmail

Ligação estável à internet

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

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

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

Desenvolvimento e testes

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

Utilização do Android Emulator.

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

testings são:

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

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

Desenvolver aplicações de imediato.

Desenvolvimento e testes

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.

Software necessário

conta de e-mail do gmail.

3º Iniciar sessão com a

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

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…

app.

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

Propriedades

Arraste os componentes da paleta e veja como fica a sua

Viewer ou ecrã da app

app.

Botão BlocksMudar para o interface Blocks.

Encontre e arraste o componente para sua

componentes

Paleta de

Designer –Interface do utilizador

6º passo: Clique em Take SurveyLater;

Passo a passo…

7º passo: Clique em Continue;

Passo a passo…

8º passo: Clique Start new project;

Passo a passo…

os componentes).

adicionar comandos específicos (programar

Designer Viewer para os quais pode

Componentes adicionados à app no

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

Bloco de comandos

interface Designer.

para o BlockViewer.

pretende adicionar à sua app e arraste-os

Botão DesignerMudar para o

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

BlocksEditor -Programação

O meu primeiro programa

O meu primeiro programa

“Escreva o seu nome:

O meu primeiro programa

“Clique aqui”

O meu primeiro programa

Limpar o texto

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

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

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).

emulador, o

abrir

quepodendo demorar alguns

vezlento,

primeira

Aprocessominutos!!!Paciência….

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

O meu primeiro programa

Adicionar uma saudação ao app:

O meu primeiro programa

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

Vamos melhorar esta app?

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

O meu primeiro programa

Agora teste a sua app!!!!

-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".

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

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

O meu primeiro programa

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.

Para isso,clique em Reset Connection:

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

de

uso

recomendo

experiência,

Para uma melhor

O meu primeiro programa

O meu primeiro programa

Obrigado!

curiosidade pelo AppInventor.

interesse

vosso

despertado

ter

Espero

Os principais constrangimentos estão ultrapassados!

Esta foi a vossa primeira app!

O meu primeiro programa