Você está na página 1de 258

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

110 Considerações Finais

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

180 Considerações Finais


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

221 Considerações Finais

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

251 Considerações Finais

256 Referências
12
SUMÁRIO

257 Gabarito

258 Conclusão
Professor Esp. Fábio Rogério da Silva José

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

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


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


21
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Linguagem de Marcação Html


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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Linguagem de Marcação Html


26 UNIDADE I

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 9 - Código pagina2.html parte 1
Fonte: o autor.

Figura 10 - Código pagina2.html parte 2


Fonte: o autor.

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


31
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

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


33
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 16 - CSS alterado
Fonte: o autor.

Esperamos ter o resultado exibido na Figura 17.

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


35
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

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


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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

çã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
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.
Professor Esp. Fábio Rogério da Silva José

COMPONENTES EM IONIC

II
UNIDADE
FRAMEWORK

Objetivos de Aprendizagem
■■ 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
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
■■ 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

COMPONENTES EM IONIC FRAMEWORK


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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>.

COMPONENTES EM IONIC FRAMEWORK


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

COMPONENTES EM IONIC FRAMEWORK


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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

COMPONENTES EM IONIC FRAMEWORK


55
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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!

COMPONENTES EM IONIC FRAMEWORK


57
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

COMPONENTES EM IONIC FRAMEWORK


59

Para voltar uma pasta anterior por linha de comando, digite:

cd ..

Para criar, entrar na pasta e rodar um novo app, digite:


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

COMPONENTES EM IONIC FRAMEWORK


61

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


title=”center”>

<h1 class=”title”>App Exemplo 1</h1>

</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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 class=”bar-positive”>

<h1 class=”title”>App Exemplo 1</h1>

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

Header, Content e Footer


62 UNIDADE II

<p>parágrafo 1</p>

<img src=”img/ionic.png”>

<p>parágrafo 2</p>

<img src=”img/ionic.png”>

<p>parágrafo 3</p>

<img src=”img/ionic.png”>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<p>parágrafo 4</p>

<img src=”img/ionic.png”>

<p>parágrafo 5</p>

<img src=”img/ionic.png”>

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

COMPONENTES EM IONIC FRAMEWORK


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.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 5 - Print do aplicativo


Fonte: o autor.

Header, Content e Footer


64 UNIDADE II

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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 class=”bar-positive”>

<h1 class=”title”>App Exemplo 1</h1>

</ion-header-bar>

<ion-header-bar class=”bar-subheader bar-


dark”>

COMPONENTES EM IONIC FRAMEWORK


65

<h1 class=”title”>SubHeader</h1>

</ion-header-bar>

<ion-content class=”padding”>

...

</ion-content>

<ion-footer-bar class=”bar bar-balanced”>


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

COMPONENTES EM IONIC FRAMEWORK


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

COMPONENTES EM IONIC FRAMEWORK


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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</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:

COMPONENTES EM IONIC FRAMEWORK


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>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 class=”button button-dark”>Botão 2</


button>

<button class=”button button-dark”>Botão 3</


button>

</div>

Seu projeto deve está com a aparência da Figura 8.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 8 - Print do aplicativo


Fonte: o autor.

COMPONENTES EM IONIC FRAMEWORK


73
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

<ion-content class=”padding”>

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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>

COMPONENTES EM IONIC FRAMEWORK


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>


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 9 - Print do aplicativo
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>

COMPONENTES EM IONIC FRAMEWORK


77

Rio de Janeiro

</ion-item>

<ion-item>

Florianópolis

</ion-item>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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>

COMPONENTES EM IONIC FRAMEWORK


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Nossa lista deve apresentar algo parecido como a Figura 10.

Figura 10 - Print do aplicativo alterado


Fonte: o autor.

COMPONENTES EM IONIC FRAMEWORK


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

<ion-item class=”item-avatar”>

<img src=”img/city_2.jpg”>

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

<ion-item class=”item-avatar”>

<img src=”img/city_3.jpg”>

<h2>Washington, DC</h2>

<p>Washington, D.C. é a capital dos


Estados Unidos.</p>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</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.

COMPONENTES EM IONIC FRAMEWORK


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

<img src=”img/city_4.jpg”>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<img src=”img/city_5.jpg”>

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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”>

COMPONENTES EM IONIC FRAMEWORK


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>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<a href=”#” class=”item item-icon-left”>

<i class=”icon ion-ios-telephone”></i>

Editar número de telefone

</a>

<a href=”#” class=”item item-icon-left”>

<i class=”icon ion-wifi”></i>

Escolher uma rede preferencial

</a>

<a href=”#” class=”item item-icon-left”>

<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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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”>

COMPONENTES EM IONIC FRAMEWORK


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>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

</p>

</div>

</div>

O resultado pode ser visto na Figura 13.

Figura 13 - Print do aplicativo de card


Fonte: o autor.

List e Cards
88 UNIDADE II

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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>.

COMPONENTES EM IONIC FRAMEWORK


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<ion-list>

<label class=”item item-input”>

<input type=”text” placeholder=”Nome


completo”>

</label>

<label class=”item item-input”>

<input type=”email” placeholder=”E-mail”>

</label>

<label class=”item item-input”>

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

<label class=”item item-input”>

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

COMPONENTES EM IONIC FRAMEWORK


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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<label class=”item item-input”>

<i class=”icon ion-search placeholder-


icon”></i>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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.

COMPONENTES EM IONIC FRAMEWORK


93

Para complementar nosso exemplo vamos adicionar um card como pergunta:

<ion-content class=”padding”>

<div class=”card padding”>

Quais tecnologias você esta aprendendo?

</div>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<ion-item class=”item-toggle”>

CSS

<label class=”toggle toggle-balanced”>

<input type=”checkbox”>

<div class=”track”>

Toggle e Checkbox
94 UNIDADE II

<div class=”handle”></div>

</div>

</label>

</ion-item>

<ion-item class=”item-toggle”>

JavaScript

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<label class=”toggle toggle-balanced”>

<input type=”checkbox”>

<div class=”track”>

<div class=”handle”></div>

</div>

</label>

</ion-item>

</ion-list>

</ion-content>

COMPONENTES EM IONIC FRAMEWORK


95

O resultado pode ser visto na Figura 15.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<input type=”checkbox”>

</label>

HTML5

Toggle e Checkbox
96 UNIDADE II

</ion-item>

<ion-item class=”item-checkbox”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

CSS

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</ion-item>

<ion-item class=”item-checkbox”>

<label class=”checkbox checkbox-


assertive”>

<input type=”checkbox”>

</label>

JavaScript

</ion-item>

</ion-list>

COMPONENTES EM IONIC FRAMEWORK


97

O resultado pode ser visto na Figura 16.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

<body ng-app=”starter”>

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</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>

COMPONENTES EM IONIC FRAMEWORK


99

O resultado pode ser visto na Figura 17.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 17 - Print do aplicativo


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>

Radio Buttons, Range e Select


100 UNIDADE II

</ion-item>

<ion-item class=”range range-calm”>

<i class=”icon ion-ios-lightbulb-


outline”></i>

<input type=”range” min=”0” max=”100”


value=”25”>

<i class=”icon ion-ios-lightbulb”></i>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</ion-item>

<ion-item class=”range range-balanced”>

<i class=”icon ion-ios-bolt-outline


assertive”></i>

<input type=”range” min=”0” max=”100”


value=”38”>

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


i>

</ion-item>

</ion-list>

COMPONENTES EM IONIC FRAMEWORK


101

O resultado pode ser visto na Figura 18.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 18 - Print do aplicativo


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?

Radio Buttons, Range e Select


102 UNIDADE II

</div>

<select>

<option>Laranja</option>

<option selected>Maça</option>

<option>Banana</option>

<option>Caqui</option>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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.

COMPONENTES EM IONIC FRAMEWORK


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:

<body ng-app=”starter”>

<ion-pane>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<ion-content class=”padding”>

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>

<ion-content class=”padding”>

Conteúdo do tab Sobre

</ion-content>

</ion-view>

</ion-tab>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<ion-tab title=”Configurações” icon-
on=”ion-ios-gear” icon-off=”ion-ios-gear-
outline”>

<ion-view>

<ion-content class=”padding”>

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:

COMPONENTES EM IONIC FRAMEWORK


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


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 class=”col”>2</div>

</div>

<div class=”row”>

<div class=”col”>3</div>

<div class=”col”>4</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;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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=”row”>

<div class=”col col-50”>5</div>

<div class=”col”>6</div>

<div class=”col”>7</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:

COMPONENTES EM IONIC FRAMEWORK


107

Figura 20 - Print do aplicativo de grid


Fonte: o autor.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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=”row”>

<div class=”col col-33 col-offset-33”>8</div>

<div class=”col”>9</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=”row”>

<div class=”col col-top”>10</div>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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”>10</div>

<div class=”col”>11</div>

<div class=”col”>12</div>

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

COMPONENTES EM IONIC FRAMEWORK


109

<div class=”row responsive-sm”>

<div class=”col”>17</div>

<div class=”col”>18</div>

<div class=”col”>19</div>

<div class=”col”>20</div>

</div>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

CONSIDERAÇÕES FINAIS

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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/>.

COMPONENTES EM IONIC FRAMEWORK


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

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

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.
CAMDEN, R. K. Apache Cordova in Action. Shelter Island: Manning Publications Co,
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.
Professor Esp. Fábio Rogério da Silva José

CUSTOMIZANDO

III
UNIDADE
COMPONENTES

Objetivos de Aprendizagem
■■ 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
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
■■ 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 1 - Print do aplicativo de lista


Fonte: o autor.

CUSTOMIZANDO COMPONENTES
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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<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-content class=”padding”>

<ion-list class=”list-custom”>

<ion-item class=”item-avatar item-button-


right”>

<img src=”img/user1.jpg”>

<h2>Luis Barbosa Santos</h2>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<span class=”badge-custom amigo”>Amigo</span>

<button class=”button button-balanced”>

<i class=”icon ion-checkmark-round”></i>

</button>

</ion-item>

<ion-item class=”item-avatar item-button-


right”>

<img src=”img/user2.jpg”>

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

<ion-item class=”item-avatar item-button-

CUSTOMIZANDO COMPONENTES
123

right”>

<img src=”img/user3.jpg”>

<h2>Gabrielly Ribeiro Carvalho</h2>

<span class=”badge-custom familia”>Família</


span>

<button class=”button button-assertive”>


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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;

CUSTOMIZANDO COMPONENTES
125

margin-bottom: 10px;

.icon-search {

margin-right: 10px;

font-size: 20px;

}
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
.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

CUSTOMIZANDO COMPONENTES
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;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

border-radius: 10px;

float: left;

Customizando Listas
128 UNIDADE III

margin-left: 10px;

.badge-custom.amigo {

background-color: #7bcef3;

.badge-custom.familia {

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

CUSTOMIZANDO COMPONENTES
129
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
placeholder-icon”></i>

<input type=”text” placeholder=”Username”>

</ion-item>

<ion-item class=”item-input”>

<i class=”icon ion-ios-email-outline


placeholder-icon”></i>

<input type=”text” placeholder=”E-mail”>

</ion-item>

<ion-item class=”item-input”>

<i class=”icon ion-ios-locked-outline


placeholder-icon”></i>

<input type=”text” placeholder=”Senha”>

</ion-item>

<ion-item class=”item-button button-first”>

<button class=”button button-block button-


calm”>Criar conta</button>

CUSTOMIZANDO COMPONENTES
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”>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<button class=”button button-block 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.

Fontes, Plano de Fundo Geral e Campos


132 UNIDADE III

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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-color: #000;

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

CUSTOMIZANDO COMPONENTES
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;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Fontes, Plano de Fundo Geral e Campos


134 UNIDADE III

.item-input input {

font-size: 16px;

margin-left: 10px;

color: #fff;

.item-button {

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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/>.

CUSTOMIZANDO COMPONENTES
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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

Fontes, Plano de Fundo Geral e Campos


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;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
.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.

CUSTOMIZANDO COMPONENTES
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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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>

CUSTOMIZANDO COMPONENTES
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>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<h3>FALE COMIGO</h3>

<div class=”contato”>

<button class=”button icon ion-ios-telephone


button-assertive button-small”></button> +55 44
9999-8888

</div>

<div class=”contato”>

<button class=”button icon ion-ios-email


button-energized button-small”></button> fabio.
rogerio.sj@gmail.com

</div>

<div class=”contato”>

<button class=”button icon ion-ios-location


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

</div>

<div class=”contato”>

Criando Badges e Customizando Botões


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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

CUSTOMIZANDO COMPONENTES
141

.top-profile {

text-align: center;

margin-top: 20px;

.top-profile img {

width: 120px;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

Criando Badges e Customizando Botões


142 UNIDADE III

.name {

font-size: 18px;

color: #4E4E4E;

text-align: center;

margin: 0;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
.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%;

CUSTOMIZANDO COMPONENTES
143

min-width: 45px;

min-height: 45px;

margin: 5px;

.sociais button.button.icon:before {

font-size: 20px;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Criando Badges e Customizando Botões


144 UNIDADE III

padding-left: 10px;

padding-right:10px;

margin: 0;

p {

color: #909090;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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;

CUSTOMIZANDO COMPONENTES
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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<div class=”row”>

<div class=”col”>

<label>Pedidos pendentes</label>

<h2 class=”light”>24</h2>

</div>

<div class=”col”>

<label>Pedidos entregues</label>

<h2 class=”balanced”>125</h2>

</div>

<div class=”col”>

<label>Pedidos cancelados</label>

<h2 class=”assertive”>12</h2>

</div>

</div>

CUSTOMIZANDO COMPONENTES
147

<div class=”row valores”>

<div class=”col”>

<label>Valor pendente</label>

<h2 class=”light”><span>R$</span> 26.600,00</


h2>

</div>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<div class=”col”>

<label>Valor recebido</label>

<h2 class=”light”><span>R$</span> 245.900,00</


h2>

</div>

<div class=”col”>

<label>Valor total</label>

<h2 class=”light”><span>R$</span> 272.500,00</


h2>

</div>

</div>

<div class=”row valores”>

<div class=”col”>

<label>Valor pendente <span><i class=”icon


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

<h2 class=”light”><span>R$</span> 26.600,00</


h2>

Customizando Grid
148 UNIDADE III

</div>

<div class=”col”>

<label>WTD <span><i class=”icon ion-arrow-


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

<h2 class=”light”><span>R$</span> 24.000,00</


h2>

</div>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<div class=”col”>

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


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

<h2 class=”light”><span>R$</span> 672.000,00</


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

<img src=”img/user1.jpg”>

<div class=”right”>

CUSTOMIZANDO COMPONENTES
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>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

</a>

<a class=”item item-avatar”>

<img src=”img/user1.jpg”>

<div class=”right”>

<div class=”valor”>R$ 2.455,00</div>

<i class=”icon ion-ios-arrow-right”></i>

</div>

<h2>João Paula Moraes</h2>

<p><i class=”icon ion-calendar”></i>


12/02/2016 - 15:12</p>

</a>

<a class=”item item-avatar”>

<img src=”img/user3.jpg”>

<div class=”right”>

<div class=”valor”>R$ 1.200,00</div>

Customizando Grid
150 UNIDADE III

<i class=”icon ion-ios-arrow-right”></i>

</div>

<h2>Monica Fransoneze</h2>

<p><i class=”icon ion-calendar”></i>


12/02/2016 - 15:50</p>

</a>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<a class=”item item-avatar”>

<img src=”img/user5.jpg”>

<div class=”right”>

<div class=”valor”>R$ 5.980,00</div>

<i class=”icon ion-ios-arrow-right”></i>

</div>

<h2>José Luiz</h2>

<p><i class=”icon ion-calendar”></i>


12/02/2016 - 15:52</p>

</a>

<a class=”item item-avatar”>

<img src=”img/user6.jpg”>

<div class=”right”>

<div class=”valor”>R$ 800,00</div>

<i class=”icon ion-ios-arrow-right”></i>

CUSTOMIZANDO COMPONENTES
151

</div>

<h2>Maria Vitória</h2>

<p><i class=”icon ion-calendar”></i>


12/02/2016 - 15:58</p>

</a>

</ion-list>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
}

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;

background-color: #525659;

padding: 10px;

.row label{

color: #9CA0A3;

CUSTOMIZANDO COMPONENTES
153

font-size: 12px;

.row label span {

float: right;

color: #fff;

padding-top: 4px;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

CUSTOMIZANDO COMPONENTES
155

.right {

float: right;

color: #8C9093;

font-size: 18px;

font-weight: bold;

margin-top: 10px;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

CUSTOMIZANDO COMPONENTES
157

<ion-content>

<h1>PASSO 1/3</h1>

<div class=”forms”>

<h3>Tipo da viagem?</h3>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<div class=”item item-input”>

<input type=”text” placeholder=”Informe o


local de destino”>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<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”>

<div class=”col”>

<div class=”item item-input”>

<input type=”date”>

<i class=”icon ion-ios-calendar-


outline”></i>

</div>

</div>

CUSTOMIZANDO COMPONENTES
159

<div class=”col”>

<div class=”item item-input”>

<input type=”time”>

<i class=”icon ion-ios-clock-outline”></


i>

</div>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

</div>

</div>

<h4>Data volta</h4>

<div class=”row row-input”>

<div class=”col”>

<div class=”item item-input”>

<input type=”date”>

<i class=”icon ion-ios-calendar-


outline”></i>

</div>

</div>

<div class=”col”>

<div class=”item item-input”>

<input type=”time”>

<i class=”icon ion-ios-clock-outline”></


i>

Customizando Formulários
160 UNIDADE III

</div>

</div>

</div>

Para concluir nossos elementos HTML, vamos adicionar uma lista de checkbox:

<h3>Passeios adicionais</h3>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<ion-list class=”list-custom”>

<ion-item class=”item-checkbox item-checkbox-


right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Visita ao Corcovado

</ion-item>

<ion-item class=”item-checkbox item-checkbox-


right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Castelo da Sapolientra

</ion-item>

CUSTOMIZANDO COMPONENTES
161

<ion-item class=”item-checkbox item-checkbox-


right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Lago Santo River Side


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

</ion-item>

<ion-item class=”item-checkbox item-checkbox-


right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Visita ao Corcovado

</ion-item>

<ion-item class=”item-checkbox item-checkbox-


right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Castelo da Sapolientra

</ion-item>

<ion-item class=”item-checkbox item-checkbox-

Customizando Formulários
162 UNIDADE III

right”>

<label class=”checkbox”>

<input type=”checkbox”>

</label>

Lago Santo River Side

</ion-item>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</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.

CUSTOMIZANDO COMPONENTES
163
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

Customizando Formulários
164 UNIDADE III

.bar.bar-positive.bar-top {

background-color: #00A5FF;

background-image: none;

.bar-top .title {

font-family: ‘Pacifico’, cursive;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
}

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 {

font-family: ‘Lato’, sans-serif;

background-color: #00A5FF;

color: #fff;

text-align: center;

font-size: 18px;

font-weight: 800;

CUSTOMIZANDO COMPONENTES
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%;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

padding: 20px;

ion-content h3 {

font-weight: 300;

font-size: 25px;

text-align: center;

color: #595959;

font-family: ‘Lato’, sans-serif;

h4 {

color: #595959;

padding-left: 15px;

font-family: ‘Lato’, sans-serif;

margin:0;

Customizando Formulários
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;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
}

.row {

padding: 2px;

.col.select {

background-color: #00A5FF;

color: #fff;

border-radius: 15px;

.radio-custom {

background-color: #F2F2F2;

border-radius: 15px;

color: #999999;

.radio-custom .col {

CUSTOMIZANDO COMPONENTES
167

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

font-family: ‘Lato’, sans-serif;

Para não ficar colado nas laterais, demos um espaçamento interno em todo for-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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-radius: 15px;

border-color: #BEBEBE;

margin-bottom: 20px;

.item input {

color: #00A5FF;

font-family: ‘Lato’, sans-serif;

.item-input i {

font-size: 25px;

margin-right: 15px;

Customizando Formulários
168 UNIDADE III

color:#BEBEBE;

.item-input input {

padding-right: 0;

.row-input {

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

.list-custom .item {

border-radius: 0;

border-left-width: 0;

border-right-width: 0;

.list-custom .item {

CUSTOMIZANDO COMPONENTES
169

color: #00A5FF;

margin: 0;

margin-top: -1px;

.checkbox input:checked:before, .checkbox input:checked


+ .checkbox-icon:before {
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Customizando Formulários
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).

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 11 - Print do aplicativo de persona


Fonte: o autor.

Crie um novo aplicativo chamado appPersona.

CUSTOMIZANDO COMPONENTES
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”>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</h3>

<ion-scroll direction=”x” class=”wide-as-


needed”>

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


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

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


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

<div class=”photo selected”


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

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


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

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


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

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


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

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


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

CUSTOMIZANDO COMPONENTES
173

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


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

</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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

<img class=”filme” src=”img/filme2.jpg”


height=”80px”>

<img class=”filme” src=”img/filme3.jpg”


height=”80px”>

Header Transparente e Scroll Vertical


174 UNIDADE III

<img class=”filme” src=”img/filme4.jpg”


height=”80px”>

<img class=”filme” src=”img/filme5.jpg”


height=”80px”>

<img class=”filme” src=”img/filme6.jpg”


height=”80px”>

<img class=”filme” src=”img/filme7.jpg”


height=”80px”>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<img class=”filme” src=”img/filme8.jpg”
height=”80px”>

<img class=”filme” src=”img/filme9.jpg”


height=”80px”>

<img class=”filme” src=”img/filme10.jpg”


height=”80px”>

</ion-content>

</ion-pane>

Adicionamos apenas algumas imagens com a classe filme. Nosso aplicativo está
igual a Figura 12.

CUSTOMIZANDO COMPONENTES
175
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

Header Transparente e Scroll Vertical


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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
#preview {

background-size: cover;

height: 60%;

background-position: center;

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;

CUSTOMIZANDO COMPONENTES
177

background-color: #000;

display: inline-block;

margin-left: 6px;

margin-bottom: 0;

background-size: cover;

background-position: center;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

opacity: 0.8;

.photo.selected {

border:2px solid #fff;

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 {

Header Transparente e Scroll Vertical


178 UNIDADE III

overflow: scroll;

white-space: nowrap;

display: inline-block;

width: 100%;

margin-top: 10px;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
.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;

CUSTOMIZANDO COMPONENTES
179

h3.right {

float: right;

margin: 0;

margin-right: 20px;

}
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

ion-content h3 {

color: #fff;

font-family: ‘Lato’, sans-serif;

font-size: 16px;

margin: 0;

margin-left: 20px;

h4 {

color: #2E3037;

font-family: ‘Lato’, sans-serif;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 5px;

margin-top: 20px;

Header Transparente e Scroll Vertical


180 UNIDADE III

p {

color: #2E3037;

font-family: ‘Lato’, sans-serif;

padding-left: 10px;

padding-right: 10px;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
.filme {

margin-left: 10px;

Aplicamos diferentes estilos para cada tipo de título e adicionamos uma pequena
margem entre cada capa de filme apresentada.

CONSIDERAÇÕES FINAIS

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

CUSTOMIZANDO COMPONENTES
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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Considerações Finais
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).
MATERIAL COMPLEMENTAR

CSS3
Maurício Samy Silva
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.

Material Complementar
186
REFERÊNCIAS

RAVULAVARU, A. Learning Ionic: Build real-time and hybrid mobile applications


with Ionic. Birmingham: Packt Publishing, 2015.
CAMDEN, R. K. Apache Cordova in Action. Shelter Island: Manning Publications Co,
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.
Professor Esp. Fábio Rogério da Silva José

IV
CRIANDO COMPONENTES

UNIDADE
COMPLEXOS E
EMPACOTANDO APLICATIVO

Objetivos de Aprendizagem
■■ Aprender a criar novos componentes.
■■ Empacotar o aplicativo final.

Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
■■ Í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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 1 - Print do app de timeline


Fonte: o autor.

Crie um novo aplicativo chamado appTimeline:

ionic start appTimeline blank

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
<h2>Linus Torvalds</h2>

<h3>Criador do Linux</h3>

<div class=”row”>

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

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


195

<div class=”card padding”>

<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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

</div>

<div class=”info”>

<i class=”material-icons”>date_range</i>

18/11/2011

</div>

</div>

</div>

<div class=”event”>

<i class=”material-icons mark”>call</i>

<div class=”card padding”>

<p>Ligou para <b>Bill Gates</b> falando


sobre idéias para 2016.</p>

<div class=”info”>

<i class=”material-icons”>access_time</
i>

Ícones e Novos Componentes


196 UNIDADE IV

8:30am

</div>

<div class=”info”>

<i class=”material-icons”>date_range</i>

22/11/2011

</div>

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
</div>

</div>

<div class=”event”>

<i class=”material-icons mark”>bookmark</i>

<div class=”card padding”>

<p>Foi marcado na foto de <b>Mike Flor</


b>.</p>

<p class=”item-image”>

<img src=”img/event1.jpg”>

</p>

<div class=”info”>

<i class=”material-icons”>access_time</
i>

22:11pm

</div>

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


197

<div class=”info”>

<i class=”material-icons”>date_range</i>

12/12/2011

</div>

</div>

</div>
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

<div class=”event”>

<img class=”mark-profile” src=”img/fabio.jpg”>

<div class=”card padding”>

<p>Aceitou novo seguidor <b>Fábio Rogério


SJ</b>.</p>

<div class=”info”>

<i class=”material-icons”>access_time</
i>

14:22pm

</div>

<div class=”info”>

<i class=”material-icons”>date_range</i>

15/12/2011

</div>

Ícones e Novos Componentes


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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


199

.pane, h1, h2, h3, p {

font-family: Ubuntu;

h2 {

color:#fff;

margin:0;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

h2 + h3 {

color:#ffb2b9;

margin:0;

font-weight:800;

font-size:22px;

.pane {

background-color:#687586;

.material-icons {

margin-top: 4px;

.bar.bar-assertive {

Ícones e Novos Componentes


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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
#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 {

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


201

width:150px;

border-radius:50%;

border:6px solid #fff;

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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Ícones e Novos Componentes


202 UNIDADE IV

Aumentamos a fonte e ajustamos os posicionamentos. Vamos ao componente:

.timeline {

padding-left:20px;

padding-top:10px;

background: #687586;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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;

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


203

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right:10px solid #fff;

position:absolute;

margin-left:-20px;
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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;

border:4px solid #fff;

color:#fff;

float:left;

margin-right:25px;

margin-top:-5px;

.mark-profile {

Ícones e Novos Componentes


204 UNIDADE IV

width:52px;

border-radius:50%;

border:4px solid #fff;

float:left;

margin-right:25px;

margin-top:-5px;

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
}

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;

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


205

float:left;

Deixamos as informações menores e com uma cor de menos destaque.


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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>.

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


207
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Empacotando o Aplicativo
208 UNIDADE IV

Clique em Visit java.oracle.com e siga os passos das figuras 6 e 7.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


209
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 8 - Print da instalação do Java


Fonte: o autor.

Figura 9 - Print da instalação do Java


Fonte: o autor.

Empacotando o Aplicativo
210 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 10 - Print da instalação do Java
Fonte: o autor.

Figura 11 - Print da instalação do Java


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)

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


211
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 12 - Print da instalação do Android


Fonte: o autor.

Figura 13 - Print da instalação do Android


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

Empacotando o Aplicativo
212 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 14 - Print da instalação do Android
Fonte: o autor.

Figura 15 - Print da instalação do Android


Fonte: o autor.

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


213
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 16 - Print da instalação do Android


Fonte: o autor.

Figura 17 - Print da instalação do Android


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

Empacotando o Aplicativo
214 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 18 - Print da instalação do Android
Fonte: o autor.

Em seguida clique em Accept License e Install para o download começar. Este


processo pode demorar alguns minutos (Figura 19).

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


215
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 19 - Print da instalação do Android


Fonte: o autor.

Ao concluir a etapa anterior, a tela da Figura 20 será apresentada.

Figura 20 - Print da instalação do Android


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

Empacotando o Aplicativo
216 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


217
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

Empacotando o Aplicativo
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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


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


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Empacotando o Aplicativo
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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


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.

CONSIDERAÇÕES FINAIS
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Considerações Finais
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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

CRIANDO COMPONENTES COMPLEXOS E EMPACOTANDO APLICATIVO


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).
MATERIAL COMPLEMENTAR

Fundamentos de HTML5 e CSS3


Maurício Samy Silva
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.
Professor Esp. Fábio Rogério da Silva José

TRABALHANDO COM

V
UNIDADE
RECURSOS NATIVOS

Objetivos de Aprendizagem
■■ 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
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
■■ 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM RECURSOS NATIVOS


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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

ionic platform add 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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM RECURSOS NATIVOS


235
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Plugins e Integração
236 UNIDADE V

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM RECURSOS NATIVOS


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Plugins e Integração
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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

TRABALHANDO COM RECURSOS NATIVOS


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).
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Plugins e Integração
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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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/


fabiorogeriosj/ionic-app-base

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


dependendo do ambiente que você está utilizando.

TRABALHANDO COM RECURSOS NATIVOS


241

ionic platform add android

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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

TRABALHANDO COM RECURSOS NATIVOS


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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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/


fabiorogeriosj/ionic-app-base

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


dendo do ambiente que você está utilizando.

ionic platform add android

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

TRABALHANDO COM RECURSOS NATIVOS


245
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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


Fonte: o autor.

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


246 UNIDADE V

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

TRABALHANDO COM RECURSOS NATIVOS


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/


fabiorogeriosj/ionic-app-base

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


Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

dependendo do ambiente que você está utilizando.

ionic platform add android

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM RECURSOS NATIVOS


249
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Figura 11 - Código controller.js do AppLembrete passo 2


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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 12 - Código controller.js do AppLembrete passo 3
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.

TRABALHANDO COM RECURSOS NATIVOS


251

CONSIDERAÇÕES FINAIS

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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Considerações Finais
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).
MATERIAL COMPLEMENTAR

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.

Material Complementar
REFERÊNCIAS

CAMDEN, R. K. Apache Cordova in Action. Shelter Island: Manning Publications Co,


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.
RAVULAVARU, A. Learning Ionic: Build real-time and hybrid mobile applications
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.

Você também pode gostar