SlideShare uma empresa Scribd logo
1 de 45
Ionic framework
{Aplicações móveis híbridas}
Sinesio Bittencourt
contato@sinesio.com.br
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
contato@sinesio.com.br
{É um framework para desenvolvimento de
aplicações híbridas usando HTML5}
Ionic framework
Sinesio Bittencourt
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
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
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:
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.
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
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
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
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
contato@sinesio.com.br Sinesio Bittencourt
Dependências
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
contato@sinesio.com.br
UE PRECISO APRENDER PARA DESENVOLVER COM ION
Sinesio Bittencourt
Componente ngCordova
contato@sinesio.com.br Sinesio Bittencourt
CAMERA TOUCH ID
GEOLOCATION
PUSH NOTIFICATION
OAUTH
Plugins populares do Cordova distribuídos na lib do Ionic:
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
contato@sinesio.com.br Sinesio Bittencourt
Mão na Massa!
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]
contato@sinesio.com.br Sinesio Bittencourt
▸ ionic start minhaApp —v2
▸ ionic start
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)
contato@sinesio.com.br
▸ ionic serve
▸ ionic serve —lab
Executando uma Aplicação no IONIC
Sinesio Bittencourt
Executar no browser
contato@sinesio.com.br Sinesio Bittencourt
contato@sinesio.com.br Sinesio Bittencourt
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/
contato@sinesio.com.br Sinesio Bittencourt
Ionic View
▸ Baixe o App para o celular em
http://view.ionic.io/
contato@sinesio.com.br Sinesio Bittencourt
Ionic View
▸ https://apps.ionic.io
contato@sinesio.com.br Sinesio Bittencourt
O Jeito Fácil de Testar Aplicativos Ionic
Ionic View
▸ ionic login
▸ ionic link
▸ ionic upload
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
contato@sinesio.com.br Sinesio Bittencourt
O Ionic oferece diversos elementos CSS e Diretivas AngularJS para
uso na UI:
contato@sinesio.com.br Sinesio Bittencourt
Elementos de UI
Ionic framework
{Aplicações móveis híbridas}
contato@sinesio.com.br Sinesio Bittencourt
Elementos de UI
▸ https://ionicframework.com/docs/api/components/icon/Icon/
contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components/#checkbox
contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components
contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components
contato@sinesio.com.br Sinesio Bittencourt
▸ https://ionicframework.com/docs/components
contato@sinesio.com.br Sinesio Bittencourt
Dicas!
Ionic framework
{Aplicações móveis híbridas}
contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Use o Ionic StackBlitz  (teste sem preocupar-se com ambiente)
▸https://stackblitz.com
contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Use o Ionic Playground: (teste sem preocupar-se com ambiente)
▸http://play.ionic.io
contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸Ionic Creator: (Wireframes e estrutura de views em minutos)
▸http://creator.ionic.io
contato@sinesio.com.br Sinesio Bittencourt
Dicas
▸ Ionic Market ( market.ionic.io )
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
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
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
Opa! Ainda não acabamos temos
BRINDES
Join at kahoot.it

Mais conteúdo relacionado

Mais procurados

Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
Rafael Neri
 

Mais procurados (20)

Descomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic FrameworkDescomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic Framework
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
 
[Fapan] criando aplicações mobile híbridas com ionic framework
[Fapan] criando aplicações mobile híbridas com ionic framework[Fapan] criando aplicações mobile híbridas com ionic framework
[Fapan] criando aplicações mobile híbridas com ionic framework
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONIC
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoIonic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
 
Ionic
IonicIonic
Ionic
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
Mini curso: Ionic Framework
Mini curso: Ionic FrameworkMini curso: Ionic Framework
Mini curso: Ionic Framework
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emulador
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 

Semelhante a Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}

Semelhante a Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas} (20)

DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
Ionic, um mundo sem retrabalho
Ionic, um mundo sem retrabalhoIonic, um mundo sem retrabalho
Ionic, um mundo sem retrabalho
 
Android Dev Conference 2017 - Automação de Testes na Cloud
Android Dev Conference 2017 - Automação de Testes na CloudAndroid Dev Conference 2017 - Automação de Testes na Cloud
Android Dev Conference 2017 - Automação de Testes na Cloud
 
Latinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jediLatinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jedi
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Desenvolvimento de Aplicações para Android em C# com o MonoDroid
Desenvolvimento de Aplicações para Android em C# com o MonoDroidDesenvolvimento de Aplicações para Android em C# com o MonoDroid
Desenvolvimento de Aplicações para Android em C# com o MonoDroid
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
Desenvolvimento de Aplicações para Android em C# com o MonoDroid
Desenvolvimento de Aplicações para Android em C# com o MonoDroidDesenvolvimento de Aplicações para Android em C# com o MonoDroid
Desenvolvimento de Aplicações para Android em C# com o MonoDroid
 
Front7 React Native
Front7 React NativeFront7 React Native
Front7 React Native
 
Ionic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvelIonic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvel
 
Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + Typ...
Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + Typ...Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + Typ...
Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + Typ...
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
 
Desenvolvimento de aplicativos Móveis com IONIC
Desenvolvimento de aplicativos Móveis com IONICDesenvolvimento de aplicativos Móveis com IONIC
Desenvolvimento de aplicativos Móveis com IONIC
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
 
Meteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobileMeteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobile
 

Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}