Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic

1,319 views

Published on

Nesse projeto vamos ver que um aplicativo híbrido é uma página HTML como qualquer outra tendo apenas que ser otimizada para caber em telas pequenas de maneira responsiva e com componentes otimizados para Touch Screen, para isso usamos bibliotecas CSS e JS como o Materialize, Bootstrap, entre várias outras.

A nossa página HTML também deve se comportar como um aplicativo móvel, para isso o nosso 'site' deve ser um SPA (Single Page Application), ou seja, uma única página HTML com uma área reservada para a renderização das views que serão injetadas via AJAX, para isso podemos usar bibliotecas como JQuery para nos ajudar com o AJAX e a manipulação do DOM, mas é preferível usar frameworks front-end como AngularJS, ReactJS, entre outros que nos entregam uma sistema de SPA pronto e organizam nosso código com o pattern MVC, eliminando o código spaghetti.

Veremos tbm que essa página precisa ter as views injetadas com transições animadas entre telas que devem ser feitas feitas CSS que usa aceleração da CPU por questões de performance.

Além de tudo isso, precisamos ter acesso às APIs nativas dos devices, pra isso precisamos integrar nossa página HTML com o Cordova, adicionar plugins e usar os eventos que ele emite pra nos ajudar no ciclo-de-vida da nossa aplicação. Vamos entender a diferença entre PhoneGap e Cordova e que o nosso aplicativo vai rodar embarcado em uma WebView, o que realmente é uma WebView e que essa é apenas uma Activity e que segue o mesmo ciclo-de-vida de qualquer outra Activity.

Veremos também que essa página HTML precisa ter elementos UI mínimos e obrigatórios para qualquer aplicativo móvel. Todo aplicativo deve ter uma barra de status que combine com o design utilizado, uma barra de navegação fixa com um título e um botão voltar, a área do conteúdo e um rodapé (opcional) e que para fazermos isso contamos com a ajuda de bibliotecas com o Materialize, Bootstrap, JQuery Mobile, etc...

Antes de terminar vamos ver com um bom ícone e uma splash screen são importantes para um aplicativo móvel e que temos dezenas de tamanhos e resoluções de arquivos para criar, exportar e registrar no nosso XML de configurações e como podemos usar o Ionic Resources pra fazer esse trabalho pesado pra nós.

E depois como emular tudo isso, como fazer Debug e identificar erros, como visualizar nos devices e depois fazer o Build e publicar nas lojas de aplicativos móveis

Como se não bastasse temos que levar em consideração a experiência do usuário em cada plataforma, veremos como o usuário do iPhone espera que os elementos do UI sejam e como o aplicativo deve se comportar e como os dos Android esperam, e entenderemos que o Material Design jamais deve ser entregue no IOS e que precisamos de um UI agnóstico de plataforma.

Veremos como tudo isso fica muito fácil e simples com o Ionic Framework que toma o controle de tudo isso e nos permite ser muito mais produtivo

Published in: Software
  • Be the first to comment

Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic

  1. 1. Desenvolvimento de Aplicativos Móveis Abordagem Híbrida: Aproveitando seus conhecimentos WEB junto com PhoneGap, Cordova, Angular e com foco no Ionic
  2. 2. Felipe Blini - Tecnólogo em Desenvolvimento de Sistemas para Internet - Formado em 2006 pela Unoeste - Presidente Prudente/SP - Desenvolvendo Softwares desde 2004 - Experiência como dono de agência de TI de 2006 a 2009 - Experiência em uma Multinacional e no Governo - Experiência em diversas startups, sendo uma premiada internacionalmente - Experiência internacional no Chile, Alemanha, Espanha, Hungria e
  3. 3. Híbrido?
  4. 4. Aplicativos Híbridos = Aplicativo Web com Acesso Nativo
  5. 5. Tipos de Aplicativos Móveis - Aplicativos Nativos - Online - Offline - HTML5 (Web App) - Site normal - acessa usando uma url - Progressive Web Apps - Web App Instalável - Aplicativos Híbridos - Site normal empacotado pelo Cordova, roda em uma WebView com acesso nativo a funcionalidades do SO
  6. 6. Nativo, Web App ou Híbrido?
  7. 7. Fonte (imagem): http://blog.bravi.com.br/comparativo-as-diferencas-entre-desenvolvimento-nativo-hibrido-e-web-app/ WEB APP Parcial
  8. 8. Nativo (1 plataforma) - Aprendizagem - Investimento - Prazo Nativo (+ de 1 plataforma)- Manutenção - Versionamento - Evolução - Detecção e Correção bugs - Add e Remover Funcionalidades Híbrido - Aprendizagem (você já sabe) - Investimento - Prazo - Mão de Obra - Write once, run anywhere - Performance??? Web App - Engajamento - Desoretencioso - PWA
  9. 9. Aplicativos híbridos são lentos? http://venturebeat.com/2012/12/13/facebook-android/#s:fb-android-3
  10. 10. Nop!
  11. 11. Porque HTML5? - Importância da web - Principal tecnologia - Mais popular - APIs e recursos mobile Estilizar Inteligência
  12. 12. A WeLoveStarWars - Cliente: Loja física especializada em intens da série Star Wars - Querem um app que será instalado em tablets Android espalhados pela loja - Usuários do app: visitantes da loja que querem conhecer mais sobre todos os filmes do Star Wars: - Lista dos filmes - Para cada filme: - Personagens - Veículos
  13. 13. Qual seria a melhor solução? - Não acessa recursos nativo - Não precisa de ultra performance - Deve ser instalado nativamente em tablets - Rodar apenas no Android - Prazo apertado - Orçamento baixo - Dados disponíveis em uma api web - Web App instalável para Android (PhoneGap) Requisitos: Resposta:
  14. 14. Workflow - Aplicativo Móvel 1)Mockup das Telas 2)Protótipo 3)Desenvolvimento 4)Testes no Browser* 5)Testes em Emuladores 6)Testes em Devices 7)Entrega (instalar nos tablets)
  15. 15. Workflow de Teste App PhoneGap 1) Teste o tanto que der no navegador (ambiente limitado) 2) Teste no PhoneGap Developer App 3) Use PhoneGap Build online e instale o app no device Debug - Chrome e Safari - Weinre (http://docs.phonegap.com/references/developer-app/debugging)
  16. 16. Aparência e Comportamento de App - Aplicativos móveis têm que ter - Navbar - Statusbar customizada - Botão voltar - Área de renderização de conteúdo - Ícone e Splash Screen - Componentes UI otimizados para Touch Screen - Aplicativos móveis são - SPA (Single Page Aplications) com transições entre telas - Aplicativos móveis híbridos - Respeitam essas regras
  17. 17. + Desenvolver o Protótipo PhoneGap Build
  18. 18. Mockup Pencil (desktop - free) - Ionic Creator (web - freemium) - Moqup (web - freemium)
  19. 19. Testar e Entregar PhoneGap Build
  20. 20. Mão na massa - Protótipo testar - empacotar - instalar - entregar
  21. 21. Fixando o Aprendizado 1 1)Em um editor de texto, crie o projeto e estrutura de pastas usada] 2)Crie um arquivo index.html com a estrutura mostrada em estrutura.txt 3)Adicione as marcações HTML do index.html de exemplo 4)Referencie as bibliotecas de terceiros da pasta vendors 5)Instale o PhoneGap Desktop na sua máquina 6)Crie um novo projeto PhoneGap e copie os arquivos na pasta www 7)Rode o servidor do PhoneGap
  22. 22. O cliente gostou! Bora desenvolver, mas espera! Mundo WEB != Mundo Mobile Estude Mobile e prepare-se Mundo Mobile Híbrido == Mundo Mobile Mesmo ambiente de desenvolvimento, UX deve ser a mesma Mundo do Carro Híbrido == Mundo do Carro Normal O ambiente de desenvolvimento é o mesmo, mesma UX
  23. 23. Ambiente de Desenvolvimento Mobile
  24. 24. - Java Development Kit (JDK) - Android SDK - SDK Packages - Android Studio - Genymotion - MAC e um device com iOS 8 - iOS SDK - Xcode - Windows 8 Pro 64 bits - WP8 - Windows Phone SDK - Visual Studio 2012 Ambiente de Desenvolvimento Mobile
  25. 25. Preparando o Ambiente para Desenvolvimento Android https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html - Java Development Kit (JDK) - Android SDK - Android Studio - Adicionar o Pacote SDK para a versão da API desejada - Genymotion (alternativa para o emulador do Android Studio) - Configurar Variáveis de Ambiente JAVA_HOME e ANDROID_HOME e diretórios 'tools' e 'platform-tools' do Android SDK - java -version
  26. 26. Preparando o Ambiente para Desenvolvimento iOS https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html - Mac rodando OS X 10.9 ou superior - iOS 8 SDK (incluído OS X) - Xcode 6.0 ou superior (gratuito) - iPhone 4s ou superior ou iPad 3 ou iPod Touch geração 5 - Publicar na App Store: exige Xcode e uma conta de desenvolvedor que custa $99 anuais.
  27. 27. Preparando o Ambiente para Desenvolvimento Windows Phone https://cordova.apache.org/docs/en/latest/guide/platforms/wp8/index.html - Windows 8.1 ou superior, na versão Pro 64 bits. - Visual Studio - Para emular: processador Intel moderno com suporte a Hyper-V; - Windows Phone 8 registrado na SDK e intalar o app pelo Desktop - Publicar na WP Store: via Web, exige uma conta de desenvolvedor, custa $19 por ano.
  28. 28. Mão na massa: Integrar o app à API Web PhoneGap CLI - $ phonegap create - $ phonegap serve - $ phonegap plugin - $ phonegap platform - $ phonegap build - $ phonegap run - $ phonegap run --emulator - $ phonegap emulate
  29. 29. Fixando o Aprendizado 2 1) Configure o Ambiente Java e Android e o teste o ambiente 2) Instale o Node e o NPM e teste a instalação 3) Instale e teste o Git 4) Instale o PhoneGap CLI e teste 5) Crie um novo projeto PhoneGap através do CLI e rode e visualize no Browser 6) Abra o projeto em um editor de texto e teste o Livereload do PhoneGap 7) Pare o servidor, exclua o conteúdo da pasta www e transfira os arquivos do projeto 8) Exclua os plugins e plataformas adicionados pelo PhoneGap e adicione o plugin whitelist e a plataforma Browser (sempre registrando no config.xml) 9) Integre o código à API web (cole o codigo js e comente onde a api está sendo consultada)
  30. 30. Nova Funcionalidade para a WeLoveStarWars - Cliente gostou e deseja agora um leitor de QR Code para ler o código de baras dos itens e mostrar uma descrição de cada personagem à venda na loja. App em fullscreen e apenas modo retrato Requisitos Funcionais: - O cliente vai gerar QR Codes com os IDs dos personagens que estão no BD e colar nos itens - Os clientes da loja vão levar esses items até o tablet, escolher a opção ‘escanear personagem’ - O app vai ler o QR Code e abrir uma tela com a descrição do personagem
  31. 31. Requisitos - Acessar a funcionalidade nativa de leitor de código de barras - Criar nova View e novo código consultando a API web - Apenas para Android e apenas para os tablets da loja Considerações: - Funcionalidade simples e o Cordova tem um plugin pronto - Já temos o projeto integrado no Cordova - Nosso código já está bem complexo com apenas 2 views
  32. 32. Qual seria a melhor solução?? - Continuar no híbrido? - Partir pro nativo?
  33. 33. - Aplicativo Híbrido - SPA com Angular - Acesso nativo com o Cordova - Gerenciar as dependências com Bower e Gulp ou Grunt
  34. 34. Aplicativo Híbrido - Relembrando o Conceito Código web rodando de maneira embarcada dentro de uma plataforma nativa, COM ACESSO a recursos e funcionalidades nativas. O que a gente vai precisar? - Acesso às APIs nativas - Cordova - Acesso à API Web - $http Angular - Sistema de SPA - Angular - Aparência de app Android - Materialize
  35. 35. Acesso às APIs nativas: Obrigado Cordova! https://cordova.apache.org/docs
  36. 36. PhoneGap e Cordova - História e Eliminando Confusão Código Open-Source Produto e Serviços 1 dos serviços do PhoneGap PhoneGap: Distribuição Open Source do Cordova (http://phonegap.com)
  37. 37. 1 código-fonte Rodando em todas plataformas Write Once, Run Anywhere Cordova
  38. 38. Cordova: Arquitetura
  39. 39. Cordova: Arquitetura > Webview - Componente Nativo - Navegador enxuto (sem interface) - Tem acesso as APIs nativas do device - Invólucro da nossa app - Cordova app = são Embedding WebViews - Cordova cria e chama uma nova WebView com poderes especiais para cada plataforma - Android WebViews
  40. 40. Cordova: Arquitetura > Webview Motor de Renderização de HTML
  41. 41. Cordova Mistura tecnologias web (JavaScript) com componentes nativos (WebView) que pode acessar APIs do nível do device. Acesso nativo ao device com JavaScript: - Battery Status - Camera - Contacts - File - Geolocation - Media Capture - Vibration - Network Information - etc JavaScript Cordova Interpretador Código Nativo (Ponte)
  42. 42. Cordova: Arquitetura > Web App - Onde o código reside - Criado como uma página web - Executado dentro de uma WebView - config.xml
  43. 43. Cordova: Arquitetura > Plugins - Parte integral do Ecossistema do Cordova - Encapsula código JavaScript que acessa as APIs nativas - Interface de comunicação entre o Cordova e componentes nativos - Permite invocar código nativo através de JavaScript - Provê plugins principais e vários outros criados pela comunidade (https://cordova.apache.org/plugins/) - Pode criar seus próprios plugins - Todo plugin deve ser explicitamente adicionado no projeto
  44. 44. Cordova: API
  45. 45. Ciclo de Vida da Aplicação Cordova - Igual às Activities Lifecycle - Apps contém diversas Activities - Webview: é um activity
  46. 46. Activity
  47. 47. O Arquivo config.xml Configurações globais do app e para plataformas específicas - Nome do app, ícone, splash screen, autor, descriçao do app - Permissoes do app, versões das plataformas - Preferências (globais ou por plataforma): - Orientação, fullscreen, cor de fundo, overscroll. - <preference name=”Orientation” value=”portrait” /> (global) - <platform name=”android”> <preference name=”Overscroll” value=”false” /> </platform http://docs.build.phonegap.com/en_US/configuring_preferences.md.html (configurando preferências)
  48. 48. O Arquivo config.xml > ícone e splash screen - Criar os arquivos e apontar o caminho no config.xml - <icon src=”resources/icon.png” width=”” height=”” /> - <splash src=”resources/spash.png” width=”” height=”” /> - Adicionar plugin Splash Screen - <preference name="SplashScreenDelay" value="2000" /> - <preference name="FadeSplashScreenDuration" value="2000" /> - Criar, exportar e registrar TODAS imagens para as diversas plataformas,
  49. 49. Ícones e Splash Screen > Arquivo base icon.png splash.psd
  50. 50. Mão na massa: Ionic Resources
  51. 51. Fixando o aprendizado 3 - Ionic Resources 1)Exclua os icones e splash do config.xml 2)Instale o Ionic 3)Converta o projeto para um projeto Ionic 4)Exclua a pasta www/res 5)Crie a pasta ./resources 6)Crie os arquivos base icon.png e splash.psd 7)Gere os arquivos com o Ionic Resources
  52. 52. O Arquivo config.xml > engines - Plataformas que o app dá suporte - Controla a pasta platforms - Útil para outros desenvolvedores da equipe - Importante para versionadores como o Git (não deve ser versionada) - <engine name=”android” spec=”5.0.0” /> - <engine name=”ios” spec=”4.0.1” /> $ cordova platform add android --save $ cordova prepare
  53. 53. O Arquivo config.xml > plugins - Plugins que o app depende - Controla a pasta plugins - Útil para outros desenvolvedores da equipe - Importante para versionadores como o Git (não deve ser versionada) - <plugin name=”cordova-plugin-whitelist” spec=”~1.2.2” /> $ cordova plugin add cordova-plugin-whitelist --save $ cordova plugin rm cordova-plugin-whitelist --save $ cordova plugin ls
  54. 54. Mais sobre o Cordova - Plataformas https://cordova.apache.org/docs “É muito importante conhecer bem como funciona o Cordova na plataforma que vc está desenvolvendo”
  55. 55. Angular - O Framework Font-end da Google - Muito mais que um simples SPA - Framework Front-end Completo - Manipulação do DOM (foco na RN) - Separação de Interesses no Front-end (MVC), testes de unidades - Concistência entre a Visão e o Modelo - Injeção de Dependências - Services e Factory - Diretivas
  56. 56. Porque Angular? - Google e Microsoft - Comunidade - Curva de Aprendizado - MVC feito do jeito certo - Pronto pra testes de unidade - Integração com bibliotecas - Material Design (Angular Material) - Bootstrap (angular.bootstrap) - Google Maps (NgMap)
  57. 57. Porque Angular?
  58. 58. Separação de Interesses
  59. 59. Angular: MVC Modelo = objeto $scope Visão = HTML Controlador = Angular Controller Service/Factory Dados Trata os Dados
  60. 60. Angular: Controller $scope busca os dados em um -> Factory -> Controller manipula e envia -> View onde o conteúdo (dados) e injetado Executado apenas quando necessário $scope = two-way data binding Caminho inverso: View recebe dados do usuário ($scope) -> Controller valida e trata -> envia para um Service (Factory)
  61. 61. Angular: View HTML, recebe dados do usuário e é “colada” (binding) com o Controller através do objeto $scope - Habitat das Diretivas do Angular
  62. 62. Angular: Model e Angular Expression (AE) Model é o objeto $scope: a “cola” entre a view e o controller - Two-way Data Binding - POJO Angular Expression (AE) é representada por {{ }}, então: No Controller: $scope.nomeFruta = “banana”; No HTML: <p>Fruta: {{ nomeFruta }}</p>
  63. 63. Angular: Directives - HTML (atributos ng-*) - ng-app - ng-model - ng-controller - ng-repeat - filter
  64. 64. Demo
  65. 65. Angular: Directives - HTML (atributos ng-*) - ng-hide - ng-show - ng-if - ng-click, ng-blur, ng-mouseover…. (e todos os outros eventos do JavaScript)
  66. 66. Demo
  67. 67. Angular: Factory modulo.factory('myFactory', function() { // factory sempre retorna um objeto // pode executar código antes var someText = “How are you?”; return { sayHello : function(name) { return "Hi " + name + "!" + someText; } } });
  68. 68. Angular: Services app.service('myService', function() { // service é um objeto que quando injetado é instanciado implicitamente com a palavra-chave new this.sayHello = function(name) { return "Hi " + name + "!"; }; }); Serviços prontos pra uso: $http, $timeout, $interval, $log ... Pedaços de lógica de negócios reutilizáveis por toda a aplicação
  69. 69. O Serviço $http - Injetado como qualquer outro artefato do Angular - Recebe como parâmetro um objeto: - { method: método utilizado, pode ser GET, POST, PUT ou DELETE url: endereço do recurso acessado data: objeto no qual cada propriedade será um parâmetro na requisição } - $http({method: 'GET', url: '/filmes/'}); - $http.get(‘url’) e $http.post(‘url’)
  70. 70. O Serviço $http não retorna dados O que seria isso: $http({method: 'GET', url: '/filmes'}, function(resposta) { var dados = resposta; // dados é um array pronto pra ser usado }); É isso: var dados = $http({method: 'GET', url: '/filmes'}); console.log(dados); // exibe undefined A variável dados é uma promise e tem a promessa de conter dados em um futuro próximo, assim podemos seguir em frente sabendo que ele vai cumprir a promessa
  71. 71. O Padrão Promise Como na vida real, ao receber uma promessa de alguém, seguimos nossa vida sabendo que ela pode ser cumprida ou não, por isso a promise tem estados: - Fullfiled: a promessa foi cumprida - Rejected: promessa rejeitada (fudeu, a pessoa disse que não vai cumprir) - Failed: nem cumprida e nem rejeitada (fudeu, deu um erro e a pessoa morreu) Promises têm um método then() e catch();
  72. 72. Funções Catch, Success e Error do $http promise.success(function(data, status, headers, config) {}) .error(function(statusText, status, headers, config) {}); Fullfiled Rejected ou Failed var promise = $http({method: 'GET', url: '/filmes'}); promise.then(function() {}, function() {}); Fullfiled Rejected ou Failed promise.then(function() {}).then(function() {}).then(function() {}).catch(function() {}); Fullfiled Fullfiled Rejected ou Failed
  73. 73. Demo
  74. 74. ngAnimate - Adiciona ou remove classes pré-definidas para um conjunto de diretivas, sendo elas: - ng-show - ng-hide - ng-class - ng-view - ng-include - ng-repeat - ng-if - ng-switch https://docs.angularjs.org/api/ngAnimate http://www.w3schools.com/angular/angular_animations.asp Adiciona ou remove a classe ng-hide Adiciona a classe ng-enter quanto entra no DOM E a classe ng-leave quanto sai no DOM Use essa funcionalidade para adicionar propriedades de animação no CSS
  75. 75. Angular: Custom Directives modulo.directive(“minhaDiretiva”, function() { return { templateUrl: “estrelas.html”, restrict: [“ACEM”], link: function(scope, iElement, iAttrs) { } } }); “A” <div minha-diretiva /> “E” <minha-diretiva /> “C” <div class=”minha-diretiva”> “M” <!-- minha-diretiva --> https://docs.angularjs.org/guide/directive
  76. 76. Demo
  77. 77. App Mobile sem CDN, por favor! - Entrar nos sites de cada biblioteca - Fazer download - Descompactar - Adicionar em uma pasta dentro do projeto - Referenciar no HTML - Identificar dependências e adicioná-las também - E depois pra minificar e juntar como o nosso JavaScript’s e CSSs??
  78. 78. - Toda tarefa repetitiva e sem criatividade, robôs podem fazer pra nós Gulp 1) Define tarefas com gulp.task() 2) Procura por mudanças em arquivos com gulp.watch() 3) Abre arquivos/diretório com gulp.src() 4) Cospe arquivos/diretorios com gulp.dest() Usa sequências de pipe() O Ionic usa o Gulp!
  79. 79. Com ajuda do Bower 1) Instalar e remover dependência com o Bower 2) Toda vez que o bower.json mudar, atualizar as referências no HTML 3) Separar arquivos de Desenvolvimento dos de Deploy 4) Integrar essas mudanças com o Livereload do Ionic Serve a) Sempre que alterar um arquivo Dev fazer o deploy na hora 5) Achar todos arquivos JavaScript referenciados no HTML a) Minificar (Uglify) b) Juntar em 1 arquivo só c) Salvar em algum lugar
  80. 80. Demo
  81. 81. Rotas Conectam Views e Controllers através de URLs e/ou Estados - Rota padrão do Angular: ngRoute - Organizadas por URLs - A View é sempre injetada no mesmo lugar pré-definido - Ionic usa uma rota mais flexível: UI-Router - Organizada por states da aplicação e opcionalmente por URLl, e comportamentos - Pode conter mais de 1 view na mesma rota que são injetadas em lugares distintos - Um state é como a UI se parece e o que ela está fazendo em um certo momento
  82. 82. UI Router - Padrão do Ionic UI-Router is a client-side router for single page web applications. Roteador client-side atualiza a URL do browser assim que o cliente navega pela SPA e mapeia funcionalidades em states e URLs (opcional)
  83. 83. UI Router - Trabalha com states <!-- na index.html --> <body ng-controller="MainCtrl"> <section ui-view></section> </body> // no arquivo de coniguração de rotas $stateProvider.state('contacts', { template: '<h1>My Contacts</h1>' }) Templates são injetados nos estados pais (<ui-view>). Um state é ativado com o comando $state.go() , em um links dentro de ui-sref=”” ou navegando pra uma url com um estado associado Top level state
  84. 84. UI Router Assinando um Controller a um template: $stateProvider.state('contacts', { template: ..., Controller: function($scope) { $scope.title = ‘Contacts’ } }) Alternativamente pode-se adicionar a sintaxe ‘controller as’ $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', controllerAs: 'contact' }) $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl as contact' }) ou
  85. 85. UI Router > Resolve Objects e Custom Datas - Data: Injeta no Controller dados específicos do state - Resolve: Resolve dependências (objetos) e injeta no Controller - Devem ser resolvidos - bloqueiam acesso $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', resolve: { autentica: function($http){ // $http returns a promise for the url data return $http({method: 'GET', url: '/someUrl'}); } }, data: { customData1: 44 } }) controller: function($scope, $state, autentica) { $scope.autenticado = autentica.data; console.log($state.current.data.customData1) }
  86. 86. UI Router > Eventos onEnter e onExit $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', resolve: { autentica: function($http){ // $http returns a promise for the url data return $http({method: 'GET', url: '/someUrl'}); } } onEnter: function(title){ if(autentica.data){ ... do something ... } }, onExit: function(title){ if(autentica.data){ ... do something ... } } }) Outros eventos:https://github.com/angular-ui/ui-router/wiki#state-change-events - Chamados antes de entrar ou sair de um state - Têm acesso a todas às dependências do Resolve
  87. 87. UI Router > Nested States e Nested Views States podem ser aninhados com outros states .state('contacts.list', {}) ou parent: 'contacts' O state list é filho do state contacts e herda apenas os resolvers e custom datas http://goo.gl/kOG3je. Quando o list é ativado o contacts é implicitamente ativado também <ui-view> <ui-view> Template da list Template da contacts index Contacts.list é ativado
  88. 88. UI Router > Abstract States Usado nos starters Sidemenu e Tabs do Ionic Ativados implicitamente quando quando ativamos filhos Não podem ser ativados sozinhos Úteis para qualquer tipo de herança entre todos os filhos: - Templates - Resolvers - Custom Datas - Controller - $scope
  89. 89. UI Router > Multiple Named Views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views <!-- index.html --> <body> <div ui-view="filters"></div> <div ui-view="tabledata"></div> <div ui-view="graph"></div> </body> $stateProvider .state('report',{ views: { 'filters': { templateUrl: 'report-filters.html',controller: ‘RCtrl’ }, 'tabledata': { templateUrl: 'report-table.html', controller: ‘TRCtrl’ }, 'graph': { templateUrl: 'report-graph.html', controller: ‘GRCtrl’ } } }); Usado no starter Tabs do Ionic
  90. 90. UI Router > URL Routing Ideal para passar parâmetros: $stateProvider .state('contacts.detail', { url: "/contacts/:contactId", ou url: "/contacts/{contactId}" e ainda url: "/contacts/{contactId:int}" templateUrl: 'contacts.detail.html', controller: function ($stateParams) { // If we got here from a url of /contacts/42 expect($stateParams).toBe({contactId: "42"}); } }) https://github.com/angular-ui/ui-router/wiki/URL-Routing
  91. 91. UI Router > URL Routing e Nested Views juntos Combina a URL do filho com a do pai $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '/list', ... }); https://github.com/angular-ui/ui-router/wiki/URL-Routing 'contacts' state é acessado com "/contacts" 'contacts.list' state é acessado com "/contacts/list".
  92. 92. UI Router > Organizando States var contactState = { name: 'contacts', url: "/contacts/:contactId" templateUrl: 'contacts.detail.html', Controller: ContactController }; $stateProvider.state(contactState);
  93. 93. UI Router > Principais Componentes e Documentação $state / $stateProvider: Gerencia as definições e comportamentos dos states Diretiva ui-sref: Equivalente ao href ou ng-href dos elementos <a /> com excessão que o valor será o nome de um state. Adiciona implicitamente o href de acordo com a URL associada no state. <ui-view />: Renderiza a view definida no state atual. Pode se dizer que são Placeholders. - Ionic: <ion-nav-view /> - Angular (ngRoute): <ngview /> $urlRouter / $urlRouterProvider: Gerencia a lista de rotas e regras de rotas procurando em todas qual é a que combina com a que está sendo requisitada. Executa sempre que há uma mudança de state. https://github.com/angular-ui/ui-router/wiki/The-Components (descrição dos componentes) http://angular-ui.github.io/ui-router/site/#/api/ui.router (documentação do UI Router)
  94. 94. Angular Methods: Run e Config - Config é executado antes de tudo (um ótimo lugar para configurar rotas) - Run é executado depois do config() e antes do resto
  95. 95. Mão na massa: Adicionando Rotas
  96. 96. Opções de Desenvolvimento com Cordova 1) PhoneGap - Instale o PhoneGap - Cria as telas HTML - Referencia o script do cordova <script src=’cordava.js’ /> - Criar seus próprios CSS e JS - Adiciona plugins do Cordova no JS - Faz o build online no PhoneGap Build ou pela linha de comando 1.2) Adicione bibliotecas 2) Ou use Frameworks
  97. 97. Alternativas para Desenvolvimento Nativo com JS http://felipeblini.net/Desenvolvimento-de-Aplicativos-Moveis-com-Javascript-Ionic-React-Native-e-NativeScript
  98. 98. UI em Aplicativos Híbridos Multi-plataforma Platform Agnostic!
  99. 99. http://ionicframework.com Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps. Built with Sass, optimized for AngularJS.
  100. 100. Ambiente Necessário
  101. 101. - Escrito em cima do Angular (MVC, SPA, $http, ID, etc) - Performance (animações UI) - Componentes visuais focados em mobile e touch screen - Documentação completa - Suporte da comunidade e individual para empresas - Muito fácil de aprender e começar
  102. 102. Ionic Bundle ionic.bundle.js Concatenação do - ionic.js - Angular.js - Angular-animate.js - Angular-sanitize.js - Angular-ui-router.js
  103. 103. - Ecossistema (Ionic Platform) - Ionic View - Ionic Creator - Ionic Market - Ionic CLI - Cordova CLI
  104. 104. - Sistema de Grid em FlexBox - Botões - Listas - Cards - Ícones (http://ionicframework.com/docs/v2/ionicons/) - Formulários e muitos outros... - Disponíveis em SASShttp://ionicframework.com/docs/components/ Componentes do Ionic
  105. 105. Componentes do Ionic <ul class="list"> <li class="item"> … </li> </ul> <ion-list> <ion-item> … </ion-item> </ion-list> ou http://ionicframework.com/docs/components/ São diretivas criadas com Angular, como qualquer outra
  106. 106. Diretivas de navegação <ion-header-bar>: Header fixo. Título e dois botões <ion-nav-button> <ion-nav-bar>: Navegação no header. Ela que muda o título da <ion-nav-bar> e cuida dos headers das Views injetadas. Define o(s) <ion-nav-button> do header <ion-nav-button>: Adiciona-se 2 na <ion-nav-bar>. O primeiro vai pra esquerda e o segundo pra direita (back-button e toggle menu por exemplo) <ion-nav-back-button>: Botão voltar. Deve estar dentro da <ion-nav-bar> <ion-refresher> Atualiza o <ion-content > quando ocorre um overscroll <ion-infinite-scroll> Atualia o <ion-content> quando o limite de scroll for atingido
  107. 107. <ion-pane>: Similar a uma <div> <ion-view>: Define uma nova View. Será injetado no <ion-nav-view> - hide-nav-bar: Propriedade da <ion-view> que esconde ou não a <ion-nav-bar> - hide-back-button: Propriedade da <ion-view> que esconde ou não o <ion-nav-back- button> <ion-nav-view>: Extensão da <ui-view> do UI Router. Semelhante ao <ng-view> do Angular. Onde o conteúdo da <ion-view> é injetado <ion-content>: Conteúdo da View. Gerencia conteúdos. Possui uma classe CSS "has-header" que é adicionada automaticamente caso exista uma <ion-header-bar> por perto Diretivas de navegação
  108. 108. Nosso primeiro app com Ionic - Instalando o Ionic - Ionic CLI - Scaffolding de Templates - Códigos Boilerplates do Ionic - Gerenciador de aps (https://apps.ionic.io/apps) - O Ionic View (http://docs.ionic.io/tools/view/) - O Ionic Creator (https://creator.ionic.io)
  109. 109. Mão na massa: Enfim Ionic...

×