Emprestei - Um case prático com ionic, cordova, angularjs, rails e heroku
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
-
Upload
felipe-blini -
Category
Software
-
view
342 -
download
1
Transcript of Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Desenvolvimento de Aplicativos Móveis
Abordagem Híbrida: Aproveitando seus conhecimentos WEB junto com
PhoneGap, Cordova, Angular e com foco no Ionic
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 Austrália
felipeblini.net
Híbrido?
Aplicativos Híbridos = Aplicativo Web com Acesso Nativo
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
Nativo, Web App ou Híbrido?
Fonte (imagem): http://blog.bravi.com.br/comparativo-as-diferencas-entre-desenvolvimento-nativo-hibrido-e-web-app/
WEB APP
Parcial
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
Aplicativos híbridos são lentos?
http://venturebeat.com/2012/12/13/facebook-android/#s:fb-android-3
Nop!
Porque HTML5?- Importância da web
- Principal tecnologia
- Mais popular
- APIs e recursos mobile
Estilizar Inteligência
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
- Planetas
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:
Workflow - Aplicativo Móvel1)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)
Workflow de Teste App PhoneGap1) 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)
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
+
Desenvolver o Protótipo
PhoneGap Build
MockupPencil (desktop - free) - Ionic Creator (web - freemium) - Moqup (web - freemium)
Testar e Entregar
PhoneGap Build
Mão na massa - Protótipotestar - empacotar - instalar - entregar
Fixando o Aprendizado 11)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
8)Instale o PhoneGap Developer no seu celular e visualize o app
9)Faça o build no PhoneGap Build
10)Instale no celular
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 mesmaMundo do Carro Híbrido == Mundo do Carro
NormalO ambiente de desenvolvimento é o mesmo, mesma UX
Ambiente de Desenvolvimento Mobile
- 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
Preparando o Ambiente para Desenvolvimento Androidhttps://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
- java -version
- Adb version
- Publicar na Google Play: conta de desenvolvedor, $25 pagamento único
Preparando o Ambiente para Desenvolvimento iOShttps://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.
Preparando o Ambiente para Desenvolvimento Windows Phonehttps://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.
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
Fixando o Aprendizado 21) 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)
10)Integre o projeto ao Cordova e chame o datafactory quando o device estiver pronto
11)Rode no Browser pelo PhoneGap CLI run e/ou serve e teste
12) Adicione a plataforma Android e use o adb para testar no Emulador do Android Studio, no Emulador do Genymotion e no device pelo USB (emule pelo menos 1 vez selecionando um target)
13) Faça um Debug no JavaScript enquanto o app roda nativamente
14) Faça o Buid do app pelo Cordova CLI e instale no celular
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
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
- Muita linha de código, pouco manutenível, tudo misturado
- Cliente já tem idéias para novas de funcionalidades e versão para iPhone
Qual seria a melhor solução??
- Continuar no híbrido?
- Partir pro nativo?
-Aplicativo Híbrido- SPA com Angular
- Acesso nativo com o Cordova
- Gerenciar as dependências com Bower e Gulp ou Grunt
Aplicativo Híbrido - Relembrando o ConceitoCó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
Acesso às APIs nativas: Obrigado Cordova!
https://cordova.apache.org/docs
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)
1 código-fonte Rodando em todas plataformas
Write Once, Run Anywhere
Cordova
Cordova: Arquitetura
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
- IOS WebViews
- Windows Phone 8.0 WebViews
https://cordova.apache.org/docs/en/latest/guide/hybrid/webviews/index.html
Cordova: Arquitetura > Webview
Motor de Renderização de HTML
CordovaMistura 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
JavaScriptCordova
Interpretador Código Nativo
(Ponte)
chama
Cordova: Arquitetura > Web App- Onde o código reside
- Criado como uma página web
- Executado dentro de uma WebView
- config.xml
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
https://cordova.apache.org/docs/en/latest/guide/support/index.html#core-plugin-apis
Cordova: API
Ciclo de Vida da Aplicação Cordova - Igual às Activities Lifecycle
- Apps contém diversas Activities
- Webview: é um activity
Activity
O Arquivo config.xmlConfiguraçõ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)https://cordova.apache.org/docs/en/dev/config_ref/index.html (preferencias globais)https://cordova.apache.org/docs/en/dev/guide/platforms/android/config.html (android)https://cordova.apache.org/docs/en/dev/guide/platforms/ios/config.html (ios)
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, tamanhos e resoluções de telas
●Ionic Resources
Ícones e Splash Screen > Arquivo baseicon.png splash.psd
Mão na massa: Ionic Resources
Fixando o aprendizado 3 - Ionic Resources1)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
8)Instale o plugin do splashscreen e configure o Fade, tempo e o Spinner
9)Rode no Device para testar o splash screen e o ícone do app
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
$ cordova platform save
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
$ cordova plugin save
Mais sobre o Cordova - Plataformas
https://cordova.apache.org/docs
“É muito importante conhecer bem como
funciona o Cordova na plataforma que vc
está desenvolvendo”
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
- Rotas
- Concorrentes: Backbone, Ember, React, Knockout, Aurelia, Vue
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)
- Firebase (AngularFire)
- Etc
- Mercado
- Cursos, Material, Tutoriais
- Ionic, Native Script, PWA
- KB, Performance?
Porque Angular?
Separação de Interesses
Angular: MVCModelo = objeto $scopeVisão = HTMLControlador = Angular Controller
Service/FactoryDados
Trata os Dados
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)
Angular: ViewHTML, recebe dados do usuário e é “colada” (binding) com o Controller através do objeto $scope
- Habitat das Diretivas do Angular
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>
Angular: Directives- HTML (atributos ng-*)
- ng-app- ng-model- ng-controller- ng-repeat- filter
Demo
Angular: Directives- HTML (atributos ng-*)
- ng-hide- ng-show- ng-if- ng-click, ng-blur, ng-mouseover…. (e todos os
outros eventos do JavaScript)
Demo
Angular: Factorymodulo.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; } }});
Angular: Servicesapp.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
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’)
- E uma função de callback com o resultado da requisição AJAX??Não! Ele retorna uma promise!!
O Serviço $http não retorna dadosO 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
O Padrão PromiseComo 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();
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
Demo
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-switchhttps://docs.angularjs.org/api/ngAnimatehttp://www.w3schools.com/angular/angular_animations.asp
Adiciona ou remove a classe ng-hide
Adiciona a classe ng-enter quanto entra no DOME a classe ng-leave quanto sai no DOM
Use essa funcionalidade para adicionar propriedades de animação no CSS
Angular: Custom Directivesmodulo.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
Demo
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??
- E a produtiviade??
- 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!
Com ajuda do Bower1) 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
d) Substituir as referências no HTML antes do Deploy
wiredep, gulp-clean, gulp-uglifyjs e gulp-usemin
Demo
RotasConectam 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
- States têm hierarquia, exemplo: tab1/home/view1 e tab1/home/view2 - Nested views
- Framework Agnostic
UI Router - Padrão do IonicUI-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)
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
UI RouterAssinando 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
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 }})
https://github.com/angular-ui/ui-router/wiki
controller: function($scope, $state, autentica) {$scope.autenticado = autentica.data;
console.log($state.current.data.customData1) }
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
UI Router > Nested States e Nested ViewsStates 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
UI Router > Abstract StatesUsado 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
- Eventos
https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states
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
UI Router > URL RoutingIdeal 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
UI Router > URL Routing e Nested Views juntosCombina 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".
UI Router > Organizando Statesvar contactState = { name: 'contacts', url: "/contacts/:contactId" templateUrl: 'contacts.detail.html', Controller: ContactController };
$stateProvider.state(contactState);
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)
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
Mão na massa: Adicionando Rotas
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
● Ou Cordova CLI
1.2) Adicione bibliotecas
2) Ou use Frameworks
Alternativas para Desenvolvimento Nativo com JS
http://felipeblini.net/Desenvolvimento-de-Aplicativos-Moveis-com-Javascript-Ionic-React-Native-e-NativeScript
UI em Aplicativos Híbridos Multi-plataforma
Platform Agnostic!
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.
Ambiente Necessário
- 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
- Integrado ao Cordova (ngCordova)
Ionic Bundleionic.bundle.jsConcatenação do
- ionic.js
- Angular.js
- Angular-animate.js
- Angular-sanitize.js
- Angular-ui-router.js
- ionic-angular.js
- Ecossistema (Ionic Platform)- Ionic View
- Ionic Creator
- Ionic Market
- Ionic CLI- Cordova CLI
- Comandos do Ionic
- Sistema de Grid em FlexBox
- Botões
- Listas
- Cards
- Ícones (http://ionicframework.com/docs/v2/ionicons/)
- Formulários e muitos outros...
- Disponíveis em SASS
- Custmozáveis facilmente com SASS (já configurado) ou CSS
http://ionicframework.com/docs/components/
Componentes do Ionic
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
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
<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
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)
Mão na massa: Enfim Ionic...