Home » Entrevistas » Desenvolver app com HTML5

Desenvolver app com HTML5

Já falamos muitas vezes sobre desenvolvimento de app neste blog. Sobre desenvolvimento Android e iOS, também sobre aplicativos responsivos e nativos. Sobre monetização desses projetos de apps móveis. Até mesmo o design dos apps já foi tema do dia no nosso blog.   Mas nunca esclarecemos suficientemente como desenvolver aplicativos multi-plataforma com HTML5.

Para aqueles que acabaram de chegar ao mundo dos apps, a diferença entre aplicativos nativos e multi-plataformas é que os primeiros são ‘escritos’ em suas próprias linguagens de programação de apps. Enquanto os aplicativos multi-plataforma têm um código único que é interpretado e ajustado aos dispositivos, diríamos que são praticamente sinônimo de aplicativos web que falamos em várias ocasiões.

Dentro desta categoria existem 2 ramos de aplicativos multi-plataforma: a primeira é sobre WebView (utilizando HTML5, CSS3, JavaScript, que vamos falar neste artigo); e Xamarin, outro tipo que você escreve o código apenas uma vez em uma linguagem comum e “ele traduz” para cada uma das plataformas.

Desenvolver apps HTML5

HTML5 é uma das linguagens que precisamente nos permite criar apps multi-plataforma, que são acessíveis a partir de qualquer dispositivo com um desenvolvimento único. Vamos ver um pouco mais em profundidade o que é:

O que é HTML5?

HTML5 é uma linguagem markup que é usada para estruturar e exibir o conteúdo na web. Ele fornece suporte para aplicativos multimídia avançados, incluindo áudio e vídeo. Mas também nos permite modificar o layout de uma página e, portanto, modificar sua aparência.

Neste sentido, como é que os desenvolvedores de aplicativos podem aproveitar essa linguagem? O especialista pode desenvolver app interativo com HMTL5 que será visto através do browser de qualquer dispositivo.   HTML5 é exatamente uma das línguas mais versátil para o desenvolvimento de aplicativos web e o mais utilizado amplamente para criar apps não-nativos.

Porquê programar apps com HTML5?

Em primeiro lugar, devemos destacar que o HTML5 é uma linguagem de programação generalizada. Na verdade tornou-se na programação web padrão desde outubro de 2014, sendo assim , sempre vamos encontrar muitos recursos sobre o assunto. Além disso, a World Wide Web Consortium (W3C) colocou o seu selo de “Recomendado” para a quinta versão da linguagem.

Inovações trazidas em relação a versões anteriores do HTML e outras linguagens é a inclusão nativa de vídeo e áudio e também implementar design responsivas automaticamente.

A importância do HTML5

Já deixamos claro porque a linguagem de programação é importante em todo o mundo e para programadores convencionais. Mas você conhece suficientemente as características desta linguagem para se tornar numa das melhores opções para desenvolver app multi-plataforma? Nós vamos te expor as vantagens de usar HTM5 para criar aplicativos móveis.

  • Primeiro e mais importante é a sua universalidade, quer dizer que ele funciona em todos os navegadores, seja em dispositivos móveis ou do computador tradicional. O código é interpretado e exibido por todos os navegadores (Chrome, Safari, Firefox, Internet Explorer).
  • É uma linguagem com vocação audiovisual. Permite que você inclua nativamente tanto áudio como vídeo. Aposta em mostrar e incluir conteúdo multimídia nas criações.
  • É mobile friendly. Uma das vantagens de programação de aplicativos com o HTML5 é que esta linguagem pretende ser responsivo, adaptado para a tela na qual o conteúdo é exibido. Portanto, torna-se perfeito criar sites que serão vistos como (ou seja, web apps) aplicativos. De acordo com a empresa de análise Vision Mobile, mais de 50% de aplicativos móveis usam HTML5 junto com JavaScript e CSS.

Desenvolver apps HTML5

  • Para orçamentos mais limitados, é uma escolha muito boa, pois é mais barato do que outros alternativos nativos. Ou até mesmo para iniciar uma versão beta do nosso negócio ou jogo móvel, com uma versão em HTML5 é possível ver se funciona e se existe mercado pode significar grande ajuda. Jogos do estilo Candy Crush (puzzles) começaram com esta tecnologia e mais tarde passou para o nativo.
  • E finalmente, mas não menos importante, a linguagem HTML5 é aberta: ou seja, qualquer um pode modificar, melhorar, expandir ou inventar novos serviços em aplicativos já desenvolvidos.

Vantagens e problemas de desenvolver app multiplataforma

Continuando com o que dissemos na seção anterior, as maiores vantagens da criação de apps multi-plataforma com HTML5  e outras línguas é por ela ser para aqueles que vêm de desenvolvimento Web. Programador Web pode usar seus conhecimentos para o desenvolvimento de aplicativos facilmente. “Outra vantagem é que não falta o dobro ou o triplo de recursos para fazer o mesmo app para Android, iOs e Windows Phone”, acrescenta Jose Antonio Llopis, diretor técnico na Yeeply.

Como desvantagens, incluem a velocidade do aplicativo, que é seriamente reduzida. Da mesma forma o acesso ao hardware do dispositivo é limitado para os plugins disponíveis. Outra desvantagem é que apesar de garantir que o aplicativo irá funcionar em qualquer plataforma, isso não corresponde totalmente a verdade. Na prática, você tem que ir verificando o desenvolvimento em todas as plataformas para confirmar que tudo esta bem.

lembre-se que apesar de ser aplicativo multi-plataforma, deve gerar um apk (para dispositivos Android) ou ipa nativo (para dispositivos iOS) para que ele possa ser lido e exibido em dispositivos móveis. Por esta razão precisamos dos SDK de cada plataforma. Como alternativa, você pode usar um serviço que não gera automaticamente como Adobe.

Ferramentas para desenvolvimento multi-plataforma

Desenvolver apps HTML5

As ferramentas mais utilizadas para desenvolver app WebView  são as que apresentamos abaixo:

  • Apache Cordova: é um framework para o desenvolvimento de aplicativos móveis de propriedade da Adobe Systems que permite aos programadores desenvolver aplicativos para dispositivos móveis usando ferramentas genéricas da web como JavaScript, HTML5 e CSS3, resultando em aplicativos híbridas.
  • AngularJS: é um framework de JavaScript de código aberto, mantido pelo Google, que é usado para criar e manter aplicativos da web em uma única página.
  • Ionico: é uma ferramenta, gratuita e de código aberto para desenvolvimento de aplicativos híbridos baseado em HTML5, CSS e JS. Ela é construída com Sass e otimizado com AngularJS.

Embora a qualidade de tais aplicativos não é a  melhor que pode ser encontrado em um desenvolvimento nativo, ele funciona muito bem para projetos de pequenos e médias empresas que não precisam de muitos recursos ou um desempenho muito elevado. Na verdade, o primeiro aplicativo do Facebook foi desenvolvido com este tipo de tecnologia até que foi decidido para programação de aplicativos nativos.

Agora é sua vez. Sabe como programar apps multi-plataforma? Que ferramentas você usa? O que esquecemos de acrescentar no artigo?

developers_apps_webs

Written by

Luis Picurelli