Programação para dispositivos móveis

Prévia do material em texto

Paulo Lacerda
Programação para 
dispositivos móveis
Paulo Lacerda
Programação para 
dispositivos móveis
Lacerda, Paulo
Programação para dispositivos móveis. Sorocaba/SP, 2020. 65 f. Ed. 1.
Validador: Fábio Santiago.
Instituto Cultural Newton Paiva Ferreira Ltda. | ED+ Content Hub, 2020.
Assuntos:
1. Aplicativos móveis;
2. Experiência de usuário;
3. Interação.
Formato: digital.
Recurso: PDF e HTML.
Requisitos do sistema operacional:
• Windows 8.1 ou superior;
• Mac OSX 10.6 ou superior;
• Linux - ChromeOS.
Configurações técnicas:
• 2GB de memória RAM;
• 2.5GHz de processador;
• 10GB de espaço em disco.
Navegadores:
• Google Chrome – Versão mais atualizada;
• Mozilla Firefox – Versão mais atualizada.
Dispositivos móveis:
• iOS 10 ou superior;
• Android 5 ou superior.
Modo de acesso: área restrita - Ambiente Virtual de Aprendizagem.
Todos os direitos desta edição são reservados ao Centro Universitário Facens.
Rodovia Senador José Ermírio de Moraes, 1425, km 1,5 – Sorocaba/SP
CEP: 18.085-784 | tel.: 55 15 3238 1188
Nenhuma parte desta publicação poderá ser reproduzida por qualquer meio ou forma sem autorização.
A violação dos direitos autorais é crime estabelecido pela Lei n.º 9.610/98 e punido pelo artigo 184 do Código Penal.
Todas as imagens, vetores e ilustrações são creditados ao Shutterstock Inc., salvo quando indicada a referência.
Conteúdo
Unidade 1
O mundo React .................................................................................... 6
Unidade 2
Meu primeiro APP .............................................................................. 23
Unidade 3
Navegação .......................................................................................... 41
Unidade 4
Trabalhando com mapas ................................................................... 58
Unidade 5
Persistência de dados ........................................................................ 73
Unidade 6
Recursos nativos ................................................................................ 89
Unidade 7
Testes ................................................................................................ 103
Unidade 8
Divulgando o App ............................................................................. 117
Programação para dispositivos móveis | Unidade 1 - O mundo React
5
PALAVRAS DO AUTOR
Ao olharmos as pessoas no metrô, no ônibus e nas ruas, notamos algo em comum: os smartphones. 
Esses aparelhos deixaram de ser um simples meio de comunicação para ser suporte ao cotidiano dos 
usuários. Aplicativos de transporte, delivery, entretenimento, games, entre outros, são usados pelos 
usuários diariamente. Entretanto, você sabia que as redes sociais também contribuíram? Elas, literal-
mente, determinaram a expansão do uso dos aparelhos com adesão de milhares de pessoas.
Diante desse cenário, cresce a necessidade de novos aplicativos e, com isso, a expansão do profissional 
relacionado a projetos de aplicativos móveis, como os desenvolvedores. Também aumenta a necessi-
dade de novas tecnologias e modelos de desenvolvimento para dispositivos móveis, como a Experiência 
do Usuário e a expansão de linguagens de front-end, principalmente relacionada à linguagem de script, 
por exemplo, o JavaScript.
Você está preparado para essas mudanças?
Bem, nesta disciplina você irá adquirir os conhecimentos necessários para compreendê-las, bem como 
desenvolver e contribuir com ideias relacionadas ao desenvolvimento de aplicações móveis, usando a 
linguagem de script React Native. Como profissional de Tecnologia da Informação, é essencial que você 
tenha o conhecimento sobre os principais fundamentos da linguagem: estrutura da linguagem; persistência 
de dados; criação de menus; consumo de web services; e uso de recursos nativos, mapas e muito mais.
Para o profissional de TI, o entendimento do desenvolvimento de aplicações móveis é um ponto funda-
mental hoje, pois há um movimento crescente de convergência dos negócios para a plataforma móvel. O 
que é resultado das necessidades de automatização de processos, do aumento da visibilidade da marca, 
da fidelização de clientes e do aumento de lucro ou de vendas. A disciplina não somente traz conheci-
mento técnico, mas, intrinsecamente, contribui com a compreensão do novo ambiente que estamos 
inseridos, o mundo dos aplicativos.
Ficou curioso, quer aprender mais? Então, faço um convite para participar da disciplina de Desenvolvi-
mento para dispositivos móveis e que os conhecimentos apresentados sejam de grande valor a você.
Seja bem-vindo e bons estudos!
Programação para dispositivos móveis | Unidade 1 - O mundo React
6
Unidade 1 O mundo React
Objetivo de aprendizagem:
Conhecer o universo das linguagens de scripts, identificando seus principais fundamentos, diferenças e 
aplicações de uso de mercado.
Tópicos de estudo:
• A Linguagem JavaScript.
• O que são Node.js e React.js?
• Fundamentos do React Native.
Iniciando os estudos:
Você já se deparou com as diversas nomenclaturas que surgem a cada dia na área de desenvolvimento? 
Para os aplicativos móveis não é diferente. Com o crescimento da internet no início da década de 2000, 
explodiu a quantidade de smartphones e aplicações para esses dispositivos. Assim, conceitos como inte-
ratividade, usabilidade e design tiveram um ápice, e associado a esses conceitos, as linguagens de script 
também (BREITMAN, 2005). Mas o que são as linguagens JavaScript, React.js, Node.js e React Native, para que 
servem e quais as diferenças entre elas? Ao final do estudo desta unidade, você terá aprendido os principais 
conceitos referentes às linguagens aqui apresentadas, o que permitirá diferenciar cada uma delas, assim 
como seus campos de aplicações.
Programação para dispositivos móveis | Unidade 1 - O mundo React
7
1 A LINGUAGEM JAVASCRIPT
Presente nos navegadores, a linguagem JavaScript foi projetada para não precisar ser instalada. Provida 
de diversas funcionalidades e considerada uma linguagem de script, o JS é considerado também uma 
linguagem de front-end, como HTML e CSS. Essas tecnologias de desenvolvimento de front são as prin-
cipais da World Wide Web (WWW) (FLANAGAN, 2013).
Originalmente foi desenvolvida para dar animações a aplicações lado cliente pela empresa Netscape, 
e tem como características ser uma linguagem interpretada, fazer uso de orientação a objetos e ser 
fracamente tipada.
O JS, usado em conjunto com o HTML e o CSS, permite que as telas de usuários sejam mais interativas, 
as quais proporcionam um feedback de navegação ao usuário, determinam validações de dados e têm a 
capacidade de criar animações. No início, a internet era somente páginas estáticas, como um livro físico, 
o usuário somente poderia ler o conteúdo de suas páginas. Por essa razão, a grande maioria das páginas 
tinha em seu desenvolvimento somente a linguagem HTML (HAROLD, 2010). Todavia, com o passar do 
tempo, as páginas ficaram mais complexas e dinâmicas, incluindo conceitos como interatividade, anima-
ções e validações de dados. Essas novas funcionalidades passaram, então, a ser desenvolvidas usando 
a linguagem JavaScript.
Figura 1 - Com o passar do tempo, as páginas ficaram 
mais complexas e dinâmicas, essas novas funcionalidades 
passaram a ser desenvolvidas usando a linguagem JavaScript. 
Programação para dispositivos móveis | Unidade 1 - O mundo React
8
O código da linguagem JS foi escrito inicialmente na linguagem Cmm, mas sua estrutura e sintaxe têm 
semelhança com as linguagens C, C++ e Java. Sendo assim, tornou-se um código aberto e qualquer 
usuário pode colaborar para a evolução da linguagem (MILETTO; BERTAGNOLLI, 2014).
Outro ponto interessante do JS é que ele teve sua estrutura referenciada ao ECMAScript. Você sabia 
que no mundo de TI há diversas associações que padronizam linguagens e modelos como a ECMA? Essa 
organização, fundada na década de 60, tem como finalidade padronizar um sistema de informação. O 
padrão ECMAScript é uma especificação relacionadaà programação de linguagem e script, e o padrão 
ECMA-262 está associado à linguagem JavaScript. Se você ficou interessado em adquirir mais conheci-
mento sobre os padrões de linguagem de script, faça uma leitura do documento do ECMA-262 apresen-
tado no tópico Aprofunde-se.
Aprofunde-se
Você quer aprender mais sobre o padrão de linguagem de script?
Título: ECMA-262
Acesso em: 05/05/2020.
Disponível em: https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
Agora, você verá alguns exemplos de uso da linguagem JS. Primeiro você precisa compreender como 
a linguagem é inserida em uma página web. Exemplos: o uso de um arquivo (‘.js’) externo, contendo 
o código de script, e outro incorporado à estrutura do documento HTML. A extensão ‘.js’ é a extensão 
usada em arquivos criados na linguagem JavaScript.
Nesse primeiro exemplo, um pequeno trecho de um código HTML ilustrando a inserção do arquivo JS 
externo por meio da tag <script>.
<html>
<head>
<script src=”seuarquivo.js”></script>
</head>
</html>
E no arquivo seuarquivo.js fica armazenado o código JS, como no exemplo a seguir:
function alerta(){
alert(“Hello World!”);
}
https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
Programação para dispositivos móveis | Unidade 1 - O mundo React
9
Agora, observe que há uma função do usuário (alerta()) que executa a função da própria linguagem 
(alert()) e exibe o texto ao usuário. É sempre importante lembrar que o JS possui diversas funções que auxi-
liam no desenvolvimento como alert(), onclick() etc. e que permitem uma interatividade com o usuário, 
além de facilitar o desenvolvimento. Veja o vídeo para entender uma aplicação prática do JavaScript.
Assista
Acesse na plataforma o vídeo: Validação de dados com o JavaScript
Sobre a interatividade, a função é acionada quando um evento ocorre sobre um elemento HTML exis-
tente na página web, podendo ser um link, uma imagem, um botão etc.
No exemplo a seguir, vai ser adicionada a função ao elemento botão, ou seja, ao clicar sobre o botão, o 
texto, em forma de pop-up, será mostrado ao usuário.
<button onclick=”alerta()”>Clica aqui!!</button>
O uso destas funcionalidades trouxe maior interatividade. Assim, há uma mudança de paradigma em 
que antes a linguagem JS era somente uma linguagem de script utilizada para aprimorar as páginas web, 
mas com o crescimento exponencial da internet e o aumento das aplicações móveis, as chamadas Apps, 
a linguagem JS se tornou fundamental no desenvolvimento de interfaces dos usuários. O JS teve suas 
referências no ECMAScript, as quais foram aprimoradas com as inserções de novas funcionalidades, o 
conceito de componentização e a utilização em lado servidor.
É nesse cenário descrito anteriormente que surge a web 2.0, que traz, além da interatividade, o compar-
tilhamento das informações e o conceito da Web Semântica. Surgem, então, as novas tecnologias de 
desenvolvimento como Node.js e React.js, que aprimoram principalmente as Single-Page Applications 
(SPA) usadas pelo Google, Facebook e Twitter. As SPA fazem referência a programar mais no lado 
cliente do que no lado servidor. Essa evolução também fortaleceu o conceito de orientação a objeto da 
linguagem de JavaScript.
Programação para dispositivos móveis | Unidade 1 - O mundo React
10
2 O QUE SÃO NODE.JS E REACT.JS?
Agora que você já entendeu que a linguagem JavaScript foi determinante para a interatividade nas 
páginas, principalmente web, você irá entender a sua evolução como linguagem e uso.
Como na vida real, a tecnologia é impulsionada pela necessidade das pessoas. Logo, é possível exem-
plificar pela internet: no início, era usada somente para a leitura, posteriormente, surgiu a possibilidade 
de compartilhar as informações com amigos, parentes etc., bem como interagir com esses comparti-
lhamentos. Agora, há a necessidade de aplicações via celulares ou smartphones. Vale lembrar que a 
acessibilidade aos aparelhos smartphones e à internet por parte do usuário impulsionou o seu uso e, 
segundo o IBGE (2020), hoje mais da metade da população brasileira possui um tipo de smartphone e 
está conectada na internet.
Esse cenário converge para o uso de aplicações móveis, porém o celular é um dispositivo com recursos 
limitados de hardware e, por essa razão, as aplicações tendem a ser mais leves, desenvolvidas com 
novas linguagens, e a usar uma estrutura diferenciada, mas não menos atrativa.
Figura 2 - A Web 2.0 traz, além da interatividade, o compartilhamento 
das informações e o conceito da Web Semântica.
Programação para dispositivos móveis | Unidade 1 - O mundo React
11
Assista
Acesse na plataforma o vídeo: A evolução dos paradigmas
Uma delas é o Node.js. Essa linguagem usa o poder do JavaScript, mas no lado servidor. Faz uso também 
do sistema de motor JavaScript do Google chamado V8. Baseado no ECMAScript (CANTELON et al., 2014), 
o Node.js permite ao desenvolvedor diversas funcionalidades, como:
• Desenvolvimento de um aplicativo em uma única linguagem;
• Redução de contexto entre cliente e servidor;
• Reuso de código para formulários e jogos;
• Uso do formato JSON, nativo do JavaScript.
Assim, você tem uma estrutura de programação de linguagem de script independente das atualizações 
dos navegadores por novas funcionalidades de JavaScript, porque já está contido no Node.js. Por essa 
razão, o Node.js é muito mais atrativo do que parece, pois sua plataforma permite conexões assíncronas 
e orientadas a eventos, mas no lado servidor.
Um grande diferencial do Node.js com relação ao JavaScript é o uso de bibliotecas, principalmente do 
padrão I/O, comuns em linguagens de lado servidor. A principal função de um servidor é responder a 
requisições feitas pelos dispositivos clientes. O servidor é padrão Input/Output, pois recebe informa-
ções de entrada, processa-as e responde ao cliente com as informações solicitadas.
Nesse sentido, existem dois tipos de padrão de I/O, o síncrono, cujas informações são executadas 
sequencialmente, ou seja, uma operação só pode ser realizada após a conclusão da operação anterior 
Figura 3 - Logo da linguagem Node.js.
Fonte: disponível em: https://nodejs.org/en/about/
resources/ Acesso em: 26 maio 2020.
https://nodejs.org/en/about/resources/
https://nodejs.org/en/about/resources/
Programação para dispositivos móveis | Unidade 1 - O mundo React
12
(as linguagens como Java e PHP operam nesse modo), conhecido também como I/O síncrono bloqueante. 
Já o Node.js opera de modo I/O assíncrono não bloqueante, ou seja, possibilita que operações indepen-
dentes possam ser executadas no servidor. Na prática, esse conceito se resume em passar uma função 
como parâmetro para outra função.
A linguagem mantém uma consistência entre cliente e servidor preservando algumas funções de hosts 
como Time API e Console API. Entretanto, a plataforma Node.js é constituída de um conjunto de módulos 
para muitos tipos de I/O de rede e arquivo, incluindo módulos para HTTP, Datagram (UDP) e NET (TCP) 
(CANTELON et al., 2014).
Reflita
O que você conhece sobre framework? Frameworks são muitos comuns em 
desenvolvimento web, como Django e Rails. Mas você não pode confundir um framework 
com uma plataforma. O Node.js é uma plataforma de aplicativos em JavaScript. Você sabe 
descrever a diferença básica entre um framework e uma plataforma?
Como uma ilustração de escrita, que apresenta o código ‘Hello World’ escrito em Node.js, sendo a 
resposta a uma requisição HTTP de um servidor:
var http = require(‘http’);
http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello World\n’);
}).listen(3000);
console.log(‘Server running at http://localhost:3000/’);
Você pode observar no código que ele faz uso do protocolo HTTP da camada de aplicação e possui 
funções específicas de uso lado servidor como listen(), que escuta uma determinada porta.
Em se tratando de biblioteca, o Facebook em 2013 desenvolveu o React ou React.js, uma bibliotecausada 
para criar interfaces do usuário utilizando padrões da linguagem HTML em seu JavaScript. O interessante 
do React é que novas bibliotecas são constantemente desenvolvidas e liberadas para uso, o que favorece 
o desenvolvimento de páginas com o React (BODUCH, 2018). Embora embasado pela ECMAScript, surgiu 
em uma época que os padrões demoravam a ser inovados, porém, a partir de 2015, os padrões passaram 
a ser evoluídos a cada ano, como ECMA2016 e ECMA 2017, permitindo uma evolução do uso do React.
Embora o JavaScript não seja estritamente uma linguagem funcional, possui técnicas funcionais que 
podem ser usadas. O React faz uso de uma programação funcional e também do conceito de orientação 
a objetos. Esse novo paradigma leva a melhorias na área de testabilidade e desempenho, todavia pode 
gerar certo desconforto quanto à aprendizagem das duas estruturas ao mesmo tempo.
Programação para dispositivos móveis | Unidade 1 - O mundo React
13
O uso das bibliotecas do React é aplicado sob uma estrutura no Node.js, por isso se deve ter o Node.js 
instalado no ambiente de desenvolvimento. Como uma plataforma de bibliotecas, você pode usar geren-
ciadores de pacotes como npm ou yarn. Esses gerenciadores facilitam a sua vida no desenvolvimento 
de aplicativos na instalação e na remoção de biblioteca para uso no desenvolvimento.
E com relação às aplicações móveis? Você conhece alguma linguagem baseada na estrutura de JS? O 
próximo tópico apresentará os conceitos da linguagem React Native.
3 FUNDAMENTOS DO REACT NATIVE
Neste ponto, você já entendeu que o JavaScript é muito usado em aplicações lado cliente para inte-
rações, validações de dados e animações em plataforma web. Conheceu o Node.js, aplicado do lado 
servidor, uma plataforma de bibliotecas JavaScript, e também o conceito sobre React.js, usado sob a 
arquitetura Node e para criar páginas web mais dinâmicas inseridas na linguagem JavaScript. Agora, você 
vai compreender mais uma ferramenta com base Node.js, usando a estrutura da linguagem JavaScript, 
porém para o desenvolvimento de aplicações móveis, o React Native.
Primeiro, você precisa entender que o React Native não é o mesmo que aplicações em HTML5, pois o React 
usa uma estrutura nativa para desenvolvimento de Apps. O React Native utiliza a linguagem JavaScript 
para desenvolver aplicações tanto para Android quanto para iOS no formato nativo, ou seja, como se você 
estivesse desenvolvendo no Android Studio, com Java para Android, e no Swift, com XCode no desenvol-
vimento para Apple.
Figura 4 - Logo da ferramenta React Native.
Programação para dispositivos móveis | Unidade 1 - O mundo React
14
Muitos aplicativos são executados envoltos a um navegador, porém o React Native não, ele é uma apli-
cação nativa que utiliza recursos do smartphone de forma nativa tanto em aparelhos para sistema iOS 
quanto para Android. A fim de você compreender com um maior número de detalhes a diferença entre 
os modelos híbridos e nativos, assista ao vídeo abaixo.
Assista
Acesse na plataforma o vídeo: Modelos híbridos e nativos
Alguns benefícios são favorecidos no uso do React Native para desenvolvimento de Apps, veja alguns:
• Uso de conceitos de HTML e CSS, como flexbox, entre outros, para criação dos layouts, tornan-
do-os de mais fácil desenvolvimento;
• Rico em biblioteca padrão ES6 e 7 com base no JavaScript;
• O React usa uma abordagem declarativa e um fluxo de dados unidirecional de escala simples;
• Facilidade de desenvolvimento em uma única linguagem, mas com a vantagem de executar o 
mesmo código para dois ambientes distintos, como iOS e Android.
Como já mostrado anteriormente, o React precisa ser usado sob um ambiente de infraestrutura com 
Node, por esse motivo, para começar os exemplos de Apps usando a tecnologia React Native, é neces-
sário que você instale a infraestrutura em seu computador. Para tal processo, acompanhe o infográfico 
que explica passo a passo a instalação dessa infraestrutura.
Programação para dispositivos móveis | Unidade 1 - O mundo React
15
Após a instalação, você estará apto a praticar os conteúdos que serão estudados nas próximas unidades 
e a desenvolver suas próprias aplicações móveis. Mas antes é preciso entender mais alguns detalhes 
sobre a tecnologia React Native.
O React Native faz uso da linguagem JavaScript, como já dito, porém com a sintaxe JSX. Ele usa o HTML, 
mas a sintaxe JSX é muito parecida. A sintaxe JSX é uma extensão da linguagem JavaScript e é respon-
sável pela criação dos elementos usados na tecnologia React Native para desenvolvimento de interfaces 
do usuário. Basicamente, a sintaxe usa a lógica de componentização, incluindo o mecanismo como folha 
de estilos e a lógica na criação de um componente. A compilação da linguagem não é feita diretamente 
no navegador, mas sim em um transpilador. Ele tem a função de transformar o código similar ao HTML 
ED+ Content Hub © 2020
Infográfico 1 - Infraestrutura.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 1 - O mundo React
16
em um código React Native. Você pode compreender que é muito mais simples usar uma sintaxe HTML 
do que usar componentes criados na linguagem React Native (BODUCH, 2018).
Conforme o exemplo a seguir, o código ilustra um pequeno script no formato JSX:
const menu = (
 <nav>
 <ul>
 <li><a href=”#”>HOME</a></li>
 <li><a href=”#”>Quem Somos</a></li>
 <li><a href=”#”>Contato</a></li>
 </ul>
 </nav>
)
Você pode analisar o código e encontrar as semelhanças com relação ao HTML, todavia, são somente 
semelhanças, porque o código é interpretado pelo transpilador que transformará em sintaxe React 
Native, como no exemplo:
var menu = React.createElement(
 “nav”,
 { className: “links” },
 React.createElement(
 “ul”,
 null,
 React.createElement(
 “li”,
 null,
 React.createElement(
 “a”,
 { href: “#” },
 “Home”
 )
 ),
 React.createElement(
 “li”,
 null,
Programação para dispositivos móveis | Unidade 1 - O mundo React
17
 React.createElement(
 “a”,
 { href: “#” },
 “Quem somos”
 )
 ),
React.createElement(
 “li”,
 null,
 React.createElement(
 “a”,
 { href: “#” },
 “Contato”
 )
 )
 )
);
Assim, você verifica a facilidade da linguagem, pois não será necessário criar elementos React Native 
todas as vezes, mas sim usar a sintaxe JSX. Somado a essa facilidade na linguagem, o React Native faz 
uso do conceito de componentização. Mas o que é isso?
A ideia por trás do conceito é quebrar uma interface do usuário, por exemplo, em pequenos objetos e 
componentes independentes. Com isso, há a facilidade de manutenção, o reuso de componentes e o 
teste. Lembre-se de que é um conceito, não regras definidas para uso. Um componente pode ser um 
botão, uma formatação ou uma área dentro de sua aplicação.
Programação para dispositivos móveis | Unidade 1 - O mundo React
18
CONSIDERAÇÕES FINAIS
Nesta unidade, você foi introduzido a um novo cenário de programação para aplicativos móveis, o mundo 
JavaScript, ou melhor, React. Foi apresentado às linguagens JS, Node.js, React.js e React Native. Também 
ficou familiarizado com as diferenças entre as tecnologias, seus usos e os detalhes de aplicação. Por 
fim, pôde entender que a tecnologia React Native usa recursos nativos tanto iOS quanto para Android, e 
possui sua sintaxe baseada em conceitos JSX, similar ao HTML que facilita o desenvolvimento.
Essa unidade foi o início, mas o aprimoramento de seus estudos continuará nas próximas. Está prepa-
rado? Vamos lá!
Programação para dispositivos móveis | Unidade 1 - O mundo React
19
GLOSSÁRIO
Android: sistema operacional baseado em Linux, tendo como seu principal desenvolvedor o Google.
Android Studio: ambiente de desenvolvimento para aplicativos Android.
Apps: termo usado para referenciar as Aplicações Móveis.
CSS (Cascading StyleSheet): Folha de Estilo. Usada para estilizar páginas HTML.
ECMAScript (European Computer Manufacturers Association): Associação Internacional de Padrões de Script.
ES6: ECMAScript 6.
Front-end: termo usado para as linguagens que rodam somente na interface do usuário.
HTML: linguagem usada para construir páginas web.
HTTP (Hypertext Transfer Protocol): Protocolo de Requisição de Páginas Web.
iOS: sistema operacional da fabricante Apple.
Java: linguagem de programação utilizada no desenvolvimento nativo de aplicativos Android.
JS: JavaScript.
JSON (JavaScript Object Notation): Notação de Objetos JavaScript. É uma estrutura de dados usada na 
transferência entre sistemas.
JSX (JavaScript Syntax Extension): Extensão de Sintaxe do JavaScript.
NPM (Node Package Manager): um aplicativo gerenciador de pacotes.
Swift: linguagem de desenvolvimento de aplicativos para iOS.
Tag: rótulo usado em linguagens como HTML e XML.
UX: termo usado para a Experiência do Usuário.
XCode: ambiente de desenvolvimento de aplicativos para iOS.
YARN: gerenciador de pacotes criado pelo Facebook.
Programação para dispositivos móveis | Unidade 1 - O mundo React
20
REFERÊNCIAS
BODUCH, Adam. React and React Native. 2. ed. Packt, 2018. ISBN 978-1-78934-679-4.
BREITMAN, K. Web Semântica: A Internet do Futuro. Rio de Janeiro: LTC, 2005. ISBN 85-216-1466-7.
CANTELON, Mike et al. Node.js in Action. New York: Manning, 2014. ISBN 9781617290572.
FLANAGAN, David. JavaScript: O Guia Definitivo. 6. ed. Porto Alegre, Bookman, 2013. ISBN 978-0-596-80552-4.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. Porto Alegre: 
Bookman, 2010. ISBN 978-85-7780-670-6.
IBGE. Uso de internet, televisão e celular no Brasil. Disponível em: https://educa.ibge.gov.br/jovens/
materias-especiais/20787-uso-de-internet-televisao-e-celular-no-brasil.html Acesso em: 20 maio 2020.
MARDAN, Azat. React Native Quickly: start learning native iOS development. Node University, 2016. 
ASIN B01MR4Q00X.
MILETTO, Evandro Manara; BERTAGNOLLI, Silvia de Castro. Desenvolvimento de Software II: Introdução 
ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Bookman, 2014. ISBN 978-85-8260-196-9.
https://educa.ibge.gov.br/jovens/materias-especiais/20787-uso-de-internet-televisao-e-celular-no-brasil.html
https://educa.ibge.gov.br/jovens/materias-especiais/20787-uso-de-internet-televisao-e-celular-no-brasil.html
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
21
Unidade 2 Meu primeiro APP
Objetivos de aprendizagem:
Contribuir para o desenvolvimento de uma aplicação mobile por meio de construção de layouts, uso de 
widgets e textos.
Tópicos de estudo:
• A estrutura do React Native;
• Trabalhando layouts;
• Componentes da UI.
Iniciando os estudos:
Como você não só já foi introduzido aos fundamentos da linguagem React Native, mas também compreendeu 
a diferença entre as tecnologias React Native, React.js e Node.js, chegou o momento de você começar a 
colocar a ‘mão na massa’. Assim, você precisa dar os primeiros passos na programação React Native. Para 
isso, nesta unidade você compreenderá os conceitos da estrutura de um projeto React Native, de que forma 
a tecnologia cria os layouts, bem como aprenderá de que modo os objetos de telas (widgets) são criados 
e aplicados no desenvolvimento de uma Interface do Usuário (em inglês, UI - User Interface). Assim, nessa 
unidade você irá descobrir os comandos necessários para criar as primeiras aplicações móveis.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
22
ED+ Content Hub © 2020
1 A ESTRUTURA DO REACT NATIVE
Chegou a hora! A figura 1 ilustra uma tela introdutória da tecnologia React Native. Entretanto, com a 
estrutura do React Native pronta para a criação de Apps, chega o momento de você criar a sua primeira 
aplicação móvel. Mas, para esse desenvolvimento, você precisa iniciar um projeto junto à estrutura 
Node.js. Para esse procedimento, tem-se uma estrutura de diretórios montada para esse exemplo que 
é determinada por: c:\node-js\projeto (sistema operacional do Windows).
Reflita
Os sistemas operacionais são os sistemas base de qualquer dispositivo eletrônico. O mais 
conhecido, talvez o mais popular, entre os usuários é o Windows. Porém, existe o sistema 
Linux, no entanto será que o processo de instalação do React Native é o mesmo no Linux?
Lembre-se de que essa estrutura é somente para fins didáticos, podendo você criar a sua própria 
estrutura de pastas. Para dar início ao primeiro projeto, na pasta ProjetoExemplo digite expo init 
(CANTELON, 2014). Esse comando cria a aplicação baixando todas as bibliotecas padrões necessárias 
para a criação da App.
Figura 1 - Imagem ilustrativa da tecnologia React Native.
Fonte: adaptado de https://bit.ly/2Yulfj8 Acesso em 03 Jun. 2020.
https://bit.ly/2Yulfj8
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
23
Após o comando, um menu aparecerá na tela para a escolha do tipo de template. Você poderá iniciar 
a sua aplicação e escolher a opção blank. Essa opção iniciará uma aplicação com os mínimos recursos, 
entretanto necessários para o desenvolvimento da nossa primeira App ilustrada na figura 2.
Seguido da escolha da opção de template, você será questionado sobre o nome da aplicação What 
would you like to name your app? (my-app), mas no nosso exemplo, myLogin. Logo, o sistema 
carregará todas as bibliotecas necessárias para a criação da App e, posteriormente, uma pasta será 
criada em subnível de projeto com o nome da aplicação myLogin. Esse processo pode demorar alguns 
minutos, pois dependerá da sua estrutura de internet (velocidade) para baixar as bibliotecas. Tudo 
pronto e o projeto criado, está na hora de iniciar a sua primeira App. Entre na pasta criada do projeto 
(myLogin). Dentro da pasta, você pode abrir o projeto utilizando o editor que desejar, no nosso exemplo 
o editor é o visual code. Já dentro da pasta do projeto, digite code. (code espaço e ponto). O projeto será 
aberto dentro do editor visual code como mostrado na figura 3.
Figura 2 - Opções de template oferecidas pelo comando 
expo init na criação do projeto em React Native.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
24
Observe pela figura 3 que a sintaxe do React Native é bem similar aos códigos HTML e à estilização 
realizada por CSS (HAROLD, 2010), portanto, como resultado de uma melhor compreensão de alguns 
comandos que serão mostrados nos próximos tópicos, assista ao vídeo que retrata os conceitos tanto 
de HTML quanto de CSS.
Assista
Acesse na plataforma o vídeo: Recapitulando HTML e CSS
Agora que possui a sua primeira aplicação criada, você precisa fazer uma pequena alteração e depois 
iniciar a aplicação, seja em um emulador ou no seu próprio dispositivo eletrônico. Mas, antes de iniciar 
a sua aplicação, é necessário um esclarecimento das informações principais contidas na estrutura do 
projeto. São elas:
a) Pasta node_modules: essa pasta, como sugerido pelo próprio nome, contém as bibliotecas 
padrões do sistema (BODUCH, 2018);
• assets: pasta que, teoricamente, armazena as imagens utilizadas na aplicação, entretanto, 
você pode optar por armazenar em outra pasta;
Figura 3 - Editor visual code aberto com o projeto myLogin, 
mostrando como seria a visualização do script do arquivo App.js.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
25
• Expo: essa pasta armazena arquivos que contêm informações sobre a ferramenta expo.
b) Arquivos
• App.js: esse arquivo é o principal do seu projeto, equivalente a um arquivo index de uma 
aplicação na plataforma web;
• App.json: esse arquivo armazena informações de sua aplicação em formato JSON.
Bem, conhecidos os principais arquivos da estrutura de um projeto React Native, agora é o momento de 
executar a nossa primeira aplicação, mas antes você precisa alterar mais um detalhe, o texto que seráexibido. Na linha 7, da figura 3, altere o texto padrão para um texto que você deseja, no nosso exemplo foi 
digitado Minha primeira App. No tópico Aprofunde-se, você poderá encontrar um excelente livro para apri-
morar os conhecimentos iniciais do React Native.
Aprofunde-se
Conheça mais sobre os conceitos do 
React Native, aumentando suas habili-
dades de desenvolvimento de Apps para 
Android e iOS.
Título do livro: Mastering React Native
Autores: Eric Masiello e Jacob Friedmann.
Local: Birmingham - UK.
Editora: Packt Publishing Ltda.
Data de publicação: 11/01/2017.
ISBN: 978-1-78588-578-5.
ASIN: B01LPRN15M
Feita a alteração, inicialize a aplicação com o comando expo start. Não se esqueça de estar dentro 
da pasta myLogin nem de baixar o expo cli da loja virtual para executar a aplicação diretamente no 
seu smartphone. Já com o aplicativo expo cli no seu smartphone, abra-o, aponte para o QR Code e a 
aplicação automaticamente será visualizada diretamente na sua tela. A figura 4 mostra os QR Codes 
criados pela aplicação.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
26
Pronto. Agora você já tem a sua primeira aplicação sendo executada no seu celular. No nosso exemplo, 
você entenderá como construir uma tela de login e, portanto, nos próximos tópicos os conceitos sobre 
layouts e os objetos de telas serão apresentados para que nossa App fique mais atraente.
2 TRABALHANDO LAYOUTS
Criada a primeira App, nossa aplicação precisa evoluir. Assim, precisa de um layout mais adequado. 
Layouts devem ser planejados antes de seu desenvolvimento, a figura 5 exemplifica um rascunho de 
layout. Layouts são construídos levando em consideração as dimensões dos dispositivos eletrônicos e 
basicamente criando interfaces de objetos que formarão a tela do usuário incluindo botões, caixa de 
texto, links, imagens, mapas etc.
Figura 4 - QR Code mostrado após a inicialização da App 
React Native para executá-la na tela do seu smartphone.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
27
No React Native, criar layout para UI está associado diretamente ao conceito de flexbox. O conceito de 
flexbox foi uma evolução de criação de layouts utilizando CSS, pois você precisa recordar que a CSS foi 
adicionada ao HTML com a finalidade de deixar as páginas web mais bem apresentadas, com design de 
telas mais interessantes. Por meio da folha de estilo, é possível controlar as propriedades dos elementos 
de tela alterando, por exemplo, cores, tamanho de fonte, tipo de fonte, tamanho de imagem, cor de 
background, tamanho de áreas, posicionamento dos elementos etc.
Reflita
Neste século em que vivemos, as aplicações convergem para dispositivos móveis. No 
Brasil, por exemplo, há uma proporção de três dispositivos para cada usuário.
Cada dispositivo, mesmo sendo um smartphone, tem tamanhos diferentes de tela. Quais 
serão as principais dificuldades para criar uma UI para todos os tamanhos e sem perder 
a definição?
Portanto, uma página web é determinada por blocos ou agrupamento de elementos, pois, assim, há 
facilidade de criação e também de manutenção. Esses blocos são dimensionados utilizando CSS. Todos 
esses blocos, e também os elementos de tela, fazem uso de modos disponíveis permitidos pela CSS como, 
por exemplo, layout de bloco, layout de tabela e layout embutido. Entretanto, todos esses modos não 
oferecem recursos suficientes para criar um layout mais moderno e complexo. É importante ressaltar 
que a priorização de aplicações de CSS são equivalentes a uma aplicação em um documento HTML, ou 
seja, a prioridade maior sempre será da CSS mais próxima do elemento (MILETTO; BERTAGNOLLI, 2014).
Figura 5 - Layouts de UI.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
28
Com a evolução das regras CSS, foi incluído, além dos modos comuns de criação de layout, um modo mais 
flexível, o chamado flexbox (HAROLD, 2010). Agora, com o uso do flexbox, você pode ter o controle total 
dos blocos de informação que compõem o layout, incluindo direção, alinhamento, ordem e tamanho. 
Utilizar o flexbox na construção de layout no React Native é similar ao uso para criação em plataforma 
web. Mas possui raras exceções, como o parâmetro flex-direction, relacionado a colunas, e o parâmetro 
flex, suportando um número único. Então, em comparação com os posicionamentos em bloco e em 
linha, o flexbox não tem posicionamento fixo horizontal e vertical, pois o posicionamento em bloco 
é alinhado verticalmente, enquanto em linha é orientado na forma horizontal, e o flexbox opera em 
ambos os sentidos (MARDAN, 2016).
Contudo, há também outras formas de posicionamento dos elementos na composição de um layout de 
tela, como a composição utilizando grid, chamado de grid layout. Ficou interessado? Então se aprofunde 
mais sobre o assunto no tópico aprofunde-se.
Aprofunde-se
Título: Grid layouts
Acesso em: 15/05/2020.
Disponível em: https://bit.ly/31eauDc
O flexbox possui algumas propriedades interessantes que podem ser divididas de acordo com sua 
funcionalidade, como:
• Relativas aos eixos: o flexbox possui basicamente dois eixos, o principal (main), que deter-
mina que os elementos seguem uns aos outros, e o cruzado, perpendicular ao principal. As 
propriedades relativas aos eixos são: flex-direction (eixo principal), que controla a direção dos 
elementos; align-items (eixo cruzado), que determina como os itens ficarão posicionados ao 
longo do eixo cruzado; justify-content, que controla como os elementos (itens) serão posicio-
nados em uma determinada linha do eixo principal; e align-self, que possui as mesmas carac-
terísticas do align-items, porém somente para uma determinada caixa em específico ao invés 
de todas as caixas da linha ou coluna.
• Relativas à direção: a direção dos elementos dentro de um container está associada à proprie-
dade align-content que permitirá o controle sobre o elemento com relação à direção no eixo 
cruzado, com a esquerda para a direita, a direita para a esquerda, todo o bloco centralizado e 
espaços entre os elementos.
• Associado a linhas: a propriedade flex-wrap controla o fluxo dentro do container dos itens.
• Dimensões dos elementos: os elementos de telas são dimensionados por meio de duas 
propriedades: largura (width) e altura (height), além de propriedades shorthands como as 
flex-basis, flex-grow e flex-shrink para estabelecer a flexibilidade dos itens.
https://bit.ly/31eauDc
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
29
Caso você não determine qualquer tipo de posicionamento por padrão, os elementos serão posicionados 
relativamente, ou seja, isso significa dizer que o fluxo normal do layout determinará o posicionamento 
dos elementos. Se um outro elemento for posicionado, isso significa que a distância superior, inferior, 
direita e esquerda sofrem ação de posicionamentos conforme o fluxo, portanto, se dois elementos são 
colocados em um layout com alinhamento vertical, um ficará posicionado acima do outro. Porém, há um 
posicionamento que independe do fluxo normal do layout chamado de absoluto. No posicionamento 
absoluto, o elemento é posicionado com base na distância em relação à margem esquerda (left) e supe-
rior (top) da interface do usuário, considerando como a origem dos eixos o ponto (0,0) localizado no 
canto superior esquerdo da tela.
Uma das formas de aplicar e fixar o conhecimento é jogando. No tópico Aprofunde-se, há um jogo inte-
ressante sobre os elementos do flexbox que você pode praticar para fixar as propriedades utilizadas. 
Vale conferir!
Aprofunde-se
Vamos exercitar com flexbox?
Título: Flexbox game
Acesso em: 15/05/2020.
Disponível em: https://flexboxfroggy.com/
Então, de posse do entendimento das propriedades do flexbox, você precisa aplicar as propriedades para 
início da construção do nosso login. Para tal procedimento, assista ao vídeo que corrobora seus estudos.
Assista
Acesse na plataforma o vídeo: Criando wireframesde layouts
Neste ponto, você já foi apresentado aos conceitos de como criar a estrutura de áreas de seu layout, bem 
como de que forma inserir os efeitos necessários como cor, tamanho, posicionamento, entre outros 
que estilizam um elemento de tela. Então, a próxima etapa da nossa tela é apresentar como inserir os 
componentes de tela como botões, caixas de texto, imagens etc. Esse assunto será o tema central do 
próximo tópico.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
30
3 COMPONENTES DO UI
Uma tela de interface com o usuário é preenchida com diversos elementos como caixas de texto, botões, 
imagens, labels, links etc., a exemplo da figura 6, que mostra uma tela de login com elementos de 
textos, caixas de texto, botões e link. A interatividade de uma tela é realizada por meio desses elementos 
incluindo inserção de dados, banners, troca de páginas, menus etc. Na programação React, esses 
elementos são chamados de componentes.
Como você já sabe, a programação React se diferencia da linguagem JavaScript pela capacidade de possuir 
diversas bibliotecas. Essas bibliotecas facilitam e permitem otimizar o desenvolvimento. As bibliotecas 
são importadas para dentro de um projeto React Native por meio do comando import. A tabela 1 ilustra 
a importação da biblioteca base e exemplos de importação dos componentes core que podem compor 
uma UI (MARDAN, 2016).
Figura 6 - Elementos de tela.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
31
Comando de importação de bibliotecas Descrição
import React from ‘react’;
Importação da biblioteca padrão utilizada no 
projeto React Native. Essa biblioteca é padrão, 
ou seja, deve existir em todos os programas.
import {StyleSheet, View } from ‘react-native’;
Importação da biblioteca de componentes ele-
mentares da programação React Native. Nesse 
exemplo, temos a classe de CSS e o componen-
te View. 
import { Text } from ‘react-native’;
Importação do elemento Text para criar áreas 
de inserção de textos.
import { Image, ScrollView } from ‘react-native’; Importação do elemento Image e ScrollView. 
import { TextInput} from ‘react-native’;
Importação do elemento de entrada de dados 
TextInput. 
Outro aspecto importante que esses componentes possuem são equivalentes à programação Android. 
Por exemplo, o componente TextInput equivale ao elemento EditText em XML para edição de caixa 
de texto utilizando o Android Studio, já na programação para iOS, esse componente é equivalente a 
UITextField e, por fim, na programação HTML, o elemento TextInput equivale a <input type=’text’ > 
(FLANAGAN, 2013). Note que você não precisa entender como a programação é realizada para o An-
droid, o iOS ou para a plataforma web, mas sim precisa compreender a programação React Native.
Aprofunde-se
Comparando performance do React Native com a linguagem de programação Java.
Título: React vs. Java
Acesso em: 15/05/2020.
Disponível em: https://stackshare.io/stackups/java-vs-react-native
O fato de a linguagem trabalhar com componentes facilita o desenvolvimento, ao mesmo tempo que 
o segmenta, pois os elementos podem ser reusados sempre que for necessário. Logo, o React Native 
trabalha com o conceito de componentização, ou seja, você pode criar diversos componentes e utilizá-lo 
na criação da tela de usuário.
A sintaxe de um componente é equivalente à construção de uma página em HTML, ou seja, a página é 
construída por meio de tags (HAROLD, 2010). Tags são rótulos que determinam a inserção e o fecha-
mento do componente em uma página.
Tabela 1 - Comandos de importação de componentes 
básicos utilizados na composição de telas.
Fonte: elaborado pelo autor.
https://stackshare.io/stackups/java-vs-react-native
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
32
Uma tag pode ser simples ou composta. Cada tag possui suas propriedades, e cada propriedade, seus valores.
A tabela 2 ilustra exemplos de componentes na linguagem React com a aplicação por meio de tags 
simples, compostas e objetos.
Exemplo da tag Descrição Tipo
<Text> Ola </Text>
Essa tag é utilizada toda vez que você desejar inserir textos 
(strings) na tela.
Composta.
<Image source={} />
Essa tag é utilizada toda vez que você desejar inserir uma 
imagem na tela.
Simples.
<View> </View>
Essa tag equivale a tag <div> no HTML e <section><arti-
cle><aside> no HTML5. Utilizada para criar áreas ou definir 
agrupamentos de elementos. 
Composta.
<Button> </Button> Cria botões de ação na tela. Composta.
<ScrollView> </ScrollView>
Cria barra de rolagem vertical para informações que extrapo-
lam a área de visualização.
Composta.
 StyleSheet
Cria padrões de CSS que podem ser aplicados a um compo-
nente. Faz uso do método create().
Classe.
Os elementos na programação React são criados por algumas formas: função, constante (arrows func-
tion) ou por classe. As semelhanças são parecidas com a ECMAScript 6, porém utiliza uma estrutura de 
orientação a objetos por meio de criação de uma classe e herda informações da classe ‘Component’.
Dentro da classe, é necessária a utilização da função render(), que tem o objetivo de renderizar qual-
quer elemento na tela do usuário, ou seja, retorna o objeto ou a tela inteira. O exemplo de script a seguir 
ilustra a criação de um componente por meio do recurso de classe (BODUCH, 2018).
1. import React, {Component} from ‘react’;
2. import {View, Text} from ‘react-native’;
3. export default class MyApp extends Component{
4. render(){
5. return ( 
6. <View>
7. <Text> Meu primeiro objeto </Text>
8. </View>
9. );
10. }}
Tabela 2 - Exemplos de elementos essenciais utilizados 
na criação de interface do usuário.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
33
Você pode observar a importação da biblioteca nas linhas 1 e 2, a criação da classe MyApp fazendo 
herança da classe Component na linha 3, o método render() na linha 4 e o retorno compreendendo 
a informação na linha 5. Note que toda a informação da página está compreendida entre as linhas 
6 e 8. Um detalhe importante que a expressão ‘export default’ determina para qualquer projeto é 
que esse elemento será o inicial do projeto, similar a um arquivo index. Um detalhe pequeno, porém, 
muito importante, é prestar atenção nos elementos de abertura e fechamento como ‘{}’, ‘()’ e ‘;’. Esses 
elementos mal colocados podem provocar erros no desenvolvimento. A figura 7 ilustra um erro gerado 
pela inserção do ‘;’ ao final da linha 7, no código anterior.
O uso de classe possibilita a criação de elementos personalizados como na linguagem XML, no entanto de 
forma mais prática e dinâmica. Você deseja criar seus próprios elementos personalizando sua aplicação? 
Então assista ao vídeo a seguir para compreender como criar um elemento no programa React Native.
Assista
Acesse na plataforma o vídeo: Componente personalizado
Figura 7 - Erro gerado pela inserção do ‘;’ no final da linha 7.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
34
Agora, você irá entender como funciona a criação de um componente utilizando a forma de função. 
Observe o script como exemplo de criação de um objeto via function.
1. import React, {Component} from ‘react’;
2. import {View, Text} from ‘react-native’;
3. export default function MyApp(){
4. return (
5. <View>
6. <Text> MyApp com função </Text>
7. </View>
8. );
9. }
Você pode observar pelo código anterior que há uma mudança pequena, mas essencial. A função é iniciada 
na linha 3 e possui somente o método return(), não sendo necessário fazer uso do método render().
Assim, acompanhe o infográfico a seguir para criar uma interface de login, contudo não se limite somente 
ao infográfico, pois é somente um exemplo ilustrativo de como montar sua interface. Vá além, crie outros 
objetos, personalize o seu código e desenhe sua própria interface de login.
Programação para dispositivos móveis | Unidade 2 - Meuprimeiro APP
35
Infográfico 1 - Tela de login.
Fonte: elaborado pelo autor.
ED
+ 
Co
nt
en
t H
ub
 ©
 2
02
0
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
36
CONSIDERAÇÕES FINAIS
Nesta unidade, você pôde conhecer como criar uma aplicação usando a tecnologia React Native, 
aprendeu como é distribuído o projeto Native internamente e seus principais arquivos. Como parte dos 
objetivos dessa disciplina, você também aprendeu os passos e os elementos para a criação de um layout 
com foco na construção de interfaces do usuário e regras CSS de estilização dos componentes. Por fim, 
além de conhecer a criação dos componentes de uma interface, aplicou o aprendizado a uma tela de 
login, incluindo elementos como imagens, botões e caixas de texto, bem como elementos de compo-
sição de áreas (Views).
Siga aprofundando os seus estudos sobre a programação para dispositivos móveis, visando entender os 
demais componentes que podem compor uma App.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
37
GLOSSÁRIO
Apps: nome dado popularmente a aplicações móveis.
Core: elementares, principais.
JSON: notação JavaScript; objeto usado para enviar dados entre objetos.
Labels: rótulos.
Layout: estrutura que mostra como os objetos estão distribuídos e posicionados em uma página ou 
interface.
QR Code: código de barras em 2D apresentado em forma digital ou impressa usado para passar infor-
mações ao usuário.
Renderizar: verbo usado na área de informática na execução de um programa ou transformação de 
alguma coisa.
Shorthand: comandos curtos ou que armazenam várias informações.
Strings: tipo de dado de composição alfa numérico.
Tags: marcadores.
Template: são modelos pré-formatados usados na programação.
Wireframe: esboço de um layout.
XML: linguagem de marcação de texto usada para transferir dados entre sistemas diferentes.
Programação para dispositivos móveis | Unidade 2 - Meu primeiro APP
38
REFERÊNCIAS
BODUCH, Adam. React and React Native. 2. ed. Packt, 2018. ISBN 978-1-78934-679-4.
CANTELON, Mike et al. Node.js in Action. New York: Manning, 2014. ISBN 9781617290572.
FLANAGAN, David. JavaScript: O Guia Definitivo. 6. ed. Porto Alegre, Bookman, 2013. ISBN 978-0-596-80552-4.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. Porto Alegre: 
Bookman, 2010. ISBN 978-85-7780-670-6.
MARDAN, Azat. React Native Quickly: start learning native iOS development. Node University, 2016. 
ASIN B01MR4Q00X.
MILETTO, Evandro Manara; BERTAGNOLLI, Silvia de Castro. Desenvolvimento de Software II: Introdução 
ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Bookman, 2014. ISBN 978-85-8260-196-9.
Programação para dispositivos móveis | Unidade 3 - Navegação
39
Unidade 3 Navegação
Objetivo de aprendizagem:
Entender como a aplicação desenvolvida por React Native faz a navegação entre telas.
Tópicos de estudo:
• Navegação básica;
• Barra de navegação;
• Navegação por tabulação.
Iniciando os estudos:
Navegabilidade é um termo usado na internet e expressa o estado ‘navegável’ das páginas, ou seja, quando 
o usuário deseja ir de uma página A para uma página B. A navegabilidade de uma App tem o mesmo propó-
sito. Como o usuário irá ‘navegar’ entre as telas de sua aplicação, como será a transição de páginas de um 
determinado aplicativo etc. O tema navegabilidade é um dos tópicos abaixo do macrotema usabilidade. A 
usabilidade, em termos gerais, é a capacidade de tornar o uso de um dispositivo simples, fácil de memorizar 
e compreensível. Dessa forma, em uma aplicação você pode usar diversos elementos para criar uma boa 
navegabilidade, incluindo botões, textos, imagens etc. Sendo assim, nesta unidade você irá obter os conhe-
cimentos necessários para criar a navegabilidade de sua aplicação.
Programação para dispositivos móveis | Unidade 3 - Navegação
40
1 NAVEGAÇÃO BÁSICA
Quando qualquer pessoa comenta sobre navegabilidade, na verdade ela está se referindo à navegabi-
lidade de uma aplicação, ou seja, a transição de telas do usuário. No React Native, você pode criar uma 
navegabilidade de páginas utilizando a biblioteca React Navigation. Essa biblioteca possui uma versão 
4, antiga, e uma versão mais atual, versão 5. Há diferenças entre as versões em termos de sintaxe de 
comando, porém os princípios são os mesmos: criar a navegabilidade.
Por tratarmos do uso do React via expo, todas as operações serão baseadas na versão mais atual, a 
versão 5. Caso você queira aprofundar os seus conhecimentos também na versão 4, além de comparar 
com a versão mais atual, acesse o tópico Aprofunde-se.
Aprofunde-se
Conheça os detalhes da React Navigation 4.
Título: Construindo a navegabilidade de sua App
Acesso em: 19/05/2020.
Disponível em: https://reactnavigation.org/docs/getting-started
Figura 1 - Transição de tela.
https://reactnavigation.org/docs/getting-started
Programação para dispositivos móveis | Unidade 3 - Navegação
41
A React Navigation é uma biblioteca importantíssima para sua aplicação, desenvolvida na tecnologia React 
Native. Bem provável que você faça uso dessa biblioteca na maioria de suas aplicações. Mas qual o objetivo 
dessa biblioteca? A React Navigation permite que você, como desenvolvedor, crie rotas, ou seja, com a apli-
cação da biblioteca em seu projeto, você terá condições de trabalhar com diversas telas e com a transição 
entre elas.
Então, começaremos do início. Você precisa instalar a biblioteca antes de começar a usá-la no seu projeto. 
Lembre-se que o React Native faz uso de dois gerenciadores de pacotes, o yarn e o npm (CANTELON, 
2014). Qualquer um pode ser usado para fazer a instalação da biblioteca. Na pasta do projeto, digite:
npm install @react-navigation/native ou yarn add @react-navigation/native.
Execute o comando. Após a instalação, é necessária a instalação das dependências ou bibliotecas comple-
mentares ou auxiliares. O nosso projeto está sendo desenvolvido via expo, portanto execute o comando:
expo install react-native-gesture-handler react-native-reanimated react-native-screens 
react-native-safe-area-context @react-native-community/masked-view.
Pronto. Agora o cenário está pronto para a utilização da React Navigation. Essa instalação pode ser visua-
lizada no arquivo package.json. A figura 2 ilustra uma parte do arquivo que contém informações sobre 
as bibliotecas instaladas no projeto.
Figura 2 - Arquivo package.json contendo informações sobre 
as dependências e as suas versões instaladas no projeto.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 3 - Navegação
42
A biblioteca React Native possui no mínimo três tipos de transições de tela que podem ser usadas em 
uma aplicação móvel. São elas: Stack, Tab e Drawer (MARDAN, 2016). Neste tópico, abordaremos a tran-
sição de tela usando a biblioteca Stack. Nos próximos tópicos, serão abordados os outros dois tipos de 
transições. Mas, para tal procedimento, você também precisa instalar a biblioteca Stack Navigation por 
meio do comando npm install @react-navigation/stack ou yarn add @react-navigation/stack 
dentro do seu projeto. O Stack Navigation é a transição tradicional, ou seja, de uma página A para uma 
página B.
Entretanto, a transição de uma tela é realizada por meio de manipulação de eventos (handlers) 
(FLANAGAN, 2013). Esses eventos são ações que ocorrem, geralmente, por ações do usuário sobre um 
elemento de tela como um botão ou uma imagem. A tabela 1 ilustra alguns handlers usados em compo-
nentes do React Native.
Handler Descrição
onPress() Essa função aciona ações após o click sobre o objeto.
onChange() Essa função aciona ações quando a caixa de texto é alterada.
onBlur()
Essa função é usada para acionar ações quando um elemento perde o foco, por exemplo, em 
uma caixa de texto.
Manipular eventos é um legado do JavaScript que ficou aperfeiçoado com o jQuery (FLANAGAN, 2013). 
Esses manipuladores tornam a interface do usuário mais interativa e podem ser usados, porexemplo, 
para o feedback de orientação a navegabilidade do usuário na tela.
Reflita
jQuery é uma implementação usada na estrutura HTML, DOM e CSS, pois os elementos 
HTML possuem uma hierarquia dentro de uma página web, a começar pelo elemento 
raiz <html>.
Seria possível usar jQuery no React Native?
Se você comparar com uma navegação de páginas web, as páginas fazem a transição pelas tags de links 
<a> (HAROLD, 2010), contudo o navegador possui um histórico dessas transições. A tecnologia React 
Native não possui um histórico geral de navegação e por essa razão faz uso de bibliotecas. O Stack Navi-
gation trabalha com um container de páginas. Dentro desse container, são inseridas todas as páginas do 
projeto e, posteriormente, as transições entre elas. Um detalhe importante: somente as páginas inseridas 
no container serão manipuladas no projeto. O Stack Navigation opera com o sentido de pilha, ou seja, o 
item no topo da pilha é o item a ser mostrado. Além disso, gerencia o histórico de navegação (BODUCH, 
2018). Alguns dos elementos usados na composição de um Stack Navigation são ilustrados na tabela 2.
Tabela 1 - Handlers usados em componentes React Native.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 3 - Navegação
43
Elemento Descrição
import { createStackNavigator } from ‘@react-navigation/
stack’;
O componente deve ser importado para que você possa 
criar as rotas de navegação.
import {NavigationContainer} from ‘@react-navigation/
native’
O componente deve ser importado para implementar 
as pilhas de navegação.
import {useNavigation} from ‘@react-navigation/native’;
O componente deve ser importado para a criação da 
navegação equivalente ao link em web.
<NavigationContainer>
</NavigationContainer>
Componente que determina a área de páginas da 
aplicação.
<Stack.Navigator>
<Stack.Screen name=”...” component={...} />
</Stack.Navigator>
Esse componente determina as rotas de navegação. Há 
duas propriedades fundamentais: name, que especifica 
o nome da página a ser usada, e component, que é 
associada à página criada.
Basicamente, há duas maneiras de implementar um gerenciador de eventos de transição de páginas em 
um elemento React Native: utilizando um botão, via objeto useNavigation, e utilizando props (propriedade 
do elemento). Ambas as formas estão associadas ao uso de manipuladores de eventos como o onPress. 
Se você deseja entender como é a aplicação do uso da biblioteca Stack Navigation, assista ao vídeo.
Assista
Acesse na plataforma o vídeo: IDE snack.expo.io e Transição de tela (Stack Navigation)
O projeto de design de sua aplicação deve ser planejado antes do início de sua programação, pois, assim, 
com o wireframe pronto, a orientação do desenvolvimento da App fica muito mais compreensível. Há 
diversos aplicativos disponíveis na internet com contas gratuitas que te auxiliam a desenvolver a sua 
ideia da App.
Tabela 2 - Elementos de uso da biblioteca Stack Navigation 
usados no desenvolvimento de transição de telas em uma App.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 3 - Navegação
44
Aprofunde-se
Entenda como criar um wireframe.
Título: Planejando a App
Acesso em: 19/05/2020.
Disponível em: https://youtu.be/ZeO13s5eY-s
Mas, como dito, não existe somente esse tipo de navegação, há outros como o Drawer Navigation, 
assunto do próximo tópico.
2 BARRA DE NAVEGAÇÃO
Figura 3 - Drawer menu.
https://youtu.be/ZeO13s5eY-s
Programação para dispositivos móveis | Unidade 3 - Navegação
45
A usabilidade de uma aplicação está relacionada ao fato do usuário poder usar um sistema de forma fácil, 
com o propósito de permitir que o usuário execute uma tarefa ou alcance seus objetivos na aplicação 
(BREITMAN, 2005). Uma das formas de facilitar o manuseio da aplicação para o usuário é por meio de menus.
Reflita
Acessibilidade é um termo usado para o acesso a qualquer coisa (lugar, dispositivo, 
serviços) com autonomia por pessoa com deficiência ou com mobilidade reduzida.
Como a acessibilidade poderia ser implementada a um menu de barra lateral?
Os menus são criados para organizar a informação e permitir uma melhor navegação, agrupando as 
informações por categorias, por exemplo, esporte, lazer, restaurantes etc.
Entretanto, a organização da informação depende do conhecimento dos elementos que compõem um 
layout como posicionamento dos objetos, a tipografia, o tipo de densidade, tamanho de ícones, entre 
outros elementos. Portanto, adquirir o conhecimento necessário sobre os elementos de layout permite 
a criação de designs mais interessantes. Assim, visualize o infográfico a seguir que ilustra informações 
sobre elementos de interface do usuário, um ótimo complemento aos seus conhecimentos.
Programação para dispositivos móveis | Unidade 3 - Navegação
46
Essa prática de organização da informação em uma aplicação está relacionada à disciplina de Arquite-
tura da informação.
Infográfico 1 - Compreendendo os componentes do layout.
Fonte: elaborado pelo autor.
ED+ Content Hub © 2020
Programação para dispositivos móveis | Unidade 3 - Navegação
47
Aprofunde-se
O design tem extrema importância 
na usabilidade de uma aplicação, 
portanto compreender os conceitos de 
desenvolvimento para um bom design é 
fundamental. Aprofunde-se mais sobre 
os conceitos de usabilidade.
Título do livro: Usabilidade Móvel
Autores: Jakob Nielsen e Raluca Budiu.
Local: Birmingham - UK.
Editora: GEN LTC.
Data de publicação: 08/09/2016.
ISBN: 978-8535264272.
ASIN: B07CDPDL95.
A riqueza da biblioteca React Navigation permite a instalação de bibliotecas em separado para uso dentro 
da sua aplicação (MARDAN, 2016). Nesse sentido, antes de você começar a esboçar o seu primeiro menu, 
você tem que carregar para o seu projeto a biblioteca React Navigation Drawer por meio do comando 
yarn add @react-navigation/Drawer, diretamente no prompt de comando no diretório da aplicação.
Feito o procedimento de instalação da biblioteca, você está apto a criar seu primeiro menu. Da mesma 
maneira que foram importadas as bibliotecas para a navegação via Stack Navigation, o seu projeto 
precisa importar as bibliotecas que te ajudarão a construir o menu de navegação. Para isso, no início do 
seu projeto, os códigos de importação deverão ser inseridos, como no exemplo a seguir:
1. import ‘react-native-gesture-handler’;
2. import * as React from ‘react’;
3. import { Image, StyleSheet, Button, View, Text } from ‘react-native’;
4. import { NavigationContainer } from ‘@react-navigation/native’;
5. import { createDrawerNavigator, DrawerContentScrollView,DrawerItemList, DrawerItem } from 
‘@react-navigation/drawer’;
Observe que, na linha 1, é importada a biblioteca de manipulação de gestos, ou seja, essa biblioteca 
permite que, com o dedo, a barra de menu possa ser deslocada da esquerda para a direita. Nas linhas 4 
e 5, são importados os elementos (componentes) relativos à construção da barra de menu lateral de sua 
aplicação. A figura 3 ilustra um menu de barra lateral onde a biblioteca react-native-gesture-handler 
permite que o usuário abra e feche o menu usando os dedos.
Programação para dispositivos móveis | Unidade 3 - Navegação
48
Bem parecido com o desenvolvimento do Stack Navigation, o Drawer Navigation também determina um 
container de navegação e, dentro desse container, todas as opções do menu. O container é criado pelo 
uso do componente <NavigationContainer> e, dentro desse container, você insere a barra de nave-
gação criada pelo componente <Drawer.Navigator>. As opções de navegação são inseridas dentro da 
área de navegação pelo componente <Drawer.Screen name=”Home” component={Home} />. Cada 
componente possui diversas opções e você pode, por meio do style sheet, criar diferentes tipos de 
design de menus, mas dependerá da criatividade e conhecimento sobre design de tela. Para melhorar 
seus conhecimentos de construção de menus, como os elementos, tamanho de fonte etc., veja o tópico 
Aprofunde-se eentenda melhor sobre a interface do usuário.
Aprofunde-se
Conheça os tipos de menus.
Título: Menus
Acesso em: 21/05/2020.
Disponível em: https://material.io/components/menus
Figura 4 - Barra de menu lateral de uma App.
https://material.io/components/menus
Programação para dispositivos móveis | Unidade 3 - Navegação
49
O componente <Drawer.Screen> possui duas opções obrigatórias: name e component. Name será o 
nome que aparecerá no menu e a opção component será a tela que será mostrada quando a opção 
estiver ativa (BODUCH, 2018). Esse componente, <Drawer>, antes de ser usado no código, deverá ser 
criado por const Drawer = createDrawerNavigator();. Algo muito importante é que você entenda que 
cada componente de uma Drawer ou de opção de menu é uma tela diagrama, composta por diversos 
outros componentes. Por padrão, as opções do menu serão mostradas de acordo com o posiciona-
mento inserido no código, mas você pode personalizar o seu menu, tornando-o mais atraente ou estili-
zando as propriedades de cada componente.
Todavia, há a possibilidade de você criar seu menu personalizado também. Assista abaixo ao vídeo sobre 
como criar um menu personalizado deixando a sua aplicação mais atraente.
Assista
Acesse na plataforma o vídeo: Drawer menu personalizado
Entretanto, você pode fazer também combinações desses tipos de navegação, ou seja, no projeto de 
uma aplicação móvel, você pode ter navegação por Stack Navigation, Drawer Navigation e Tab Naviga-
tion, como também pode fazer a combinação entre esses tipos de navegação.
A navegação por tabulação é o tema central do próximo tópico.
Programação para dispositivos móveis | Unidade 3 - Navegação
50
3 NAVEGAÇÃO POR TABULAÇÃO
A navegabilidade de uma aplicação móvel está diretamente relacionada à facilidade ou à dificuldade do 
usuário em alcançar seus objetivos na aplicação, ou seja, encontrar a informação desejada. A facilidade 
de navegação é propiciada pela usabilidade.
A navegação por tabulação se apresenta como uma ótima ferramenta para melhorar a navegabilidade 
de sua App. Ela cria espaços de tabulação na parte inferior da tela ou na parte superior, permitindo uma 
melhor navegabilidade (BODUCH, 2018).
O desenvolvimento de uma navegação por tabulação está associado à biblioteca bottom-tabs e, por 
essa razão, você precisa fazer a instalação da biblioteca dentro do seu projeto.
A instalação da biblioteca deve ser feita por: yarn add @react-navigation/bottom-tabs.
Figura 5 - Tab menu.
Programação para dispositivos móveis | Unidade 3 - Navegação
51
Reflita
Você compreendeu que existem basicamente três tipos de navegação: Stack, Drawer e 
Tab Navigation. No entanto, essas bibliotecas podem ser instaladas separadamente. Essas 
bibliotecas, em conjunto, podem ser usadas para criação de layouts complexos.
Quais bibliotecas seriam usadas na criação de um pequeno sistema de chat?
Após a instalação da biblioteca, o seu próximo passo é a criação da primeira App usando a Tab Naviga-
tion. A biblioteca Tab Navigation possui uma estrutura muito simples e de fácil entendimento, pois usa 
um container e dentro desse container as janelas de tabulação.
A figura 6 ilustra a estrutura do programa utilizando a biblioteca para a criação de navegação por tabulação.
Na estrutura de um programa, como ilustrado na figura 6, você pode notar a importação das bibliotecas 
@react-navigation/native para uso do objeto NavigationContainer (linha 3), que cria o container de 
tabulação, e a biblioteca @react-navigation/bottom-tabs (linha 4), que cria a área de navegação na 
parte inferior da interface da App. Note que um objeto é criado na linha 6 por meio do método create-
BottomTabNavigator(). Esse objeto é fundamental na construção dos elementos de tabulação, pois por 
meio desse objeto é que são construídas as telas de navegação por tabulação (linhas 12 e 13 do código).
Figura 6 - Estrutura da Tab Navigation.
Fonte: elaborado pelo autor.
Programação para dispositivos móveis | Unidade 3 - Navegação
52
Três opções do elemento criado na linha 6 são importantes: screen, que determina a página ou a inter-
face; a opção name, que vai determinar o nome da página; e componente, que determina qual compo-
nente será inserido na página. A opção component faz referência às páginas que serão apresentadas na 
tela de sua App, semelhante ao Stack Navigation.
Você também pode customizar a Tab Navigation inserindo ícones e badges nas áreas de tabulação, mas 
também pode inserir a Tab Navigation na parte superior da interface do seu projeto. Para conhecer mais 
sobre quais objetos podem ser usados na personalização de uma Tab Navigation para sua App, faça um 
tour pelo tutorial no tópico Aprofunde-se como aperfeiçoamento de seu conhecimento.
Aprofunde-se
Vamos melhorar a usabilidade da App?
Título: Personalizando a Tab Navigation
Acesso em: 28/05/2020.
Disponível em: https://jeffgukang.github.io/react-native-tutorial/docs/router-tutorial/02-
react-navigation-tab/react-navigation-tab.html
Assim, você já está apto a desenvolver uma aplicação com vários tipos de navegação, melhorando tanto 
a navegabilidade quanto a usabilidade de sua aplicação. Lembre-se de que em cada tela de navegação 
você pode inserir outros tipos de telas e deixar a sua App com um visual bem interessante. Assista ao 
vídeo a seguir para entender como inserir uma lista de imagens semelhantes às encontradas em aplica-
ções de rede social dentro de um Tab Navigation.
Assista
Acesse na plataforma o vídeo: Grid de fotos
https://jeffgukang.github.io/react-native-tutorial/docs/router-tutorial/02-react-navigation-tab/react-navigation-tab.html
https://jeffgukang.github.io/react-native-tutorial/docs/router-tutorial/02-react-navigation-tab/react-navigation-tab.html
Programação para dispositivos móveis | Unidade 3 - Navegação
53
CONSIDERAÇÕES FINAIS
Nesta unidade, você foi introduzido aos conceitos de navegação usados pela tecnologia React Native. 
Como objetivo, foi apresentado aos tipos de navegação Stack Navigation, Drawer Navigation e Tab Navi-
gation. Você compreendeu como fazer as transições de telas e também identificou os elementos neces-
sários para a construção dessa navegação para o seu projeto. Por fim, pôde entender que o uso dos 
componentes de transição de tela favorece a navegabilidade de uma aplicação.
Essa unidade foi o início, mas o aprimoramento de seus estudos ainda continua. Está preparado? Vamos lá!
Programação para dispositivos móveis | Unidade 3 - Navegação
54
GLOSSÁRIO
<a>: é uma tag da linguagem HTML usada para criar links.
Badge: é um pequeno balão sinalizador usado em sistema de chat como no WhatsApp para representar 
uma informação (mensagem).
Handler: é um componente que promove uma interatividade com o usuário a partir de uma ação do 
usuário sobre um elemento de tela, por exemplo, um clique sobre um botão ou uma rolagem de tela 
para o lado.
Ícone: é um elemento gráfico usado para representar funcionalidade em aplicações móveis.
JavaScript: linguagem de script usada para lado cliente.
jQuery: são bibliotecas em JavaScript criadas para facilitar a aplicação de comandos na linguagem JavaScript.
Links: são hiperligações usadas em páginas web para criar navegabilidade.
Tag: é um rótulo usado na linguagem de marcação de hipertexto (HTML).
Wireframe: um rascunho da interface do usuário composto por todos os elementos como botão, caixa 
de texto, imagens, textos etc.
Programação para dispositivos móveis | Unidade 3 - Navegação
55
REFERÊNCIAS
BODUCH, Adam. React and React Native. 2. ed. Packt, 2018. ISBN 978-1-78934-679-4.
BREITMAN, Karin Koogan. Web Semântica: a internet do futuro. Rio de Janeiro: LTC, 2005. ISBN 85-216-1466.
CANTELON, Mike et al. Node.js in Action. New York: Manning, 2014. ISBN 9781617290572.
FLANAGAN, David. JavaScript: O Guia Definitivo. 6. ed. Porto Alegre, Bookman, 2013. ISBN 978-0-596-80552-4.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. Porto Alegre: 
Bookman, 2010. ISBN 978-85-7780-670-6.MARDAN, Azat. React Native Quickly: start learning native iOS development. Node University, 2016. 
ASIN B01MR4Q00X.
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
56
Unidade 4 Trabalhando com mapas
Objetivo de aprendizagem:
Conhecer os fundamentos do uso de mapas no desenvolvimento de uma aplicação.
Tópicos de estudo:
• A geolocalização;
• Mapas;
• Aplicando mapas.
Iniciando os estudos:
Com o avanço do uso dos serviços via aplicativos móveis, novos conceitos ganharam força como, por exemplo, 
a geolocalização. Antes, somente vista nos filmes de ficção, hoje, na era da internet, a ficção se torna reali-
dade. Muitos aplicativos fazem uso do recurso da geolocalização para melhor posicionar o usuário com 
relação a um determinado serviço. Pode-se exemplificar com aplicativos usados por quem pratica corrida, 
os quais monitoram o percurso feito pelo usuário, ou pelos aplicativos de delivery que sinalizam onde está o 
seu pedido, além de tantos outros aplicativos.
Na era da informação, esse recurso, bem aplicado a um projeto de desenvolvimento de aplicativo móvel, 
resulta em feedbacks de orientação ao usuário da aplicação. Sendo assim, nesta unidade, você irá obter os 
conhecimentos para aplicar a geolocalização e a representação de mapas em aplicativos móveis.
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
57
1 A GEOLOCALIZAÇÃO
Você sabe o que é geolocalização? Provavelmente, você faz uso da geolocalização no seu cotidiano por 
meio de aplicativos de transporte, delivery, redes sociais, entre outros. A figura 1 ilustra um mapa repre-
sentando o sistema de localização.
Com os novos conceitos inseridos pela Web 2.0, compartilhamento e interatividade, paralelamente à 
evolução dos hardwares e da infraestrutura para uso de geoprocessamento, são recursos bastante 
explorados em computação móvel.
A geolocalização, também conhecida como georreferenciação, é o processo de captar automaticamente a 
sua posição com relação ao globo terrestre, usando as coordenadas geográficas. Porém, na computação, há 
diversas outras maneiras de conseguir a sua localização: por endereçamento IP (Internet Protocol), por RFID 
(Radio-Frequency Identification) e por coordenadas de um Posicionamento Global (GPS).
O GPS é o principal recurso usado na localização em aplicações móveis, pois, atualmente, os dispositivos 
móveis já têm integrado ao seu hardware o microchip de GPS. A seção Aprofunde-se contém uma refe-
rência interessante de como são aplicados os recursos de GPS, principalmente pelo Google.
Figura 1 - Geolocalização.
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
58
Aprofunde-se
Entenda o funcionamento do Google Maps.
Título: Find Latitude Longitude on Google Maps
Acesso em: 17/06/2020.
Disponível em: https://youtu.be/eDlZKJ6h-WQ
Mas como funciona o GPS? Como curiosidade, ele teve suas origens em um projeto desenvolvido pelo 
departamento de defesa norte-americano na década de 60, porém só concluído em meados da década 
de 90. O GPS é a bússola do mundo moderno. Antes, a localização era realizada por meio de uma bússola, 
hoje pelo GPS.
O GPS faz uso de satélites que captam com precisão por meio de duas variáveis, longitude e latitude, a 
posição correta do dispositivo que contém o sistema GPS integrado. Cada satélite emite sinais de onda 
de rádio precisos, simultâneos, ininterruptos e que são captados pelas antenas dos dispositivos.
Reflita
O sinal de GPS é dividido em dois tipos de sinais que operam em frequências diferentes 
em banda L. A primeira é usada pelo setor militar, com muita precisão e acurácia. Já a 
segunda frequência é usada no mercado comum.
Hoje, estamos conectados emitindo direto o sinal de nossa localização por dispositivos 
móveis. Será que o usuário da era digital está 24 horas sob vigilância?
Latitude e longitude são coordenadas geográficas que determinam o posicionamento em relação ao 
globo terrestre. Mas qual é a referência usada por essas coordenadas? A latitude é a distância em graus 
de qualquer ponto da superfície da Terra com relação ao principal eixo do globo terrestre, a linha do 
Equador. Já a longitude é a distância em graus com relação ao eixo que divide a Terra verticalmente, co-
nhecido como meridiano de Greenwich. Com o cruzamento dessas duas variáveis é possível descobrir 
o ponto de localização em qualquer parte da superfície terrestre.
A tecnologia React Native possui uma biblioteca que faz uso do conceito de localização via GPS, o compo-
nente MapView. Ele permite que o desenvolvedor faça uso, em seu projeto, dos mapas do Google ou 
da Apple em aplicações desenvolvidas tanto para Apple iOS, como para o sistema operacional Android. 
Porém, esse recurso para uso Snack do expo não precisa de qualquer tipo de configuração, mas para 
aplicações stand-alone, tanto iOS quanto Android, necessitam de algumas configurações adicionais, 
demonstradas nos próximos tópicos desta unidade de aprendizagem.
Todavia, esses recursos de localização são representados utilizando coordenadas de posicionamento 
global. A tabela 1 mostra algumas das cidades mais importantes no mundo e suas coordenadas GPS.
https://youtu.be/eDlZKJ6h-WQ
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
59
Cidade Latitude Longitude
Paris 48.8588897 2.32004103
Brasília -15.75411277 -47.7053833
Berlim 52.5170365 13.3888599
Londres 51.4893335 -0.14405508
Tóquio 35.6828387 139.7594549
Você pode notar, pela tabela 1, que as informações são negativas em relação à latitude quando a loca-
lização está abaixo da linha do Equador, e positiva quando acima. Mas, com relação à longitude, os 
números negativos indicam à esquerda do meridiano de Greenwich e os números positivos, à direita da 
linha do meridiano de Greenwich.
Brasília, por exemplo, encontra-se abaixo da linha do Equador e à esquerda do meridiano de Greenwich. 
Essas informações são extremamente importantes, pois é por meio delas que a tecnologia React Native 
permite o incremento no aplicativo.
Conhecer a história de um povo ou local faz você compreendê-los. Então, assista ao vídeo a seguir para 
entender a história do GPS, pois, assim, poderá compreender melhor o uso da ferramenta em soluções 
inovadoras para dispositivos móveis.
Assista
Acesse na plataforma o vídeo: A história do GPS
Mas como implementar o conceito de mapas em uma aplicação móvel? Essa implementação será o tema 
principal do próximo tópico desta unidade.
Mas antes de encerrar esta seção, convido você a aprender um pouco mais sobre o funcionamento do 
GPS através do infográfico a seguir.
Tabela 1 - Informações de posicionamento global (latitude e 
longitude) usadas para ilustrar no mapa o posicionamento 
do usuário ou local.
Fonte: dados organizados pelo autor.
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
60
Infográfico 1 - Sistema de Posicionamento Global.
Fonte: elaborado pelo autor.
ED+ Content Hub © 2020
Programação para dispositivos móveis | Unidade 4 - Trabalhando com mapas
61
2 MAPAS
Você sabe o que é um mapa? Os mapas são usados para representar a sua localização por meio de infor-
mações passadas por geolocalização.
Eles são um bom feedback para o usuário, pois geram informações em forma gráfica que atendem a deter-
minado negócio. No processo de Interface Homem-Máquina (IHC), os conceitos de usabilidade, comuni-
cabilidade e acessibilidade são associados a demais conceitos como design, navegabilidade e feedback.
O feedback é o ato de enviar informações ao usuário na interação com a página por som, animação e 
pela combinação dos dois. Sendo assim, os mapas são uma boa representação de feedback que pode 
ser inserido no contexto de uma aplicação para dispositivos móveis.
Reflita
Estamos na era das Apps, de aplicativos muito interativos com o usuário. Nessa era digital, 
o jovem é digital e movimenta-se pela cidade por meio de orientação eletrônica. Assim, 
você consegue imaginar como era a navegação