Desenvolvendo para Desenvolvendo para Android com PhoneGapAndroid com PhoneGap

Desenvolvendo para Desenvolvendo para Android com PhoneGapAndroid com PhoneGap

Mayron Cachinamayroncachina@gmail.com

O que é o Android?O que é o Android?

● O Android é um sistema operacional● Desenvolvido para dispositivos móveis● Produzido pela Google● Não necessita de um hardware específico● Utiliza um kernel do Linux, personalizado :)● Aplicativos feitos em Java, não em JME !

● Primeiro celular lançado em 2008● Android T-Mobile G1

Novos modelos todo mêsNovos modelos todo mês

Android x IPhoneAndroid x IPhone

IPhoneIPhone

● Flexibilidade:● A Apple é conhecida por limitar as funções de seus

sistemas e com o iPhone não é diferente. ● Geralmente são tecnologias exclusivas e não

interagem muito bem com outros sistemas operacionais.

● Seus clientes só podem usar aplicativos aprovados por eles (teoricamente).

● Tecnologia fechada.

AndroidAndroid

● Flexibilidade:● É Open Source, por tanto é aberto e dá liberdade

aos usuários. ● Os usuários têm liberdade para usar● Os desenvolvedores para criar● Fabricantes para personalizar o sistema para seus

clientes.

Sistema mobile mais vendido Sistema mobile mais vendido Agosto/2011Agosto/2011

open handset allienceopen handset allience

Loja de AplicativosLoja de AplicativosAndroid MarketAndroid Market

https://market.android.com/

VersõesVersões

DESENVOLVIMENTODESENVOLVIMENTO

Plataforma OtimizadaPlataforma Otimizada

Preparando o ambiente de Preparando o ambiente de desenvolvimentodesenvolvimento

● Java - http://java.sun.com/javase/downloads/● IDE Eclipse - http://www.eclipse.org/downloads/● Android SDK - http://developer.android.com/sdk

Instalando o SDK WindowsInstalando o SDK Windows

● Vá até o executável que se encontrará no diretório do Android SDK e execute.

● Em Available Packages, temos as versões da plataforma do Android.

● Marque apenas as opções para Android 2.1

● Clique em Install Selected.

Instalando o SDK no LinuxInstalando o SDK no Linux

● Extraia os arquivos em uma pasta, vá até a pasta /tools que se encontrará no diretório do Android SDK e execute ./android

● Em Available Packages, temos as versões da plataforma do Android.

● Marque apenas as opções para Android 2.1

● Clique em Install Selected.

$ tar -zxvf android-sdk_r04-linux_86.tgz$ cd android-sdk-linux_86/tools$ ./android

$ tar -zxvf android-sdk_r04-linux_86.tgz$ cd android-sdk-linux_86/tools$ ./android

Configurando o EclipseConfigurando o EclipseADT - Android Development ToolsADT - Android Development Tools

● Execute o Eclipse● Help >Install New Software● Clique em “Add...”

Configurando o EclipseConfigurando o EclipseADT - Android Development ToolsADT - Android Development Tools

● Adicione o Google plugin for Eclipse em Location

● https://dl-ssl.google.com/android/eclipse/

Configurando o EclipseConfigurando o Eclipse

● Assim que adicionar o plugin, marque Developer Tools e clique no botão Next.

Configurando o EclipseConfigurando o Eclipse

● Na segunda etapa, mantenha como está, caso não tenha erros e prossiga. Na terceira etapa, aceite os termos de licença e clique no botão Finish.

Configurando o EclipseConfigurando o Eclipse

● Reinicie o Eclipse e após vá ao menu Window>Preferences e selecione Android

● Selecione o local do SDK e aperte Apply

Hello WordHello Word

● No Eclipse acesse o menu:File → New → Project → Android Project

Hello WordHello Word

Hello WordHello Word

● Modifique a classe HelloWord conforme abaixo:

Hello WordHello Word

● Para executar o programa no emulador, basta apenas no menu principal “Run” → “Run...” e selecionar Android Application

Hello WordHello Word

Hello WordHello Word

Componentes UIComponentes UI

Componentes UIComponentes UIAction BarAction Bar

Componentes UIComponentes UIListList

Componentes UIComponentes UIMapMap

Componentes UIComponentes UIWidgetsWidgets

Componentes UIComponentes UIQuick ActionsQuick Actions

Componentes UIComponentes UISearch BarSearch Bar

O que é o PhoneGap?O que é o PhoneGap?

● Framework open-sourse para desenvolvimento mobile.

● Possibilita desenvolver utilizando as linguagens HMTML5, CSS3 e JS.

● Atualmente na versão 1.1.0

Novidades versão 1.0Novidades versão 1.0

● Estabilidade da API e criação de plugins.● Compatibilidade com a API de acesso a dados

definida pelo W3C● API de manipulação de contatos● Ferramentas para depuração remota

Múltiplas plataformas de Múltiplas plataformas de desenvolvimentodesenvolvimento

Processo de desenvolvimentoProcesso de desenvolvimento

BUILDBUILDCrie sua aplicação web nativaHTML5Crie sua aplicação web nativaHTML5

DevelopDevelopDesenvolvimento utilizando a API nativa do phonegap Desenvolvimento utilizando a API nativa do phonegap

DeployDeployRealizar o deploy para a plataforma de sua escolha, como Iphone, blackbarry, android, windows phone, palm.

Realizar o deploy para a plataforma de sua escolha, como Iphone, blackbarry, android, windows phone, palm.

JavaScript LibraryJavaScript Library

● Jo - http://joapp.com/

● JQTouch - http://www.jqtouch.com/

● JQuery Mobile - http://jquerymobile.com/

● Sencha Touch – http://www.sencha.com/products/touch/

● Unify - http://unify.github.com/unify/

jQuery MobilejQuery Mobile

HTML 5HTML 5

● <canvas>● <audio>● <video>● Drag and Drop● File API● History API

● web SQL● Sockets

Reference APIReference API

● Accelerometer● Camera● Connection● Contacts● Geolocation● Media● Notification● Storage

PluginsPlugins

● Plugins desenvolvidos pela comunidade● Disponível no GitHub

https://github.com/phonegap/phonegap-plugins

● Atualmente para Android, Iphone, BlackBarry e Palm

● Exemplos:● Video Player● Bar Scanner● FTP Client

Praticando!Praticando!

Build PhoneGap CloudBuild PhoneGap Cloud

EXEMPLOSEXEMPLOS

Logitech Squeezebox™ Logitech Squeezebox™ Controller AppController App

http://www.logitech.com/en-us/speakers-audio/wireless-music-systems/devices/7979

Diary MobileDiary Mobile

http://diary.com/mobile

OrbiumOrbium

http://jsway.se/

harmoniousharmonious

http://angryrobotzombie.com/

CronJaguarCronJaguar

https://github.com/mayroncachina/CronJaguar

Baby Growth ChartsBaby Growth Charts

http://www.kausch.li/iphone/babygrowth/

Bike RouteBike Route

http://itunes.apple.com/us/app/bike-route/id385583340?mt=8

WEB x NATIVE?WEB x NATIVE?

http://photodune.net/item/group-of-elderly-people-working-on-laptop/186609http://photodune.net/item/group-of-elderly-people-working-on-laptop/186609

A WEB É NATIVA!A WEB É NATIVA!

http://pedagogiavaleriavenancio.blogspot.com/2010/04/alfabetizacao-tecnologica.htmlhttp://pedagogiavaleriavenancio.blogspot.com/2010/04/alfabetizacao-tecnologica.html

ReferênciasReferências

● Doc UI Androidhttp://developer.android.com/guide/topics/ui/index.html

● openhandsetalliancehttp://www.openhandsetalliance.com

● Phonegaphttp://www.phonegap.com/

● Phonegap Buildhttps://build.phonegap.com/

● Phonegap Groupshttp://groups.google.com/group/phonegap

● Jqueryhttp://jquerymobile.com/

● Jquery Mobilehttp://jquerymobile.com/demos/1.0rc1/

● HTML 5 Referencehttp://dev.w3.org/html5/spec/Overview.html

OBRIGADO!!!OBRIGADO!!!

http://cachina.com.br@mayroncachina

mayroncachina@gmail.com