Nesta palestra veremos o que há de novo no Ionic Framework 2, essa poderosa ferramenta para criação de aplicações mobile híbridas para iOS, Android e Windows Phone. Falaremos sobre o que há de novo no Ionic 2 e veremos códigos de exemplo para demonstrar as diferenças e o que mudou entre a versão 1 e 2.

1. Globalcode – Open4education
Ionic Framework 2 - O que mudou?
Tatiane Aguirres Nogueira
Trilha Mobile

2. Globalcode – Open4education
TATIANE AGUIRRES NOGUEIRA
Desenvolvedora Front End e Mobile
aguirres.tati@gmail.com
linkedin.com/in/tatiane-aguirres-nogueira-555b28bb
tatianeaguirres.blogspot.com.br
github.com/tatianeaguirres
@tatianeaguirres

3. Globalcode – Open4education

4. Globalcode – Open4education
O que mudou da V1 para a V2?
Quase tudo mesmo 

5. Globalcode – Open4education
Windows phone

6. Globalcode – Open4education
HTML

7. Globalcode – Open4education
Cores

8. Globalcode – Open4education
Theming your App

9. Globalcode – Open4education
Componentes novos
Action Sheets

10. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts

11. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts

12. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts

13. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts

14. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts

15. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges

16. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges
Card Background Images

17. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges
Card Background Images
DateTime

18. Globalcode – Open4education
Componentes novos
FABs

19. Globalcode – Open4education
Componentes novos
FABs
Loading

20. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals

21. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover

22. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar

23. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment

24. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides

25. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides
Toast

26. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides
Toast
Icons
http://ionicframework.com/docs/v2/ionicons/

27. Globalcode – Open4education
Componentes novos
Gestures
tap

28. Globalcode – Open4education
Componentes novos
Gestures
tap
press

29. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan

30. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe

31. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe
rotate

32. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe
rotate
pinch

33. Globalcode – Open4education

34. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript

35. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript
Não utiliza mais:
Controlers
Scope

36. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript
Não utiliza mais:
Controlers
Scope
Curso de Angular 2 gratuito em http://loiane.training

37. Globalcode – Open4education
Angular 2
Angular 1
app.js
Angular 2
app.ts

38. Globalcode – Open4education
Angular 2
app.component.ts

39. Globalcode – Open4education
Typescript
Linguagem “tipada”
Usa orientação a objetos
Está presente no Angular 2
Compila para JavaScript
Dica para testar o Typescript:
http://www.typescriptlang.org/Playground

40. Globalcode – Open4education
Playground Typescript

41. Globalcode – Open4education
Navegação

42. Globalcode – Open4education
Navegação
Ionic 1 Ionic 2

43. Globalcode – Open4education
Ionic Native
Os plugins mais populares do Cordova/PhoneGap
agora estão presentes na lib do Ionic 2:
Ex: Geolocation, Camera, Push, Bluetooh, SQLite,
Facebook, Calendar, Contacts, Google Maps, etc.
Instalação:
$ npm install ionic-native --save
http://ionicframework.com/docs/v2/native/

44. Globalcode – Open4education
Ionic Native

45. Globalcode – Open4education
Dica: utilize Atom
Editor de texto desenvolvido pelo GitHub
https://atom.io/
Package: Ionic Preview
https://atom.io/packages/ionic-preview
Package: Atom TypeScript
https://atom.io/packages/atom-typescript

46. Globalcode – Open4education
Ionic Preview

47. Globalcode – Open4education
Atom TypeScript

48. Globalcode – Open4education
Instalando e iniciando uma App

49. Globalcode – Open4education
Instalando e iniciando a app
$ npm install -g ionic cordova
$ ionic start [nomeDoApp] blank --v2 --ts
Templates Ionic 2: tutorial, tabs, sidemenu, super,
blank.

50. Globalcode – Open4education
$ ionic serve --lab

51. Globalcode – Open4education
Ionic Generate
Cria páginas para sua aplicação (html, scss e ts)
$ ionic g page [nomeDaPágina]

52. Globalcode – Open4education
Tatiane Aguirres Nogueira
OBRIGADA!