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

1. Phonegap
JS

2. About me
● @Lucas_Aquiles
● lucasaquiles@gmail.com
● lucasaquiles.com.br/

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. 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

19. Exemplos de aplicações
candysoldier
SkyScanner Contador de calorias
sertaogames.com

20. Difusão da tecnologia celular

21. Difusão da tecnologia celular

22. Mundo Mobile
● usuários querem mais recursos em seus
dispositivos
● aplicações móveis no mundo corporativo
● necessidade de plataformas mais modernas para
desenvolvimento

25. 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

26. 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

27. Android e os competidores
● IOs
● BlackBerry
● JME
● Windows Phone

28. 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

29. 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!

30. 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/

31. 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

32. Preparando o terreno!
●Requisitos
○ Java SDK
○ Android SDK
○ Eclipse IDE
○ Plugin ADT

33. 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.

34. 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.

35. 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.

36. 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

37. Preparando o terreno!
no site www.android.com escolher a opção developers

38. 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)

39. 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)

40. 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

41. 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

42. Preparando o terreno!
irá aparacer o Android SDK Manager.

43. Preparando o terreno!
Marque o pacote“tools” e as APIs do Android e
clique em “Install Packages”

44. Preparando o terreno!
Aceite todos e clique em “install”

45. 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

46. Preparando o terreno!
Faça o download

47. Preparando o terreno!
Faça o download

48. 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

49. Preparando o terreno!
Inicie o eclipse e vá em “help”, “install new
software”

50. 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”

51. Preparando o terreno!
Selecione “ADT Plugin” na lista de sites, marque a
opção “Developers Tools” e clique em “next”.

52. 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.

53. Preparando o terreno!

54. Preparando o terreno!
Quando o eclipse iniciar será pedida a localização do
Android SDK.

55. Preparando o terreno!
Criando uma ADV

56. Pronto! Ambiente configurado!

57. Hello Word!
como rodar o projeto?
estrutura do projeto

58. Hello Word!

59. 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.*

60. 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.*

61. Conceitos básicos do Android:
Activity

62. 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

63. Conceitos básicos do Android: View

64. 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

65. Conceitos básicos do Android:
A classe R

66. Conceitos básicos do Android:
AndroidManifest.xml
● Base da aplicação e semelhante ao web.xml de aplicações
web java

67. 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:

68. 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:

69. Ciclo de vida de uma Activivy

70. 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

71. 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

72. 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

73. Intents

74. 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

75. 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

76. 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

77. Intents definidas

78. Permissões
● Algumas intents necessitam de permissão explicita para
executar
● Deve-se adicionar as permissões no arquivo
AndroidManifest.xml

79. Usando intents pré-definidas
● Algumas intents necessitam de permissão explicita para
executar
● Deve-se adicionar as permissões no arquivo
AndroidManifest.xml

80. Algumas permissões
●Permissão para executar navegação: INTERNET
●Ligações telefônicas: CALL_PHONE
●Leitura à lista de contatos: READ_CONTACTS

81. 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

82. Let's practice!!

83. O Que é o Phonegap?
● HTML5 + CSS3 + Javascript
● "Ponte entre browser e recursos nativos do S.O"

84. Aplicações de exemplo
MobileDiary

85. Aplicações de exemplo
Orbium - Pluzzle game

86. 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

87. 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{
...}

88. Configurando pro android
● A Activity deve ficar mais ou menos assim

89. 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"

90. 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” />

91. Ambiente configurado!!
agora é só rodar o emulador!

92. Quem usa?
● Quem usa?
○ Alcatel
○ Zynga
○ Microsoft
○ Adobe
○ Travelocity
○ Vodaphone
○ Wikipedia
○ ...

93. Plataformas suportadas

94. Dificuldades de cada plataforma
● Android
● IOs
● Blackberry

95. Overview HTML5 + CSS3 + Javascript
● HTML5
○ ultima especificação do HTML
○ <!DOCTYPE html>
○ suportes a recursos como geolocalização, localstorage,
webworkers e websockets

96. Overview HTML5 + CSS3 + Javascript
● CSS3
○ seletores
■ #idName
■ .className
■ :pseudo-class
■ {
/* propriedades de estilos ficam aqui! */
}

97. Overview HTML5 + CSS3 + Javascript
● CSS3
○ Scrolling
○ viewports -
<meta name="viewport content="width=device-width,initial-
scale=1.0"/>

98. Dificuldades de cada plataforma
● Android - Java (Dalvik)
● IOs - Objective-C
● Blackberry - Java
● Windows mobile (.Net / C++)

99. Eventos
● eventos espeificos do phonegap
○ backbutton
○ deviceready
○ menubutton
○ pause
○ resume
○ searchbutton
○ online
○ offline

100. Eventos
● eventos específicos do phonegap
○ backbutton
○ deviceready
○ menubutton
○ pause
○ resume
○ searchbutton
○ online
○ offline

101. 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

102. 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>

103. 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(){
}

104. 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

105. 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

106. Recuperando informações do
dispositivo
● device.name
● device.phonegap
● device.platform
● device.version