Desenvolvimento de Aplicações Móveis com HTML5

Transcrição

1 Desenvolvimento de Aplicações Móveis com HTML5 Date : 9 de Março de 2013 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 Pplware 1 / 26

2 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 Pplware 2 / 26

3 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 Pplware 3 / 26

4 Ao entrar no activity_main.xml da aplicação deve-se ter a seguinte configuração no eclipse: Pplware 4 / 26

5 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 Pplware 5 / 26

6 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 Pplware 6 / 26

7 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 Pplware 7 / 26

8 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. Pplware 8 / 26

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

10 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. Pplware 10 / 26

11 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: Pplware 11 / 26

12 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. Pplware 12 / 26

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

14 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. Pplware 14 / 26

15 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: Pplware 15 / 26

16 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. Pplware 16 / 26

17 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: Pplware 17 / 26

18 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 Pplware 18 / 26

19 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 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 Pplware 19 / 26

20 De seguida clica-se em Next Pplware 20 / 26

21 E agora seleciona-se o caminho da pasta que se descarregou do website. Navegando dentro da pasta lib -> android -> exemple e fazemos Ok. Pplware 21 / 26

22 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. Verificase também que os elementos descritos nos primeiros 2 exemplos estão já disponíveis (index.html, etc.): Pplware 22 / 26

23 Finalmente executa-se a nossa aplicação e teremos algo semelhante a isto Pplware 23 / 26

24 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. Pplware 24 / 26

25 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. Pplware 25 / 26

26 Powered by TCPDF ( Referências phonegap html5tutorial urubatan tutorial no YouTube Pplware 26 / 26