DevFest Nordeste: Ionic 2

Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
2

• 10+ XP TI
• Java, JavaScript, Sencha, Angular,
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training

IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile

IONIC 1
▸ Criado em 2013
▸ Fornece componentes e diretivas que parecem nativos

IONIC 1
▸ Criado em 2013
▸ Organização de código com Angular 1

IONIC 1
▸ Criado em 2013
▸ Projeto base Cordova (Phonegap): acesso nativo através
de plugins e geração de executável para app stores

IONIC 1
▸ Criado em 2013
▸ Mais de 1 milhão de apps publicadas

IONIC 1
▸ Criado em 2013
▸ Suporte para iOS e Android

IONIC 1
▸ Criado em 2013
▸ Suporte para iOS e Android
▸ Suporte para Windows Phone 8 via template especial
Visual Studio

IONIC 2
▸Reescrita do Ionic 1

IONIC 2
▸Organização do código em Angular 2

IONIC 2
▸Mesmos componentes do Ionic 1

IONIC 2
▸Experiência mais próxima do nativo

IONIC 2
▸Melhoria de performance

IONIC 2
▸Melhoria de performance
▸Suporte para iOS, Android e Windows
Phone 10

O QUE É IONIC?
CSS + tags HTML do Ionic

O QUE É IONIC?
Base do código com Angular 2
+ ES2015/16 + TypeScript

O QUE É IONIC?
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)

O QUE É IONIC?
Empacotamento do App Nativo (ipa,
apk) com Apache Cordova
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)

ANGULAR 2
▸WebComponents + padrões web
▸Baseado em Componentes
▸TypeScript
▸EcmaScript 2015/2016
▸Components, Services + Observables,
Pipes, Directives

COMPONENTES
E PÁGINAS
DIRETIVAS
NAVEGAÇÃO
SERVIÇOS
TEMPLATE
DATA BINDING
INJEÇÃO
DEPENDÊNCIA
MÓDULOS
Blocos Principais
Angular 2 + Ionic
PLUGINS
CORDOVA (IONIC
NATIVE)

COMPONENTE
{…}
TEMPLATE
<..>

COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades

COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
Binding de
Eventos

COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
Binding de
Propriedades
Binding de
Eventos

COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B
Binding de
Propriedades
Binding de
Eventos

COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B MÓDULO X
MÓDULO A
MÓDULO B
Binding de
Propriedades
Binding de
Eventos

IONIC 2
▸ Dependência do Angular2 + TypeScript

IONIC 2
▸ ES6 (ES2015) / ES7 (ES2016)

IONIC 2
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova

IONIC 2
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Não usa o roteamento do Angular 2

IONIC 2
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Não usa o roteamento do Angular 2
▸ Navegação por stack (pilha)

COMPONENTES
▸ Action
Sheets
▸ Alerts
▸ Buttons
▸ Cards
▸ Icons
▸ Lists
▸ Search Bar
▸ Tabs
▸ Alert
▸ Modal
▸ IonRefresher
▸ Keyboard
▸ entre outros

INSTALAÇÃO E USO
npm install -g cordova ionic@latest
ionic start minhaApp --v2

CUSTOMIZAÇÃO CSS
▸ Baseado em Componente
▸ Baseado na App
▸ Baseado no Sistema
Operacional

Decorator pra
indicar que é um
componente

Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar
esse

Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar
esse
Arquivo que
contém o template:
código HTML

Construtor
com DI: Injeção de
Dependência

h2 | p: tags HTML
"normais"
ion-componente
tags HTML do Ionic 2

Sistema de módulos do
Angular 2

Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:

Apps
instalados:
Diferenças visuais
entre iOS e Android

PokemonList
Cada Item da
lista - loop

Ao clicar/tap
abre página de
detalhes

Ao clicar/tap
abre página de
detalhes
E passamos o
objeto pokemon
para o detalhe

Se existir tipos de
Pokemon - array tem
mais de 1 elemento

E aplicamos CSS pra
ﬁcar bonito!

Se o campo de
busca estiver vazio,
retorna a lista de
pokemons

Senão, ﬁltramos
os pokemons que tem a
string de busca no nome

Criamos um serviço que irá
fornecer os dados (provider)

No Componente injetamos o
serviço no construtor

Programação reativa: ﬂuxos:
.map
.do
.catch

Programação reativa: ﬂuxos:
.map
.do
.catch
http://reactivex.io

Também pode cachear a
informação e retornar
Observable de variável

Fazemos a “inscrição" no
Observable pra receber o
resultado

Botão “Voltar" é
adicionado automaticamente

Botão “Voltar" é
adicionado automaticamente
Stack
Pokemo
nList
Stack
PokemonLi
st
Push
PokemonDetail
Pilha
PokemonList
Pop
Botão Voltar
(Back)
(empilha)
(desempilha)

Cada seção dos
detalhes é um componente
auxiliar pra ajudar na
organização do projeto

Páginas são as Views do
aplicativo

Páginas são as Views do
aplicativo
Componentes são
usados para organizar o
código em blocos
menores

Nosso código
HTML + JS + CSS
Projeto do Xcode
(IDE do iOS)

https://github.com/loiane/ionic2-pokedex
Pokédex

IONIC NATIVE
▸ Plugins populares do Cordova distribuídos na lib do
Ionic:
▸ Camera
▸ Bluetooth
▸ SqLite
▸ Facebook
▸ Push
▸ entre outros

Imagem
sanitizada pelo
Angular 2 -
segurança

Opções da Foto: base64,
salvar no álbum e 90% de
qualidade

Atribui base64 à
variável imagem

O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notiﬁcação push, etc

▸ Angular 2 + TypeScript
▸ É a base de todo o código
▸ components, services, pipes, etc
▸ EcmaScript 2015/2016 também

▸ Componentes Ionic
▸ Listas, botões, modais, etc

▸ Componentes Ionic
▸ Listas, botões, modais, etc
Tem curso
grátis no meu canal
do YouTube
Tem curso
grátis no meu canal
do YouTube!

https://ionicframework.com/docs/v2

https://github.com/IonicBrazil/ionic2-docs

Quer aprender mais sobre Cordova e
Angular 2?
/loianegroner

http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training

DevFest Nordeste: Ionic 2

Mais conteúdo relacionado

Mais procurados

Semelhante a DevFest Nordeste: Ionic 2

DevFest Nordeste: Ionic 2