O documento apresenta uma oficina sobre desenvolvimento de aplicativos híbridos com a ferramenta Intel XDK. A agenda inclui tópicos como cenário mobile atual, aplicativos nativos versus híbridos, tecnologias e linguagens para desenvolvimento híbrido e a ferramenta Intel XDK. Haverá também uma apresentação do palestrante Diego Cavalca e do profissional convidado Danilo Rodrigues, além de uma atividade prática de criação de um aplicativo de roteiro de viagens com a Intel XDK.

1. Oficina Intel XDK®
Desenvolvimento de aplicativos híbridos
Diego Cavalca

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

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

4. Cenário mobile atual

7. Análise do mundo mobile atual

8. • 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

9. Aplicativo nativo x híbrido

10. - Acesso completo ao dispositivo.
- Mais velocidade de processamento.
- Menor tempo de resposta.
- Loja.
- Desenvolvimento caro.
- Não é multi-plataforma.
Aplicativo nativo

11. Objective-C
Swift
Java C#
Aplicativo nativo

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

13. Análise comparativa - Recursos

14. Análise comparativa - Produtividade

15. • iOS
• Android
• Windows Phone
HTML5 + CSS3+ JS +
APACHE CORDOVA
Desenvolvimento híbrido

16. Arquitetura híbrida

17. Em qual linguagem é
criado um aplicativo
híbrido...

18. Tecnologias e linguagens

19. E como acesso os
recursos de
hardware...

20. “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.”

21. http://apache.cordova.org

22. Qual ferramenta (IDE)
utilizar...

24. “É 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®

25. 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®

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

27. Intel XDK® – Arquitetura IDE

28. Intel XDK®
“Um código, todas as plataformas.”

29. Opinião do profissional
convidado
Danilo Rodrigues

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

31. Hands On
• PARTE 1: Conhecendo o Intel XDK®;
• PARTE 2: Criando um aplicativo de roteiro de
viagens;

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

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

34. Hands On – Construindo um app!
Wireframe (demonstração):

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

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

37. Obrigado!
www.diegocavalca.com