O documento fornece informações sobre Loiane Groner, uma desenvolvedora brasileira especializada em tecnologias como Java, JavaScript, Angular e Ionic. Ela oferece treinamentos e cursos sobre essas tecnologias e escreveu livros disponíveis na Amazon.

1. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
ionic 3

2. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
10+ XP TI
Java, JavaScript/HTML5,
Sencha, Angular, Phonegap/
Ionic

3. Disponível (inglês) na amazon.com.br

4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/

6. Stack de tecnologias
+ ==

8. App híbrido
Seu Código

9. App híbrido
Web View Nativa (Browser)
Seu Código

10. App híbrido
APIs Nativas
Web View Nativa (Browser)
Seu Código

11. App híbrido
APIs Nativas
(camera, contatos, sqlite)
Web View Nativa (Browser)
Seu Código

12. App híbrido
App Nativa: .apk, .ipa, etc
APIs Nativas
(camera, contatos, sqlite)
Web View Nativa (Browser)
Seu Código

13. 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
+

14. 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)
+

15. App Ionic
CSS + tags HTML do Ionic

16. App Ionic
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic

17. App Ionic
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular +
EcmaScript + TypeScript
CSS + tags HTML do Ionic

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

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

20. https://ionicframework.com/docs/components

21. 3

22. Calma, calma…
Não criemos pânico!

23. Ionic 1.x -> AngularJS 1.x
Ionic 2.x -> Angular 2.x
Ionic 3.x -> Angular 4.x
Versionamento Semântico
Major.Minor.Patch

24. Hands On!

25. https://nodejs.org

26. Ionic CLI
Cordova CLI Angular CLI Extras +
Customizações
+ +
==

27. npm install -g cordova ionic@latest
ionic start minhaApp
Instalar Ionic CLI

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

30. Show me the
C de!

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

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

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

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

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

41. Ionic Native

42. Plugins populares do Cordova distribuídos na
lib do Ionic:
Camera
Bluetooth
SqLite
Facebook
Push
entre outros
+

43. https://github.com/loiane/ionic3-camera-example

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

48. Atribui base64 à
variável imagem

50. Imagem
sanitizada pelo
Angular 2/4 -
segurança

53. IONIC NATIVE
3

55. https://ionic3-intro-example.firebaseapp.com

56. https://ionic3-intro-example.firebaseapp.com

57. https://ionic3-intro-example.firebaseapp.com

58. 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?

59. 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!

60. Futuro…

61. https://twitter.com/maxlynch/status/839879789666308103

62. https://twitter.com/maxlynch/status/861597030132596737

63. https://twitter.com/maxlynch/status/865540354522480643

64. Ferramentas…

65. https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack

66. Quer aprender mais sobre Cordova e
Angular (2.x e 4.x)?
/loianegroner

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