Aula 02 –“Primeiro App Cordova”

Desenvolvimento de aplicações Mobile Híbridas

Aula 02 – “Primeiro App Cordova”

Giuliano Prado de Morais Giglio

giucontato@gmail.com

www.giulianoti.tk

Instalação

● Você pode utilizar o código abaixo para instalar o Cordova após a instalação do node:

npm install -g cordova

Criação de projeto

● Vamos criar uma pasta base para nossos projetos:

C:\projetosapp

● Para criação de um projeto:

cordova create NomedaPasta br.com.iddaaplicacao NomedoAplicativo

○

somente o primeiro é obrigatório, a pasta será criada:

○

usado o domínio invertido, padrão das lojas.

● Vamos usar:

cordova create imc br.com.imc AppIMC

Adicionando as plataformas para o projeto

● Para listar as plataformas existentes no Cordova para

adicionar no projeto, dentro da pasta raiz do projeto, digite:

cordova platform list

● Após criar o projeto, você pode usar o código abaixo para adicionar as plataformas:

cordova platform add browser cordova platform add android

● Basta colocar ao final o primeiro nome

que aparece na lista

Executando o projeto

cordova emulate <PLATAFORMA>

Exemplo:

cordova emulate browser ou cordova emulate android

No caso de se ter um dispositivo (seu celular ou GenyMotion):

cordova run android

Criando as interfaces - HTML

q As interfaces são páginas HTML que ficam na subpasta ‘WWW’ criada em seu projeto.

q

Observe que já se encontra a index.html, sempre chamada na execução.

q Pegue no site da disciplina o index.html para nosso primeiro projeto (IMC) e substitua-a em na pasta

‘www’.

Interface inicial

Analisando a página….

● Linha 4: A meta viewport é utilizada para que uma página se ajuste adequadamente as telas de dispositivos móveis;

● Linha 6: Incluímos o nosso CSS;

● Linha 10: Div box-container envolve todo o conteúdo da nossa página, incluindo o título H1;

● Linha 11: O titulo da tag H1 será exibido logo acima do formulário;

● Linha 12: A Div box-formulario envolve o conteúdo do formulário da calculadora IMC, desde os primeiros inputs até os últimos botões;

● Linhas de 13 a 16: Temos os labels e inputs dos campos peso e altura;

● Linha 17: A Div box-resultado contém os labels para exibir o cálculo IMC e o Status do peso;

● Linhas de 18 e 19: Temos os labels que exibem o resultado do cálculo IMC;

● Linha 23: A Div box-botoes envolve os dois botões disponíveis no formulário;

● Linhas 24 e 25: Aqui temos o botão de calcular IMC e o botão de limpar dados;

● Linhas 29 e 30: Inclusão do JavaScript padrão do Cordova (cordova.js) e do nosso script

customizado (js/index.js) .

Definindo o Layout da aplicação (CSS) ….

Customizando inputs e botões

Implementação

q Vamos editar nosso arquivo index.js na subpasta js de ‘WWW’.

document.addEventListener ("deviceready", function() {

document.getElementById("btn_calcular") .addEventListener("click", function(){

});

});

1. Utilizamos o evento deviceready para saber quando a aplicação estará pronta.

Os comandos JavaScript só podem ser executados após esse evento.

2. Associamos o botão btn_calcular a um evento de click. Assim, ao clicar no

botão serão executados os códigos previstos para esse botão;

Implementação – Realizando o cálculo do IMC

Convertendo para 2 casas decimais

Implementação

Exibimos o cálculo IMC no label

e

definimos o box-resultado como display:block para que ele seja exibido.

Instalando plugins no Cordova

cordova plugin add <NOME DO PLUGIN>

No nosso projeto:

cordova plugin add cordova-plugin-dialogs

Plugin de Caixa de Diálogos do Cordova!

Implementação – Modificando para caixas de diálogo

var peso = document.getElementById("txt_peso").value;

var altura = document.getElementById("txt_altura").value;

if(peso == "" || altura == ""){

navigator.notification.alert("Preencha o peso e a altura",function(){},"Aviso","OK");

return;

}

Verifica se as variáveis peso e/ou altura estão vazias e exibe um alert informando que os valores

devem ser informados

Implementação – Botão Limpar

document.getElementById("btn_limpar").addEventListener("click", function(){

document.getElementById("txt_peso").value = "";

document.getElementById("txt_altura").value = "";

document.getElementsByClassName("box-resultado")[0].style.display = "none";

});

ü Associamos o btn_limpar a um evento de click;

ü Definimos o input txt_peso e txt_altura novamente como vazios e ocultamos o box-

resultado definindo o display:none.

Implementação – Criar uma máscara decimal no Javascript

ü Associamos o input txt_peso a um evento keyup para verificar quando algum caractere é digitado;

ü Adicionamos automaticamente uma vírgula no valor informado, deixando-o com uma casa decimal.

document.getElementById("txt_peso").addEventListener("keyup", function(){

this.value = this.value.replace(",", "").replace(/(\d+)(\d)/, "$1,$2");

});

TESTE SUA APLICAÇÃO!