phonegap

Phonegap JS

About me

● @Lucas_Aquiles● [email protected]● lucasaquiles.com.br/

Roteiro1º dia

i. Introdução a computação móvelii. Mundo mobile

iii. Desenvolvendo com Android1. 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çãoviii. 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

Pervasiva

Ubíqua Móvel


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

○ Descentralizaçãouma 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

candysoldiersertaogames.com

Contador de caloriasSkyScanner

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 Gameshttp://code.google.com/p/libgdx/

http://code.google.com/p/roboguice/


http://www.sencha.com/


http://code.google.com/p/libgdx/

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

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.


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


Criando uma ADV

Pronto! Ambiente configurado!

Hello Word!

estrutura do projeto

como rodar o projeto?

Hello Word!

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

Conceitos básicos do Android: 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

Conceitos básicos do Android: A classe R

Conceitos básicos do Android: AndroidManifest.xml

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

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:

Ciclo de vida de uma Activivy

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

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

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

Intents definidas

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

Let's practice!!

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

Plataformas suportadas

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

Technology