Desenvolvimento
Mobile
Olá!
Quem sou eu?
Fred Raperger
Profissional de TI à 16 anos
Gerente de projetos de TI na CPFL
Graduado em Ciências da Computação
MBA em Gestão de Projetos pelo IBTA
MBA em Liderança pela Franklin Covey
Apaixonado por tecnologia, empreendedorismo e fotografia
O que vamos ver nesta palestra?
Pilares da transformação
digital
Motivos para começar a
criação de um aplicativo hoje
mesmo
Intel XDK - Como desenvolver
aplicativos hibridos
““
Marshall McLuhan
“Aldeia Global: um espaço de
convergência, onde a evolução
tecnológica permitiria em qualquer
circunstância a comunicação direta e
sem barreiras.
Marshall McLuhan, 1962
“
Transformação Digital
Vamos começar a
Por onde começar?
Business Model Canvas
MVP
Produto Mínimo Viável
Produto
Mínimo Viável
◎Mínimo…
Para ser feito
Para entregar valor
Para ser entendido pelo usuário
◎Viável…
Para validar hipóteses
Para não ter dúvida sobre o
resultado
Com qualidade
Qual plataforma usar?
81%
12%
4%
Qual plataforma usar?
Fonte: Statistita 2016 - http://www.statista.com/statistics/262167/market-share-held-by-mobile-operating-systems-in-brazil/
Market Share
Qual plataforma usar?
Fonte: Statistita jun/2016 - http://www.statista.com/statistics/262167/market-share-held-by-mobile-operating-systems-in-brazil/
SIM
18%
NÃO
82%
SIM
19%
NÃO
81%
SIM
46%
NÃO
54%
Quem compra aplicativo?
Desenvolvimento Híbrido
Arquitetura e
Arquitetura
Intel XDK (IDE)
Design App Hardware
HTML 5
◎Padronização
qualquer plataforma
◎Experiência do
usuário otimizada
◎Tratamento para
audio e vídeo
◎Geolocalização
◎Network status
◎Armazenamento de
dados
Style:
Bootstrap
◎Framework (HTML +
JS + CSS) mais
popular
◎Fácil utilização
◎Desenvolvimento
mais rápido
◎Componentes visuais
pré-definidos
◎Open Source
Style:
jQuery
◎Facilita o
desenvolvimento
javascript
◎Oferece recursos
otimizados para
Smartphone e tablet
◎Otimiza tempo de
desenvolvimento
◎Código leve
Hardware:
Cordova
◎Biblioteca para
desenvolvimento
hibrido
◎Fornece recursos
para acesso ao
hardware
◎Conjunto de APIs
baseado em
Javascript
◎As 3 plataformas com
o “mesmo código”
Conexão WEB
Via JSON
◎JavaScript Object
Notation
◎Armazenamento e
troca de dados
◎Javascript x
Webservice REST
◎Pouco código
◎Baixa complexidade
Arquitetura
Conexão Web
Via JAVASCRIPT
Chamada HTTP
Padrão JSON
Servidor WEB
PHP / C# / Java
Arquitetura
Conexão Web
1. Chamada do WebService via Javascript:
$ajax({
...,
url: “http://www.servidor.com.br/serviço.php
?acao=consultar
&nome=Fred”})
2. Retorno WebService no formato JSON
3. Converte JSON em Array
Arquitetura
Conexão Web
Site: http://www.w3schools.com/json/
◎ De:
◎Para:
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
firstName lastName
John Doe
Anna Smith
Peter Jones
Intel XDK
Notificações
◎Popups com mensagem de alerta
◎Popups para confirmação
◎Beep
◎Documentação de fácil acesso pelo próprio intelXDK
Site: https://www.npmjs.com/package/cordova-plugin-dialogs
Intel XDK
Informações do dispositivo
◎ID do aparelho
◎Plataforma (iOS, Android ou Windows Phone)
◎Versão do Sistema Operacional
◎Fabricante
◎Modelo
◎Número serial
Site: https://www.npmjs.com/package/cordova-plugin-device
Intel XDK
Geolocalização
◎Posição atual
◎Montitoramento continuo da posição geográfica
// onSuccess Callback
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude);
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
Site: https://www.npmjs.com/package/cordova-plugin-geolocation
Intel XDK
Google Maps
Place your screenshot here
Site: https://developers.google.com/maps/documentation/javascript/?hl=pt-br
◎Adicionar POIs
◎Calcular rotas
◎Todos os recursos do
Google Maps
Intel XDK
Conexão com a internet
◎Informa o tipo de conexão do dispositivo
◎3G
◎4G
◎Wi-fi
◎…
Site: https://www.npmjs.com/package/cordova-plugin-network-information
Intel XDK
Agenda de contatos
◎Alterar e adicionar contatos
◎Excluir e consultar contatos
Site: https://www.npmjs.com/package/cordova-plugin-contacts
Intel XDK
Banco de dados local (off-line)
◎WebStorage
◎WebSQL
◎IndexedDB
Intel XDK
Push notification
Google Cloud Messaging
1. Registro
2. Envia chave
para Servidor
Intel XDK
Push notification
Google Cloud Messaging
a. Envia a
mensagem
b. Mensagem
entregue
Intel XDK
Intel XDK
https://software.intel.com/pt-br/intel-xdk
Intel XDK
Design
Intel XDK
Código
Intel XDK
Plugins
Intel XDK
Emular
Intel XDK
Emular
Intel XDK
Teste
Intel XDK
App Preview
Place your screenshot here
◎Teste do aplicativo
◎Debug
◎Live Layout
Intel XDK
Build
Onde encontrar
mais informações
◎ Google!
◎ Forum Intel XDK: https://software.intel.com/pt-br/forums/intel-software-network-brasil
◎ Grupos de discuções no Facebook
Intel XDK: https://www.facebook.com/groups/intelxdk
Desenvolvedores XDK Brasil: https://www.facebook.com/groups/1457491334561796
◎ Vídeo aulas – Youtube: Tekzoom: https://www.youtube.com/user/tekzoom
◎ HTML 5: http://www.w3schools.com/html/html5_intro.asp
◎ Bootstrap: http://getbootstrap.com.br/
◎ JQuery Mobile: https://jquerymobile.com/
◎ JSON: http://www.w3schools.com/json/
◎ AJAX: http://api.jquery.com/jquery.ajax/
◎ Exemplo WebService REST com PHP:
http://pt.slideshare.net/MarcioJuniorVieira/criando-e-consumindo-webservice-rest-com-php-e-json
Próximos passos...
Se você pensa que
pode, ou se pensa que
não pode, de qualquer
modo você está certo.
Henry Ford.
“ “
Agradecimentos
◎ PUC-Campinas: Victor Hugo, Nicolau Balbino,
Leandro Xastre e Isaias Ramos
◎ Template da apresentação: : SlideCanival
◎ Imagens : Unsplash e Freepik
Obrigado!
Perguntas?
Entre em contato
fraperger@gmail.com
Outras referências
◎ http://exame.abril.com.br/seu-dinheiro/noticias/conheca-o-nubank-cartao-
mais-cobicado-do-momento#3
◎ http://exame.abril.com.br/seu-dinheiro/noticias/site-promete-emprestar-
dinheiro-com-juros-menores
◎ http://link.estadao.com.br/noticias/gadget,casa-inteligente-entra-no-radar-do-
brasileiro-e-vira-alvo-de-varias-industrias,10000028829
◎ http://startse.infomoney.com.br/portal/2015/09/03/13463/um-mercado-de-us-
7-trilhes-est-nascendo-e-voc-pode-entrar-nele/
◎ http://pt.slideshare.net/DiegoCavalca/minicurso-intel-xdk-48632462
◎ https://developers.google.com/maps/documentation/javascript/?hl=pt-br
◎ http://www.slidescarnival.com/pt-br/
◎ https://unsplash.com/
◎ http://www.freepik.com/

Desenvolvimento mobile