View
281
Download
0
Category
Preview:
Citation preview
Globalcode – Open4education
Ionic Framework 2 - O que vem por aí?
Tatiane Aguirres e Márcio BrufattoTrilha Mobile
Globalcode – Open4education
Tatiane Aguirres Márcio Brufatto
@tatianeaguirres
aguirres.tati@gmail.com
@mbrufatto
mhbrufatto@gmail.com
Globalcode – Open4education
Globalcode – Open4education
O que mudou da V1 para a V2?
Globalcode – Open4education
O que mudou da V1 para a V2?
TUDO
Globalcode – Open4education
O que mudou da V1 para a V2?
TUDOQuase...
Globalcode – Open4education
Windows phone
Globalcode – Open4education
HTML
Globalcode – Open4education
Cores
Globalcode – Open4education
Theming your App
Globalcode – Open4education
Componentes novos
Action Sheets
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic Alerts
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt Alerts
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation Alerts
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio Alerts
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
Badges
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
BadgesCard Background Images
Globalcode – Open4education
Componentes novos
Action SheetsAlerts
Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts
BadgesCard Background ImagesDateTime
Globalcode – Open4education
Componentes novos
FABs
Globalcode – Open4education
Componentes novos
FABsLoading
Globalcode – Open4education
Componentes novos
FABsLoadingModals
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopover
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbar
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegment
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlides
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlidesToast
Globalcode – Open4education
Componentes novos
FABsLoadingModalsPopoverSearchbarSegmentSlidesToastIcons
http://ionicframework.com/docs/v2/ionicons/
Globalcode – Open4education
Componentes novos
Gesturestap
Globalcode – Open4education
Componentes novos
Gesturestappress
Globalcode – Open4education
Componentes novos
Gesturestappresspan
Globalcode – Open4education
Componentes novos
Gesturestappresspanswipe
Globalcode – Open4education
Componentes novos
Gesturestappresspanswiperotate
Globalcode – Open4education
Componentes novos
Gesturestappresspanswiperotatepinch
Globalcode – Open4education
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
Não utiliza mais:ControlersScope
Globalcode – Open4education
Angular 2Utiliza:
ComponentsDecoratorsTypescript
Não utiliza mais:ControlersScope
Curso de Angular 2 gratuito em http://loiane.training
Globalcode – Open4education
Angular 2
Angular 1
app.js
Angular 2
app.ts
Globalcode – Open4education
Angular 2
app.component.ts
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/
Globalcode – Open4education
Testanto o Typescript
http://www.typescriptlang.org/Playground
Globalcode – Open4education
Navegação
Globalcode – Open4education
NavegaçãoIonic 1 Ionic 2
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/
Globalcode – Open4education
Ionic Native
Globalcode – Open4education
Instalando e iniciando uma App
Globalcode – Open4education
NodeJS https://nodejs.org/
Globalcode – Open4education
Instalando Ionic e Cordova
$ npm install -g ionic@beta
$ npm install -g cordova
$ npm list -g --depth=0
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
Globalcode – Open4education
Ionic Preview
Globalcode – Open4education
Atom TypeScript
Globalcode – Open4education
Iniciando a aplicação
$ ionic start [nomeDoApp] blank --v2 --ts
$ cd [nomeDoApp]
$ ionic serve
$ ionic serve --lab
Globalcode – Open4education
Visualizando a aplicação
Globalcode – Open4education
Ionic Generate
Cria páginas para sua aplicação (html, scss e ts)
$ ionic g page [nomeDaPágina]
Globalcode – Open4education
Código
https://github.com/tatianeaguirres/ionic-2-tdc2016
Recommended