O documento fornece informações sobre o framework Ionic para desenvolvimento de aplicações móveis híbridas. Discute o que é o Ionic, suas versões, dependências, estrutura de projetos, elementos de interface do usuário, dicas e recursos para teste e depuração de aplicativos.

1. Ionic framework
{Aplicações móveis híbridas}
Sinesio Bittencourt
contato@sinesio.com.br

2. contato@sinesio.com.br
{Analise de sistemas}
{Técnico em desenvolvimento em
JAVA}
▸ Atualmente estudando
{Gestão da Tecnologia da Informação}
Sinesio Bittencourt
Sinesio Bittencourt

3. contato@sinesio.com.br
{É um framework para desenvolvimento de
aplicações híbridas usando HTML5}
Ionic framework
Sinesio Bittencourt

4. contato@sinesio.com.br
“É inteiramente, 100% open-source. Sob licença MIT,
significa que qualquer um pode usá-lo, com propósito
comercial ou pessoal – isso não importa para nós”
Ben Sperry (CEO)
Ionic framework
Sinesio Bittencourt

5. contato@sinesio.com.br
▸ Componentes UI ricos e otimizados para mobile
▸ Performance
▸ AngularJS
▸ Apache Cordova
▸ Construído com Sass
▸ Um poderoso CLI (Command line interface)
▸ Documentação rica e comunidade ativa
Mas por que o Ionic?
Sinesio Bittencourt

6. contato@sinesio.com.br Sinesio Bittencourt
▸ Linguagem e componentes conhecidos
Com o Ionic é possível desenvolver os apps
utilizando linguagens de programação e
componentes já conhecidos pelos
programadores.
▸ Compatível com diversas plataformas:

7. contato@sinesio.com.br Sinesio Bittencourt
Arquitetura robusta.
Aplicativo para android e iOS, que possibilita testar o aplicativo em
desenvolvimento sem a necessidade de instalação.
Uma poderosa CLI Design simples e funcional. Componentes
similares aos do sistema nativo.

8. contato@sinesio.com.br
▸ Criado no final de 2013 - Ben Sperry (CEO) e Max Lynch (CTO)
▸ 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
▸ Mais de 1 milhão de apps publicadas
▸ Suporte para iOS e Android
▸ Suporte para Windows Phone 8 via template especial Visual Studio
Ionic v1
Sinesio Bittencourt

9. contato@sinesio.com.br
▸ Reescrita do Ionic 1
▸ Suporte para iOS, Android e Windows Phone 10
▸ Organização do código em Angular 2
▸ Mesmos componentes do Ionic 1
▸ Experiência mais próxima do nativo
▸ Melhoria de performance
Ionic v2
Sinesio Bittencourt

10. contato@sinesio.com.br
▸ WebComponents + padrões web
▸ Ionic Native entra no lugar no ngCordova
▸ Baseado em Componentes
▸ Não usa o roteamento do Angular 2
▸ TypeScript
▸ Navegação por stack (pilha)
Ionic v2 + Angular v2
Sinesio Bittencourt

11. contato@sinesio.com.br
▸ Angular 4.0.0 ( Novos recursos como aplicativos menores e
mais rápidos, suporte para uma versão mais recente do TypeScript
)
▸ Compatibilidade TypeScript 2.1 e 2.2
▸ IonicPage Decorator
▸ "O foco principal continuará a ser nas melhorias de velocidade"
Ionic v3
Sinesio Bittencourt
O que há de novo?
Versão 3 foi lança em 7 de abril 2017
http://blog.ionic.io/ionic-3-0-has-arrived/
By Brandy on April 7

12. contato@sinesio.com.br Sinesio Bittencourt
Dependências

13. contato@sinesio.com.br
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notificação push, etc
▸ Angular 2+ e TypeScript ( É a base de todo o código )
▸ Orientação a Objetos
▸ Componentes Ionic ( Listas, botões, modais, etc )
UE PRECISO APRENDER PARA DESENVOLVER COM ION
Sinesio Bittencourt

14. contato@sinesio.com.br
UE PRECISO APRENDER PARA DESENVOLVER COM ION
Sinesio Bittencourt
Componente ngCordova

15. contato@sinesio.com.br Sinesio Bittencourt
CAMERA TOUCH ID
GEOLOCATION
PUSH NOTIFICATION
OAUTH
Plugins populares do Cordova distribuídos na lib do Ionic:

16. contato@sinesio.com.br
▸ Bom para apps que tem muita tela e pouca integração com nativo
(hardware)
▸ Bom para target em várias plataformas (ios e android)
▸ 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.
PRÓS E CONTRAS
Sinesio Bittencourt

17. contato@sinesio.com.br Sinesio Bittencourt

18. Mão na Massa!

19. contato@sinesio.com.br
▸ Baixe e instale o Node 6 LTS e NPM 3+
▸npm install -g cordova ionic
▸-g instalação em modo global
▸ionic start minhaApp --v2
▸--v2 --ts não utilizamos mais no ionic 3
▸--type=ionic1
Pré-requisitos para o IONIC
Sinesio Bittencourt
IONIC <COMMAND> [<ARGS>] [--HELP] [--VERBOSE] [--QUIET] [--NO-INTERACTIVE] [--CONFIRM] [OPTIONS]

20. contato@sinesio.com.br Sinesio Bittencourt
▸ ionic start minhaApp —v2
▸ ionic start

21. contato@sinesio.com.br
Estrutura Ionic
Sinesio Bittencourt
Ações personalizadas a serem executadas quando
a App passar para o contexto do Cordova.
Plataformas que serão usadas no App
Plugins instalados na App
Onde é de fato desenvolvida o App
Arquivo principal de configuração do app (Dependências,
etc)

22. contato@sinesio.com.br
▸ ionic serve
▸ ionic serve —lab
Executando uma Aplicação no IONIC
Sinesio Bittencourt
Executar no browser

23. contato@sinesio.com.br Sinesio Bittencourt

24. contato@sinesio.com.br Sinesio Bittencourt

25. contato@sinesio.com.br Sinesio Bittencourt
O Jeito Fácil de Testar Aplicativos Ionic
Ionic View
▸ Baixe o App para o celular em
http://view.ionic.io/

26. contato@sinesio.com.br Sinesio Bittencourt
Ionic View
▸ Baixe o App para o celular em
http://view.ionic.io/

27. contato@sinesio.com.br Sinesio Bittencourt
Ionic View
▸ https://apps.ionic.io

28. contato@sinesio.com.br Sinesio Bittencourt
O Jeito Fácil de Testar Aplicativos Ionic
Ionic View
▸ ionic login
▸ ionic link
▸ ionic upload

29. contato@sinesio.com.br Sinesio Bittencourt
Teste e Debug de Aplicativos
Ionic View
Serviço do Ionic para facilitar o teste de aplicações entre
dispositivos.
http://view.ionic.io
Teste no Browser
Utilizando o Chrome DevTools
como ferramenta de debug.
$> ionic serve —lab
Emuladores
Emulando um dispositivo real no
computador do desenvolvedor.
$> ionic emulate
Teste no dispositivo
Realizando um teste dentro do dispositivo conectado ao Chrome DevTools para debug.
$> ionic run + Chrome Inspect

30. contato@sinesio.com.br Sinesio Bittencourt
O Ionic oferece diversos elementos CSS e Diretivas AngularJS para
uso na UI:

31. contato@sinesio.com.br Sinesio Bittencourt
Elementos de UI
Ionic framework
{Aplicações móveis híbridas}

32. contato@sinesio.com.br Sinesio Bittencourt
Elementos de UI
▸ https://ionicframework.com/docs/api/components/icon/Icon/

33. contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components/#checkbox

34. contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components

35. contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components

36. contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components

37. contato@sinesio.com.br Sinesio Bittencourt
Dicas!
Ionic framework
{Aplicações móveis híbridas}

38. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Use o Ionic StackBlitz (teste sem preocupar-se com ambiente)
▸https://stackblitz.com

39. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Use o Ionic Playground: (teste sem preocupar-se com ambiente)
▸http://play.ionic.io

40. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Ionic Creator: (Wireframes e estrutura de views em minutos)
▸http://creator.ionic.io

41. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸ Ionic Market ( market.ionic.io )

42. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸ Firebase
▸ Firebase também oferece Social Login de forma fácil para usar em seu APP
▸https://console.firebase.google.com/u/0/project/crud-32d4f/overview
▸http://firebase.com/docs/web/libraries/ionic/guide.html#section- integrating-firebase

43. contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸O WooCommerce já tem uma API REST nativa
▸Os templates padrão do Ionic são: blank, tabs e sidemenu, mas é possível usar
qualquer repositório do github.
▸O ionic oferece diversos serviços (prox slide) úteis para seu app
▸O Plugin WP-API ( https://wordpress.org/plugins/rest-api/ )
▸Você pode facilmente implementar Realtime com o Firebase

44. Obrigado!
Site: sinesio.com.br
E-mail: contato@sinesio.com.br
GiHub: https://github.com/sinesiobittencourt
LinkedIn: linkedin.com/in/sinesiobittencourt/
Instagram: instagram.com/sinesio

45. Opa! Ainda não acabamos temos
BRINDES
Join at kahoot.it