Palestra IT Day - 15/10/2011

1. Desenvolvendo para
Android com PhoneGap
Mayron Cachina
mayroncachina@gmail.com

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

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

4. Novos modelos todo mês

5. Android x IPhone

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

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

8. Sistema mobile mais vendido
Agosto/2011

9. open handset allience

10. Loja de Aplicativos
Android Market
https://market.android.com/

13. Versões

14. DESENVOLVIMENTO

15. Plataforma Otimizada

16. Preparando o ambiente de
desenvolvimento
● Java - http://java.sun.com/javase/downloads/
● IDE Eclipse - http://www.eclipse.org/downloads/
● Android SDK - http://developer.android.com/sdk

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

18. Instalando 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
$ tar -zxvf android-sdk_r04-linux_86.tgz
$ cd android-sdk-linux_86/tools
$ cd android-sdk-linux_86/tools
$ ./android
$ ./android

19. Configurando o Eclipse
ADT - Android Development Tools
● Execute o Eclipse
● Help >Install New Software
● Clique em “Add...”

20. Configurando o Eclipse
ADT - Android Development Tools
● Adicione o Google plugin for Eclipse em Location
● https://dl-ssl.google.com/android/eclipse/

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

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

23. Configurando o Eclipse
● Reinicie o Eclipse e após vá ao menu
Window>Preferences e selecione Android
● Selecione o local do SDK e aperte Apply

24. Hello Word
● No Eclipse acesse o menu:
File → New → Project → Android Project

25. Hello Word

26. Hello Word
● Modifique a classe HelloWord conforme abaixo:

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

28. Hello Word

29. Hello Word

30. Componentes UI

31. Componentes UI
Action Bar

32. Componentes UI
List

33. Componentes UI
Map

34. Componentes UI
Widgets

35. Componentes UI
Quick Actions

36. Componentes UI
Search Bar

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

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

41. Múltiplas plataformas de
desenvolvimento

42. Processo de desenvolvimento
BUILD
Crie sua aplicação web nativa
Crie sua aplicação web nativa
HTML5
HTML5
Develop
Desenvolvimento utilizando a API nativa
Desenvolvimento utilizando a API nativa
do phonegap
do phonegap
Deploy
Realizar o deploy para a plataforma de
Realizar o deploy para a plataforma de
sua escolha, como Iphone, blackbarry,
sua escolha, como Iphone, blackbarry,
android, windows phone, palm.
android, windows phone, palm.

43. JavaScript 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/

44. jQuery Mobile

46. HTML 5
● <canvas> ● web SQL
● <audio> ● Sockets
● <video>
● Drag and Drop
● File API
● History API

47. Reference API
● Accelerometer
● Camera
● Connection
● Contacts
● Geolocation
● Media
● Notification
● Storage

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

49. Praticando!

51. Build PhoneGap Cloud

52. EXEMPLOS

53. Logitech Squeezebox™
Controller App
http://www.logitech.com/en-us/speakers-audio/wireless-music-systems/devices/7979

54. Diary Mobile
http://diary.com/mobile

55. Orbium
http://jsway.se/

56. harmonious
http://angryrobotzombie.com/

57. CronJaguar
https://github.com/mayroncachina/CronJaguar

58. Baby Growth Charts
http://www.kausch.li/iphone/babygrowth/

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

60. WEB x NATIVE?
http://photodune.net/item/group-of-elderly-people-working-on-laptop/186609
http://photodune.net/item/group-of-elderly-people-working-on-laptop/186609

61. A WEB É NATIVA!
http://pedagogiavaleriavenancio.blogspot.com/2010/04/alfabetizacao-tecnologica.html
http://pedagogiavaleriavenancio.blogspot.com/2010/04/alfabetizacao-tecnologica.html

63. Referências
● Doc UI Android
http://developer.android.com/guide/topics/ui/index.html
● openhandsetalliance
http://www.openhandsetalliance.com
● Phonegap
http://www.phonegap.com/
● Phonegap Build
https://build.phonegap.com/
● Phonegap Groups
http://groups.google.com/group/phonegap
● Jquery
http://jquerymobile.com/
● Jquery Mobile
http://jquerymobile.com/demos/1.0rc1/
● HTML 5 Reference
http://dev.w3.org/html5/spec/Overview.html

64. OBRIGADO!!!
http://cachina.com.br
@mayroncachina
mayroncachina@gmail.com