Prévia do material em texto
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 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 umalinguagem 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 Region 2015* Shipment Volumes 2015* Market Share 2015* YoY Growth 2019* Shipment Volumes 2019* Market Share 2019* YoY Growth 5-Year CAGR 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 Phone 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 queseja 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 buscarfilmes 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/, 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: 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 Capítulo 1 Introdução 1.1 – Tema 1.2 – Delimitação 1.3 – Justificativa 1.4 – Objetivos 1.5 – Metodologia 1.6 – Descrição Capítulo 2 Fundamentação Teórica 2.1 – JavaScript 2.2 – CSS 2.3 – DOM 2.6 – React Native Capítulo 3 Propostas Tecnológicas 3.1 – Geração de um aplicativo a partir de um arquivo codificado em javascript. 3.2 – Utilizando CSS para estilizar o aplicativo 3.3 – Protótipo funcional Capítulo 4 Conclusão e Trabalhos Futuros 4.1 – Conclusão 4.2 – Trabalhos Futuros Bibliografia Anexo 1 Código fonte da Tela de Múltipla escolha Anexo 2 Código fonte da Tela escolhida na Múltipla escolha Anexo 3 Código fonte da Tela de navegação do Google Maps Anexo 4 Código fonte da Tela de Carregar Filmes via Ajax Anexo 5 Instalação e Configuração do ambiente