Integrando WordPress com Ionic 3.
1 gostou1,054 visualizações
O Ionic Framework é uma plataforma open-source para o desenvolvimento de aplicativos híbridos utilizando HTML5, com suporte a múltiplas plataformas como iOS e Android. Oferece uma interface rica e otimizada, bibliotecas conhecidas como Angular e Apache Cordova, além de uma vasta comunidade e documentação. O documento detalha suas versões, prós e contras, pré-requisitos, dicas de uso, e informações adicionais sobre plugins e ferramentas de teste.
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.
- 18. Mão na Massa!
- 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
- 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:
- 28. Ionic framework Elementos de 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!