Slides da palestra do Gu Mobile - RS sobre "Desenvolvimento de Apps Híbridas com Ionic Framework" realizada na PUC-RS em 25 de Maio de 2016.

1. Leonardo Quevedo (Marsala Labs)
Desenvolvimento de Apps
Híbridas com Ionic Framework

2. Leonardo Quevedo
- CTO na Marsala Labs.
- Apaixonado por tecnologia e inovação!
- Desenvolvedor Ionic desde a versão Alfa.
- Evangelista de MEAN.js. LinkedIn: https://br.linkedin.com/in/leopq
Twitter: https://twitter.com/leopq
Facebook: https://fb.com/pac.leo

3. Mundo Mobile
1. Área em expansão contínua.
2. 244 milhões de dispositivos móveis em atividade no Brasil em 2015*.
3. Movimentou U$ 72 bilhões no mundo em 2013.
4. Perspectiva de U$ 151 bilhões em 2017.
5. Plataformas marjoritárias em escala global: Android e iOS.
*Fundação Getúlio Vargas, 2015 (via http://iceeb.com.br/news/brasil-registra-mais-de-244-milhoes-de-dispositivos-moveis/)

4. Aplicativos Híbridos?
1. Utilizam toda a força do HTML5, CSS3 e JavaScript.
2. Ambiente familiar a desenvolvedores web.
3. HTML5: Geolocation, Storage API, Offline Mode, Media API.
4. Facilitam o reuso de códigos (websites ou mesmo desktop).
5. Uma única linguagem de programação: JavaScript x (Java + Obj-C + C#).
6. Uma única linguagem de definição de estilos e estrutura de telas: HTML
x (XML + AutoLayout + XAML).
7. Apenas uma base de códigos = Menor custo em treinamentos/tempo de
desenvolvimento, correção de bugs e alterações centralizadas.

5. Apache Cordova
1. Também conhecido como Adobe Phonegap.
2. Renderização de conteúdo web em uma “casca”
nativa.
3. Soluciona diversos bugs de implementação da
webview (versão customizada e normalizada.).
4. Disponibiliza o acesso a funcionalidades nativas de
forma homogênea através de plugins JavaScript.
5. https://cordova.apache.org/

6. Apache Cordova
Níveis de Abstração:
Aplicação Web
Apache Cordova (WebView)
Sistema Operacional

7. AngularJS (by Google)
- “Framework JavaScript Super Heróico”.
- Extensão das funcionalidades HTML.
- Aprimoramento de eventos nativos JavaScript, como o “onclick” (ng-
click).
- Requisições HTTP de forma extremamente simples.
- Modularização e componentização de aplicações.
- Cerca de 150 versões lançadas.
- 4000 testes unitários a cada alteração no código.

8. AngularJS (by Google)
Níveis de Abstração:
Aplicação Web
Apache Cordova (WebView)
Sistema Operacional
AngularJS

9. Ionic Framework
- “Construa aplicativos incríveis com as tecnologias web que você já
conhece e ama!”
- HTML, CSS e JS otimizados para dispositivos mobile / focado em
performance.
- Remove problemas típicos de aplicações Cordova/Phonegap.
- Tecnologias como Gulp, Sass e Bower pré-configuradas.
- Mais de 2 milhões de aplicativos desenvolvidos (Novembro de 2015)!

10. Ionic Framework
- Spinners, modais, popups, cabeçalhos, rodapés, botões, conteúdo...
- Servidor de livereload para testes no navegador.
- Templates de aplicativos (blank, tabs, tinder cards, sidemenu).
- Gerenciamento automático de plugins Cordova.
- Geração de ícones e splashscreens.
- http://ionicframework.com/getting-started/
- http://www.fabricadecodigo.com/como-criar-aplicativos-com-ionic-
framework/

11. Ionic Framework:
Ionicons
- Conjunto de ícones do Ionic
- Cerca de 700 ícones
- Gratuitos e de livre utilização
- Licença MIT
- http://ionicons.com

12. Ionic Framework:
Cores
- Conjunto de cores do Ionic
- 10 cores padrão
- Customizáveis através de Sass

13. Ionic Framework:
Ionic Creator
http://lab.ionic.io

14. Ionic Framework:
Ionic Lab
- Aplicação Desktop
- Interface gráfica x Linha de Comando
- Criar aplicativos
- Gerar executáveis
- Testar em dispositivos
- Compartilhar versões
- http://lab.ionic.io

15. Ionic Framework:
Ionic View
- Compartilhamento em tempo real de
aplicativos
- Sem necessidade de baixar instaláveis
(.apk ou .ipa) toda a vez que o aplicativo é
alterado.
- http://view.ionic.io

16. Ionic Framework
Níveis de Abstração:
Aplicação Web
Aplicação Web
Apache Cordova (WebView)
Sistema Operacional
AngularJSIonic Framework

17. Ionic Framework:
Hands On
Vamos começar!
Instalar NodeJS: https://nodejs.org
Na linha de comando:
$ npm install -g cordova ionic
$ ionic start gu-mobile-ionic blank
$ ionic serve --lab
Para testar no dispositivo:
$ ionic run android
$ ionic run ios

18. Ionic Framework:
Hands On
Lista de Tarefas:
- Criar cabeçalho com título
- Adicionar ícone ao título
- Listar tarefas
- Completar tarefa
- Riscar tarefas concluidas
- Exibir apenas tarefas em aberto
- Adicionar novas tarefas
Bônus:
- Mostrar tarefas concluídas e não concluídas
- Ordenar tarefas pelo seu status

19. Ionic Framework:
Hands On
Links úteis:
- Códigos do Hands On: https://github.com/leopq/gu-mobile-ionic
- Componentes de UI do Ionic: http://ionicframework.com/docs/components/
- Componentes JavaScript do Ionic: http://ionicframework.com/docs/api/
- Aos iniciantes em JavaScript: http://jstherightway.org/pt-br/