Ionic framework V2/3 {Aplicações móveis híbridas}
Transferir como PPTX, PDF0 gostou85 visualizações
O documento fornece informações sobre o framework Ionic para desenvolvimento de aplicações móveis híbridas. Resume que o Ionic permite construir apps usando HTML5, AngularJS e componentes nativos, além de listar recursos, versões e dicas sobre o framework.
![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]](https://image.slidesharecdn.com/sinesiobittencourt-ionicp-170915122300/85/Ionic-framework-V2-3-Aplicacoes-moveis-hibridas-19-320.jpg)
Ionic framework V2/3 {Aplicações móveis híbridas}
- 1. Ionic framework {Aplicações móveis híbridas} Sinesio Bittencourt contato@sinesio.com.br
- 2. 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
- 3. contato@sinesio.com.br {É um framework para desenvolvimento de aplicações híbridas usando HTML5} Ionic framework Sinesio Bittencourt
- 4. 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
- 5. 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
- 6. 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:
- 7. 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.
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 13. 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
- 14. contato@sinesio.com.br UE PRECISO APRENDER PARA DESENVOLVER COM ION Sinesio Bittencourt Componente ngCordova
- 15. contato@sinesio.com.br Sinesio Bittencourt CAMERA TOUCH ID GEOLOCATION PUSH NOTIFICATION OAUTH Plugins populares do Cordova distribuídos na lib do Ionic:
- 16. 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
- 18. Mão na Massa!
- 19. 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]
- 20. contato@sinesio.com.br Sinesio Bittencourt ▸ ionic start minhaApp —v2 ▸ ionic start
- 21. 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)
- 22. contato@sinesio.com.br ▸ ionic serve ▸ ionic serve —lab Executando uma Aplicação no IONIC Sinesio Bittencourt Executar no browser
- 25. 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/
- 26. contato@sinesio.com.br Sinesio Bittencourt Ionic View ▸ Baixe o App para o celular em http://view.ionic.io/
- 27. contato@sinesio.com.br Sinesio Bittencourt Ionic View ▸ https://apps.ionic.io
- 28. contato@sinesio.com.br Sinesio Bittencourt O Jeito Fácil de Testar Aplicativos Ionic Ionic View ▸ ionic login ▸ ionic link ▸ ionic upload
- 29. 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
- 30. contato@sinesio.com.br Sinesio Bittencourt O Ionic oferece diversos elementos CSS e Diretivas AngularJS para uso na UI:
- 31. contato@sinesio.com.br Sinesio Bittencourt Elementos de UI Ionic framework {Aplicações móveis híbridas}
- 32. contato@sinesio.com.br Sinesio Bittencourt Elementos de UI ▸ https://ionicframework.com/docs/api/components/icon/Icon/
- 33. contato@sinesio.com.br Sinesio Bittencourt ▸ https://ionicframework.com/docs/components/#checkbox
- 34. contato@sinesio.com.br Sinesio Bittencourt ▸ https://ionicframework.com/docs/components
- 35. contato@sinesio.com.br Sinesio Bittencourt ▸ https://ionicframework.com/docs/components
- 36. contato@sinesio.com.br Sinesio Bittencourt ▸ https://ionicframework.com/docs/components
- 37. contato@sinesio.com.br Sinesio Bittencourt Dicas! Ionic framework {Aplicações móveis híbridas}
- 38. contato@sinesio.com.br Sinesio Bittencourt Dicas ▸Use o Ionic StackBlitz (teste sem preocupar-se com ambiente) ▸https://stackblitz.com
- 39. contato@sinesio.com.br Sinesio Bittencourt Dicas ▸Use o Ionic Playground: (teste sem preocupar-se com ambiente) ▸http://play.ionic.io
- 40. contato@sinesio.com.br Sinesio Bittencourt Dicas ▸Ionic Creator: (Wireframes e estrutura de views em minutos) ▸http://creator.ionic.io
- 41. contato@sinesio.com.br Sinesio Bittencourt Dicas ▸ Ionic Market ( market.ionic.io )
- 42. 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
- 43. 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
- 44. 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
- 45. Opa! Ainda não acabamos temos BRINDES Join at kahoot.it