Your SlideShare is downloading. ×
Phonegap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Phonegap

4,110
views

Published on

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

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

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,110
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
166
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Phonegap JS
  • 2. About me● @Lucas_Aquiles● lucasaquiles@gmail.com● lucasaquiles.com.br/
  • 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. 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. 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. 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. Introdução a computação móvel● Junta tudo Pervasiv Ubíqua Móvel a
  • 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. Introdução a computação móvel● Princípios da computação móvel ○ Diversificação ■ mesma informação em diferentes modelos
  • 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. 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. 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. 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. 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. Exemplos de aplicações candysoldier SkyScanner Contador de calorias sertaogames.com
  • 16. Difusão da tecnologia celular
  • 17. Difusão da tecnologia celular
  • 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. 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. 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. Android e os competidores● IOs● BlackBerry● JME● Windows Phone
  • 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. 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. 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. 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. Preparando o terreno!●Requisitos ○ Java SDK ○ Android SDK ○ Eclipse IDE ○ Plugin ADT
  • 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. 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. 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. 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. Preparando o terreno!no site www.android.com escolher a opção developers
  • 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. 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. 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. 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. Preparando o terreno!irá aparacer o Android SDK Manager.
  • 37. Preparando o terreno!Marque o pacote“tools” e as APIs do Android eclique em “Install Packages”
  • 38. Preparando o terreno!Aceite todos e clique em “install”
  • 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. Preparando o terreno!Faça o download
  • 41. Preparando o terreno!Faça o download
  • 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. Preparando o terreno!Inicie o eclipse e vá em “help”, “install newsoftware”
  • 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. Preparando o terreno!Selecione “ADT Plugin” na lista de sites, marque aopção “Developers Tools” e clique em “next”.
  • 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. Preparando o terreno!
  • 48. Preparando o terreno!Quando o eclipse iniciar será pedida a localização doAndroid SDK.
  • 49. Preparando o terreno!Criando uma ADV
  • 50. Pronto! Ambiente configurado!
  • 51. Hello Word! como rodar o projeto?estrutura do projeto
  • 52. Hello Word!
  • 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. 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. Conceitos básicos do Android:Activity
  • 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. Conceitos básicos do Android: View
  • 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. Conceitos básicos do Android:A classe R
  • 60. Conceitos básicos do Android:AndroidManifest.xml● Base da aplicação e semelhante ao web.xml de aplicações web java
  • 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. 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. Ciclo de vida de uma Activivy
  • 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. 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. 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. Intents
  • 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. 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. 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. Intents definidas
  • 72. Permissões● Algumas intents necessitam de permissão explicita para executar● Deve-se adicionar as permissões no arquivo AndroidManifest.xml
  • 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. Algumas permissões●Permissão para executar navegação: INTERNET●Ligações telefônicas: CALL_PHONE●Leitura à lista de contatos: READ_CONTACTS
  • 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. Lets practice!!
  • 77. O Que é o Phonegap?● HTML5 + CSS3 + Javascript● "Ponte entre browser e recursos nativos do S.O"
  • 78. Aplicações de exemplo MobileDiary
  • 79. Aplicações de exemplo Orbium - Pluzzle game
  • 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. 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. Configurando pro android● A Activity deve ficar mais ou menos assim
  • 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. 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. Ambiente configurado!! agora é só rodar o emulador!
  • 86. Quem usa?● Quem usa? ○ Alcatel ○ Zynga ○ Microsoft ○ Adobe ○ Travelocity ○ Vodaphone ○ Wikipedia ○ ...
  • 87. Plataformas suportadas
  • 88. Dificuldades de cada plataforma● Android● IOs● Blackberry
  • 89. Overview HTML5 + CSS3 + Javascript● HTML5 ○ ultima especificação do HTML ○ <!DOCTYPE html> ○ suportes a recursos como geolocalização, localstorage, webworkers e websockets
  • 90. Overview HTML5 + CSS3 + Javascript● CSS3 ○ seletores ■ #idName ■ .className ■ :pseudo-class ■ { /* propriedades de estilos ficam aqui! */ }
  • 91. Overview HTML5 + CSS3 + Javascript● CSS3 ○ Scrolling ○ viewports - <meta name="viewport content="width=device-width,initial- scale=1.0"/>
  • 92. Dificuldades de cada plataforma● Android - Java (Dalvik)● IOs - Objective-C● Blackberry - Java● Windows mobile (.Net / C++)
  • 93. Eventos● eventos espeificos do phonegap ○ backbutton ○ deviceready ○ menubutton ○ pause ○ resume ○ searchbutton ○ online ○ offline
  • 94. Eventos● eventos específicos do phonegap ○ backbutton ○ deviceready ○ menubutton ○ pause ○ resume ○ searchbutton ○ online ○ offline
  • 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. 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. 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. 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. 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. Recuperando informações do dispositivo● device.name● device.phonegap● device.platform● device.version