O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 106 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Phonegap (20)

Anúncio

Mais recentes (20)

Phonegap

  1. 1. Phonegap JS
  2. 2. About me ● @Lucas_Aquiles ● lucasaquiles@gmail.com ● lucasaquiles.com.br/
  3. 3. Roteiro 1º dia i. Introdução a computação móvel ii. Mundo mobile iii. Desenvolvendo com Android 1. Instalação e configuração iv. Conceitos básicos da plataforma 2º dia v. WTF Phonegap? vi. Quem usa? onde isso roda? vii. Instalação e configuração viii. Recursos do PhonegapAPI ix. HTML5 + CSS3 + Javascript 3º dia i. Aplicação de Exemplo
  4. 4. Introdução a computação móvel ● Computação Móvel ○ Acesso a informação em qualquer lugar, a qualquer momento ○ "Usuários móveis"
  5. 5. Introdução a computação móvel ● Computação pervasiva ○ acesso conveniente a informações relevantes e a habilidade de realizar ações sobre as mesmas quando e onde for necessário (IBM).
  6. 6. Introdução a computação móvel ● Computação ubíqua ○ Basea-se na detecção de gestos , movimentos, fala, movimentação dos olhos ... ○ http://youtu.be/9c6W4CCU9M4
  7. 7. Introdução a computação móvel ● Junta tudo Pervasiv Ubíqua Móvel a
  8. 8. Introdução a computação móvel ● Princípios da computação móvel ○ Descentralização uma grande variedade de pequenos dispositivos cooperam estabelecendo uma rede dinamica de relacionamento
  9. 9. Introdução a computação móvel ● Princípios da computação móvel ○ Diversificação ■ mesma informação em diferentes modelos
  10. 10. Introdução a computação móvel ● Princípios da computação móvel ○ Conectividade ■ bluetooth, wlan, 4G, WiMax ■ troca de informação ■ descoberta de serviços ■ delegação de tarefas
  11. 11. Introdução a computação móvel ● Princípios da computação móvel ○ Simplicidade ■ "computadores móveis" são mais especificos e mais simples em configuração ■ touch-screen ■ reconhecimento de voz e escrita
  12. 12. Introdução a computação móvel ● Aceitação das tecnologias ○ TV preto e branco - 20 anos ○ TV em cores - 9 anos ○ VCR - 8 anos ○ PC - 6 anos ○ Celular - 2 anos e meio ○ acesso a internet por dispositivos móveis ultrapassou os dispositivos convencionais
  13. 13. Introdução a computação móvel ● Algumas aplicações em computação móvel ○ m-commerce ○ m-business ○ segurança ○ tratamento médico ○ serviços de resgate ○ aplicações militares ○ comércio ○ serviços de geolocalização
  14. 14. Impactos da computação móvel ● Mudanças sociais ? ● novo paradigma computacional amplicando os conceitos de computação distribuida ● ambientes de programação ● banco de dados ● rede de computadores ● sistemas operacionais
  15. 15. Exemplos de aplicações candysoldier SkyScanner Contador de calorias sertaogames.com
  16. 16. Difusão da tecnologia celular
  17. 17. Difusão da tecnologia celular
  18. 18. Mundo Mobile ● usuários querem mais recursos em seus dispositivos ● aplicações móveis no mundo corporativo ● necessidade de plataformas mais modernas para desenvolvimento
  19. 19. O que é android? ● Sistema operacional baseado no kernel do linux ● possui uma versão enxuta da JVM - Dalvik ● Código aberto e livre ● Plataforma fléxivel e poderosíssima de desenvolvimento ● customizável
  20. 20. Open Handset alliance ● Definir uma plataforma única e aberta ● plataforma moderna e flexível para desenvolvedores ● usuários, fabricantes e desenvolvedores se beneficiam com o grupo
  21. 21. Android e os competidores ● IOs ● BlackBerry ● JME ● Windows Phone
  22. 22. Porque linux no android? ● Abstração de hardware ● gerencia memória, processos ● usuários não veem o linux e os apps não fazem chamadas diretas a ele ● suportes a gráficos 3D, OpenGL
  23. 23. Dalvik Virtual Machine ● JVM otimizada para dispositivos móveis ● bytecodes (.class) são convertidos em arquivos . dex (um dalvik executável) ● os .dex são compactados em um arquivo .apk, que é a app final. ● pro desenvolvedor não muda nada!
  24. 24. Frameworks existentes ● Roboguice: Dependence Injection para Android ○ http://code.google.com/p/roboguice/ ● Sencha Touch: HTML5 + Javascript = Apps para Android, IOs, Blackberry ○ http://www.sencha.com/ ● Phonegap: HTML5 + javascript, praticamente as “mesmas” ideias do Sencha Touch phonegap.com ● LibGDX – Desenvolvimento de Games http://code.google.com/p/libgdx/
  25. 25. Frameworks existentes ● Roboguice: Dependence Injection para Android ○ http://code.google.com/p/roboguice/ ● Sencha Touch: HTML5 + Javascript = Apps para Android, IOs, Blackberry ○ http://www.sencha.com/ ● Phonegap: HTML5 + javascript, praticamente as “mesmas” ideias do Sencha Touch phonegap.com
  26. 26. Preparando o terreno! ●Requisitos ○ Java SDK ○ Android SDK ○ Eclipse IDE ○ Plugin ADT
  27. 27. Preparando o terreno! ●Instalação do JDK no Linux (Ubuntu) ●Com o comando ●sudo apt-get install openjdk-6-jdk && sudo apt- get install sun-java6-jdk ●Após a instalação entre via console e digite: java –v ●A saída deve ser a versão do java instalado.
  28. 28. Preparando o terreno! ●Instalação do JDK no Linux (Ubuntu) ●Com o comando ●sudo apt-get install openjdk-6-jdk && sudo apt- get install sun-java6-jdk ●Após a instalação entre via console e digite: java –v ●A saída deve ser a versão do java instalado.
  29. 29. Preparando o terreno! ●Instalação do JDK no Linux (Ubuntu) ●Com o comando ●sudo apt-get install openjdk-6-jdk && sudo apt- get install sun-java6-jdk ●Após a instalação entre via console e digite: java –v ●A saída deve ser a versão do java instalado.
  30. 30. Preparando o terreno! 1. escolhe a versão do JDK 3. escolhe a versão pro seu S.O 2. aceita os termos de uso
  31. 31. Preparando o terreno! no site www.android.com escolher a opção developers
  32. 32. Preparando o terreno! 2. Escolha a opção SDK de acordo com o S.O A versão atual é a 4.0.3 (para tablet e smartphone)
  33. 33. Preparando o terreno! 2. Escolha a opção SDK de acordo com o S.O A versão atual é a 4.0.3 (para tablet e smartphone)
  34. 34. Preparando o terreno! ● Localize o arquivo e descompacte-o. ● No windows basta executar o arquivo “SDK Manager.exe” localizado na pasta raiz do sdk ● No linux ou Mac, acesse pelo terminal a pasta raiz do sdk e execute o comando ./tools/android
  35. 35. Preparando o terreno! ● Localize o arquivo e descompacte-o. ● No windows basta executar o arquivo “SDK Manager.exe” localizado na pasta raiz do sdk ● No linux ou Mac, acesse pelo terminal a pasta raiz do sdk e execute o comando ./tools/android
  36. 36. Preparando o terreno! irá aparacer o Android SDK Manager.
  37. 37. Preparando o terreno! Marque o pacote“tools” e as APIs do Android e clique em “Install Packages”
  38. 38. Preparando o terreno! Aceite todos e clique em “install”
  39. 39. Preparando o terreno! 1. Acesse o site www.eclipse.org e vá na sessão “Downlods” 2. Escolha a versão do Eclipse IDE for Java Developers
  40. 40. Preparando o terreno! Faça o download
  41. 41. Preparando o terreno! Faça o download
  42. 42. Preparando o terreno! Após o download localize o arquivo , descompacte-o e execute o arquivo “eclipse. exe” No ubunto é apenas “eclipse” Obs: no linux é necessário permissão para executar o arquivo
  43. 43. Preparando o terreno! Inicie o eclipse e vá em “help”, “install new software”
  44. 44. Preparando o terreno! Clique em add e uma nova janela irá aparecer Em “name” coloque “ADT Plugin” e em “location” adicione ADT Plugin - https://dl-ssl.google.com/android/eclipse/ e clique em “ok”
  45. 45. Preparando o terreno! Selecione “ADT Plugin” na lista de sites, marque a opção “Developers Tools” e clique em “next”.
  46. 46. Preparando o terreno! ● Irá aparecer uma lista com todos os item a serem instalados. ● Clique em "Next" novamente. Na próxima tela, escolha a opção "I accept the the terms of the licence agreements" e clique em 'Finish'. ● Após o processo de instação do plugin o Eclipse irá reiniciar.
  47. 47. Preparando o terreno!
  48. 48. Preparando o terreno! Quando o eclipse iniciar será pedida a localização do Android SDK.
  49. 49. Preparando o terreno! Criando uma ADV
  50. 50. Pronto! Ambiente configurado!
  51. 51. Hello Word! como rodar o projeto? estrutura do projeto
  52. 52. Hello Word!
  53. 53. Conceitos básicos do Android: Activity ● Uma Activy representa uma tela da App ○ android.app.Activity ● Controla a passagem de parametros de um layout ○ uma tela pode ser criada via arquivo .xml ○ ou via código Java definido na Activity ● Implementa métodos para tratar eventos dos componentes ● Semelhante ao JFrame do javax.swing.*
  54. 54. Conceitos básicos do Android: Activity ● Uma Activy representa uma tela da App ○ android.app.Activity ● Controla a passagem de parametros de um layout ○ uma tela pode ser criada via arquivo .xml ○ ou via código Java definido na Activity ● Implementa métodos para tratar eventos dos componentes ● Semelhante ao JFrame do javax.swing.*
  55. 55. Conceitos básicos do Android: Activity
  56. 56. Conceitos básicos do Android: View ● São componentes simples (botões, checkboxes, imagens) ou componentes compostos ○ Atuam como gerenciadores de layout ○ Podem conter várias views filhas (outro componentes) ● O arquivo main.xml é um arquivo de layout padrão ● Vários layouts podem ser definidos
  57. 57. Conceitos básicos do Android: View
  58. 58. Conceitos básicos do Android: View ● O médoto setContentView faz a ligação entre a activity e a view ● A view passada como parâmetro está definida no arquivo main.xml (pode ser mudado) ○ é referenciada via o arquivo R.java como uma constante
  59. 59. Conceitos básicos do Android: A classe R
  60. 60. Conceitos básicos do Android: AndroidManifest.xml ● Base da aplicação e semelhante ao web.xml de aplicações web java
  61. 61. Conceitos básicos do Android: AndroidManifest.xml ● As Activities devem ser definidas no arquivo ● Para que o usuário possa interagir, pelo menos uma Activity deve ser definida no arquivo ● A configuração de uma Activity como ponto de partida para a aplicação é ilustrada abaixo:
  62. 62. Conceitos básicos do Android: AndroidManifest.xml ● As Activities devem ser definidas no arquivo ● Para que o usuário possa interagir, pelo menos uma Activity deve ser definida no arquivo ● A configuração de uma Activity como ponto de partida para a aplicação é ilustrada abaixo:
  63. 63. Ciclo de vida de uma Activivy
  64. 64. Ciclo de vida de uma Activivy onCreate: – Obrigatório e chamado uma única vez. – Deve-se setar a view • onStart: é chamado quando uma activity está ficando visível e já tem uma view definida • onRestart: chamado quando uma activity foi parada temporariamente e está retornando à execução • onResume: – Quando uma activity está executando. – Pode ser chamada também para recuperação de dados quando foi interrompida e volta a execução onPause: chamado quando a activity está sendo tirada do topo da execução. Usado para salvar o estado da aplicação onStop: – A aplicação não está mais visível e está em segundo plano. – Caso fique por muito tempo em 2o Plano e falte recursos, o S.O. pode remover completamente da pilha de execução
  65. 65. Ciclo de vida de uma Activivy onCreate: – Obrigatório e chamado uma única vez. • onStart: é chamado quando uma activity está ficando visível e já tem uma view definida • onRestart: chamado quando uma activity foi parada temporariamente e está retornando à execução • onResume: – Quando uma activity está executando. – Pode ser chamada também para recuperação de dados quando foi interrompida e volta a execução onPause: chamado quando a activity está sendo tirada do topo da execução. Usado para salvar o estado da aplicação onStop: – A aplicação não está mais visível e está em segundo plano. – Caso fique por muito tempo em 2o Plano e falte recursos, o S.O. pode remover completamente da pilha de execução onDestroy: encerra literalmente a activity
  66. 66. Activities x Intents ● Activities são as "telas" ● Uma aplicação pode ter várias activities: ● – geralmente independentes, ● – contudo elas podem precisar se cooperar e trocar dados entre si ● Numa aplicação tradicional, uma activity deve ser definida como "main" e será executada ao rodar a aplicação ● Indo de uma activity para outra é possível pedindo para a atual executar uma intent
  67. 67. Intents
  68. 68. Intents android.content.Intent • Representa uma mensagem da aplicação para o S.O. • Solicita que algo seja realizado e serve para integrar aplicações • Ex: – Chamar outra tela (já visto) – Solicitar que o S.O. ligue para um número; – Abrir o browser em um determinado endereço – Exibir algum endereço, localização ou rota num mapa – Executar processamento em segundo plano – Enviar mensagem para outras aplicações realizarem tarefas específicas
  69. 69. Intents android.content.Intent • Representa uma mensagem da aplicação para o S.O. • Solicita que algo seja realizado e serve para integrar aplicações • Ex: – Chamar outra tela (já visto) – Solicitar que o S.O. ligue para um número; – Abrir o browser em um determinado endereço – Exibir algum endereço, localização ou rota num mapa – Executar processamento em segundo plano – Enviar mensagem para outras aplicações realizarem tarefas específicas
  70. 70. Intents São chamadas pelos métodos: startActivity(intent) = Executa uma activity starActivityForResult(intent) = Executa uma activity que pode retornar valores startService(intent) or bindService(intent, …) = Inicia ou se comunica comum serviço de segundo plano sendBroadcast(intent) = Envia uma intent que pode ser "capturada" por serviçoses pecíficos
  71. 71. Intents definidas
  72. 72. Permissões ● Algumas intents necessitam de permissão explicita para executar ● Deve-se adicionar as permissões no arquivo AndroidManifest.xml
  73. 73. Usando intents pré-definidas ● Algumas intents necessitam de permissão explicita para executar ● Deve-se adicionar as permissões no arquivo AndroidManifest.xml
  74. 74. Algumas permissões ●Permissão para executar navegação: INTERNET ●Ligações telefônicas: CALL_PHONE ●Leitura à lista de contatos: READ_CONTACTS
  75. 75. Exemplo: Intent chamando o navegador ●Tipo ACTION_VIEW ●... ●Uri uri = Uri.parse("http://www.android.com"); ●Intent it = new Intent(Intent.ACTION_VIEW, uri); ●startActivity(it); ●l... ● É necessária a permissão INTERNET
  76. 76. Let's practice!!
  77. 77. O Que é o Phonegap? ● HTML5 + CSS3 + Javascript ● "Ponte entre browser e recursos nativos do S.O"
  78. 78. Aplicações de exemplo MobileDiary
  79. 79. Aplicações de exemplo Orbium - Pluzzle game
  80. 80. Básico pro phonegap funcionar ● Baixar o phonegap (www.phonegap.com) ● configurar as ferramentas especificas de cada plataforma ○ ex: (xcode para Iphone, android sdk, etc) ● Inclui as bibliotecas do phonegap no seu workset de desenvolvimento
  81. 81. Configurando pro android ● Crie um novo "Android project" no eclipse ● cria uma pasta chamada "libs" ● dentro da pasta "assets" cria uma subpasta chamada "www" ● copie o arquivo "phonegap.jar" para a pasta "libs" ● copie o arquivo "phonegap.js" para pasta "www" ● Mude a Activivy gerada pelo ATD para: ○ public class MyActivivy extends DroidGap{ ...}
  82. 82. Configurando pro android ● A Activity deve ficar mais ou menos assim
  83. 83. Configurando pro android ● dentro do método onCreate() altere a view principal para: ○ substitua o setContentView() por super.loadUrl(“file: ///android_asset/www/index.html”); ○ dentro da pasta "www", crie um arquivo "index.html" ○ inclua na pasta "res/xml" o arquivo "plugins.xml"
  84. 84. Alterando o AndroidManifest.xml <uses-permission android:name=”android.permission.CAMERA” /> <uses-permission android:name=”android.permission.VIBRATE” /> <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” /> <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” /> <uses-permission android:name= “android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” /> <uses-permission android:name=”android.permission.READ_PHONE_STATE” /> <uses-permission android:name=”android.permission.INTERNET” /> <uses-permission android:name=”android.permission.RECEIVE_SMS” /> <uses-permission android:name=”android.permission.RECORD_AUDIO” /> <uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” /> <uses-permission android:name=”android.permission.READ_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” /> <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
  85. 85. Ambiente configurado!! agora é só rodar o emulador!
  86. 86. Quem usa? ● Quem usa? ○ Alcatel ○ Zynga ○ Microsoft ○ Adobe ○ Travelocity ○ Vodaphone ○ Wikipedia ○ ...
  87. 87. Plataformas suportadas
  88. 88. Dificuldades de cada plataforma ● Android ● IOs ● Blackberry
  89. 89. Overview HTML5 + CSS3 + Javascript ● HTML5 ○ ultima especificação do HTML ○ <!DOCTYPE html> ○ suportes a recursos como geolocalização, localstorage, webworkers e websockets
  90. 90. Overview HTML5 + CSS3 + Javascript ● CSS3 ○ seletores ■ #idName ■ .className ■ :pseudo-class ■ { /* propriedades de estilos ficam aqui! */ }
  91. 91. Overview HTML5 + CSS3 + Javascript ● CSS3 ○ Scrolling ○ viewports - <meta name="viewport content="width=device-width,initial- scale=1.0"/>
  92. 92. Dificuldades de cada plataforma ● Android - Java (Dalvik) ● IOs - Objective-C ● Blackberry - Java ● Windows mobile (.Net / C++)
  93. 93. Eventos ● eventos espeificos do phonegap ○ backbutton ○ deviceready ○ menubutton ○ pause ○ resume ○ searchbutton ○ online ○ offline
  94. 94. Eventos ● eventos específicos do phonegap ○ backbutton ○ deviceready ○ menubutton ○ pause ○ resume ○ searchbutton ○ online ○ offline
  95. 95. Eventos ● deviceready ○ dentre os eventos citados, ele é o mais importante. é ele que me garante que os recurso do phonegap foram completamente carregados ○ semelhante ao .ready(function(){}) do jQuery ○ usar deviceready garante que os DOMs da página foram carregados e que os recursos da API estão disponíveis pra uso ○ todo evento deve ser registrado no deviceready function
  96. 96. Eventos ● Usando eventos <script type=”text/javascript” charset=”utf-8” src=” phonegap.js”></script> <script type=”text/javascript” charset=”utf-8”> document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { // call the phonegap api } </script>
  97. 97. Eventos ● Adicionando eventos document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { // call the phonegap api document.addEventListener(“pause”, onPause, false); document.addEventListener(“resume”, onResume, false); } function onPause(){ } function onResume(){ }
  98. 98. Entendendo cada tipo ● backbutton - disparado quando usuário pressiona o botão backbutton do dispositivo ● deviceready - o mais importante entre eles, deve ser o primeiro evento a ser chamado ● menubutton - disparado quando pressionado o menu do dispositivo ● pause - quando a aplicação é colocada em segundo plano ● resume - quando a aplicação sai da pausa e volta para o primeiro plano
  99. 99. Entendendo cada tipo ● searchbutton- disparado quando usuário pressiona o botão de busca no dispositivo ● online- quando o dispositivo está conectado a internet ● offline - sem conectividade com a internet
  100. 100. Recuperando informações do dispositivo ● device.name ● device.phonegap ● device.platform ● device.version

×