App Inventor

uma breve introduo Rui Campos

Sistemas de Computao Mvel Mestrado em Eng. Computao e Instrumentao Mdica

novembro 2010

Android
Projecto liderado pela Google OS open-source para dispositivos mveis Involve conjunto vasto de stakeholders
HTC, Samsung, Motorola, T-Mobile,

Principais concorrentes:
Windows Phone 7, iPhone OS, Symbian OS

2010/2011

Sistemas de Computao Mvel

App Inventor
Desenvolvimento de aplicaes mveis para todos
criao de aplicaes s/ conhecimentos de programao programao orientada ao encaixe de blocos blocos funcionam como peas de um puzzle

Desenvolvimento baseado em trs ferramentas

Designer, Blocks Editor e Emulador funcionam de forma integrada
2010/2011 Sistemas de Computao Mvel 3

As trs ferramentas
Designer

Blocks Editor

Emulador

2010/2011

Sistemas de Computao Mvel

Designer

Permite definir o Layout da aplicao

2010/2011 Sistemas de Computao Mvel 5

Blocks Editor

Permite definir o funcionamento da aplicao

2010/2011 Sistemas de Computao Mvel 6

Emulador

Permite o teste de aplicaes s/ dispositivo mvel

2010/2011 Sistemas de Computao Mvel 7

Emulador
Permite o teste de aplicaes de duas formas:
em tempo real
medida que vamos criando a aplicao necessria interligao com o Blocks Editor
(clicar em Connect to Phone no Blocks Editor)

mediante instalao no Emulador

necessria invocao de comando de instalao
2010/2011 Sistemas de Computao Mvel 8

Emulador
Instalao de uma aplicao:
no Designer
clicar em Package for Phone seleccionar Download to this Computer
gerado um ficheiro .apk Nota: Blocks Editor tem que estar aberto

na Linha de Comandos instalar o ficheiro .apk no emulador > adb install r <nome-do-ficheiro-apk> iniciar a aplicao atravs do menu do Emulador
2010/2011 Sistemas de Computao Mvel 9

Emulador
Desinstalao de uma aplicao:
na Linha de Comandos
invocar os comandos seguintes: > adb shell > cd /data/app > ls ; mostra todos os ficheiros .apk instalados no emulador

> rm <nome-do-ficheiro-a-remover> > exit

2010/2011

Sistemas de Computao Mvel

10

Aplicao Exemplo
Quando for premido o boto
imprime string relativa checkbox seleccionada

2010/2011

Sistemas de Computao Mvel

11

Aplicao Exemplo
(Designer)

Passos:
1. 2. 3. 4. Criar um novo projecto Abrir o Blocks Editor Inicialmente temos apenas o componente Screen1
em Properties podemos mudar, por exemplo, o seu ttulo

Adicionar os componentes da nossa aplicao

da paleta do lado esquerdo arrastamos
um boto, duas checkboxes e duas labels

2010/2011

Sistemas de Computao Mvel

12

Aplicao Exemplo
Passos (cont.):
5. Renomear identificadores dos componentes
em Components, podemos alterar nome dos componentes

6.

Propriedades de cada componente

em Properties podemos modificar propriedades componente actual
e.g., o nosso boto ter escrita a palavra Print e as labels estaro

inicialmente invisveis

Definidos os componentes da aplicao passamos definio do seu funcionamento

2010/2011 Sistemas de Computao Mvel 13

Aplicao Exemplo
(Blocks Editor)
Objectivo: definio do funcionamento quando premido o boto Print

Passos:
1. Seleccionar o objecto printButton.Click 2. Dentro deste objecto encaixamos os blocos que definem o funcionamento da aplicao:
boto premido?

mostra label correspondente checkbox seleccionada

2010/2011 Sistemas de Computao Mvel 14

Aplicao Exemplo
Definido o funcionamento da aplicao
passamos ao teste no emulador

Passos:
(ver slide 9)

2010/2011

Sistemas de Computao Mvel

15

Acesso ao App Inventor

Criar/ter uma conta Google Requerer acesso atravs do link:
https://services.google.com/fb/forms/appinventorinterest

2010/2011

Sistemas de Computao Mvel

16

Links teis
http://appinventor.googlelabs.com/about/index.html http://appinventor.googlelabs.com/learn

http://www.appinventor.org

2010/2011

Sistemas de Computao Mvel

17

Iniciar o Emulador
start_emulator na pasta appinventor-extras
pode demorar alguns minutos a iniciar

Fazer Unlock arrastando o cadeado para a direita

2010/2011

Sistemas de Computao Mvel

18