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