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

Globalcode – Open4education

Ionic Framework 2 - O que vem por aí?

Tatiane Aguirres e Márcio BrufattoTrilha Mobile


Tatiane Aguirres Márcio Brufatto

@tatianeaguirres

[email protected]

@mbrufatto

[email protected]



O que mudou da V1 para a V2?



TUDO



TUDOQuase...


Windows phone


HTML


Cores


Theming your App


Componentes novos

Action Sheets


Componentes novos

Action SheetsAlerts

Basic Alerts


Componentes novos

Action SheetsAlerts

Basic AlertsPrompt Alerts


Componentes novos

Action SheetsAlerts

Basic AlertsPrompt AlertsConfirmation Alerts


Componentes novos

Action SheetsAlerts

Basic AlertsPrompt AlertsConfirmation AlertsRadio Alerts


Componentes novos

Action SheetsAlerts

Basic AlertsPrompt AlertsConfirmation AlertsRadio AlertsCheckbox Alerts


Componentes novos

Action SheetsAlerts


Badges


Componentes novos

Action SheetsAlerts


BadgesCard Background Images


Componentes novos

Action SheetsAlerts


BadgesCard Background ImagesDateTime


Componentes novos

FABs


Componentes novos

FABsLoading


Componentes novos

FABsLoadingModals


Componentes novos

FABsLoadingModalsPopover


Componentes novos

FABsLoadingModalsPopoverSearchbar


Componentes novos

FABsLoadingModalsPopoverSearchbarSegment


Componentes novos

FABsLoadingModalsPopoverSearchbarSegmentSlides


Componentes novos

FABsLoadingModalsPopoverSearchbarSegmentSlidesToast


Componentes novos

FABsLoadingModalsPopoverSearchbarSegmentSlidesToastIcons

http://ionicframework.com/docs/v2/ionicons/


Componentes novos

Gesturestap


Componentes novos

Gesturestappress


Componentes novos

Gesturestappresspan


Componentes novos

Gesturestappresspanswipe


Componentes novos

Gesturestappresspanswiperotate


Componentes novos

Gesturestappresspanswiperotatepinch



Angular 2Utiliza:

ComponentsDecoratorsTypescript


Angular 2Utiliza:


Não utiliza mais:ControlersScope


Angular 2Utiliza:


Não utiliza mais:ControlersScope

Curso de Angular 2 gratuito em http://loiane.training


Angular 2

Angular 1

app.js

Angular 2

app.ts


Angular 2

app.component.ts


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/


Testanto o Typescript

http://www.typescriptlang.org/Playground


Navegação


NavegaçãoIonic 1 Ionic 2


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/


Ionic Native


Instalando e iniciando uma App


NodeJS https://nodejs.org/


Instalando Ionic e Cordova

$ npm install -g ionic@beta

$ npm install -g cordova

$ npm list -g --depth=0


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


Ionic Preview


Atom TypeScript


Iniciando a aplicação

$ ionic start [nomeDoApp] blank --v2 --ts

$ cd [nomeDoApp]

$ ionic serve

$ ionic serve --lab


Visualizando a aplicação


Ionic Generate

Cria páginas para sua aplicação (html, scss e ts)

$ ionic g page [nomeDaPágina]


Código

https://github.com/tatianeaguirres/ionic-2-tdc2016

Software

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