Palestra "Ionic Framework 2 - O que vem por aí?" apresentada na Trilha Mobile no TDC Porto Alegre 2016 em parceria com Márcio Brufatto.

1. Globalcode – Open4education
Ionic Framework 2 - O que vem por aí?
Tatiane Aguirres e Márcio Brufatto
Trilha Mobile

2. Globalcode – Open4education
Tatiane Aguirres Márcio Brufatto
@tatianeaguirres
aguirres.tati@gmail.com
@mbrufatto
mhbrufatto@gmail.com

3. Globalcode – Open4education

4. Globalcode – Open4education
O que mudou da V1 para a V2?

5. Globalcode – Open4education
O que mudou da V1 para a V2?
TUDO

6. Globalcode – Open4education
O que mudou da V1 para a V2?
TUDOQuase...

7. Globalcode – Open4education
Windows phone

8. Globalcode – Open4education
HTML

9. Globalcode – Open4education
Cores

10. Globalcode – Open4education
Theming your App

11. Globalcode – Open4education
Componentes novos
Action Sheets

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

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

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

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

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

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

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

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

20. Globalcode – Open4education
Componentes novos
FABs

21. Globalcode – Open4education
Componentes novos
FABs
Loading

22. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals

23. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover

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

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

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

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

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

29. Globalcode – Open4education
Componentes novos
Gestures
tap

30. Globalcode – Open4education
Componentes novos
Gestures
tap
press

31. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan

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

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

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

35. Globalcode – Open4education

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

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

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

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

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

41. Globalcode – Open4education
Typescript
Linguagem “tipada”
Usa orientação a objetos
Está presente no Angular 2
Compila para JavaScript
Mais informações em:
http://tableless.com.br/diga-ola-ao-typescript-e-adeus-
ao-javascript/

42. Globalcode – Open4education
Testanto o Typescript
http://www.typescriptlang.org/Playground

43. Globalcode – Open4education
Navegação

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

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

46. Globalcode – Open4education
Ionic Native

47. Globalcode – Open4education
Instalando e iniciando uma App

48. Globalcode – Open4education
NodeJS
https://nodejs.org/

49. Globalcode – Open4education
Instalando Ionic e Cordova
$ npm install -g ionic@beta
$ npm install -g cordova
$ npm list -g --depth=0

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

51. Globalcode – Open4education
Ionic Preview

52. Globalcode – Open4education
Atom TypeScript

53. Globalcode – Open4education
Iniciando a aplicação
$ ionic start [nomeDoApp] blank --v2 --ts
$ cd [nomeDoApp]
$ ionic serve
$ ionic serve --lab

54. Globalcode – Open4education
Visualizando a aplicação

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

56. Globalcode – Open4education
Código
https://github.com/tatianeaguirres/ionic-2-tdc2016