PhoneGap
Diego “Dukão” Guimarães   diegodukao@mobilidade.fm
@diegodukao                       www.mobilidade.fm
“Please allow me to
        introduce myself”


@diegodukao            www.mobilidade.fm
@diegodukao   www.mobilidade.fm
soundcloud.com/cameliaavenida


@diegodukao            www.mobilidade.fm
Desenvolvedor Web
               (Django e Rails)




@diegodukao                       www.mobilidade.fm
?

@diegodukao       www.mobilidade.fm
Dukão + celulares = ?



@diegodukao           www.mobilidade.fm
Em breve:

    Mobilidade.FM / dev


@diegodukao               www.mobilidade.fm
Android é legal
         Java nem tanto


@diegodukao           www.mobilidade.fm
Alternativas?


@diegodukao               www.mobilidade.fm
Appcelerator Titanium

   Javascript
   Gera código nativo
   Mantém o “look and feel” de cada
   plataforma
   Falta MUITA coisa da SDK nativa    (Android)




@diegodukao                      www.mobilidade.fm
Appcelerator Titanium




@diegodukao                    www.mobilidade.fm
Kivy

   Python
   Cython + OpenGL
   Mesma aparência em todas as
   plataformas
   Bom para apps muito específicos

@diegodukao                  www.mobilidade.fm
Mas e o PhoneGap?




@diegodukao              www.mobilidade.fm
Nem nativo e nem web app




@diegodukao            www.mobilidade.fm
O que é uma web app?
    Uma página web otimizada para celulares/tablets


  Vantagens:
  + Você não precisa aprender a programar para aquele SO específico
  + HTML + CSS + Javascript
  + Pode ser apenas uma versão mobile do seu site que já está no ar


  Desvantagens:
  - Acesso limitado aos recursos do dispositivo
  - Mais lenta que apps nativas




@diegodukao                                             www.mobilidade.fm
Desvantagem:
  Acesso limitado aos recursos do
  dispositivo
    O que você não consegue acessar?
    Câmera, acelerômetro, contatos, etc.


    No entanto,

    O que você consegue acessar?
    Orientação, geolocalização, mídia, etc.




@diegodukao                                   www.mobilidade.fm
Desvantagem:
  Acesso limitado aos recursos do
  dispositivo

  Quantos aplicativos vocês conhecem
  que usam esses recursos?

   Poucos, comparando com os que
   não usam.

@diegodukao                   www.mobilidade.fm
68,97%
              Das estatísticas são inventadas




@diegodukao                                     www.mobilidade.fm
Aplicativo do Facebook

              Até 08/12 era web app




@diegodukao                        www.mobilidade.fm
“Tá, Dukão, mas O MEU aplicativo vai usar
   esses recursos TODOS! #digdin”




     PhoneGap nele!

@diegodukao                         www.mobilidade.fm
@diegodukao   www.mobilidade.fm
PhoneGap
                       =
        WebView (instância do navegador
        que abre dentro da app)
                       +
        APIs para acesso aos recursos
        do celular!



@diegodukao                         www.mobilidade.fm
E tem mais!


  Por ser Javascript, você pode lotar a sua
  app de frameworks e ficar na moda! o/


              E transformar seu aplicativo numa carroça.




@diegodukao                                                www.mobilidade.fm
Mas quem usa?



         http://phonegap.com/app/
       1323 apllicativos cadastrados



@diegodukao                    www.mobilidade.fm
Mas quem usa?




@diegodukao                   www.mobilidade.fm
Mas quem usa?




@diegodukao                   www.mobilidade.fm
Mas quem usa?




@diegodukao                   www.mobilidade.fm
Mas quem usa?




              Tem versão pra WebOS!

@diegodukao                           www.mobilidade.fm
Mobilidade.FM #34 – História Móvel: Palm




@diegodukao                         www.mobilidade.fm
Mas quem usa?




@diegodukao                   www.mobilidade.fm
Mas quem usa?




@diegodukao                   www.mobilidade.fm
#comofas



@diegodukao              www.mobilidade.fm
Android
Configurar o ambiente de desenvolvimento para Android:
  Baixar Eclipse, Android SDK e ADT plugin


Baixar e extrair a última versão do Cordova
  http://cordova.apache.org/#download




@diegodukao                                   www.mobilidade.fm
@diegodukao   www.mobilidade.fm
No terminal, na pasta onde você extraiu incubator-cordova-android.zip


 ./create <caminho_do_projeto> <nome_do_package> <nome_do_projeto>




@diegodukao                                           www.mobilidade.fm
No Eclipse: File > New > Project




@diegodukao                                 www.mobilidade.fm
@diegodukao   www.mobilidade.fm
A partir daí é só desenvolver sua app
 como um site normal!


  Ou seja, use qualquer editor e teste
  em qualquer browser!



@diegodukao                    www.mobilidade.fm
Para utilizar os recursos do celular:

              camera.getPicture
              accelerometer.watchAcceleration
              contacts.create
              contacts.find
              geolocation.getCurrentPosition


              Testar no emulador do Android




@diegodukao                                     www.mobilidade.fm
Deploy: igual qualquer app para Android



    Right click > Android Tools >
    Export Signed/Unsigned Application Package




@diegodukao                                www.mobilidade.fm
Deploy para 6 plataformas de uma vez




   build.phonegap.com

@diegodukao                     www.mobilidade.fm
Deploy para 6 plataformas de uma vez




   build.phonegap.com

@diegodukao                     www.mobilidade.fm
“Então eu devo mesmo usar o PhoneGap?”



 1) Você tem tempo e dinheiro limitados?
 2) Pretende atingir mais de uma plataforma com o seu aplicativo?
 3) Performance não é o mais importante?
 4) Já programa para web?




@diegodukao                                          www.mobilidade.fm
“Então eu devo mesmo usar o PhoneGap?”



 1) Você tem tempo e dinheiro limitados? “SIM”
 2) Pretende atingir mais de uma plataforma com o seu aplicativo? “SIM”
 3) Performance não é o mais importante? “SIM”
 4) Já programa para web? “SIM”




                            SIM!
@diegodukao                                          www.mobilidade.fm
“Então eu devo mesmo usar o PhoneGap?”



 4) Já programa para web? “Não =/”


 Se você também não sabe o nativo, vale a pena começar com o PhoneGap


                        #TodosAdora HTML 5 o/
                        Javascript tá na moda! o/

              Se tudo der errado, você pode virar Web Developer ;)



@diegodukao                                                   www.mobilidade.fm
72,83%
              Das pessoas só acreditam em estatísticas
              com duas casas decimais




@diegodukao                                         www.mobilidade.fm
Obrigado pela atenção!


                          Perguntas?




                    slideshare.com/diegodukao



Diego “Dukão” Guimarães                    diegodukao@mobilidade.fm
@diegodukao                                        www.mobilidade.fm

PhoneGap - Campus Party 2013

  • 1.
    PhoneGap Diego “Dukão” Guimarães diegodukao@mobilidade.fm @diegodukao www.mobilidade.fm
  • 2.
    “Please allow meto introduce myself” @diegodukao www.mobilidade.fm
  • 3.
    @diegodukao www.mobilidade.fm
  • 4.
  • 5.
    Desenvolvedor Web (Django e Rails) @diegodukao www.mobilidade.fm
  • 6.
    ? @diegodukao www.mobilidade.fm
  • 7.
    Dukão + celulares= ? @diegodukao www.mobilidade.fm
  • 8.
    Em breve: Mobilidade.FM / dev @diegodukao www.mobilidade.fm
  • 9.
    Android é legal Java nem tanto @diegodukao www.mobilidade.fm
  • 10.
    Alternativas? @diegodukao www.mobilidade.fm
  • 11.
    Appcelerator Titanium Javascript Gera código nativo Mantém o “look and feel” de cada plataforma Falta MUITA coisa da SDK nativa (Android) @diegodukao www.mobilidade.fm
  • 12.
  • 13.
    Kivy Python Cython + OpenGL Mesma aparência em todas as plataformas Bom para apps muito específicos @diegodukao www.mobilidade.fm
  • 14.
    Mas e oPhoneGap? @diegodukao www.mobilidade.fm
  • 15.
    Nem nativo enem web app @diegodukao www.mobilidade.fm
  • 16.
    O que éuma web app? Uma página web otimizada para celulares/tablets Vantagens: + Você não precisa aprender a programar para aquele SO específico + HTML + CSS + Javascript + Pode ser apenas uma versão mobile do seu site que já está no ar Desvantagens: - Acesso limitado aos recursos do dispositivo - Mais lenta que apps nativas @diegodukao www.mobilidade.fm
  • 17.
    Desvantagem: Acessolimitado aos recursos do dispositivo O que você não consegue acessar? Câmera, acelerômetro, contatos, etc. No entanto, O que você consegue acessar? Orientação, geolocalização, mídia, etc. @diegodukao www.mobilidade.fm
  • 18.
    Desvantagem: Acessolimitado aos recursos do dispositivo Quantos aplicativos vocês conhecem que usam esses recursos? Poucos, comparando com os que não usam. @diegodukao www.mobilidade.fm
  • 19.
    68,97% Das estatísticas são inventadas @diegodukao www.mobilidade.fm
  • 20.
    Aplicativo do Facebook Até 08/12 era web app @diegodukao www.mobilidade.fm
  • 21.
    “Tá, Dukão, masO MEU aplicativo vai usar esses recursos TODOS! #digdin” PhoneGap nele! @diegodukao www.mobilidade.fm
  • 22.
    @diegodukao www.mobilidade.fm
  • 23.
    PhoneGap = WebView (instância do navegador que abre dentro da app) + APIs para acesso aos recursos do celular! @diegodukao www.mobilidade.fm
  • 24.
    E tem mais! Por ser Javascript, você pode lotar a sua app de frameworks e ficar na moda! o/ E transformar seu aplicativo numa carroça. @diegodukao www.mobilidade.fm
  • 25.
    Mas quem usa? http://phonegap.com/app/ 1323 apllicativos cadastrados @diegodukao www.mobilidade.fm
  • 26.
    Mas quem usa? @diegodukao www.mobilidade.fm
  • 27.
    Mas quem usa? @diegodukao www.mobilidade.fm
  • 28.
    Mas quem usa? @diegodukao www.mobilidade.fm
  • 29.
    Mas quem usa? Tem versão pra WebOS! @diegodukao www.mobilidade.fm
  • 30.
    Mobilidade.FM #34 –História Móvel: Palm @diegodukao www.mobilidade.fm
  • 31.
    Mas quem usa? @diegodukao www.mobilidade.fm
  • 32.
    Mas quem usa? @diegodukao www.mobilidade.fm
  • 33.
    #comofas @diegodukao www.mobilidade.fm
  • 34.
    Android Configurar o ambientede desenvolvimento para Android: Baixar Eclipse, Android SDK e ADT plugin Baixar e extrair a última versão do Cordova http://cordova.apache.org/#download @diegodukao www.mobilidade.fm
  • 35.
    @diegodukao www.mobilidade.fm
  • 36.
    No terminal, napasta onde você extraiu incubator-cordova-android.zip ./create <caminho_do_projeto> <nome_do_package> <nome_do_projeto> @diegodukao www.mobilidade.fm
  • 37.
    No Eclipse: File> New > Project @diegodukao www.mobilidade.fm
  • 38.
    @diegodukao www.mobilidade.fm
  • 39.
    A partir daíé só desenvolver sua app como um site normal! Ou seja, use qualquer editor e teste em qualquer browser! @diegodukao www.mobilidade.fm
  • 40.
    Para utilizar osrecursos do celular: camera.getPicture accelerometer.watchAcceleration contacts.create contacts.find geolocation.getCurrentPosition Testar no emulador do Android @diegodukao www.mobilidade.fm
  • 41.
    Deploy: igual qualquerapp para Android Right click > Android Tools > Export Signed/Unsigned Application Package @diegodukao www.mobilidade.fm
  • 42.
    Deploy para 6plataformas de uma vez build.phonegap.com @diegodukao www.mobilidade.fm
  • 43.
    Deploy para 6plataformas de uma vez build.phonegap.com @diegodukao www.mobilidade.fm
  • 44.
    “Então eu devomesmo usar o PhoneGap?” 1) Você tem tempo e dinheiro limitados? 2) Pretende atingir mais de uma plataforma com o seu aplicativo? 3) Performance não é o mais importante? 4) Já programa para web? @diegodukao www.mobilidade.fm
  • 45.
    “Então eu devomesmo usar o PhoneGap?” 1) Você tem tempo e dinheiro limitados? “SIM” 2) Pretende atingir mais de uma plataforma com o seu aplicativo? “SIM” 3) Performance não é o mais importante? “SIM” 4) Já programa para web? “SIM” SIM! @diegodukao www.mobilidade.fm
  • 46.
    “Então eu devomesmo usar o PhoneGap?” 4) Já programa para web? “Não =/” Se você também não sabe o nativo, vale a pena começar com o PhoneGap #TodosAdora HTML 5 o/ Javascript tá na moda! o/ Se tudo der errado, você pode virar Web Developer ;) @diegodukao www.mobilidade.fm
  • 47.
    72,83% Das pessoas só acreditam em estatísticas com duas casas decimais @diegodukao www.mobilidade.fm
  • 48.
    Obrigado pela atenção! Perguntas? slideshare.com/diegodukao Diego “Dukão” Guimarães diegodukao@mobilidade.fm @diegodukao www.mobilidade.fm