Introducao ao Ionic 2 na pratica

Palestra sobre Ionic 2. Introdução ao Ionic 2 e prática apresentada.

1. 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

3. •Meus livros:

4. Objective-C
Swift
.NET
API WP
Java
API Android

5. App Nativa: .apk, .ipa, etc
APIs Nativas
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?

6. O QUE É IONIC?
Empacotamento do App Nativo (ipa,
apk) com Apache Cordova
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular 2
+ ES2015 (ES6) + TypeScript
CSS + tags HTML do Ionic

7. IONIC 1
▸Criado em 2013
▸Bootstrap para apps mobile
▸Fornece componentes e diretivas que parecem nativos
▸Organização de código com Angular 1
▸Projeto base Cordova (Phonegap): acesso nativo através
de plugins e geração de executável para app stores
▸Mais de 1 milhão de apps publicadas
▸Suporte para iOS e Android
▸Suporte para Windows Phone 8 via template especial
Visual Studio

8. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima do nativo
▸Melhoria de performance
▸Suporte para iOS, Android e Windows
Phone 10

10. IONIC 2 + ANGULAR 2
▸WebComponents + padrões web
▸Baseado em Componentes
▸TypeScript
▸EcmaScript 2015
▸Components, Services + Observables, Pipes, Directives
▸Ionic Native entra no lugar no ngCordova
▸Não usa o roteamento do Angular 2
▸Navegação por stack (pilha)

11. STACK / DEPENDÊNCIAS

12. 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)

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

14. https://nodejs.org

15. INSTALAÇÃO E USO
npm install -g cordova ionic
ionic start minhaApp --v2

16. Show me the
C de!

17. Show me the
C de!
https://github.com/loiane/ionic2-intro-example

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

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

20. Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android

21. Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android

23. PRA FINALIZAR…

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

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

26. Atribui base64 à
variável imagem

27. Imagem
sanitizada pelo
Angular 2 -
segurança

29. PRÓS E CONTRAS
▸Bom para apps que tem muita tela e pouca
integração com nativo (hardware)
▸Bom para target em várias plataformas (ios,
android, wp)
▸Não é bom para apps com muito uso de
plugins (apesar de serem possíveis de fazer
com híbrido). Exemplos: muita geolocation
(uber e afins), execução em background,
realidade aumentada, etc

30. 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 + 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
Tem curso
grátis no meu canal
do YouTube
Tem curso
grátis no meu canal
do YouTube!

31. https://ionicframework.com/docs/v2

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

33. Quer aprender mais sobre Cordova e
Angular 2?
/loianegroner

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