Novo capitulo na evolução do desenvolvedor web

O mundo para o desenvolvedor web, principalmente para o desenvolvedor front-end vem sofrendo grandes mudanças com o advento do HTML5 e suas APIs. Não se trata mais só de colar pedaços de código, agora a nova web é responsiva, semântica e interativa. Surgiram novas tecnologias e dispositivos que obrigam o desenvolvedor front-end a evoluir, porém essa evolução ainda fica comprometida devido a falta de abrangência do HTML5 nos browsers de desktops. Hoje venho apresentar um cenário que talvez muitos não conheçam e por consequência estejam perdendo a oportunidade de evoluir e se desafiar numa nova plataforma, com o conhecimento que muitos já dispõem.

O HTML5 é eleito como a solução para o desafio multiplataforma; podemos ir muito alem do site que pode ser aberto em qualquer dispositivo que tenha um browser instalado. A proposta da 5ª geração do HTML é cuidar da interface de qualquer programa, independente do sistema operacional. Hoje a interface de um aplicativo com as principais interações podem ser exportadas, com poucos ajustes, para as principais plataformas do mercado atualmente (Windows 8, Smart TVs, iOS, Android, Blackberry, Web OS, Bada e etc) – no caso do Windows 8, essa é mais que uma alternativa; é uma forte opção em relação ao C++/C#/VB (entenda um pouco mais nesse link ou nesse vídeo).

Já chamei sua atenção para o HTML5 como alternativa para diversas plataformas e que esse tem a missão de ajudar a diminuir o esforço em desenvolver para múltiplas plataformas, agora nosso olhar vai ser direcionado especialmente para o ambiente móbile, mais especificamente para iOS e Android.

A boa notícia é que, para entrar no mundo dos aplicativos mobiles, a tecnologia está do lado dos desenvolvedores. Apesar dos apps nativos aparecerem com muitas inovações explorando as características dos equipamentos móveis, a web já evoluiu e no mobile, o html5 já é uma realidade, possibilitando a criação de aplicativos web tão interessantes quanto apps nativos. Com a ajuda dos Frameworks mobile (Phonegap, Titanium e etc) é possível contornar a questão do acesso aos recursos dos aparelhos, pois eles fornecem uma interface Javascript para acesso às funções das plataformas suportadas. Além de usar frameworks, ainda temos a opção de usar Webviews dentro do nosso app nativo para renderizar a interface HTML5 possibilitando fazer de forma simples a integração entre o código nativo e o javascript.

WEB apps

A longo prazo, para qualquer publicador de aplicativos, ir para a web móvel será uma solução muito mais prática do que apps nativos. Desenvolver para a web móvel é mais fácil e barato, pois não há a dependência das app stores para distribuição. Criar, testar, submeter e manter apps para todas as plataformas é caro e complexo. O HTML5 ajuda, mas não resolve totalmente as incompatibilidades, essa deve ser analisada e seus prós e contras avaliados.

Existem mais de cem elementos na HTML5. Alguns são puramente semânticos, outros são apenas recipientes para APIs de script, porém, alguns merecem destaque para a construção de apps HTML5. São eles:

API Geolocation – Com essa api conseguimos obter sua localização em coordenadas geográficas;
Offline – O Cache do Aplicativo (ou AppCache) permite que o desenvolvedor especifique quais arquivos o navegador pode armazenar em cache e disponibilizar para usuários off-line. O aplicativo será carregado e funcionará corretamente, mesmo se o usuário pressionar o botão “Atualizar” enquanto estiver off-line. Mais informações aqui.
Web Storage – É a forma de páginas da web armazenarem pares de chave/valor localmente, dentro do navegador do cliente. Semelhante aos cookies, esses dados persistem mesmo depois de você sair do site, fechar a guia ou o navegador. Mais informações aqui.
Web Database – Fornece uma fina camada em torno de uma base de dados SQL, permitindo que você persista dados usando SQL pelo JavaScript. Mais informações aqui.
Canvas – O Canvas é um novo elemento do HTML5 que permite desenhar gráficos usando o JavaScript. Mais informações aqui.
WebSocket – A especificação define uma API que estabelece conexões de “soquete” entre um navegador da web e um servidor. Em outras palavras, há uma conexão persistente entre o cliente e o servidor e ambas as partes podem começar a enviar dados a qualquer momento.
Novos tipos de form inputs – Veja mais sobre o assunto aqui.

Esse é um bom livro pra começar estudar HTML5: http://diveintohtml5.com.br/.

Como a maioria deve saber, o aplicativo do Facebook para mobile era feito em HTLM5, que rodava dentro de um app nativo. Recentemente eles mudaram isso em decorrência de sua estratégia, mas isso prova que há tempos essa é uma abordagem viável – você pode conferir sobre a decisão aqui.

A equipe da Secha fiz um vídeo, intitulado “HTML5 is ready”, que compara um app feito em HTML5, usando o Framework Secha Touch, com a versão nativa do app do Facebook. Os testes foram feitos nas plataformas iOS e Android. Assita ao vídeo e tire suas próprias conclusões.

Ainda nessa linha “do que podemos fazer com HTML5 no ambiente mobile”, temos mais um exemplo, que é a migração do “Cut the rope”. Trata se de um jogo iOS que passou a funcionar na web. Uma descrição de como foi feita a transição dos recursos implementados em Objetive-C para HTML5 pode ser vista nesse link e para conferir o resultado clique aqui.

Os web apps são vistos com bons olhos também pela Apple; ela dedica uma área do seu site para exibir vários apps que usam o browser como motor principal. Veja a lista aqui.

Mais do que isso, a Apple também disponibiliza um recurso nos seus aparelhos, que é a opção de adicionar um ícone na sua área de trabalho. Essa opção permite o acesso ao app direto e de forma fullscreen, sem a barra de endereço. Do seu device Apple, acesse a seguinte url HTTP://portalcoop.com.br/mobile_final/ofertas.html e veja um exemplo ou se preferir assista a esse vídeo

Essa abordagem, junto com algumas funções que citei acima, poderá oferecer uma ótima experiência para o seu web app, assemelhando-o há um app nativo. Infelizmente, no Android não temos um recurso parecido, porém no Android é muito mais simples de instalar um app, de forma que você consegue deixar um link apontando para um apk (entensão Android), bastando acessar esse link para começar a instalação do seu app no device do cliente (uma alternativa se não quiser usar a play store).

Se ainda não estiver convencido com as possibilidades do HTML5 para mobile, visite também a lista de apps desenvolvidos com o Sencha Touch (um framework HTML5).

Aplicativo híbrido Web Nativo

O conceito básico por trás dos aplicativos HTML5 híbridos é que seus apps são simplesmente um navegador web de tela cheia, que hospeda a lógica escrita em JavaScript, e então, usa as APIs do WebBrowser para passar mensagens entre seu código JavaScript e as APIs nativas, de forma a acessar os recursos do aparelho, como câmera, acelerômetro, etc.

Podemos desenvolver apps híbridos de duas formas: na primeira podemos construir um app nativo comum e, então, usar a API Webview para renderizar nosso HTML5 na camada visual do aplicativo e cuidar da integração entre o Javascript e o código nativo. Quando necessário acessar um recurso do device, essa abordagem necessita também de conhecimento sobre cada plataforma e de como integrar as duas camadas. Abaixo estão os links para a documentação das plataformas iOS e Android que cuidam dessa integração:

Android;
iOS.

A segunda solução é usar um framework que faça esse “meio-de-campo” para integrar sua app com as plataformas suportadas, no caso minha escolha tem sido o Phonegap, que é um projeto open source que já roda há alguns anos e com suporte á sete plataformas, significando que o acesso dos recursos em Android, iPhone, Windows Phone e outros é garantido com as mesmas APIs JavaScript.

O Phonegap oferece diversas apis para acesso a recursos do aparelho a partir do seu código Javascript, e quando se precisa de algo específico podemos criar plugins que executam tarefas usando as APIs nativas escritas na linguagem padrão do SO, permitindo à empresa terceirizar somente essa funcionalidade a mais para a plataforma em questão.

O Phonegap ainda conta com o serviço PhoneGap Build, que permite gerarmos nossa aplicação diretamente no site (sem precisar comprar MAC). Com o app gerado, podemos baixar o pacote, instalar no nosso aparelho ou enviar para qualquer app store, sem nos preocuparmos com detalhes da plataforma. Podemos conferir também uma lista de apps, que foram desenvolvidos usando o Phonegap com HTML5 aqui.

Diante desse cenário, criar e trabalhar com apps vem se transformando em uma ótima oportunidade para desenvolvedores web, pois as novas plataformas nos abrem um enorme horizonte, onde o único limite é a imaginação.

Esse artigo surgiu depois de um levantamento feito para a empresa onde trabalho, portanto ainda não domino totalmente o assunto, principalmente o ambiente mobile, todavia escolhi compartilhar essas informações e gostaria do feedback de vocês com suas experiências e informações.

Dicas

Deixo aqui algumas dicas para facilitar a vida de todos que estão começando a se aventurar no mundo apresentado:

Curso em vídeo aulas do Zaedy Sayão, desenvolvendo Aplicativos usando Sencha Touch e Phonegap;
Tutorial de Phonegap;
Debugando no iPad e iPhone usando o Firebug.

Referências:

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: