Projetando Mobile 2 - PhoneGap

Projetando MobilePhoneGAP -‐ Parte 2 !By Igor Portela

04/04/14 ‹#›

Quem sou eu?• Especialista em Mobilidade e Sistemas Embarcados –

Estácio de Sá • Certificado LPIC1 (Linux Professional Institute Certified), • CLA (Novell Certified Linux Administrator), • Novell Datacenter Technical Specialist. • CEO e fundador da Wake Up Digital. • Palestrante IEEE e Google I/O Extend • Curador do Startup Genome João Pessoa • Organizador de dois Startups Weekends

Sumário

MEDIA CAPTURE CAMERA CONTACTS EVENTS NOTIFICATIONS ACCELEROMETER !

04/04/14 ‹#›

MEDIA CAPTURE

navigator.device.capture !PROVER ACESSO PARA CAPTURAR !AUDIO IMAGE VIDEO !DIRETAMENTE DO DISPOSITIVO !

MEDIA CAPTURE

navigator.device.capture !!!!!!!!!Todos contém um array do objeto ConfigurationData

CONFIGURATION DATA

É USADO PARA DESCREVER O MEDIA CAPTURE MODES SUPORTADO PELO DISPOSITIVO

!PROPRIEDADES !1. TYPE: STRING !É representado em minúsculo no tipo de mídia !-‐ video/3gpp -‐ audio/amr -‐ video/quicktime -‐ audio/war -‐ image/jpeg

CONFIGURATION DATA

2. HEIGHT: integer A altura da imagem ou vídeo em pixels !3. WIDTH: integer A largura da imagem ou vídeo em pixels !No caso de audio, é colocado o valor 0 para esses atributos.

EXEMPLO

CAPTURING AUDIO

É chamado no objeto capture !!!!!!!Comece a gravar o audio em uma aplicação e retorne a informação sobre o arquivo de áudio capturado. !

!10

CAPTURING AUDIO

Começa com uma operação assíncrona para capturar chamadas de áudio !Usa o aplicativo de gravação de áudio padrão do dispositivo !A operação permite que o usuário do dispositivo grave múltiplos áudios

CAPTURING AUDIO

Quando a operação de captura é finalizada, chama-‐se o CaptureCB, callback com um array de objetos MediaFile !Se a operação for terminada pelo usuário ante do audio ser capturado por completo, o CaptureErrorCB vai ser chamado

CAPTURE AUDIO OPTIONS

Propriedades: !Limit (Não suportada no IOS => apenas uma gravação por vez) !O máximo que o usuário pode gravar em apenas uma operação !Duration (Não suportada no Android => ilimitado) A máxima duração do áudio, em segundos.

EXEMPLO AUDIO

CAPTURANDO IMAGENS

É chamado no objeto capture !Inicia a aplicação da câmera e retorna a informação sobre a imagem capturada. !

Começa com uma operação assíncrona para capturar imagens !Usa a aplicação de câmera do dispositivo !A operação permite que o usuário do dispositivo grave múltiplas images em uma única sessão.

CAPTURANDO IMAGENS

CAPTURANDO IMAGENS


Propriedades: !Limit (Não suportada no IOS => apenas uma gravação por vez) !O máximo que o usuário pode gravar em apenas uma operação !

CAPTURANDO IMAGENS

EXEMPLO DE IMAGEM

GRAVANDO VÍDEOS

É chamado no objeto Capture !Inicia a aplicação da gravar vídeo e retorna a informação sobre o vídeo capturado.

Começa com uma operação assíncrona para gravar vídeos !Usa a aplicação de gravação de vídeos !A operação permite que o usuário do dispositivo grave múltiplos vídeos em uma única sessão.

GRAVANDO VÍDEOS


GRAVANDO VÍDEOS

GRAVANDO VÍDEOS

Propriedades: !Limit (Não suportada no IOS => apenas um vídeo por vez) !O máximo de vídeos que o usuário pode gravar em apenas uma operação. !Duration -‐ ilimitado no Android e IOS

EXEMPLO -‐ GRAVANDO VÍDEOS

MediaFile encapsula propriedades dos arquivos de mídia capturados !Propriedades

MEDIA FILE

Sumário

MEDIA CAPTURE CAMERA CONTACTS EVENTS NOTIFICATIONS ACCELEROMETER

API dedicada para capturar imagens da aplicação padrão da câmera do dispositivo

CAMERA

Tire a foto a câmera ou utilize uma foto do album do dispositivo

O resultado da chamada getPicture() pode ser: !-‐ uma string base64 encoded -‐ a URI do arquivo da imagem !É recomendado usar a URI, pois o base64 pode causar problemas na utilização da memória em alguns dispositivos

CAMERA

getPicture() pode ser chamada com as seguintes opções

OPÇÕES DA CÂMERA

quality (integer) Qualidade da imagem salva Range[0,100] !destinationType(integer)

OPÇÕES DA CÂMERA

04/04/14 ‹#›

sourceType (integer)

allowEdit (boolean) Permite uma simples edição da imagem antes da seleção

OPÇÕES DA CÂMERA

04/04/14 ‹#›

encodingType (integer)

targetWidth, targetHeight (integer) Largura e altura em pixels

OPÇÕES DA CÂMERA

mediaType (integer)

correctOrientation (boolean) Rotacionar a imagem para a orientação correta do dispositivo durante a captura

OPÇÕES DA CÂMERA

saveToPhotoAlbum (boolean) Salvar a imagem para o album de fotos no dispositivo após a captura

popoverOptions (Object) Apenas no iPad

OPÇÕES DA CÂMERA

04/04/14 ‹#›

cameraDirection (integer) Escolher se a imagem será da câmera da frente ou de trás do dispositivo

OPÇÕES DA CÂMERA

EXEMPLO DA CÂMERA

Sumário


navigator.contacts

CONTATO

Objeto global que prover acesso para os contatos do dispositivo !Você pode chamar dois métodos no navigator.contacts !-‐ contacts.create -‐ contacts.find

CRIANDO CONTATO

navigator.contacts.create(properties)

É uma função síncrona que retorna um novo objeto Contato !Para persistir o Contato objeto para o dispositivo, você tem que chamar o método Contacts.save

OBJETO CONTATO

O parâmetro properties é um mapa de propriedades do novo objeto Contato


04/04/14 ‹#›

CRIANDO CONTATO


Um contato pode ser criado, editado ou removido do banco de dados de contato do dispositivo !O método contacts.find é usado para consultar um ou mais Contatos do banco de dados de contato do dispositivo

As propriedades que um contato pode ter:

PROPRIEDADES DO CONTATO

MÉTODOS DO CONTATO

Clone() !!Remove(win, fail) !!Save(win, fail)

EXEMPLO DO CONTATO

Encontrando CONTATOS

Função assíncrona que retorna um Array de Contatos

04/04/14 ‹#›

contactFields(String) !contactSuccess(win, fail) !contactError[optional] !contactFindOptions[Optional]

CONTATOS -‐ Parâmetros do FIND

Especifique os campos que você quer incluir

CONTATOS -‐ Campos

CONTATOS -‐ Opções do FIND

Filtrar resultados

filter(String) -‐ default -‐ '' !multiple(Boolean) -‐ default: false

Exemplo -‐ CONTATOS -‐ FIND

Como funciona?

CONTATOS -‐ ERRO

Sempre vai acontecer um erro quando?

Sumário


EVENTOS

Uma evento é uma ação que pode ser detectada pelo código JS !onclick ontouchstart onLoad …

EVENTOSEVENTOS

Para usar um elemento, você vai querer um event listener

EVENTOS -‐ MAIN CORDOVA

EVENTOS -‐ DEVICEREADY

É o evento mais importante da app Cordova. !Cordova consistem em duas bases de códigos: -‐ Nativo -‐ JS !Significa que: -‐ O DOM foi carregado -‐ A API nativa cordova também foi carregada.

CICLO DE VIDA DE EVENTOS NO APP

Baseado em dois eventos principais: !pause !resume

EVENTOS DE CONEXÃO

Baseado em dois eventos principais: !online !offline

CONEXÃO

Objeto: navigator.network.connection

EVENTOS DE BATERIA

!58

Três eventos principais !batterycritical !batterylow !batterystatus

!59

EVENTOS DE BATERIA

Três eventos principais !level(Integer) !isPlugged(Boolean) !!

Eventos de butões no Android

!60

backbutton !menubutton !searchbutton

!61

Sumário


NOTIFICATIONS

!62

Prover feedback para o usuário !Alert Confirm Prompt Beep Vibrate

ALERT

!63

!!Mostre uma mensagem personalizada: !

CONFIRM

!64

Parecido com o alert, para personalizar

PROMPT

!65

Parecido com o confirm, para personalizar

BEEP

!66

Som de BEEP

times: o número de vezes que repete o beep

Vibração

Vibra o dispositivo

milliseconds: duração


Sumário

Acelerômetro

!69

Captura o movimento do aparelho nas três dimensões, x,y e z

getCurrentAcceleration

!70

win !fail

!71

watchAcceleration

win !fail !options

!72

clearAcceleration

Exemplo -‐ Acelerômetro

!73

Snake Detection

!74

FIM

Engineering

Projetando Mobile 2 - PhoneGap