Universidade Federal do Rio de Janeiro

Escola Politécnica

MBA em Engenharia de Computação e Sistemas

(MBCA)

Construindo aplicações móveis nativas com JavaScript

Autor(es):
_________________________________________________
Calebe Eler De Carvalho De Souza

Orientador:
_________________________________________________
Flávio Luis de Mello

Examinador:
_________________________________________________
Manoel Villas Boas Junior

Examinador:
_________________________________________________
Andressa dos Santos Nicolau

Examinador:
_________________________________________________
Alan Miranda Manteiro de Lima

MBCA
ii
DEDICATÓRIA

Dedico este trabalho os meus pais e a minha esposa que sempre me incentivavam e
apoiaram a conquistar mais esta etapa em minha vida.

iii
 AGRADECIMENTO

Primeiramente a Deus por me dar saúde e sabedoria para realizar todo este
processo de monografia.
A minha família que em todos os momentos acreditaram em mim e me apoiaram
nesta jornada.
Ao meu amigo Wallace, que sempre me apresentou idéias inovadoras para que eu
melhore como profissional.
A todas as amizades feitas durante este curso, que sempre com dedicação, me
ajudaram neste processo acadêmico.

iv
 RESUMO

O tema deste trabalho é apresentar um protótipo de um aplicativo móvel nativo

codificado apenas com JavaScript para ser utilizado em um sistema Android. Como
forma de embasamento, será abordado o funcionamento de várias tecnologias, como
JavaScript, CSS, ReactJS para enfim apresentar o React Native que será utilizado para a
execução da proposta. Através do protótipo foi possível realizar algumas ações úteis,
como utilização de mapas, requisições para servidores, dentre outras, que ilustraram a
eficiência deste framework. Com isso, foi possível constatar que é viável a criação de
aplicativos multi-plataforma com apenas a utilização de uma linguagem de front-end,
sendo uma alternativa eficaz.

Palavras-Chave: Android, CSS, JavaScript, ReactJS, React Native.

v
 ABSTRACT

This work aims to present a prototype of a native mobile application coded only
with JavaScript to be used in an Android system. First, it presents the usage of various
technologies, such as JavaScript, CSS, ReactJS will be approached to finally describe
the React Native that will be used to execute the proposal. A prototype was created so
that it was possible to perform some useful actions, such as the use of maps, requisitions
for servers, among others, which illustrate the efficiency of this framework. Thus, it was
possible to observe that it is feasible to create multi-platform applications with only one
front-end language, therefore, the ReactJS is an effective alternative for coding.

Key words: Android, CSS, JavaScript, ReactJS, React Native.

vi
 SIGLAS

ADB – Android Debug Bridge

CSS – Cascading Style Sheets
DOM – Document Object Model
HTML – HyperText Markup Language
NPM – Node Package Manager
UI – User Interface

vii
Sumário
Capítulo 1: Introdução....................................................................................................1

1.1 – Tema.........................................................................................................................1
1.2 – Delimitação..............................................................................................................1
1.3 – Justificativa.............................................................................................................1
1.4 – Objetivos..................................................................................................................2
1.5 – Metodologia.............................................................................................................3
1.6 – Descrição.................................................................................................................3

Capítulo 2: Embasamento Teórico.................................................................................5

2.1 – JavaScript................................................................................................................5
2.2 – CSS...........................................................................................................................6
2.3 – DOM........................................................................................................................7
2.4 – ReactJS....................................................................................................................9
2.5 – As plataformas móveis IOS e Android ...............................................................10
2.6 – React Native..........................................................................................................11

Capítulo 3: Propostas Tecnológicas.............................................................................14

3.1 – Geração de um aplicativo a partir de um arquivo codificado em javascript..14

3.2 – Utilizando o CSS para estilizar o aplicativo.......................................................15
3.2 – Protótipo funcional...............................................................................................16
3.2 – Deploy do Protótipo..............................................................................................21

Capítulo 4: Conclusão e Trabalhos Futuros................................................................23

4.1 – Conclusão..............................................................................................................23
4.2 – Trabalhos Futuros................................................................................................23

Bibliografia.....................................................................................................................24

vii
Lista de Figuras
1 – Código HTML sem CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.1

2 – Utilização do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2

3 – Detalhamento de como funciona a criação de um CSS . . . . . . . . . . . . . . . . . . 2.3

4 – Exemplo de uma árvore DOM de um HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 2.4

5 – Funcionamento do Virtual DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.5

6 – Funcionamento do React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.6

7 – Processo de criação da aplicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.7

8 – Exemplo de um arquivo Style.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.8

9 – Exemplo de um arquivo JavaScript utilizando CSS . . . . . . . . . . . . . . . . . . . . 2.9

10 – Tela inicial do protótipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.0

11 – Tela de múltipla escolha do protótipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.1

12 – Tela com a opção “Verão” escolhida do protótipo . . . . . . . . . . . . . . . . . . . . . 3.2

13 – Tela de navegação do mapa utilizando o plugin do Google maps . . . . . . . . . 3.3

14 – Tela de pesquisa de filmes no protótipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.4

15 – Instalação de aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.5

16 – Selecionando Android SDK Tools para instalação do Android SDK . . . . . . . 3.6

17 – Selecionando Android 7.1.1 para instalação do Android SDK . . . . . . . . . . . . 3.7

18 – Selecionando Android Suport Repository para instalação do Android SDK . 3.8

19 – Estrutura de diretórios de novo projeto React Native . . . . . . . . . . . . . . . . . . . 3.9

20 – Lista de dispositivos conectados no computador . . . . . . . . . . . . . . . . . . . . . . 4.0

21 - Verificar se dispositivo está conectado no computador . . . . . . . . . . . . . . . . . . 4.1

22 – Aplicação rodando no dispositivo Android . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2

23 – Geração de um novo pacote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.3

ix
Lista de Tabelas
8
1 – Mercado Internacional de Smartphones em 2015 pelo IDC . . .. . . . . . . . . . . ..

x
Capítulo 1

Introdução

1.1 – Tema

A proposta deste projeto, trata da criação de aplicativos móveis nativos para

Android e/ou IOS utilizando a linguagem de programação JavaScript. Para resolver este
problema, será utilizado o framework React Native para o desenvolvimento e a
elaboração de um aplicativo.

1.2 – Delimitação

O público alvo a ser alcançado com este trabalho são os desenvolvedores Front-
end que não conhecem Java para o desenvolvimento de aplicativos Android, ou Swift
para o desenvolvimento de aplicativos IOS. Entretanto, utilizando uma linguagem em
que tenham mais conhecimento, serão capazes de se aventurar na criação de aplicativos
para ambas as plataformas utilizando JavaScript.

1.3 – Justificativa

Com a crescente demanda de mercado para o uso de dispositivos móveis que

utilizam Android ou IOS, as empresas tem se mobilizado criando aplicativos para esses
dispositivos, a fim de disponibilizar seus serviços para seus clientes de uma forma mais
acessível. Para isso, existem três maneiras de programar para mobile. A forma Nativa é
quando os aplicativos são desenvolvidos utilizando o código nativo, como o Objective-
C ou Swift para Android e Java para IOS. A vantagem desta forma é que os aplicativos

1
possuem uma ótima performance, porém, é mais caro para se desenvolver. Neste caso, a
empresa precisa contratar uma equipe de desenvolvedores para Android e outra para
IOS, tendo no final dois produtos diferentes, com códigos e manutenções diferentes,
assim como problemas diferentes para serem resolvidos. Além disso, há também a
questão da velocidade de desenvolvimento de cada equipe, que poderia acarretar o
término do aplicativo para um sistema operacional antes da outra.
A segunda forma é o Mobile Web, que são páginas web feitas em HTML5 que
são carregadas no navegador do dispositivo mobile. Sua grande vantagem é que os sites
podem ser acessados por qualquer meio eletrônico que possua um navegador, porém
não possui um bom desempenho e não é possível utilizar-se das funcionalidades dos
dispositivos móveis, como flash, vibrador, câmera, etc.
A terceira forma é a Hibrida, que possui como vantagem o menor custo de
desenvolvimento, pois é escrito um único código para Android e IOS, porém possui
uma baixa performance com relação ao método nativo. Com o tempo surgiram algumas
plataformas de desenvolvimento híbridas como Cordova, PhoneGap e Ionic, que
codificam os aplicativos em HTML5, CSS3 e Javascript. Os aplicativos desenvolvidos
dessa forma, utilizam-se de uma webview e podem ser instalados tanto para Android e
IOS. Uma Webview é o nome de um browser que roda como se fosse o aplicativo
aberto pelo usuário. O usuário não percebe que está dentro de um browser pois essa
webview não contém componentes característicos de um, como a barra de endereço e
barra de favoritos, etc. A webview contém apenas o necessário para que o html, css e
javascript funcionem. Ela se comporta como a engine de renderização da app, porém o
desempenho e velocidade dele são inferiores de um aplicativo desenvolvido de forma
nativa, isto é, utilizando o JAVA e/ou SWIFT para o desenvolvimento. Ainda não era a
solução ideal, pois estava utilizando-se de códigos não nativos para criação de
aplicativos, sacrificando o desempenho.
Foi então que o Facebook com sua equipe de engenheiros, criou o React Native,
onde o desenvolvedor com apenas uma linguagem de programação consegue construir
uma aplicação nativa para duas plataformas. Por ser uma tecnologia nova, o React
Native se propõe a disponibilizar tecnologias modernas no desenvolvimento front-end,
tendo uma variedade de ferramentas que possibilitam a criação de aplicativos móveis
nativos. É uma poderosa que tem como característica a criação e a reutilização de
componentes, além de possuir uma variedade de integrações com outras bibliotecas,
como o ECMAScript 6, Flexbox e o JSX. [1]

2
1.4 – Objetivos

O objetivo deste trabalho é apresentar um protótipo de um aplicativo utilizando

uma nova solução para criação de aplicações nativos para dispositivos móveis
codificado na linguagem JavaScript. Para chegar neste objetivo, será abordado os
seguintes objetivos:
 O funcionamento do JavaScript e do CSS;
 Explicar o que é ReactJS e para que serve;
 Sobre o framework React Native e como funciona;
 Configuração de uma máquina com sistema operacional Ubuntu, para
realização do objetivo.
 Realizar a criação de um aplicativo para Android.

1.5 – Metodologia

Com o intuito da realização de um aplicativo nativo nestes moldes, será

explicado a linguagem JavaScript e CSS como embasamento para toda codificação e
estilização do aplicativo.
Depois será realizada uma abordagem sobre as plataformas Android e IOS, suas
respectivas linguagens de desenvolvimento específicas, explicando suas características,
qual é o publico alvo e quais as diferenças entre eles.
Também foi realizado uma pesquisa sobre a biblioteca ReactJS, explicando seu
funcionamento, na qual o React Native tem a sua base, até chegar ao framework React
Native.
Após isso, será demonstrado as funcionalidades um prototipo que foi
desenvolvido com o objetivo de colocar em prática as tecnologias propostas e
solucionar os problemas descritos.

3
1.6 – Descrição

Este trabalho está estruturado da seguinte maneira:

No capítulo 2 será apresentado o JavaScript como linguagem de programação
base do framework e será falado um pouco sobre CSS utilizado pelo React Native para
parte visual das aplicações móveis. Depois será explicado sobre a biblioteca React
JavaScript em que o React Native se baseia, e finalmente o React Native, abordando o
seu funcionamento e suas vantagens.
O capítulo 3 apresenta a criação de um aplicativo se utilizando do React Native,
assim como sua estrutura e a capacidade de componentização que o framework nos
permite.
No capítulo 4 será a conclusão do trabalho apresentando algumas evoluções
possíveis para realização de trabalhos futuros.

4
Capítulo 2

Fundamentação Teórica

2.1 – JavaScript

O JavaScript é uma linguagem de programação Front-end onde códigos são

escritos e executados no lado do cliente sem que haja nenhum processo de compilação.
De acordo com Giancarlo Silva [4] “JavaScript é uma linguagem de
programação criada em 1995 por Brendan Eich enquanto trabalhava na Netscape
Communications Corporation. Originalmente projetada para rodar no Netscape
Navigator, ela tinha o propósito de oferecer aos desenvolvedores formas de tornar
determinados processos de páginas web mais dinâmicos, tornando seu uso mais
agradável.”
Com o crescimento da Internet ela acabou tendo uma grande importância em
qualquer página web, isso porque o JavaScript transforma páginas estáticas em páginas
dinâmicas, através da manipulação de comportamento do HTML e CSS.
Com o passar dos anos e enorme sucesso conseguido pelo JavaScript, a
tecnologia acabou evoluindo para atender as mais diversas demandas. Hoje em dia,
além da criação de sites ricos em JavaScript, é possível também a criação de aplicativos
mobiles através do React Native.
O funcionamento do JavaScript é da seguinte forma: Os códigos escritos nessa
linguagem são executados no navegador do cliente, que permitem, por exemplo, alterar
o comportamento de elementos HTML presentes na página web.
Uma característica desta linguagem é que se trata de uma linguagem
interpretada, isso quer dizer, não depende de compilação para ser executado, o código é
executado confirme lido pelo navegador, linha a linha.

5
 Como o código JavaScript fica exposto na parte do cliente, podendo ser
facilmente visualizado, pode ser considerado uma desvantagem, por apresentar essa
brecha.
O JavaScript foi originalmente feito para que se pudesse executar em um site de
uma forma mais leve, algumas ações existentes em outras linguagens compiladas. Hoje
em dia, pode-se dizer que o JavaScript, junto com o HTML e o CSS se tornou um dos
pilares fundamentais da web existente.

2.2 – CSS

O CSS (Cascading Style Sheets) é uma linguagem que reúne um conjunto de

estilos que são criados para deixar as páginas Web mais bonitas e atraentes ao usuário.
Ana Paula Pereira diz que [5] “O CSS define como serão exibidos os elementos
contidos no código de uma página da internet e sua maior vantagem é efetuar a
separação entre o formato e o conteúdo de um documento.”.
Com a criação do CSS foi possível a criação de um estilo, que fosse
compartilhado entre as páginas, reduzindo assim a repetição de código. Com isso o
consumo de banda foi diminuindo assim como a velocidade para rederização da página
Web.
Como exemplo simples, será realizado a criação de um CSS para estilizar cor
dos textos em uma página HTML. Sem a utilização do CSS isto é feito como mostra a
figura 2.1.

Figura 2.1 – Código HTML sem CSS

Na imagem 2.2, observa-se como é feito para realizar a utilização do CSS. Será
feito na tag head da página HTML dentro da tag style.

6
 Figura 2.2 – Utilização do CSS

Como observado na figura 2.2, para criar o CSS para um elemento, será preciso
dizer primeiro qual é o elemento em questão, depois informar quais suas propriedades e
valores que serão alterados. A figura 2.3 mostra detalhadamente como funciona os
atributos do CSS.

Figura 2.3 – Detalhamento de como funciona a criação de um CSS [11].

Fazendo desta forma, o navegador, que é o responsável por renderizar todo o

código HTML e CSS das páginas, exibe o conteúdo estilizado com o CSS pelo
desenvolvedor.

2.3 – DOM

O Documento de Modelo de Objeto (do inglês Document Object Model -

DOM) é um objeto hierárquico formando uma árvore, onde são encontrados todos os
elementos existentes no modelo a que ele se refere, e que através dele, se pode acessar
os elementos de uma página HTML. Por exemplo, no DOM dos navegadores web, são
encontrados elementos existentes no próprio navegador e da página que está sendo
acessada.

7
 Figura 2.4 – Exemplo de uma árvore DOM de um HTML[17].

A figura 2.4 acima exemplifica a estrutura de uma árvore DOM de uma página
HTML onde todos os elementos da árvore são denominados como “node-tree” e
possuem uma relação hierárquica entre si.
A primeira versão do DOM foi lançada em 1998 pela W3C, a segunda em 2000,
e, por fim, a terceira versão foi lançada em 2004.
Uma das vantagens disto, é poder acessar qualquer elemento desta árvore de
forma prática e rápida. Para facilitar ainda mais este processo, temos uma biblioteca
javascript muito utilizada para manipulação de elementos DOM de uma página HTML é
o JQuery. Através dele é possível acessar e manipular diretamente quaisquer elementos.
Abaixo temos vários exemplos de como encontrar esses elementos e alterar suas
propriedades na página HTML utilizando o Jquery.

// pinta o fundo de um formulário com o id “form” de azul
$(‘#form’).css(‘background­color’,’blue’);
// escondende os elementos que tenha a class igual a “linha”
$(‘.linha’).hide();
// muda o texto de todos os paragrafos
$(‘p’).text(“hello world!”);

8
 2.4 – ReactJS

O React.JS é uma biblioteca JavaScript de UI que veio com a premissa de

criação de componentes reutilizáveis e interativos. Criada pelo Facebook/Instagram, ela
é uma biblioteca relativamente nova, que vem crescendo e ganhando força com o
tempo. De acordo com o Rafaell Lycan [7], “[…] React na verdade é uma biblioteca
para criar interfaces baseadas em componentes, onde basicamente abstrai o DOM API
quanto a eventos a serem disparados (onClick, onBlur, onChange, etc) e também sobre
os elementos em si (createElement, createTextNode, appendChild, etc)”.
Sua principal característica, é a de criação de componentes em uma aplicação.
Quando, em uma aplicação utilizando o ReactJS, um componente se torna muito
complexo, é possível dividí-lo criando vários componentes pequenos e reutilizáveis.
Todo componente criado pelo ReactJS possui dois atributos principais: estado (state) e
propriedades (props). Sempre que o estado de um componente é modificado, ele é
renderizado novamente. Nesse processo, é realizado uma comparação entre o estado
atual e o estado novo, renderizando apenas o que foi modificado [12]. Pode ser dito que
o ReactJS trabalha com um próprio DOM em memória, chamado de Virtual DOM. Toda
vez que um elemento precisa ser renderizado, o ReactJS identifica as alterações
comparando o elemento no DOM e na memória, realizando a alteração somente do que
foi modificado, sem precisar renderizar todo o elemento [13]. Por causa dessa
abordagem, ele é considerado um JavaScript reativo. Na imagem 2.5 pode-se observar o
funcionamento da alteração de um componente utilizando o Virtual DOM do ReactJS.

9
 Figura 2.5 – Funcionamento do Virtual DOM [14].

Na figura acima, é demonstrado que quando o Virtual DOM é alterado, React

compara com a versão anterior do Virtual DOM. Depois ele faz um ‘diff’ descobrindo
exatamente quais objetos virtuais tiveram modificações. Depois de saber exatamente
quais objetos sofreram alterações, ReactJS atualiza somente esses objetos no DOM real.
Pode-se dizer então que suas vantagens são: facilidade de se criar componentes
reutilizáveis e; utilização do Virtual DOM, que é bem mais rápido que o DOM nativo
para renderização de seus componentes.

2.5 – As plataformas móveis iOS e Android

Hoje em dia existem duas principais plataformas para os dispositivos móveis.

São eles o iOS e o Android.
O iOS é um sistema operacional desenvolvido pela Apple e utilizado em seus
dispositivos móveis. Também desenvolvido pela Apple, atualmente existe o Swift
(antigamente o Objective-C), que é uma linguagem de programação relativamente nova
feita para o desenvolvimento de aplicativos para IOS. Por outro lado, tem-se o Android,
que utiliza o Java como linguagem de desenvolvimento. Ele é o sistema operacional
desenvolvido pelo Google e utilizado pela maioria dos fabricantes de dispositivos
móveis de hoje em dia.
Em uma pesquisa realizada no dia 25 de Agosto de 2015 pelo instituto
americano IDC [15], é mostrado que o mercado internacional de smartphones tem uma
liderança com folga do Android. Como é possível observar na tabela a seguir, o sistema
do Google possuia, quando esta pesquisa foi realizada, 81% desse mercado, com o
sistema da Apple em segundo lugar com apenas 15%.

Tabela 2.1 – Mercado Internacional de Smartphones em 2015 pelo IDC

10
 2015* 2015* 2015* 2019* 2019* 2019*
5-Year
Region Shipment Market YoY Shipment Market YoY
CAGR
Volumes Share Growth Volumes Share Growth

Android 1,164.3 81.1% 9.9% 1,541.9 81.1% 5.0% 7.8%

iOS 223.7 15.6% 16.1% 269.6 14.2% 3.3% 7.0%

Windows
36.9 2.6% 5.8% 67.8 3.6% 12.8% 14.2%
Phone

Others 11.5 0.8% -15.5% 23.0 1.2% 8.6% 11.0%

TOTAL 1,436.5 100.0% 10.4% 1,902.3 100.0% 5.1% 7.9%

O sistema operacional da Google está presente em mais smartphones de

diferentes fabricantes, com aparelhos de baixo custo até os mais caros. Já o iOS, só está
presente nos aparelhos da Apple, e são aparelhos de custo elevado, tornando inacessível
para uma parcela significativa de mercado consumidor.
Tendo isso em mente, quando um aplicativo for desenvolvido com o objetivo de
que seja utilizado por grande parte dos usuários, ele deverá ser feito para Android e iOS.
Juntos, estes sistemas operacionais somam 96% do mercado, uma porcentagem bem
significativa.

2.6 – React Native

O React Native é um framework criado pela equipe de engenheiros do

Facebook, que possui um conjunto de ferramentas, que possibilitam a criação de
aplicativos móveis nativos para as plataformas IOS e Android. É o que existe de mais
moderno no que se refere ao desenvolvimento mobile baseado em JavaScript [1]. Ele é
baseado em ReactJS, e foi criado desde o início para ser uma camada extra de
desempenho do sistema utilizando componentes UI nativos e APIs do sistema para
entregar uma experiência ao usuário extremamente integrada.
Em relação às ferramentas que o React Native possui, Carlos Cabral diz: “O
stack do React Native é poderoso, pois nos permite utilizar ECMAScript 6, CSS

11
Flexbox, JSX, diversos pacotes do NPM e muito mais. Sem contar que nos permite
fazer debug na mesma IDE utilizada para o desenvolvimento nativo com essas
plataformas[...]” [1].

Características do React native:

1 - cria aplicativos nativos;
2 - não possui HTML;
3 - não utiliza o Browser;
4 - não é uma WebView.
5 - é completamente codificado com JavaScript.

Ao escrever um componente no React Native, seus atributos descrevem como

ele deve ser exibido, e o React Native realiza a renderização. Uma camada de abstração
conhecida como “bridge” separa estas duas funções, permitindo que o React Native use
as APIs de renderização reais do iOS ou do Android, como mostra a figura 2.6. No iOS,
os componentes do React Native são renderizados para visualização de UI reais,
enquanto no Android, eles são renderizados para Views Nativas.

Figura 2.6 – Funcionamento do React Native [9]

Com isso, os componentes a serem empregados na codificação para Android ou

iOS, “existem” no React Native, possibilitando o usuário ter uma experiência muito
agradável [3].
O desenvolvimento multiplataforma com desempenho, animações e
comportamento nativo é uma grande vantagem deste framework.Uma grande vantagem
que eu vejo é a financeira. Com o React Native a empresa não precisaria de uma equipe
que desenvolva o aplicativo para Android e outra equipe para iOS. Com uma única

12
equipe, é possível desenvolver para as duas plataformas utilizando o mesmo código.
Isso provê uma economia enorme para uma empresa.
Outra vantagem é a simplicidade que é o desenvolvimento híbrido mobile. Criar
uma aplicação utilizando JavaScript como linguagem principal se tornou uma tarefa
muito simples, mesmo para quem não tem conhecimento de JavaScript, pois sua curva
de aprendizado é muito baixa.
A compatibilidade com plugins externos também é algo a ser destacado. É
possível incorporar a sua aplicação, por exemplo, o Google Maps, possibilitando que
você o insira a um módulo nativo. Com isso você poderá utilizar-se das funções
principais do seu plugin, como por exemplo zoom, rotação, etc, utilizando menos
memória e carregando de forma mais rápida [3].
Carlos Cabral cita uma das vantagens “... oferecidas pelo framework é poder
criar aplicações agnósticas, que compartilham a mesma base de código [1]. Neste caso,
você poderia ter os arquivos index.ios.js e index.android.js apontando para uma classe
“root”, responsável por executar o código com base no sistema utilizado pelo usuário:
iOS ou Android. Isso é possível se você fizer uso de componentes que não são
específicos de cada plataforma, como View, Image, ListView, MapView, Modal,
TouchableHighlight, Text, etc.”.

13
Capítulo 3

Propostas Tecnológicas

Este trabalho, conforme descrito anteriormente, terá como meta o

desenvolvimento de um aplicativo utilizando como linguagem de desenvolvimento
JavaScript. Com a utilização do React Native em uma máquina com sistema operacional
Ubuntu 16, será feita a configuração do ambiente, a criação e o desenvolvimento de um
aplicativo que atenda o objetivo, conforme o Anexo 5.

3.1 – Geração de um aplicativo a partir de um arquivo codificado em

javascript.

Baseado nas tecnologias descritas nos capitulos anteriores foi proposta uma
solução para criação de aplicativos através de códigos escritos totalmente em javascript.
A execução da idéia consiste em pegar esse código e realizar a compilação dele
utilizando o React Native para geração de um aplicativo nativo que funcione em
qualquer dispositivo para qual a compitação foi feita. Se a escolha da geração for para
um dispositivo Android ou um dispositivo IOS assim o aplicativo será gerado.

14
 Figura 2.7 – Processo de criação da aplicação

Como exibido na Figura 2.7, no processo de geração do aplicativo pelo React

Native o código escrito em javascript é traduzido para o código nativo da plataforma
escolhida, e assim, gerado uma aplicação nativa.

3.2 – Utilizando CSS para estilizar o aplicativo

O React Native permite a utilização do CSS, não como um arquivo de

extensão .css mas em um arquivo JavaScript para estilizara aplicação. Como exemplo
será criado um arquivo chamado “Styles.js” na raiz do projeto. O arquivo deve importar
o componente StyleSheet do ReactJS, e será criado um estilo chamado “texto”.

Figura 2.8 – Exemplo de um arquivo Style.js

Após a criação deste arquivo, para carregá-lo e utilizar os estilos definidos nele.
Primeiro deve-se importá-lo no arquivo principal “index.android.js”. Ao importar,
define-se um nome de variável para ele e a partir desta variável “meusEstilos”, pode-se
acessar todos os estilos definidos neste arquivo como mostra a figura a seguir.

15
 Figura 2.9 – Exemplo de um arquivo JavaScript utilizando CSS

3.3 – Protótipo funcional

Foi realizada a criação de um protótipo com algumas funcionalidades. Na tela

inicial, são apresentados três botões: Múltipla escolha, Mapa e Carregando dados do
servidor como vemos na figura 3.0. A primeira funcionalidade é a de múltipla escolha,
onde são apresentadas algumas opções. De acordo com a opção selecionada, é exibida
uma a tela correspondente. Na segunda utilizando o plugin do Google Maps, permite-se
o usuário realizar uma navegação pelo mapa, e na terceira opção, permito ao usuário
realizar busca de filmes, em um servidor, utilizando o nome.

16
 Figura 3.0 – Tela inicial do protótipo

Selecionando a opção “Múltipla escolha” será exibido uma tela com opções, e
cada opção abrirá uma tela de acordo com o selecionado, assim como mostra a figura
3.1.

17
 Figura 3.1 – Tela de múltipla escolha do protótipo

Para cada opção, existe um método que redireciona para a tela escolhida. Por
exemplo, ao acionar o botão “Verão” é disparado o método que realiza o direcionamento
para outra tela. No Anexo 1 é apresentado o código fonte desta tela onde é gerado os
botões com as ações de abrir a tela escolhida.
Ao selecionar uma das opções da Múltipla escolha outra tela é aberta com a
opção escolhida. Na figura 3.2 abaixo, foi selecionado a opção “Verão” e a tela
correspondente foi aberta.

18
 Figura 3.2 – Tela com a opção “Verão” da escolhida do protótipo

A imagem é carregada no plano de fundo da tela de uma página web pelo link
http://mgturismo.com.br/wp-content/uploads/2016/01/verao-paraiso.jpg. No Anexo 2 é
detalhado o código fonte.
Voltando para tela principal do protótipo, tem-se o botão MAPA. Ao selecionar
essa opção é aberto uma tela para navegação de mapa utilizando o plugin do Google
Maps, conforme mostra na Figura 3.3.

19
 Figura 3.3 – Tela de navegação do mapa utilizando o plugin do Google Maps

No Anexo 3 temos o código fonte da tela do mapa onde foi incluído a tag
<MapView> para exibição do mapa na tela. Nela é carregada o mapa pela posição da
localização do usuário.
Na última opção do protótipo, foi criado uma interface para buscar filmes pelo
nome em um servidor, realizando uma requisição Ajax. Na figura 3.4 observa-se o
exemplo de funcionamento buscando filmes com o nome “Matrix”.

20
 Figura 3.4 – Pesquisa de filmes

Segue abaixo o código fonte da tela de buscar dados no servidor. Como

podemos ver no código abaixo, a lista de catálago de filmes é carregada via ajax do site
http://api.themoviedb.org/ , sempre que o botão Pesquisar é acionado.

3.4 – Deploy do protótipo

Após o desenvolvimento, é necessário realizar a criação do instalador do

aplicativo. Após a geração do APK, copie este instalador para um dispositivo Android e
execute-o. Ao executá-lo, será exibida uma mensagem de confirmação de instalação,
com a descrição de todas as funcionalidades que ele terá acesso. Para confirmar a
instalação, clique em INSTALAR como mostra a Figura 3.5.

21
Figura 3.5 – Instalação de aplicativo

22
Capítulo 4

Conclusão e Trabalhos Futuros

4.1 – Conclusão

O React Native é um framework muito útil, principalmente se o desenvolvedor

vem da área de front-end. Ele possibilita transformar desenvolvedores desta área em
potenciais desenvolvedores de aplicativos móveis. É claro, que por ser algo novo, ela
não possui alguns recursos, e melhores formas de organizar e programar ainda estão
sendo definidas. Por se tratar de um framework criado pelo Facebook e um aparente
uso crescente pela comunidade, essa lacuna será preenchida em breve. Sem dúvida, sua
grande vantagem é a possibilidade de que, com um único código, é possível criar
aplicativos para Android e iOS, sem comprometer a qualidade e o desempenho. Mesmo
que o programador não seja um desenvolvedor front-end e não tenha grandes
conhecimentos de JavaScript, se for iniciado um projeto para um aplicativo móvel hoje
em dia, este indivíduo deveria considerar seriamente o uso deste framework.

4.2 – Trabalhos Futuros

Sugere-se a utilização do NativeBase integrando ele com o React Native em

projetos para aplicações móbiles do React Native. O NativeBase é um framework open-
source que permite escrever aplicações do React Native de alto-nível com mais
facilidade e velocidade, reutilizando componentes genéricos como header, footer,
buttons, list, etc.
Pode ser feito também fazer um estudo comparativo com protótipos
desenvolvidos com JAVA para Android, com Swift para iOS e com o React Native para
ambas as plataformas. Analisar qual a diferença de velocidade de execução entre os
aplicativos gerados por eles.

23
Bibliografia

[1] CABRAL, C., “React Native: Construa aplicações móveis nativas com Javascript”,
https://tableless.com.br/react-native-construa-aplicacoes-moveis-nativas-com-
javascript/, 5 Abril 2016, (Acesso em 10 Dezembro 2016).

[2] KAY, D., “Getting Started with React Native on Ubuntu Linux”,
http://www.proreactnative.com/Getting-Started-with-React-Native-on-Ubuntu-Linux/, 3
Fevereiro 2016, (Acesso em 10 Dezembro 2016).

[3] GERMANO, L., “7 Razões para usar o React Native do Facebook”,

http://u.planb.com.br/blog/ti/7-razoes-pelas-quais-o-react-native-do-facebook-e-o-
futuro-do-desenvolvimento-hibrido-mobile/, 22 Fevereiro 2016, (Acesso em 10
Dezembro 2016).

[4] SILVA, G., “O que é e como funciona a linguagem Javascript?”,

https://canaltech.com.br/materia/internet/O-que-e-e-como-funciona-a-linguagem-
JavaScript/, 28 Janeiro 2015, (Acesso em 12 Dezembro 2016).

[5] PEREIRA, A., “O que é CSS?”, https://www.tecmundo.com.br/programacao/2705-

o-que-e-css-.htm, 09 Setembro 2009, (Acesso em 12 Dezembro 2016).

[6] PORTAL WEB DESIGNER., “Programação Web – O que é CSS”,

http://portalwebdesigner.com/programacao/css/, (Acesso em 12 Dezembro 2016).

[7] LYCAN, R., “Começando com o React.js”, https://rafaell-

lycan.com/2015/comecando-com-react/, 27 Outubro 2015, (Acesso em 12 Dezembro
2016).

[8] ANDERSON, C., “A Glimpse Into The Future With React Native For Web”,
https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-
native-for-web/, 8 Agosto 2016, (Acesso em 15 Dezembro 2016).

[9] EISENMAN, B., “Writing Cross-Platform Apps with React Native”,

https://www.infoq.com/articles/react-native-introduction, 25 Fevereiro 2016, (Acesso
em 15 Dezembro 2016).

[10] NAJAFIZADEH, A., https://github.com/alinz/react-native-updater, 2015, (Acesso

em 18 Dezembro 2016).

[11] HTML.net., “Lição 2: Como funciona CSS?”, http://pt-

br.html.net/tutorials/css/lesson2.php, (Acesso em 21 Dezembro 2016).

[12] FERREIRA, D., “React: JavaScript reativo”, https://tableless.com.br/react-

javascript-reativo/, 17 Setembro 2013, (Acesso em 21 Dezembro 2016).

24
[13] FERREIRA, D., “#1 - Começando com ReactJS”,
https://willianjusten.com.br/comecando-com-react/, 10 Julho 2015, (Acesso em 21
Dezembro 2016).

[14] UDANTHA, M., “React.JS and Virtual DOM”,

http://madhukaudantha.blogspot.com.br/2015/04/reactjs-and-virtual-dom.html, 8 Abril
2015, (Acesso em 21 Dezembro 2016).

[15] IDC, “Worldwide Smartphone Growth Expected to Slow to 10.4% in 2015, Down
From 27.5% Growth in 2014, According to IDC”, http://www.idc.com/getdoc.jsp?
containerId=prUS25860315, 25 Agosto 2015, (Acesso em 21 Dezembro 2016).

[16] Franklin, A, “Tenha o DOM”, https://tableless.com.br/tenha-o-dom/, 25 Julho

2011, (Acesso em 22 Março 2017).

[17] DEVFURIA, “O que você precisa saber sobre o DOM”,

http://www.devfuria.com.br/javascript/dom/, (Acesso em 23 Março 2017).

25
Anexo 1

Código fonte da Tela de Múltipla escolha

class PaginaMultiplaEscolha extends Component {

render() {
var navigator = this.props.navigator;
return (

<View style={{flex: 1,flexDirection: 'column'}}>

<View style={{flex: 5, alignItems: 'center',

justifyContent:'flex-start', backgroundColor: 'white'}}>

<Text style={style.textoTitulo}>
Multipla Escolha
</Text>

<Text>
Selecione uma das estações do ano abaixo:
</Text>

<View style={{flex: 3, alignItems: 'stretch',

justifyContent:'flex-start', backgroundColor: 'white'}}>
<Button onPress={() => { this.irParaOpcaoA() }}
title="Primavera" color="#32CD32" />
<Button onPress={() => { this.irParaOpcaoB() }}
title="Verão" color="#FF4500" />
<Button onPress={() => { this.irParaOpcaoC() }}
title="Outono" color="#DB7093" />
<Button onPress={() => { this.irParaOpcaoD() }}
title="Inverno" color="#4169E1" />
</View>

<Button onPress={() => navigator.pop()} title="Voltar"

color="#DC143C" accessibilityLabel="Pressione o botão para voltar" />

</View>

26
 </View>

);

irParaOpcaoA() {
this.props.navigator.push({
id: 'PaginaOpcaoA',
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
}
irParaOpcaoB() {
this.props.navigator.push({
id: 'PaginaOpcaoB',
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
}
irParaOpcaoC() {
this.props.navigator.push({
id: 'PaginaOpcaoC',
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
}
irParaOpcaoD() {
this.props.navigator.push({
id: 'PaginaOpcaoD',
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
}

27
Anexo 2

Código fonte da Tela escolhida na

Múltipla escolha
class PaginaOpcaoB extends Component {

render() {
var navigator = this.props.navigator;
return (

<View style={{flex: 1,flexDirection: 'column'}}>

<View style={{flex: 5, alignItems: 'center',

justifyContent:'flex-start', backgroundColor: 'white'}}>

<Text style={style.textoTitulo}>
Verão
</Text>

<View style={{flex: 1,flexDirection: 'row'}}>

<Image
style={{width: 520, height: 530}}
source={{uri: 'http://mgturismo.com.br/wp-
content/uploads/2016/01/verao-paraiso.jpg'}}
/>

</View>

<Button onPress={() => navigator.pop()} title="Voltar"

color="#DC143C" accessibilityLabel="Pressione o botão para voltar" />
<Text></Text>

</View>

28
 </View>

);
}
}

29
Anexo 3

Código fonte da Tela de navegação do

Google Maps
var { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 19.0760;
const LONGITUDE = 72.8777;
const LATITUDE_DELTA = 0.01;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class PaginaMapa extends Component {

constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
},
};
}

componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});

30
 },
(error) => alert(error.message),
{enableHighAccuracy: true, timeout: 20000, maximumAge:
1000}
);

this.watchID =
navigator.geolocation.watchPosition((position) => {
const newRegion = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.onRegionChange(newRegion);
});
}

componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}

onRegionChange(region) {
this.setState({ region });
}

render() {
var navigator = this.props.navigator;
return (

<View style={{flex: 1,flexDirection: 'column'}}>

<View style={{flex: 5, alignItems: 'center',

justifyContent:'flex-end', backgroundColor: 'white'}}>

<Text style={style.textoTitulo}>
Mapa
</Text>

<MapView
ref="map"

31
 mapType="terrain"
style={style.map}
region={this.state.region}
onRegionChange={this.onRegionChange}>

<MapView.Marker coordinate={{latitude:
this.state.region.latitude,
longitude: this.state.region.longitude}}
title={"title"}
description={"description"}>
</MapView.Marker>

</MapView>

<Button style={{}} onPress={() => navigator.pop()}

title="Voltar" color="#DC143C" accessibilityLabel="Pressione o botão
para voltar" />
<Text></Text>

</View>

</View>

);
}
}

32
Anexo 4

Código fonte da Tela de Carregar Filmes

via Ajax

class PaginaServidor extends Component {

constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({ rowHasChanged:
(row1, row2) => row1 !== row2, }),
loaded: false
};
}

componentDidMount() {
this.fetchData();
}

fetchData() {
var url = 'http://api.themoviedb.org/3/search/movie?
api_key=50821499b7f35e33dde8c426315ff6a9&query=';
var searchText=this.state.searchText;
if ( searchText != null ) {
url += searchText;
fetch(url)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource:
this.state.dataSource.cloneWithRows(responseData.results),
loaded: true
});
})
.done();

33
 }
}

render() {
var navigator = this.props.navigator;

return (

<View style={{flex: 1,flexDirection: 'column'}}>

<View style={{flex: 1, alignItems: 'center',

justifyContent:'flex-start', backgroundColor: 'white'}}>
<Text style={style.textoTitulo}>
Carregando dados do Servidor
</Text>
</View>

<View style={{flex: 2, flexDirection: 'column',

alignItems: 'center', justifyContent:'flex-start', backgroundColor:
'white'}}>

<TextInput
style={style.searchBar}
value={this.state.searchText}
onChangeText={(searchText) =>
this.setState({searchText})}
placeholder="Pesquisar Filme" />
<Text></Text>
<View style={{flex: .3,flexDirection: 'row'}}>
<Button onPress={() => this.fetchData()}
style={{borderWidth: 3, borderColor: 'red'}} title="Pesquisar"
color="#246dd5" accessibilityLabel="Pressione o botão para
pesquisar" />
<Button onPress={() => navigator.pop()}
title="Voltar" color="#DC143C" accessibilityLabel="Pressione o botão
para voltar" />
</View>
<Text></Text>
</View>

34
 <View style={{flex: 9, flexDirection: 'row',
alignItems: 'center', justifyContent:'flex-start', backgroundColor:
'white'}}>
<ListView dataSource={this.state.dataSource}
renderRow={this.renderMovie} style={styles.listView} />
</View>

</View>

);
}

renderMovie(movie) {
return (
<View style={styles.container}>
<Image source={{uri:
'https://image.tmdb.org/t/p/w500/'+movie.poster_path}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text
style={styles.year}>{movie.release_date}</Text>
</View>
</View>
);
}
}

35
Anexo 5

Instalação e Configuração do ambiente

Para a criação de um aplicativo Android utilizando o React Native, será utilizado
como sistema operacional o Ubuntu 16. Primeiramente deverá ser feita a configuração
do ambiente. Para isso será instalado, nesta ordem, o Java JDK, Android SDK, NodeJS,
NPM, Whatman, Flow e o React Native.

 Java JDK
- No terminal, insira o comando abaixo para instalar o Java JDK
sudo apt-get install openjdk-7-jdk

 Android SDK
- No terminal, digite o comando abaixo para baixar o Android SDK
wget https://dl.google.com/android/android-sdk_r23-linux.tgz
- Após baixar, descompacte-o
tar -xvf android-sdk_r23-linux.tgz
- Entre no diretório de ferramentas do Android SDK
cd android-sdk-linux/tools
- Inicie o Android SDK Manager para instalá-lo
./android
- Com o Android SDK Manager aberto:
Selecione na Pasta Tools o Android SDK Tools e o Android SDK Plataform-
Tools como mostra a Figura 3.6.

36
 Figura 3.6 – Selecionando Android SDK Tools para instalação do Android SDK.

Selecione também todos os itens da pasta Android 7.1.1 (API 25) como mostra a
figura 3.7.

Figura 3.7 – Selecionando Android 7.1.1 para instalação do Android SDK.

Ainda no Android SDK Manager, na pasta Extras, deverá ser instalado o

Android Suport Repository, como mostra a figura 3.8.

37
 Figura 3.8 – Selecionando Android 7.1.1 para instalação do Android SDK.

- Após instalado, deve-se configurar as varáveis de ambiente. No terminal digite:

sudo gedit ~/.bashrc
- Com o arquivo aberto, nas primeiras linhas coloque:
export ANDROID_HOME=~/android-sdk-linux
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

 NodeJS
- O Node.js é um interpretador de código JavaScript que funciona do lado do
servidor para instalar, em um termina digite os comandos abaixo:
sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

 NPM
- O NPM é um pacote de gerenciamento de códigos JS. Primeiro, digite o
comando which   npm em um terminal para verificar se sua distribuição de
Ubuntu já o tem. Se não tiver, será utilizado o comando abaixo para instalação:
curl http://npmjs.org/install.sh | sh

 Whatman

38
 - O Whatman é uma ferramenta desenvolvida pelo Facebook feita para observar
o log do sistema. Em um terminal, digite os comandos abaixo:
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.1.0
./autogen.sh
./configure
make
sudo make install

 Flow
- O Flow serve para análise estática de códigos JavaScript. Para instalar, digite
os comandos abaixo em um terminal:
wget
https://github.com/facebook/flow/releases/download/v0.37.4/flow-
linux64-v0.37.4.zip
unzip flow-linux64-v0.37.4.zip
cd flow
sudo mv flow /usr/local/bin/flow

 React Native
- Finalmente é realizada a instalação do React Native propriamente dito:
sudo npm install -g react-native-cli

Com o nosso ambiente de desenvolvimento configurado, é possível iniciar um

projeto de um aplicativo digitando o comando a seguir em um terminal:
react­native init MonografiaApp
Com isso, terá sido criado um projeto com o nome de MonografiaApp. Dentro
do projeto se encontra o arquivo index.android.js e o index.ios.js para começar o
desenvolvimento, como mostra a figura 3.9.

39
 Figura 3.9 – Estrutura de diretórios de novo projeto do React Native.

Antes de rodar o aplicativo, será configurado um dispositivo Android físico para

rodar o código. Primeiro, será necessário que o dispositivo Android, seja habilitado para
desenvolvimento. Para isso, neste dispositivo, vá em Opções > Sobre o telefone >
Número da versão. Pressione por algumas vezes na opção “Número da versão” até que
seu telefone seja habilitado para desenvolvedor. Depois vá em Opções > Opções do
desenvolvedor e habilite a opção “Permanecer ativo” e a opção “Depuração USB”.
Depois, com um cabo USB, conecte seu dispositivo Android, e no terminal
digite o comando “lsusb”. Será exibido a identificação do seu dispositivo, conforme
mostra a figura 4.0.

Figura 4.0 – Lista de dispositivos conectados no computador.

O dispositivo associado ao aparelho deste exemplo é:

Bus   002   Device   013:   ID   0fce:51bb   Sony   Ericsson   mobile
Communications AB

Terá que ser copiado a identificação deste dispositivo, que neste caso é “0fce”,
para adicionar esta identificação nas regras de dispositivos Android a serem utilizados
pelo ADB (Android Debug Bridge).

40
 Para isso em seu terminal digite o comando abaixo:
sudo vim /etc/udev/rules.d/51-android.rules
Com o arquivo aberto adicione a linha com a identificação do dispositivo.
SUBSYSTEM=="usb", ATTR{idVendor}=="0fce", MODE="0666",
GROUP="plugdev"
Para verificar que seu dispositivo está conectado ao ADB, utilize o comando
“adb devices” e verifique se ele foi encontrado, como mostrado na figura 4,1 abaixo.

Figura 4.1 – Verificar se dispositivo está conectado no computador.

Com tudo configurado corretamente, pode-se enfim rodar a aplicação. Em um

terminal, entre na pasta onde foi instalado seu projeto e inicie o Webserver do React
Native com os comandos abaixo.
cd ~/MonografiaApp
react-native start
Em outro terminal, entre na pasta do seu projeto e rode a aplicação para android.
cd ~/MonografiaApp
react-native run-android
Com isso sua aplicação irá rodar em seu dispositivo Android, como mostra a
figura 4.2.

41
 Figura 4.2 – Aplicação rodando no dispositivo android.

Para exibir o menu de opções de desenvolvimento do seu aplicativo, existem

duas maneiras. A primeira é executar o comando adb shell input keyevent 82 no
terminal ou sacudir o seu dispositivo Android. Com isso um menu com opções de
desenvolvimento será exibido.
O resultado de qualquer alteração no código, pode ser visto com muita facilidade
pressionando o botão de “Enable Hot Reloading” no menu de opções de
desenvolvimento do seu aplicativo. Ao fazer isso, é possível modificar o código do
aplicativo sem recompilar o próprio aplicativo. O código é carregado do servidor local
do React Native durante o desenvolvimento, e é empacotado no aplicativo com outros
recursos na versão apropriada. Com isso, é possível atualizar o seu aplicativo alterando
seu código sem que você tenha que reiniciar seu aplicativo. Na figura 4.3 observa-se o
diagrama de seqüência deste processo.

Figura 4.3 – Geração de um novo pacote [10]

Na figura 4.3, tudo começa quando o código Javascript é salvo. O React Native
solicita ao Webserver um novo pacote. O Webserver gera e salva um pacote novo,
atualizando para o desenvolvedor que o novo pacote será iniciado.

42