Ionic framework guias

Ionic framework
{Aplicações móveis híbridas}
sinesio.com.br

▸Analista de Sistemas Linux
▸Técnico em desenvolvimento em JAVA
▸ Gestão da Tecnologia da Informação
▸ Vancouver - Canadá
Mais de 11 anos experiência com Linux e na área de
desenvolvimento de sistemas tenho mais ou menos 6 anos
de experiência com desenvolvimento em JAVA e PHP.
Apaixonado por CAFÉ!
Sinesio Bittencourt
sinesio.com.br

Ionic framework
{ É um framework para desenvolvimento de
aplicações híbridas usando HTML5 }
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)
sinesio.com.br
Ionic framework

▸ 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
sinesio.com.br
Mas por que o Ionic?

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

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

▸ 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
sinesio.com.br
Ionic v1

▸ Mais de 1 milhão de apps publicadas
▸ Suporte para iOS e Android
▸ Suporte para Windows Phone 8 via template especial
Visual Studio
sinesio.com.br
Ionic v1

▸ 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
sinesio.com.br
Ionic v2

▸ 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)
sinesio.com.br
Ionic v2 + Angular v2

Versão 3 foi lançado em 7 de abril 2017
sinesio.com.br
Ionic v3
O que há de novo?
▸ 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"
http://blog.ionicframework.com/ionic-3-0-has-arrived/

O QUE EU PRECISO APRENDER PARA DESENVOLVER COM IONIC
▸ 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 )

Plugins populares do Cordova distribuídos na lib do Ionic
▸ CAMERA ▸ TOUCH ID ▸ OAUTH

Plugins populares do Cordova distribuídos na lib do Ionic
▸ PUSH NOTIFICATIONS ▸ GEOLOCATION ▸ PROGRESSINDICATOR
http://ngcordova.com/docs/plugins/

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 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é-requisitos para o IONIC
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
▸ https://nodejs.org/en/download/
▸ https://www.npmjs.com/package/npm3

Executando uma Aplicação no IONIC
Executar no browser
▸ionic serve
▸ionic serve —lab

Ionic View
O Jeito Fácil de Testar Aplicativos Ionic
▸ Baixe o App para o celular em
http://view.ionic.io/

Ionic View
▸ https://apps.ionic.io

Ionic View via Terminal
▸ ionic login
▸ ionic link
▸ ionic upload

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 dispositivo Realizando um teste dentro do
dispositivo conectado ao Chrome DevTools para debug.
ionic run + Chrome Inspect

O Ionic oferece diversos elementos CSS e Diretivas AngularJS
para uso na UI:

Ionic framework
Elementos de UI

https://ionicframework.com/docs/api/components/icon/Icon/

Ionic framework - Dicas!
▸Use o Ionic StackBlitz (teste sem preocupar-se com ambiente)
▸https://stackblitz.com

▸Use o Ionic Playground: (teste sem preocupar-se com ambiente)
▸http://play.ionic.io

▸Ionic Creator: (Wireframes e estrutura de views em minutos)
▸http://creator.ionic.io

▸ 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

▸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
▸Você pode facilmente implementar Realtime com o Firebase
▸O Plugin WP-API ( https://wordpress.org/plugins/rest-api/ )

▸ Ionic Market ( market.ionic.io )

Usando o WordPress como API REST
Instalando o WordPress:
(Pré requisitos: Servidor com PHP5+ e mySQL ou MariaDB)
Baixe em br.wordpress.org
http://v2.wp-api.org/

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

Ionic framework guias

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Ionic framework guias

Semelhante a Ionic framework guias (20)

Ionic framework guias