Projetando Mobile 2 - PhoneGap

Post on 05-Jun-2015

255 views 4 download

Transcript of 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

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  

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

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  

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

MEDIA  CAPTURE  CAMERA  CONTACTS  EVENTS  NOTIFICATIONS  ACCELEROMETER

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

navigator.contacts.create(properties)

04/04/14 ‹#›

CRIANDO  CONTATO

navigator.contacts.create(properties)

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

MEDIA  CAPTURE  CAMERA  CONTACTS  EVENTS  NOTIFICATIONS  ACCELEROMETER

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

MEDIA  CAPTURE  CAMERA  CONTACTS  EVENTS  NOTIFICATIONS  ACCELEROMETER

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

MEDIA  CAPTURE  CAMERA  CONTACTS  EVENTS  NOTIFICATIONS  ACCELEROMETER

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