construção de aplicações móveis híbridas com o phonegap ......muitos dos utilizadores de...

34

Upload: others

Post on 02-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

C

M

Y

CM

MY

CY

CMY

K

Construção de Aplicações Móveis Híbridas com o PhoneGap.pdf 1 31/01/18 15:39

Page 2: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

EDIÇÃO FCA – Editora de Informática, Lda. Av. Praia da Vitória, 14 A – 1000-247 Lisboa Tel: +351 213 511 448 [email protected] www.fca.pt DISTRIBUIÇÃO Lidel – Edições Técnicas, Lda. Rua D. Estefânia, 183, R/C Dto. – 1049-057 Lisboa Tel: +351 213 511 448 [email protected] www.lidel.pt LIVRARIA Av. Praia da Vitória, 14 A – 1000-247 Lisboa Tel.: +351 213 511 448 * Fax: +351 213 522 684 [email protected] Copyright © 2018, FCA – Editora de Informática, Lda. ISBN edição impressa: 978-972-722-871-3 1.ª edição impressa: fevereiro de 2018 Impressão e acabamento: Tipografia Lousanense, Lda. - Lousã Depósito Legal n.º 437091/18 Capa: José Manuel Ferrão – Look-Ahead

Todos os nossos livros passam por um rigoroso controlo de qualidade, no entanto aconselhamos a consulta periódica do nosso site (www.fca.pt) para fazer o download de eventuais correções. Não nos responsabilizamos por desatualizações das hiperligações presentes nesta obra, que foram verificadas à data de publicação da mesma. Os nomes comerciais referenciados neste livro têm patente registada.

Reservados todos os direitos. Esta publicação não pode ser reproduzida, nem transmitida, no todo ou em parte, por qualquerprocesso eletrónico, mecânico, fotocópia, digitalização, gravação, sistema de armazenamento e disponibilização de informação,sítio Web, blogue ou outros, sem prévia autorização escrita da Editora, exceto o permitido pelo CDADC, em termos de cópiaprivada pela AGECOP – Associação para a Gestão da Cópia Privada, através do pagamento das respetivas taxas.

Marcas Registadas de FCA – Editora de Informática, Lda. –®

® ®

Page 3: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

ÍÍNNDDIICCEE GGEERRAALL

O AUTOR ..........................................................................................................XI

1. INTRODUÇÃO ÀS APLICAÇÕES MÓVEIS HÍBRIDAS .................................................... 1 1.1. Aplicações Nativas e Aplicações HTML5 ....................................................................................... 1 1.2. Aplicações Híbridas ........................................................................................................................... 6 1.3. HTML5 Mobile ..................................................................................................................................... 7

Resumo ............................................................................................................................................. 13

2. INSTALAÇÃO E CONFIGURAÇÃO DO PHONEGAP ...................................................... 15 2.1. Instalação do Eclipse ........................................................................................................................ 15 2.2. Instalação do Android SDK ............................................................................................................. 16 2.3. Instalação das Android Development Tools (ADT) .......................................................................... 17 2.4. Ambiente de Teste Android ............................................................................................................ 20 2.5. Instalação do PhoneGap .................................................................................................................. 26 2.6. Teste do PhoneGap ........................................................................................................................... 28 2.7. PhoneGap no iOS .............................................................................................................................. 36

Resumo ............................................................................................................................................. 42

3. O PRIMEIRO EXEMPLO ..................................................................................... 43 3.1. Aplicação-alvo ................................................................................................................................... 43 3.2. Base da Aplicação ............................................................................................................................. 44 3.3. Código ................................................................................................................................................ 57 3.4. Execução e Teste em Ambiente Android ....................................................................................... 76 3.5. Execução em Ambiente iOS ............................................................................................................. 81

Resumo .............................................................................................................................................. 84

4. PRINCÍPIOS BÁSICOS DO DESENVOLVIMENTO EM PHONEGAP .................................... 85 4.1. Eventos ............................................................................................................................................... 85 4.2. Notificações ....................................................................................................................................... 90 4.3. Rede .................................................................................................................................................... 95 4.4. Barra de Status ................................................................................................................................... 97 4.5. Templates Aplicacionais .................................................................................................................. 100

Resumo ........................................................................................................................................... 121

5. FRAMEWORKS DE APRESENTAÇÃO ..................................................................... 123 5.1. Framework7 ..................................................................................................................................... 123 5.2. Boilerplate e Angular...................................................................................................................... 137 5.3. Ionic .................................................................................................................................................. 145

Resumo ............................................................................................................................................ 149

Page 4: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

VIII

6. API – APPLICATION PROGRAM INTERFACE ........................................................ 151 6.1. Acelerómetro .................................................................................................................................. 151 6.2. Bateria .............................................................................................................................................. 155 6.3. Geolocalização ................................................................................................................................. 158 6.4. Bússola ............................................................................................................................................. 163 6.5. Contactos ......................................................................................................................................... 166 6.6. Captura de Áudio, Imagens e Vídeo ........................................................................................... 173

Resumo ........................................................................................................................................... 182

7. DADOS E OFFLINE ........................................................................................ 183 7.1. Local Storage ................................................................................................................................... 183 7.2. Bases de Dados ................................................................................................................................ 186 7.3. Sistema de Ficheiros ....................................................................................................................... 193

7.3.1. Leitura de Ficheiros ............................................................................................................. 195 7.3.2. Escrita de Ficheiros ............................................................................................................... 196

7.4. Offline ............................................................................................................................................... 201 Resumo ........................................................................................................................................... 202

8. CONSTRUÇÃO DE UMA APLICAÇÃO MÓVEL NA PRÁTICA ........................................... 203 8.1. Descrição Funcional ........................................................................................................................ 203 8.2. Base da Aplicação ........................................................................................................................... 204 8.3. Construção da Aplicação ............................................................................................................... 206 8.4. Testando a Aplicação ...................................................................................................................... 228

Resumo ............................................................................................................................................ 232

9. APLICAÇÕES MÓVEIS EMPRESARIAIS ................................................................. 233 9.1. Arquitetura ...................................................................................................................................... 233 9.2. Base Tecnológica ............................................................................................................................. 235 9.3. Demonstração .................................................................................................................................. 236

Resumo ........................................................................................................................................... 245

10. CONSTRUÇÃO DE JOGOS ............................................................................... 247 10.1. Jogos HTML ................................................................................................................................... 247 10.2. Exemplo Prático ............................................................................................................................ 255 10.3. Frameworks ..................................................................................................................................... 259

Resumo ........................................................................................................................................... 264

11. INTEGRAÇÃO COM REDES SOCIAIS .................................................................. 265 11.1. Integração com Redes Sociais ...................................................................................................... 265 11.2. Partilha em Redes Sociais ............................................................................................................ 266 11.3. Login ................................................................................................................................................ 271 11.4. Informação Analítica .................................................................................................................... 280

Resumo ........................................................................................................................................... 282

12. TESTE DE APLICAÇÕES ................................................................................. 283 12.1. Testes de Aplicações Móveis – Para Quê? ................................................................................. 283

Page 5: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

ÍÍNNDDIICCEE GGEERRAALL

©© FFCCAA

IX

12.2. Tecnologia de Automação de Testes .......................................................................................... 285 12.3. Testando uma Aplicação .............................................................................................................. 288

Resumo .......................................................................................................................................... 298

13. PUBLICAÇÃO DE APLICAÇÕES NAS STORES ........................................................ 299 13.1. O Que são Lojas de Aplicações? .................................................................................................. 299 13.2. Publicação do Caso Prático na Google Store ............................................................................. 300 13.3. Notas sobre a Publicação na Apple Store .................................................................................. 319

Resumo ........................................................................................................................................... 320

GLOSSÁRIO DE TERMOS ..................................................................................... 321

ÍNDICE REMISSIVO ........................................................................................... 323

Page 6: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas
Page 7: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

OO AAUUTTOORR

Pedro Coelho – Licenciado em Engenharia Eletrotécnica e de Computadores pelo Instituto Superior Técnico, é Consultor e Gestor de Projetos de Tecnologias de Informação (TI) nas áreas da Web e da Internet.

Com 25 anos de experiência profissional, já esteve envolvido em grandes projetos, principalmente em empresas de Telecomunicações e de Consultoria. Foi responsável pela implantação de Sistemas de TI (Billing, CRM, Provisioning, Plataformas de Serviços, etc.), redes de dados (TCP/IP), infraestruturas de serviço completo (ISP), serviços de Internet e aplicações complexas, portais e liderança dos departamentos de TI.

Autor de vários livros sobre Sistemas de Informação, Internet, Web e Programação, todos editados pela FCA.

Page 8: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas
Page 9: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

111 1IINNTTRROODDUUÇÇÃÃOO ÀÀSS AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS

HHÍÍBBRRIIDDAASS

As tecnologias móveis desenvolveram-se grandemente nos últimos anos, de tal forma que os smartphones e os tablets fazem parte do quotidiano das pessoas. Esta evolução motivou o aparecimento de um novo mercado: o desenvolvimento de aplicações executáveis nos dispositivos, o que levou a que as diversas lojas online ficassem repletas de aplicações nativas para as várias plataformas, desenvolvidas especificamente para cada uma das plataformas de hardware a que correspondem os dispositivos. No entanto, com o desenvolvimento em pleno do HTML5, surgiu uma forma mais eficiente de criação de aplicações móveis – as aplicações híbridas. Ao longo deste capítulo descreveremos em que consiste este conceito e como pode ele ser posto ao serviço da criação de aplicações para uso em contexto móvel.

1.1 AAPPLLIICCAAÇÇÕÕEESS NNAATTIIVVAASS EE AAPPLLIICCAAÇÇÕÕEESS HHTTMMLL55 Segundo dados da Gartner, a partir de 2009 o crescimento do número de

smartphones e tablets tem sido exponencial. Por outro lado, o fornecimento de novos PC tem sido estável, apresentando mesmo algum declínio a partir de 2012. Por este motivo, muitos fabricantes de software têm apostado de forma significativa nas aplicações para plataformas móveis, povoando as lojas online com muitos milhares de aplicações dos mais variados tipos.

Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas. Estas aplicações são na sua maioria nativas, isto é, são programas construídos para funcionarem num ambiente de sistema operativo específico, estando adaptadas a este.

Existia, já há algum tempo, a possibilidade de o utilizador do smartphone aceder a aplicações móveis a partir do seu browser móvel, uma peça que já está presente nos telefones móveis desde as suas versões mais antigas, mas que só com o aparecimento do HTML5 começou a ser uma alternativa credível para a disponibilização de funcionalidades aplicacionais, distintas das aplicações nativas.

As aplicações nativas têm, de facto, várias vantagens. Por serem desenhadas para um equipamento específico, tiram o maior partido das suas características de hardware, quer em termos gráficos, quer em termos das várias funcionalidades que o sistema

Page 10: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

2

operativo do telefone ou tablet disponibiliza (acelerómetro, GPS, som, ecrã tátil, etc.). Apresentam também boa performance, em termos de rapidez de execução e de gráficos, conseguindo tipicamente o melhor que o hardware possibilita.

Para além disso, enquanto os utilizadores dos PC estão bastante habituados a software disponibilizado via Web, os utilizadores de plataformas móveis revelam uma preferência muito notória por aplicações, e estão até pouco habituados a utilizar o browser do seu dispositivo. De facto, tem-se verificado ao longo dos últimos anos um crescimento constante da utilização de aplicações (Android e iOS) e uma utilização mais ou menos constante da Web em dispositivos móveis (Figura 1.1).

FFIIGGUURRAA 11..11 –– UUTTIILLIIZZAAÇÇÃÃOO DDEE AAPPPPSS VVSS.. WWEEBB MMÓÓVVEELL ((FFOONNTTEE:: BBUUSSIINNEESSSS IINNSSIIDDEERR))

Na sua maioria, os utilizadores de smartphones e tablets usam pouco o browser Web por oposição às aplicações móveis que importam das stores.

No entanto, com o HTML5, existem condições para que esta situação se altere. As aplicações HTML5 apresentam uma enorme vantagem face às aplicações nativas: funcionam em qualquer dispositivo móvel, independentemente do hardware. Uma aplicação HTML5 irá funcionar em iOS/iPhone tal como em Android ou Windows, sem que para tal seja necessário fazer versões distintas da mesma. Pode ser disponibilizada via Web e instalada no telefone sem recurso a uma store.

Para os produtores de aplicações, criar uma nova aplicação para funcionar nas várias plataformas móveis representa um custo significativo. Fazer uma aplicação para iOS e Android, como muitos fabricantes fazem, duplica o seu custo de produção. Em alternativa, fazer a aplicação em HTML5 torna-a universal e executável em qualquer dispositivo.

As aplicações HTML5 são, na verdade, aplicações que funcionam como as nativas, mas que residem na Web. Há alguns pontos que têm de ser tidos em conta na hora de decidir entre fazer uma aplicação nativa ou fazê-la baseada na Web:

Page 11: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

222 1IINNSSTTAALLAAÇÇÃÃOO EE CCOONNFFIIGGUURRAAÇÇÃÃOO DDOO

PPHHOONNEEGGAAPP

Para criar aplicações híbridas, o leitor deverá configurar o seu PC para utilizar a framework PhoneGap/Apache Cordova. O PhoneGap não é simplesmente um produto que se instala e se começa a usar. Para usufruir dos seus benefícios é necessário compreender como funciona, e instalar um conjunto de ferramentas de software de suporte. Neste capítulo veremos como instalar e configurar estas ferramentas, deixando o ambiente preparado para começarmos a criar aplicações.

2.1 IINNSSTTAALLAAÇÇÃÃOO DDOO EECCLLIIPPSSEE Uma das primeiras tarefas que o leitor deverá fazer é instalar um editor (IDE –

– Integrated Development Environment). O Eclipse é um dos mais conhecidos, e uma das opções mais óbvias para quem quer utilizar PhoneGap. Instala-se com facilidade a partir de www.eclipse.org, num processo muito simples, cuja única dependência é ter o Java instalado (se não o tiver, o leitor deverá instalá-lo). Há várias versões disponíveis, neste exemplo (Figura 2.1) optámos pela Java Edition.

FFIIGGUURRAA 22..11 –– EEDDIITTOORR EECCLLIIPPSSEE

Page 12: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

16

2.2 IINNSSTTAALLAAÇÇÃÃOO DDOO AANNDDRROOIIDD SSDDKK Para poder trabalhar com aplicações móveis Android, o leitor tem de ter

instalado um SDK. Há uma versão do Eclipse que já traz o Android SDK, no entanto, este pode perfeitamente ser instalado à parte e ligado ao Eclipse, o que além de ser simples de fazer, liberta o leitor de alguma limitação da versão específica que o bundle traga, passando a usar a última versão do SDK. O software pode importar-se a partir de developer.android.com, fazendo-se a instalação num diretório específico. Dentro deste diretório existirá um ficheiro chamado “SDK Manager.exe”, que o leitor poderá utilizar para configurar os componentes a instalar na sua máquina (Figura 2.2).

FFIIGGUURRAA 22..22 –– SSDDKK MMAANNAAGGEERR

O leitor não tem de instalar todos os pacotes, o que demoraria demasiado tempo e ocuparia demasiado espaço. Cada conjunto de pacotes de software contém um bloco de código que é necessário para o desenvolvimento Android num contexto específico, sejam ferramentas de software, sejam API adequadas para uma versão específica.

No mínimo, o leitor é aconselhado a instalar os seguintes blocos:

�� Android SDK Tools;

�� Android SDK Platform-tools;

�� Android SDK Build-tools;

�� Android 7.1.1 (API 25) SDK Platform;

Page 13: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

333 1OO PPRRIIMMEEIIRROO EEXXEEMMPPLLOO

Tendo concluído a criação do ambiente de desenvolvimento, é altura de iniciarmos a construção de aplicações móveis. Este capítulo vai mostrar como com alguns conheci-mentos de HTML5 e de JavaScript/jQuery é possível criar e executar uma aplicação móvel, com recurso à framework Cordova/PhoneGap.

3.1 AAPPLLIICCAAÇÇÃÃOO--AALLVVOO Como aplicação de teste vamos fazer uma pequena calculadora para fitness, que

efetue um conjunto de cálculos básicos, com base em dados que o utilizador introduz, e que possa também ajudar o utilizador a programar o seu exercício físico. Para o fazer vamos recorrer a algumas fórmulas que podemos encontrar com facilidade em sites e publicações da especialidade, e vamos necessitar de recolher alguns dados do utilizador. Assim, o objetivo será perguntar ao utilizador numa primeira iteração:

�� Peso;

�� Idade;

�� Altura;

�� Sexo.

Deste modo, podemos calcular um conjunto de parâmetros determinadores da forma física, a saber:

�� Peso ideal – fórmula de Robinson – homens: 52 kg + 1,9 kg por polegada acima de 5 pés; mulheres: 49 kg + 1,7 kg por polegada acima de 5 pés;

�� BMI – Body Mass Index, ou índice de massa corporal (Adolphe Quetelet), calculado da seguinte forma: peso (kg) / (altura em metros * altura em metros);

�� BMR – Basal Metabolic Rate, ou calorias que o corpo gasta em repouso por dia (Amirkalali, Bahareh et al. Comparison of Harris Benedict and Mifflin-ST Jeor equations with indirect calorimetry in evaluating resting energy expenditure), calculada da seguinte forma: homens: 66,47 + (13,75 * peso em kg) + (5,0 * altura em cm) – (6,75 * idade em anos); mulheres: 665,09 + (9,56 * peso em kg) + (1,84 * altura em cm) – (4,67 * idade em anos).

Page 14: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

44

Adicionalmente, pretendemos ajudar o nosso utilizador a fazer exercício e, para isso, vamos pedir-lhe três parâmetros adicionais:

�� Batimento cardíaco (pulsação) médio de uma sessão de exercício – em bati-mentos por minuto (esta informação pode muitas vezes ser obtida por relógios de treino);

�� Duração em minutos da sessão de exercício ou treino;

�� Batimento cardíaco em repouso (medido ao acordar);

Com base nestes dados e nos anteriores1 podemos calcular:

�� O batimento cardíaco máximo aconselhável durante o exercício (220 – idade);

�� A reserva de batimento cardíaco, (batimento cardíaco máximo – batimento cardíaco em repouso);

�� A melhor zona de treino (pulsação) para queimar gordura – adicionar à pulsação de repouso o intervalo 50% a 75% da reserva de batimento cardíaco;

�� A melhor zona de treino para melhoria da endurance física – adicionar à pulsação de repouso o intervalo entre 75% e 85% da reserva de batimento cardíaco;

�� A melhor zona de treino para melhoria da performance atlética, no limite do treino aeróbico, não recomendável para perda de peso – adicionar à pulsação de repouso o intervalo 85% a 90% da reserva de batimento cardíaco;

�� A zona de treino anaeróbica – que leva à exaustão rápida – adicionar à pulsação de repouso o intervalo 90% a 100% da reserva de batimento cardíaco.

A aplicação deverá solicitar os dados ao utilizador, e efetuar os cálculos a pedido. Deverá mostrar os dados referentes ao treino (pulsações e zonas de treino) também somente a pedido, mantendo, na versão mais simples, apenas o cálculo do peso ideal e dos índices BMI e BMR. A funcionalidade é bastante simples.

3.2 BBAASSEE DDAA AAPPLLIICCAAÇÇÃÃOO Como vimos no capítulo anterior, a primeira tarefa a pôr em prática quando

pretendemos criar uma aplicação baseada na framework PhoneGap é utilizarmos o PhoneGap Desktop para criar o template. Neste caso (Figura 3.1), vamos criar uma aplicação nova de tipo “Blank”. Caso criemos as aplicações de tipo “Hello World”, o leitor verá a sua aplicação carregada com um conjunto alargado de código e plug-ins de

1 Fonte: www.active.com.

Page 15: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

444 1PPRRIINNCCÍÍPPIIOOSS BBÁÁSSIICCOOSS DDOO DDEESSEENNVVOOLLVVIIMMEENNTTOO

EEMM PPHHOONNEEGGAAPP

Após termos visto como construir e executar pequenas aplicações com recurso ao PhoneGap, há agora que passar em revista, e sistematizar, os principais conceitos que estão subjacentes ao desenvolvimento dessas aplicações. Neste capítulo vamos tratar dos aspetos mais importantes a ter em conta na criação de aplicações com o PhoneGap.

4.1 EEVVEENNTTOOSS Os eventos são ocorrências específicas que, quando identificados pelo browser

desencadeiam a execução de partes do código. Por exemplo, efetuar um clique com o rato, ou um movimento, ou um toque de dedo sobre um ecrã tátil, são exemplos de eventos que podem desencadear a execução de código específico.

O HTML5 contém um conjunto alargado de eventos diferentes, que são descritos na norma, e cuja ocorrência pode desencadear a execução de código JavaScript. Alguns exemplos:

�� “onchange” – ocorre quando o estado de um elemento muda;

�� “onclick” – ocorre quando um elemento é clicado uma vez;

�� “ondblclick” – acontece quando um elemento é clicado duas vezes;

�� “onfocus” – acontece quando um elemento ganha foco;

�� “onkeypress” – acontece quando é detetada a pressão de uma tecla do teclado;

�� “onmousedown” – ocorre quando um botão de rato é pressionado;

�� “onselect” – ocorre quando um elemento é selecionado;

�� “onsubmit” – ocorre quando um formulário é submetido;

�� “onload” – acontece quando um documento é carregado.

Page 16: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

86

Estes são apenas alguns exemplos, sendo que a norma HTML descreve a totalidade dos eventos passíveis de serem usados na Web. Deve notar-se que nem todos os eventos que fazem sentido na Web, fazem sentido no móvel. Por exemplo, “onkeypress” não faz sentido num tablet, já que este provavelmente não tem teclado.

Pelo contrário, existem outros eventos, que surgiram no contexto móvel, e que não fazem muito sentido na Web tradicional. Alguns exemplos de eventos criados no Android:

�� “ontouch” – ocorre quando algum tipo de interação acontece no ecrã tátil;

�� “ontap” – ocorre quando há um toque com o dedo sobre um elemento num ecrã tátil;

�� “onkey” – ocorre quando uma tecla do dispositivo é pressionada.

Além dos eventos tradicionais, há alguns eventos que o PhoneGap introduziu e que podem ser utilizados em aplicações, como sejam:

�� “backbutton” – ocorre quando o botão “back” é pressionado no dispositivo;

�� “deviceready” – ocorre quando o dispositivo carregou e a API do PhoneGap está disponível. Deve ser o primeiro evento a ser detetado num programa PhoneGap, para evitar erros;

�� “menubutton” – ocorre quando um botão de menu do dispositivo é pressionado;

�� “pause” – evento que acontece quando a aplicação é colocada em background (mas não encerrada);

�� “resume” – evento que ocorre quando uma aplicação que estava em background é reativada;

�� “searchbutton” – ocorre quando o botão de pesquisa é pressionado num dispositivo;

�� “online” – evento que ocorre quando uma aplicação tem conetividade com a Internet;

�� “offline” – evento que acontece quando uma aplicação não tem conetividade com a Internet.

Para ilustrar como funcionam os eventos com o PhoneGap, vejamos um exemplo simples com um evento PhoneGap “backbutton”. Deste modo, criemos uma aplicação vazia com o PhoneGap Desktop (Figura 4.1).

Page 17: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

555 1FFRRAAMMEEWWOORRKKSS DDEE AAPPRREESSEENNTTAAÇÇÃÃOO

O desenvolvimento de aplicações em PhoneGap pode fazer-se construindo as aplicações de raiz, com HTML5 e JavaScript e/ou Node.js. No entanto, faz pouco sentido investir esforço significativo numa construção de raiz, em vez de tirar partido do trabalho de base que outros programadores já fizeram implementando um conjunto de funcionalidades que não é necessário construir. Ao utilizar as chamadas frameworks, ou templates aplicacionais, o programador pode partir de uma base de código que faz uma série de coisas à partida, e que podem incluir a navegação, a estrutura-base da aplicação, ou outras funcionalidades-base, permitindo que este se foque nas funcionalidades específicas que quer que a aplicação execute. Neste capítulo vamos focar algumas das frameworks disponíveis, mostrando como se utilizam e para que servem, obviamente sem sermos exaustivos, porque existe de facto um número elevado de frameworks disponíveis.

5.1 FFRRAAMMEEWWOORRKK77 A Framework7 é uma das frameworks mais utilizadas com Cordova/PhoneGap,

devido à sua simplicidade e ao facto de tornar, na prática, tão simples a construção de uma app como a construção de um site. Criada originalmente para iOS, foi mais tarde complementada com o suporte de material design, um conjunto de normas gráficas para aplicações Android.

Esta framework disponibiliza um conjunto alargado de componentes de interface, incluindo botões, formulários, menus, funcionalidades de swipe, etc. O design das aplicações baseadas em Framework7 é otimizado para operações de deslizamento (scroll) e toque, implementando com facilidade funções tipo “scroll to refresh” como as que estamos habituados a ver em aplicações como o Twitter.

O utilitário PhoneGap Desktop, do qual já falámos, disponibiliza uma forma simples de gerar um projeto com Framework 7, a partir dos templates que o utilizador pode selecionar no primeiro passo de criação do projeto (Figura 5.1).

Page 18: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

124

FFIIGGUURRAA 55..11 –– CCRRIIAAÇÇÃÃOO DDEE PPRROOJJEETTOO PPHHOONNEEGGAAPP CCOOMM FFRRAAMMEEWWOORRKK77

Esta operação gera o código necessário para termos uma aplicação básica e que, praticamente sem alterações, gera uma aplicação funcional. Podemos efetuar, assim, a instrução de construção da plataforma pretendida: cordova platform add android

Importar o projeto no Eclipse e editar o ficheiro “index.html”: <!DOCTYPE html>

<html>

<head>

<!--

Customize this policy to fit your own app's needs. For more guidance, see:

https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

Some notes:

* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly

* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

* Enable inline JS: add 'unsafe-inline' to default-src

-->

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

<!-- Required meta tags-->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Page 19: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

666 1AAPPII –– AAPPPPLLIICCAATTIIOONN PPRROOGGRRAAMM IINNTTEERRFFAACCEE

Já utilizámos em múltiplos exemplos, analisados até agora, os chamados plug-ins. Em Cordova/PhoneGap um plug-in é uma porção de código que disponibiliza uma interface JavaScript para componentes nativos. É através destes componentes, que são na verdade API (Application Programming Interface) no sentido em que disponibilizam acesso por parte das aplicações a interfaces específicas, que se consegue que uma aplicação aceda às capacidades do hardware, como a câmara, o GPS, o microfone, etc. Existem mais de 2000 plug-ins disponíveis para serem utilizados em contexto Cordova/PhoneGap, pelo que a sua cobertura exaustiva seria impossível neste capítulo. No entanto, vamos abordar os de utilização mais frequente e que, com maior probabilidade, serão utilizados em aplicações móveis.

6.1 AACCEELLEERRÓÓMMEETTRROO O acelerómetro permite medir se um dispositivo está em movimento. A informação

assim recolhida tem múltiplas aplicações práticas, e não só em jogos. Esta é guardada num objeto somente de leitura, que contém os dados de aceleração do dispositivo num instante específico. É também muito utilizada em situações em que os movimentos do dispositivo são importantes para a funcionalidade da aplicação.

Podemos adicionar o plug-in correspondente com a seguinte instrução: cordova plugin add cordova-plugin-device-motion

Na aplicação PhoneGap poderemos obter a aceleração atual com recurso a um objeto chamado “navigator.accelerometer”, que disponibiliza aceleração nos três eixos (x, y e z) e também o instante em que foi medida. navigator.accelerometer.getCurrentAcceleration(medicao, erro);

function medicao(acc) {

document.getElementById('status').innerHTML = "Aceleracao X: " + acc.x +"\n"+"Aceleracao Y: " + acc.y + "\n" + "Aceleracao Z: " + acc.z + "Timestamp: " + "\n";

}

function erro() {

str="Erro";

Page 20: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

152

document.getElementById('status').innerHTML = str;

}

Podemos demonstrar o uso deste plug-in com um exemplo muito simples. Comecemos por criar a nossa aplicação PhoneGap: cordova create cap6acel com.pedrocoelho.cap6acel cap6acel

cd cap6acel

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-file

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-whitelist

cordova plugin add cordova-plugin-console

cordova plugin add cordova-plugin-device-motion

cordova platform add android

Seguidamente, podemos importar para o Eclipse e editar o ficheiro “index.html”. Neste caso, vamos utilizar o objeto “navigator.accelerometer”, com uma versão de código de interface que usámos antes, e obter uma leitura instantânea, quando carregamos num botão.

EEXXEEMMPPLLOO 66..11 –– AACCEELLEERRÓÓMMEETTRROO

Ficheiro “index.html” <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Teste Acelerometro App</title>

</head>

<body>

<label id="status">Inicio</label>

<br/>

<input type="button" id="botao" value="Ok"/>

<script type="text/javascript" src="cordova.js"></script>

<script>

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.getElementById('status').innerHTML = "ready";

document.addEventListener("backbutton", onBackButton, false);

document.addEventListener("click", botao_carregado, false);

}

Page 21: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

777 1DDAADDOOSS EE OOFFFFLLIINNEE

Todas as aplicações móveis que possamos construir têm necessidade de guardar dados, para mais tarde poderem ser recuperados. O armazenamento da informação pode ter uma natureza transitória (por exemplo, para utilizar em cálculos) ou mais permanente (como é o caso do armazenamento de configurações, dados que resultem da execução da aplicação e que queiramos recuperar ou utilizar mais tarde, ou mesmo de informação de perfil). Neste capítulo vamos sistematizar, desenvolver e descrever com mais pormenor algo que já vimos acontecer em múltiplos casos: o armazenamento de dados por parte das nossas aplicações.

7.1 LLOOCCAALL SSTTOORRAAGGEE O Local Storage é uma forma de armazenamento persistente que já utilizámos

num dos nossos exemplos (a calculadora fitness). Trata-se de guardar pares chave-valor no dispositivo que está a ser utilizado, acedendo-se aos dados através de uma API. Na verdade, o Local Storage é um caso particular do conceito de Web Storage, criado no HTML5 para dar resposta às necessidades transitórias de armazenamento de dados por parte das aplicações Web, e que implementa dois conceitos:

�� Local Storage – armazenamento de dados no dispositivo, existindo um espaço por cada aplicação, só acessível por esta;

�� Session Storage – armazenamento de dados no dispositivo, mas com criação de um espaço por cada sessão distinta.

A utilização do Local Storage é bastante conveniente sempre que é necessário passar contexto entre páginas de uma aplicação híbrida. Vimos um exemplo a propósito do caso da aplicação de fitness, em que recorremos a uma sintaxe simples para guardar os nossos pares chave-valor: localStorage.setItem(“chave1”, valor1);

localStorage.setItem(“chave2”, valor2);

Podemos recuperar os nossos valores com recurso ao método “getItem()” do mesmo objeto “localStorage”: var v1 = localStorage.getItem(‘chave1’);

var v2 = localStorage.getItem(‘chave2’);

Page 22: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

184

Podemos ilustrar o funcionamento do Local Storage com um exemplo muito simples. Trata-se de um formulário, com dois campos (nome e apelido) e dois botões, um para guardar os conteúdos dos campos em memória, e outro para ler os valores que estiverem em memória e colocá-los nos campos respetivos.

Começamos por criar a nossa aplicação de teste: cordova create cap7local com.pedrocoelho.cap7local cap7local

cd cap7local

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-file

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-whitelist

cordova plugin add cordova-plugin-console

cordova platform add android

Importamos e editamos o “index.html”, onde colocamos o nosso código:

EEXXEEMMPPLLOO 77..11 –– LLOOCCAALL SSTTOORRAAGGEE

Ficheiro “index.html” <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Local Storage</title>

</head>

<body>

<style>

label{

display: inline-block;

float: left;

clear: left;

width: 100px;

text-align: left;

}

input {

display: inline-block;

float: left;

}

</style>

<label id="status">Inicio</label>

Page 23: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

888 1CCOONNSSTTRRUUÇÇÃÃOO DDEE UUMMAA AAPPLLIICCAAÇÇÃÃOO MMÓÓVVEELL

2NNAA PPRRÁÁTTIICCAA

Tendo em conta tudo o que foi exposto anteriormente e os diversos exemplos produzidos, estamos, nesta altura, em condições de começar a criar as primeiras aplicações móveis. Neste capítulo vamos aprender como construir uma pequena aplicação que demonstre alguns dos conceitos aprendidos, mas que tenha também utilidade prática.

8.1 DDEESSCCRRIIÇÇÃÃOO FFUUNNCCIIOONNAALL A aplicação que nos propomos construir consiste num bloco de notas, que possa

ser usado pelo utilizador para registar pequenas notas, num conceito similar ao que aplicações como o Onenote ou o Evernote permitem. No entanto, para não ser demasiado complicado, propomos desenvolver um conjunto relativamente básico de funcionalidades:

�� Criação de notas, com registo de data, local, assunto e texto;

�� Listagem de notas disponíveis;

�� Edição de notas;

�� Eliminação de notas;

�� Pesquisa de notas por palavra-chave;

�� Arquivo de notas, podendo a partir daí a pesquisa ser feita somente entre as notas não arquivadas.

Com esta descrição de alto nível, numa situação real de construção de uma aplicação, deveríamos construir desde logo um pequeno documento descritivo sobre as funcionalidades a implementar e, em sequência, iniciar o respetivo desenvolvimento. Se o leitor quiser implementar uma aplicação para um cliente, deverá, em primeiro lugar, validar a navegação e interface que irá implementar, porque existem naturalmente várias formas de implementar estas funcionalidades.

Com os conceitos aprendidos até aqui, o leitor poderá, com algumas das abordagens descritas, criar esta aplicação com relativa facilidade. A ideia é que a aplicação produzida seja uma aplicação real e não um teste, pelo que deverão ser tidos alguns cuidados ao nível da interface a utilizar e ao nível do teste das funcionalidades implementadas.

Page 24: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

204

8.2 BBAASSEE DDAA AAPPLLIICCAAÇÇÃÃOO Como base para a construção da nossa aplicação vamos escolher uma das

frameworks que descrevemos, neste caso a Framework7. Comecemos por construir a base da aplicação, ainda antes de pensarmos na implementação das funcionalidades. Para isso, criamos o nosso projeto Cordova/PhoneGap: cordova create note1 com.pedrocoelho.note1 note1

cd note1

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-file

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-whitelist

cordova plugin add cordova-plugin-console

cordova plugin add cordova-sqlite-storage

Ao nível dos plug-ins, estes são os que iremos necessitar para as funcionalidades que desejamos implementar.

À semelhança do que descrevemos no Capítulo 5, importamos a última versão do template da Framework7 a partir do site http://framework7.io, apagamos os ficheiros no interior do diretório “www”, na aplicação que acabámos de criar, e copiamos para este mesmo diretório o conteúdo do diretório ”dist”, no arquivo de ficheiros que importámos do site. Em seguida podemos construir a nossa aplicação-base: cordova platform add android

E executá-la, o que nos permitirá verificar a interface-base da framework, nomeadamente avaliar e decidir onde colocar os elementos funcionais que vamos querer construir na nossa aplicação.

A Figura 8.1 mostra os elementos básicos que vêm com a framework, sobre os quais podemos construir a nossa aplicação. Neste caso, temos um ecrã principal (com texto, botões, links, acesso aos painéis esquerdo e direito e um botão de acesso a configurações) e visualizamos um painel deslizante a partir da esquerda, sendo também possível utilizar um painel deslizante que surja do lado direito.

Para a nossa aplicação não precisamos de tanto espaço, nem de tantas entradas, pelo que vamos optar por colocar as funcionalidades todas no ecrã principal, guardando um dos painéis deslizantes somente para informação e futuras evoluções (este painel é perfeito para colocar botões de acesso a funcionalidades diversas que queiramos criar no futuro).

Page 25: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

999 1AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS EEMMPPRREESSAARRIIAAIISS

As aplicações móveis são utilizadas não somente no contexto dos utilizadores domésticos, mas também, de uma forma crescente, como um modo de acesso a serviços empresariais. No entanto, numa empresa existem preocupações de segurança e confidencialidade que levam a que os serviços, que tipicamente se pretendem expor, sejam controlados da mesma maneira como seriam se acedidos a partir dos sistemas de informação internos da empresa. Neste capítulo vamos descrever brevemente os conceitos subjacentes à ligação entre aplicações móveis e serviços internos, e mostrar como a tecnologia pode ser utilizada para ligar os dois mundos: móvel e empresarial.

9.1 AARRQQUUIITTEETTUURRAA Uma aplicação móvel pode ser construída para interagir com dados que guarda

localmente ou, alternativamente, para comunicar com serviços e/ou dados que estão residentes na rede. A decisão sobre que tipo de arquitetura deverá ser implementado depende, naturalmente, das funcionalidades a implementar e do tipo de interação que deverá existir com outros utilizadores.

Existem muitos casos de aplicações móveis em que os dados não estão residentes no dispositivo do utilizador, mas antes na Cloud, ou numa infraestrutura remota. Isto tem várias motivações implícitas:

�� Os dados estão sempre disponíveis online, não se perdem quando o utilizador perde o dispositivo, e podem ser acedidos a partir de outro dispositivo com facilidade;

�� Pode impor-se a utilização de autenticação, obrigando na prática a que o utilizador introduza um nome de utilizador e password válidos para acesso à informação;

�� O armazenamento centralizado de dados facilita a partilha de informação com outros utilizadores, potenciando as atividades colaborativas.

Este tipo de questões é muito importante para as empresas que pretendem tipicamente que os dados corporativos estejam seguros, que estes circulem com facilidade entre as pessoas que os têm de os utilizar, e que não sejam acedidos por pessoas não autorizadas. No entanto, para o programador de aplicações móveis, não é preciso inventar nada no que diz respeito ao acesso a serviços empresariais. Esta questão já foi estudada e endereçada quando há alguns anos houve a mesma necessidade de acesso a dados

Page 26: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

234

empresariais através da Web, levando ao aparecimento dos Web Services e mais tarde dos serviços REST (Representational State Transfer).

Podem, portanto, ser desenvolvidas aplicações móveis que consumam e escrevam nos mesmos serviços tipicamente utilizados pelas aplicações Web, autenticando-se da mesma forma, e consistindo somente numa interface diferente da interface Web com que essas aplicações são habitualmente utilizadas. A Figura 9.1. ilustra os vários componentes de uma aplicação móvel com necessidades de acesso a dados corporativos.

FFIIGGUURRAA 99..11 –– AARRQQUUIITTEETTUURRAA MMÓÓVVEELL EEMMPPRREESSAARRIIAALL PPOOSSSSÍÍVVEELL

Esta arquitetura não é fixa, existindo muitas formas de se conjugar as peças tecnológicas para se conseguir o mesmo resultado. No entanto, existe algo que nunca deve ocorrer, por muito que seja tecnicamente possível: aceder diretamente a dados corporativos a partir de aplicações móveis. A aplicação deve comunicar com um servidor Web, onde residirão um conjunto de serviços expostos. Estes serviços comunicarão internamente quer com aplicações, quer com dados, garantindo integridade e segurança no acesso.

O princípio da utilização de API Web baseadas em serviços (REST ou SOAP – Simple Object Access Protocol) é simples: acede-se ao serviço via um URL (denominado endpoint), utiliza-se comunicação HTTP tradicional (métodos “PUT” ou “GET”) e enviam--se e recebem-se dados através de XML ou JSON (JavaScript Object Notation, uma forma simples de comunicação de dados estruturados através de ficheiros).

Um dos motivos que levou a uma evolução maior das interfaces Web foi a possibilidade de estas chamadas poderem ser assíncronas, ou seja, durante muito tempo as aplicações Web basearam-se no princípio de que a comunicação era síncrona — um pedido era obrigatoriamente seguido do aguardar da resposta, sucedendo-se a ação. Numa aplicação Web assíncrona, após o pedido a ação termina, sendo que quando chegar uma resposta, esta desencadeia uma determinada ação independente, geralmente a execução de uma função de callback.

Page 27: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

111000 1CCOONNSSTTRRUUÇÇÃÃOO DDEE JJOOGGOOSS

Uma das áreas que mais está ligada ao universo das aplicações móveis é a dos jogos. Contudo, esta é das que mais tem levado à resistência à adoção de aplicações híbridas, argumentando que a exigência de grafismos sofisticados e rapidez de processamento por parte dos jogos, leva a que as características das aplicações nativas sejam mais indicadas para a construção dos mesmos. Este argumento é cada vez mais um mito, com a capacidade crescente do hardware dos dispositivos móveis, que leva a que cada vez menos jogos e aplicações, em geral, tenham de ser forçosamente desenvolvidos com recurso a programação nativa. Neste capítulo vamos abordar brevemente o tema dos jogos e mostrar ao leitor um dos caminhos que pode seguir se pretender enveredar por esta atividade.

10.1 JJOOGGOOSS HHTTMMLL Desde que existe HTML que se fazem jogos com recurso a esta linguagem para

utilização na Web. Contudo, somente desde a versão 5 se tornou possível um nível de sofisticação minimamente interessante que tornasse esta opção credível para quem quisesse desenvolver um jogo.

A utilização de HTML5 como plataforma para o desenvolvimento de jogos tem diversas vantagens:

�� Os jogos funcionam em qualquer dispositivo e plataforma, sem necessidade de construir múltiplas versões. Podem ser executados em PC, tablets, smartphones e outros dispositivos, independentemente do sistema operativo que tenham;

�� Mesmo considerando o ponto anterior, com recurso a plataformas de desenvolvimento híbridas, como o PhoneGap, os jogos podem ter acesso a todas as características do hardware do dispositivo, como se de uma aplicação nativa se tratasse;

�� Pode fazer-se uma utilização totalmente online, o que leva a que não haja necessidade de atualizações locais ou, em alternativa, utilizar versões locais de aplicações;

�� As capacidades gráficas e multimédia do HTML5 são bastante boas, possibi-litando a construção de jogos de grafismo exigente.

Existe uma óbvia vantagem de performance em utilizar desenvolvimento nativo para as várias plataformas e, obviamente, o desempenho nunca irá ser o mesmo do que

Page 28: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

248

se consegue numa aplicação híbrida. O processamento necessário para a realização de muitas das operações de natureza gráfica ou multimédia que são necessárias nos jogos leva muitos programadores a preferirem desenvolver em linguagem nativa para os dispositivos em causa, fazendo com que a experiência para os utilizadores seja a melhor possível. No entanto, esta desvantagem face ao modelo de desenvolvimento nativo tem vindo desde há algum tempo a ser mitigada com a evolução do hardware. Apesar disso, para modelos de gama mais baixa, esta diferença pode ser ainda significativa.

Existem muitos jogos HTML disponíveis, e vários em código aberto. Vejamos um exemplo de um jogo mundialmente conhecido (o Tetris), e a facilidade com que se pode implementar com recurso a HTML5. O código é da autoria de Dionyziz Zindos1:

EEXXEEMMPPLLOO 1100..11 –– TTEETTRRIISS

Ficheiro “index.html” <!DOCTYPE html>

<html>

<head>

<title>HTML5 Tetris</title>

<link rel='stylesheet' href='style.css' />

</head>

<body>

<audio id="clearsound" src="sound/pop.ogg" preload="auto"></audio>

<canvas width='300' height='600'></canvas>

<script src='js/tetris.js'></script>

<script src='js/controller.js'></script>

<script src='js/render.js'></script>

</body>

</html>

Este primeiro ficheiro contém somente a estrutura da aplicação, instanciando o objeto “Canvas”, associando o som, e ligando os ficheiros JavaScript necessários. Segue-se o ficheiro controlador:

Ficheiro “Controller.js” document.body.onkeydown = function( e ) {

var keys = {

37: 'left',

39: 'right',

1 Mais informação em http://www.youtube.com/watch?v=GQTZ_TPxJhM.

Page 29: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

111111 1IINNTTEEGGRRAAÇÇÃÃOO CCOOMM RREEDDEESS SSOOCCIIAAIISS

As redes sociais fazem hoje parte do dia a dia da maior parte dos utilizadores da Internet, e também dos utilizadores de dispositivos móveis. E a sua importância tornou-se tão significativa que, muitas das aplicações e sites que são desenvolvidos, acabam por ter algum tipo de integração com elas. Neste capítulo analisaremos a forma como as aplicações híbridas podem interagir com as redes sociais, e veremos alguns exemplos de integração com uma delas (a mais conhecida, o Facebook).

11.1 IINNTTEEGGRRAAÇÇÃÃOO CCOOMM RREEDDEESS SSOOCCIIAAIISS Quando se fala de integração de uma aplicação móvel com redes sociais, estamos

na verdade a falar de duas funcionalidades bastante distintas:

�� Funcionalidade de partilha — a possibilidade de partilhar nas redes sociais um determinado conteúdo no contexto do que estamos a fazer na app "atenção mundo, acabei de fazer isto" (por exemplo, Facebook, Twitter, Foursquare, …;

�� Funcionalidade de autenticação — a possibilidade de autenticar o utilizador através de uma conta de uma rede social (habitualmente, Google ou Facebook).

Estas funcionalidades vêm trazer um conjunto de vantagens que são evidentes e que são o motivo pelo qual muitos programadores acabam por integrar as suas aplicações com estas redes:

�� Aumento da visibilidade da aplicação — o utilizador está a transmitir a todos os seus amigos que a está a usar. As redes sociais são um “canal de marketing”;

�� Facilidade de uso — não é necessário dar-se ao trabalho de fazer um registo, bastando carregar num botão para usar a sua conta de Google ou Facebook; é muito mais simples;

�� Aumento da utilização — também derivado do ponto anterior (mais simples);

Page 30: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

266

�� Aumento da probabilidade de uma app se tornar viral — ao ser partilhada numa rede social, tudo é possível. Há casos de aplicações banais que passaram a ser utilizadas por milhões de pessoas, devido a efeitos deste tipo;

�� Acesso a dados analíticos — a rede social disponibiliza informação que pode ser preciosa sobre a atividade dos utilizadores relativamente à aplicação.

11.2 PPAARRTTIILLHHAA EEMM RREEDDEESS SSOOCCIIAAIISS A partilha de um determinado evento numa rede social é algo que muitos

utilizadores fazem em determinados contextos, informando as suas comunidades de amigos ou conhecidos que fizeram ou viram algo e, muitas vezes, partilhando fotos ou links em conjunto. No contexto de uma aplicação há, por vezes, interesse em partilhar com os amigos que se conseguiu ou se fez alguma coisa, mostrando assim a uma comunidade alargada de pessoas que se está a usar uma determinada aplicação.

As redes sociais disponibilizam API para que as aplicações a elas se conectem, mas impõem algumas restrições. O Facebook, por exemplo, não permite que a sua API seja utilizada para publicar algo em nome de um utilizador. Antes faz surgir uma janela para que o utilizador escreva algo. O objetivo é impedir que as aplicações publiquem conteúdos escritos em nome dos utilizadores, mas é permitido que a aplicação coloque, na janela de publicação, um link e uma imagem, que o utilizador pode editar e apagar de qualquer forma. Em última análise, a decisão de publicar ou não é sempre do utilizador e não da aplicação.

Vejamos um exemplo de como podemos publicar em redes sociais com recurso ao plug-in “socialsharing”. Criamos uma aplicação, como habitualmente, e adicionamos o plug-in “socialsharing”: cordova create cap11social1 com.pedrocoelho.cap11social1 cap11social1

cd cap11social1

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-file

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-whitelist

cordova plugin add cordova-plugin-console

cordova plugin add cordova-plugin-socialsharing

cordova platform add android

Para utilizar o plug-in temos necessidade de incluir no projeto uma biblioteca da Apache que inclui algum código legacy, o que podemos fazer adicionando-a ao “Java Build Path”, como mostrado na Figura 11.1. Podemos localizar o “.jar” correspondente no interior do Android SDK.

Page 31: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

111222 1TTEESSTTEE DDEE AAPPLLIICCAAÇÇÕÕEESS

Todos os projetos de software, tal como todos os projetos de qualquer natureza, estão sujeitos a erros. Em qualquer projeto de desenvolvimento, a qualidade do produto final depende grandemente do esforço de testes, e consequente correção, que seja efetuado após o seu desenvolvimento. Neste capítulo vamos tratar de testes, e descrever como podem ser implementados de forma profissional para dar resposta aos desafios das aplicações móveis.

12.1 TTEESSTTEESS DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS –– PPAARRAA QQUUÊÊ?? Qualquer programador faz testes ao código que produz. Durante o processo de

desenvolvimento as funcionalidades vão sendo testadas, sendo que, quando um programa é dado como concluído pelo programador, não significa que esteja pronto para ser utilizado.

Um determinado programa é tipicamente construído para corresponder a uma especificação, ou a um conjunto de requisitos, ou a uma user story (se estivermos a utilizar desenvolvimento Agile). Mandam as boas-práticas do desenvolvimento que o autor da especificação, que deu origem ao programa ou sistema, faça a validação, ou os testes, do produto desenvolvido, sendo que tipicamente será encontrado um conjunto de erros ou não conformidades, que serão corrigidas pelo programador.

Na verdade, durante um processo de desenvolvimento, praticam-se diversos níveis de testes:

�� Testes unitários – são testes tipicamente efetuados pelos programadores à medida que trabalham no código, ao nível das funções e dos métodos. A este nível não se testam funcionalidades de blocos de código, a não ser de uma forma ad hoc (não sistemática);

�� Testes de integração – são testes que verificam o funcionamento das interfaces entre os vários componentes, de acordo com uma especificação;

�� Testes de interface – são testes que se focam no comportamento das interfaces, em particular na resposta aos dados introduzidos;

�� Testes de sistema – são testes a todas as funcionalidades do sistema, devidamente integrados;

Page 32: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

284

�� Testes de aceitação – é o conjunto de testes exaustivos que dita se um sistema entra ou não em produção, normalmente fazem parte do sistema de qualidade das organizações.

Estes testes aplicam-se naturalmente a projetos de software mais complexos e podem ser de diversos tipos. Testar significa verificar se algo está em conformidade com um determinado padrão e não simplesmente “procurar erros”.

De entre os diferentes tipos de testes existentes, destacam-se:

�� Testes funcionais – para verificar se um conjunto de funcionalidades descritas numa especificação funciona, de facto, como previsto;

�� Testes de segurança – para verificar se o software ou sistema apresenta vulnerabilidades de segurança;

�� Testes de carga/escalabilidade – para verificar se o software suporta ou não o nível de utilização esperado;

�� Testes de usabilidade – para verificar se a interface produzida é facilmente entendida pelos utilizadores;

�� Testes de regressão – para repetir um conjunto de testes já efetuado, tipicamente após uma alteração no código (motivada por uma correção ou evolução).

De realçar que existem outros tipos de testes possíveis, mas estes são os mais comuns.

Na construção de uma aplicação, o programador efetuará sempre testes unitários (embora nem sempre de uma forma exaustiva e sistemática) e o dono da mesma deverá sempre, no mínimo, realizar testes de sistema antes de a publicar ou divulgar. A forma correta de fazer estes testes passa por produzir um documento contendo os chamados casos de teste, isto é, uma listagem descritiva de testes cuja execução com sucesso determina o cumprimento, por parte de uma aplicação, de um conjunto de requisitos, tipicamente contidos num documento de especificação funcional.

Os testes podem ser feitos manualmente, seguindo-se um plano de testes, e ela-borando no final um relatório contendo os resultados, para cada um dos casos de teste. No entanto, é uma prática comum que os testadores, à medida que vão encontrando erros, os submetam sob a forma de tickets (que podem ser apenas linhas numa folha Excel) para que o programador os vá resolvendo.

No caso das aplicações móveis é frequente o programador trabalhar sozinho. Nesta situação, recomenda-se que o programador assuma, pelo menos, os papéis distintos de programador e testador, em momentos diferentes, efetuando sempre os testes de

Page 33: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

©© FFCCAA

111333 1PPUUBBLLIICCAAÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS NNAASS

SSTTOORREESS

As aplicações móveis podem ser distribuídas de várias formas e, tecnicamente, existem diversas formas de o conseguir fazer. Mas se, na prática, o autor das aplicações quiser chegar ao grande público, a forma de o fazer é utilizando as chamadas lojas de aplicações (vulgo stores). Neste capítulo final vamos analisar como podemos publicar nas stores de aplicações e ver como, na prática, publicar a aplicação de bloco de notas que construímos no Capítulo 8.

13.1 OO QQUUEE SSÃÃOO LLOOJJAASS DDEE AAPPLLIICCAAÇÇÕÕEESS?? As lojas de aplicações não são mais do que lojas online nas quais os utilizadores

podem encontrar e transferir as aplicações para os seus dispositivos, podendo estas ser gratuitas ou pagas. Apesar de existirem várias lojas, as políticas fechadas que os fabri-cantes de sistemas operativos implementaram nos últimos anos levaram a que, na prática, a maioria das aplicações móveis se concentre nas lojas da Google e da Apple. Há, contudo, um conjunto de lojas de aplicações móveis que são relevantes:

�� Google Play Store – a loja de aplicações para o mundo Android;

�� Apple Store – a loja de aplicações para o mundo Apple/iPhone/iOS;

�� Windows Store – a loja de aplicações da Microsoft;

�� Amazon App Store – a loja de aplicações da Amazon;

�� Blackberry World – a loja de aplicações da Blackberry.

No início de 2017, a loja da Google contava com cerca de 3 milhões de aplicações, e a da Apple com mais de 2 milhões, sendo as mais representativas. As lojas da Microsoft e da Amazon contavam com cerca de 600 mil apps, e a da Blackberry com cerca de 200 mil.

Estas lojas não são de utilização gratuita, baseando-se no princípio de que são as lojas que cobram o utilizador e ficam com uma percentagem dos valores cobrados, e em todas existe um acordo de utilização, com algumas normas que o programador tem de seguir. Em geral, as stores fazem uma verificação mínima dos conteúdos publicados (a Apple é a loja que tem o processo de validação mais rigoroso, revendo individualmente todas as

Page 34: Construção de Aplicações Móveis Híbridas com o PhoneGap ......Muitos dos utilizadores de smartphones habituaram-se a importar e executar aplicações disponíveis nas lojas

CCOONNSSTTRRUUÇÇÃÃOO DDEE AAPPLLIICCAAÇÇÕÕEESS MMÓÓVVEEIISS HHÍÍBBRRIIDDAASS CCOOMM OO PPHHOONNEEGGAAPP

©© FFCCAA

300

aplicações), mas, fundamentalmente, o autor é o responsável pelos conteúdos que publica, não podendo, contudo, infringir algumas regras.

As lojas têm implementadas funcionalidades de pagamento, que podem ser utilizadas pelas aplicações de duas formas:

�� Para aquisição da aplicação, tipicamente dando um direito perpétuo de utilização (que o cliente pode levar para outros dispositivos);

�� Para compras de conteúdos e funcionalidades dentro da própria aplicação, uma fórmula muito utilizada para rentabilizar as aplicações.

Caso o leitor pretenda planear um projeto de construção de uma aplicação e posterior publicação nas stores, deverá saber que o processo de publicação na Apple Store poderá levar algum tempo (se houver questões e interação com a equipa da Apple poderá facilmente demorar 1 a 2 semanas), mas em relação às restantes o processo é bem mais rápido.

No caso da Google, a publicação é, na verdade, direta, podendo, se não houver problemas, a aplicação ficar disponível logo após o desencadear do processo de publicação.

13.2 PPUUBBLLIICCAAÇÇÃÃOO DDOO CCAASSOO PPRRÁÁTTIICCOO NNAA GGOOOOGGLLEE SSTTOORREE Para demonstrar a publicação de uma aplicação numa store, recuperemos o nosso

exemplo do Capítulo 8 (Figura 13.1), e o exemplo completo que produzimos do nosso bloco de notas. A aplicação reúne as características necessárias para poder ser publicada, embora deva ainda ser testada, e ser alvo de alguns potenciais ajustes e correções antes de ser divulgada.

Neste exemplo, vamos publicá-la na Google Store, e tirar partido de uma funciona-lidade que possibilita que a aplicação seja libertada como “beta”, ou seja, estar disponível na loja para quem a queira encontrar, num estado em que somente utilizadores que declarem explicitamente que querem poder testar aplicações beta a irão ver.

A vantagem é que isto abre a toda a comunidade, de muitos milhões de utiliza-dores da plataforma, a possibilidade de testar, e utilizar, a nossa aplicação. Receber feedback de múltiplos utilizadores reais da aplicação tem bastante valor, não só porque constitui uma sequência de testes reais muito mais exaustivos do que uma plataforma de testes o poderia fazer, mas também porque podemos recolher sugestões de alterações que podem enriquecer, ou tornar mais amigável, a aplicação.

Quando estivermos satisfeitos com o estado da aplicação (podemos ir publicando novas versões à medida que vamos recebendo o feedback), podemos passar a mesma para o estado de “em produção”, com uma interação muito simples com a plataforma.