appinventor aula01

7/17/2019 Appinventor Aula01

1/71

Desenvolvendo aplicativos Androidfacilmente com o MIT App Inventor

Prof. Srgio Souza Costa

Dia 1. Conhecendo o ambiente e seus principaiscomponentes


2/71

O que o App Inventor ?


3/71

Um ambiente de desenvolvimentona Web, originalmente criado no

Google Labs, mas atualmentepertence ao MIT Labs. Tem como

objetivo facilitar o desenvolvimento

de Aplicativos para Android.


4/71

O Desenvolvimento de aplicativosAndroid requer um conhecimentoda plataforma Java, do paradigma

orientado a Objetos. Tornandodficil o desenvolvimento de um

App por no desenvolvedores.


5/71

O App Inventor permitedesenvolver aplicativos Android

sem o conhecimento destesconceitos.


6/71

Por que to fcil?

Nenhuma sintaxe.A linguagem de blocos elimina a necessidadede lembrar e digitar cdigo

Tudo est bem na frente de vocs. Componentes e funes estoem gavetas. Basta encontrar, arrastar e soltar.

Componentes de alto nvel. O app inventor tem uma grandebiblioteca.

Plug-in.Voc no pode fazer coisas que no fazem sentido.

Concreto.Menos abstrato do que muitas linguagens.

Na Web, caso tenha um celular Android, no vai precisar instalarnada no seu computador.


7/71

O que podemos criar?

Aplicativos educacionais Com vdeos, imagens, texto-para-voz

Aplicativos de localizao

Jogos

Controladores de Rob

Aplicativos para a Web Aplicativos pessoais


8/71

O que no podemos criar?

App Inventor no um substituto para a linguagem deprogramao de aplicativos para o Android.

No uma ferramenta para criar jogos e aplicativos comerciais.

No possvel criar jogos como Angry Birds ou aplicativos

complexos como o Firefox Mobile, e as aplicaes criadas estolonge de ser bonitas. Elas so, no entanto, funcionais.


9/71

At o final da aula de

hoje, seremos capazesde fazer um app simples

que caclcula o IMC


10/71

OK. E como comeo ?


11/71

Primeiro projeto

1. Crie uma conta de e-mail do gmail (utilize onavegador Firefox ou Chrome).

2. Entre na sua conta do gmail.

3. Adicione uma nova aba no navegador.

4. Digite o seguinte endereo: http://appinventor.mit.edu/explore/
http://appinventor.mit.edu/explore/


12/71

Primeiro projeto

Clique em

Create


13/71

Voc pode acessar o App Inventordiretamente, navegando aoendereo http://ai2.appinventor.mit.edu/
http://ai2.appinventor.mit.edu/http://ai2.appinventor.mit.edu/


14/71

Selecioneseu e-mail

Clique emAllow

Primeiro projeto


15/71

Clique em

Continue

Primeiro projeto


16/71

Se for a primeira vez que usa o App Inventor,voc ver a pgina de Projetos

Primeiro projeto


17/71

Primeiro projeto

Para criar um projeto, clique em NewProject na parte superior esquerda da pgina Digite o nome do projeto OlaKitty" (sem espaos)

e clique em OK


18/71

Primeiro projeto

A primeira janela que se abre o ComponentDesigner

Component Designer


19/71

Divididaem 4

colunasComponent designer


20/71

Component designer


21/71

O Viewer (Visualizador)permite o usurio

organizar cada um de seusobjetos, montando oaplicativo como ele deveser. Uma janela deexibio simula a tela deum smartphone com osistema operacionalAndroid.

Component designer - Viewer


22/71

Component designer - Palette


23/71

Na Palette (Paleta), onde ficam todos oscomponentes utilizveis num aplicativo. Estapaleta dividida em sees para facilitar a

localizao dos componentes, que vo dosbsicos (botes, imagens e textos)

Component designer -Palette

Para utilizar um desses componentes bastaclicar sobre ele e arrastar para cima da

coluna, chamada Viewer (Visualizador).

Nem todos os componentes da paleta sovisveis, por exemplo os utilizados paramanipular e acessar recursos do celular, comoweb, sensores ...


24/71

Atividade: Arraste os seguintecomponentes para o visualizador:textBox, Button e Label


25/71

Component designer - Components


26/71

Nesta coluna ficam armazenados todos

os itens adicionados, sejam eles visveisou no na tela do programa.

Feito a atividade anterior, teramos trscomponentes, agrupados na tela (screen1).

Aqui podemos tambm renomear ou deletaros componentes

Clicar sobre qualquer um dos itens da lista na colunaComponents permite que voc possa editar seus

detalhes na quarta coluna, chamada de Properties

(Propriedades).

Component designer - Components


27/71

Component designer - Properties


28/71

Propriedades so tipicamente associadascom componentes em um aplicativo, comoButton, TextBox e Canvas .

Para um aplicativo, cada componente

completamente definido por um conjuntode propriedades

Ela permite definir os tamanhos econtedos dos textos de botes e caixas de

informao, tamanho das imagens, cores defundo e largura e altura de objetos.



29/71

Atividade: click no componente Label1 eatere suas seguintes propriedades:Aumente sua fonte (fontsize)Apague o texto na propriedade text.



30/71

As propriedadesde diversos componentes de m aplicativopodem ser alteradas no momento da execuo.

Para isso existe aesque mudam as propriedades dosobjetos, como o texto, a cor, o tamanho.

Propriedadese aes


31/71

Onde encontramos estasaes ?


32/71

Voc encontrar as aes no blockdesigner, onde toda programaoocorre.


33/71

Clique emBlocks

Block Designer


34/71

Block DesignerDividida

em 2colunas


35/71

Block Designer - Blocks


36/71


Aqui esto dispostos os diversosblocos utilizados para aprogramao. Em Built-in(Internos) blocos para comandos

mais gerais, como operaeslogicas, matemticas e de controle.Em Screen1 (Tela1) tem todos osobjetos que voc inseriu em seuprograma. As aes para cadaobjeto sero encontradas aqui.


37/71


Ao que altera otexto mostrado emlabel1

Ao que altera otamanho da font deLabel1


38/71


Em computao comum chamar as aesque retorna uma propriedade de getters, esetters as aes que alteram uma propriedade.

Exemplo de um getter

Exemplo de um setter


39/71

Ok. Mas como estas aesso inicializadas ?


40/71

Alm das aes, os objetos temtambm eventos. Um aplicativobasicamente executa aes quandoocorre algum evento.


41/71

O comportamento de um aplicativo definidopor um conjunto de manipuladores deeventos

Cada manipulador de eventos executa funesespecficas em resposta a um acontecimentoparticular

Eventos


42/71

Eventos

Um click em um boto umexemplo de um evento iniciadopelo usurio. Contudo, existemoutros tipos de eventos:

1. Timer events,2. Sensor events,3. Phone events,

4. Animation events,5. Web events,6. App (Screen) launch events.


43/71

Conceito Chave

eventos + aes

Quando ocorrer um determinado evento,execute uma dada ao.


44/71

Exemplo de eventos

Exemplo de aes

Eventos + aes


45/71

Ok. J posso tentarcomear a programar.


46/71

App bem simples. O usurio vaidigitar o seu nome (ex. Joao) na textbox, clicar no boto e ento sermostrado a seguinte mensagem:Ola Joao.


47/71

Voltando ao editor de blocos ...


48/71

1. Seleciona ocomponente Button1.

2. Arraste o eventoWhen Button1. click para o visualizador de

blocos.

Programando o comportamento


49/71


3. Seleciona ocomponente Label.

4. Arraste a ao setLabel1.text para ovisualizador de blocosdentro do eventoanterior.


50/71

Voc precisar ter os blocosagrupados da seguintemaneira.


51/71

A mensagem a ser exibidaem label1 deve ser Ola + onome digitado.


52/71

Ou seja, precisaremosjuntar estes dois textos.


53/71

Existem o grupo de blocos

para tratar informaestextuais. Precisaremos dealgo para juntar os textos.


54/71

S pode ser esse bloco

Join. Ao apontar para elemostrou a seguintemensagem.


55/71

Isso mesmo, esta uma boaforma para explorar econhecer o App Inventor.


56/71

Entra dois textosnesta

extremidade.Sai o textoconcatenado

Anatomia de um bloco


57/71


5. Seleciona o grupo deblocos Text.6. Arraste a ao Joinpara o visualizador deblocos. A sada da Join sera entrada do Set Label1.Text.


58/71



59/71

7. Seleciona o grupo deblocos Text.8. Arraste o bloco que criaum texto.9. Escreva a mensagem Ola



60/71



61/71


10 . Seleciona o compoenteTextBox11. Arraste o bloco queretorna o texto para dentrodo visualizado, comoentrada do bloco Join.


62/71

Por fim. Voc precisar ter osblocos agrupados daseguinte maneira.


63/71

Relembrando a tela donosso aplicativo. Vamostestar ?


64/71

Conecte seu smartphone android a porta usb docomputador, e seleciona Connect e depois em USB.


65/71

Atividade guiada

Criar um aplicativo para calcular o IMC (ndice deMassa Corprea).

1. Crie um novo projeto chamado IMC-APP2. Monte a interface do aplicativo como a seguir

Atividade guiada


66/71

Lembre-se derenomear oscomponentes.


67/71

Para fazer o clculo doIMC basta dividir seupeso em quilogramaspela altura ao quadrado

(em metros). Entoprecisaremos dos blocospara dividir e multiplicar.

Atividade guiada

d d d


68/71

Atividade guiada

Os blocos devem estar como na figura abaixo.


69/71


70/71

Clculo IMC SituaoAbaixo de 18,5 Voc est abaixo do peso idealEntre 18,5 e 24,9 Parabns voc est em seu peso normal!Entre 25,0 e 29,9 Voc est acima de seu peso (sobrepeso)Entre 30,0 e 34,9 Obesidade grau IEntre 35,0 e 39,9 Obesidade grau II40,0 e acima Obesidade grau III

Na prxima aula, veremoscomo tomar decises.

Iremos incrementar nossoapp de IMC, para dar asseguintes mensagens.


71/71

Referncias

Aulas dos professores Marcelo Vidigal eEveline S

The App Inventor Course-in-a-Box (AI2Version) - http://www.appinventor.org/course-in-a-box2

appinventor aula01

Documents