Post on 13-Apr-2017
Desenvolvimento Mobile
Olá!Quem sou eu?Fred RapergerProfissional de TI à 16 anos
Gerente de projetos de TI na CPFLGraduado em Ciências da ComputaçãoMBA 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
ProdutoMí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 WEBVia JSON
◎JavaScript Object Notation
◎Armazenamento e troca de dados
◎Javascript x Webservice REST
◎Pouco código◎Baixa complexidade
ArquiteturaConexão Web
Via JAVASCRIPT
Chamada HTTP
Padrão JSON
Servidor WEB
PHP / C# / Java
ArquiteturaConexã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
ArquiteturaConexã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 XDKNotificaçõ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 XDKInformaçõ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 XDKGeolocalização
◎Posição atual◎Montitoramento continuo da posição geográfica
// onSuccess Callbackvar onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' + 'Longitude: ' + position.coords.longitude + '\n' + 'Altitude: ' + position.coords.altitude);
};
// onError Callback receives a PositionError objectfunction 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 XDKGoogle 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 XDKConexã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 XDKAgenda de contatos
◎Alterar e adicionar contatos◎Excluir e consultar contatos
Site: https://www.npmjs.com/package/cordova-plugin-contacts
Intel XDKBanco de dados local (off-line)
◎WebStorage◎WebSQL◎ IndexedDB
Intel XDKPush notification
Google Cloud Messaging
1. Registro
2. Envia chave
para Servidor
Intel XDKPush notification
Google Cloud Messaging
a. Envia a
mensagem
b. Mensagem
entregue
Intel XDK
Intel XDK
https://software.intel.com/pt-br/intel-xdk
Intel XDKDesign
Intel XDKCódigo
Intel XDKPlugins
Intel XDKEmular
Intel XDKEmular
Intel XDKTeste
Intel XDKApp Preview
Place your screenshot here
◎Teste do aplicativo◎Debug◎Live Layout
Intel XDKBuild
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 FacebookIntel XDK: https://www.facebook.com/groups/intelxdkDesenvolvedores 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 contatofraperger@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/