Baixe React Native: Construindo Aplicações Móveis Nativas com JavaScript e outras Notas de aula em PDF para Linguagem de Programação, somente na Docsity!
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
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
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
Lista de Tabelas
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
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
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
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
