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/