Phonegap

5.146 visualizações

Publicada em

apresentação sobre Phonegap na semana academia de computação do IFPI - 2012

Publicada em: Tecnologia
0 comentários
8 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.146
No SlideShare
0
A partir de incorporações
0
Número de incorporações
363
Ações
Compartilhamentos
0
Downloads
211
Comentários
0
Gostaram
8
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Phonegap

  1. 1. Phonegap JS
  2. 2. About me● @Lucas_Aquiles● lucasaquiles@gmail.com● lucasaquiles.com.br/
  3. 3. Roteiro1º 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 plataforma2º dia v. WTF Phonegap? vi. Quem usa? onde isso roda? vii. Instalação e configuração viii. Recursos do PhonegapAPI ix. HTML5 + CSS3 + Javascript3º 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ãodo 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 eclique 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 newsoftware”
  44. 44. Preparando o terreno!Clique em add e uma nova janela iráaparecerEm “name” coloque “ADT Plugin” e em “location” adicione ADTPlugin - https://dl-ssl.google.com/android/eclipse/ e clique em “ok”
  45. 45. Preparando o terreno!Selecione “ADT Plugin” na lista de sites, marque aopçã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 doAndroid 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 ActivivyonCreate: – 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 viewdefinida• 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çãoonPause: chamado quando a activity está sendo tirada do topo da execução. Usadopara salvar o estado da aplicaçãoonStop: – 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 ActivivyonCreate: – Obrigatório e chamado uma única vez.• onStart: é chamado quando uma activity está ficando visível e já tem uma viewdefinida• 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çãoonPause: chamado quando a activity está sendo tirada do topo da execução. Usadopara salvar o estado da aplicaçãoonStop: – 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çãoonDestroy: 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. Intentsandroid.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 tarefasespecíficas
  69. 69. Intentsandroid.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 tarefasespecíficas
  70. 70. IntentsSão chamadas pelos métodos:startActivity(intent) = Executa uma activitystarActivityForResult(intent) = Executa uma activityque pode retornar valoresstartService(intent) or bindService(intent, …) =Inicia ou se comunica comum serviço de segundo planosendBroadcast(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 onavegador ●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. Lets 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

×