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 à 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 além 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 (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 mobile, mais especificamente para IOS e Android.
A boa notícia é que, para entrar no mundo dos aplicativos mobile, 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 mobile Frameworks (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
No 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. Deve ser analisado e avaliado seus prós e contras.
Existem mais de 100 elementos na HTML5. Alguns são puramente semânticos, outros são apenas recipientes para APIs de script, porem tem alguns que 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 você persistir dados usando SQL pelo JavaScript. Mais informações aqui.
Canvas - O canvas é um novo elemento do HTML5 que permite desenhar gráficos usando código 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 e você pode conferir sobre a decisão aqui, mas isso prova que há tempos essa é uma abordagem viável inclusive adotada por várias empresas grandes.
A equipe da Secha fez 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 no vídeo abaixo. Para conferir o resultado, clique aqui;
Web Apps são visto com bons olhos também pela Apple, que 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 acessar o 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-se a 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) http://www.sencha.com/apps/.
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. A primeira é 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 for 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:
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.
O PhoneGap é um projeto open source que já roda há alguns anos e com suporte a 7 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 especifico 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 gerar nossa aplicação diretamente no site (sem precisar comprar um MAC). Com o App gerado, podemos baixar o pacote, instalar no nosso aparelho ou enviar para qualquer App store, sem se preocupar 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 tornando uma ótima oportunidade para desenvolvedores web, pois as novas plataformas nos abrem um enorme horizonte, em que o único limite é a imaginação.
Esse post surgiu depois de um levantamento feito para a empresa onde trabalho, portanto ainda não domino totalmente o assunto, principalmente o ambiente móbile, 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 legal em vídeo aulas do Zaedy Sayão, desenvolvendo Aplicativos usando Sencha Touch e Phonegap http://vimeo.com/zaedy/videos/page:2/sort:date.
Tutorial de Phonegap – http://www.thecodebakers.org/p/curso-android-o-comeco-programacao.html#phonegap;
Debugando no Ipad e Iphone usando o Firebug – http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone;
Referencias:
http://www.thecodebakers.org/p/curso-android-o-comeco-programacao.html#phonegap
http://www.getelastic.com/why-html5-should-replace-native-apps-for-ecommerce/
http://issuu.com/locaweb/docs/revistalocaweb37
http://developer.android.com/guide/webapps/index.html
http://www.mobiltec.com.br/blog/index.php/comparativo-entre-phonegap-oracle-e-sencha/
