Tutorial App Inventor

18
Tutorial App Inventor Artur Galeno Tayná Gonçalves Instituto Federal de Educação, Ciência e Tecnologia do Maranhão Dezembro/2013

description

app inventor

Transcript of Tutorial App Inventor

  • Tutorial App Inventor

    Artur GalenoTayn Gonalves

    Instituto Federal de Educao, Cincia e Tecnologia do MaranhoDezembro/2013

  • 1. Introduo

    O objetivo deste tutorial introduzir o leitor ao App Inventor e gui-lo na criao de um

    aplicativo simples, cobrindo as funcionalidades bsicas da plataforma. O aplicativo usado como

    exemplo ser para clculo de IMC (ndice de Massa Corprea), e informar ao usurio se o seu

    IMC est acima ou abaixo do normal, ou normal. Espera-se que ao fim deste tutorial o leitor

    tenha um bom entendimento do App Inventor, e autonomia para explorar as funcionalidades

    no contempladas neste tutorial.

    O App Inventor uma plataforma para criao de aplicativos Android baseada na web, que

    prov uma interface visual com o objetivo de permitir que qualquer pessoa, mesmo sem um

    profundo conhecimento de codificao, possa construir aplicativos Android. O App Inventor

    um exemplo do conceito PaaS (Platform as a Service/Plataforma como servio) da

    Computao Distribuda, pois a plataforma oferecida como um servio e est disponvel para

    uso, bastando apenas que o usurio tenha um computador conectado internet e um browser.

    A plataforma dividida em duas partes: App Inventor Designer, para a construo da interface

    grfica da aplicao, e o App Inventor Block Editor, para associar aes aos componentes da

    interface.

    2. Histrico

    A primeira verso trial do App Inventor foi lanada em Julho de 2010, apenas por convite. E a

    verso pblica foi lanada em Dezembro de 2010. Inicialmente a plataforma pertencia e era

    mantido pela Google, que abriu mo do projeto em 2011. Atualmente o App Inventor mantido

    pelo MIT (Massachusetts Institute of Technology). Para desenvolver o App Inventor, a Google

    se baseou em pesquisas anteriores em computao educacional e na experincia anterior da

    empresa em desenvolvimento em ambientes computacionais online.

    O App Inventor utiliza um editor baseado em blocos que feito a partir da biblioteca Open

    Blocks para Java, a qual distribuda pelo STEP (Scheller Teacher Education Program) do

    MIT. O STEP fruto da tese de mestrado de Ricarose Roque e distribuda sob a licena de

    software livre do MIT.

    Todo o ciclo de pesquisas que permitiram que o App Inventor existisse fruto de mais de 40

    anos de pesquisa do MIT, e incluem outros projetos tais como Logo, StarLogo TNT e Scratch.

  • 3. AppInventor e os conceitos de Computao nas Nuvens e Computao Mvel

    Computao nas nuvens um paradigma em que determinada tarefa executada via Internet

    (por isso o termo Nuvem), como por exemplo edio de texto (Google Docs), armazenamento

    de arquivos (Dropbox), e o prpio AppIventor, que permite a edio de um aplicativo.

    Quando essa tecnologia surgiu, vislumbrava-se que em determinado momento, os

    computadores pessoais no iriam precisar de mais nada instalado ou armazenado localmente,

    seria necessrio apenas acesso a internet para que dessa forma os servios fossem

    acessados remotamente. Dessa maneira os computadores iriam precisar de menos potncia, e

    at mesmo, apenas do monitor e dos perifricos, pois todas as aplicaes seriam executadas

    no servidor. E outra grande vantagem que a tecnologia permite o acesso de qualquer local,

    tendo em vista as condies ideais, dessa maneira o usurio no fica preso a uma plataforma e

    nem a apenas uma mquina.

    Atualmente a computao nas nuvens esbarrou em alguns problemas, como a questo da

    segurana na internet, e da estabilidade e velocidade da conexo. Ainda assim, a tecnologia se

    mostra estabilizada no mercado e com aceitabilidade perante os usurios. Sendo utilizada para

    diversos fins, conforme citado.

    O AppIventor aplica bem os conceitos da computao nas nuvens permitindo que o usurio

    possa acessar e programar seu projeto de modo independente de plataforma, e independente

    do local, oferecendo ao usurio mais flexibilidade ainda ao construir aplicativos. E aplicando

    bem o seu prprio proposito de permitir que pessoas sem conhecimento em programao

    construa um aplicativo, pois ao oferecer uma ferramenta nas nuvens retira do usurio a

    necessidade de fazer toda configurao do ambiente de desenvolvimento.

    Em relao a computao mvel o AppIventor aplica seus princpios, pois permite a

    descentralizao do desenvolvimento, a diversificao da plataforma de desenvolvimento,

    necessita de conectividade constante para utilizao e oferece simplicidade para o usurio.

    4. Preparando o ambiente

    Acesse appinventor . mit . edu [Figura 1]. Na tela inicial podemos escolher entre: Teach para

    explorar recursos educacionais, Explore para explorar informaes e tutoriais e Invent para

    iniciar a criao de aplicativos. Neste tutorial usaremos apenas as duas ltimas opes.

    Inicialmente, clique em Explore para realizar a preparao do ambiente.

  • Figura 1

    Em seguida, clique na aba Setup [Figura 2].

    Figura 2

  • A preparao do ambiente dividida em 2 etapas: verificar se o ambiente Java est

    corretamente instalado e instalar o aplicativo do App Inventor, conforme vemos na tela do

    Setup [Figura 3].

    Figura 3

    Clique na etapa 1 (Prepare your system), que testar se o ambiente Java est funcionando na

    mquina. Se o Java estiver funcionando, um pequeno aplicativo de bloco de notas ser aberto

    [Figura 4]. Caso contrrio preciso realizar a instalao da mquina virtual Java.

  • Figura 4

    Na segunda etapa feita a instalao do software do App Inventor. Esse software

    responsvel por disponibilizar um emulador de um sistema Android para que os aplicativos

    possam ser testados na prpria mquina. Selecione o arquivo adequado para o Sistema

    Operacional da sua mquina [Figura 5] e faa o download e a instalao.

  • Figura 5

    Aps a instalao voc pode clicar no boto Invent your own apps now para comear a criar

    seus aplicativos. Para iniciar preciso logar com uma conta do google, caso no possua uma

    necessrio criar. A primeira tela aps o login a de Meus projetos [Figura 6]. Crie um novo

    projeto com o nome IMC e estamos prontos para comear a produzir.

  • Figura 6

    5. Criando a interface grfica

    A criao da interface grfica a primeira parte do desenvolvimento com o App Inventor. Para

    tanto temos o ambiente de Design [Figura 7].

  • Figura 7

    Na parte esquerda da tela est a Paleta de componentes, que contm componentes visuais

    (botes, caixas de texto, etc) e no visuais (elementos para arranjo de tela, sensores, etc).

    Para adicionar componentes interface basta arrast-los da paleta para dentro do

    Visualizador, que possui uma tela central imitando a tela de um dispositivo Android.

    medida que elementos vo sendo inseridos na tela, eles aparecem na seo Componentes.

    Para alterar as propriedades de um componente basta selecion-lo na lista de componentes e

    suas propriedades so habilitadas na parte direira da tela, na seo Propriedades.

    Uma boa prtica renomear os componentes medida que so inseridos na tela. Arraste da

    Paleta para a tela principal um componente Label, que servir como ttulo e um Table

    Arrangement (submenu Screen Arrangement) que servir para nos ajudar a organizar a tela.

    Renomeie o Label para lblTitulo e o Table Arrangement para tblTelaPrincipal. Alm disso mude

    o texto do componente Screen1, atravs do atributo Title, de Screen1 para IMC.

    A tela dever ficar como na Figura 8:

  • Figura 8

    Mude os atributos do componente tblTelaPrincipal conforme valores abaixo:

    Collums (Colunas) 2

    Rows (Linhas) 3

    Weight (Largura) Fill parent

    O valor Fill Parent indica que a largura do componente ser igual ao espao disponvel no

    componente pai. Nesse caso a tabela ser da largura da tela. Para lblTitulo o atributo weight

    tambm deve estar como Fill Parent, o atributo Text como Calculo de IMC e o atributo

    TextAligment como Center, para que o texto fique centralizado.

    Para a coluna da esquerda da tabela arraste um componente Image e dois componentes Label.

    Para coluna da direita arraste um Label e dois TextBox. Arraste um Button e depois um Label

    para qualquer rea da tela abaixo da tabela. Este ltimo Label servir para exibir o resultado,

    portanto apague o texto contido nele atravs da propriedade texto, ele ficar invisvel na tela.

    Vamos utilizar a imagem mostrada na Figura 9 para o componente Image. Antes precisamos

    fazer o upload do arquivo atravs do parmetro Picture do componente Image. Outra opo

    fazer o upload atravs da seo Mdia, dentro da seo Componentes. Qualquer outra mdia

  • necessria para a aplicao, como outras imagens e sons, precisam tambm ser carregados e

    aparecero a seo mdia.

    Figura 9

    Finalmente, renomeie os elementos e mude o texto de cada um conforme a Figura 10.

    Figura 10

    Nossa interface est pronta, agora associaremos aes aos componentes da tela. Para iniciar

    clique no boto Open the Blocks Editor no canto esquerdo superior da tela, e uma aplicao

    Java ser iniciada.

    6. Adicionando aes aos objetos da interface

  • A programao no App Inventor feita atravs do Blocks Editor [Figura 11]. A programao no

    App Inventor baseada em blocos que so combinados entre si. Para us-los basta arrastar do

    menu esquerdo (que possui 3 abas de componentes) para o centro da tela, onde a

    montagem ser feita. Na parte superior direita temos os controles do emulador, que serviro

    para que possamos testar a nossa aplicao.

    Figura 11

    A parte mais importante do Blocks Editor o menu dos blocos, que possui 3 abas:

    Built-in: blocos genricos necessrios a qualquer aplicao;

    My blocks: blocos associados aos elementos definidos nesta aplicao;

    Advanced: mais opes de blocos para os componentes utilizados nesta aplicao;

    Na Figura 12 podemos visualizar as duas abas mais usadas, Built-in e My Blocks, que sero

    usadas neste tutorial. Para a aba Built-In est selecionado submenu Text, por isso os blocos

    apresentados na imagem so relativos a texto. Na aba My Blocks est selecionado o

    componente BtnCalcular, por isso temos blocos que representam aes relacionadas a botes,

    como Click.

  • Figura 12

    Inicialmente definiremos uma varivel para armazenar o clculo do IMC. Na aba Built-In, no

    susbmenu Definition usamos o bloco def variable as para fazer isso. O valor atribudo zero

    atravs do bloco number do submenu Math. O resultado o bloco mostrado na Figura 13.

    O clculo do IMC feito atravs da frmula: IMC = M / A, onde M = massa corporal e A =

    altura. Para calcular o IMC usaremos os blocos mostrados na Figura 14. Usamos a funo expt

    para elevar o valor contido no componente txtAltura ao quadrado e ento dividimos o valor

    contido em txtPeso pelo valor obtido. Por fim armazenamos o resultado na varivel resultado.

    Figura 13

  • Aps descobrir o valor do IMC precisamos exibir a mensagem adequada ao valor obtido.

    Usaremos os sequintes intervalos:

    IMC < 18.5 Magro

    18.5 > IMC 25 Acima do peso

    Precisamos usar condies para exibir a mensagem correta. Os blocos condicinais esto

    disponveis no submenu Control. Ainda, para expressar o intervalo de valores para que uma

    pessoa esteja saudvel usamos o bloco and, disponvel no submenu Logic. Como resultado

    temos a estrutura de blocos mostrada na Figura 15.

    Por fim devemos associar tudo isso ao click do boto Calcular. Para isso usamos o bloco

    When btnCalcular.Click do disponvel na aba My Blocks. O resultado mostrado na Figura

    16.

    Figura 14

    Figura 15

  • Finalmente iremos testar o aplicativo. Clique no boto New Emulator no canto superior direito

    da tela. A mensagem mostrada na Figura 17 aparecer.

    Figura 16

    Figura 17

  • Assim que o emulador estiver pronto ele aparecer na tela, conforma Figura 18.

    Clique em Connect to a device e selecione o emulador recm-aberto. Uma seta amarela

    indicar enquanto o arquivo transferido para emulador, conforma Figura 19.

    Finalmente podemos testar a aplicao conforme Figura 20.

    Figura 18

    Figura 19

  • Para testar o aplicativo no seu dispositivo Android basta retornar tela de design e utilizar a

    opo Package fo phone, mostrada na Figura 21.

    Figura 20

    Figura 20

  • Figura 21