Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016

527 views

Published on

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

Published in: Software
  • Be the first to comment

Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016

  1. 1. Globalcode – Open4education Ionic Framework 2 - O que vem por aí? Tatiane Aguirres e Márcio Brufatto Trilha Mobile
  2. 2. Globalcode – Open4education Tatiane Aguirres Márcio Brufatto @tatianeaguirres aguirres.tati@gmail.com @mbrufatto mhbrufatto@gmail.com
  3. 3. Globalcode – Open4education
  4. 4. Globalcode – Open4education O que mudou da V1 para a V2?
  5. 5. Globalcode – Open4education O que mudou da V1 para a V2? TUDO
  6. 6. Globalcode – Open4education O que mudou da V1 para a V2? TUDOQuase...
  7. 7. Globalcode – Open4education Windows phone
  8. 8. Globalcode – Open4education HTML
  9. 9. Globalcode – Open4education Cores
  10. 10. Globalcode – Open4education Theming your App
  11. 11. Globalcode – Open4education Componentes novos Action Sheets
  12. 12. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts
  13. 13. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts
  14. 14. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts
  15. 15. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts
  16. 16. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts
  17. 17. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges
  18. 18. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges Card Background Images
  19. 19. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges Card Background Images DateTime
  20. 20. Globalcode – Open4education Componentes novos FABs
  21. 21. Globalcode – Open4education Componentes novos FABs Loading
  22. 22. Globalcode – Open4education Componentes novos FABs Loading Modals
  23. 23. Globalcode – Open4education Componentes novos FABs Loading Modals Popover
  24. 24. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar
  25. 25. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment
  26. 26. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides
  27. 27. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides Toast
  28. 28. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides Toast Icons http://ionicframework.com/docs/v2/ionicons/
  29. 29. Globalcode – Open4education Componentes novos Gestures tap
  30. 30. Globalcode – Open4education Componentes novos Gestures tap press
  31. 31. Globalcode – Open4education Componentes novos Gestures tap press pan
  32. 32. Globalcode – Open4education Componentes novos Gestures tap press pan swipe
  33. 33. Globalcode – Open4education Componentes novos Gestures tap press pan swipe rotate
  34. 34. Globalcode – Open4education Componentes novos Gestures tap press pan swipe rotate pinch
  35. 35. Globalcode – Open4education
  36. 36. Globalcode – Open4education Angular 2 Utiliza: Components Decorators Typescript
  37. 37. Globalcode – Open4education Angular 2 Utiliza: Components Decorators Typescript Não utiliza mais: Controlers Scope
  38. 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. 39. Globalcode – Open4education Angular 2 Angular 1 app.js Angular 2 app.ts
  40. 40. Globalcode – Open4education Angular 2 app.component.ts
  41. 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. 42. Globalcode – Open4education Testanto o Typescript http://www.typescriptlang.org/Playground
  43. 43. Globalcode – Open4education Navegação
  44. 44. Globalcode – Open4education Navegação Ionic 1 Ionic 2
  45. 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. 46. Globalcode – Open4education Ionic Native
  47. 47. Globalcode – Open4education Instalando e iniciando uma App
  48. 48. Globalcode – Open4education NodeJS https://nodejs.org/
  49. 49. Globalcode – Open4education Instalando Ionic e Cordova $ npm install -g ionic@beta $ npm install -g cordova $ npm list -g --depth=0
  50. 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. 51. Globalcode – Open4education Ionic Preview
  52. 52. Globalcode – Open4education Atom TypeScript
  53. 53. Globalcode – Open4education Iniciando a aplicação $ ionic start [nomeDoApp] blank --v2 --ts $ cd [nomeDoApp] $ ionic serve $ ionic serve --lab
  54. 54. Globalcode – Open4education Visualizando a aplicação
  55. 55. Globalcode – Open4education Ionic Generate Cria páginas para sua aplicação (html, scss e ts) $ ionic g page [nomeDaPágina]
  56. 56. Globalcode – Open4education Código https://github.com/tatianeaguirres/ionic-2-tdc2016

×