palestra "ionic framework 2 - o que vem por aí?" tdc 2016
TRANSCRIPT
![Page 1: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/1.jpg)
Globalcode – Open4education
Ionic Framework 2 - O que vem por aí?
Tatiane Aguirres e Márcio BrufattoTrilha Mobile
![Page 2: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/2.jpg)
Globalcode – Open4education
Tatiane Aguirres Márcio Brufatto
@tatianeaguirres
@mbrufatto
![Page 3: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/3.jpg)
Globalcode – Open4education
![Page 4: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/4.jpg)
Globalcode – Open4education
O que mudou da V1 para a V2?
![Page 5: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/5.jpg)
Globalcode – Open4education
O que mudou da V1 para a V2?
TUDO
![Page 6: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/6.jpg)
Globalcode – Open4education
O que mudou da V1 para a V2?
TUDOQuase...
![Page 7: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/7.jpg)
Globalcode – Open4education
Windows phone
![Page 8: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/8.jpg)
Globalcode – Open4education
HTML
![Page 9: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/9.jpg)
Globalcode – Open4education
Cores
![Page 10: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/10.jpg)
Globalcode – Open4education
Theming your App
![Page 11: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/11.jpg)
Globalcode – Open4education
Componentes novos
Action Sheets
![Page 12: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/12.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic Alerts
![Page 13: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/13.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt Alerts
![Page 14: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/14.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation Alerts
![Page 15: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/15.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio Alerts
![Page 16: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/16.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
![Page 17: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/17.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
Badges
![Page 18: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/18.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
BadgesCard Background Images
![Page 19: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/19.jpg)
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
BadgesCard Background ImagesDateTime
![Page 20: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/20.jpg)
Globalcode – Open4education
Componentes novos
FABs
![Page 21: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/21.jpg)
Globalcode – Open4education
Componentes novos
FABsLoading
![Page 22: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/22.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModals
![Page 23: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/23.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopover
![Page 24: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/24.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbar
![Page 25: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/25.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegment
![Page 26: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/26.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlides
![Page 27: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/27.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlidesToast
![Page 28: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/28.jpg)
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlidesToastIcons
http://ionicframework.com/docs/v2/ionicons/
![Page 29: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/29.jpg)
Globalcode – Open4education
Componentes novos
Gesturestap
![Page 30: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/30.jpg)
Globalcode – Open4education
Componentes novos
Gesturestappress
![Page 31: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/31.jpg)
Globalcode – Open4education
Componentes novos
Gesturestappresspan
![Page 32: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/32.jpg)
Globalcode – Open4education
Componentes novos
Gesturestappresspanswipe
![Page 33: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/33.jpg)
Globalcode – Open4education
Componentes novos
Gesturestappresspanswiperotate
![Page 34: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/34.jpg)
Globalcode – Open4education
Componentes novos
Gesturestappresspanswiperotatepinch
![Page 35: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/35.jpg)
Globalcode – Open4education
![Page 36: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/36.jpg)
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
![Page 37: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/37.jpg)
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
Não utiliza mais:ControlersScope
![Page 38: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/38.jpg)
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
Não utiliza mais:ControlersScope
Curso de Angular 2 gratuito em http://loiane.training
![Page 39: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/39.jpg)
Globalcode – Open4education
Angular 2
Angular 1
app.js
Angular 2
app.ts
![Page 40: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/40.jpg)
Globalcode – Open4education
Angular 2
app.component.ts
![Page 41: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/41.jpg)
Globalcode – Open4education
Typescript
Linguagem “tipada”Usa orientação a objetosEstá presente no Angular 2Compila para JavaScript
Mais informações em:http://tableless.com.br/diga-ola-ao-typescript-e-adeus-ao-javascript/
![Page 42: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/42.jpg)
Globalcode – Open4education
Testanto o Typescript
http://www.typescriptlang.org/Playground
![Page 43: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/43.jpg)
Globalcode – Open4education
Navegação
![Page 44: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/44.jpg)
Globalcode – Open4education
NavegaçãoIonic 1 Ionic 2
![Page 45: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/45.jpg)
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/
![Page 46: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/46.jpg)
Globalcode – Open4education
Ionic Native
![Page 47: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/47.jpg)
Globalcode – Open4education
Instalando e iniciando uma App
![Page 48: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/48.jpg)
Globalcode – Open4education
NodeJS https://nodejs.org/
![Page 49: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/49.jpg)
Globalcode – Open4education
Instalando Ionic e Cordova
$ npm install -g ionic@beta
$ npm install -g cordova
$ npm list -g --depth=0
![Page 50: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/50.jpg)
Globalcode – Open4education
Dica: utilize Atom
Editor de texto desenvolvido pelo GitHubhttps://atom.io/
Package: Ionic Preview https://atom.io/packages/ionic-preview
Package: Atom TypeScripthttps://atom.io/packages/atom-typescript
![Page 51: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/51.jpg)
Globalcode – Open4education
Ionic Preview
![Page 52: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/52.jpg)
Globalcode – Open4education
Atom TypeScript
![Page 53: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/53.jpg)
Globalcode – Open4education
Iniciando a aplicação
$ ionic start [nomeDoApp] blank --v2 --ts
$ cd [nomeDoApp]
$ ionic serve
$ ionic serve --lab
![Page 54: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/54.jpg)
Globalcode – Open4education
Visualizando a aplicação
![Page 55: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/55.jpg)
Globalcode – Open4education
Ionic Generate
Cria páginas para sua aplicação (html, scss e ts)
$ ionic g page [nomeDaPágina]
![Page 56: Palestra "Ionic Framework 2 - O que vem por aí?" TDC 2016](https://reader034.vdocuments.mx/reader034/viewer/2022051123/58808b7f1a28ab35718b6a57/html5/thumbnails/56.jpg)
Globalcode – Open4education
Código
https://github.com/tatianeaguirres/ionic-2-tdc2016