8245

TÓPICOS EM
COMPUTAÇÃO I
Professor Esp. Fábio Rogério da Silva José.
GRADUAÇÃO
Unicesumar
Reitor
Wilson de Matos Silva
Vice-Reitor
Wilson de Matos Silva Filho
Pró-Reitor de Administração
Wilson de Matos Silva Filho
Pró-Reitor de EAD
Willian Victor Kendrick de Matos Silva
Presidente da Mantenedora
Cláudio Ferdinandi
NEAD - Núcleo de Educação a Distância

Direção Operacional de Ensino
Kátia Coelho
Direção de Planejamento de Ensino
Fabrício Lazilha
Direção de Operações
Chrystiano Mincoff
Direção de Mercado
Hilton Pereira
Direção de Polos Próprios
James Prestes
Direção de Desenvolvimento
Dayane Almeida
Direção de Relacionamento
Alessandra Baron
Head de Produção de Conteúdos
Rodolfo Encinas de Encarnação Pinelli
Gerência de Produção de Conteúdos
Gabriel Araújo
Supervisão do Núcleo de Produção de
Materiais
Nádila de Almeida Toledo
Supervisão de Projetos Especiais
Daniel F. Hey
Coordenador de Conteúdo
Fabiana de Lima
Designer Educacional
C397 CENTRO UNIVERSITÁRIO DE MARINGÁ. Núcleo de Educação a Ana Claudia Salvadego

Iconografia
Isabela Soares Silva
258 p.
Projeto Gráfico
“Graduação - EaD”. Jaime de Marchi Junior
José Jhonny Coelho
1. Tópico. 2. Computação . 3.EaD. I. Título.
Arte Capa
ISBN 978-85-459-0652-0 Arthur Cantareli Silva
CDD - 22 ed. 005 Editoração
CIP - NBR 12899 - AACR/2 Melina Belusse Ramos
Qualidade Textual
Hellyery Agda
Ilustração
Ficha catalográfica elaborada pelo bibliotecário
Daphine Ramella Marcon
João Vivaldo de Souza - CRB-8 - 6828
Em um mundo global e dinâmico, nós trabalhamos
com princípios éticos e profissionalismo, não so-
mente para oferecer uma educação de qualidade,
mas, acima de tudo, para gerar uma conversão in-
tegral das pessoas ao conhecimento. Baseamo-nos
em 4 pilares: intelectual, profissional, emocional e
espiritual.
Iniciamos a Unicesumar em 1990, com dois cursos
de graduação e 180 alunos. Hoje, temos mais de
100 mil estudantes espalhados em todo o Brasil:
nos quatro campi presenciais (Maringá, Curitiba,
Ponta Grossa e Londrina) e em mais de 300 polos
EAD no país, com dezenas de cursos de graduação e
pós-graduação. Produzimos e revisamos 500 livros
e distribuímos mais de 500 mil exemplares por
ano. Somos reconhecidos pelo MEC como uma
instituição de excelência, com IGC 4 em 7 anos
consecutivos. Estamos entre os 10 maiores grupos
educacionais do Brasil.
A rapidez do mundo moderno exige dos educa-
dores soluções inteligentes para as necessidades
de todos. Para continuar relevante, a instituição
de educação precisa ter pelo menos três virtudes:
inovação, coragem e compromisso com a quali-
dade. Por isso, desenvolvemos, para os cursos de
Engenharia, metodologias ativas, as quais visam
reunir o melhor do ensino presencial e a distância.
Tudo isso para honrarmos a nossa missão que é
promover a educação de qualidade nas diferentes
áreas do conhecimento, formando profissionais
cidadãos que contribuam para o desenvolvimento
de uma sociedade justa e solidária.
Vamos juntos!
Seja bem-vindo(a), caro(a) acadêmico(a)! Você está
iniciando um processo de transformação, pois quando
investimos em nossa formação, seja ela pessoal ou
profissional, nos transformamos e, consequentemente,
transformamos também a sociedade na qual estamos
inseridos. De que forma o fazemos? Criando oportu-
nidades e/ou estabelecendo mudanças capazes de
alcançar um nível de desenvolvimento compatível com
os desafios que surgem no mundo contemporâneo.
O Centro Universitário Cesumar mediante o Núcleo de
Educação a Distância, o(a) acompanhará durante todo
este processo, pois conforme Freire (1996): “Os homens
se educam juntos, na transformação do mundo”.
Os materiais produzidos oferecem linguagem dialógica
e encontram-se integrados à proposta pedagógica, con-
tribuindo no processo educacional, complementando
sua formação profissional, desenvolvendo competên-
cias e habilidades, e aplicando conceitos teóricos em
situação de realidade, de maneira a inseri-lo no mercado
de trabalho. Ou seja, estes materiais têm como principal
objetivo “provocar uma aproximação entre você e o
conteúdo”, desta forma possibilita o desenvolvimento
da autonomia em busca dos conhecimentos necessá-
rios para a sua formação pessoal e profissional.
Portanto, nossa distância nesse processo de cresci-
mento e construção do conhecimento deve ser apenas
geográfica. Utilize os diversos recursos pedagógicos
que o Centro Universitário Cesumar lhe possibilita.
Ou seja, acesse regularmente o Studeo, que é o seu
Ambiente Virtual de Aprendizagem, interaja nos fóruns
e enquetes, assista às aulas ao vivo e participe das dis-
cussões. Além disso, lembre-se que existe uma equipe
de professores e tutores que se encontra disponível para
sanar suas dúvidas e auxiliá-lo(a) em seu processo de
aprendizagem, possibilitando-lhe trilhar com tranqui-
lidade e segurança sua trajetória acadêmica.
AUTOR
Professor Esp. Fábio Rogério da Silva José

Especialista em Administração de Banco de Dados Oracle e DB2 pela mesma
instituição, em 2012. Graduado em Sistemas para Internet pela Unicesumar
em 2010. Trabalha na área de desenvolvimento Web desde 2003. Também
trabalhou como coordenador de projetos na área de desenvolvimento
de sistemas com o controle de cartão de créditos, utilizando tecnologias
Java, Flex e MySQL, nota fiscal eletrônica, com Java, Jboss e DB2, CRM
interno, com PHP, Flex e MySQL, Sistema de força de venda para tablets e
Smartphones, com TitaniumSDK, desenvolvimento de ferramenta para
Bussiness Intelligence, utilizando Pentaho, entre outros que participou em
gerenciamento e arquitetura. Atualmente é consultor e ministra treinamentos
em desenvolvimento de sistemas web e mobile na CODEVI, empresa fundada
em 2012. Também, é professor na UniCesumar desde 2013, ministrando aulas
para cursos de graduação, presencial e a distância, em Sistemas para Internet,
Análise e Desenvolvimento de Sistemas e Automação Industrial. Além disso,
ministra aulas para o curso de pós-graduação WEBDEV.
Para informações mais detalhadas sobre sua atuação profissional, pesquisas e

publicações, acesse seu currículo disponível no endereço a seguir:
<http://lattes.cnpq.br/2442608142217032>.
APRESENTAÇÃO
TÓPICOS EM COMPUTAÇÃO I
SEJA BEM-VINDO(A)!
Olá caro(a) aluno(a), seja bem-vindo(a) ao livro de Tópicos em Computação I.
Trabalho desde 2002 com T.I e por meio disso pude acumular algumas experiências que
vou compartilhar com você por meio deste livro. Espero poder contribuir com a sua
formação, descrevendo e exemplificando minha atuação com o desenvolvimento de
aplicativos móveis e, assim, fazer parte da caminhada pela sua formação profissional.
O desenvolvimento de aplicativos para dispositivos móveis cresceu consideravelmente
nos últimos anos, certamente você deve ter notado que existem inúmeros aplicativos
que resolvem diversos problemas. Devemos levar em consideração o número de usu-
ários que utilizam os smartphones para realizar diferente tarefas, até mesmo tarefas as
mais cautelosas como compras on-line.
Neste livro, iremos estudar o desenvolvimento de aplicativos móveis utilizando um dos
frameworks mais conceituados do mercado para desenvolvimento híbrido, o Ionic Fra-
mework.
Na Unidade I faremos uma introdução sobre plataformas de desenvolvimento, analisan-
do as vantagens e desvantagens do desenvolvimento nativo e híbrido. Também iremos
estudar aspectos essenciais das tecnologias que precisamos conhecer para desenvolver
nossos aplicativos.
Na Unidade II começaremos a trabalhar com o Ionic Framework, estudando seus com-
ponentes de interface e conhecendo suas ferramentas, que facilitam todo o processo
do desenvolvimento.
Na Unidade III conheceremos os recursos de interação do aplicativo com o usuário,
como eventos de clique, menus e manipulação de elementos. Também iremos tratar so-
bre uma das partes mais importante de aplicativos interativos, a persistência de dados.
Além disso, na Unidade IV, estudaremos os principais plugins que o Ionic Framework
disponibiliza para interações com processos nativos, os quais podemos interagir com
Câmera, GPS e galeria de fotos entre outros.
Por fim, na Unidade V, concluímos nossos estudos integrando nosso aplicativo com API
REST utilizando os módulos e recursos que o Ionic Framework disponibiliza.
Nosso livro está repleto de exemplos e práticas para que você possa praticar todo o
conteúdo abordado, fique a vontade para alterar os aplicativos proposto aqui, de forma
que você amplie seu conhecimento.
De acordo com Niederauer (2013), a vida acadêmica é indispensável para você ter uma
boa formação. Porém, não é o suficiente para transformá-lo(a) em um(a) profissional
completo(a) nos pontos de vista cultural, educacional e financeiro. Tenha em vista sem-
pre a busca contínua pelo conhecimento.
Espero que você aproveite este livro e procure sempre conhecer mais sobre as tecnolo-
gias citadas aqui.
Desejo uma boa leitura!
APRESENTAÇÃO
09
SUMÁRIO
UNIDADE I
INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA

DISPOSITIVOS MÓVEIS
15 Introdução
16 Plataformas
17 Desenvolvimento Nativo
18 Desenvolvimento Híbrido
20 Linguagem de Marcação Html
26 Estilos com Css
36 Programação com Javascript
37 Considerações Finais
43 Referências
44 Gabarito
UNIDADE II
COMPONENTES EM IONIC FRAMEWORK
47 Introdução
48 Introdução ao Ionic Framework
50 Instalando Ambiente
52 Criando o Primeiro App
57 Componentes
58 Header, Content e Footer

10
SUMÁRIO
64 Subheader e Subfooter
66 Cores e Ícones
73 List e Cards
88 Forms
92 Toggle e Checkbox
97 Radio Buttons, Range e Select
102 TABS e GRID
115 Referências
116 Gabarito
UNIDADE III
CUSTOMIZANDO COMPONENTES
119 Introdução
120 Customizando Listas
128 Fontes, Plano de Fundo Geral e Campos
137 Criando Badges e Customizando Botões
145 Customizando Grid
156 Customizando Formulários
170 Header Transparente e Scroll Vertical

11
SUMÁRIO
186 Referências
187 Gabarito
UNIDADE IV
CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO
191 Introdução
192 Ícones e Novos Componentes
205 Empacotando o Aplicativo
227 Referências
228 Gabarito
UNIDADE V
TRABALHANDO COM RECURSOS NATIVOS
231 Introdução
232 Plugins e Integração
240 Gps, Spinner e Google Maps
243 Gravação e Reprodução de Áudio
246 Salvando Dados Offline dom Sqlite
256 Referências
12
SUMÁRIO
257 Gabarito
258 Conclusão
INTRODUÇÃO AO DESENVOLVIMENTO
I
UNIDADE
DE APLICATIVOS PARA DISPOSITIVOS
MÓVEIS
Objetivos de Aprendizagem
■■ Conhecer as principais plataformas de desenvolvimento mobile.
■■ Entender a diferença entre desenvolvimento nativo e híbrido.
■■ Aprender o essencial sobre HTML.
■■ Conhecer o essencial sobre CSS.
■■ Aprender o essencial sobre JavaScript.
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
■■ Plataformas
■■ Desenvolvimento nativo
■■ Desenvolvimento híbrido
■■ Linguagem de marcação HTML
■■ Estilos com CSS
■■ Programação com JavaScript
15
INTRODUÇÃO
O desenvolvimento de aplicativos móveis já não é novidade e está bem consoli-

dado em suas plataformas. Entretanto, algumas discussões sempre ocorrem na
hora de definir qual plataforma desenvolver, e sem dúvidas essa resposta não existe
pois, são vários os fatores e pontos de análise que definem se você deve desenvol-
ver o nativo ou o híbrido. Nesta unidade iremos entender melhor esse assunto.
Ravulavaru (2015) defende que desenvolver aplicações híbridas é uma boa
abordagem para quando você precisa entregar rapidamente aplicativos móveis
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
ao mercado pois, você precisará apenas ter conhecimento em tecnologias de base

da web como HTML, CSS e JavaScript.
Para aplicativos mais complexos, Kerri Shotts (2016) complementa que deve
ser analisado também o fluxo de dados que o aplicativo irá demandar, como por
exemplo, utilizar recursos de armazenamento em disco ou indexação do banco
de dados para ter uma melhor performance.
Por muito tempo o mercado de desenvolvimento de aplicativos móveis era
restrito aos fabricantes e operadoras, que tinham total controle sobre a publicação,
instalação e exclusão dos aplicativos em suas determinadas plataformas. Com a
liberação de um kit de desenvolvimento de software, conhecido mundialmente
como SDK, o desenvolvimento de aplicativos por diferentes desenvolvedores no
mundo todo foi impulsionado, essa liberação também fez com que milhares de
aplicativos fossem disponibilizados nas plataformas de venda de aplicativos em
uma velocidade sem precedentes.
Para que você tenha uma ideia desse crescimento histórico, vamos utilizar
um exemplo: quando a loja de aplicativos da Apple (App Store) foi aberta em
2008, havia menos de 500 aplicativos disponíveis para download, e em outubro
de 2011 já havia meio milhão de aplicativos, gerando mais de 6 bilhões de dóla-
res em royalties (COPE, 2013).
Introdução
16 UNIDADE I
PLATAFORMAS
Olá, caro(a) aluno(a). Sabemos que existem diversas plataformas de aplicativos

móveis com sistemas operacionais bem específicos, cada um com seus diferen-
cias e com seu kit de desenvolvimento (SDK) para disponibilizar um ambiente
ágil e prático no desenvolvimento de aplicativos.
Segundo uma pesquisa feita por Freire (2015, on-line)1, os sistemas opera-
cionais móveis mais vendidos em 2015 foram o Android e iOS, somando mais
de 86% quando comparado com os demais sistemas. Esse número vem se repe-
tindo com o passar dos anos, e devemos ficar atentos para saber quais plataformas
temos que desenvolver em nossos aplicativos.
A plataforma Android é uma das mais completas com relação ao kit de
desenvolvimento, sua linguagem de programação é Java, e juntamente a ele, são
disponibilizados emuladores para diferentes versões do Android a fim de facilitar
o teste de seu aplicativo antes de ser disponibilizado na loja (BOYER; MEW, 2016).
Os aplicativos desenvolvidos para iOS, sistema operacional dos aparelhos
iPhone e iPad, precisam ser desenvolvidos na linguagem de programação Swift
e/ou Object-C, além do kit, há também a possibilidade de emular um aparelho
para testar seus aplicativos (NEUBURG, 2015).
Já os aplicativos desenvolvidos para Windows Phone podem ser desenvol-
vidos .NET/C# ou C++ e também podem utilizar recursos das tecnologias web
como JavaScript (TORRE; CALVERT, 2016).
INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

17
DESENVOLVIMENTO NATIVO
Desenvolvimento nativo é quando um aplicativo é desenvolvido utilizando os

recursos de cada sistema operacional, como Android e iOS. Desenvolver nativo
pode ser um trabalho custoso, tanto com relação ao tempo quanto ao valor, pois
você precisará de desenvolvedores com habilidade em desenvolver aplicativos
com linguagens de programação distintas.
Por exemplo, Boyer e Mew (2016) destacam que quando utilizado o desen-
volvimento nativo dos aplicativos para Android você terá uma performance
melhor e poderá fazer total uso dos inúmeros elementos e recursos disponibili-
zados pela infraestrutura e pelo ecossistema Android.
A mesma regra vale para aplicativos nas demais plataformas que oferecem
uma melhor performance , porém, cada plataforma tem seu sistema operacional,
e isso faz com que você precise desenvolver o mesmo aplicativo com as mesmas
regras de negócio em diferentes linguagens de programação.
Algo comum nos novos aplicativos de grande sucesso é que muitos começa-
ram com desenvolvimento híbrido e depois, com ganho de recursos financeiros,
começaram a migrar partes da aplicação para as plataformas nativas a fim de
ter uma performance melhor e de aproveitar o máximo dos recursos do sistema
operacional.
Desenvolvimento Nativo
18 UNIDADE I
DESENVOLVIMENTO HÍBRIDO
Segundo Shotts (2016), desenvolver aplicativos híbridos significa utilizar tecno-

logias baseando-se na web como HTML, CSS e JavaScript para apresentar seus
aplicativos aos seus usuários sem se preocupar com a tecnologia específica do
sistema operacional que o aparelho está operando.
Cada sistema operacional dispõe de um componente conhecido como Web
View, e por meio deste componente você pode visualizar páginas HTML como
se estivesse em um navegador de internet, porém sem a barra de navegação e
com acesso a recursos nativos, como câmera, GPS, lista de contatos entre outros.
Uma das plataformas mais conhecidas e utilizadas para desenvolver aplicati-
vos móveis híbridos e multi-plataforma é o Apache Cordova, que de acordo com
Camden (2016), é um framework open source que permite converter arquivos
HTML, CSS e JavaScript em um aplicativo nativo que pode ser executado nas
principais plataformas como Android, iOS entre outras. Sua arquitetura con-
siste em utilizar um “wrapper”, ou seja, um web view que podemos pensar como

19
sendo um navegador incorporado sem as barras de navegação, que também for-

nece recursos nativos como câmera, acelerômetro, GPS e demais recursos de
cada sistema operacional.
A Figura 1, a seguir, fornece uma demonstração visual de como os aplicati-
vos móveis híbridos funcionam.
Aplicativo nativo feito com Cordova
Cordova cria um aplicativo “híbrido”, que é

um mini-navegador embutido dentro de
um aplicativo nativo.
Navegador Web
(Navegador embutido)
Este aplicativo pode ser executado em um
dispositivo móvel mesmo sem uma conexão de
HTML css JS rede - os arquivos HTML, CSS e JavaScript são
acessíveis no aplicativo.
Câmera GPS Contatos Cordova também fornece conexões

para recursos do dispositivo, como
câmera, GPS e Contatos.
Figura 1 - Um diagrama simples de como funciona um aplicativo híbrido

Fonte: Camben (2016, p. 4).
O Cordova tem o papel de criar uma aplicação híbrida, ou seja, um aplicativo no

qual os arquivos como HTML, CSS e JavaScript são executados. Sabemos que
para executar tais arquivos é necessário um navegador, e é exatamente isso que o
Cordova faz, embutindo um mini-navegador para que possamos executar estes
arquivos. Com a conexão feita nativa no dispositivo é possível acessar os recur-
sos e funcionalidades nativas como câmera, GPS, contatos etc.
Neste universo de plataforma e frameworks para criação de aplicativos móveis
híbridos que utilizam como base o Apache Cordova, podemos destacar o Adobe
PhoneGap, Monaca, Onsen UI, Visual Studio, Taco, Telerik e Ionic.
Desenvolvimento Híbrido
20 UNIDADE I
LINGUAGEM DE MARCAÇÃO HTML
Em aplicativos híbridos, nossos elementos são criados utilizando a linguagem de

marcação HTML, que, segundo Powell (2010), é uma linguagem simples e fácil
de aprender, sua base consiste em ser interpretada pelos navegadores de inter-
net como Internet Explorer, Chrome, Firefox entre outros.
Agora, vamos criar um documento simples contendo um título e um pará-
grafo com algumas marcações de estilização com o nome pagina1.html contendo
o código exibido na Figura 2.

21
Figura 2 - Código index.html

Fonte: o autor.
O resultado de nossa primeira página em HTML pode ser visto na Figura 3.
Figura 3 - Print do código index.html no navegador

Fonte: o autor.
Linguagem de Marcação Html

22 UNIDADE I
Precisamos entender a estrutura base do HTML e os principais elementos, tam-

bém conhecidos como tags, para conseguirmos criar aplicativos híbridos. Sendo
assim, vamos analisar nosso código do início. A primeira marcação do docu-
mento é <!DOCTYPE html>, na qual define-se o tipo do documento, ou seja,
o navegador saberá que cada marcação deve ser interpretada como elementos
visuais. Em seguida temos um elemento <html>, e dentro deste temos mais dois
elementos o <head></head> e o <body></body>.
O elemento <head> é o cabeçalho do arquivo, no qual é definido o título e
as demais configurações. Dentro do elemento <body> temos os elementos que
serão de fato interpretados pelo navegador e exibidos.
Os elementos internos de um elemento são conhecidos como elementos

filhos, por exemplo, o elemento head e body são filhos de html, tal que html
é pai dos elementos head e body.
Cada elemento do HTML pode ter atributos e valores que servem para alterar
ou complementar a criação de um elemento. Na Figura 4 podemos ver um ele-
mento de caixa de texto com alguns atributos e valores.
Figura 4 - Elemento de caixa de texto (input)

Fonte: o autor.
Você pode perceber que temos 5 atributos com seus respectivos valores. Primeiro,
temos o atributo type que define o tipo do elemento, que neste caso é do tipo
texto, ou seja, é permitido digitar letras, números e caracteres especiais. Também
podemos ver o atributo placeholder onde definimos um texto de ajuda para ser
exibido quando o campo é exibido e se encontra em branco.
Na Tabela 1 são apresentados os principais elementos html e seus objetivos,
entenderemos cada elemento no decorrer do livro, no devido momento.

23
Tabela 1 – Principais elementos do HTML
ELEMENTO DESCRIÇÃO
<html> O elemento HTML <html> (ou HTML root element) representa a raiz
de um HTML. Todos os outros elementos devem ser descendentes
desse elemento.
<header> O elemento HTML <header> representa um grupo de suporte intro-
dutório ou navegacional. Pode conter alguns elementos de cabeçalho,
mas também outros elementos como um logo, seções de cabeçalho,
formulário de pesquisa, e outros.
<h1>, <h2>, Elementos de cabeçalho são implementados em seis níveis, <h1> é o
<h3>, <h4>, mais importante e <h6> é o de menor importância. Um elemento de
cabeçalho descreve brevemente o tópico da seção em que ele está. As

<h5>, <h6>
informações de cabeçalho podem ser usadas por agentes de usuário,
por exemplo, para construir uma tabela de conteúdos para um docu-
mento automaticamente.
<div> O HTML <div> elemento (ou simplesmente HTML Documento de
Divisão de Elemento) é um container genérico para conteúdo de fluxo,
que de certa forma não representa nada. Ele pode ser utilizado para
agrupar elementos para fins de estilos (usando class ou id), ou porque
eles compartilham valores de atributos, como lang. Ele deve ser
utilizado somente quando não tiver outro elemento de semântica (tal
como {{ HTMLElemento }} ou {{ HTMLElemento }}) como é apropriado.
<hr> O elemento HTML <hr> representa uma quebra temática entre ele-
mentos de nível de parágrafo (uma mudança da cena de uma história
ou uma mudança de tema com uma seção). Nas versões anteriores
do HTML, representava uma linha horizontal. Pode continuar sendo
exibida como uma linha horizontal nos navegadores, mas agora está
definida em termos semânticos em vez de termos de apresentação.
<li> O elemento HTML (<li>) é usado para representar um item de lista. Ele
deve estar contido em uma lista ordenada (<ol>), uma lista desorde-
nada (<ul>) ou um menu, onde representa uma única entidade nessa
lista. Em menus e listas não ordenadas, itens de lista são normalmente
exibidos usando pontos de marcadores. Em listas ordenadas, eles
geralmente são exibidos com algum contador ascendente à esquerda,
como um número ou letra.
<p> O elemento HTML <p> (ou Elemento HTML Parágrafo) representa um
parágrafo do texto.

24 UNIDADE I
<pre> HTML Preformatted Text (<pre>) é a tag utilizada para representar

texto pré-formatado. Um texto dentro desse elemento é tipicamente
exibido em uma fonte não proporcional, da mesma maneira em que o
texto original foi disposto no arquivo. Espaços em branco são manti-
dos no texto da mesma forma em que este foi digitado.
<a> O elemento HTML <a> (ou o Elemento Ancora HTML) define uma
hiperligação (hyperlink), o destino de uma hiperligação, ou ambos.
<b> O elemento HTML <b> representa um intervalo de texto estilistica-
mente diferente do texto normal, sem transmitir qualquer importância
ou relevância. Ele é geralmente usado para destacar palavras-chaves
em um resumo, nomes de produtos em um comentário ou outros
vãos de texto cuja a apresentação típica seria negrito. Outro exemplo
de seu uso é como marcação da frase principal de cada parágrafo de
um artigo.
<br> O elemento HTML quebra-de-linha <br> produz uma quebra de linha
em um texto (carriage-return). É útil para escrever poemas ou um
endereço, cuja divisão de linha é significante.
<span> O elemento HTML <span> é um contêiner genérico em linha para
conteúdo fraseado, que não representa nada por natureza. Ele pode
ser usado para agrupar elementos para fins de estilo (usando os
atributos class ou id), ou para compartilhar valores de atributos como
lang. Ele deve ser usado somente quando nenhum outro elemento
semântico for apropriado. <span> é muito parecido com o elemento
<div> , entretanto, <div> é um elemento de nível de bloco, enquanto
<span> é um elemento em linha.
<audio> O elemento audio é utilizado para embutir conteúdo de som em um
documento HTML ou XHTML.O elemento audio foi adicionado como
parte do HTML5.
<video> O elemento HTML <video> é utilizado para incorporar conteúdo de
vídeo em um documento HTML ou XHTML.
<source> O elemento source é utilizado para especificar múltiplos recursos de
mídia de elementos audio e video em HTML5. É um elemento vazio e
normalmente usado para disponibilizar em vários formatos suporta-
dos por diferentes navegadores.

25
<canvas> O elemento HTML Canvas (<canvas>) pode ser utilizado para de-
senhar gráficos, utilizando scripts (geralmente JavaScript). Além de
desenhar gráficos, ele pode ser usado para fazer composições de
fotos e também para animações, por exemplo. Você poderá colocar
conteúdos alternativos dentro do bloco <canvas>. Este conteúdo será
renderizado também em navegadores antigos e em navegadores com
JavaScript desabilitado.
<table> O elemento HTML Table (<table>) representa dados em duas dimen-
sões ou mais.
<td> A célula da tabela HTML elemento (<td>) define uma célula de uma
tabela que contém os dados. Participa no modelo da tabela.
<button> O elemento HTML <button> representa um botão clicável.

<form> O elemento HTML <form> representa uma seção de um documento
que contém controles interativos que permitem ao usuário submeter
informação a um determinado servidor web.
<input> Este elemento inclui os atributos globais.
<label> Um elemento HTML <label> representa uma legenda para um item
em uma interface de usuário. Ele pode estar associado com um
elemento de controle, colocando este dentro do elemento label, ou
usando o atributo for. Tal controle é chamado controle etiquetado do
elemento etiqueta. Um input pode ser associado a diversas etiquetas
(<label>s).
<option> Em um formulário Web, o elemento HTML <option> é usado para criar
um controle que representa um item dentro de um elemento HTML5
<select>, <optgroup> ou <datalist>.
<select> O elemento HTML select (<select>) representa um controle que
apresenta um menu de opções. As opções dentro do menu são re-
presentadas pelo elemento <option>, que podem ser agrupados por
elementos <optgroup>. As opções podem ser pré-selecionadas para
o usuário.
Fonte: adaptada de Mozilla Developer Network ([2017], on-line)2.
Você pode conhecer outros elementos e ver um exemplo de cada um deles visi-
tando a página oficial da documentação dos elementos, disponibilizada pelo
grupo Developer Mozilla.

26 UNIDADE I
ESTILOS COM CSS
O CSS, ou folha de estilo em cascatas (Cascading Style Sheets), é o responsável

por dar cor e formas para nossos elementos HTML, e sua semântica é simples e
fácil de aprender (HENICK, 2010).
Sua aplicação é simples pois consiste em definir o atributo que será manipu-
lado e o valor que será aplicado. A seguir, podemos analisar um CSS manipulando
a cor do texto sendo exibido.
color:red;
Os valores para cores podem ser informados em hexadecimal, e é a forma mais

comum para definir paletas de cores mais precisas e harmônicas.

27
Sem dúvidas os aplicativos móveis que mais se destacam são os que tra-
zem uma proposta de design bem pensada e planejada, por isso, reserve um
tempo em seus estudos para ler mais sobre cores e tipografia, isso poderá
fazer com que seu aplicativo se destaque entre os demais.
Existem três formas de definir um estilo para respectivos elementos, a primeira

é declarar o atributo style diretamente no elemento que deseja manipular. No
exemplo a seguir podemos ver a atribuição de do estilo para alterar a cor de um

texto e o tamanho da fonte utilizada.
<p style=”color: #ffff00; font-size: 11px “>
Podemos também usar o modo de CSS incorporado onde devemos especificar

o elemento que desejamos alterar, com pode ser visto na Figura 5.
Figura 5 - CSS incorporado

Fonte: o autor
Quando utilizado este modo, devemos definir este bloco no cabeçalho da página
HTML como exibido na Figura 6.
Estilos com Css

28 UNIDADE I
Figura 6 - CSS incorporado no index.html
Fonte: o autor.
E por fim temos o modo CSS com link, no qual todo o código CSS fica em outro
arquivo e apenas fazemos o link entre a página que tem os elementos e o arquivo
de CSS que manipula o estilo da página. Por exemplo, vamos criar um novo
arquivo chamado estilo.css onde iremos manipular o estilo do elemento pará-
grafo contendo apenas o código da Figura 7.
Figura 7 - Folha de estilo CSS

Fonte: o autor.

29
Agora, no arquivo pagina1.html, vamos fazer o link com o estilo.css no cabeça-

lho do documento como pode ser visto na Figura 8.
Figura 8 - Código pagina1.html

Fonte: o autor.
As seleções dos elementos também podem ser feitas de três formas, sendo por
identificação, classificação ou por tipo de elemento. No exemplo anterior, pode-
mos ver que a seleção foi feita por tipo, ou seja, todos os elementos do tipo <p>.
Veja nas Figuras 9, 10 e 11 um exemplo mais detalhado do CSS aplicado pelos
tipos de elementos utilizando o modo de CSS como link.
Estilos com Css

30 UNIDADE I
Figura 9 - Código pagina2.html parte 1
Fonte: o autor.
Figura 10 - Código pagina2.html parte 2

Fonte: o autor.

31
Figura 11 - Código estilo.css

Fonte: o autor.
O resultado esperado pode ser visto na Figura 12.
Figura 12 - Resultado do código da pagina2.html

Fonte: o autor.
Estilos com Css

32 UNIDADE I
A seleção por identificação consiste em atribuir um ID para um determinado

elemento e no CSS selecionar apenas o elemento com aquele ID. Usando o exem-
plo visto anteriormente, vamos alterar a cor apenas de um elemento h2. Sendo
assim, vamos definir um ID para o primeiro h2.
<h2 id=”titulo”>Jogabilidade</h2>
No CSS, vamos selecionar o elemento utilizando o caracter # antes do nome do
elemento que queremos selecionar, ficando como código da Figura 13.
Figura 13 - Código CSS

Fonte: o autor.
Também é possível fazer a seleção por classificação, ou seja, podemos definir

uma classe para cada elemento e no CSS atribuir um estilo para todos que estão
utilizando esta classe. Vamos ajustar nosso html da pagina2 para adicionar algu-
mas classes (Figuras 14 e 15).

33
igura 14 - Alteração código pagina2.html parte 1

Fonte: o autor.
Figura 15 - Alteração código pagina2.html parte 2

Fonte: o autor.
Agora no CSS podemos fazer a seleção por classe adicionando um ponto antes
do nome da classe. Veja na Figura 16 como nosso estilo.css ficou.
Estilos com Css

34 UNIDADE I
Figura 16 - CSS alterado
Fonte: o autor.
Esperamos ter o resultado exibido na Figura 17.

35
Figura 17 - Resultado pagina2.html

Fonte: o autor.
O CSS é bem mais poderoso do que o mostrado até agora, mas não se preocupe,
pois iremos apresentar detalhes, praticar e entender os recursos conforme for-
mos criando nossos aplicativos nas práticas das próximas unidades do livro.
Estilos com Css

36 UNIDADE I
PROGRAMAÇÃO COM JAVASCRIPT
A primeira coisa importante que você deve saber sobre JavaScript é que Java e
JavaScript são linguagens diferentes com objetivos diferentes. A única seme-
lhança é no nome, devido a sua história de criação.
JavaScript é uma linguagem de programação interpretada, inicialmente,
com o objetivo de disponibilizar nos navegadores uma linguagem para executar
scripts no lado do cliente e criar uma interação com os elementos e os usuários,
sem a necessidade de passar por um servidor (SUEHRING, 2013).
Buttigieg e Jevdjenic (2015) complementam que, na atualidade, o JavaScript
não é uma linguagem apenas para navegadores, pois podemos escrever scripts
que rode no lado do servidor utilizando esta mesma linguagem, como por exem-
plo a plataforma NodeJS.
No decorrer das próximas unidade do livro, iremos discutir e praticar o
JavaScript.

37
CONSIDERAÇÕES FINAIS
A partir da unidade estudada, podemos perceber que desenvolver aplicativos

móveis, considerando todas as plataformas existentes, é de fato uma tarefa muito
custosa, tanto em tempo quanto em custo financeiro, uma vez que cada plata-
forma exige um nível de conhecimento em uma linguagem de programação.
Podemos citar como exemplo o desenvolvimento de aplicativos: para o sistema
operacional Android, você precisará conhecer a linguagem de programação Java;
já para iOS (iPhone e iPad), você precisará conhecer a linguagem de programa-
ção Object-C ou Swift.

Entendemos que para aproveitar o melhor da tecnologia web, podemos criar
aplicativos híbridos, ou seja, utilizar recursos da web para criar aplicativos com
acesso a recursos nativos. Sabemos que outro ponto de extrema importância é
avaliar o público alvo do aplicativo que será desenvolvido, pois caso você precise
desenvolver um aplicativo apenas para a plataforma Android e já tem o domínio
da tecnologia Java, neste contexto, uma solução híbrida não é a melhor escolha.
Nesta unidade aprendemos a diferença entre nativo e híbrido, bem como a
utilizar as tecnologias da web como HTML, CSS e JavaScript. Tenha em mente
que este foi um passo introdutório sobre a base das tecnologias que vamos uti-
lizar no decorrer das próximas unidades, caso você tenha dificuldades com
essas tecnologias, siga as dicas das leituras complementares para aprimorar seu
conhecimento.
Como dito no decorrer desta unidade, as tecnologias estão em constante
evolução, e por essa razão você deve sempre se atualizar e se informar sobre as
melhorias e boas práticas que cada uma delas proporciona. Você pode fazer isso
por meio de leituras semanais dos principais blogs de notícias sobre nossa área.
Mesmo que você seja um(a) desenvolvedor(a) que domine o essencial sobre
HTML, CSS e JavaScript, não deixe de ler os livros recomendados e aqueles apre-
sentados no final desta unidade, pois eles certamente irão agregar muito para seu
aprendizado e para auxiliá-lo(a) na criação dos aplicativos das próximas unidades.
Considerações Finais
38
1. Desenvolver aplicativos nativos requer uma experiência na tecnologia do siste-

ma operacional que irá ser desenvolvido, uma opção é desenvolver aplicativos
híbridos. Sabendo disso, assinale a alternativa correta sobre o que é aplica-
tivo híbrido:
a. Aplicativos que rodam em qualquer sistema operacional.
b. São aquelas que são baseados em web, porém, tem acesso aos recursos na-
tivos.
c. Aplicativos que rodam só no Android e iOS.
d. Aplicativos de controle financeiro.
e. Não são aplicativos que podem ser instalados no iOS.
2. A linguagem de marcação HTML é a principal tecnologia utilizada para criar

aplicações para web. Analise os códigos a seguir e assinale a opção correta
para a criação de um campo de texto:
a. <edit type=”text” value=”1020” placeholder=”Digite um valor”>.
b. <text type=”text” value=”1020” placeholder=”Digite um valor”>.
c. <input type=”text” value=”1020” placeholder=”Digite um valor”>.
d. <input type=”edit” value=”1020” placeholder=”Digite um valor”>.
e. <text type=”text” value=”1020” placeholder=”Digite um valor”>.
3. Com o HTML podemos criar diferentes elementos e configurar diferentes atribu-

tos, mas sua disposição visual tem uma limitação, deixando para o CSS a obriga-
ção de melhorar seu visual. Sendo assim, o que podemos assinalar como obje-
tivo(s) do CSS:
I. Alterar os estilos como cor e posição dos elementos HTML.
II. Esconder e exibir elementos.
III. Posicionar elementos flutuantes.
IV. Manipular eventos igual ao JavaScript através do CSS.
39
Com base nas assertivas apresentadas anteriormente, assinale a alternativa

correta:
a. Apenas I e II estão corretas.
b. Apenas I, II e III estão corretas.
c. Apenas I está correta.
d. Apenas II, III e IV estão corretas.
e. Nenhuma das alternativas está correta.
4. Existem diversos atributos que podem ser atribuídos a um elemento por meio
do CSS, e com diferentes objetivos, como alterar a cor de fundo, cor do texto,
posicionamento, margem etc. Sendo assim, analise os atributos abaixo e as-
sinale Verdadeiro (V) ou Falso (F) com relação aos atributos que realmente
são atribuições do CSS.:
( ) background-color.
( ) float:left.
( ) position-div.
( ) canvas-size.
5. JavaScript se tornou uma das linguagem mais utilizadas no mundo para aplica-
ções web por vários motivos, um deles foi a criação de uma plataforma para de-
senvolver aplicações em JavaScript para o backend. Com base nesta afirmação,
marque a alternativa que corresponda ao nome desta plataforma:
a. JavaBackEnd
b. NodeJS
c. JavaScriptJS
d. BackendJS
e. AngularJS
40
O que é o HTML5?
O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação
que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base
da arquitetura web.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibili-
tando o desenvolvedor a modificar as características dos objetos de forma não intrusiva
e de maneira que seja transparente para o usuário final. Ao contrário das versões ante-
riores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da
melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das
características destes elementos, de forma que o website ou a aplicação continue leve e
funcional, sem a necessidade de criações de grandes blocos de scripts.
O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do
HTML não continham um padrão universal para a criação de seções comuns e específi-
cas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomencla-
tura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática
as informações localizadas nos rodapés dos websites.
Há outros elementos e atributos que sua função e significado foram modificados e que
agora podem ser reutilizados de forma mais eficaz. Por exemplo, tags como B e I que fo-
ram descontinuados em versões anteriores do HTML agora assumem funções diferentes
e entregam mais significado para os usuários.
O HTML5 modifica a forma de como escrevemos código e organizamos a informação
na página. Seria mais semântica com menos código. Seria mais interatividade sem a
necessidade de instalação de plugins e perda de performance. É a criação de código in-
teroperável, pronto para futuros dispositivos e que facilita a reutilização da informação
de diversas formas.
O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site pre-
cisará ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5
está sendo criado para que seja compatível com os browsers recentes, possibilitando a
utilização das novas características imediatamente. A regra primordial entre os desen-
volvedores web Don’t Break The Web é seguida à risca.
Fonte: Eis e Ferreira (2012).
MATERIAL COMPLEMENTAR
HTML5 e CSS3: Domine a web do futuro

Lucas Mazza
Editora: Casa do Código
Sinopse: crie páginas elegantes de forma simples! HTML e CSS,
quando bem utilizados, podem ser o sucesso de um projeto
e, com os novos recursos, muito do que antes era trabalhoso
agora não é mais. Aprenda as melhores técnicas para escrever
seu site por meio de exemplos práticos de funcionalidades úteis
do cotidiano. Construa menus, aplique efeitos, estilize elementos visuais, melhore a semântica da sua
página e muito mais!
HTML5 - A Linguagem de Marcação que

Revolucionou a Web
Maurício Samy Silva
Editora: Novatec
Sinopse: HTML5 é a linguagem de marcação que amplia de
forma surpreendente as funcionalidades da HTML, alterando
de maneira significativa como você desenvolve para a web.
Trata-se da mais extensa especificação para a HTML focada em
criar funcionalidades para desenvolvimento, não só de sites, mas também de aplicações de internet
rica (RIA).
Material Complementar
JavaScript: O guia definitivo

David Flanagan
Editora: O’Reilly
Sinopse: JavaScript é a linguagem de programação
da Web. A maioria dos sites modernos usa JavaScript,
e todos os navegadores – em computadores de
mesa, consoles de jogos, tablets e smartphones –
incluem interpretadores JavaScript. Isso a torna uma
das linguagens de programação mais importantes
atualmente e uma das tecnologias que todo
desenvolvedor Web deve conhecer. Referência completa
para programadores, este livro fornece uma ampla descrição da linguagem JavaScript básica e das APIs
JavaScript do lado do cliente definidas pelos navegadores Web. Em sua 6ª edição, cuidadosamente
reescrita para estar de acordo com as melhores práticas de desenvolvimento Web atuais, abrange
ECMAScript 5 e HTML5 e traz novos capítulos que documentam jQuery e JavaScript do lado do servidor.
Recomendado para programadores experientes que desejam aprender a linguagem de programação
da Web e para programadores JavaScript que desejam ampliar seus conhecimentos e dominar a
linguagem, este é o guia do programador e manual de referência de JavaScript completo e definitivo.
43
REFERÊNCIAS
BOYER, R.; MEW, K. Android Application Development Cookbook. Birmingham:

Packt Publishing, 2016.
BUTTIGIEG, S.; JEVDJENIC, M. Learning Node. js for Mobile Application Develop-
ment: Make use of Node.js to develop of a simple yet scalable cross-platform mobile
application. Birmingham: Packt Publishing, 2015.
CAMDEN, R. K. Apache Cordova in Action. Shelter Island: Manning Publications Co,
2016.
COPE, D. Appcelerator Titanium Application Development by Example Begin-
ner’s Guide. Birmingham: Packt Publishing, 2013.
EIS, D.; FERREIRA, E. HTML5 e CSS3 com farinha e pimenta. São Paulo: Tableless,
2012.
HENICK, B. HTML & CSS: the Good Parts. Sebastopol: O’Reilly Media, Inc, 2010.
NEUBURG, MATT. Programming iOS 9. 6 ed. Sebastopol: O’Reilly Media, Inc, 2015.
NIEDERAUER, J. Jovem e Bem-sucedido: um guia para a realização profissional e
financeira. São Paulo: Novatec Editora, 2013.
POWELL, T. A. HTML & CSS: The Complete Reference, 5 ed. New York: McGraw-Hill
Companies, 2010.
RAVULAVARU, A. Learning Ionic: Build real-time and hybrid mobile applications
with Ionic. Birmingham: Packt Publishing, 2015.
SHOTTS, K. Mastering PhoneGap Mobile Application Development. Birmin-
gham: Packt Publishing, 2016.
SUEHRING, S. JavaScript Step by Step. 3. ed. Sebastopol: O’Reilly Media, Inc, 2013.
TORRE, C. de L.; CALVERT, S. Microsoft Platform and Tools for Mobile App Develo-
pment. Washington: Microsoft Press, 2016.
REFERÊNCIAS ONLINE
Em: <http://www.techtudo.com.br/noticias/noticia/2015/08/968-de-todos-os-s-
1
martphones-vendidos-no-planeta-sao-android-ou-iphone.html>. Acesso em: 15

mai. 2017.
2
Em: <https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element>. Acesso em:
04 mai. 2017.
GABARITO
1. B.
2. E.
3. B.
4. V - V - F - F.
5. B.
COMPONENTES EM IONIC
II
UNIDADE
FRAMEWORK
■■ Entender o surgimento do Ionic Framework.
■■ Instalar o ambiente de desenvolvimento.
■■ Criar o primeiro app.
■■ Conhecer os componentes.
■■ Aprender a usar os componentes de Header, Content e Footer.
■■ Entender como usar os componentes de SubHeader e SubFooter.
■■ Aprender como utilizar diferentes cores, ícones e Botões.
■■ Entender como usar os componentes de List e Cards.
■■ Aprender a usar os componentes de form.
■■ Aprender a usar os componentes de Toggle e Checkbox.
■■ Entender como usar os componentes de Radio Buttons, Range e Select.
■■ Aprender a usar os componentes de Tabs e Grid.
Plano de Estudo
■■ Introdução ao Ionic Framework
■■ Instalando ambiente
■■ Criando o primeiro app
■■ Componentes
■■ Header, Content e Footer
■■ SubHeader e SubFooter
■■ Cores, Ícones e Botões
■■ List e Cards
■■ Forms
■■ Toggle e Checkbox
■■ Radio Buttons, Range e Select
■■ Tabs e Grid
47
INTRODUÇÃO
Olá caro(a) aluno(a).

Desenvolver aplicativos móveis geralmente é divertido e, em muitos casos,
uma tarefa complexa dependendo dos requisitos do projeto. Escolher qual tec-
nologia utilizar é um ponto altamente discutido nas comunidades e é a etapa
principal do ciclo do desenvolvimento, pois se você escolher a tecnologia “errada”,
o custo para migrar toda a aplicação pode ser alto. Acredito que não existe uma
tecnologia “errada”, mas sim pessoas que não dominam tal tecnologia.
Segundo Ravulavaru (2015), o Ionic é um framework open source e um dos

frameworks mais utilizados no mundo no desenvolvimento de aplicativos híbri-
dos , tendo mais de 23 mil stars e mais de 4 mil forks no Github.
Sua premissa é utilizar tecnologias web, como HTML5, CSS e JavaScript
para desenvolver aplicativos móveis híbridos, ou seja, que usam tecnologias web
e também nativas. Se você sabe criar um site você conseguirá criar um aplica-
tivo sem muito esforço.
O diferencial do Ionic Framework é sua preocupação com a performance e
ganho de produtividade no desenvolvimento. Você vai comprovar isso no decor-
rer deste material enquanto for criando os projetos exemplos.
O Ionic utiliza como base o projeto Apache Cordova e dispõe de uma série
de componentes e um CLI (command-line interface) completo para criar, testar
e publicar aplicativos com apenas alguns comandos. Existem outros frameworks
com o mesmo objetivo do Ionic, criar aplicativos híbridos, mas iremos utilizar
este pela sua vasta aceitação na comunidade e seus componentes de interfaces
ricos e testados.
Em projetos específicos você pode utilizar direto os comandos do Apache
Cordova, ficando por sua responsabilidade a utilização correta dos componentes
de interface, por outro lado você pode customizar todos os recursos desejados.
Esta abordagem é bem utilizada pelos aplicativos dos bancos financeiros, pois
em muitos casos a necessidade de obter recursos nativos customizados é auto.
Introdução
48 UNIDADE II
INTRODUÇÃO AO IONIC FRAMEWORK
Em um evento chamado iPhoneDevCamp, ocorrido em São Francisco, em 2006,

três jovens criaram uma plataforma para criar aplicativos com HTML5/CSS/JS
denominada PhoneGap. Em 2010 a Apple confirmou que a plataforma estava de
acordo com os parâmetros da licença para desenvolvedores iOS.
Em 2011, a Adobe comprou o PhoneGap e doou o código fonte do pro-
jeto para a fundação Apache, porém o nome “PhoneGap” ficou exclusivo para
a Adobe e o projeto foi renomeado para Apache Cordova, CAMDEN (2016).
O Apache Cordova também é open source e é utilizado pelo Ionic para aces-
sar as funcionalidades nativas dos aparelhos móveis, como acelerômetro, câmera
e geolocalização. Ele também tem como requisito gerar o aplicativo para diferen-
tes plataformas como Android, iOS, Windows Phone, blackberry entre outros.
Hoje a maioria das plataformas e frameworks para criação de aplicativos
móveis híbridos utiliza como base o Apache Cordova, entre eles estão: Adobe
PhoneGap, Monaca, Onsen UI, Visual Studio, Taco, Telerik e Ionic (APACHE
CORDOVA, [2017], on-line)1.

49
Para manipular os elementos via JavaScript, o Ionic utiliza um framework

chamado AngularJS que, segundo Ruebbelke e Ford (2015), é um framework
escrito em JavaScript open source, mantido pela Google, e que tem por objetivo
facilitar o desenvolvimento de aplicações web estendendo o HTML tradicional
para trabalhar com conteúdo dinâmico, com a ligação direta e bidirecional dos
dados (two-way data-binding) que permite sincronização automática entre o
HTML e o objeto em JavaScript.
Não faz parte do escopo deste livro explicar de forma ampla o funcionamento
do AngularJS, porém, você irá aprender com a evolução dos exercícios aplicados.
No momento em que este livro foi escrito, o AngularJS lançou a versão 2.0,
que mudou totalmente a forma de implementar aplicações SPA (single page appli-
cation), também não iremos abordar este tema, mas irei indicar no final desta
unidade alguns livros para leituras sobre o assunto. Nesta mesma época o Ionic
lançou uma nova versão do seu framework, com várias melhorias e com a imple-
mentação do AngularJS 2.0, algumas lógicas que são feitas no Ionic 1.0 são bem
diferentes da versão 2.0.
O Ionic utiliza o AngularJS para controlar os objetos e configurar as telas,
que chamamos de rotas do aplicativo. Não se preocupe, veremos esse conte-
údo passo a passo.
Como já foi dito anteriormente, o Ionic utiliza o Apache Cordova para dispo-
nibilizar os recursos nativos para a aplicação, mas, quando se utiliza o AngularJS
seu aplicativo pode não funcionar como deveria, pois o bind do objeto pode
não ser atualizado na view quando não passa pelo apply do AngularJS. Se você
não conhece o AngularJS, essa explicação ficou vaga, mas fique tranquilo(a), no
futuro você entenderá.
Você também irá se deparar com o ngCordova, que é apenas um atalho para
chamar os plugins nativos do Apache Cordova, de forma que seja escutado pelo
AngularJS.
Introdução ao Ionic Framework

50 UNIDADE II
INSTALANDO AMBIENTE
Todos os comandos do Ionic, como criar um novo projeto, testar e distribuir,

são feitos direto no terminal por meio de um CLI (command-line interface) cha-
mado Ionic CLI. O Ionic CLI utiliza o NodeJS para executar tarefas e o Git para
baixar alguns pacotes.
Para instalar o Ionic Framework você precisa ter instalado o NodeJS, Git e
um editor de códigos. O Ionic pode ser instalado em Windows, Linux ou Mac,
os passos seguintes são os mesmos para os três sistemas operacionais.
Segundo Shotts (2016), NodeJS, ou Node.js, é uma plataforma construída
sobre o motor JavaScript do Google Chrome para facilmente construir aplica-
ções rápidas e escaláveis. Para instalar o NodeJS baixe a última versão, no site
oficial1, escolhendo seu sistema operacional. Depois de baixá-lo, abra o execu-
tável e siga os passos de instalação até aparecer a tela de instalação concluída.
Juntamente ao NodeJS, é instalado o NPM (Node Package Manager), que é o
gerenciador de pacotes dos módulos escritos em JavaScript utilizando o NodeJS.
1 Disponível em: <https://nodejs.org>.

51
Git é um sistema de controle de versão distribuído e um sistema de geren-

ciamento de código fonte, com ênfase em velocidade. O Git foi inicialmente
projetado e desenvolvido por Linus Torvalds para o desenvolvimento do kernel
Linux, mas foi adotado por muitos outros projetos.
Como outros projetos open source, o Ionic está hospedado no GitHub, que
é um servidor de Git gratuito para projetos abertos, sendo assim precisamos do
Git instalado na máquina2. Antes de baixar, lembre-se de que deve selecionar a
versão para seu sistema operacional. Após baixado, siga os passos e deixe as con-
figurações padrões de instalação até concluir.
Com o NodeJS e Git instalado vamos instalar o Cordova e o Ionic. Esse pro-
cesso é bem simples e consiste em apenas um comando, pois vamos utilizar o
NPM para fazer a instalação.
Abra um terminal, certifique-se que você tenha permissão de administrador, e
digite os dois comando a seguir. Os exemplos deste material são apresentados em
ambiente Windows, sendo assim, para acessar o terminal, abra o programa CMD.
npm install -g cordova
npm install -g ionic@1.4.2
Este processo pode demorar alguns minutos, dependendo de sua conexão. Ao

concluir, digite o comando a seguir para verificar se a instalação foi efetuada
com sucesso.
ionic --version
Se estiver instalada corretamente, a versão do Ionic Framework deverá ser apre-

sentada no terminal.
2 Disponível para instalação em: <https://git-scm.com/downloads>.
Instalando Ambiente
52 UNIDADE II
É possível ocorrer erros em algumas máquinas, dependendo do sistema

operacional e versão. Caso isso ocorra com você, não deixe de procurar pos-
síveis soluções na internet, copiando seu código de erro. Um site de refe-
rência mundial para procurar ajuda e possíveis soluções é o Stack Overflow.
Fonte: o autor.
CRIANDO O PRIMEIRO APP
O Ionic disponibiliza alguns

templates de projetos, ou seja,
aplicativos exemplos prontos
para ser editados, isso facilita
para que não seja necessário
criar todos os arquivos manuais.
Os templates disponíveis estão
exibidos na Tabela 1.
Tabela 1 - Templates disponíveis
BLANK Cria um projeto em branco apenas com uma tela inicial

SIDEMENU Cria um projeto com algumas telas e um menu lateral
TABS Cria um projeto com algumas abas
MAPS Cria um projeto com um mapa exemplo
SALESFORCE Cria um projeto com Ionic e Salesforce
COMPLEX-LIST Cria um projeto com uma lista de exemplo
Fonte: o autor.
Vamos começar com um projeto em branco, para isso digite o comando start, e
seus parâmetros, no terminal.

53
ionic start PrimeiroApp blank
Neste momento, o Ionic começará a fazer download do arquivo de template e

executará algumas tarefas, se for a primeira vez que você executa este comando,
ele pergunta se você deseja criar uma conta na plataforma ionic.io - assunto que
será abordado em outro material - , e você deve responder sim (Y) ou não (n).
Se responder sim ele irá abrir o site do ionic.io, e se responder não ele irá ape-
nas continuar com a criação do projeto.
Para este momento responda n:
Create an ionic.io account to send Push Notifications

and use the Ionic View app?
(Y/n): n
Vamos entender o que cada comando faz:

■■ start: cria um novo aplicativo.
■■ PrimeiroApp: define o nome do aplicativo, uma pasta com este nome
será criada no diretório que você está. O nome do aplicativo poderá ser
alterado posteriormente caso seja necessário.
■■ blank: este é o template utilizado para criar o app.
Para testar nosso primeiro aplicativo, entre na pasta que foi criada com o nome
do seu aplicativo, via linha de comando.
cd PrimeiroApp
Em seguida, digite o comando para rodar o aplicativo no browser:
ionic serve
Criando o Primeiro App

54 UNIDADE II
Na primeira vez que você executa este comando, o Ionic irá perguntar em qual
IP você deseja deixar acessível seu projeto, para este momento escolha localhost.
Você verá seu aplicativo rodando no navegador como a Figura 1.
Figura 1 - Print do aplicativo rodando no navegador Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Fonte: o autor.
Quando criamos um novo aplicativo, o Ionic utiliza o Cordova para criar a

estrutura base do aplicativo já com o template escolhido, pois como dito ante-
riormente, o Ionic utiliza o Cordova como base para realizar algumas tarefas.
Abra a pasta PrimeiroApp e veja os seguintes arquivos que são exibidos na
Figura 2.

55
Figura 2 - Print dos arquivos do aplicativo

Fonte: o autor.
Vamos discutir cada arquivo no seu devido momento, por enquanto precisamos
apenas conhecer o config.xml e a pasta www.
CONFIG.XML
Neste arquivo são definidos os principais parâmetros de inicialização e permis-

sões que o Cordova precisa para startar e compilar seu aplicativo para diferentes
plataformas.
Se você estiver utilizando o Sublime Text, abra seu projeto e verifique o arquivo
config.xml.
A segunda linha define o pacote do projeto e a versão do seu aplicativo, você
precisará trocar esta versão toda vez que for disponibilizar uma nova versão do
seu aplicativo nos marketplaces como Play Store e Apple Store. Veremos mais
detalhes de como publicar em outro momento.
Criando o Primeiro App

56 UNIDADE II
<widget id=”com.ionicframework.
primeiroapp117395” version=”0.0.1” …
Da linha três até a linha nove podemos ver o nome do aplicativo, que irá apare-
cer nos atalhos do device, com a descrição e os dados do autor. As demais linhas
são configurações de inicialização, habilitação de plugins e permissões, as quais
discutiremos quando chegar o momento.
WWW
Nesta pasta, www, você irá encontrar os arquivos HTML/CSS e JavaScript do seu
aplicativo, e todos os arquivos, contidos nesta pasta ou criados por você, pode-
rão ser utilizados pelo seu aplicativo. Vamos entender a estrutura que o Ionic
criou dentro desta pasta.
No arquivo style.css iremos codificar os estilos personalizados dos elementos
quando necessário. Na pasta img, iremos colocar todas nossas imagens. O
arquivo app.js é o principal arquivo JavasScript do aplicativo, nele iremos
configurar as rotas (telas) e criar os controles. O arquivo index.html é nossa
primeira tela do aplicativo (view).
Neste momento testamos e entendemos apenas o template blank, que cria

um aplicativo em branco. Mas, o que pode ser feito com os outros templa-
tes? Esta resposta você pode descobrir se aventurando em criar outros apli-
cativos e analisando os arquivos e layouts que são criados!

57
COMPONENTES
O Ionic Framework disponibiliza diversos componentes para criar seu aplica-

tivo, estes componentes nada mais são do que classes em CSS para renderizar da
melhor forma seu elemento em HTML. Você pode adicionar mais atributos em
CSS nos componentes ou até mesmo criar seu próprio componente.
Existem duas formas de utilizar alguns dos componentes do Ionic:
■■ Utilizar elementos nativos do HTML e adicionar as classes CSS
<ul class=”list”>
<li class=”item”>
...
</li>
</ul>
Componentes
58 UNIDADE II
■■ Utilizar as nomenclaturas dos elementos já customizados do Ionic

<ion-list>
<ion-item>
...
</ion-item>
</ion-list>
Os resultados das duas formas são os mesmos. Neste material, vamos utilizar,
na maioria dos casos, os nomes de elementos do Ionic, para reduzir a digita-
ção de códigos.
HEADER, CONTENT E FOOTER
Header é um componente
que fica sempre fixo no topo,
utilizado para adicionar título
e botões de ações sobre a
tela aberta. Lembrando que
você pode adicionar novos
elementos no CSS para modi-
ficar de forma diferente ao
que o Ionic disponibiliza ou
até mesmo criar um Header
totalmente novo com o seu
próprio CSS.
Crie um novo projeto chamado AppHeader, não se esqueça de sair da pasta
do projeto criado anteriormente, para não gerar confusão nas pastas.

59
Para voltar uma pasta anterior por linha de comando, digite:
cd ..
Para criar, entrar na pasta e rodar um novo app, digite:

ionic start appHeader blank
cd appHeader
ionic serve
Quando criamos um novo app com o template blank, o index.html já contém

um Header. Vamos editá-lo alterando o arquivo www/index.html.
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>App Exemplo 1</h1>
</ion-header-bar>
Alteramos o estilo do Header e alteramos o seu título. Veremos como adicionar

botões na sessão Buttons.
Quando você faz alguma alteração no seu projeto e salva, o aplicativo no
browser é automaticamente recarregado. Você verá um resultado igual a Figura 3.
Header, Content e Footer

60 UNIDADE II
Figura 3 - Print do aplicativo

Fonte: o autor.
Esta visualização não é muito útil pois não simula o tamanho de tela do device.
Você pode redimensionar seu browser para que fique menor na largura ou utilizar
o módulo visualização mobile do Chrome. Para isso pressione F11 no Windows/
Linux ou option+command+J no Mac. Ao lado direito do terminal que foi apre-
sentado, clique nos três pontinhos e escolha a visualização Dock to right para
que seu terminal fique ao lado direito da página que é exibida (Figura 4).
Figura 4 - Print da opção Dock side

Fonte: o autor.
Em seguida, ao lado esquerdo do terminal, habilite a visualização para device.

Com isso seu aplicativo será apresentado e configurado nos padrões de um
smartphone.
Por padrão, os títulos em Android ficam ao lado esquerdo e no iOS ao centro,
porém, é possível forçar o título ficar no centro em ambos sistemas adicionado
o atributo align-title=”center” no componente header:

61
<ion-header-bar class=”bar-positive” align-

title=”center”>
</ion-header-bar>
O content é a área de conteúdo do Ionic, apenas o que estiver dentro deste ele-
mento irá receber rolagem, ou seja, o Header é fixo no topo e o Content utiliza o
restante da página, caso tenha mais elementos do que pode ser exibido na inter-
face, ele irá criar uma barra de rolagem.
Ainda no aplicativo AppHeader, adicione a classe padding no elemento ion-
-content para adicionar um espaço interno, e adicione os elementos dentro de
ion-content como mostra o exemplo a seguir.
<body ng-app=”starter”>
<ion-pane>
</ion-header-bar>
<ion-content class=”padding”>
<h1>Exemplo de conteúdo Ionic</h1>
<h2>Apenas uma demonstração da rolagem</

h2>
<h3>As linhas abaixo são exemplos</h3>
<img src=”img/ionic.png”>

62 UNIDADE II
<p>parágrafo 1</p>
<p>parágrafo 2</p>
<p>parágrafo 3</p>
<p>parágrafo 4</p>
<p>parágrafo 5</p>
<p>parágrafo 6</p>
</ion-content>
</ion-pane>
</body>
Salve seu código e veja no browser o resultado com a rolagem.

O footer também é um componente fixo, porém, fica sempre posicionado no
rodapé da página. Adicione o código a seguir após o componente </ion-content>:

63
<ion-footer-bar class=”bar-balanced”>
<div class=”title”>Rodapé do app</div>
</ion-footer-bar>
O resultado será algo parecido com a Figura 5.


Fonte: o autor.

64 UNIDADE II
SUBHEADER E SUBFOOTER
Bastante utilizado para combinar botões de ação, o SubHeader e SubFooter

também são fixos e ficam como secundários, ou seja, abaixo do Header, para
o SubHeader, e a cima do Footer, para o SubFooter, altere seu Header e Footer
seguindo o código a seguir:
...
<ion-pane>
</ion-header-bar>
<ion-header-bar class=”bar-subheader bar-

dark”>

65
<h1 class=”title”>SubHeader</h1>
</ion-header-bar>
...
</ion-content>
<ion-footer-bar class=”bar bar-balanced”>

<div class=”title”>Rodapé do app</div>
</ion-footer-bar>
<ion-footer-bar class=”bar-subfooter bar-

assertive”>
<div class=”title”>Rodapé secundário</div>
</ion-footer-bar>
</ion-pane>
...
Adiciona-se as classes bar-subheader e bar-subfooter para que o layout seja posi-

cionado da forma correta.
Subheader e Subfooter
66 UNIDADE II
CORES E ÍCONES
O Ionic vem com um conjunto de cores e uma nomenclatura, que podem ser
observados na Figura 6.
Figura 6 - Temas do Ionic

Fonte: o autor.

67
Podemos alterar as cores conforme o layout desejado, e é interessante utilizar

uma nomenclatura para facilitar o uso dessas classes.
A maioria dos componentes podem ser informados sobre qual tema de cor
utilizar. Por exemplo, para o Header e Footer podemos adicionar a classe bar-
-NOMETEMA. Para um elemento título, como H1, H2 etc., podemos adicionar
apenas o nome da classe. Conheceremos as diferentes aplicabilidades dos temas
no decorrer deste material.
O Ionic dispõe de um coleção de ícones baseados em fonte open source, com
mais de 500 ícones para serem utilizados em seu aplicativo. Para utilizar, basta
adicionar a classe do ícone desejado3 em um elemento <i></i>:
<i class=”icon ion-star”></i>
No site ionicons, ao clicar sobre um determinado ícone (Figura 7) você verá a

classe que deve ser adicionado no elemento.
Figura 7 - Print do site de ícones

Fonte: o autor.
Os botões são elementos essenciais de um aplicativo, no Ionic é possível esco-

lher o tema, estilo e adicionar ícone. Crie um novo projeto chamado appButtons:
3 Disponível em: <http://ionicons.com>.
Cores e Ícones
68 UNIDADE II
ionic start appButtons blank
Adicione o componente botão utilizando o tema assertive:
<button class=”button button-assertive”>Primeiro

botão</button>
É possível determinar que o componente ocupe 100% da largura da tela adicio-
nando a classe button-block ou se for utilizado em um formulário e deseja que
seja completo, por exemplo, ou seja, sem bordas arredondadas nas laterais pode
utilizar a classe button-full:
<button class=”button button-assertive button-

block”>
Primeiro botão
</button>
Os Buttons tem classes para tratar botões de diferentes tamanhos como peque-
nos, normais e grandes:
<button class=”button button-small button-

balanced”>
Botão pequeno
</button>
<button class=”button button-dark”>
Botão normal

69
</button>
<button class=”button button-large button-royal”>
Botão grande
</button>
Outro estilo bem utilizado é botão com apenas bordas ou apenas textos:
<button class=”button button-outline button-

positive”>
Botão apenas borda
</button>
<button class=”button button-clear button-

positive”>
Botão apenas texto
</button>
Porém, sem dúvida, o que traz mais elegância para um aplicativo, e uma melhor
experiência com o usuário, é um botão com ícone. Podemos customizar de dife-
rente formas os botões com os ícones, basta adicionar o nome da classe do ícone
desejado:
<button class=”button icon-left ion-home”>
Home
</button>
<button class=”button icon-left ion-star button-
Cores e Ícones
70 UNIDADE II
positive”>
Favoritos
</button>
<button class=”button icon-right ion-chevron-

right button-calm”>
Saiba mais
</button>
<button class=”button icon-left ion-chevron-left

button-clear button-dark”>
Voltar
</button>
<button class=”button icon ion-gear-a”></button>
<button class=”button button-icon icon ion-

settings”></button>
<button class=”button button-outline icon-right

ion-navicon button-balanced”>
Ações
</button>
O Header e Footer também aceitam botões, e você precisa apenas adicionar antes
ou depois do elemento title, para deixar a esquerda ou à direita:

71
<ion-header-bar class=”bar-balanced”>
<button class=”button icon ion-navicon”></

button>
<h1 class=”title”>AppButtons exemplos</h1>
<button class=”button”>Editar</button>
</ion-header-bar>
Ou, se preferir, sem as bordas:
<ion-header-bar class=”bar-balanced”>
<button class=”button button-icon icon ion-

navicon”></button>
<h1 class=”title”>AppButtons exemplos</h1>
<button class=”button button-clear”>Editar</

button>
</ion-header-bar>
Por fim, na área de conteúdo, é possível criar um barra de botões, na qual ocu-
pam 100% da largura da página e divide o tamanho de cada botão por igual:
<div class=”button-bar”>
<button class=”button button-dark”>Botão 1</

button>
Cores e Ícones
72 UNIDADE II

button>

button>
</div>
Seu projeto deve está com a aparência da Figura 8.

Fonte: o autor.

73
LIST E CARDS
O componente List é uma lista de itens e é muito comum sua utilização em apli-
cativos móveis; podem conter textos simples, botões, ícones, rótulos e imagens.
Crie um novo aplicativo chamado appList:
ionic start appList blank
Na área de conteúdo, adicione um título (H1) e um subtítulo (H2) e em seguida

crie a lista (ion-list) com cinco elementos de item (ion-item). Cada elemento
tem um título (H2) e um parágrafo (p). Vamos ao código:
<h1>As cinco cidades mais tops para se viver!</

h1>
<h4>Segundo site WalletHub.com</h4>
List e Cards
74 UNIDADE II
<ion-list>
<ion-item>
<h2>Colorado Springs, CO</h2>
<p>Colorado Springs é uma cidade norte-

americana, localizada no estado do Colorado, no
Condado de El Paso.</p>
</ion-item>
<ion-item>
<h2>Denver, CO</h2>
<p>Denver é a capital, a cidade mais

populosa e um dos 64 condados do estado norte-
americano do Colorado.</p>
</ion-item>
<ion-item>
<h2>Denver, CO</h2>
<p>Omaha é uma cidade localizada no estado

americano do Nebraska, no Condado de Douglas.</
p>
</ion-item>
<ion-item>

75
<h2>Tampa, FL</h2>
<p>Tampa é uma cidade localizada na costa

leste do estado norte-americano da Flórida, no
condado de Hillsborough, do qual é sede.</p>
</ion-item>
<ion-item>
<h2>San Diego, CA</h2>

<p>San Diego é uma cidade dos Estados

Unidos localizada no sul do estado da
Califórnia.</p>
</ion-item>
</ion-list>
</ion-content>
O Ionic tem algumas tratativas fixas para as listas e, quando necessário, é preciso
customizar via CSS os demais conteúdos e elementos. Veremos sobre customi-
zação de elementos na próxima unidade.
O resultado do código anteriormente apresentado pode ser visto na Figura 9.
List e Cards
76 UNIDADE II
Fonte: o autor.
Podemos adicionar um separador entre os itens adicionando a classe item-divi-

der no item que será o separador:
<ion-item class=”item-divider”>
Cidades do Brasil
</ion-item>
<ion-item>

77
Rio de Janeiro
</ion-item>
<ion-item>
Florianópolis
</ion-item>
Dentro de cada item, podem ser adicionados os principais componentes do

Ionic, mas para que sejam exibidos da melhor forma, precisamos adicionar as
classes que irão tratar sua exibição. Vamos começar pelos ícones, adicionando
o elemento <i> dentro de um dos itens:
<ion-item>
<i class=”icon ion-location”></i>
<h2>Tampa, FL</h2>
<p>Tampa é uma cidade localizada na costa ...</

p>
</ion-item>
Você deve ter observado que o ícone ficou pequeno, e não ficou ao lado direito,
como é comum ser utilizado. Agora vamos adicionar a classe item-icon-left, que
altera o estilo do ícone dentro do item, ficando assim:
<ion-item class=”item-icon-left”>
<i class=”icon ion-location”></i>
List e Cards
78 UNIDADE II
<h2>Tampa, FL</h2>
<p>Tampa é uma cidade localizada na costa

...</p>
</ion-item>
Você irá perceber com o tempo que a maioria dos elementos do Ionic são cus-
tomizados dessa forma, ou seja, adicionando classes para compor com outros
elementos.
Alterando a classe do item para item-icon-right o ícone passa a ser exibido
na direita:
<ion-item class=”item-icon-right”>
É comum ver em listas uma determinada área destacada, em Ionic chamamos

esse atributo de Badge. Altere outro item adicionando um <span> com as clas-
ses a seguir:
<ion-item>
<h2>Denver, CO</h2>
<p>Omaha é uma cidade localizada no estado

...</p>
<span class=”badge badge-assertive”>3</span>
</ion-item>

79
Também é possível adicionar um texto

informativo de um item, chamado de Note. Altere
o item Rio de Janeiro que contém apenas um
texto:
<ion-item>
Rio de Janeiro
<span class=”item-note”>
Popular
</span>
</ion-item>
Um item pode ser clicável, basta alterar o componente para <i> e adicionar a
classe item. Vamos alterar um dos itens deixando o código assim:
<a class=”item”>
<h2>Colorado Springs, CO</h2>
<p>Colorado Springs é uma cidade norte-

americana ...</p>
</a>
Perceba que quando clicamos neste item um efeito de fundo cinza é exibido.
Vamos inserir um botão em um dos itens que tem apenas um texto, adicio-
nando a classe item-button-left ou item-button-right:
List e Cards
80 UNIDADE II
<ion-item class=”item-button-right”>
Florianópolis
<button class=”button button-positive”>
<i class=”icon ion-ios-telephone”></i>
</button>
</ion-item>
Nossa lista deve apresentar algo parecido como a Figura 10.
Figura 10 - Print do aplicativo alterado

Fonte: o autor.

81
As listagem observada na Figura 10 é bem utilizada para telas de parâmetros,

formulários e ações. Vamos agora ver listagem com exibição de imagens. Para
isso, vamos criar um novo projeto chamado appListImage:
ionic start appListImage blank
Na pasta img do seu projeto adicione três imagens diferentes para usarmos como
exemplo, se preferir, você pode usar as imagens utilizadas neste material, que
estão no GitHub. Salve todas as imagens na pasta img.

Na área de conteúdo, adicione a lista a seguir e três itens com a classe item-
-avatar para que a exibição das imagens sejam arredondadas:
<ion-content>
<ion-list>
<ion-item class=”item-avatar”>
<img src=”img/city_1.jpg”>
<h2>San Francisco, CA</h2>
<p>São Francisco é a quarta cidade mais

populosa do estado da Califórnia.</p>
</ion-item>
<h2>Lexington, KY </h2>
<p>Lexington é a segunda cidade mais

populosa do estado americano do Kentucky.</p>
List e Cards
82 UNIDADE II
</ion-item>
<h2>Washington, DC</h2>
<p>Washington, D.C. é a capital dos

Estados Unidos.</p>
</ion-item>
</ion-list>
</ion-content>
O resultado deste componente será o mesmo exibido na Figura 11.
Figura 11 - Print do aplicativo alterado

Fonte: o autor.

83
Outra opção para lista com imagem é utilizar a classe item-thumbnail-left para
adicionar uma imagem maior e sem arredondamento ao lado esquerdo, ou o
item-thumbnail-right para adicionar ao lado direito. Também podemos adicio-
nar a classe item-text-wrap para o texto não ser limitado com reticências:
Adicione dois item em nossa lista como thumbnail:
<ion-item class=”item-thumbnail-left”>
<h2>Victoria, BC</h2>
<p>Victoria é a capital da província

canadense de Colúmbia Britânica.</p>
</ion-item>
<ion-item class=”item-thumbnail-right item-

text-wrap”>
<h2>Sacramento, CA</h2>
<p>Sacramento é a capital do estado norte-

americano da Califórnia e sede do condado de
Sacramento.</p>
</ion-item>
É comum ver este componente sendo utilizado nas aplicações mais recentes,
pois com ele podemos exibir informações com um design lúdico de um cartão.
Embora dentro do Card possa ser adicionado qualquer estrutura de elementos,
é indicado utilizar itens como utilizamos em listas.
Crie um novo aplicativo com o nome appCard:
List e Cards
84 UNIDADE II
ionic start appCard blank
Adicione o componente Card e um item de texto sem limitação:
<ion-content>
<div class=”card”>
<ion-item class=”item-text-wrap”>
Este é um simples Card com um texto para
visualizar o comportamento do componente.
</ion-item>
</div>
</ion-content>
Você pode adicionar a classe list em um card para ele se comportar igual a uma
lista, desta forma podemos utilizar qualquer componente de lista em nosso card.
Veja um exemplo com diferentes classes de itens:
<div class=”list card”>
<div class=”item item-divider”>
Opções do usuário
</div>
<div class=”item item-text-wrap”>

85
Escolha uma das opções abaixo
</div>
<a href=”#” class=”item item-icon-left”>
<i class=”icon ion-home”></i>
Definir endereço
</a>
<i class=”icon ion-ios-telephone”></i>
Editar número de telefone
</a>
<i class=”icon ion-wifi”></i>
Escolher uma rede preferencial
</a>
<i class=”icon ion-card”></i>
Alterar dados de pagamento
</a>
</div>
O resultado pode ser visto na Figura 12.
List e Cards
86 UNIDADE II
Figura 12 - Print do aplicativo de card alterado
Fonte: o autor.
Outro exemplo de itens combinados:
<div class=”list card”>
<div class=”item item-avatar”>
<img src=”img/user1.png”>
<h2>Fábio Rogério SJ</h2>
<p><b>32min</b> - Compartilhou uma foto </

p>
</div>
<div class=”item item-body”>
<img class=”full-image” src=”img/maringa.

jpg”>

87
<p> Pensa em um lugar show! Recomendo

todos irem visitar a grande Maringá no Paraná
:)</p>
<p>
<a href=”#” class=”subdued”>1 Curtida</a>
<a href=”#” class=”subdued”>5

Comentários</a>
</p>
</div>
</div>
Figura 13 - Print do aplicativo de card

Fonte: o autor.
List e Cards
88 UNIDADE II
FORMS
Formulários são componentes essenciais para diferentes aplicativos, e são também

um grande desafio, pois pesquisas revelam que usuários de aplicativos móveis
não gostam de preencher formulários grandes em seus devices.
O Ionic fornece uma estrutura de formulários que são utilizados com lis-
tas e itens, sendo assim, cada campo é um item de uma lista composto por um
label. Assim como os outros componentes, estes também podem ser combina-
dos com os demais componentes do framework.
É importante definir corretamente o tipo do campo, para que o teclado vir-
tual seja customizado, dependendo do tipo. Para saber quais tipos são suportados,
veja na documentação oficial4 do Ionic Framework4 ou outros documentos sobre
tipos em HTML5.
Vamos aos códigos, crie um novo aplicativo chamado appForms:
4 Disponível em: <http://ionicframework.com/html5-input-types/#overview>.

89
ionic start appForms blank
Na área de conteúdo vamos criar três campos e um botão. Cada campo deve estar
dentro de um label que recebe a classe item e item-input para que os campos
ocupem 100% do espaço do item da lista e definimos um valor para a proprie-
dade placeholder, do HTML5, para quando um valor for digitado no campo o
rótulo oculte. O botão está em uma outra div com a classe padding para não
ficar colado nas laterais.
<ion-list>
<label class=”item item-input”>
<input type=”text” placeholder=”Nome

completo”>
</label>
<input type=”email” placeholder=”E-mail”>
</label>
<textarea placeholder=”Comentário”></
textarea>
</label>
</ion-list>
<div class=”padding”>
<button class=”button button-block button-

positive”>
Forms
90 UNIDADE II
Enviar comentário
</button>
</div>
O resultado esperado pode ser visto na Figura 14.
Figura 14 - Print do aplicativo de form
Fonte: o autor.
Podemos adicionar um rótulo fixo do lado esquerdo adicionando um span com

a classe input-label:
<span class=”input-label”>Username</span>
<input type=”text”>
</label>
Para deixar um rótulo fixo no topo, adicione a classe item-stacked-label no item:
<label class=”item item-input item-stacked-

91
label”>
<span class=”input-label”>Primeiro nome</

span>
<input type=”text” placeholder=”Fábio”>
</label>
Outra opção interessante para os rótulos do topo, é utilizar a classe item-floa-

ting-label para que o rótulo fique flutuando:
<label class=”item item-input item-floating-

label”>
<span class=”input-label”>Sobrenome</span>
<input type=”text” placeholder=”Digite seu

sobrenome”>
</label>
Os campos podem ser agrupados com botões:
<div class=”item item-input-inset”>
<label class=”item-input-wrapper”>
<input type=”email” placeholder=”Email”>
</label>
<button class=”button button-small button-

balanced”>
Enviar
Forms
92 UNIDADE II
</button>
</div>
Também é possível adicionar ícones:
<i class=”icon ion-search placeholder-

icon”></i>
<input type=”text” placeholder=”Procurar...”>
</label>
TOGGLE E CHECKBOX
Toggle é um componente criado espe-

cificamente para aplicativos móveis,
mas que hoje também podemos ver
em aplicações web. Crie um novo pro-
jeto com o nome appToggle:
ionic start appToggle blank
Vamos criar uma lista de opções sendo cada item um toggle marcado com a
classe item-toggle, assim, o texto fica ao lado esquerdo e o botão toggle ao lado
direito. As cores de cada toggle pode ser customizada conforme os temas do Ionic.

93
Para complementar nosso exemplo vamos adicionar um card como pergunta:
<div class=”card padding”>
Quais tecnologias você esta aprendendo?
</div>
<ion-list>
<ion-item class=”item-toggle”>
HTML5
<label class=”toggle toggle-balanced”>
<input type=”checkbox”>
<div class=”track”>
<div class=”handle”></div>
</div>
</label>
</ion-item>
CSS
Toggle e Checkbox
94 UNIDADE II
</div>
</label>
</ion-item>
JavaScript
</div>
</label>
</ion-item>
</ion-list>
</ion-content>

95

Figura 15 - Print do aplicativo de Toggle

Fonte: o autor.
Os checkbox permitem que o usuário selecione um número de itens em um con-

junto de opções. Crie um novo projeto chamado appCheckbox:
ionic start appCheckbox blank
Este componente também usa como base o componente lista onde cada item
recebe um checkbox e você pode customizar as cores utilizando os temas. Para
exemplificar, vamos deixar o último item com uma cor diferente:
<ion-list>
<ion-item class=”item-checkbox”>
<label class=”checkbox”>
</label>
HTML5
Toggle e Checkbox
96 UNIDADE II
</ion-item>
</label>
CSS
</ion-item>
<label class=”checkbox checkbox-

assertive”>
</label>
JavaScript
</ion-item>
</ion-list>

97

Figura 16 - Print do aplicativo de Checkbox

Fonte: o autor.
RADIO BUTTONS, RANGE E SELECT
Radio Buttons, ao contrário dos checkbox, permite selecionar apenas uma opção
dentre a listagem, enquanto os checkbox permitem selecionar mais de uma opção.
Crie um novo projeto chamado appRadioButtons:
ionic start appRadioButtons blank
Vamos criar um subHeader e uma lista, nela vamos adicionar alguns radio but-
tons. O body da página deverá estar assim:
<ion-pane>
<ion-header-bar class=”bar-positive”
align-title=”center”>
Radio Buttons, Range e Select

98 UNIDADE II
<h1 class=”title”>Exemplo Radio Buttons</

h1>
</ion-header-bar>
<ion-header-bar class=”bar-subheader bar-

calm” align-title=”center”>
<h1 class=”title”>Qual tecnologia você

mais domina?</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio>PHP</ion-radio>
<ion-radio>Java</ion-radio>
<ion-radio>JavaScript</ion-radio>
<ion-radio>.NET</ion-radio>
<ion-radio>Ruby</ion-radio>
<ion-radio>Python</ion-radio>
<ion-radio>Go</ion-radio>
</ion-list>
</ion-content>
</ion-pane>
</body>

99


Fonte: o autor.
O componente Range é utilizado para definir um intervalo de valores com o cli-

car e arrastar do toque. É possível customizar seus ícones e cores.
Crie um novo projeto com o nome appRange:
ionic start appRange blank
Adicione na área de conteúdo algumas opções com cores diferente para exem-
plificar o componente:
<ion-list>
<ion-item class=”range range-positive”>
<i class=”icon ion-ios-sunny-outline”></i>
<input type=”range” min=”0” max=”100”

value=”12”>
<i class=”icon ion-ios-sunny”></i>

100 UNIDADE II
</ion-item>
<ion-item class=”range range-calm”>
<i class=”icon ion-ios-lightbulb-

outline”></i>

value=”25”>
<i class=”icon ion-ios-lightbulb”></i>
</ion-item>
<ion-item class=”range range-balanced”>
<i class=”icon ion-ios-bolt-outline

assertive”></i>

value=”38”>
<i class=”icon ion-ios-bolt assertive”></

i>
</ion-item>
</ion-list>

101


Fonte: o autor.
O componente de seleção listada é muito utilizado em sistemas desktop e web, o

Ionic não customiza muito este componente, pois os próprios browsers, de cada
sistema operacional móvel, já customizam a visualização com o seu padrão. Neste
momento vamos testar apenas no browser do desktop.
Crie um novo projeto com o nome appSelect:
ionic start appSelect blank
Adicione uma lista com um item contendo um input de select:
<ion-content>
<ion-list>
<ion-item class=”item-input item-select”>
<div class=”input-label”>
Qual fruta você mais gosta?

102 UNIDADE II
</div>
<select>
<option>Laranja</option>
<option selected>Maça</option>
<option>Banana</option>
<option>Caqui</option>
<option>Goiaba</option>
</select>
</ion-item>
</ion-list>
</ion-content>
TABS E GRID
O componente tabs permite uma navegação entre telas simulando uma seleção
de abas. Muitos aplicativos em iOS utilizam este padrão de navegação. Crie um
novo projeto chamado appTabs:
ionic start appTabs blank
Este componente é melhor utilizado com as rotas em AngularJS, mas como neste
material veremos apenas o essencial dos componentes, vamos criar algo mais
simples, apenas para conhecer o componente.

103
As tabs podem ser apenas texto, ícone ou texto e ícone. Também podemos
escolher a posição do ícone e as cores conforme temas do ionic.
Cada tab tem sua própria área de conteúdo, então, vamos adicionar três tabs
com texto e ícone, e vamos definir diferentes ícones para quando a aba estiver
selecionada ou não. Vamos ao código:
<ion-pane>
<ion-header-bar class=”bar-assertive”>
<h1 class=”title”>Exemplo tabs</h1>
</ion-header-bar>
<ion-tabs class=”tabs-assertive tabs-icon-

top”>
<ion-tab title=”Home” icon-on=”ion-ios-

filing” icon-off=”ion-ios-filing-outline”>
<ion-view>
Conteúdo do tab Home
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title=”Sobre” icon-on=”ion-ios-

clock” icon-off=”ion-ios-clock-outline”>
TABS e GRID
104 UNIDADE II
<ion-view>
Conteúdo do tab Sobre
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title=”Configurações” icon-
on=”ion-ios-gear” icon-off=”ion-ios-gear-
outline”>
<ion-view>
Conteúdo do tab Configurações
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-pane>
</body>
Por ser um componente muito utilizado para navegação, Android e iOS exibem
diferente, podemos testar utilizando o Ionic lab, que tem por objetivo mostrar
a aplicação nos dois sistemas. Para utilizar o Ionic lab, digite --lab no final do
comando para testar o aplicativo no browser:

105
ionic serve --lab
As grids em Ionic são simples e fáceis de implementar, pois o componente utiliza

o recurso FlexBox do CSS3 para desenhar os elementos. Crie um novo projeto
chamado appGrid:
ionic start appGrid blank

Vamos criar uma grid simples com duas linhas e duas colunas, adicione na área
de conteúdo o componente:
<ion-content>
<div class=”row”>
<div class=”col”>1</div>
</div>
</div>
</ion-content>
Para verificar com mais clareza nossos exemplos, vamos alterar a cor de fundo
de cada coluna e adicionar uma borda, editando o style.css da pasta css:
TABS e GRID
106 UNIDADE II
/* Empty. Add your own CSS if you like */
.col {
background-color: #CCC;
border:2px solid #fff;
Podemos ver o resultado na Figura 19.
Figura 19 - Print do aplicativo de grid

Fonte: o autor.
É possível definir um tamanho fixo para uma determinada coluna. Adicione

uma nova linha:
<div class=”col col-50”>5</div>
</div>
Perceba que a primeira coluna está ocupando 50% do espaço da linha, e as demais
colunas, que estão sem tamanho fixo, ocupam o espaço que sobrou:

107
Figura 20 - Print do aplicativo de grid

Fonte: o autor.
Os tamanhos possíveis podem ser vistos na Tabela 2.

Tabela 2 - Tamanhos possíveis para Grid
CLASSE TAMANHO OCUPADO

.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%
Fonte: o autor.
Outro recurso é deixar uma coluna em branco, ou seja, reservar o espaço porém
não exibir nenhum elemento, adicione uma nova linha:
<div class=”col col-33 col-offset-33”>8</div>
</div>
TABS e GRID
108 UNIDADE II
Os tamanhos para os espaços em branco são os mesmos da Tabela 2, porém, o

nome deve ser col-offset-TAMANHO.
Quando temos uma coluna com altura variável, podemos definir como será o
alinhamento vertical, sendo no topo, centro ou rodapé. Adicione uma nova linha:
<div class=”col col-top”>10</div>
<div class=”col col-center”>11</div>
<div class=”col col-bottom”>12</div>
<div class=”col”>13<br>14<br>15<br>16</div>
</div>
Caso o alinhamento seja para a linha inteira, adicione a classe direto no row ao
invés de adicionar na col desta forma:
<div class=”row row-top”>
<div class=”col”>13<br>14<br>15<br>16</div>
</div>
Utilizar números fixos de colunas pode não ser apropriado se você precisa
de um layout responsivo, nestes casos, você pode utilizar três classes para
tamanhos diferentes. Vamos ver isso na prática, adicione uma nova linha com
quatro colunas:

109
<div class=”row responsive-sm”>
</div>
Vejam no resultado que o tamanho da tela é validado, e conforme tenha mais

espaço, as colunas são exibidas lado a lado, caso seja menor elas são exibidas
uma embaixo da outra.
Os tamanhos validados podem ser vistos na Tabela 3, juntamente com suas
respectivas classes de utilização:
Tabela 3 - Print do aplicativo de grid
CLASSE QUEBRAR QUANDO

.responsive-sm For menor que telefone em visualização modo
paisagem
.responsive-md For menor que tablet em visualização modo
retrato
.responsive-lg For menor que tablet em visualização modo
paisagem
Fonte: O autor
Estas são classes criadas pelo framework, mas nada impede de você criar seus
próprios tamanhos e validação de responsividade.
TABS e GRID
110 UNIDADE II
Neste momento você deve estar animado(a) e entusiasmado(a) com a simpli-

cidade em criar novos aplicativos com um framework, que faz boa parte do
trabalho que seria difícil para você. Foi exatamente isso que pretendemos mos-
trar nesta unidade.
Aprendemos e testamos os principais componentes, de HTML e CSS, do
Ionic framework, agora, você tem uma visão ampla do que é possível fazer com
os componentes já prontos do Ionic. Mas, lembre-se, você pode, e deve, criar
seus próprios componentes com CSS.
Lembre-se que o Ionic já traz inúmeros componentes de interface, mas você
pode, e deve, estender os recursos, bem como criar outros frameworks que pro-
porcionem elementos e componentes ricos em interação com o usuário.
Como nosso objetivo foi apresentar os principais componentes, não testa-
mos de todas as formas dos componentes, sendo assim, sugiro que antes de ir
para a próxima unidade, crie novos aplicativos testando e validando as diferen-
tes aplicabilidades dos componentes vistos até este momento. Você pode utilizar
como guia a documentação oficial do Ionic Framework5.
Outro assunto que é importante relembrarmos, e que foi discutido nesta
unidade, é a importância que o design tem para seu aplicativo. Elementos como
UX Design e UI Design devem ser estudados com mais ênfase. Devemos ter em
mente que criar aplicações com design inovadores e ricos em recursos visuais
não é simples, pois isso vai sendo melhorado com o tempo de prática. Para seu
início, você pode se inspirar em trabalhos criados por outros usuários e anali-
sar sua linha de pensamento.
Na próxima unidade iremos abordar a customização de componentes, bem
como a criação de novos estilos de componentes e diferentes aplicações que
podem ser extendidas e complementadas com recursos customizado. Então,
vamos lá, prepare-se e não deixe de fazer todos os exercícios, lembre-se que à
prática leva a perfeição.
5 Disponível em: <https://ionicframework.com/docs/v1/>.

111
1. Os componentes do Ionic Frameworks são pensados para que o usuário tenha

uma ótima experiência de usabilidade. Sabendo disso, assinale a alternativa
que apresente o código correto para criar um componente de botão:
a. <button class=”button button-positive”>OK</button>.
b. <button type=”button”>OK</button>.
c. <button class=”button-positive”>OK</button>.
d. <button type=”button-positive”>OK</button>.
e. <button>OK</button>.
2. Os temas do Ionic Framework foram criados para facilitar a padronização das

cores entre os componentes de interface. Com base nesta afirmação, marque o
código correto para criar um card no tema vermelho:
a. <div class=”card assertive”></div>.
b. <div class=”card red”></div>.
c. <div class=”card danger”></div>.
d. <div class=”card-red”></div>.
e. <div class=”card-danger”></div>.
3. Sabemos que os temas possuem algumas limitações, mas que é possível criar
novos temas com base nos já existentes. Sendo assim, assinale verdadeiro (V)
ou falso (F) com relação à existência dos temas apresentados a seguir:
( ) positive.
( ) balanced.
( ) royal.
( ) dark.
( ) calm.
112
4. Os elementos visuais têm diferentes aplicabilidades quando estamos em um

device. Com base nesta afirmação, assinale a alternativa que apresente o có-
digo correto sobre a utilização do componente range:
a. <input type=”text” minValue=”0” max=”100” value=”0”>
b. <input type=”range” minValue=”0” max=”100” value=”55”>
c. <input range=”range” min=”0” max=”100” value=”60”>
d. <input type=”range” min=”0” maxValue=”100” value=”14”>
e. <input type=”range” min=”0” max=”100” value=”12”>
5. O componente de GRID e Tab proporciona incríveis recursos para diagramação

de layout, bem como listagem de registros de forma rica em interface. Sabendo
disso, assinale a alternativa que apresente a correta utilização desses com-
ponentes:
a. Criando uma classe no CSS para comportar o estado inicial da TAB.
b. A melhor forma é utilizar as rotas do angular.
c. Criando um elemento pai com as grids alinhadas em um TAB.
d. Utilizando plugins de terceiro através do Apache Cordova.
e. Criando grid em paralelo com componente de form.
113
Ionic 2
Ao longo dos últimos dois anos, milhões de desenvolvedores de quase todas as indús-
trias ao redor do mundo têm construído mais de 1,2 milhão de aplicativos móveis com
Ionic.
Quando surgiu o Ionic em 2013, tinha como objetivo de criar uma maneira melhor para
os desenvolvedores web construir aplicações para as lojas de aplicativos. Hoje, Ionic é
a tecnologia mais popular para desenvolvimento móvel multi-plataforma do mundo.
Analisando o seu crescimento, o time do Ionic optou por melhorar e atualizar sua tecno-
logia, permitindo não apenas a atual geração de desenvolvedores móveis, mas também
que outras milhões de pessoas percebam que podem construir aplicativos surpreen-
dentes.
A criação do Ionic 2 foi como se o time do Ionic tivesse voltado à estaca zero e repensado
como um kit de ferramentas móvel deve funcionar. Com isso, foi melhorado drastica-
mente seu desempenho e reduzido a complexidade do código. A nova versão utiliza
também a nova versão do AngularJS, e isto fez com que toda a forma de implementar
aplicativos com Ionic 1 ficasse diferente da versão 2.
Mas não interprete essa nova versão como sendo uma ação que irá descontinuar o Io-
nic versão 1, ao contrário, ela irá continuar sendo utilizada devido ao fato de muitos
não gostarem da nova versão e acharem mais prático e simples de criar aplicações com
Angular 1. Recomendo você seguir os passos de instalação e instalar a versão 2 para
conhecer as melhorias em recursos visuais e comandos.
No momento em que foi escrito este livro, o Angular já estava sendo desenvolvido para
uma nova versão (versão 4), com inúmeros recursos ajustados para ganho de perfor-
mance. Portanto, não conseguimos prever o futuro das versões do Angular, nem do Io-
nic, mas como dito nesta unidade, você pode explorar a criação de aplicativos móveis
utilizando o Apache Cordova, no qual você terá total controle sobre qual framework de
frontend utilizar.
Outro ponto de extrema importância com relação ao Ionic versão 1, é que a comunida-
de global do framework está muito ativa nesta versão, sempre descrevendo pontos de
melhorias e métodos que podem ajudar sua aplicação a ter um ganho significativo de
performance.
Fonte: o autor.
AngularJS: uma Abordagem Prática e Objetiva

Michael Henrique R. Pereira
Editora: Novatec
Sinopse: AngularJS é um framework JavaScript
revolucionário, mantido por um time de engenheiros
Google, ele simplifica o desenvolvimento de aplicações web
robustas e de sucesso. Por este motivo, tem se mostrado
em crescente ascensão, sendo considerado a tecnologia
do momento para desenvolvimento de aplicações web. Se
você tem interesse em aprender essa fantástica tecnologia,
de forma simples e prática, mas está fugindo de livros enormes,
esse é o livro certo para você. Ele foi criado utilizando uma abordagem simples e objetiva, baseada em
uma série de exemplos, que proporcionará a você um conhecimento sólido sobre conceitos inerentes
ao framework. Você será capaz de desenvolver aplicações web utilizando o AngularJS.
115
REFERÊNCIAS

SHOTTS, K. Mastering PhoneGap Mobile Application Development. Birmin-
gham: Packt Publishing, 2016.
2016.
RUEBBELKE, L.; FORD, B. AngularJS in Action. Shelter Island: Manning Publications
Co, 2015.
REFERÊNCIAS ON-LINE
Em: <https://cordova.apache.org/#supported_platforms_section>. Acesso em: 04

1
mai. 2017.
GABARITO
1. A.
2. A.
3. Todas Verdadeiras.
4. E.
5. B.
CUSTOMIZANDO
III
UNIDADE
COMPONENTES
■■ Customizando listas
■■ Fontes, plano de fundo geral e campos
■■ Criando badges e customizando botões
■■ Customizando grid
■■ Customizando formulários
■■ Header transparente e scroll vertical
Plano de Estudo
■■ Customizando listas
■■ Fontes, plano de fundo geral e campos
■■ Criando badges e customizando botões
■■ Customizando grid
■■ Customizando formulários
■■ Header transparente e scroll vertical
119
INTRODUÇÃO
Olá caro(a) aluno(a).

Nesta unidade vamos trabalhar algo que é muito particular, que está ligado dire-
tamente com o campo de estudo UX Design. Cada aplicativo tem um público
específico e por isso deve ser analisado com muito cuidado para que o usuário
tenha a melhor experiência no aplicativo proposto.
As interfaces do usuário estão cada vez mais aprimoradas e estilizadas para
garantir uma boa experiência com o usuário. Os usuários também estão mais
exigentes e críticos com a navegabilidade e design das aplicações, existem vários

relatos de aplicações que não atingiram o público que gostaria por não ter pen-
sado na melhor nessa experiência.
Ravulavaru (2015) complementa que aprender sobre UX Design (experiência do
usuário) e UI Design (Interface do usuário) é um ponto de extrema importância
para que seu aplicativo tenha interfaces elegantes e proporcione uma experi-
ência agradável e satisfatória para o usuário final. No entanto, faremos apenas
uma pequena introdução a respeito, visto que não está no escopo desse material.
Para exemplificar e praticar, que é o objetivo central desta unidade, vamos criar
algumas interfaces de aplicativos sem funcionalidade, ou seja, sem ações e even-
tos, com o foco de ver as diferentes formas de customizar os componentes do
Ionic e também criar componentes próprios.
Neste material foram criadas algumas interfaces simples para atendermos a
customização dos principais componentes e comportamentos das interfaces
no Ionic. Em muitos casos vamos utilizar uma linguagem mais explicativa para
um melhor entendimento, porém, tenha em mente que quanto menor ficar seu
código mais performativo ele irá ficar.
A prática leva à perfeição, então, implemente os exemplos e fique à vontade para
estender os layouts aqui propostos com seu toque, e criar outros diferentes.
Introdução
120 UNIDADE III
CUSTOMIZANDO LISTAS
As listas em Ionic, na versão 1, são classes simples e limitadas em sua exibição.

Podemos criar listas com textos, imagens arredondadas e thumbnail, mas para
uma lista mais rica em componentes visuais, precisamos de algumas classes a
mais em nossa folha de estilo. Vamos criar uma lista de contatos com botões
diferenciados (Figura 1).
Figura 1 - Print do aplicativo de lista

Fonte: o autor.
121
Crie um novo aplicativo com o nome appContatos:
ionic start appContatos blank
Primeira coisa vamos criar um subheader para que o campo de pesquisa fique
sempre fixo no topo e apenas a lista sofra rolagem. A seguir, do seu header, adi-
cione um subheader:
<ion-header-bar class=”bar-subheader “>
<div class=”item item-input item-search”>
<i class=”icon ion-android-search

placeholder-icon icon-search”></i>
<input type=”search” placeholder=”Procurar

em contatos...”>
</div>
</ion-header-bar>
Na área de conteúdo (ion-content), adicione uma lista com avatar e botão do lado
direito. Vamos adicionar a classe list-custom para facilitar a seleção no CSS desta
nossa lista customizada. Vamos também adicionar um span com a classe badge-
-custom, para dar um comportamento diferente do badge que o Ionic propõem1.
1 Para gerar imagens de usuários você pode acessar o site disponível em: <https://randomuser.me/>.
Customizando Listas
122 UNIDADE III
<ion-list class=”list-custom”>
<ion-item class=”item-avatar item-button-

right”>
<img src=”img/user1.jpg”>
<h2>Luis Barbosa Santos</h2>
<span class=”badge-custom amigo”>Amigo</span>
<button class=”button button-balanced”>
<i class=”icon ion-checkmark-round”></i>
</button>
</ion-item>

right”>
<h2>Pedro Ribeiro Barros</h2>
<span class=”badge-custom familia”>Família</

span>
<button class=”button button-stable”>
<i class=”icon ion-plus-round”></i>
</button>
</ion-item>
123
right”>
<h2>Gabrielly Ribeiro Carvalho</h2>
<span class=”badge-custom familia”>Família</

span>
<button class=”button button-assertive”>

<i class=”icon ion-close-round”></i>
</button>
</ion-item>
...
...
Crie mais itens para que seja possível validar a rolagem da página.
O resultado, utilizando apenas os componentes do Ionic, pode ser visto na
Figura 2.
Figura 2 - Print do aplicativo de lista

Fonte: o autor.
Customizando Listas
124 UNIDADE III
Agora vamos à customização, primeiro vamos ajustar e customizar nosso hea-

der e subheader. No style.css adicione a classe a seguir:
.bar.bar-calm {
border-color: #3ec3d6;
background-color: #3ec3d6;
background-image:none;
.bar-subheader {
height: 70px;
background-image:none;
.has-subheader {
top: 110px;
Aqui, alteramos a cor do tema do Ionic para outra cor, aumentamos o tamanho
do subheader e ajustamos a área de conteúdo para respeitar o novo tamanho do
subheader. Vamos ajustar o campo de pesquisa:
.item-search {
border-radius: 16px;
margin-top: 10px;
125
margin-bottom: 10px;
.icon-search {
margin-right: 10px;
font-size: 20px;
}
Deixamos as bordas arredondadas, alinhamos o campo dentro do espaço existente

e aumentamos o tamanho do ícone do campo de pesquisa. Agora vamos a lista:
.list-custom .item {
border-width:0;
border-bottom-width: 1px;
border-top-width: 1px;
.list-custom .item:first-child {
border-top-width: 0;
.list-custom button {
margin-top: 8px;
border-radius: 50%;
width: 40px;
Customizando Listas
126 UNIDADE III
height: 40px;
.list-custom button i{
margin-left: -2px;
margin-top: 4px;
.list-custom span {
font-size: 12px;
.list-custom h2 {
margin-left: 10px;
.list-custom .item-avatar img {
top: 6px;
left: 5px;
max-width: 60px;
max-height: 60px;
Primeiro removemos as bordas da lista e deixamos apenas as bordas superior e

inferior, em seguida selecionamos o primeiro item da lista e removemos a borda
superior. Para os botões, aumentamos o tamanho, deixamos com as bordas arre-
dondadas e ajustamos as margens do botão e do ícone. Para o span, ajustamos
127
o tamanho da fonte, do h2 ajustamos a margem, e por fim, a imagem de avatar,

ajustamos o posicionamento e também o tamanho. Agora vamos ajustar a cor
do botão cinza para ficar mais visível:
.button.button-stable,
.button.button-stable:hover {
background-color: #d0d5d8;
color: #fff;
.button.button-stable.activated {
background-color: #c4c9cd;
Alteramos a cor de fundo e a cor do ícone. Para concluir nosso app, vamos adi-
cionar as classes do badge customizado:
.badge-custom {
background-color: #000;
color: #fff;
padding-left: 10px;
padding-right: 10px;
float: left;
Customizando Listas
128 UNIDADE III
margin-left: 10px;
.badge-custom.amigo {
background-color: #7bcef3;
.badge-custom.familia {
background-color: #efbb68;
.badge-custom.faculdade {
background-color: #74cb92;
Em geral, nosso novo componente destaca o span com cores diferentes para
cada categoria de contato.
FONTES, PLANO DE FUNDO GERAL E CAMPOS
Trabalhar com imagens de plano de fundo é sempre instigante e deixa nosso apli-
cativo com um aspecto de maioridade, mas lembre-se que a escolha de uma boa
imagem é fundamental para um design rico. Neste exemplo, a imagem é escura
para destacar os campos com cor clara (Figura 3).
129
Figura 3 - Print do aplicativo de login

Fonte: o autor.
Crie um novo aplicativo com o nome appLogin:
ionic start appLogin blank
Vamos primeiro criar nossa estrutura de elementos HTML, neste exemplo não
teremos header:
Fontes, Plano de Fundo Geral e Campos

130 UNIDADE III
<ion-pane class=”login-custom”>
<ion-content>
<h1>LifeBeach <span>night</span></h1>
<ion-list class=”list-inset”>
<ion-item class=”item-input”>
<i class=”icon ion-ios-person-outline
placeholder-icon”></i>
<input type=”text” placeholder=”Username”>
</ion-item>
<i class=”icon ion-ios-email-outline

<input type=”text” placeholder=”E-mail”>
</ion-item>
<i class=”icon ion-ios-locked-outline

<input type=”text” placeholder=”Senha”>
</ion-item>
<ion-item class=”item-button button-first”>

calm”>Criar conta</button>
131
</ion-item>
<ion-item class=”item-button”>
<button class=”button button-block icon-left

ion-social-facebook button-positive”>Logar com
Facebook</button>
</ion-item>
<ion-item class=”item-button”>

clear”>
Já tem uma conta? Clique aqui para logar
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
Adicionamos a classe login-custom no ion-pane, que é o painel principal da

aplicação, com isso, conseguimos aplicar um fundo na tela inteira. O h1 será
responsável pelo título do aplicativo, veja que dentro dele temos um span, pois
apenas naquele pedaço de texto iremos estilizar de forma diferente.
Para o formulário, adicionamos uma lista com itens de input e botões. Nosso
aplicativo sem estilo pode ser visto na Figura 4.

132 UNIDADE III
Figura 4 - Print do aplicativo de login
Fonte: o autor.
Vamos começar customizando o plano de fundo, no style.css, adicione a classe:
.login-custom {
background-image: url(../img/fundo.png);
background-size: cover;
background-position: center;
Minha imagem de fundo está com transparência para poder fundir com a cor
preta do próprio elemento, você pode usar outros recursos mais performáticos
133
como o background-blend-mode2, do CSS3. Para deixar a imagem responsiva,

ou seja, utilizar o espaço que tem disponível na tela, utilizamos o background-
-size:cover. Vamos customizar a lista:
.list {
width: 75%;
margin: auto;
margin-top: 60px;
.item {
background: none;
border:none;
.item-input {
border-bottom: 1px solid #fff;
.item-input i {
color: #fff;
font-size: 25px;
2 Disponível em: <https://css-tricks.com/basics-css-blend-modes/>.

134 UNIDADE III
.item-input input {
font-size: 16px;
margin-left: 10px;
color: #fff;
.item-button {
padding: 0;
Deixamos a lista ocupando 75% da tela e no centro, removemos o cor branca de

fundo e ajustamos tamanho de fonte e posicionamento dos elementos da lista-
gem. Agora vamos instalar fontes externas.
O processo de utilizar fontes é similar ao que fazemos para websites. Consiste,
basicamente, em deixar acessível o arquivo da fonte (.woff, .ttf, etc) e criar um @
font-face para declarar a fonte e suas propriedades. O Google tem um serviço
gratuito para fontes, o Google Fonts3, que tem mais de 800 fontes preparadas
para utilizar na web. Para agilizar os processos de baixar as fontes, criar o @fon-
t-face e incluir no projeto, eu criei um módulo em NodeJS para realizar essa
tarefa, então vamos lá. Faça a instalação de forma global do módulo getfont:
npm install -g getfont
Para utilizar o módulo basta selecionar, no site do Google Fonts, a fonte ou as

fontes que deseja utilizar no projeto e passar o link de Embed para o getfont. Para
este layout estou utilizando a fonte Pacifico e a Roboto, então, dentro da pasta
do projeto digite o comando a seguir:
3 Disponível em: <https://fonts.google.com/>.
135
getfont “Pacifico|Roboto” --ionic
Com o parâmetro --ionic informado, o módulo irá baixar a fonte e salvar den-
tro da pasta fonts, criar o font.css dentro da pasta css e alterar o index.html para
adicionar o carregamento da fonte.
O Roboto já tem instalado nos aparelhos com sistema operacional Android,
mas para outras plataformas, incluindo no browser, precisamos instalar a fonte
explicitamente.
Agora vamos alterar a fonte do título do nosso aplicativo, no style.css adi-
cione as seguintes classes:
h1 {
font-family: ‘Pacifico’;
color: #fff;
text-align: center;
font-size: 50px;
padding-top: 50px;
h1 span {
font-family: ‘Roboto’;
font-size: 18px;
position: absolute;
margin-top: 55px;
margin-left: -35px;

136 UNIDADE III
Definimos a fonte Pacifico para o h1, com exceção do span interno, no qual dei-
xamos com a fonte Roboto e um posicionamento diferente.
Para concluir nosso app, vamos customizar os botões:
.button-first {
padding-top: 20px;
.button.button-positive {
background-color: #3B5998;
.button-clear.button-clear {
padding: 0;
margin: 0;
font-size: 12px;
text-decoration: underline;
Alteramos a cor do tema azul do Ionic para ficar mais relativo com o azul do
Facebook e ajustamos as margens dos botões.
137
Sem dúvida, criar aplicativos com uma tipografia diferenciada traz um outro
sentido visual ao seu aplicativo, e explorar este universo da tipografia é algo
que trará ganhos significativos em UI Design para seus projetos.
CRIANDO BADGES E CUSTOMIZANDO BOTÕES
Este próximo exemplo é simples, mas didático, para percebermos que em um

mesmo layout podem existir diferentes estilos para os mesmos botões, e pode-
mos utilizar conceitos, como o badges, para outras finalidades (Figura 5).
Figura 5 - Print do aplicativo de profile

Fonte: o autor.
Criando Badges e Customizando Botões

138 UNIDADE III
Crie um novo aplicativo com o nome appProfile:
ionic start appProfile blank
Na área de conteúdo, adicione os seguintes elementos HTML:
<ion-content>
<div class=”top-profile”>
<div class=”badge”>3</div>
<img class=”profile” src=”img/fabiorogeriosj.

jpg”>
</div>
<h1 class=”name”>Fábio Rogério SJ</h1>
<h2 class=”prof”>Consultor & Desenvolvedor</h2>
<div class=”sociais”>
<button class=”button icon ion-social-facebook

button-positive button-facebook”></button>
<button class=”button icon ion-social-twitter

button-calm”></button>
<button class=”button icon ion-social-youtube

button-assertive”></button>
<button class=”button icon ion-social-github

button-positive”></button>
139
</div>
<h3>SOBRE MIM</h3>
<h4 class=”calm”>Fábio Rogério SJ</h4>
<p>Conhecido como Fábio Rogério SJ nas redes

sociais, é desenvolvedor de aplicações web e
mobile desde 2007. Hoje trabalha com consultoria e
treinamento.</p>
<h3>FALE COMIGO</h3>
<div class=”contato”>
<button class=”button icon ion-ios-telephone

button-assertive button-small”></button> +55 44
9999-8888
</div>
<button class=”button icon ion-ios-email

button-energized button-small”></button> fabio.
rogerio.sj@gmail.com
</div>
<button class=”button icon ion-ios-location

button-balanced button-small”></button> Av São
Paulo, 345, Centro, Maringá-PR
</div>

140 UNIDADE III
<button class=”button icon ion-earth button-

positive button-small”></button> www.fabiorogeriosj.
com.br
</div>
</ion-content>
Adicionamos alguns elementos de imagem, títulos e botões. Nosso app sem cus-
tomização pode ser visto na Figura 6.
Figura 6 - Print do aplicativo de profile

Fonte: o autor.
Vamos ao style.css e começar ajustando o topo da aplicação:
.bar {
background:none;
141
.top-profile {
text-align: center;
margin-top: 20px;
.top-profile img {
width: 120px;
border-radius: 50%;
.top-profile .badge {
background-color: #FF4B5A;
width: 22px;
height: 22px;
color: #fff;
border-radius: 50%;
text-align: center;
position: absolute;
margin-left: 90px;
margin-top: 5px;
Removemos o fundo da barra do topo, centralizamos o conteúdo do topo e

criamos o componente badge. Agora vamos ajustar o título e subtítulo do topo:

142 UNIDADE III
.name {
font-size: 18px;
color: #4E4E4E;
text-align: center;
margin: 0;
.prof {
font-size: 12px;
color: #A5A5A5;
text-align: center;
margin: 0;
Aplicamos cores, tamanho de fonte e posicionamento aos títulos. Agora vamos

customizar os botões de redes sociais:
.sociais {
text-align: center;
margin-top: 10px;
.sociais button {
border-radius: 50%;
143
min-width: 45px;
min-height: 45px;
margin: 5px;
.sociais button.button.icon:before {
font-size: 20px;
.button-positive.button-facebook {
background-color: #5171A5;
Apenas deixamos redondos e alteramos tamanho e posicionamento dos botões.

Para o botão do Facebook, alteramos também sua cor. Agora vamos ajustar os
demais títulos e parágrafos:
h3 {
color: #909090;
font-size: 14px;
padding: 10px;
margin-bottom: 0;
h4 {
font-size: 14px;

144 UNIDADE III
padding-left: 10px;
padding-right:10px;
margin: 0;
p {
color: #909090;
font-size: 14px;
padding-left: 10px;
padding-right:10px;
Ajustamos cores, tamanhos e posicionamentos dos demais títulos e dos pará-

grafos. Para concluir nosso app, vamos ajustar os espaços dos botões de contato:
.contato {
color: #484848;
margin-top: 10px;
.contato button {
margin-left: 10px;
margin-top: -3px;
margin-right: 10px;
145
Apenas alteramos cores e posicionamentos dos botões.
CUSTOMIZANDO GRID
As grids, diferentemente das listas, podem conter linhas e colunas. É bem comum
as utilizarmos para diagramar alguma apresentação estruturada de dados e ele-
mentos. Neste aplicativos, vamos utilizar apenas os recursos simples da grid

- linhas e colunas -, e com isso customizar seu conteúdo (Figura 7).
Figura 7 - Print do aplicativo de dashboard

Fonte: o autor.
Crie um novo aplicativo chamado appDashboard:
Customizando Grid
146 UNIDADE III
ionic start appDashboard blank
Como este aplicativo é mais extenso, vamos adicionando os elementos HTML

por partes. Na área de conteúdo, vamos adicionar um título e três linhas com
três colunas:
<ion-content>
<h1>FábioCommerce - Status Pedidos</h1>
<div class=”col”>
<label>Pedidos pendentes</label>
<h2 class=”light”>24</h2>
</div>
<label>Pedidos entregues</label>
<h2 class=”balanced”>125</h2>
</div>
<label>Pedidos cancelados</label>
<h2 class=”assertive”>12</h2>
</div>
</div>
147
<div class=”row valores”>
<label>Valor pendente</label>
<h2 class=”light”><span>R$</span> 26.600,00</

h2>
</div>
<label>Valor recebido</label>

h2>
</div>
<label>Valor total</label>

h2>
</div>
</div>
<div class=”row valores”>
<label>Valor pendente <span><i class=”icon

ion-arrow-up-b balanced”></i> 2%</span></label>

h2>
Customizando Grid
148 UNIDADE III
</div>
<label>WTD <span><i class=”icon ion-arrow-

down-b assertive”></i> 2%</span></label>

h2>
</div>
<label>Valor total <span><i class=”icon ion-

arrow-up-b balanced”></i> 10%</span></label>

h2>
</div>
</div>
Neste primeiro passo, apenas adicionamos as linhas e colunas da nossa grid. Nas
linhas de valores, adicionamos a classe valores para ser estilizada de forma dife-
rente da primeira. Agora vamos adicionar uma lista com avatar:
<h2 class=”title-custom”>Pedidos pendentes</h2>
<ion-list>
<a class=”item item-avatar”>
<div class=”right”>
149
<div class=”valor”>R$ 2.345,00</div>
<i class=”icon ion-ios-arrow-right”></i>
</div>
<h2>Mario Silva</h2>
<p><i class=”icon ion-calendar”></i>

12/02/2016 - 14:50</p>
</a>
</div>
<h2>João Paula Moraes</h2>

12/02/2016 - 15:12</p>
</a>
Customizando Grid
150 UNIDADE III
</div>
<h2>Monica Fransoneze</h2>

12/02/2016 - 15:50</p>
</a>
</div>
<h2>José Luiz</h2>

12/02/2016 - 15:52</p>
</a>
<div class=”valor”>R$ 800,00</div>
151
</div>
<h2>Maria Vitória</h2>

12/02/2016 - 15:58</p>
</a>
</ion-list>
</ion-content>
Apenas adicionamos um classe para o título da listagem e uma lista com alguns
itens. Nosso app ficou igual a Figura 8.
Figura 8 - Print do aplicativo de dashboard

Fonte: o autor.
No style.css, vamos primeiro alterar o cor de fundo e o estilo do nosso título:
.pane {
Customizando Grid
152 UNIDADE III
background-color: #3B3C3E;
ion-content h1{
color: #fff;
font-size: 20px;
padding: 10px;
}
Deixamos nosso app com o fundo escuro e o título branco. Agora vamos sele-
cionar os elementos da grid e aplicar alguns estilos para ter uma visualização
mais coordenada, destacando os itens mais importantes:
.row {
padding: 0;
.col {
margin: 1px;
margin-bottom: 6px;
padding: 10px;
.row label{
color: #9CA0A3;
153
font-size: 12px;
.row label span {
float: right;
color: #fff;
padding-top: 4px;
.row h2 {
margin: 0;
font-size: 25px;
.row h2 span {
display: block;
font-size: 14px;
font-weight: 400;
.row.valores h2 {
font-size: 18px;
font-weight: 600;
Customizando Grid
154 UNIDADE III
Ajustamos cores, posicionamento e tamanhos dos elementos da grid. Agora

vamos customizar a listagem para seguir as cores do nosso tema escuro:
.title-custom {
color: #8C9093;
font-size: 18px;
padding-left: 10px;
.item {
background:none;
border-color: #474747;
.item h2 {
color: #8C9093;
.item p {
color: #8C9093;
Removemos a cor de fundo dos itens da lista e estilizamos o título da listagem.

Para concluir nosso app, vamos posicionar os valores da listagem do lado direito:
155
.right {
float: right;
color: #8C9093;
font-size: 18px;
font-weight: bold;
margin-top: 10px;
.right .valor {
float: left;
margin-right: 10px;
.right i {
font-size: 40px;
float: left;margin-top: -10px;
A div com a classe right foi posicionada ao lado direto dos itens.
Customizando Grid
156 UNIDADE III
CUSTOMIZANDO FORMULÁRIOS
Os formulários sempre foram um desafio para designers de interface, pois não

basta ter uma boa aparência, precisa ser prático e rápido, uma vez que os usuá-
rios não gostam de perder tempo preenchendo muitas informações (Figura 9).
Figura 9 - Print do aplicativo de formulário

Fonte: o autor.
Crie um novo aplicativo chamado appPassagem.
ionic start appPassagem blank
Um formulário tem vários componentes, então, vamos dividir em partes a cria-

ção dos elementos HTML. Primeiro, vamos adicionar o título e os elementos
de seleção:
157
<ion-content>
<h1>PASSO 1/3</h1>
<div class=”forms”>
<h3>Tipo da viagem?</h3>
<div class=”row radio-custom”>
<div class=”col select”>Ida e volta</div>
<div class=”col”>Somente ida</div>
<div class=”col”>Somente volta</div>
</div>
<h3>Vai com quem?</h3>
<div class=”row radio-custom”>
<div class=”col select”>Sozinho</div>
<div class=”col”>Acompanhado</div>
</div>
<h3>Qual sua rota?</h3>
<div class=”item item-input”>
<input type=”text” placeholder=”Informe o
Customizando Formulários
158 UNIDADE III
local de partida” value=”Maringá-PR”>
<i class=”icon ion-ios-location-outline”></i>
</div>
<input type=”text” placeholder=”Informe o

local de destino”>
<i class=”icon ion-ios-location-outline”></i>
</div>
Criamos um título e uma grid com algumas linhas e colunas. Contudo, para
este layout, vamos estilizar a grid para se comportar de forma diferente, na qual
cada coluna será um campo de seleção. Agora vamos adicionar a grid com os
campos de data:
<h3>Quando vai ser?</h3>
<h4>Data ida</h4>
<div class=”row row-input”>
<input type=”date”>
<i class=”icon ion-ios-calendar-

outline”></i>
</div>
</div>
159
<input type=”time”>
<i class=”icon ion-ios-clock-outline”></

i>
</div>
</div>
</div>
<h4>Data volta</h4>
<div class=”row row-input”>
<input type=”date”>
<i class=”icon ion-ios-calendar-

outline”></i>
</div>
</div>
<input type=”time”>
<i class=”icon ion-ios-clock-outline”></

i>
160 UNIDADE III
</div>
</div>
</div>
Para concluir nossos elementos HTML, vamos adicionar uma lista de checkbox:
<h3>Passeios adicionais</h3>
<ion-list class=”list-custom”>
<ion-item class=”item-checkbox item-checkbox-

right”>
</label>
Visita ao Corcovado
</ion-item>

right”>
</label>
Castelo da Sapolientra
</ion-item>
161

right”>
</label>
Lago Santo River Side

</ion-item>

right”>
</label>
Visita ao Corcovado
</ion-item>

right”>
</label>
Castelo da Sapolientra
</ion-item>
162 UNIDADE III
right”>
</label>
Lago Santo River Side
</ion-item>
</ion-list>
</div>
</ion-content>
Na lista, não vamos customizar muita coisa do padrão do Ionic, apenas ajustes
nas cores. Nosso app ficou igual a Figura 10.
163
Figura 10 - Print do aplicativo de formulário

Fonte: o autor.
Para este layout, vamos utilizar dois tipos de fontes diferentes, Pacifico e Lato.
Instale as fontes utilizando o getfont:
getfont ‘<link href=”https://fonts.googleapis.

com/css?family=Lato:300,400,900|Pacifico”
rel=”stylesheet”>’ --ionic
No style.css, vamos começar pelo header, alterando a cor e a fonte utilizada:
164 UNIDADE III
.bar.bar-positive.bar-top {
background-color: #00A5FF;
background-image: none;
.bar-top .title {
font-family: ‘Pacifico’, cursive;
}
Alteramos a cor azul do tema do Ionic para um azul mais

vivo, e alteramos também a fonte do título do header
para a fonte Pacifico. Agora vamos customizar os títu-
los do formulário:
ion-content {
font-family: ‘Lato’, sans-serif;
ion-content h1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 800;
165
-webkit-border-bottom-right-radius: 50%;
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-bottomright: 50%;
-moz-border-radius-bottomleft: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
padding: 20px;
ion-content h3 {
font-weight: 300;
font-size: 25px;
text-align: center;
color: #595959;
h4 {
color: #595959;
padding-left: 15px;
margin:0;
166 UNIDADE III
Primeiro, definimos a fonte Lato para toda área de conteúdo do aplicativo, depois,
customizamos o h1 para ter os cantos arredondados, unindo-se com o header,
e ajustamos o estilo dos outros títulos. Agora vamos customizar as colunas de
nossa grid para que se comportem como um componente de seleção:
.forms {
padding: 20px;
}
.row {
padding: 2px;
.col.select {
color: #fff;
.radio-custom {
background-color: #F2F2F2;
color: #999999;
.radio-custom .col {
167
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
Para não ficar colado nas laterais, demos um espaçamento interno em todo for-
mulário, e ajustamos as cores das colunas. Para a coluna que representa o item
selecionado, foram adicionados alguns estilos próprios para se diferenciar dos
demais. Vamos customizar os campos de entrada de dados do formulário:
.item {
border-color: #BEBEBE;
margin-bottom: 20px;
.item input {
color: #00A5FF;
.item-input i {
font-size: 25px;
margin-right: 15px;
168 UNIDADE III
color:#BEBEBE;
.item-input input {
padding-right: 0;
.row-input {
padding: 0;
.row-input .col {
padding-top: 0;
padding-bottom: 0;
Para os itens e campos, ajustamos cores, espaçamento e tamanho de fonte. Para

concluir, vamos customizar a listagem dos checkbox:
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
169
color: #00A5FF;
margin: 0;
margin-top: -1px;
.checkbox input:checked:before, .checkbox input:checked

+ .checkbox-icon:before {
background: #00A5FF;
border-color: #00A5FF;
.checkbox input:before, .checkbox .checkbox-icon:before

{
border-color: #00A5FF;
Ajustamos a lista para não ter bordas arredondadas como as demais, e também
ajustamos o estilo do checkbox.
Criar aplicações com complexidades de interação do usuário não é uma ta-

refa fácil, pois os inputs das informações devem ser coletados da forma mais
organizada possível, sendo assim, sempre analise o número de interativi-
dade que seu usuário terá, e a partir deste ponto crie a menor quantidade
possível de campos, sempre limpo e fácil de utilizar.
Fonte: Camden (2016).
170 UNIDADE III
HEADER TRANSPARENTE E SCROLL VERTICAL
A disposição criativa dos elementos trazem uma rica experiência visual para
os aplicativos, estes estilos são simples de implementar, mas podem fazer uma
grande diferença quando bem aplicados. No entanto, tenha cuidado, pois se uti-
lizado de forma incorreta, a navegabilidade do aplicativo pode ser totalmente
comprometida (Figura 11).
Figura 11 - Print do aplicativo de persona

Fonte: o autor.
Crie um novo aplicativo chamado appPersona.
171
ionic start appPersona blank
Vamos aos elementos HTML, adicione no header uma classe para ser selecio-
nada no CSS de forma mais fácil:
<ion-pane>
<ion-header-bar class=”bar-transparent”>
<button class=”button button-icon ion-ios-

arrow-left”></button>
<h1 class=”title”></h1>
<button class=”button button-icon ion-ios-

heart-outline”></button>
</ion-header-bar>
A classe bar-transparent será utilizada para deixar nosso header sem cor de
fundo. Agora vamos a parte mais complexa, após o header, adicione o início da
área de conteúdo com seus elementos:
<ion-content class=”no-header”>
<div id=”preview” style=”background-image:

url(img/angelina_jolie3.jpg)”>
<div class=”info-preview”>
<h2>Angelina Jolie, 40</h2>
<h3 class=”right”>
<i class=”icon ion-image”></i>
Header Transparente e Scroll Vertical

172 UNIDADE III
3/8
</h3>
<h3>
<i class=”icon ion-ios-location-

outline”></i>
Los Angeles, Califórnia, EUA
</h3>
<ion-scroll direction=”x” class=”wide-as-

needed”>
<div class=”photo” style=”background-

image: url(img/angelina_jolie1.jpg);”></div>

<div class=”photo selected”

style=”background-image: url(img/angelina_jolie3.
jpg);”></div>




173

</ion-scroll>
</div>
</div>
No ion-content, adicionamos a classe no-header para que o Ionic ignore o espaço

reservado para a barra superior fixa, como o header ficará transparente a ima-
gem da área de conteúdo será visível. Criamos uma div com o id preview para ser
mais fácil a seleção do elemento via CSS, perceba que as imagens são declaradas
inline utilizando a propriedade style. Fazemos assim porque em um aplicativo
real, as imagens serão dinâmicas, e estando no HTML podemos manipular pelo
JavaScript, mas não se preocupe com isso nesse momento. Agora vamos adicio-
nar o restante do nossos elementos:
<h4>Sobre Angelina Jolie</h4>
<p>Angelina Jolie Pitt é uma atriz, dubladora,

diretora, produtora, roteirista e ativista
humanitária americana. Ela já foi premiada com um
Óscar, dois Prémios Screen Actors Guild, e três
Prêmios Globo de Ouro.</p>
<h4>Filmes</h4>
<img class=”filme” src=”img/filme1.jpg”

height=”80px”>

height=”80px”>

height=”80px”>

174 UNIDADE III

height=”80px”>

height=”80px”>

height=”80px”>

height=”80px”>
height=”80px”>

height=”80px”>

height=”80px”>
</ion-content>
</ion-pane>
Adicionamos apenas algumas imagens com a classe filme. Nosso aplicativo está
igual a Figura 12.
175
Figura 12 - Print do aplicativo de persona

Fonte: o autor.
Para este app vamos utilizar as fontes Lato e Poiret One, faça a instalação delas
pelo getfont:
getfont ‘<link href=”https://fonts.googleapis.

com/css?family=Lato:300,400,900|Poiret+One”
rel=”stylesheet”>’ --ionic
Agora em style.css, vamos iniciar pelo header:
.bar-transparent {
background: none;

176 UNIDADE III
.bar-transparent button {
color: #fff;
Apenas deixamos nosso header sem cor de fundo e deixamos nossos botões
brancos. Agora vamos ajustar a área de preview:
#preview {
height: 60%;
position: relative;
.info-preview {
width: 100%;
position: absolute;
bottom: 0;
text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
.photo {
width: 70px;
height: 70px;
177
display: inline-block;
margin-left: 6px;
margin-bottom: 0;
opacity: 0.8;
.photo.selected {
opacity: 1;
.photo:last-child {
margin-right: 6px;
Estilizamos o plano de fundo da div preview para cobrir toda área útil, e dei-
xamos as fotos da galeria com tamanhos únicos, apenas a div que estiver com
a classe selected terá um tratamento diferente com cor branco de borda e sem
transparência. Neste momento, a galeria de fotos ainda não teve o comporta-
mento esperado, vamos ajustar seu scroll:
.wide-as-needed {

178 UNIDADE III
overflow: scroll;
white-space: nowrap;
display: inline-block;
width: 100%;
margin-top: 10px;
.scroll {
min-width: 100%;
Apenas ajustamos o scroll para se comportar de forma horizontal e expansiva.

Para concluir, vamos ajustar os demais títulos e os filmes:
ion-content {
background-color:#F0F2F5;
ion-content h2 {
font-family: ‘Poiret One’, cursive;
color: #fff;
font-weight: bold;
margin: 0;
margin-left: 20px;
179
h3.right {
float: right;
margin: 0;
margin-right: 20px;
}
ion-content h3 {
color: #fff;
font-size: 16px;
margin: 0;
margin-left: 20px;
h4 {
color: #2E3037;
padding-left: 10px;
margin-bottom: 5px;
margin-top: 20px;

180 UNIDADE III
p {
color: #2E3037;
padding-left: 10px;
.filme {
margin-left: 10px;
Aplicamos diferentes estilos para cada tipo de título e adicionamos uma pequena
margem entre cada capa de filme apresentada.
Customizar aplicativos com CSS não é difícil, e muito menos complicado, você
precisa entender o necessário sobre CSS e o essencial sobre UX/UI Design. Nesta
unidade, praticamos o essencial sobre a customização de componentes, criando
alguns aplicativos ricos em elementos visuais.
Estudar e entender as diferentes formas de se utilizar dos atributos do CSS
não pode ser visto e compreendido em um único momento, pois a beleza de uma
aplicação, tanto web quanto mobile, está em seus componentes e em sua forma
181
de utilização. Sendo assim, procure praticar e se inspirar em outros projetos que

fazem uso avançado de estilos com CSS.
Alguns componentes que vimos nesta unidade poderia ter ficado mais inte-
ressante quando aplicado com JavaScript, pois a interação com o usuário teria
mais sincronia e o ganho de recursos interativos poderiam ser mais explorados.
Não pare por aqui de criar aplicativos customizados, uma boa abordagem é
utilizar layouts prontos como inspiração. O processo de design não é tão simples
de aprender, pois você precisa praticar constantemente para ir aperfeiçoando seu
aspecto conceitual para elementos visuais.
Na próxima unidade vamos criar componentes complexos que necessitam

de uma melhor compreensão das folhas de estilo CSS, e sem dúvida você terá
uma visão da amplitude que o CSS pode proporcionar para seus aplicativos. Faça
todos os exercícios e práticas para que tenha uma ampla coletânea de recursos
e diferentes aplicações.
Podemos perceber que esta unidade e a próxima são complementares, então,
não comece o próximo nível sem ter compreendido as implementações dos
componentes customizados. E sempre lembre-se que a prática leva à perfeição,
sendo assim, crie outros aplicativos de forma que você possa utilizar a base que
fizemos nesta unidade, mas também estenda os recursos utilizando sua linha
de pensamento.
182
1. Os componentes de lista que o Ionic fornece já traz inúmeros recursos de aspec-

tos visuais, mas com um pouco de CSS podemos estender sua aparência. Saben-
do disso, assinale a alternativa correta com relação ao método mais eficaz
para a customização do componente list:
a. Criando outra div com a classe list-new.
b. Adicionando a classe card na div de lista.
c. Substituindo as div por links.
d. Customizando o JavaScript da lista.
e. Alterando os atributos desejados no CSS.
2. Quando criamos um novo aplicativo, a fonte que é utilizada sempre será a fonte
padrão do dispositivo onde o aplicativo está sendo executado. Com base nesta
afirmação, assinale a alternativa que corresponde ao comando que faz a ins-
talação de uma nova fonte em um novo aplicativo:
a. getfont install “Ubuntu” --ionic
b. getfont “Ubuntu” --ionic
c. getfont “Ubuntu”
d. getfont add “Ubuntu”
e. getfont add “Ubuntu” --ionic
3. Os botões, assim como os temas, são disponibilizados com diferentes visualiza-

ções dependendo da classe utilizada. Com base nas informações apresentadas,
assinale a alternativa que corresponda a customização de um botão que irá
receber uma nova classe chamada “noBorder”:
a. <button class=”button button-positive noBorder”></button>
b. <button class=”button” class=”noBorder”></button>
c. <button class=”button button-positive-noBorder”></button>
d. <button class=”noBorder”></button>
e. <button class=”button-noBorder”></button>
183
4. Os formulários desenvolvidos para aplicativos móveis sempre foi um problema

com relação a posicionamento e estilo visual, mas podemos dizer que o Ionic fa-
cilita a criação dos campos, bem como a disposição dos elementos. Com base no
aplicativo desenvolvido neste módulo, assinale a alternativa que apresenta os
componentes utilizados para trabalhar com linhas e colunas:
a. header e footer
b. div e span
c. row e col
d. button e class
e. badges e label
5. Muito aplicativos que tem o apelo visual como um requisito indispensável uti-
lizam o header com fundo transparente. Sabendo disso, assinale a alternati-
va que apresente o processo utilizado nesta unidade para deixar o header
transparente:
a. Foi criado um novo componente e removido o componente de header do
Ionic.
b. Foi criado uma nova classe e no CSS removido o fundo.
c. Não foi utilizado header.
d. Foi utilizado uma classe do próprio Ionic para remover o fundo.
e. Foi criado um novo header com um subheader transparente.
184
App ou Web? Comparativo de possibilidades

A grande diferença entre apps e a Web que geralmente se discute é que um app dá
melhor acesso e integração ao hardware e à plataforma nativa do aparelho, enquanto
que a Web traz independência de plataforma e portabilidade. Mas existem milhões de
detalhes aí no meio que precisam ser discutidos.
Um app tem acesso direto ao hardware do aparelho e a recursos do sistema operacional.
Consegue se integrar com funções avançadas e a outros apps. Pode manipular o funcio-
namento do aparelho e até substituir ou complementar funções nativas.
Já a Web roda enjaulada dentro do navegador e, por razões de segurança, não tem aces-
so direto à plataforma nativa. Mas existem diversas APIs novas do HTML 5 que expõem
acesso a recursos antes exclusivos dos apps, exemplos clássicos são acesso à câmera,
geolocalização, informações de acelerômetro e giroscópio, e animações 3D com ace-
leração na GPU. Mas, claro, há muitas coisas mais específicas que ainda só os apps têm
acesso e que não são possíveis pela Web.
O que é preciso definir aqui é que tipo de requisito você tem. Se você precisar de coisas
muito específicas, um app será o caminho, ou uma solução híbrida como Apache Cordo-
va. Mas as capacidades da Web são suficientes para grande parte dos cenários.
Rodar dentro do navegador tem suas vantagens. As restrições de segurança são fortes
e a chance de acontecer algo de ruim é bem pequena. O usuário está mais protegido
abrindo um site Web do que instalando um app em seu aparelho. As lojas de apps ten-
tam minimizar o impacto ruim na segurança com restrições e permissões explícitas que
o usuário tem que aprovar. Mas a verdade é que a maioria dos usuários não compreende
os impactos das permissões que aprova, ainda mais quando a lista é grande e cheia de
termos estranhos (como na instalação de um app no Android).
Um aspecto bastante citado como vantagem dos apps é a integração visual da mesma
com a plataforma em si. Toda a experiência de uso da plataforma, sua usabilidade e com-
ponentes visuais, são transportados para app. Ela tem a cara da plataforma e é familiar
para o usuário. Pense naquele estilo característico dos botões do iOS, por exemplo, que
seriam um frankenstein se usados no meio de uma App Android.
Fonte: Lopes (2013, p. 13).
CSS3
Editora: Novatec
Sinopse: CSS3 ultrapassou o status de proposta de
uma tecnologia que prometia revolucionar a forma
como estilizamos documentos para a web e deve
obrigatoriamente fazer parte do dia a dia dos designers
e desenvolvedores web. Muitas das funcionalidades das
CSS3 estão desenvolvidas o bastante para ser empregadas
em fase de produção, quer com suporte nativo, quer com uso de prefixos proprietários. Outras
tantas estão sendo implementadas em navegadores modernos, possibilitando o seu estudo e o
desenvolvimento de suítes para estudos. Saber o que se pode e o que não se pode, o que se deve e o
que não se deve usar das CSS3 é um conhecimento indispensável.
186
REFERÊNCIAS

2016.
LOPES, S. A Web Mobile: Programe para um mundo de muitos dispositivos. São
Paulo: Casa do Código, 2013.
187
REFERÊNCIAS
GABARITO
1. E.
2. B.
3. A.
4. C.
5. B.
IV
CRIANDO COMPONENTES
UNIDADE
COMPLEXOS E
EMPACOTANDO APLICATIVO
■■ Aprender a criar novos componentes.
■■ Empacotar o aplicativo final.
Plano de Estudo
■■ Ícones e novos componentes
■■ Empacotando o aplicativo
191
INTRODUÇÃO
O Ionic, como qualquer outro framework, traz inúmeros componentes como

vimos até agora nas unidades anteriores, mas em alguns casos específicos precisa-
mos criar nossos próprios componentes ou até mesmo customizar um já existente.
Só pelo fato de que o Ionic é desenvolvido para rodar com o Apache Cordova,
já temos uma gama enorme de opções, pois tudo que roda na web, roda nos
aplicativos com Cordova. É claro que precisamos nos preocupar com a perfor-
mance, mas sem dúvida temos muitas opções para trabalhar com componentes
customizados. A vantagem do Ionic é que você pode muito bem estender seus
componentes, ou seja, melhorá-los e adaptá-los para seu cenário.
E depois que nosso aplicativo está pronto? Como fazer com que ele funcione
em nosso smartphone ou tablet (device)? Nesta unidade, vamos aprender tam-
bém como preparar o ambiente para o processo de empacotamento do aplicativo,
tanto para o sistema operacional Android, quanto para o sistema operacional
do iPhone e iPad (iOS).
Para cada sistema operacional móvel, como Android, iOS, Windows Phone
etc., temos diferentes formas de empacotar a aplicação. Sendo assim, vamos estu-
dar e praticar apenas nas duas mais utilizadas, Android e iOS, entretanto, é de
suma importância que você tenha um entendimento sobre o empacotamento
de aplicativos móveis para outros sistemas operacionais.
Recomenda-se que, tanto o processo de empacotamento, quanto o processo
de teste, sejam feitos em diferentes sistemas operacionais móveis. Isso porque,
mesmo utilizando um framework como Ionic para automatizar tarefas e criar
compatibilidade de componentes entre versões de S.O, você pode ter proble-
mas quando estas soluções forem de fato executadas em devices nativos. Por
isso, tenha em mente que sempre haverá a necessidade de testar sua aplicação
em devices reais antes de ir de fato para produção.
Introdução
192 UNIDADE IV
ÍCONES E NOVOS COMPONENTES
O Ionic disponibiliza uma coleção de ícones baseados em fontes bem interes-

santes, contudo, em alguns momentos você pode precisar de outras fontes e por
isso vamos treinar essa necessidade. Também vamos criar um componente do
zero. Escolhi um componente de timeline por ser algo aparentemente mais com-
plexo, mas depois de implementado fica simples seu entendimento (Figura 1).
Figura 1 - Print do app de timeline

Fonte: o autor.
Crie um novo aplicativo chamado appTimeline:
ionic start appTimeline blank

193
Existem inúmeros sites que disponibilizam coleções de ícones baseados em fontes1.

Para este layout, vamos utilizar os ícones do Material Design e a fonte Ubuntu
do google fonts. Para instalar os dois, podemos utilizar o getfont:
getfont ‘https://fonts.googleapis.com/
icon?family=Material+Icons|Ubuntu:300,400,700’
--ionic
Vamos começar adicionando um header com dois ícones do material design:
<ion-pane>
<ion-header-bar class=”bar-assertive”>
<button class=”button button-clear”>
<i class=”material-icons”>menu</i>
</button>
<h1 class=”title”></h1>
<button class=”button button-clear”>
<i class=”material-icons”>chat_bubble_
outline</i>
</button>
</ion-header-bar>
No site do material design, é possível ver quais ícones podem ser utilizados.
1 As que mais utilizo são: <http://flaticon.com>; <http://iconmonstr.com>; e os ícones do <https://design.

google.com/icons/>
Ícones e Novos Componentes

194 UNIDADE IV
Vamos adicionar uma div com o id profile com alguns elementos:

<ion-content>
<div id=”profile”>
<div class=”photo”>
<img src=”img/user1.jpg” >
</div>
<h2>Linus Torvalds</h2>
<h3>Criador do Linux</h3>
<div class=”col”>1056 <span>Posts</span></div>
<div class=”col”>12k <span>Seguidores</span></

div>
<div class=”col”>4533 <span>Seguindo</span></

div>
</div>
</div>
E por fim, vamos adicionar o elemento timeline que ainda não existe, mas vamos
implementá-lo em breve:
<div class=”timeline”>
<div class=”event”>
<i class=”material-icons mark”>location_on</i>

195
<p>Esteve No <b>Brasil</b> no evento

<b>LinuxCon 2011</b>.</p>
<div class=”info”>
<i class=”material-icons”>access_time</
i>
12:00am
</div>
<i class=”material-icons”>date_range</i>
18/11/2011
</div>
</div>
</div>
<i class=”material-icons mark”>call</i>
<p>Ligou para <b>Bill Gates</b> falando

sobre idéias para 2016.</p>
i>

196 UNIDADE IV
8:30am
</div>
22/11/2011
</div>
</div>
</div>
<i class=”material-icons mark”>bookmark</i>
<p>Foi marcado na foto de <b>Mike Flor</

b>.</p>
<p class=”item-image”>
<img src=”img/event1.jpg”>
</p>
i>
22:11pm
</div>

197
12/12/2011
</div>
</div>
</div>
<img class=”mark-profile” src=”img/fabio.jpg”>
<p>Aceitou novo seguidor <b>Fábio Rogério

SJ</b>.</p>
i>
14:22pm
</div>
15/12/2011
</div>

198 UNIDADE IV
</div>
</div>
</div>
</ion-content>
</ion-pane>
Criamos uma div com a classe timeline e outras divs filhas com a classe event.
Neste caso, cada evento é um item na listagem do componente. Até o momento
nosso app está como na Figura 2.
Figura 2 - Print do app de timeline

Fonte: o autor.
Agora vamos ao style.css. Primeiro customizamos os títulos e o header:

199
.pane, h1, h2, h3, p {
font-family: Ubuntu;
h2 {
color:#fff;
margin:0;
h2 + h3 {
color:#ffb2b9;
margin:0;
font-weight:800;
font-size:22px;
.pane {
background-color:#687586;
.material-icons {
margin-top: 4px;
.bar.bar-assertive {

200 UNIDADE IV
border-color:#ff6861;
background-color:#ff6861;
background-image: none;
Definimos para os títulos que a fonte desejada é a Ubuntu, alteramos as cores e

tamanhos e ajustamos o estilo do header. Vamos estilizar o profile:
#profile {
background-color:#ff6861;
color:#fff;
text-align:center;
text-shadow:1px 1px 2px #d2544d;
#profile .photo {
background-color:#ed6b63;
display:inline-block;
border-radius:50%;
padding:6px;
padding-bottom:0;
#profile img {

201
width:150px;
border-radius:50%;
Aplicamos uma cor de destaque no fundo do profile e customizamos a imagem

para ficar arredondada e com bordas de destaque. Vamos ajustar as colunas da
grid para destacar os textos:
.row {
margin-top:20px;
padding:0;
.col {
padding:10px;
font-weight:800;
font-size:20px;
.col span {
display:block;
font-weight:300;
font-size:16px;

202 UNIDADE IV
Aumentamos a fonte e ajustamos os posicionamentos. Vamos ao componente:
.timeline {
padding-left:20px;
padding-top:10px;
background: #687586;
background: linear-gradient(180deg,
transparent, #5b6776, transparent);
background-position: 45px;
background-repeat: repeat-y;
background-size: 8px 1px;
Primeiro adicionamos uma linha que servirá de base para a timeline. Vamos
ajustar o componente card:
.card {
border-radius:6px;
.card:before {
content:””;
width: 0;

203
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #fff;
position:absolute;
margin-left:-20px;
Os cards ficaram com as bordas mais arredondadas e adicionamos uma seta para
a esquerda. Vamos criar os estilos para as marcações:
.mark {
background-color:#2bb9bb;
border-radius:50%;
padding:10px;
color:#fff;
float:left;
margin-right:25px;
margin-top:-5px;
.mark-profile {

204 UNIDADE IV
width:52px;
border-radius:50%;
float:left;
margin-right:25px;
margin-top:-5px;
}
Deixamos cada marcação redonda e posicionada na linha da timeline. Por fim

ajustamos os elementos do card:
.event:last-child {
background-color:#687586;
.card .info {
color:#cccccc;
font-weight:300;
float:left;
margin-right:10px;
.card .info i {
font-size:14px;

205
float:left;
Deixamos as informações menores e com uma cor de menos destaque.

Se podemos criar um componente do zero, com uma timeline, o que mais

podemos fazer? Sem dúvida a resposta correta é que não temos limite, pois
com CSS podemos ir sempre além do essencial.
EMPACOTANDO O APLICATIVO
O processo de build, também conhecido como empacotamento, é utilizado para

testar e publicar o aplicativo final.
Neste material vamos abordar apenas os comandos para gerar o aplicativo
para testar nos diferentes devices.
ANDROID
Para criar o aplicativo final na plataforma Android, precisamos do Android SDK,

um pacote contendo todas as ferramentas para que o aplicativo final (.apk) seja
criado e, posteriormente, testado em emuladores e devices.
O primeiro passo é baixar o Android SDK no site oficial do Android
Empacotando o Aplicativo
206 UNIDADE IV
Developer2. Role até o final da página e baixe apenas o SDK para linha de comando,
como mostrado na Figura 3. Escolha o seu sistema operacional e faça o download.
Figura 3 - Print do site de download
Fonte: o autor.
Para usuários Linux o processo é bem parecido, com algumas diferenças nas
definições de variáveis de ambiente. Em nosso material vamos abordar a insta-
lação do Android SDK em ambiente Windows.
Para usuários do Windows podemos usar o instalador, no qual já se verifica
a existência o Java JDK instalado, e instala o SDK em uma determinada pasta.
Execute o instalador e siga os passos como exibido na Figura 4.
2 Disponível em: <http://developer.android.com/intl/pt-br/sdk/index.html>.

207
Figura 4 - Print do passo 1 da instalação do SDK

Fonte: o autor.
Se você tiver o Java JDK instalado, o instalador irá seguir para a instalação do
Android SDK, caso contrário, será exibida uma tela solicitando a instalação do
Java JDK (Figura 5).
Figura 5 - Print do passo 2 da instalação do SDK

Fonte: o autor.
208 UNIDADE IV
Clique em Visit java.oracle.com e siga os passos das figuras 6 e 7.
Figura 6 - Print do passo 1 do download do SDK
Fonte: o autor.
Figura 7 - Print do passo 2 do download do SDK

Fonte: o autor.
Após o download concluído, siga os passos das figuras 8, 9, 10 e 11 para insta-

lar o Java JDK e suas dependências:

209
Figura 8 - Print da instalação do Java

Fonte: o autor.

Fonte: o autor.
210 UNIDADE IV
Fonte: o autor.

Fonte: o autor.
Ao concluir a instalação do Java JDK, execute novamente o instalador do Android,

ou se ainda estiver aberto, clique no botão Back e depois Next. Você verá que
agora ele irá encontrar a instalação do Java e assim poderá prosseguir com a ins-
talação do Android SDK clicando em Next (Figuras 12 e 13)

211
Figura 12 - Print da instalação do Android

Fonte: o autor.

Fonte: o autor.
Escolha um caminho de fácil acesso para a instalação, pois em alguns momen-

tos você terá que entrar nesta pasta para executar o Update do Android (Figuras
14, 15, 16 e 17).
212 UNIDADE IV
Fonte: o autor.

Fonte: o autor.

213

Fonte: o autor.

Fonte: o autor.
O Ionic precisa de algumas dependências do Android para fazer build, ou seja,

gerar o aplicativo final, e para isso vamos fazer alguns Updates no Manager
Android SDK. No Manager, desmarque tudo que já vem marcando e marque
apenas as opções listadas na figura a seguir. Em seguida clique em Install 9 packa-
ges (Figura 18).
214 UNIDADE IV
Fonte: o autor.
Em seguida clique em Accept License e Install para o download começar. Este

processo pode demorar alguns minutos (Figura 19).

215

Fonte: o autor.
Ao concluir a etapa anterior, a tela da Figura 20 será apresentada.

Fonte: o autor.
Vamos agora adicionar algumas variáveis de ambiente para que o Ionic encon-
tre o local em que está instalado o Android SDK. Entre nas propriedades do seu
computador, vá em Configurações avançadas do sistema e depois em Variáveis
de Ambiente (Figura 21).
216 UNIDADE IV
Figura 21 - Print da configuração das variáveis de ambiente
Fonte: o autor.
Em variáveis do usuário adicione uma nova chamada ANDROID_HOME, e em

valor preencha com o caminho onde foi feita a instalação do SDK (Figura 22).

217
Figura 22 - Print da configuração das variáveis de ambiente

Fonte: o autor.
O Ionic.io, que é a plataforma de soluções em nuvem para aplicativos imple-

mentados em Ionic Framework, fornece uma solução para compilar o proje-
to para iOS sem precisar de uma máquina Mac, porém, apesar deste serviço
ser free, ele possui limitações.
Fonte: o autor.
Agora vamos adicionar a plataforma android em nosso projeto e fazer o build.

Se seu terminal estiver aberto, feche-o e abra-o novamente para que as variáveis
de ambiente sejam carregadas. Em seguida, digite os comandos dentro da pasta
de algum projeto criado nos exemplos anterior:
218 UNIDADE IV
ionic platform add android
ionic build android
Se o build ocorrer de maneira correta, uma mensagem parecida com essa será
exibida em seu terminal:
BUILD SUCCESSFUL
Total time: 2 mins 57.657 secs
Built the following apk(s): C:/workspace/app1/

platforms/android/build/outputs/apk/android-debug.
apk
Na última linha é apresentado o caminho no qual foi gerado o aplicativo final,

no caso o android-debug.apk. Para testar em seu device, basta instalar este
arquivo nele.
IOS
Para gerar o aplicativo final para a plataforma iOS (.ipa), utilizando o Ionic
Framework, precisamos estar em um ambiente Mac, ou seja, em uma máquina
com o sistema operacional iOS.

219
Para compilar nosso projeto, vamos precisar do ios-sim, um módulo NPM escrito
em JavaScript rodando via NodeJS responsável por rodar aplicações via linha de
comando direto no emulador iOS.
Para instalar digite:
npm install -g ios-sim

Em seguida, dentro da pasta do projeto, digite:
ionic build ios
Este processo irá compilar nosso aplicativo e poderemos abri-lo via Xcode para
emular ou rodar em um device com iOS.
Dentro da pasta platforms/ios foi criado um arquivo AppListImage.xcode-
proj, que é o arquivo inicializador do projeto em Xcode (Figura 23).
Figura 23 - Print das pastas do app

Fonte: o autor.
220 UNIDADE IV
De um duplo clique neste arquivo e o projeto será aberto no Xcode (Figura 24).
Figura 24 - Print do xCode

Fonte: o autor.
Ao abrir, basta escolher um emulador, ou um device conectado via USB, onde
está “iPhone 6s Plus”, e clicar no ícone play.
Caso você escolha um dos emuladores, este processo irá executar o emula-
dor e em seguida instalar e rodar o aplicativo, como exibido na Figura 25.
Figura 25 - Print do app rodando no emulador do iOS

Fonte: o autor.

221
Você pode configurar seu aplicativo para rodar em emuladores, tanto para Android
quanto para iOS, mas sempre é importante executar em um device para garan-
tir o funcionamento correto.
Nesta unidade concluímos um ciclo, que são os componentes de interface. Agora

você está apto para criar novos aplicativos com interfaces ricas. Mas, tenha em
mente que quando falamos em componente ricos, nos referimos a elemen-
tos visuais altamente intuitivos, ou seja, aqueles componentes que exploram os
melhores efeitos e processos intuitivos, trabalhando fortemente com as boas prá-
ticas de UX Design (experiência do usuário) e combinando os fundamentos do
UI Design (interface de interface do usuário).
O design da experiência do usuário (UXD ou UED) é o processo que visa
aumentar a satisfação e lealdade do cliente, melhorando a usabilidade, facili-
dade de uso e prazer proporcionados na interação entre o cliente e o produto.
Como observado, o Ionic proporciona um ambiente altamente rico em com-
ponentes, mas isto implica que, independentemente do seu meio, o UX Design
existente em seus componentes engloba todas e quaisquer interações entre um
cliente potencial ou ativo, e quando você customiza ou estende estes compo-
nentes, o objetivo deste pode ser alterado e você deve repensar na usabilidade.
Como um processo científico, poderia ser aplicado a qualquer coisa, lâmpadas
de rua, carros, estantes Ikea e assim por diante.
Não confunda UX Design com UI Design, pois apesar do UX Design ser um
campo mais antigo e mais praticado, a questão “o que é design de interface de
usuário?” é difícil de ser respondida, por sua variedade de interpretações errô-
neas. Enquanto a experiência do usuário é um conglomerado de tarefas focadas
na otimização de um produto para uso eficaz e agradável; o design da interface
do usuário é seu core visual, a aparência, a apresentação e a interatividade de um
222 UNIDADE IV
produto. Assim como UX é facilmente e constantemente confundido pelas indús-

trias que empregam UI Designers, na medida em que você vai criando novos
componentes em seus aplicativos, muitas vezes você poderá até se enganar com
os termos, mas terá que estar firme em seus diferenciais.
É importante que você prepare seu ambiente para rodar seus aplicativos em
emuladores, isto poderá trazer mais agilidade ao seu desenvolvimento.

223
1. Na atividade de criação de um novo elemento de timeline, assinale quais foram

as principais classes que customizamos no CSS:
a. Criamos uma div com a classe timeline e outras divs filhas com a classe event.
b. Criamos um div com a classe time e outra como line.
c. Utilizamos a classe row e col sem a necessidade de customizar.
d. Utilizamos a abordagem do CSS3.
e. Não customizamos o CSS.
2. Testar nossos aplicativos em devices é um processo crucial para garantir o me-

lhor funcionamento dos componentes. Sabendo disso, assinale a alternativa
que apresente os passos necessários para rodar um app em um aparelho
com sistema operacional iOS:
a. Instalar o Android SDK, Buildar para iOS e rodar no xCode.
b. Instalar o plugin do ios-sim, buildar para iOS e rodar no xCode.
c. Instalar o SublimeText e executar no terminal.
d. Executar o instalador do Java.
e. Instalar o SDK do iOS.
3. O processo de empacotamento dos aplicativos para o sistema operacional An-

droid é constituído usando alguns SDKs. Com base nesta afirmação, assinale a
alternativa que apresenta os SDKs que devem ser instalados:
a. Java JDK e Android JDK.
b. Java JDK e Android SDK.
c. Java SE e Android JDK.
d. Java SDK e Android SDK.
e. JavaScript SDK e Android Studio.
224
4. Para testar nossos apps sem precisar instalar em um device utilizamos no coman-
do, ionic server. Sabendo disso, assinale a alternativa correta para o comando
de compilação e execução do app no device.
a. ionic build android
b. ionic run android
c. ionic start android
d. ionic install android
e. ionic add android
5. O CSS3 traz inúmeros recursos para trabalhar com sombra, degradê e efeitos de
animação. Com base no app de timeline que criamos, assinale a alternativa
correta para a propriedade do background no CSS que cria um degradê:
a. gradient-linear
b. effect-gradient
c. insert-gradient
d. gradient-effect
e. linear-gradient
225
Entenda o funcionamento do Android

As aplicações implementadas utilizando a linguagem Java são executadas através de
uma máquina virtual, baseada em registradores e otimizada para consumir pouca me-
mória, chamada Dalvik. Ao contrário da máquina virtual Java que executa bytecodes, a
Dalvik utiliza arquivos no formato .dex gerados a partir de classes Java compiladas. Esta
conversão é feita pela ferramenta dx que acompanha o Android SDK.
Basicamente, o que é feito é o agrupamento de informações duplicadas que se encon-
tram espalhadas em diversos arquivos .class em um arquivo .dex, com tamanho menor
do que os arquivos que o originaram. O dx também faz a conversão de bytecodes para
um conjunto de instruções específico da máquina virtual Dalvik.
Depois de criado, o arquivo .dex e todos os recursos utilizados na aplicação, como ima-
gens e ícones, são adicionados em um arquivo .apk, que é o aplicativo propriamente
dito, capaz de ser instalado em um dispositivo. Estes arquivos se encontram na pasta
bin do projeto.
É possível distribuir sua aplicação para outras pessoas apenas fornecendo o arquivo
.apk. No entanto, para colocá-la na loja Google Play alguns outros passos são necessá-
rios e você pode pesquisar em diversos postos disponíveis na internet.
No sistema operacional Android, para cada aplicação é atribuído um usuário único de
sistema e apenas este usuário recebe permissões para acessar seus arquivos. Além disso,
por padrão, cada aplicação é executada em um processo próprio, que possui também
sua própria instância da máquina virtual Dalvik. Sendo assim, ela é executada de forma
segura e isolada das demais. Neste contexto, uma aplicação não pode acessar arquivos
de outra e tampouco acessar diretamente recursos do sistema operacional como a lista
de contatos, câmera, gps e rede, sem que o usuário explicitamente autorize o acesso du-
rante a instalação dela. Diante dessas restrições de segurança, como tiramos proveito de
toda a infraestrutura do Android e também de aplicativos de terceiros para incrementar
as funcionalidades da nossa aplicação, incluindo por exemplo, um recurso de capturar
fotos e vídeos e compartilhar via e-mail?
Esse é justamente o ponto que vamos abordar na próxima seção.
Fonte: adaptado de Monteiro (2014).
Fundamentos de HTML5 e CSS3

Editora: Novatec
Sinopse: o livro Fundamentos de HTML5 e CSS3 tem o
objetivo de fornecer aos iniciantes e estudantes da área de
desenvolvimento web conceitos básicos e fundamentos
da marcação HTML e estilização CSS, para a criação de
sites, interfaces gráficas e aplicações para a web. O autor
aborda as funcionalidades da HTML5 e das CSS3 de forma
clara, em linguagem didática, mostrando vários exemplos
práticos em funcionamento no site do livro.
227
REFERÊNCIAS
MONTEIRO, J. B. Google Android. São Paulo: Casa do Código, 2014.

GABARITO
1. A.
2. B.
3. B.
4. B.
5. E.
TRABALHANDO COM
V
UNIDADE
RECURSOS NATIVOS
■■ Aprender a instalar plugins nativos do Cordova
■■ Entender a utilização do AngularJS.
■■ Aprender a utilizar recursos nativos como câmera, GPS e áudio.
■■ Aprender a salvar dados off-line.
Plano de Estudo
■■ Plugins e Integração
■■ GPS, Spinner e Google Maps
■■ Gravação e reprodução de áudio
■■ Salvando dados offline com SQLite
231
INTRODUÇÃO
Olá caro(a) aluno(a), conhecemos até agora o essencial para criar aplicativos
híbridos ricos em recursos visuais, porém, não criamos uma interação entre
nossos aplicativos e os recursos nativos do dispositivos como: tirar uma foto,
recuperar a localização atual do usuário através do GPS, listar os contatos do dis-
positivo, utilizar a vibração entre outros. Mas como faremos para integrar nosso
aplicativo com recursos nativos? Essa pergunta será respondida nesta unidade.
Na unidade I entendemos que o Ionic Framework opera por cima do Apache
Cordova, que é o responsável por fazer a interação entre nosso aplicativo e os

recursos nativos. Sendo assim, o uso de plugins nativos é bem simples e fácil de
usar, e nesta unidade, vamos criar alguns aplicativos a fim de praticar a instala-
ção, configuração e utilização de tais plugins nativos.
É extremamente importante que você crie outros aplicativos, além dos que
estão neste livro, para praticar, pois existem diversos plugins que podem ser inte-
ressantes em contextos de aplicativos distintos.
Ravulavaru (2015) complementa que um plugin, de câmera por exemplo,
pode ser utilizado de várias formas diferente, tudo depende do objetivo do apli-
cativo que será criado. Outro ponto importante que devemos destacar é que
estamos utilizando a linguagem de programação JavaScript para criar nossas
lógicas e regras de negócio, sendo assim, sua implementação fica bem irrestrita,
ou seja, você pode criar seu código como achar melhor.
Outra abordagem bem utilizada, por exemplo por bancos financeiros, é criar
partes da aplicação em ambiente nativo e apenas incorporá-la em um plugin,
assim, você poderá utilizar este plugin dentro de seu aplicativo híbrido.
Não deixe de ler os livros que são sugeridos no final desta unidade, pois
alguns frameworks de dependências, como AngularJS, não serão abordados
em sua integridade.
Introdução
232 UNIDADE V
PLUGINS E INTEGRAÇÃO
Existem mais de mil plugins do Cordova que podemos utilizar em nossos apli-
cativos e neste livro vamos utilizar os principais para que você possa entender o
processo de instalação e utilização.
Como já sabemos o Ionic é um framework criado para facilitar o desenvol-
vimento de aplicações mobile híbridas utilizando como base o Apache Cordova.
Também sabemos que o Ionic utiliza a linguagem de programação JavaScript
e o framework AngularJS para fazer as interações entre elementos e regras de
negócio do aplicativo, porém, para utilizar alguns plugins do Cordova, é reco-
mendável utilizar uma extensão dos plugins do Cordova para o AngularJS,
conhecida como ngCordova.

233
AngularJS é um framework muito utilizado na comunidade de desenvol-

vimento web, e dispõe de diversos recursos. Como nosso material tem o foco
de criar aplicativos híbridos, não iremos entrar em detalhes sobre o AngularJS,
mas não deixe de ler o material recomendado no final desta unidade, pois ire-
mos aprender apenas o essencial nesse livro.
Vamos criar um novo aplicativo para utilizar o recurso nativo de câmera,
contudo, fique atento(a), pois não iremos mais utilizar os templates padrões do
Ionic, visto que neste passo é necessário fazer a instalação e configuração do
ngCordova, vamos utilizar um template disponibilizado pelo professor com os
itens já instalados.
No seu terminal digite o comando a seguir (sem quebra de linha) para criar
um novo aplicativo com o nome AppCamera.
ionic start AppCamera https://github.com/

fabiorogeriosj/ionic-app-base
Em seguida entre na pasta do novo app criado e vamos adicionar a plataforma

android.
Até agora, em nosso livro, conseguimos testar nossos aplicativos direto pelo
browser. Porém, nesta etapa do desenvolvimento, precisamos de um aparelho
(device) pois muitos dos plugins nativos precisam de interação com o device, e
rodando o app via browser tais recursos não irão funcionar.
Plugins e Integração
234 UNIDADE V
É possível testar em emuladores alguns plugins como câmera, GPS, conta-

tos, login social entre outros. Para isso, existem diversos posts na internet ex-
plicando a utilização de emuladores para Android e/ou iOS, mas recomendo
fortemente utilizar um device, porque nem sempre o funcionamento é igual
em um emulador e em um device.
Fonte: o autor.
Se você seguiu os passos corretos na unidade anterior, no tópico de preparar o
ambiente para empacotar, então você está pronto(a) para rodar os aplicativos
que vamos criar neste módulo e testar os recursos nativos.
Vamos verificar se o aplicativo que criamos está correto até o momento. Para
isso, rode o aplicativo em um device com o comando a seguir.
ionic run android
Se o aplicativo apresentou uma tela igual a Figura 1, significa que podemos

prosseguir, caso contrário, revise o processo de empacotamento de aplicativos
na unidade IV.
Abra o código fonte de seu aplicativo e vamos analisar a estrutura deste novo
template que estamos utilizando, e entender o essencial para criar nosso primeiro
aplicativo utilizando um recurso nativo de câmera.
Estamos utilizando um template diferenciado porque para utilizar plugins
nativos precisamos ter instalado o ngCordova e também algumas configurações
primárias do AngularJS. Contudo, se você já tem conhecimento com AngularJS,
fique à vontade para alterar o template e customizar as configurações do seu gosto.

235
Figura 1 - Print aplicativo

Fonte: o autor.
O template disponibilizado já traz algumas configurações comentadas, por

exemplo, para criar novas telas do app, isso certamente irá facilitar seu compre-
endimento. Na Figura 2 podemos ver essa nova estrutura, bem como seus arquivos.
236 UNIDADE V
Figura 2 - Estrutura do aplicativo com novo template
Fonte: o autor.
Na pasta plugins é possível ver todos os plugins instalados para nosso aplica-
tivo, e, por padrão, alguns plugins já vem pré-instalados. Na pasta js podemos
ver dois novos arquivos, que são:
1. config.js: responsável por configurar nossas telas, veja que um trecho de
código está comentado, isso porque nosso app só tem uma tela, ou seja,
não precisa configurar novas neste momento.
2. controller.js: como o próprio nome já diz, este é o arquivo responsável por

controlar toda as regras de validação e de negócio da nossa tela, por exem-
plo, caso você queira que uma mensagem seja exibida quando o usuário
clicar em um botão na tela, é aqui que vamos implementar este código.
Antes de instalar nosso plugin, vamos entender um pouco melhor sobre o
AngularJS.

237
ANGULARJS
Segundo Pereira (2014), AngularJS é um framework escrito em JavaScript que

simplifica o desenvolvimento de aplicações para web, utiliza o modelo conceitu-
ado MVC (Model-View-Controller) e tem como suas principais características:
produtividade, desempenho, fácil customização, testável, implementa o fantás-
tico conceito de diretivas, suporta desenvolvimento de módulos entre outros
benefícios.
Model-View-Controller (MVC) é um padrão de arquitetura de software que

organiza as responsabilidades das interações. A interface do usuário (View)
é separada dos dados (Model), e as informações da tela (View) são controla-
das (Controller) que manipula suas regras.
Fonte: Panda (2014).
Lembre-se que iremos utilizar apenas o mais básico do AngularJS para nossos
aplicativos para sua compreensão, mas não deixe de ler mais sobre este framework
e utilizar seus enormes benefícios para que seus aplicativos fiquem mais perfor-
máticos e dinâmicos.
Em nossos aplicativos, as Views serão nossas telas em HTML, onde poderá
ter botões, campos de formulários, listas, card entre outros. Toda nossa mani-
pulação de eventos e estados, como clique em um botão ou quando uma foto
for tirada, será feita em nosso Controller.
238 UNIDADE V
UTILIZANDO PLUGIN DE CÂMERA
Se observarmos na pasta de plugin do nosso novo aplicativo chamado AppCamera,

não veremos coisa alguma relacionada à câmera, ou seja, não instalamos o plugin
em nosso app, sendo assim, digite o comando a seguir para realizar a instalação.
cordova plugin add cordova-plugin-camera
Após a conclusão da instalação você poderá ver uma nova pasta dentro da pasta
de plugins do seu app, isso significa que a instalação foi bem sucedida. Agora
precisamos criar um botão em nossa View e implementar a regra para quando
o botão for clicado.
Primeiro, vamos ao código da nossa view, onde iremos criar um botão com um
evento de clique, que quando clicado será executada a função tirarFoto() do
nosso controller. Iremos criar também um card para ser exibida nossa foto após
capturada, sendo assim, o código da nossa view ficará igual a Figura 3.
Figura 3 - Código da view index.html do AppCamera

Source: o autor.
Agora no controller precisamos implementar a função que será executada quando

o botão for clicado, podemos ver o código na Figura 4. Na linha 2 foi feito a inje-
ção de dependência do módulo de câmera, em outras palavras, fizemos uma

239
importação da diretiva $cordovaCamera para poder ser utilizada no control-

ler atual. Da linha 5 até 17 criamos nossa função que primeiro configura alguns
parâmetros do plugin (linha 5 até 9) e em seguida executamos a função getPic-
ture() do plugin instalado passando as configurações (linha 10), neste momento
a câmera será aberta e após o usuário tirar uma foto e confirmar será exibido na
imagem criada na view (linha 11 e 12). Caso o usuário cancele a operação, ou
algum erro ocorre no processo, uma mensagem é exibida ao usuário (linha 14).
Figura 4 - código do controller.js do AppCamera

Fonte: o autor.
Execute novamente em seu device o aplicativo appCamera e teste o primeiro plu-

gin instalado. Você pode ver a documentação completa, bem como os demais
parâmetros que podem ser configurados na página oficial do plugin1.
1 Disponível em: <http://ngcordova.com/docs/plugins/camera/>.
240 UNIDADE V
Veja como é simples utilizar um recurso tão poderoso como capturar uma
foto da câmera e interagir com seu app, agora, pense em inúmeros aplicati-
vos que existem cuja lógica principal é capturar fotos e fazer algo com ela.
GPS, SPINNER E GOOGLE MAPS
Existem diferentes plugins
para interagir com o GPS
do device, iremos utilizar
o mais simples com o obje-
tivo de exibir nossa posição
atual em um mapa.
Como sempre, pre-
cisamos nos preocupar
com a melhor experiência
do usuário, dessa forma,
nosso aplicativo irá, assim
que for aberto, exibir uma
mensagem “Obtendo sua
localização atual…”, e assim que for obtido, podemos remover a mensagem e
criar o mapa com a localização.
Crie um novo aplicativo chamado AppLocalizacao utilizando o template
customizado.
ionic start AppLocalizacao https://github.com/

Em seguida, entre na pasta do app e adicione a plataforma Android ou iOS,

dependendo do ambiente que você está utilizando.

241
Agora vamos instalar o primeiro plugin de Geolocalização, que será responsá-

vel por obter a nossa localização atual do recurso nativo de GPS.
cordova plugin add cordova-plugin-geolocation
Vamos instalar também o plugin de Spinner, que será responsável por bloquear
a tela até a localização ser obtida.
cordova plugin add https://github.com/Paldom/

SpinnerDialog.git
Na Figura 5 você pode ver as alterações em nossa View, que é apenas a criação de
um elemento iframe no qual será exibido nosso mapa. Com o AngularJS, existem
formas mais eficientes de exibir um mapa ao capturar a localização, mas como
nosso foco é em compreender da forma mais simples possível a utilização dos
plugins, iremos utilizar uma abordagem mais ligada ao JavaScript.
Figura 5 - Código da view index.html do AppLocalizacao

Fonte: o autor.
Gps, Spinner e Google Maps

242 UNIDADE V
No Controller, vamos implementar as regras utilizando os plugins de Spinner

e o de Geolocalização como podemos ver na Figura 6. Na linha 1, e continu-
ando na linha 2, é importada a diretiva dos dois plugins; na linha 5 é exibido o
Spinner, que deixa a tela bloqueada e com um ícone de loading com a mensagem
desejada; na linha 6 configuramos o plugin de geolocalização para aguardar no
máximo 10 segundos pela posição; e na linha 7 é executado a função getCurren-
tPosition(). Após obter a localização, é gerado o mapa (linha 11), e, ao concluir
o carregamento, é removido o Spinner (linha 12 até 14).
Figura 6 - Código do controller.js do AppGeolocalizacao

Fonte: o autor.
Você pode acessar a documentação oficial de cada plugin no site2, e conferir

quais configurações podem ser feitas em cada plugin utilizado neste app.
2 Disponível em: <http://ngcordova.com/docs/plugins>.

243
Existem outros plugins e formas de trabalhar com o GPS, recomendo que

você crie outros aplicativos e explore quais recursos podem ser utilizados
para diversos objetivos, como por exemplo a captura da localização em se-
gundo plano, ou seja, quando o app estiver fechado, isso certamente irá
aumentar seu conhecimento e gerar novas ideias.
Fonte: o autor.
GRAVAÇÃO E REPRODUÇÃO DE ÁUDIO
Outro plugin que geralmente os desenvolvedores de aplicativos móveis acham

que deve ser complexo de implementar é o plugin de mídia. Para praticar vamos
criar um novo app chamado AppGravador, para isso execute o comando de criar
novo app com o template customizado.
ionic start AppGravador https://github.com/

Em seguida entre na pasta do app e adicione a plataforma Android ou iOS, depen-

dendo do ambiente que você está utilizando.
Agora vamos instalar o plugin de mídia, que tem como objetivo utilizar os recur-
sos nativos de media. Se você estiver desenvolvendo no ambiente de iOS veja a
documentação do plugin, pois algumas configurações são diferentes.
cordova plugin add cordova-plugin-media
Gravação e Reprodução de Áudio

244 UNIDADE V
Agora vamos implementar nossa View com 3 botões: um para gravar, outro
para parar e um terceiro para escutar o áudio gravado. Na Figura 7 podemos
ver que criamos os botões e estamos utilizando a diretiva ng-show para contro-
lar o momento que cada botão será exibido.
Essas variáveis que estão informadas no ng-show serão criadas no control-
ler, de forma que a nossa view será avisada quando o valor delas forem alterados,
para assim fazer as devidas alterações em seu estado de visível/invisível.
Figura 7 - Código da view index.html do AppGravador
Fonte: o autor.
Na Figura 8 podemos ver o código do controller que primeiro importa a diretiva

de mídia (linha 1), cria algumas variáveis que serão escutadas pela view (linha
4 até 7) e cria as funções que serão executadas quando os devidos botões forem
clicados (linha 9 até 23).

245
Figura 8 - Código do controller.js do AppGravador

Fonte: o autor.
Gravação e Reprodução de Áudio

246 UNIDADE V
SALVANDO DADOS OFFLINE DOM SQLITE
Um dos plugins mais utilizados em um aplicativo desenvolvido com Ionic ou qual-

quer outro que utiliza como base o Cordova, certamente é o CordovaSQLiteStorage,
pois quase todos aplicativos precisam salvar algum tipo de dados direto no device.
Phan (2015) complementa que em aplicações mais complexas, é importante
utilizar uma plataforma de backend (API) para armazenar os dados e salvar no
dispositivo apenas os dados de consulta rápida.
SQLite é um sistema de banco de dados embutido muito utilizado para criar

aplicações em devices com pouco poder de armazenamento, pois seu foco
é criar uma estrutura de banco SQL apenas com o essencial.
Fonte: Feiler (2015).

247
Vamos criar um novo aplicativo chamado AppLembrete, que terá o objetivo de

criar e excluir registros de textos de um banco off-line, ou seja, quando fechar-
mos o app e abrir novamente os dados estarão salvos.
ionic start AppLembrete https://github.com/

Em seguida, entre na pasta do app e adicione a plataforma Android ou iOS,

dependendo do ambiente que você está utilizando.
Agora vamos instalar o plugin do SQLite.
cordova plugin add https://github.com/

litehelpers/Cordova-sqlite-storage.git
Na Figura 9 podemos ver o código da nossa view, na linha 31 alteramos o título

do aplicativo; da linha 36 até a 43 criamos um card contendo um campo de texto
e um botão para salvar o lembrete; e da linha 45 até a 52 exibimos, com base em
um vetor, os lembretes salvos no banco de dados SQLite.
Salvando Dados Offline dom Sqlite

248 UNIDADE V
Figura 9 - Código view index.html do AppLembrete
Fonte: o autor.
Em nosso controller vamos começar importando a diretiva do SQLite e criando

nossa tabela caso ela ainda não esteja criada, na figura 10 podemos ver o código.
Nas linhas 4 e 5 criamos duas variáveis que são utilizadas pela view para criar
um novo lembrete e listar os lembretes salvos.

249
Figura 10 - Código controller.js do AppLembrete passo 1

Fonte: o autor.
No segundo passo vamos criar o método que o botão salvar irá executar quando
for clicado, como exibido na Figura 11.

Fonte: o autor.
Salvando Dados Offline dom Sqlite

250 UNIDADE V
No terceiro passo vamos criar a função que o botão excluir irá executar ao ser
clicado, como exibido na Figura 12.
Fonte: o autor.
E por fim, vamos criar a função listar(), que é executada tanto pela função sal-
var(), quando insere um novo registro, quanto pela função excluir(). Na Figura
13 podemos ver a conclusão do código do controller.js. Na linha 39 a função de
listar também está sendo executada, isso é necessário pois assim que o app for
aberto, devem ser listado os registros que já foram salvos no banco de dados.
Figura 13 - Código controller.js do AppLembrete conclusão

Fonte: o autor.

251
Até aqui aprendemos como instalar, configurar e utilizar alguns plugins no Ionic
Framework, mas seus estudos não podem parar nesse momento. Crie novos
aplicativos utilizando os demais plugins que podem ser vistos no site oficial do
ngCordova ou utilize um dos diversos plugins disponíveis para Cordova, o impor-
tante é você praticar, lembre se que a prática leva à perfeição.
Você pode também estudar como enviar seus dados salvos no dispositivos
para uma API, para isso você deve estudar sobre a diretiva $http do AngularJS,
que é o responsável por fazer requisições Ajax.

Outro ponto que deve ser analisado é o serviço que irá receber seus dados,
que pode ser um webservice ou uma API. O cliente não pode acessar recursos
diretamente em serviço de webservice, por exemplo, representa da seguinte forma
os seus recursos: documentos em formatos de dados específicos que contêm
informações sobre o recurso. A diferença entre um recurso e sua representação
é um pouco acadêmica para sites estáticos, onde os recursos são apenas arqui-
vos no disco que são enviados literalmente para os clientes. A distinção assume
maior importância quando o recurso é uma linha em um banco de dados, um
objeto físico, um conceito abstrato ou um evento do mundo real em andamento.
Todo o acesso aos recursos acontece através da interface uniforme do HTTP.
Estes são os quatro verbos HTTP básicos (GET, POST, PUT e DELETE) e os dois
auxiliares (HEAD e OPTIONS). Acrescente complexidade em suas representa-
ções, na variedade de recursos que expõe e nas ligações entre recursos. Não o
coloque nos métodos de acesso.
Estudar mais a fundo a criação de uma API ou um webservice está além
deste livro, sendo assim, você pode se aventurar neste novo campo de estudo e
criar interatividade de sincronizar dados com seus aplicativos.
Você também pode se juntar a comunidade brasileira do Ionic Framework
para tirar dúvidas, ver exemplos de projetos, divulgar seus aplicativos e ver os
aplicativos que foram desenvolvidos com este framework.
252
1. Os plugins nativos foram criados para serem utilizados no Cordova, porém, nos
aplicativos que criamos utilizamos o ngCordova. Com base nessa afirmação, as-
sinale a alternativa que apresente o motivo pelo qual devemos utilizar o
ngCordova:
a. Porque aplicativos híbridos devem sempre utilizar esta biblioteca.
b. Sem o ngCordova os plugins nativos não funcionam em devices com sistema
operacional iOS.
c. Utilizamos o ngCordova pelo fato que os aplicativos implementados em Ionic
utilizam o AngularJS.
d. ngCordova é utilizado apenas para plugins de câmera e GPS.
e. Devemos utilizar o ngCordova para que os dados possam ser salvos offline
com SQLite.
2. Você foi contratado para criar um aplicativo para um restaurante, e é impres-

cindível que ele tenha o recurso de vibrar assim que um pedido esteja pronto.
Sabendo disso, assinale a alternativa correta para o comando de instalação
do plugin de vibração (vibration):
a. ionic install plugin cordova-plugin-vibration.
b. cordova add cordova-plugin-vibration.
c. cordova plugin install cordova-plugin-vibration.
d. ionic plugin install cordova-plugin-vibration.
e. cordova plugin add cordova-plugin-vibration.
3. Podemos afirmar que é possível utilizar mais de um plugin em um único aplicati-

vo, e que isso, em muitos casos, traz inúmeros recursos a respeito de usabilidade
ao usuário. Baseando-se nesta afirmativa, leia atentamente as assertivas a seguir:
I. Os plugins do Cordova funcionam apenas em Android e iOS.
II. É possível ver todos os plugins instalados do app na pasta plugins.
III. Para cada plugin utilizado pelo ngCordova, se faz necessário importar sua
diretiva no controller.
IV. Alguns plugins podem ser testados em emuladores.
253
A partir das assertivas apresentadas, assinale a alternativa correta:

a. Apenas I e II estão corretas.
b. Apenas II e III estão corretas.
c. Apenas I está correta.
d. Apenas II, III e IV estão corretas.
e. Nenhuma das alternativas está correta.
4. O AngularJS é um framework amplamente utilizado para desenvolvimento de

aplicações web pois seu foco é em agilidade no desenvolvimento frontend. A
partir desta afirmação, assinale a alternativa correta que apresenta a diretiva
responsável por executar uma função no controller ao ser clicado:
a. onClick.
b. on-click.
c. angular-click.
d. ng-click.
e. eventClick.
5. Nem sempre o que testamos no ambiente de desenvolvimento funcionará no

ambiente de produção, isso ocorre muito em aplicativos mais complexos. Sendo
assim, assinale a alternativa que apresenta o comando que roda um aplica-
tivo em um device com sistema operacional Android:
a. ionic start android.
b. ionic run android.
c. ionic exec android.
d. ionic build android.
e. ionic platform add android.
254
Um pouco sobre a história do Cordova

Como já foi dito, o Cordova é um dos frameworks para criar aplicativos híbridos mais
utilizado no mundo, então, vamos entender um pouco melhor sua história, mas antes
de falar sobre o Cordova, temos que começar com PhoneGap.
O PhoneGap foi criado por Nitobi em 2008 e inicialmente lançado como um produto
livre e de código aberto. Rapidamente se tornou popular pelos desenvolvedores que
queriam trabalhar em plataformas móveis, mas não sabiam desenvolver em linguagens
nativas como em Java para Android ou Object-C para iOS.
A proposta do PhoneGap era, e sempre foi, dar a habilidade para os desenvolvedores
que sabiam desenvolver aplicações para web, como websites, dar o poder de criar apli-
cativos para dispositivos móveis utilizando as tecnologias da web.
Quando foi lançado, o PhoneGap forneceu uma série de APIs escritas em JavaScript para
trabalhar com os recursos nativos do dispositivo. No começo, apenas alguns recursos
foram suportados, mas ao longo do tempo o PhoneGap cresceu e evoluiu para abranger
a maioria dos recursos nativos que os desenvolvedores estavam acostumados a usar em
aplicações nativas, incluindo a câmera, o sistema de arquivos e as notificações.
Em 4 de outubro de 2011, a Adobe anunciou a aquisição da Nitobi e, no mesmo perío-
do, o projeto PhoneGap foi enviado para a Apache Software Foundation (ASF). Com a
compra, o nome PhoneGap ficou em direitos da Adobe, passando a se chamar Adobe
PhoneGap, e o que era PhoneGap foi renomeado para Apache Callback, mas para facili-
tar a pesquisa na web o nome foi mudado para Cordova.
Agora pensamos sobre a controvérsia da alteração do nome. Qualquer pessoa que te-
nha passado algum tempo trabalhando com PhoneGap, ou Cordova, pensou sobre o
problema de descobrir a diferença entre os dois e qual deles devem usar. Vamos tentar
entender isso agora, para que você possa parar de se preocupar com isso e começar a
construir aplicativos móveis legais e mais rápidos.
Cordova, ou mais oficialmente Apache Cordova, é o projeto de código aberto, sob a ASF.
Então, o que isso faz com PhoneGap? PhoneGap é a implementação da Adobe do pro-
jeto Cordova. Isso faz sentido, certo? Provavelmente não. Vamos ver um exemplo real.
Durante muito tempo, dois navegadores, o Chrome e o Safari, usaram um projeto open
source chamado WebKit. Embora ambos se baseassem no mesmo projeto de código
aberto, eles eram muito diferentes. Você pode pensar em PhoneGap da mesma manei-
ra. PhoneGap ainda é de código aberto, mas a Adobe adicionou serviços em torno do
PhoneGap que não são gratuitos.
Fonte: adaptada de Camden (2015).
Introducing SQLite for Mobile Developers

Jesse Feiler
Editora: Apress
Sinopse: Feiler trabalhou com bancos de dados de diferentes
níveis em muitas plataformas. Apesar do fato que quase todos
eles foram baseados no modelo relacional, ele teve algumas
excursões em estruturas de banco de dados antigas, como o
IMS (um banco de dados hierárquico) e, mais recentemente,
em dados não estruturados, mas em todos os casos tem sido
uma questão de um princípio básico: encontrar a maneira mais simples de organizar os dados para que
faça sentido. Nesse livro, você irá entender tudo o que precisa saber sobre o banco de dados SQLite.
REFERÊNCIAS

2016.
FEILER, J. Introducing SQLite for Mobile Developers. California: Apress Media,
2015.
PANDA, S. AngularJS: Novice to ninja. Austrália: SitePoint Pty. Ltd, 2014.
PEREIRA, M. H. R. AngularJS: uma Abordagem Prática e Objetiva. São Paulo: Nova-
tec Editora Ltda, 2014.
PHAN, H. Ionic Cookbook: Over 20 exciting recipes to spice up your application
development with Ionic. Birmingham: Packt Publishing, 2015.
257
GABARITO
1. C.
2. E.
3. D.
4. D.
5. B.
CONCLUSÃO
Caro(a) aluno(a), aqui terminamos nossa aventura no fantástico mundo do desen-

volvimento de aplicativos móveis, a partir dela entendemos a importância de de-
senvolver aplicações híbridas quando a necessidade é lançar aplicativos de forma
rápida ao mercado levando em consideração as muitas plataformas existentes e o
grau de complexidade que enfrentaríamos se fossemos criar aplicativos nativos.
Nos aventuramos também, de forma introdutória, pelas tecnologias de base da web
como HTML, CSS e JavaScript e entendemos que essas tecnologias são ricas em re-
cursos para implementar aplicativos híbridos de forma que possamos explorar o
seu melhor.
Discutimos que o Ionic Framework utiliza como base o Apache Cordova para criar
aplicativos híbridos, mas tenha em mente que se quisermos criar aplicativos do zero
utilizando apenas o nosso HTML, CSS e JavaScript, isso é possível, porém, utilizar
os componentes do Ionic certamente traz um ganho de produtividade enorme em
velocidade de desenvolvimento.
Um ponto que foi bem discutido, e que se faz necessário ressaltar neste momento,
é que não podemos ficar limitados apenas aos recursos que os componentes dispo-
nibilizam, pois vimos na unidade III que customizar componentes não é complicado
e uma simples customização de fonte já traz um apelo visual bem diferente depen-
dendo do contexto de seu aplicativo. Mesmo com várias possibilidades de customi-
zar componentes, podemos criar nossos próprios componentes do zero caso seja
necessário, como fizemos na unidade IV.
E por fim trabalhamos com alguns recursos nativos, entendendo o processo de
instalação, configuração e utilização. Nesse ponto, precisamos sintetizar tudo que
aprendemos nas unidades anteriores e pensar em novos aplicativos que podemos
criar.
Nossa aventura termina aqui, mas a sua só está começando. Se aventure na criação
de novos aplicativos, criando seus componentes e utilizando diferentes recursos na-
tivos, lembre-se sempre que a prática leva à perfeição.

8245

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

8245

Загружено:

Авторское право:

Доступные форматы

TÓPICOS EM

Professor Esp. Fábio Rogério da Silva José.

NEAD - Núcleo de Educação a Distância

Professor Esp. Fábio Rogério da Silva José

Para informações mais detalhadas sobre sua atuação profissional, pesquisas e

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA

20 Linguagem de Marcação Html

26 Estilos com Css

36 Programação com Javascript

COMPONENTES EM IONIC FRAMEWORK

48 Introdução ao Ionic Framework

52 Criando o Primeiro App

58 Header, Content e Footer

97 Radio Buttons, Range e Select

102 TABS e GRID

110 Considerações Finais

120 Customizando Listas

128 Fontes, Plano de Fundo Geral e Campos

137 Criando Badges e Customizando Botões

145 Customizando Grid

156 Customizando Formulários

170 Header Transparente e Scroll Vertical

180 Considerações Finais

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO

192 Ícones e Novos Componentes

205 Empacotando o Aplicativo

221 Considerações Finais

TRABALHANDO COM RECURSOS NATIVOS

232 Plugins e Integração

240 Gps, Spinner e Google Maps

243 Gravação e Reprodução de Áudio

246 Salvando Dados Offline dom Sqlite

251 Considerações Finais

O desenvolvimento de aplicativos móveis já não é novidade e está bem consoli-

ao mercado pois, você precisará apenas ter conhecimento em tecnologias de base

Olá, caro(a) aluno(a). Sabemos que existem diversas plataformas de aplicativos

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

Desenvolvimento nativo é quando um aplicativo é desenvolvido utilizando os

Segundo Shotts (2016), desenvolver aplicativos híbridos significa utilizar tecno-

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

sendo um navegador incorporado sem as barras de navegação, que também for-

Aplicativo nativo feito com Cordova

Cordova cria um aplicativo “híbrido”, que é

Câmera GPS Contatos Cordova também fornece conexões

Figura 1 - Um diagrama simples de como funciona um aplicativo híbrido

O Cordova tem o papel de criar uma aplicação híbrida, ou seja, um aplicativo no

Em aplicativos híbridos, nossos elementos são criados utilizando a linguagem de

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

Figura 2 - Código index.html

O resultado de nossa primeira página em HTML pode ser visto na Figura 3.

Figura 3 - Print do código index.html no navegador

Linguagem de Marcação Html

Precisamos entender a estrutura base do HTML e os principais elementos, tam-

Os elementos internos de um elemento são conhecidos como elementos

Figura 4 - Elemento de caixa de texto (input)

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

Tabela 1 – Principais elementos do HTML

cabeçalho descreve brevemente o tópico da seção em que ele está. As

Linguagem de Marcação Html

<pre> HTML Preformatted Text (<pre>) é a tag utilizada para representar

INTRODUÇÃO AO DESENVOLVIMENTO DE APLICATIVOS PARA DISPOSITIVOS MÓVEIS

<button> O elemento HTML <button> representa um botão clicável.

Linguagem de Marcação Html

O CSS, ou folha de estilo em cascatas (Cascading Style Sheets), é o responsável

20 Linguagem de Marcação Html

26 Estilos com Css

36 Programação com Javascript

48 Introdução ao Ionic Framework

52 Criando o Primeiro App

58 Header, Content e Footer

97 Radio Buttons, Range e Select

102 TABS e GRID

110 Considerações Finais

120 Customizando Listas

128 Fontes, Plano de Fundo Geral e Campos

137 Criando Badges e Customizando Botões

145 Customizando Grid

156 Customizando Formulários

170 Header Transparente e Scroll Vertical

180 Considerações Finais

192 Ícones e Novos Componentes

205 Empacotando o Aplicativo

221 Considerações Finais

232 Plugins e Integração

240 Gps, Spinner e Google Maps

243 Gravação e Reprodução de Áudio

246 Salvando Dados Offline dom Sqlite

251 Considerações Finais