HTML5 - Construção de Apps Móveis (eBook)

HTML5 CONSTRUÇÃO DE APPS MÓVEIS

Pedro Coelho

FCA – Editora de Informática, Lda www.fca.pt

EDIÇÃO FCA – Editora de Informática, Lda. www.fca.pt Copyright © 2016, FCA – Editora de Informática, Lda. ISBN eBook: 978-972-722-827-0 1.ª edição eBook: maio 2016 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 qualquer processo 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.

ÍNDICE GERAL 0. SOBRE O LIVRO 0.1. O que posso encontrar neste livro 0.2. Requisitos 0.3. A quem se dirige este livro 0.4. Código dos exemplos 0.5. Convenções 0.6. Sobre o Autor 0.7. Organização do livro 0.8. Suporte 1. APLICAÇÕES MÓVEIS: NATIVAS OU HTML5?

1.1. Aplicações nativas e aplicações HTML5 1.2. Aplicações híbridas Conclusão 2. DADOS E COMUNICAÇÕES: DATASETS, FILES E WEBSOCKETS 2.1. Aplicações Web 2.2. Datasets 2.3. Files 2.4. Websockets 2.5. Webworkers Conclusão 3. GEOLOCALIZAÇÃO 3.1. Introdução 3.2. Utilizando geolocalização Conclusão 4. CONSTRUINDO APLICAÇÕES MÓVEIS

4.1. Exemplo prático 1 : calculadora 4.2. Exemplo prático 2 : velocímetro 4.3. Jogos Conclusão 5. OFFLINE E WEBSTORAGE 5.1. Offline Web 5.2. WebStorage Conclusão 6. APLICAÇÕES HTML5 HÍBRIDAS E CONVERSÃO PARA NATIVAS 6.1. Instalação do Phonegap 6.2. Construindo aplicações híbridas Conclusão GLOSSÁRIO DE TERMOS – PORTUGUÊS EUROPEU/PORTUGUÊS DO BRASIL ÍNDICE REMISSIVO COMPLEMENTOS NA WEB

0

SOBRE O LIVRO

0.1 O QUE POSSO ENCONTRAR NESTE LIVRO Este livro foca o tema do desenvolvimento de aplicações móveis com recurso ao HTML5, explicando o enquadramento tecnológico atual no que respeita ao desenvolvimento de aplicações móveis e cobrindo com algum detalhe os motivos que levam alguns utilizadores a optar pelo desenvolvimento de aplicações nativas, outros por HTML5, e outros ainda por híbridas.

Destaca-se, também, as aplicações híbridas, por se tratar de uma forma cada vez mais usada para a distribuição de aplicações móveis feitas em HTML5, apresentando-se como deverão ser configurados os ambientes de desenvolvimento para trabalhar este tipo de aplicações, já que a respetiva instalação não é trivial e é alvo de dúvidas recorrentes por parte de programadores, mesmo com alguma experiência.

Como não podia deixar de ser, é dado o devido destaque às API específicas de que os dispositivos móveis dispõem para interagir, como a geolocalização, o Offline, etc.

Pretende-se que o leitor no final da leitura do livro tenha aprendido a utilizar estas tecnologias para criar e publicar aplicações móveis, incluindo a interação com as várias API HTML5 disponíveis.

0.2 REQUISITOS O leitor deverá ter conhecimentos de HTML5, incluindo CSS e Javascript.

Para tirar o melhor partido possível dos exemplos, o leitor deverá instalar um editor (recomenda-se o Eclipse) e abrir uma conta num ambiente de desenvolvimento cloud (sugere-se o Heroku, gratuito para baixos volumes de utilização).

0.3 A QUEM SE DIRIGE ESTE LIVRO Este livro destina-se a quem pretenda iniciar-se no desenvolvimento de aplicações móveis, com recurso a uma tecnologia simples e acessível, como é o HTML5, ou aqueles que, já efetuando desenvolvimento de aplicações móveis nativas, pretendam rapidamente iniciar-se no desenvolvimento de aplicações HTML5, por exemplo híbridas.

0.4 CÓDIGO DOS EXEMPLOS O livro vem acompanhado do código dos exemplos que são apresentados ao longo dos vários capítulos, com uma nomenclatura que torna simples ao leitor localizar qualquer um deles. Caso o leitor use o Eclipse, pode importar os ficheiros diretamente para os seus projetos e testar as funcionalidades descritas (de notar, no entanto, que para publicar conteúdos na Web tem que dispor de uma conta para o efeito, podendo, conforme aconteceu nos exemplos do livro, utilizar os serviços online do Heroku (integrável diretamente com o seu Eclipse).

Todos os exemplos apresentados foram testados com um dispositivo real, com emuladores e com browsers Web, conforme os exemplos.

0.5 CONVENÇÕES Nos exemplos listados optou-se por mostrar todo o código HTML tal como foi testado. Em situações específicas extraiu-se parte desse código para realçar algum detalhe, mas no geral a regra seguida foi a de mostrar todo o código, para possibilitar ao leitor um total enquadramento.

Utilizou-se a expressão anglo-saxónica tag para designar os elementos HTML.

0.6 SOBRE O AUTOR Licenciado em Engenharia Eletrotécnica e de Computadores pelo Instituto Superior Técnico. Consultor e Gestor de Projetos de TI nas áreas da Web e da Internet. Com mais de 20 anos de experiência, já esteve envolvido em grandes projetos. 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, 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.

0.7 ORGANIZAÇÃO DO LIVRO O livro foi estruturado em 6 capítulos, seguindo uma lógica de aprendizagem sequencial das várias componentes da tecnologia: Capítulo 1: “Aplicações móveis: nativas ou HTML5?” – capítulo introdutório no qual se foca o tema das aplicações nativas vs. HTML5, e como escolher a melhor tecnologia para cada fim;

Capítulo 2: “Dados e Comunicações: Datasets, Files e Websockets” – cobertura de temas específicos das aplicações Web, tais como a utilização de Datasets e Files; Capítulo 3: “Geolocalização” – descrição da forma como se utiliza a API de geolocalização para construção de aplicações com recurso a localização geográfica; Capítulo 4: “Construindo Aplicações Móveis” – exemplos práticos de construção de aplicações móveis; Capítulo 5: “Offline e WebStorage” – análise dos temas da utilização de aplicações Web em modo offline (desligado da rede) e do armazenamento de dados; Capítulo 6: “Aplicações HTML5 Híbridas e Conversão para Nativas” – cobertura do tema das aplicações híbridas, abordando-se pormenorizadamente a conversão para execução como aplicações móveis nos dispositivos.

0.8 SUPORTE Todos os exemplos foram testados com dispositivos móveis reais e emuladores, não sendo expectável que surjam problemas de compatibilidade de versões em terminais ou browsers recentes.

Para qualquer questão, problema ou dúvida, o leitor poderá contactar o autor através do e-mail pac@pedrocoelho.com.

1

APLICAÇÕES MÓVEIS: NATIVAS OU HTML5?

Com o aparecimento dos smartphones e com a grande evolução que o hardware dos dispositivos móveis teve pouco antes do aparecimento do HTML5, abriu-se espaço para o desenvolvimento de aplicações a serem executadas nos dispositivos. As diversas lojas online encheram-se de aplicações nativas para as várias plataformas. Por outro lado, uma das facetas inovadoras mais significativas do HTML5 é precisamente a dos conteúdos e aplicações em ambiente móvel. Portanto, coloca-se uma questão: optar por aplicações nativas ou por HTML5 quando se pretende criar aplicações móveis?

1.1 APLICAÇÕES NATIVAS E APLICAÇÕES HTML5 Segundo dados da Gartner, a partir de 2009 o crescimento do número de smartphones e tablets tem sido exponencial, enquanto o fornecimento de novos PC tem estado estável, apresentando mesmo algum declínio desde 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 estas aplicações a partir das lojas. Estas aplicações são na sua maioria nativas, isto é, programas construídos para funcionarem num ambiente de sistema operativo específico e que estão adaptadas a ele.

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 telemóveis desde versões antigas, mas que só com o aparecimento do HTML5 começou a ser uma alternativa credível para a disponibilização de funcionalidades aplicacionais.

As aplicações nativas têm várias vantagens. Por serem desenhadas para um equipamento específico, tiram maior partido das características de hardware deste, quer em termos gráficos, quer em termos das várias funcionalidades que o sistema 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, tipicamente conseguindo o melhor que o hardware possibilita.

Por outro lado, 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 nativas e estão pouco habituados sequer a utilizar o browser do seu dispositivo. De facto, verifica-se 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).

Fonte: Nielsen Smartphone Analytics FIGURA 1.1 – Utilização de apps versus Web móvel

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 este estado de coisas 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 custo de produção da aplicaçã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: Utilizar uma app que está na Web implica ter conetividade. Existem formas de utilizar as aplicações HTML5 em modo offline, com recurso a mecanismos de cache, mas de uma forma geral uma aplicação nativa está mais bem preparada para funcionar offline; Há diferentes versões de browsers mobile, que têm também as suas diferenças, à semelhança do que acontece com os browsers Web. Há funcionalidades do HTML5 que não são suportadas nalguns browsers; A interface das aplicações nativas tem capacidades superiores, ao nível gráfico e ao nível de performance. Na maioria das aplicações, isto é irrelevante, mas, por exemplo, em jogos, é um fator muito importante; As aplicações nativas apresentam mecanismos de segurança mais sólidos e consistentes. A utilização de dados em cache por parte das aplicações HTML pode ser um risco de segurança se tais dados forem sensíveis, porque essas caches não são encriptadas; O código nas aplicações nativas não é portável e em muitos casos não é reutilizável. Numa aplicação HTML o mesmo código pode ser usado nas várias plataformas; São necessários programadores com experiência e conhecimento específicos nas plataformas para as quais se pretende desenvolver aplicações nativas. Por oposição, há muitos

programadores no mercado com experiência em desenvolvimento de aplicações Web, que pode facilmente ser convertido para aplicações mobile HTML5; A aplicação HTML5 não precisa de loja para ser disponibilizada, e como tal não é necessário nenhum processo de certificação demorado e caro. Basta colocá-la na Web para estar disponível.

O HTML5 enfrenta desafios óbvios na sua “luta” com as aplicações nativas. Há algum caminho ainda a percorrer para que as aplicações HTML5 possam ser competitivas com as nativas, nomeadamente em termos de capacidades de controlo do hardware. Também será necessário que haja uma maior convergência em termos de os browsers móveis suportarem HTML5 de uma forma mais abrangente.

No entanto, a maioria dos analistas considera o HTML5 como a linguagem preferencial para a criação de aplicações num futuro próximo.

Fatores como a forma como se desenvolve uma vez para executar em todas as plataformas ou a maior disponibilidade de conhecimento sobre o HTML5 poderão fazer pender no futuro boa parte das novas aplicações para o lado do HTML5, em especial se se verificar uma convergência das diferenças técnicas que ainda persistem. Isto já começa a acontecer no desenvolvimento de natureza empresarial, onde os custos de desenvolvimento são um fator importante, e acontecerá certamente no segmento residencial.

Há exemplos contraditórios de empresas que tomaram decisões de escolha de aplicações nativas versus HTML5. O LinkedIn por exemplo, trocou a sua aplicação HTML5, em 2012, por uma aplicação nativa, por questões de performance. O Facebook arrependeu-se publicamente de ter escolhido o HTML5 face ao nativo, devido às diferenças de suporte do HTML5 nos browsers móveis, mas Mark Zuckerberg, fundador do Facebook, mencionou que via o HTML5 como a tecnologia natural no mundo móvel no futuro. Em sentido contrário, o Financial Times trocou em 2011

a sua aplicação nativa por uma aplicação HTML5, para não ter de pagar as taxas que lhe eram cobradas pela Apple na sua store. Outro exemplo curioso foi o da Playboy, que construiu a sua app em HTML5, disponibilizando-a na Web para escapar à censura que as stores habitualmente fazem a este tipo de conteúdos.

FIGURA 1.2 – Facebook Mobile App

Percebe-se que muitos dos problemas sentidos pelos primeiros utilizadores da tecnologia HTML5 derivaram sobretudo do facto de se tratar de uma tecnologia recente e de não terem sido tidas em conta as vantagens e desvantagens da mesma, para o contexto específico de cada aplicação.

O problema da fragmentação, referido pelos responsáveis do Facebook, é um dos mais complicados de resolver pelos produtores de aplicações e sites móveis. Se é verdade que, num mundo perfeito, todos os browsers deveriam poder aceder a todos os conteúdos na Web, na verdade os programadores sentem a necessidade de adaptar os seus sites móveis para lidar com um número crescente de dispositivos, browsers e

características. Em termos práticos, há três metodologias que os programadores seguem para lidar com este problema: Do lado do cliente: → Responsive Web Design – trata-se de um design que coloca os elementos numa grelha flexível, com imagens também flexíveis e um conjunto de queries CSS, que se ajustam ao tipo de dispositivo e resolução. Esta técnica é bastante eficaz para sites móveis simples, mas suporta um número relativamente limitado de dispositivos. Tem a vantagem de ser o próprio cliente a ajustar os elementos de design conforme a capacidade do dispositivo, sem ter de haver qualquer intervenção do lado do servidor, num processo totalmente automático, mas em que o mesmo conteúdo é visualizado em todos os dispositivos (o que pode ser bom ou pode ser mau); → Progressive Enhancement – esta técnica, também do lado do cliente, consiste na disponibilização de uma página HTML para todos os dispositivos, mas disponibilizando as funcionalidades em função do que o dispositivo suporta. A operação de progressive enhancement é feita com recurso a JavaScript e, por ser uma técnica aplicada do lado do cliente, pode apresentar problemas de performance em alguns dispositivos. A framework mais conhecida que implementa este tipo de funcionalidade dá pelo nome de jQuery Mobile; Do lado do servidor – as tecnologias que do lado do servidor servem uma página específica correspondente ao dispositivo móvel que acede, que é detetado e comparado com uma base de dados, que vai sendo permanentemente atualizada com os dispositivos do mercado. Uma das mais conhecidas é a WURFL, uma framework que possibilita ao programador a invocação de elementos abstratos (botões, listas, etc.) que depois são

convertidos em código HTML otimizado para o dispositivo que está a aceder. Este produto, anteriormente open source, está agora sujeito a licenciamento; Soluções de adaptação híbrida – soluções comerciais que simultaneamente efetuam adaptação do lado do servidor e do lado do cliente, garantindo a operação com o máximo de performance e simultaneamente de funcionalidades.

Com os dispositivos que existem atualmente, tablets e telemóveis com grande capacidade de processamento, utilizar uma solução de HTML5 com responsive design, ou jQuery Mobile é uma solução muito adequada para servir conteúdos móveis. Isto só irá melhorar com a entrada em funcionamento de dispositivos cada vez mais poderosos.

Em muitas situações, é difícil distinguir uma aplicação nativa de uma HTML5, pelo que os criadores de aplicações devem ponderar os prós e os contras de uma e de outra, decidindo com base nas necessidades da sua aplicação específica. Muitos developers, hoje em dia, concordam que há pleno espaço para aplicações nativas, Web/HTML5 e também híbridas, porque a escolha depende de facto das características pretendidas para a aplicação a construir. Ou seja, não se discute qual das tecnologias nativa, Web ou híbrida vai persistir, mas antes qual utilizar para cada caso específico.