Fred Raperger, especialista em TI com 16 anos de experiência, explora na palestra os pilares da transformação digital e a criação de aplicativos híbridos usando Intel XDK. Ele discute a importância do produto mínimo viável (MVP) e apresenta recursos como geolocalização e notificações para desenvolvedores. O documento inclui também referências e links para material adicional sobre desenvolvimento e ferramentas.

1. Desenvolvimento
Mobile

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

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

4. ““
Marshall McLuhan

5. “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
“

6. Transformação Digital

15. Vamos começar a

16. Por onde começar?

17. Business Model Canvas

18. MVP
Produto Mínimo Viável

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

20. Qual plataforma usar?

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

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

23. Desenvolvimento Híbrido

24. Arquitetura e

25. Arquitetura
Intel XDK (IDE)
Design App Hardware

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

27. Style:
Bootstrap
◎Framework (HTML +
JS + CSS) mais
popular
◎Fácil utilização
◎Desenvolvimento
mais rápido
◎Componentes visuais
pré-definidos
◎Open Source

28. Style:
jQuery
◎Facilita o
desenvolvimento
javascript
◎Oferece recursos
otimizados para
Smartphone e tablet
◎Otimiza tempo de
desenvolvimento
◎Código leve

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

30. Conexão WEB
Via JSON
◎JavaScript Object
Notation
◎Armazenamento e
troca de dados
◎Javascript x
Webservice REST
◎Pouco código
◎Baixa complexidade

31. Arquitetura
Conexão Web
Via JAVASCRIPT
Chamada HTTP
Padrão JSON
Servidor WEB
PHP / C# / Java

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

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

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

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

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

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

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

39. Intel XDK
Agenda de contatos
◎Alterar e adicionar contatos
◎Excluir e consultar contatos
Site: https://www.npmjs.com/package/cordova-plugin-contacts

40. Intel XDK
Banco de dados local (off-line)
◎WebStorage
◎WebSQL
◎IndexedDB

41. Intel XDK
Push notification
Google Cloud Messaging
1. Registro
2. Envia chave
para Servidor

42. Intel XDK
Push notification
Google Cloud Messaging
a. Envia a
mensagem
b. Mensagem
entregue

43. Intel XDK

44. Intel XDK
https://software.intel.com/pt-br/intel-xdk

45. Intel XDK
Design

46. Intel XDK
Código

47. Intel XDK
Plugins

48. Intel XDK
Emular

49. Intel XDK
Emular

50. Intel XDK
Teste

51. Intel XDK
App Preview
Place your screenshot here
◎Teste do aplicativo
◎Debug
◎Live Layout

52. Intel XDK
Build

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

54. Próximos passos...

55. Se você pensa que
pode, ou se pensa que
não pode, de qualquer
modo você está certo.
Henry Ford.
“ “

56. Agradecimentos
◎ PUC-Campinas: Victor Hugo, Nicolau Balbino,
Leandro Xastre e Isaias Ramos
◎ Template da apresentação: : SlideCanival
◎ Imagens : Unsplash e Freepik

57. Obrigado!
Perguntas?
Entre em contato
fraperger@gmail.com

58. 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/