DESENVOLVIMENTO DO FRONT-END 1 Situação Inicial

Como comentado anteriormente, dispunha-se de uma ferramenta semelhante para realizar dimensionamento de componentes de engenharia. Entre os problemas relatados, pela empresa com essa ferramenta, continham: o fato de ela não possuir um padrão de parâmetros e resultados utilizados pela empresa no dia-a-dia, inviabilizando o seu uso pelos colaboradores; e dificuldades de visualização dos dados, por conta do layout aplicado. A Figura 22 mostra uma captura de tela da ferramenta antiga, com os campos de inserção, resultados e métodos dos cálculos propositalmente borrados.

Em relação às dificuldades de visualização, citados pela empresa, nota-se, pela marcação 1, que os campos de inserção de parâmetros e de resultados não podem ser visualizados ao mesmo tempo, por limitações de espaço, visto que são muitos campos. Pelo mesmo motivo, a marcação 3 mostra que os gráficos também não podem ser visualizados lado a lado com os resultados ou com os parâmetros de entrada.

Já, a marcação 2 refere-se ao problema de quantidade de informação, sem a passagem de um filtro por elas, por conta da inexistência de diferentes níveis de acesso. Nesse quadro, mostra-se o método de cálculo utilizado pela ferramenta, que é uma informação irrelevante para alguns usuários da ferramenta.

Figura 22 - Captura de tela de um fragmento do aplicativo antigo.

Fonte: do Autor (2019).

Além disso, fez-se toda a renderização da interface no back-end, misturando-se a parte de código e a parte visual no mesmo arquivo, prejudicando a manutenibilidade da ferramenta e interpretação dos códigos. Outro aspecto negativo em relação a isso, é o efeito de “página branca”, enquanto a nova página é carregada, ao navegar pelo menu, por exemplo, como comentado na seção 2.2.1. Entende-se que a renderização no back-end pode possuir vantagens em outros tipos de projetos, nos quais não há atualização de dados com a mesma frequência.

Por conta disso, propôs-se a separação entre front-end e back-end, atribuindo-se ao primeiro a renderização (parte visual) e, ao segundo, a execução de requisições realizadas ao servidor (acesso à base de dados e cálculos), como uma API.

3.4.2 Estruturação do front-end

Dividir-se-á a estruturação do front-end em quatro partes: as ferramentas utilizadas para a construção do aplicativo, as linguagens, as bibliotecas e os frameworks escolhidos.

3.4.2.1 Estrutura mínima para o desenvolvimento

Para visualização do aplicativo WEB, ao longo do desenvolvimento, fez-se necessária a utilização de um servidor WEB. O ambiente do servidor foi um computador com sistema operacional Ubuntu 18.04 e o servidor Apache2. Como ambiente de desenvolvimento, utilizou-se o Sublime 3.

3.4.2.2 Linguagens

Para descrição da parte visual do front-end, utilizaram-se linguagens padrão para aplicativos e sites WEB: HTML e CSS. A primeira, para a descrição dos elementos que apareceriam na interface; e a segunda, para customização desses elementos.

Os principais elementos em HTML utilizados foram: <table> e derivados, para a construção de tabelas de entrada do usuário e de resultados; <input>, para inserção de dados por parte do usuário; <div>, para divisão de seções na página; e <button>, para descrever botões utilizáveis pelo usuário.

Utilizou-se a linguagem CSS para personalização dos elementos em HTML. Desse modo, tendo em vista os requisitos visuais do projeto, as propriedades mais utilizadas foram as de alteração de cor dos campos, das bordas, e das fontes; preenchimento e margem, para melhor distribuição e posicionamento dos elementos; e propriedades dinâmicas, para criar destaque, por exemplo, quando um usuário passa o mouse sobre um botão.

Já, para implementação de funções mais complexas à interface, utilizou-se a linguagem JavaScript. Com isso, foi possível chamar funções quando algum evento é disparado, por exemplo. No aplicativo, programaram-se as funções em JavaScript para: gerar animações de auxílio ao uso do aplicativo, utilizar pop-ups para inserção de dados e conectar-se com o back-end através de requisições HTTP.

3.4.2.3 Bibliotecas e Frameworks

As bibliotecas foram essenciais para acelerar o processo de desenvolvimento do aplicativo, dada a possibilidade de reuso de código já desenvolvido. Para o front-end desse aplicativo, utilizaram-se bibliotecas em CSS e Javascript.

A principal biblioteca de CSS utilizada foi o Bootstrap, com o intuito de tornar a interface responsiva, para diferentes tamanhos de tela, através da utilização de sistema de grids. Além disso, essa biblioteca proporcionou o uso de diversos componentes predefinidos, facilitando o processo de criação da interface.

Em JavaScript, utilizou-se a biblioteca Chart.js para a plotagem dos gráficos; a biblioteca Handsontable, para utilização de planilhas de inserção de dados por células; e a biblioteca de JavaScript do Bootstrap, para efeitos e animações que não seriam possíveis apenas com a biblioteca de CSS.

Para a criação de um aplicativo WEB com experiência similar a um aplicativo equivalente em Desktop (SPA), utilizou-se o framework de JavaScript AngularJS. Com isso, foi possível atribuir controladores (controllers) para cada página, de modo a controlar os dados delas; filtros (filters), para formatação de dados; diretivas (directives), para a extensão de templates em HTML; e serviços (services), para execução de diversas funções na aplicação.

Como previamente comentado, utilizou-se um controlador por página, para realizar operações sobre os dados. Qualquer alteração em alguma variável realizada pelo controlador é vista imediatamente na interface, e vice-e-versa, devido ao mecanismo de two-way data binding. Utilizaram-se filtros para ordenação de dados em tabelas. Não se criaram diretivas para este projeto, pois não se viu necessidade para tal.

Por outro lado, utilizaram-se amplamente os serviços na construção do aplicativo. Os principais serviços utilizados do AngularJS foram: $http, relacionado a requisições HTTP para o servidor; $location, relacionado à localização das páginas; $window, relacionado à janela do navegador; e $sanitize, relacionado à remoção de tags potencialmente perigosas ao aplicativo.

3.5 DESENVOLVIMENTO DO BACK-END