Desenvolvimento mobile

58
Desenvolvimento Mobile

Transcript of Desenvolvimento mobile

Page 1: Desenvolvimento mobile

Desenvolvimento Mobile

Page 2: 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

Page 3: Desenvolvimento mobile

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

Page 4: Desenvolvimento mobile

““

Marshall McLuhan

Page 5: Desenvolvimento mobile

“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

Page 6: Desenvolvimento mobile

Transformação Digital

Page 7: Desenvolvimento mobile
Page 8: Desenvolvimento mobile
Page 9: Desenvolvimento mobile
Page 10: Desenvolvimento mobile
Page 11: Desenvolvimento mobile
Page 12: Desenvolvimento mobile
Page 13: Desenvolvimento mobile
Page 14: Desenvolvimento mobile
Page 15: Desenvolvimento mobile

Vamos começar a

Page 16: Desenvolvimento mobile

Por onde começar?

Page 17: Desenvolvimento mobile

Business Model Canvas

Page 18: Desenvolvimento mobile

MVP

Produto Mínimo Viável

Page 19: Desenvolvimento mobile

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

Page 20: Desenvolvimento mobile

Qual plataforma usar?

Page 21: Desenvolvimento mobile

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

Page 22: Desenvolvimento mobile

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?

Page 23: Desenvolvimento mobile

Desenvolvimento Híbrido

Page 24: Desenvolvimento mobile

Arquitetura e

Page 25: Desenvolvimento mobile

Arquitetura

Intel XDK (IDE)

Design App Hardware

Page 26: Desenvolvimento mobile

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

Page 27: Desenvolvimento mobile

Style:Bootstrap

◎Framework (HTML + JS + CSS) mais popular

◎Fácil utilização◎Desenvolvimento

mais rápido◎Componentes visuais

pré-definidos◎Open Source

Page 28: Desenvolvimento mobile

Style:jQuery

◎Facilita o desenvolvimento javascript

◎Oferece recursos otimizados para Smartphone e tablet

◎Otimiza tempo de desenvolvimento

◎Código leve

Page 29: Desenvolvimento mobile

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”

Page 30: Desenvolvimento mobile

Conexão WEBVia JSON

◎JavaScript Object Notation

◎Armazenamento e troca de dados

◎Javascript x Webservice REST

◎Pouco código◎Baixa complexidade

Page 31: Desenvolvimento mobile

ArquiteturaConexão Web

Via JAVASCRIPT

Chamada HTTP

Padrão JSON

Servidor WEB

PHP / C# / Java

Page 32: Desenvolvimento mobile

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

Page 33: Desenvolvimento mobile

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

Page 34: Desenvolvimento mobile

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

Page 35: Desenvolvimento mobile

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

Page 36: Desenvolvimento mobile

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

Page 37: Desenvolvimento mobile

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

Page 38: Desenvolvimento mobile

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

Page 39: Desenvolvimento mobile

Intel XDKAgenda de contatos

◎Alterar e adicionar contatos◎Excluir e consultar contatos

Site: https://www.npmjs.com/package/cordova-plugin-contacts

Page 40: Desenvolvimento mobile

Intel XDKBanco de dados local (off-line)

◎WebStorage◎WebSQL◎ IndexedDB

Page 41: Desenvolvimento mobile

Intel XDKPush notification

Google Cloud Messaging

1. Registro

2. Envia chave

para Servidor

Page 42: Desenvolvimento mobile

Intel XDKPush notification

Google Cloud Messaging

a. Envia a

mensagem

b. Mensagem

entregue

Page 43: Desenvolvimento mobile

Intel XDK

Page 44: Desenvolvimento mobile

Intel XDK

https://software.intel.com/pt-br/intel-xdk

Page 45: Desenvolvimento mobile

Intel XDKDesign

Page 46: Desenvolvimento mobile

Intel XDKCódigo

Page 47: Desenvolvimento mobile

Intel XDKPlugins

Page 48: Desenvolvimento mobile

Intel XDKEmular

Page 49: Desenvolvimento mobile

Intel XDKEmular

Page 50: Desenvolvimento mobile

Intel XDKTeste

Page 51: Desenvolvimento mobile

Intel XDKApp Preview

Place your screenshot here

◎Teste do aplicativo◎Debug◎Live Layout

Page 52: Desenvolvimento mobile

Intel XDKBuild

Page 53: Desenvolvimento mobile

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

Page 54: Desenvolvimento mobile

Próximos passos...

Page 55: Desenvolvimento mobile

Se você pensa que

pode, ou se pensa que

não pode, de qualquer modo você está certo.

Henry Ford.

“ “

Page 56: Desenvolvimento mobile

Agradecimentos

◎ PUC-Campinas: Victor Hugo, Nicolau Balbino, Leandro Xastre e Isaias Ramos

◎ Template da apresentação: : SlideCanival

◎ Imagens : Unsplash e Freepik

Page 57: Desenvolvimento mobile

Obrigado!

Perguntas?

Entre em [email protected]

Page 58: Desenvolvimento mobile

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/