Desenvolvimento de Aplicações Móveis com HTML5

Por Nuno Nunes para o Pplware

Workshop  realizado no âmbito do Mestrado em Computação Móvel do Instituto Politécnico da Guarda na Unidade Curricular de Seminário

HTML5 é o novo padrão para HTML. Tem novos elementos, novos atributos, oferece total suporte para CSS3, áudio, vídeo, suporte para gráficos 2D e 3D, tratamento de erros melhorada. Permite armazenamento local no lado do cliente, oferece bases de dados SQL locais, podemos construir aplicações web independentemente do dispositivo que o irá executar.

Todas as páginas com HTML5 começam da seguinte forma:

Exemplo de uma página HTML5 com os elementos mais comuns

Para esta demonstração vai ser usada a plataforma Android.

A plataforma Android foi introduzida no mercado pela Google em 2007 e é composta por um sistema operativo embebido e um conjunto de aplicações que integram com a plataforma.

De seguida inicia-se o desenvolvimento de exemplos de aplicações HTML5 usando a ferramenta de desenvolvimento eclipse.

Requisitos

Para este workshop é necessário o Eclipse, a instalação do SDK e do plugin do Android. No 3º exemplo para além dos anteriores é também necessário descarregar a framework da PhoneGap.

Exemplos Práticos

Passo 1 – Criação de um novo projeto no eclipse com o nome “Exemplo1”.

File -> New -> Other -> Android Aplication Project

De seguida escolhe-se “Next” (como demonstrado na figura anterior) e nas páginas seguintes novamente até que na última se clica em “Finish”.

Passo 2 - Alteração do “layout.xml” para poder receber a nossa aplicação

No “Package Explorar” do Eclipse (normalmente o menu do lado esquerdo) navega-se dentro da pasta do projeto até a pasta do layout.

Res -> layout -> activity_main.xml

Ao entrar no “activity_main.xml” da aplicação deve-se ter a seguinte configuração no eclipse:

Clica-se na parte do código em xml e apaga-se todo o código xml existente.

De seguida coloca-se o seguinte código para se criar uma webview

Fica-se então com o layout parecido com o seguinte

Caso tenha erros no layout ou seja diferente da imagem anterior é necessário alterar todas as aspas do código XML.

Passo 3 - Classe MainActivity.java onde ligaremos a classe ao nosso layout

Exemplo1 -> src -> com.example.exemplo1 -> MainActivity.java

De seguida no evento onCreate da classe MainActivity.java coloca-se o seguinte código

Passo 4 - Criação da página HTML e da página JavaScript

Para serem criadas as nossas páginas de HTML, javascript ou css tem que se fazer da seguinte forma no eclipse

Criação da pasta www dentro da pasta assets

Botão direito do rato em cima da pasta “ assets” -> New -> Folder. A essa nova pasta dentro da pasta assets dá-se o nome www.

Criação do ficheiro índex.html e do index.js

Depois de criada a pasta www tem que se criar os ficheiros web.

Com o botão direito do rato em cima da nossa pasta www faz-se New -> File e coloca-se o nome index.html.

Depois da mesma forma cria-se o ficheiro index.js (tem que ter o mesmo nome do ficheiro HTML criado no passo acima descrito)

Depois de criados os 2 ficheiros coloca-se o código HTML, da seguinte forma:

Botão do rato em cima do ficheiro index.html -> Open with -> Text editor e cola-se lá o seguinte código.

Faz-se o mesmo ao ficheiro index.js e coloca-se o seguinte código:

Faz-se Gravar todos e falta apenas um passo para termos à primeira HTML aplicação pronta a funcionar.

Passo 5 - Regressar à classe MainActivity.java e adicionar o caminho da página HTML

Volta-se à nossa classe MainActivity.java e adiciona-se a seguinte linha de código no evento onCreate a seguir ao código já colocado no passo 3.

webView.loadUrl("file:///android_asset/www/index.html");

Passo 6 - Executar o nosso projeto no emulador Android

Agora clica-se com o botão direito em cima do nosso projeto e escolhe-se Run as -> Android aplicattion.

Tem que esperar que o emulador carregue e execute o nosso projeto, o que poderá demorar algum tempo.

Depois de executado deve-se ter algo semelhante:

Escreve-se um nome na caixa de texto e clica-se no botão “Diz Olá” e tem-se algo semelhante com a imagem seguinte.

Aparece assim uma janela javascript com a mensagem com o nome que se insere na caixa de texto.

De seguida copia-se a seguinte imagem para a mesma pasta (www) onde está a página index.html e coloca-se o nome dragao.jpg caso não tenha.

Neste exemplo não se necessita de ficheiro em javascript porque essas funcionalidades estão colocadas na nossa página index.html.

Depois de se efetuar novamente o Run as -> Android aplicattion tem-se algo parecido com o seguinte:

Vê-se a nossa aplicação a desenhar uma imagem no ecrã do dispositivo.

Agora é explorar a aplicação e clicar nos outros botões, por exemplo “Desenha Dragão pequeno” em que desenhará a imagem anterior mas mais pequena.

Clicando no botão “Desenha cabeça Dragão” tem-se apenas uma parte da imagem, ou seja a parte da cabeça do dragão como exemplificado a seguir:

Para se limpar o retângulo da nossa aplicação tem-se o botão “Apagar tudo” e ficará a área de desenho limpa.

Passo 8 - Criação de uma aplicação usando o PhoneGap e a biblioteca cordova.jar

PhoneGap é uma framework open-source para desenvolvimento móvel criada por Nitobi Software da IBM.

Ele permite que todos os desenvolvedores criar aplicações para dispositivos móveis usando JavaScript, HTML e CSS.

Descarregar a framework da PhoneGap

Para se descarregar esta framework é necessário ir ao website com o seguinte link e de seguida no botão “Developer”. Nesse menu seleciona-se “Downloads”. Nessa página tem-se acesso a todas as versões disponíveis da framework. Neste exemplo usou-se a versão 1.5.0. Despois de descarregada, por exemplo no ambiente de trabalho, extrai-se o conteúdo da pasta zipada e regressa-se ao Eclipse.

Criar um projeto de uma pasta já existente

File - > New -> Android Project for Existing Code

De seguida clica-se em “Next”

E agora seleciona-se o caminho da pasta que se descarregou do website.

Navegando dentro da pasta lib -> android -> exemple e fazemos Ok.

De seguida confirma-se que se selecionam os seguintes itens e clica-se em Finish.

Teremos então o nosso projeto pronto para ser executado.

Podemos antes disso, se quisermos navegar nas diversas pastas e verificar as classes. Verifica-se também que os elementos descritos nos primeiros 2 exemplos estão já disponíveis (index.html, etc.):

Finalmente executa-se a nossa aplicação e teremos algo semelhante a isto

Para este exemplo, bem como os outros, recomenda-se que se execute a aplicação num dispositivo móvel para que assim se tenha acesso a funcionalidades como por exemplo o acelerómetro, o vibrar, as chamadas, os contatos, etc.

Foi também efetuado um teste usando Windows Phone e o resultado foi o mesmo, ou seja a aplicação da PhoneGap funciona igualmente como demonstra a imagem seguinte.

Conclusão

Depois de serem efetuados estes exemplos, conclui-se que o HTML5 pode ser executado em várias plataformas móveis.

Uma das vantagens que se verifica é que, em termos de design ser mais fácil “desenhar” a nossa aplicação e através do JavaScript poderemos ter outras funcionalidades.

Conclui-se ainda que o HTML5 oferece funcionalidades interessantes para o desenvolvimento de aplicações móveis.

Nestes exemplos foram usados dispositivos com sistema operativo Android e Windows Phone mas os mesmos exemplos funcionam corretamente nos outros sistemas operativos móveis, Windows 8, IOS, etc.

Referências

• phonegap
• html5tutorial
• urubatan
• tutorial no YouTube