Crie aplicativos HTML no Android


Outro dia encontrei um amigo desenvolvedor front-end e começamos a conversar sobre a criação de aplicativos. É incrível que todo mundo tem uma ideia nova de aplicativo. Ele me contou sobre a dificuldade, então, de ter que escolher entre as plataformas iOS, Android e Windows Phone. Cada uma utilizando uma tecnologia específica (Objective-C, Java ou C#), tornando praticamente inviável aprender todas as linguagens em tão pouco tempo

O fato é que o conhecimento de HTML, CSS e JavaScript é suficiente para criar aplicativo em qualquer plataforma móvel: Android, Amazon Fire, BlackBerry, iOS, Windows Phone.

Nesse post, vamos transformar o jogo 2048 em um aplicativo chamado GameJS.

image

Primeiros Passos

Utilizaremos o famoso jogo 2048 para mostrar o passo a passo de transformá-lo em um aplicativo. Aqui estamos usando o Visual Studio 2013 com Update 4 para criar um projeto baseado em JavaScript.

1. Começamos criando um projeto em branco usando o template “Blank App (Apache Cordova)”:

image

2. Baixamos o conteúdo do 2048 disponível no GitHub:

https://github.com/gabrielecirulli/2048

image

3. Copiamos o diretório para dentro da pasta do projeto:

image

4. Habilitamos a opção de mostrar todos arquivos:

image

5. Clicamos no diretório 2048 com o botão direito e selecionamos “Include in Project”:

image

6. Finalmente, alteramos a propriedade “Start Page” no arquivo CONFIG.XML. Pronto!

image

7. Aperte PLAY : Ripple – Nexus (Galaxy).

image

image

Pronto! já estamos com o jogo funcionando.

Apache Cordova

Agora que o aplicativo rodou pela primeira vez, vamos entender como que funciona o Apache Cordova. A ideia se baseia em encapsular os sites HTML em pacotes e usar uma WebView (componente do Browser) para navegação.

image

PhoneGap: Não sei se vocês se lembram do antigo PhoneGap. A Nitobi criou o framework chamado de PhoneGap como uma forma de abstrair o desenvolvimento de aplicativos usando o HTML5. Em 2011 a Nitobi foi comprada pela Adobe que, em seguida, deixou o código-fonte disponível abertamente através da Apache Software Foundation, dando origem ao Apache Cordova.

O desenvolvedor deve utilizar uma linguagem HTML moderna compatível com as versões de Browsers Mobile. Portanto, o aplicativo deve funcionar pelo menos nas seguintes versões:

  • Internet Explorer 10 e 11
  • Android Browser 4.x e 5.0
  • iOS Safari 7.1 e 8

O código do aplicativo pode utilizar qualquer recurso válido nesses browsers. Assim como no exemplo do GameJS, podemos importar um projeto inteiro baseado em HTML e tudo vai funcionar. Existe uma consideração adicional:

A página raiz (index.html) deve conter referência a dois arquivos Javascripts usados pelo engine do Cordova:

<script src=”cordova.js”></script>
<script src=”scripts/platformOverrides.js”></script>

  • cordova.js: Estabelece um canal de comunicação entre o aplicativo HTML, o componente de WebView e os Plugins.
  • platformOverrides.js: Apache Cordova possui correções de problemas específicos por plataforma. Por exemplo, algumas limitações existentes no Android 2.3 e restrições de segurança do Windows 8.

Caso esses scripts não sejam incluídos, os plugins e o WebView pode não funcionar da forma esperada. No aplicativo GameJS, devemos adicionar essas linhas com os nomes relativos:

image

 

Emuladores e Deployment

Vamos a parte mais divertida! Uma vez que já temos a aplicação rodando, podemos ver o resultado usando os emuladores:

image

O emulador padrão é o Apache Ripple: esse é um emulador Android usando o Chrome. Ele é a alternativa rápida para visualizar o layout da página, validando a página HTML e estilos CSS.

image

A segunda opção é utilizar o emulador nativo do Android SDK. O tempo de carregamento é tão alto que praticamente torna inviável de utilizá-lo sem nenhuma customização. Existem formas de manter o estado salvo para otimizar o desempenho.

image

Existe a possibilidade de fazer os testes usando um dispositivo Android desbloqueados para desenvolvimento.

image

Visual Studio Emulator for Android é uma implementação baseada em virtualização Hyper-V e está disponível a partir do Visual Studio 2015. Veja mais informações em:

http://blogs.msdn.com/b/visualstudioalm/archive/2014/11/12/introducing-visual-studio-s-emulator-for-android.aspx

clip_image008

O pacote APK se encontra no diretório BIN\Android e pode ser utilizado para deployment no dispositivo ou na loja.

image

Windows Phone

Embora o título do artigo seja a criação de aplicativo para Android, podemos criar aplicativos em outras plataformas. Vamos notar que criar um aplicativo para Windows Phone segue os mesmos passos que fizemos até o momento. A única diferença está na escolha da plataforma:

image

Pronto! O aplicativo está rodando normalmente sem nenhuma modificação de código.

image

Ao gerar um build do aplicativo, podemos usar o pacote XAP disponível em BIN\Windows Phone 8 para fazer o deployment em um telefone ou subir para a Windows Store.

image

Conclusão

Os desenvolvedores podem criar sites Web usando HTML, CSS e JavaScript e estender o conhecimento para o mundo de aplicativo. Logo de início, o Cordova surpreende pela facilidade de criar aplicativos em diferentes plataformas. O próximo passo é entender a integração com código nativo usando plugins.


Autor: Microsoft Tech