gerenciamento de texturas para aplicaÇÕes de … · dispositivos móveis, como flash, vibrador,...

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

DEDICATÓRIA

Dedico este trabalho os meus pais e a minha esposa que sempre me incentivavam eapoiaram 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.........................................................................................................................11.2 – Delimitação..............................................................................................................11.3 – Justificativa.............................................................................................................11.4 – Objetivos..................................................................................................................21.5 – Metodologia.............................................................................................................31.6 – Descrição.................................................................................................................3

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

2.1 – JavaScript................................................................................................................52.2 – CSS...........................................................................................................................62.3 – DOM........................................................................................................................72.4 – ReactJS....................................................................................................................92.5 – As plataformas móveis IOS e Android ...............................................................102.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..143.2 – Utilizando o CSS para estilizar o aplicativo.......................................................153.2 – Protótipo funcional...............................................................................................163.2 – Deploy do Protótipo..............................................................................................21

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

4.1 – Conclusão..............................................................................................................234.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

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

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(‘backgroundcolor’,’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

Region2015*

ShipmentVolumes

2015*MarketShare

2015*YoY

Growth

2019*ShipmentVolumes

2019*MarketShare

2019*YoY

Growth

5-YearCAGR

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%

WindowsPhone

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

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

http://api.themoviedb.org/

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/, 3Fevereiro 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 escolhaclass 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',


<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() {


id: 'PaginaOpcaoB',


});

}

irParaOpcaoC() {


id: 'PaginaOpcaoC',


});

}

irParaOpcaoD() {


id: 'PaginaOpcaoD',


});

}

}

27

Anexo 2

Código fonte da Tela escolhida na

Múltipla escolha

class PaginaOpcaoB extends Component {

render() {


return (





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 Mapsvar { 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,



}

});

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,



}

this.onRegionChange(newRegion);

});

}

componentWillUnmount() {

navigator.geolocation.clearWatch(this.watchID);

}

onRegionChange(region) {

this.setState({ region });

}

render() {


return (



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


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() {


return (





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

reactnative 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

gerenciamento de texturas para aplicaÇÕes de … · dispositivos móveis, como flash, vibrador,...

Documents