SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
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/
sinesio.com.br
Dependências
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.
Mão na Massa!
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!
Ionic framework - Dicas!
▸Use o Ionic StackBlitz  (teste sem preocupar-se com ambiente)
▸https://stackblitz.com
Ionic framework - Dicas!
▸Use o Ionic Playground: (teste sem preocupar-se com ambiente)
▸http://play.ionic.io
Ionic framework - Dicas!
▸Ionic Creator: (Wireframes e estrutura de views em minutos)
▸http://creator.ionic.io
Ionic framework - Dicas!
▸ 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
Ionic framework - 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
▸Você pode facilmente implementar Realtime com o Firebase
▸O Plugin WP-API ( https://wordpress.org/plugins/rest-api/ )
Ionic framework - Dicas!
▸ 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!

Mais conteúdo relacionado

Mais procurados

Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkJoão Gabriel Lima
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
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)Wennder Santos
 
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 RobustoAlamo Saravali
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkEmerson Thompson
 
[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 frameworkJoão Gabriel Lima
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicFelipe Renan Vieira
 
Mini curso: Ionic Framework
Mini curso: Ionic FrameworkMini curso: Ionic Framework
Mini curso: Ionic FrameworkLoiane Groner
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSWaldyr Felix
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDirlei Dionísio
 
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 emuladorAfonso Fernandes
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaLoiane Groner
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React NativeLeonardoPrange
 
Introdução ao Titanium Appcelerator
Introdução ao Titanium AppceleratorIntrodução ao Titanium Appcelerator
Introdução ao Titanium Appceleratordfjorge
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapMayron Cachina
 

Mais procurados (20)

Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic Framework
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e 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
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
[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
 
Ionic
IonicIonic
Ionic
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Mini curso: Ionic Framework
Mini curso: Ionic FrameworkMini curso: Ionic Framework
Mini curso: Ionic Framework
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator TitaniumDesenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
 
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
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
 
Introdução ao Titanium Appcelerator
Introdução ao Titanium AppceleratorIntrodução ao Titanium Appcelerator
Introdução ao Titanium Appcelerator
 
Phonegap
PhonegapPhonegap
Phonegap
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 

Semelhante a Integrando WordPress com Ionic 3.

Ionic framework V2/3 {Aplicações móveis híbridas}
Ionic framework V2/3 {Aplicações móveis híbridas} Ionic framework V2/3 {Aplicações móveis híbridas}
Ionic framework V2/3 {Aplicações móveis híbridas} Sinesio Bittencourt
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2Loiane Groner
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Loiane Groner
 
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...Milton Camara Gomes
 
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 v2Ricardo Netto - MCP, MSP
 
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óvelGustavo Costa
 
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...Marcelo Marques Gonçalves
 
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas RápidasDevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas RápidasAmazon Web Services LATAM
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic FrameworkJunior Abranches
 
Azure Bootcamp - Azure App Service e Function com Linux e NodeJS
Azure Bootcamp - Azure App Service e Function com Linux e NodeJSAzure Bootcamp - Azure App Service e Function com Linux e NodeJS
Azure Bootcamp - Azure App Service e Function com Linux e NodeJSAlexandre Bolzon
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + FirebaseBruno Catão
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014Giovanni Bassi
 

Semelhante a Integrando WordPress com Ionic 3. (20)

Ionic framework V2/3 {Aplicações móveis híbridas}
Ionic framework V2/3 {Aplicações móveis híbridas} Ionic framework V2/3 {Aplicações móveis híbridas}
Ionic framework V2/3 {Aplicações móveis híbridas}
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
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...
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
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
 
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
 
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
 
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...
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas RápidasDevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Azure Bootcamp - Azure App Service e Function com Linux e NodeJS
Azure Bootcamp - Azure App Service e Function com Linux e NodeJSAzure Bootcamp - Azure App Service e Function com Linux e NodeJS
Azure Bootcamp - Azure App Service e Function com Linux e NodeJS
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
 
Pouch db tdc2016
Pouch db tdc2016Pouch db tdc2016
Pouch db tdc2016
 
Pouch db tdc2016
Pouch db tdc2016Pouch db tdc2016
Pouch db tdc2016
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORDRONDINELLYRAMOS1
 

Último (7)

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 

Integrando WordPress com Ionic 3.

  • 1. Ionic framework {Aplicações móveis híbridas} sinesio.com.br
  • 2. ▸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
  • 3. Ionic framework { É um framework para desenvolvimento de aplicações híbridas usando HTML5 } sinesio.com.br
  • 4. “É 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
  • 5. ▸ 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?
  • 6. ▸ 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:
  • 7. ▸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
  • 8. ▸ 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
  • 9. ▸ 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
  • 10. ▸ 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
  • 11. ▸ 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
  • 12. 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/
  • 14. 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 )
  • 15. Plugins populares do Cordova distribuídos na lib do Ionic ▸ CAMERA ▸ TOUCH ID ▸ OAUTH
  • 16. Plugins populares do Cordova distribuídos na lib do Ionic ▸ PUSH NOTIFICATIONS ▸ GEOLOCATION ▸ PROGRESSINDICATOR http://ngcordova.com/docs/plugins/
  • 17. 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.
  • 19. 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
  • 20.
  • 21.
  • 22. Executando uma Aplicação no IONIC Executar no browser ▸ionic serve ▸ionic serve —lab
  • 23. Ionic View O Jeito Fácil de Testar Aplicativos Ionic ▸ Baixe o App para o celular em http://view.ionic.io/
  • 25. Ionic View via Terminal ▸ ionic login ▸ ionic link ▸ ionic upload
  • 26. 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
  • 27. O Ionic oferece diversos elementos CSS e Diretivas AngularJS para uso na UI:
  • 31. Ionic framework - Dicas! ▸Use o Ionic StackBlitz  (teste sem preocupar-se com ambiente) ▸https://stackblitz.com
  • 32. Ionic framework - Dicas! ▸Use o Ionic Playground: (teste sem preocupar-se com ambiente) ▸http://play.ionic.io
  • 33. Ionic framework - Dicas! ▸Ionic Creator: (Wireframes e estrutura de views em minutos) ▸http://creator.ionic.io
  • 34. Ionic framework - Dicas! ▸ 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
  • 35. Ionic framework - 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 ▸Você pode facilmente implementar Realtime com o Firebase ▸O Plugin WP-API ( https://wordpress.org/plugins/rest-api/ )
  • 36. Ionic framework - Dicas! ▸ Ionic Market ( market.ionic.io )
  • 37. 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/
  • 38. ▸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!