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

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

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

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

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ó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)

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)

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

Mockup
Pencil (desktop - free) - Ionic Creator (web - freemium) - Moqup (web - freemium)

Testar e Entregar
PhoneGap Build

Mão na massa - Protótipo
testar - empacotar - instalar - entregar

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

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

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 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

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.

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.

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 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)

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

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 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

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 > 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

Cordova: Arquitetura > Webview
Motor de Renderização
de HTML

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)

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

Ciclo de Vida da Aplicação Cordova
- Igual às Activities Lifecycle
- Apps contém diversas Activities
- Webview: é um activity

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)

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,

Ícones e Splash Screen > Arquivo base
icon.png splash.psd

Mão na massa: Ionic Resources

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

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

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

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

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)

Angular: MVC
Modelo = objeto $scope
Visão = HTML
Controlador = Angular Controller
Service/Factory
Dados
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: View
HTML, 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

Angular: Directives
- HTML (atributos ng-*)
- ng-hide
- ng-show
- ng-if
- ng-click, ng-blur, ng-mouseover…. (e todos os outros
eventos do JavaScript)

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;
}
}
});

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

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’)

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

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();

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

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

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” 
https://docs.angularjs.org/guide/directive

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??

- 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 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

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

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)

UI Router - Trabalha com states

<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 Router
Assinando um Controller a um template:
template: ...,
Controller: function($scope) { $scope.title = ‘Contacts’ }
})
Alternativamente pode-se adicionar a sintaxe ‘controller as’
template: ...,
controller: 'ContactsCtrl',
controllerAs: 'contact'
})
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
template: ...,
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)
}

UI Router > Eventos onEnter e onExit
template: ...,
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 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

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

UI Router > Multiple Named Views
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

<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 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

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".

UI Router > Organizando States
var 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
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.

- 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

Ionic Bundle
ionic.bundle.js
Concatenação do
- ionic.js
- Angular.js
- Angular-animate.js
- Angular-sanitize.js
- Angular-ui-router.js

- Ecossistema (Ionic Platform)
- Ionic View
- Ionic Creator
- Ionic Market
- Ionic CLI
- Cordova CLI

- 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

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)

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

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

Similaire à Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic (20)

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

Notes de l'éditeur