Introdução ao desenvolvimento de apps com Phonegap
-
Upload
diogo-souza-machado -
Category
Software
-
view
25 -
download
1
Transcript of Introdução ao desenvolvimento de apps com Phonegap
![Page 1: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/1.jpg)
Introdução ao desenvolvimento de apps mobile com phonegap
![Page 2: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/2.jpg)
Diogo Machado
• 4 anos na São Camilo como desenvolvedor web;
• Formado pelo IFES;
• Já participei de mais de 20 projetos de software;
• Destaque na revista Galileu em 2011 pelo projeto Educação na nuvem;
• Empreendedor;
![Page 3: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/3.jpg)
– phonegap.com
“PhoneGap is a free and open source framework that allows you to create
mobile apps using standardized web APIs for the platforms you care about.”
![Page 4: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/4.jpg)
Criou Phonegap iOS Camp - São Francisco
Compra a Nitobi, e junto vem o Phonegap
Adobe doa o código fonte para a fundação
Quando a nitobi registrou o Phonegap, registraramo nome como sendo da nitobi, por isso não doaram o nome Phonegap, e por tanto a fundação passa a chamar de Cordova.*
![Page 5: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/5.jpg)
• Apache foundation
• Comunidade
• Código fonte
• Plugins
• APIs
• Ponte p/ nativo
• Adobe
• Phonegap dev app
• Phonegap build
• Phonegap Enterprise
Phonegap e Cordova são a mesma coisa, com algumas
diferenças:
![Page 6: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/6.jpg)
O phonegap ajuda na construção de aplicativos híbridos...
![Page 7: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/7.jpg)
O que é um app híbrido?
![Page 8: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/8.jpg)
Linguagens nativas
• Swift
• Java for Android
• C#
Curva de aprendizadogrande
![Page 9: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/9.jpg)
• Curva de aprendizagem alta
• Dificuldade de encontrar especialistas
• Particularidades de cada SO
• Curva de aprendizagem melhor que nativo
• Lançamento multiplataforma
• Facilidade de montar uma equipe
Nativo vs híbrido
![Page 10: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/10.jpg)
Angular.js
media
queries
transit
ions
border-r
adius
SVGCan
vas
localS
tora
ge
Jquery
Os três pilares do desenvolvimento híbrido
{
![Page 11: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/11.jpg)
Instalação
![Page 12: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/12.jpg)
Instalaçãosudo npm install -g phonegap
http://phonegap.com/install/
A Adobe está trabalhando emum projeto chamado PhoneGap Desktop App
no qual será possível usar uma interface para criar seus projetos.
![Page 13: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/13.jpg)
Hello Worldphonegap create helloWorld
Mais informações do comando: phonegap create help
![Page 14: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/14.jpg)
Plu
gin
s padrõ
es
O site http://plugins.cordova.io/#/ tem 1057 plugins registrados que podem ser usados livremente.
![Page 15: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/15.jpg)
PermissõesO que você precisa saber
![Page 16: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/16.jpg)
Adicionar um plugincordova plugin add org.apache.cordova.device
Lista: http://plugins.cordova.io/
![Page 17: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/17.jpg)
Arquivo config.xml
<gap:plugin name="org.apache.cordova.dialogs" />
Cada plugin que você adiciona você deve adicionar sua linha de permissão no arquivo config.xml, esse arquivo também é responsável pela configuração de icones e preferencias do sistema operacional.*
![Page 18: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/18.jpg)
Exemplos
![Page 19: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/19.jpg)
AcelerômetroUm acelerômetro nada mais é que um instrumento capaz de medir a aceleração sobre objetos.
![Page 20: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/20.jpg)
NetworkCaptura informações da rede do aparelho, sendo capaz de definir se o usuário está online, qual tipo de rede, etc.
https://goo.gl/rdOjzz
![Page 21: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/21.jpg)
NotificationsSão os recursos de notificação nativos do aparelho, como vibração, alertas sonoros e janelas modal.
![Page 22: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/22.jpg)
InterfaceComo projetar apps com "cara" de nativo?
![Page 23: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/23.jpg)
Alternativas• Frameworks
• Ionic.js
• Jquery Mobile
• Steroids.js
• "Na unha"
• CSS3
• HTML5 (SVG, Canvas)
![Page 24: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/24.jpg)
Ambientes possíveis
• Eclipse com SDK + Emulação na sua máquina
• Xcode + Emulação na sua máquina
• XDK da Intel
• Editor de texto + Phonegap App
• Editor de texto + Phonegap Build
• Editor de texto + Ripple
![Page 25: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/25.jpg)
Fique atento webview
Quanto mais atualizado o SO, melhor a webview.
Quanto menos atualizado o SO, menos recursos na
webview.
![Page 26: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/26.jpg)
Quanto custa publicar?
• Apple Store
• $99 por ano
• Google Play
• $25 registro único
• Windows phone store
• $19 registro único
![Page 27: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/27.jpg)
Mercado
![Page 28: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/28.jpg)
![Page 29: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/29.jpg)
![Page 30: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/30.jpg)
![Page 31: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/31.jpg)
Tipos de projetos• Não indicados
• Jogos em 3D (evoluindo...)
• Aplicativos em background
• Widgets (ainda não é possível)
• Indicados
• Apps administrativos
• Apps para se comunicar com APIs
• Redes sociais
![Page 34: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/34.jpg)
![Page 35: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/35.jpg)
Podemos ir além...
Arduino App Phonegap Web app
![Page 36: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/36.jpg)
Para saber mais• https://www.treinaweb.com.br/
• http://www.phonegaptutorial.com/
• https://www.youtube.com/channel/UCqQn92noBhY9VKQy4xCHPsg * curso gratuito
![Page 37: Introdução ao desenvolvimento de apps com Phonegap](https://reader036.fdocuments.in/reader036/viewer/2022062420/55cbd189bb61eb6a678b4581/html5/thumbnails/37.jpg)
Obrigado :)www.diogomachado.com