Leonardo Quevedo (Marsala Labs)

Desenvolvimento de Apps Híbridas com Ionic

Framework

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

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/)

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.

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/

Apache Cordova

Níveis de Abstração:

Aplicação Web

Apache Cordova (WebView)

Sistema Operacional

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.

- A cada versão: 50.000 testes executados nos principais browsers.

- http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/

AngularJS (by Google)

Níveis de Abstração:

Aplicação Web

Apache Cordova (WebView)

Sistema Operacional

AngularJS

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)!

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-fr

amework/

Ionic Framework: Ionicons

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

Ionic Framework: Cores

- Conjunto de cores do Ionic- 10 cores padrão- Customizáveis através de Sass

Ionic Framework: Ionic Creator

http://lab.ionic.io

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

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

Ionic FrameworkNíveis de Abstração:

Aplicação Web

Aplicação Web

Apache Cordova (WebView)

Sistema Operacional

AngularJSIonic Framework

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

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

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/