Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
ionic 3
Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
10+ XP TI
Java, JavaScript/HTML5,
Sencha, Angular, Phonegap/
Ionic
Disponível (inglês) na amazon.com.br
https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
Stack de tecnologias
+ ==
App híbrido
Seu Código
App híbrido
Web View Nativa (Browser)
Seu Código
App híbrido
APIs Nativas
Web View Nativa (Browser)
Seu Código
App híbrido
APIs Nativas
(camera, contatos, sqlite)
Web View Nativa (Browser)
Seu Código
App híbrido
App Nativa: .apk, .ipa, etc
APIs Nativas
(camera, contatos, sqlite)
Web View Nativa (Browser)
Seu Código
Cordova: estrutura do projeto
Extensão componente nativo WebView
Browser nativo que abre index.html do
diretório www
Acesso API nativa através de plugins
Ionic abstrai com código Angular: Ionic Native
Empacotamento para ipa ou apk
+
Padrão Web Components
Ionic 2.x/3.x === Componentes Angular
Tags ion-*
Código Angular + EcmaScript + TypeScript
Conceitos Angular: Components, Services, Pipes,
Injeção de Dependência, Data Binding, etc
Não usa o roteamento do Angular
Navegação por Stack (Pilha)
+
App Ionic
CSS + tags HTML do Ionic
App Ionic
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic
App Ionic
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic
App Ionic
Empacotamento App Nativo: .apk, .ipa
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic
App Ionic
Empacotamento App Nativo: .apk, .ipa
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic
https://ionicframework.com/docs/components
3
Calma, calma…
Não criemos pânico!
Ionic 1.x -> AngularJS 1.x
Ionic 2.x -> Angular 2.x
Ionic 3.x -> Angular 4.x
Versionamento Semântico
Major.Minor.Patch
Hands On!
https://nodejs.org
Ionic CLI
Cordova CLI Angular CLI Extras +
Customizações
+ +
==
npm install -g cordova ionic@latest
ionic start minhaApp
Instalar Ionic CLI
COMPONENTES
E PÁGINAS
DIRETIVAS
NAVEGAÇÃO
PILHA
SERVIÇOS
TEMPLATE
DATA BINDING
INJEÇÃO
DEPENDÊNCIA
MÓDULOS
Angular 2.x/4.x +
Ionic 2.x/3.x
PLUGINS
CORDOVA (IONIC
NATIVE)
Show me the
C de!
Show me the
C de!
https://github.com/loiane/ionic2-intro-example
https://github.com/loiane/ionic2-pokedex
Pokédex
Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android
Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android
Ionic Native
Plugins populares do Cordova distribuídos na
lib do Ionic:
Camera
Bluetooth
SqLite
Facebook
Push
entre outros
+
https://github.com/loiane/ionic3-camera-example
Opções da Foto: base64,
salvar no álbum e 90% de
qualidade
Atribui base64 à
variável imagem
Imagem
sanitizada pelo
Angular 2/4 -
segurança
IONIC NATIVE
3
https://ionic3-intro-example.firebaseapp.com
https://ionic3-intro-example.firebaseapp.com
https://ionic3-intro-example.firebaseapp.com
Básico sobre Apache Cordova
Para builds e uso de plugins nativos
camera, geolocation, notificação push, etc
Angular (2.x/4.x) + TypeScript
É a base de todo o código
components, services, pipes, etc
EcmaScript 2015 (ES6) e Orientação a Objetos
Componentes Ionic
Listas, botões, modais, etc
O que preciso aprender pra desenvolver com ionic?
Básico sobre Apache Cordova
Para builds e uso de plugins nativos
camera, geolocation, notificação push, etc
Angular (2.x/4.x) + TypeScript
É a base de todo o código
components, services, pipes, etc
EcmaScript 2015 (ES6) e Orientação a Objetos
Componentes Ionic
Listas, botões, modais, etc
O que preciso aprender pra desenvolver com ionic?
Tem curso
grátis no meu canal
do YouTube
Tem curso
grátis no meu canal
do YouTube!
Futuro…
https://twitter.com/maxlynch/status/839879789666308103
https://twitter.com/maxlynch/status/861597030132596737
https://twitter.com/maxlynch/status/865540354522480643
Ferramentas…
https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack
Quer aprender mais sobre Cordova e
Angular (2.x e 4.x)?
/loianegroner
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training

Ionic 3