App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App...

18
App Inventor uma breve introdução Rui Campos Sistemas de Computação Móvel Mestrado em Eng. Computação e Instrumentação Médica novembro 2010

Transcript of App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App...

Page 1: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

App Inventoruma breve introdução

Rui CamposSistemas de Computação Móvel

Mestrado em Eng. Computação e Instrumentação Médica

novembro 2010

Page 2: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Android

• Projecto liderado pela Google

• OS open-source para dispositivos móveis

• Involve conjunto vasto de stakeholders

– HTC, Samsung, Motorola, T-Mobile, …

• Principais concorrentes:

– Windows Phone 7, iPhone OS, Symbian OS

2010/2011 Sistemas de Computação Móvel 2

Page 3: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

App Inventor

• Desenvolvimento de aplicações móveis para todos

– criação de aplicações s/ conhecimentos de programação

– programação orientada ao “encaixe” de blocos

• blocos funcionam como peças de um puzzle

• Desenvolvimento baseado em três ferramentas …

– Designer, Blocks Editor e Emulador

– funcionam de forma integrada

2010/2011 Sistemas de Computação Móvel 3

Page 4: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

As três ferramentas …

2010/2011 Sistemas de Computação Móvel 4

Designer

Blocks Editor

Emulador

Page 5: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Designer

Permite definir o Layout da aplicação

2010/2011 Sistemas de Computação Móvel 5

Page 6: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Blocks Editor

Permite definir o funcionamento da aplicação

2010/2011 Sistemas de Computação Móvel 6

Page 7: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Emulador

Permite o teste de aplicações s/ dispositivo móvel

2010/2011 Sistemas de Computação Móvel 7

Page 8: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Emulador

Permite o teste de aplicações de duas formas:

– em tempo real …

• à medida que vamos criando a aplicação

• necessária interligação com o Blocks Editor

(clicar em “Connect to Phone” no Blocks Editor)

– mediante instalação no Emulador

• necessária invocação de comando de instalação

2010/2011 Sistemas de Computação Móvel 8

Page 9: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

EmuladorInstalação de uma aplicação:

– 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 aplicação através do menu do Emulador

2010/2011 Sistemas de Computação Móvel 9

Page 10: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Emulador

Desinstalação de uma aplicação:

– 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 Computação Móvel 10

Page 11: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Aplicação Exemplo

• Quando for premido o botão

– imprime string relativa à checkbox

seleccionada

2010/2011 Sistemas de Computação Móvel 11

Page 12: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Aplicação Exemplo

(Designer)

Passos:

1. Criar um novo projecto

2. Abrir o Blocks Editor

3. Inicialmente temos apenas o componente Screen1

– em Properties podemos mudar, por exemplo, o seu título

4. Adicionar os componentes da nossa aplicação

– da paleta do lado esquerdo arrastamos …

um botão, duas checkboxes e duas labels

2010/2011 Sistemas de Computação Móvel 12

Page 13: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Aplicação ExemploPassos (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 botão terá escrita a palavra “Print” e as labels estarão

inicialmente invisíveis

Definidos os componentes da aplicação …

passamos à definição do seu funcionamento

2010/2011 Sistemas de Computação Móvel 13

Page 14: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Aplicação Exemplo(Blocks Editor)

Objectivo: definição do funcionamento quando é premido o botão “Print”

Passos:

1. Seleccionar o objecto printButton.Click

2. Dentro deste objecto “encaixamos” os blocos que

definem o funcionamento da aplicação:

botão premido?

mostra label correspondente à checkbox seleccionada

2010/2011 Sistemas de Computação Móvel 14

Page 15: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Aplicação Exemplo

Definido o funcionamento da aplicação …

passamos ao teste no emulador

Passos:

(ver slide 9)

2010/2011 Sistemas de Computação Móvel 15

Page 16: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Acesso ao App Inventor

• Criar/ter uma conta Google

• Requerer acesso através do link:

https://services.google.com/fb/forms/appinventorinterest

2010/2011 Sistemas de Computação Móvel 16

Page 17: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

Links úteis

http://appinventor.googlelabs.com/about/index.html

http://appinventor.googlelabs.com/learn

http://www.appinventor.org

2010/2011 Sistemas de Computação Móvel 17

Page 18: App Inventor - INESC TECtelecom.inesctec.pt/~rcampos/App-Inventor-uma-breve-introducao.pdf · App Inventor •Desenvolvimento de aplicações móveis para todos –criação de aplicações

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 Computação Móvel 18