Oficina Intel XDK® Desenvolvimento de aplicativos híbridos

Diego Cavalca

Agenda

• Apresentação

• Cenário mobile

• Aplicativo nativo vs. híbrido

• Híbrido: tecnologias e linguagens

• Intel XDK®

• Opinião do profissional convidado – Danilo Rodrigues

• Hands On – Criando um aplicativo de roteiro de viagens

• Onde buscar mais informações?

Apresentação

• Diego Cavalca – Graduado em Análise e Desenvolvimento de Sistemas pela UNILINS

(2012); – Analista e Desenvolvedor com mais de 7 anos de experiência em

projetos de software, atuando nos mais diversos cenários (desktop, web, mobile);

– Professor do Centro Paula Souza (ETEC Cafelândia) desde 2014, na área de desenvolvimento e gestão de projetos de Software;

– Intel Premier Software Partner®; – Autor do primeiro curso aberto sobre Intel XDK em português do

Youtube;

• Mais informações: – Perfil profissional: br.linkedin.com/in/diegocavalca – Perfil acadêmico: lattes.cnpq.br/3677080775789758 – Canal no Youtube: youtube.com/c/DiegoCavalca

Cenário mobile atual

Análise do mundo mobile atual

• Cliente:

– Em qual store (plataforma) lançar meu aplicativo?

• Desenvolvedor:

– Em qual linguagem desenvolver o projeto?

Resposta?

Lance em TODAS, faça com HTML5!

Paradoxo mobile

Aplicativo nativo x híbrido

- Acesso completo ao dispositivo. - Mais velocidade de processamento. - Menor tempo de resposta. - Loja.

- Desenvolvimento caro.

- Não é multi-plataforma.

Aplicativo nativo

Objective-C

Swift

Java

C#

Aplicativo nativo

- Bootstrapping (web skills – html5, css e js) - Acesso completo ao HARDWARE - Loja de aplicativos - Desenvolvimento mais barato - Multiplataforma!

Aplicativo híbrido

Análise comparativa - Recursos

Análise comparativa - Produtividade

• iOS

• Android

• Windows Phone

HTML5 + CSS3+ JS + APACHE CORDOVA

Desenvolvimento híbrido

Arquitetura híbrida

Em qual linguagem é criado um aplicativo

híbrido...

Tecnologias e linguagens

E como acesso os recursos de hardware...

“Apache Cordova é um conjunto de APIs que permite que um desenvolvedor de aplicativos móveis acesse as funções nativas do dispositivo, como a câmera

ou o acelerômetro, através do JavaScript.”

http://apache.cordova.org

Qual ferramenta (IDE) utilizar...

“É uma nova ferramenta para desenvolvimento da Intel® que busca facilitar a criação de aplicações

híbridas multiplataformas baseadas em HTML5, em especial para plataformas móveis, como tablets e

smartphones.”

Intel XDK®

Vantagens • Baixa curva de aprendizagem;

• Bootstraping (HTML5, CSS3, JS);

• IDE c/ suporte a Windows, Linux e MacOS;

• Ambiente de testes na nuvem (desenvolver, testar, depurar, emular

e compilar);

• Acesso completo ao hardware (API) do dispositivo;

• Espaço do Desenvolvedor Intel;

Intel XDK®

Um programa global que conecta desenvolvedores com a Intel em tudo que se relaciona com a área de software - do desenvolvimento à distribuição:

– Recursos para o desenvolvedor

– Recursos para a empresa

– Comunidade envolvida

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

Intel Developer Zone®

Intel XDK® – Arquitetura IDE

Intel XDK®

“Um código, todas as plataformas.”

Opinião do profissional convidado

Danilo Rodrigues

Opinião do profissional convidado

Danilo Rodrigues • Graduado em Sistemas de informação pela UNILINS (2014); • Analista e desenvolvedor com experiência em projetos mobile, web e jogos; • Mais informações:

– Perfil profissional: br.linkedin.com/in/rodriguesdanilo

• A escolha

• Como é trabalhar com aplicativos híbridos

• O que já fiz – Aplicativo form - automatização de formulários – Aplicativo routy - planejamento de visitas e rotas

• Outras possibilidades – Jogos – Internet das coisas – Aplicativos de realidade aumentada

Hands On

• PARTE 1: Conhecendo o Intel XDK®;

• PARTE 2: Criando um aplicativo de roteiro de viagens;

Hands On – Conhecendo o Intel XDK®

Conhecendo a arquitetura e recursos da IDE;

Criando um novo projeto;

Templates e projetos prontos (demonstrações);

DICA: Fique atento a versão da ferramenta Intel XDK®, pois ela atualiza constantemente!

Hands On – Construindo um app!

Aplicativo de Roteiro de Viagem;

Descrição: O aplicativo será capaz de gerar o itinerário de uma viagem e, com base nas informações fornecidas pelo usuário, mostrar um resumo financeiro da rota;

Informações fornecidas pelo usuário: ORIGEM; DESTINO; CONSUMO MÉDIO DO VEÍCULO (Km/L); VALOR DO COMBUSTÍVEL (R$/Litro);

Hands On – Construindo um app!

Wireframe (demonstração):

Hands On – Construindo um app!

Serviços utilizados (API) : Google Maps Directions API

Objetivo: Com base nos parâmetros origem e destino esta API fornece os dados logísticos da rota (KM Total, etinerário, etc.);

Funcionamento: Webservice (Ajax Request)

Mais informações: https://developers.google.com/maps/documentation/directions/intro

Google Maps Embed API Objetivo: Permite “embarcar” uma rota no aplicativo.

Funcionamento: <iframe>

Mais informações:

https://developers.google.com/maps/documentation/embed/

• Intel Developer Zone® -https://software.intel.com/pt-br

• Fórum Oficial – http://software.intel.com/pt-br/forums/intel-software-network-brasil

• Grupos de discussões (Facebook): – Desenvolvedores XDK Brasil – Intel XDK Developers

• Diego Cavalca - – Site – diegocavalca.com – Canal Youtube – youtube.com/c/DiegoCavalca

Onde buscar mais informações?

Obrigado!

www.diegocavalca.com