Introdução ao desenvolvimento de apps com Phonegap

Introdução ao desenvolvimento de apps mobile com phonegap

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;

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

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

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

O phonegap ajuda na construção de aplicativos híbridos...

O que é um app híbrido?

Linguagens nativas

• Swift

• Java for Android

• C#

Curva de aprendizadogrande

• 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

Angular.js

media

queries

transit

ions

border-r

adius

SVGCan

vas

localS

tora

ge

Jquery

Os três pilares do desenvolvimento híbrido

{

Instalação

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.

Hello Worldphonegap create helloWorld

Mais informações do comando: phonegap create help

Plu

gin

s padrõ

es

O site http://plugins.cordova.io/#/ tem 1057 plugins registrados que podem ser usados livremente.

PermissõesO que você precisa saber

Adicionar um plugincordova plugin add org.apache.cordova.device

Lista: http://plugins.cordova.io/

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

Exemplos

AcelerômetroUm acelerômetro nada mais é que um instrumento capaz de medir a aceleração sobre objetos.

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

NotificationsSão os recursos de notificação nativos do aparelho, como vibração, alertas sonoros e janelas modal.

InterfaceComo projetar apps com "cara" de nativo?

Alternativas• Frameworks

• Ionic.js

• Jquery Mobile

• Steroids.js

• "Na unha"

• CSS3

• HTML5 (SVG, Canvas)

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

Fique atento webview

Quanto mais atualizado o SO, melhor a webview.

Quanto menos atualizado o SO, menos recursos na

webview.

Quanto custa publicar?

• Apple Store

• $99 por ano

• Google Play

• $25 registro único

• Windows phone store

• $19 registro único

Mercado

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

Registro de pontohttps://goo.gl/C1UFiF

Corticóide Conversor

https://goo.gl/yEOgg2

Podemos ir além...

Arduino App Phonegap Web app

Para saber mais• https://www.treinaweb.com.br/

• http://www.phonegaptutorial.com/

• https://www.youtube.com/channel/UCqQn92noBhY9VKQy4xCHPsg * curso gratuito

Obrigado :)www.diogomachado.com