O documento discute o desenvolvimento de aplicativos híbridos usando HTML5, Angular.JS e Chrome DevTools. Apresenta as vantagens e desvantagens dos aplicativos nativos e web, introduz o PhoneGap/Cordova para aplicativos híbridos e descreve como o Angular.JS funciona como um framework completo para aplicativos de página única.

1. Desenvolvendo APPs Com
HTML5, Angular.JS +
Chrome DevTools
+GustavoCostaW

2. GUSTAVO COSTA
- MOBILE DEVELOPER
- FRONT-END
- LOVES WEB PATTERNS
- REFERÊNCIA CORDOVA/PHONEGAP
- GOOGLE ORGANIZER
- BLACKBERRY ELITE

3. PERFECT

4. PROBLEM
C++ SWIFT JAVA C#

5. REAÇÃO

6. NATIVO VS WEB NATIVO
- Melhor Performance
- Acesso a todas as APIs
- Linha de aprendizado difícil
WEB
- Linha de aprendizado fácil
- Fléxivel + Barato
- Limitação de APIs

7. + AMOR
HÍBRIDO

8. APLICAÇÃO HÍBRIDA

9. PARA FICAR MAIS CLARO
PHONEGAP/CORDOVA ENTRA AQUI

10. INTERESSANTE

11. SERIOUSLY?
Em 2012 Mark Zuckerberg soltou em uma entrevista:
- HTML5 não está pronto.

12. PROVA
Uma das principais queixas dos HATERS de aplicações híbridas é
a performance.
Criei o FastGap (Template para auxiliar aplicações híbridas)
PLAAY APP

13. JOBS
TONAILS
BEAUTYX

14. ANGULAR.JS + IONIC

15. SPA (Single Page Apps)
A aplicação de uma única página (SPA), também conhecida como
interface de uma única página (SPI), é aplicação web que se
encaixa em uma única página da web com o objetivo de
proporcionar uma experiência de usuário mais fluida semelhante
a um aplicativo de desktop.

16. SPA (Single Page Apps)

17. SPA (Single Page Apps)

18. SPA (Single Page Apps)

19. SPA (Single Page Apps)
ﰁAplicações SPAs usam e dependem de:
Manipilação DOM
ﰁ History
ﰁ Routing
ﰁ Ajax
ﰁ Data bindﰁ
etc...

20. Angular.JS
COMPLETO FRAMEWORK SPA

21. Como Angular.JS Funciona

22. Principais Partes do Angular.JS
- MÓDULOS
- ROTAS
- CONTROLLERS
- FACTORY/SERVICES
$scope
- VIEW
- DIRETIVAS

23. Principais Partes do Angular.JS
- MÓDULOS
Container para:
(routes,controllers,factorys,services,directives,views)

24. Principais Partes do Angular.JS
- FACTORY/SERVICES
Organiza os dados, controla chamadas RESTful, compartilha
esses dados com os controllers

25. Principais Partes do Angular.JS
- CONTROLLERS
“Cérebro” de uma view, possui o $scope para se comunicar
com a view, recebe dados dos servicos, trata/armazena.

26. Principais Partes do Angular.JS
- $scope
Comunicação entre view-controller (ViewModel)

27. Principais Partes do Angular.JS
- VIEWS
Renderiza a Interface do usuário, vincula dados para o
controlador pelo o $scope, e usa diretivas para aumentar do
HTML e processar dados.

28. Principais Partes do Angular.JS
- ROUTES
Cada rota tem um único caminho, seu controlador e pode
passar parâmetros de rota
/speaker/:id

29. Como Angular.JS Funciona

30. Diga Oi para o Angular.JS
angularjs.org
hello world

31. APP DEV FEST VIDEO YOUTUBE
Assista o vídeo da criação do app com
Angular para continuar a apresentação
https://www.youtube.com/watch?v=Ed5N
dqFcgdk

32. DOWNLOAD APP
BAIXE O APK AGORA MESMO
http://bit.ly/1ntpFQy

33. DEV NE 2014
angularjs.org
cordova.apache.org
github.com/GustavoCostaW/devfestne2014
APK:
http://bit.ly/1ntpFQy

34. DEV NE 2014
Perguntas?

35. DEV NE 2014
Muito Obrigado!
@GustavoCostaW