APACHE

Cordova
Tópicos Especiais em Sistemas para Internet II

Prof. Ricardo A. Honorato

Comandos Básicos
● Lista de Comandos Globais
● Esses comandos estão sempre disponíveis.

Comando Descrição
create Cria um novo projeto
help <command> Obter ajuda para um comando
telemetry Ativar ou desativar a coleta de telemetria
config Definir, obter, excluir, editar e listar opções globais de cordova
Comandos Básicos
● Lista de Comandos do Projeto
● Esses comandos são suportados quando o diretório de trabalho atual é um projeto Cordova válido.

Comando Descrição
info Gerar informações do projeto
requirements Verifica e imprime todos os requisitos de instalação para as plataformas
especificadas
platform Gerenciar plataformas de projetos
plugin Gerenciar plug-ins de projeto
prepare Copie os arquivos para a(s) plataforma(s) para construção
Comandos Básicos
● Opções comuns
● Essas opções se aplicam a todos os comandos cordova-cli.

Opção Descrição

-d or --verbose Encaminhe uma saída mais detalhada para o seu shell. Você também pode se inscrever para
registrar e avisar eventos se estiver consumindo cordova-cli como um módulo de nó
ligando cordova.on('log', function() {}) or cordova.on('warn', function() {}).

-v or --version Imprima a versão do cordova-cli install.

--no-update-notifier Desativará a verificação de atualizações. Alternativamente definido "optOut":

true in ~/.config/configstore/update-notifier-cordova.json or defina a variável de ambiente
NO_UPDATE_NOTIFIER com qualquer valor (consulte os detalhes nos documentos do
notificador de atualização).

--nohooks Suprimir a execução de ganchos (tomando padrões de gancho RegExp como parâmetros)

--no-telemetry Desabilite a coleta de telemetria para o comando atual.

Teste o aplicativo

Os SDKs para plataformas móveis geralmente vêm com emuladores que executam uma
imagem de dispositivo, para que você possa iniciar o aplicativo na tela inicial e ver como
ele interage com muitos recursos da plataforma. Execute um comando como o seguinte
para reconstruir o aplicativo e visualizá-lo no emulador de uma plataforma específica:

cordova emulate android

Teste o aplicativo
Teste o aplicativo

Como alternativa, você pode conectar o aparelho ao computador e testar o aplicativo

diretamente:

cordova run android

Antes de executar este comando, você precisa configurar o dispositivo para teste,
seguindo procedimentos que variam para cada plataforma.
Teste o aplicativo

Adb devices - Exibe informações sobre dispositivos conectados ao PC e seus números

de série.

Ative a depuração do adb no seu dispositivo.

Para usar o adb com um dispositivo conectado via USB, você precisa ativar a opção
Depuração USB nas configurações do sistema do dispositivo, em Opções do
desenvolvedor.
Teste o aplicativo

No Android 4.2 e versões mais recentes, a tela "Opções do desenvolvedor" fica oculta por
padrão. Para exibi-la, acesse Configurações > Sobre o dispositivo e toque em Número da
versão sete vezes. Retorne à tela anterior para encontrar as Opções do desenvolvedor na
parte inferior.

Em alguns dispositivos, a tela "Opções do desenvolvedor" pode ter uma localização ou

um nome diferente.
Cordova - config.xml File
O arquivo config.xml é o local onde podemos alterar a configuração do
aplicativo. Quando criamos nosso aplicativo no último tutorial, definimos o domínio e o
nome reversos. Os valores podem ser alterados no arquivo config.xml .

Quando criamos o aplicativo, o arquivo de configuração padrão também será criado.

Cordova - config.xml
Elemento Elemento e detalhes

O valor de domínio reverso do aplicativo que especificamos ao criar o aplicativo.

widget

name O nome do aplicativo que especificamos ao criar o aplicativo.

description Descrição para o aplicativo.

author Autor do aplicativo.

content A página inicial do aplicativo. Ele é colocado dentro do diretório www.

Cordova - config.xml
Elemento Elemento e detalhes

Os plugins que estão instalados atualmente.

plugin

Usado para controlar o acesso a domínios externos. O valor de origem padrão é definido como *,
access o que significa que o acesso é permitido a qualquer domínio. Esse valor não permitirá que alguns
URLs específicos sejam abertos para proteger as informações.

Permite que URLs específicos solicitem a abertura do aplicativo. Por exemplo, <allow-intent href
allow-intent
= "tel:*" /> permitirá que os links tel: abram o discador.

platform As plataformas para construir o aplicativo.

plugin Os plugins que estão instalados atualmente.

Ícones e telas iniciais

Ao trabalhar na CLI, você pode definir o(s) ícone(s) do aplicativo por meio do
<icon>elemento ( config.xml). Se você não especificar um ícone, o logotipo do Apache
Cordova será usado.

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

Ícones e telas iniciais
src: (obrigatório) especifica a localização do arquivo de imagem, em relação ao diretório
do seu projeto;

plataforma: (opcional) plataforma de destino;

largura: (opcional) largura do ícone em pixels;

height: (opcional) altura do ícone em pixels;

densidade: (opcional) específico do Android, especifica a densidade do ícone;

Ícones e telas iniciais
A configuração a seguir pode ser usada para definir um ícone padrão único que será
usado para todas as plataformas.

<icon src="res/icon.png" />

Para cada plataforma, você também pode definir um conjunto de ícones de pixels
perfeitos para se adequar a diferentes resoluções de tela.
Ícones e telas iniciais
<platform name="android">

<icon src="res/android/ldpi.png" density="ldpi" />

<icon src="res/android/mdpi.png" density="mdpi" />

<icon src="res/android/hdpi.png" density="hdpi" />

<icon src="res/android/xhdpi.png" density="xhdpi" />

</platform>
 Eventos - Cordova

Existem vários eventos que podem ser usados

em projetos Cordova. A tabela a seguir mostra
os eventos disponíveis.
Eventos Cordova
Evento Detalhes

Este evento é acionado quando o Cordova está totalmente carregado. Isso ajuda a garantir
deviceReady
que nenhuma função do Cordova seja chamada antes que tudo seja carregado.

pause Este evento é acionado quando o aplicativo é colocado em segundo plano.

resume Este evento é acionado quando o aplicativo é retornado em segundo plano.

backbutton Este evento é acionado quando o botão Voltar é pressionado.

menubutton Este evento é acionado quando o botão de menu é pressionado.

Eventos Cordova
Evento Detalhes

Este evento é acionado quando o botão de pesquisa do Android é pressionado.

searchbutton

startcallbutton Este evento é acionado quando o botão de pesquisa do Android é pressionado.

endcallbutton Este evento é acionado quando o botão de pesquisa do Android é pressionado.

volumedownbutton Este evento é acionado quando o botão de diminuir volume é pressionado.

volumeupbutton Este evento é acionado quando o botão de aumento de volume é pressionado.

Usando eventos
Todos os eventos são usados quase da mesma maneira. Devemos sempre adicionar
ouvintes de evento em nosso js em vez da chamada de evento inline, pois a Política de
Segurança de Conteúdo do Cordova não permite Javascript inline. Se tentarmos chamar
o evento inline, o seguinte erro será exibido
Usando eventos
A maneira correta de trabalhar com eventos é usando addEventListener. Vamos entender
como usar o evento volumeupbutton através de um exemplo.

document.addEventListener("volumeupbutton",
callbackFunction, false); function callbackFunction() {
alert('Volume Up Button is pressed!'); }
Usando Plugins
DeviceReady só é disparado quando a api Cordova é carregada na memória e depois
que de se certificar que está sendo executado a partir de um device mobile. Este evento é
disparado a partir do Cordova.js
Usando Plugins
Plugin Bateria

Acesse o site oficial do apache Cordova;

Acesse a aba plug-ins;
Crie um novo projeto Cordova
Usando Plugins
Usando Plugins
Instalando o plugin:

cordova plugin add cordova-plugin-batter

y-status

Após criarmos nosso projeto, vamos

alterar o hello world para criar a
interface.
Usando Plugins
Instalando o plugin:

cordova plugin add cordova-plugin-batter

y-status

Após criarmos nosso projeto, vamos

alterar o hello world para criar a
interface.
Usando Plugins
Agora vamos configurar nosso arquivo .JS para testar o plugin da bateria:
Podemos utilizar o exemplo contido do site apache.cordova:
window.addEventListener("batterystatus", onBatteryStatus, false);function
onBatteryStatus(status) { console.log("Level: " + status.level + "
isPlugged: " + status.isPlugged);}
Usando Plugins
Agora vamos configurar nosso arquivo .JS para testar o plugin da bateria:
Podemos utilizar o exemplo contido do site apache.cordova:
window.addEventListener("batterystatus", onBatteryStatus, false);function
onBatteryStatus(status) { console.log("Level: " + status.level + "
isPlugged: " + status.isPlugged);}
Usando Plugins
Usando Plugins
Armazenamento Local
Adicionando botões

Vamos criar quatro botões no arquivo index.html . Os botões estarão

localizados dentro do elemento div class = "app" .
Armazenamento Local
Adicionando botões

Ele produzirá a seguinte tela -

Armazenamento Local
Adicionando ouvintes de eventos

A política de segurança do Cordova não permite eventos embutidos,

então adicionaremos ouvintes de eventos dentro dos arquivos
index.js. Também atribuiremos window.localStorage a uma
variável localStorage.
Armazenamento Local
Criando Funções

Agora precisamos criar funções que serão chamadas quando os

botões forem tocados. A primeira função é usada para adicionar dados
ao armazenamento local.
Armazenamento Local
Criando Funções

O próximo registrará os dados que adicionamos ao console.

Armazenamento Local
Criando Funções

Se tocarmos no botão SET LOCAL STORAGE , definiremos três itens

para armazenamento local. Se tocarmos em MOSTRAR
ARMAZENAMENTO LOCAL depois, o console registrará os itens que
queremos.
Armazenamento Local
Criando Funções

Vamos agora criar uma função que excluirá o projeto do

armazenamento local.
Armazenamento Local
Criando Funções

Se clicarmos no botão MOSTRAR ARMAZENAMENTO LOCAL após

excluirmos o projeto, a saída mostrará o valor nulo para o campo do
projeto.
Armazenamento Local
Criando Funções

Também podemos obter os elementos de armazenamento local

usando o método key() que receberá o índice como argumento e
retornará o elemento com o valor de índice correspondente.
Armazenamento Local
Criando Funções

Agora, quando tocamos no botão GET BY KEY , a seguinte saída será

exibida.
Armazenamento Local
Criando Funções

Quando usamos o método key() , o console registrará o trabalho em

vez do nome , mesmo que tenhamos passado o argumento 0 para
recuperar o primeiro objeto. Isso ocorre porque o armazenamento local
está armazenando dados em ordem alfabética.
A tabela a seguir mostra todos os métodos de armazenamento local
disponíveis.
Armazenamento Local
Criando Funções
S.No Métodos e detalhes
setItem(chave, valor)
1
Usado para configurar o item para armazenamento local.

getItem(chave)
2
Usado para obter o item do armazenamento local.

removeItem(chave)
3
Usado para remover o item do armazenamento local.

chave de indexação)
4 Usado para obter o item usando o índice do item no armazenamento local. Isso ajuda a classificar os itens em
ordem alfabética.

comprimento()
5
Usado para recuperar o número de itens que existe no armazenamento local.

Claro()
6
Usado para remover todos os pares de chave/valor do armazenamento local.