Phonegap

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

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

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"

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

● Computação ubíqua
○ Basea-se na detecção de gestos , movimentos, fala,
movimentação dos olhos ...
○

http://youtu.be/9c6W4CCU9M4

● Junta tudo

Pervasiv Ubíqua Móvel
a

● Princípios da computação móvel

○ Descentralização
uma grande variedade de pequenos dispositivos cooperam
estabelecendo uma rede dinamica de relacionamento


○ Diversificação
■ mesma informação em diferentes modelos


○ Conectividade

■ bluetooth, wlan, 4G, WiMax
■ troca de informação
■ descoberta de serviços
■ delegação de tarefas


○ Simplicidade

■ "computadores móveis" são mais especificos e mais
simples em configuração
■ touch-screen
■ reconhecimento de voz e escrita

● 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

● 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

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

Exemplos de aplicações

candysoldier
SkyScanner Contador de calorias
sertaogames.com

Difusão da tecnologia celular

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

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

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

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

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

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!

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/

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

Preparando o terreno!

●Requisitos
○ Java SDK
○ Android SDK
○ Eclipse IDE
○ Plugin ADT

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


1. escolhe a versão
do JDK
3. escolhe a versão pro seu S.O

2. aceita os termos de uso


no site www.android.com escolher a opção developers


2. Escolha a opção SDK de acordo com o S.O
A versão atual é a 4.0.3 (para tablet e smartphone)


● 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


irá aparacer o Android SDK Manager.

Marque o pacote“tools” e as APIs do Android e
clique em “Install Packages”


Aceite todos e clique em “install”

1. Acesse o site www.eclipse.org e vá na sessão
“Downlods”

2. Escolha a versão do Eclipse IDE for Java Developers


Faça o download


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


Inicie o eclipse e vá em “help”, “install new
software”

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”


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

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


Quando o eclipse iniciar será pedida a localização do
Android SDK.


Criando uma ADV

Hello Word!

como rodar o projeto?

estrutura do projeto

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

Activity

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

● 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

A classe R

AndroidManifest.xml
● Base da aplicação e semelhante ao web.xml de aplicações
web java

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:

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

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

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

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

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

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

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

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

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

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

Aplicações de exemplo

MobileDiary

Aplicações de exemplo

Orbium - Pluzzle game

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

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

● A Activity deve ficar mais ou menos assim

● 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"

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

Ambiente configurado!!

agora é só rodar o emulador!

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

Dificuldades de cada plataforma
● Android
● IOs
● Blackberry

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

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

● CSS3
○ Scrolling
○ viewports -
<meta name="viewport content="width=device-width,initial-
scale=1.0"/>

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

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

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

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

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>

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

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

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

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

Phonegap

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Phonegap

Mais de Lucas Aquiles

Phonegap