Dans le secteur privé 1

Desenvolveu-se a tela de login, de maneira semelhante à projetada (Figura 52), utilizando-se cores e a imagem de acordo com a identidade visual da empresa. O resultado é mostrado na Figura 23.

Figura 23 - Captura de tela da página de Login.

Conforme mostrado na Figura 23, há campos para a inserção de nome de usuário e senha; uma checkbox, para que o usuário permaneça logado; um botão principal para efetuar o login e dois botões do tipo link abaixo do botão principal, para as opções de recuperação de senha e de cadastro.

4.1.1.2 Tela de Cálculo do Trocador WOT

Ao conseguir realizar o login, o usuário do tipo especialista visualiza a tela mostrada na Figura 24. Para a construção dessa tela, baseou-se no projeto mostrado na Figura 54.

Figura 24 - Captura de tela da página do trocado WOT do usuário especialista.

Fonte: do Autor (2019).

Nota-se que a parte de conteúdo da tela divide-se em três colunas. Na primeira coluna, apresentam-se dois modos de visualização. O modelo mostrado na parte superior da primeira coluna é uma visualização 3D do componente (uma funcionalidade adicionada ao longo da execução do projeto), para que o usuário possa conferir a geometria do equipamento. O modelo na parte inferior da primeira coluna mostra a vista frontal do componente, com legenda que auxilia na identificação dos campos de preenchimento.

Abaixo do objeto 3D, colocou-se um botão do tipo link, disponível apenas na versão para telas com maior viewport, para que fosse possível

ampliar a visualização do objeto 3D, resultando na janela mostrada na Figura 25.

Figura 25 - Captura de tela da funcionalidade de visualização do objeto em 3D.

Fonte: do Autor (2019).

Na segunda coluna, pode-se inserir os parâmetros para os cálculos. Alguns deles devem ser inseridos com valores pré-estabelecidos, através de um menu de seleção, como mostrado na Figura 26.

Figura 26 - Captura de tela dos modos de inserção da ferramenta.

Fonte: do Autor (2019).

Os parâmetros numéricos devem ser inseridos digitando-se o valor no campo. Além disso, no campo de seleção mais à direita, pode-se selecionar a unidade daquele valor inserido, por exemplo, metros ou milímetros.

Além disso, ao se passar com o ponteiro do mouse, pelos parâmetros geométricos, mostra-se um círculo em destaque sobre a imagem do componente (Figura 27), com o intuito de facilitar o entendimento do usuário sobre qual parâmetro deve ser inserido naquele campo.

Figura 27 - Captura de tela do auxílio visual dos parâmetros.

Fonte: do Autor (2019).

Por fim, na terceira coluna mostram-se os resultados dos cálculos. Na parte superior, o usuário visualiza os principais resultados, podendo também alterar as unidades da visualização com os campos de seleção. Logo abaixo, plotam-se gráficos para a visualização de parâmetros dependentes do passo do cálculo.

Para salvar os resultados, ao se clicar no botão de salvar resultados (segundo, da esquerda para a direita), o aplicativo gera um arquivo no formato texto e disponibiliza-o para download, como mostrado na Figura 28, de acordo com o projeto da Figura 57. O arquivo gerado contém os parâmetros inseridos pelo usuário e os resultados.

Figura 28 - Captura de tela da função de salvamento de dados de cálculo.

Fonte: do Autor (2019).

Ao se clicar no terceiro botão da esquerda para a direita, pode-se também salvar os logs gerados pelo aplicativo. Mostram-se os logs na parte mais inferior da tela. Eles indicam no caso de algum erro ter acontecido por motivos comuns, como: falha de conexão, parâmetros inválidos e indisponibilidade de serviços. Além disso, disponibiliza-se status dos cálculos e pode-se mostrar informações sobre o método de cálculo utilizado (não se implementou essa funcionalidade).

Por fim, ao se clicar no quarto botão da esquerda para a direita, abre-se uma janela pop-up com uma tabela para inserção de dados do cálculo multiparamétrico. Nessa janela, pode-se inserir os mesmos parâmetros para até 10 configurações diferentes. Com base nisso, geram- se, por exemplo, 10 pontos de operação diferentes que podem ser comparados para escolher um dimensionamento ótimo para o componente. Mostra-se o projeto dessa janela na Figura 55 e o resultado do desenvolvimento na Figura 29.

Nota-se que o formato de inserção é bem simples e semelhante a algum software de edição de planilhas. Desse modo, caso o usuário tenha os seus parâmetros em uma tabela do Microsoft Excel ou do Google Sheets, por exemplo, pode-se simplesmente copiar os parâmetros e colar no aplicativo.

Figura 29 - Captura de tela do modo de inserção dos parâmetros para cálculo multiparamétrico.

Fonte: do Autor (2019).

Ao se clicar no botão de calcular, enviam-se os parâmetros para o solver no servidor e ele retorna os resultados para todas as diferentes combinações de parâmetros enviados. Um bloco em verde indica que a operação foi realizada com sucesso.

O formato de retorno é uma tabela semelhante à tabela de inserção de parâmetros. Então, pode-se copiar os dados e colar em alguma outra tabela, ou gerar um documento de texto de saída com esses novos valores. Para gerar o arquivo de texto, basta clicar-se no botão de salvamento. Mostra-se o projeto inicial da tela de resultados do cálculo mutiparamétrico na Figura 56. Pode-se ver a página desenvolvida na Figura 30.

A funcionalidade de cálculo multiparamétrico encontra-se disponível apenas para o aplicativo na versão para telas com maior viewport, uma vez que seu uso em um aplicativo móvel seria complicado, por conta da alta quantidade de dados em uma tela muito pequena e maior esforço no uso de funções de copiar e colar.

Figura 30 - Captura de tela do modo de visualização dos resultados do cálculo multiparamétrico.

Fonte: do Autor (2019).

4.1.1.3 Tela de Documentação

Por meio da tela de Documentação, o usuário pode aprender a usar a ferramenta e entender os cálculos envolvidos nela. Para usuários comuns da ferramenta, essa página se apresenta como um texto estático. Mostra-se o projeto dessa página na Figura 58. Como resultado do desenvolvimento, tem-se a página de documentação com formato similar a uma Wiki, como mostrado na Figura 31.

Figura 31 - Captura de tela da página de Documentação.

Fonte: do Autor (2019).

Para se alterar o conteúdo da página de Documentação, necessita- se logar no aplicativo como Administrador e escolher, no menu, a opção de documentação. Pode-se visualizar o projeto inicial da página de Documentação na Figura 59. Seguindo-se o projeto, construiu-se a página mostrada na Figura 32.

Na página de edição de documentação, o modo de inserção da documentação é na linguagem HTML. Caso o editor já possua familiaridade com a linguagem, pode-se inserir o código diretamente no campo à esquerda (Figura 32). Já, à direita, visualiza-se, instantaneamente, a maneira como a documentação aparecerá na tela de Documentação para os usuários comuns da ferramenta.

Porém, caso o editor não possua conhecimento sobre a linguagem HTML, adicionou-se um conjunto de botões na parte inferior da tela (abaixo do campo de edição), para auxiliá-lo na inserção da documentação. Por meio dos botões, o usuário pode inserir formatos de texto pré-definidos, como:

• Quatro níveis de texto: <h1>, <h3>, <h5> e <p>, para os títulos e subtítulos de textos e parágrafos;

• Quebra de linha, para separar parágrafos; • Linha divisória, para separar índices;

• Listagem de itens;

• Criar blocos de texto com linha ao redor (panel).

Figura 32 - Captura de tela da página de edição da Documentação.

Fonte: do Autor (2019).

4.1.1.4 Tela de Gerenciamento de Usuários

Desenvolveu-se, por último, a tela de gerenciamento de usuários. Ela serve para que o Administrador possa aprovar ou reprovar as solicitações de acesso à ferramenta, além de atribuir níveis de acesso aos usuários. Para isso, o projeto da Figura 60 previa a listagem de todos os usuários em uma tabela, possibilitando a seleção de múltiplos usuários para realização de uma mesma operação.

Mostra-se o resultado do desenvolvimento dessa tela na Figura 33. Diferentemente do projeto, fez-se uma tabela mais simples, apenas com a possibilidade de aprovação ou recusa da solicitação. Além disso, colocou- se um campo para filtro de busca de usuários, para o caso de múltiplos usuários estarem cadastrados na ferramenta.

Figura 33 - Captura de tela da página de gerenciamento de usuários.

Fonte: do Autor (2019). 4.1.2 Dispositivos Móveis

Apesar de não ser um requisito do projeto, pelo uso da biblioteca responsiva Bootstrap, a adaptação da parte visual do aplicativo WEB para dispositivos móveis agradou o cliente e facilitou os testes do aplicativo entre os envolvidos.

Visto que as funcionalidades do aplicativo já foram explicadas na seção 4.1.1, nesta seção apresentar-se-ão apenas as capturas de tela em celulares e tablets, de modo a evitar a repetição do conteúdo.

As capturas de tela foram realizadas utilizando-se o modo de visualização do navegador, mudando-se o dispositivo para um Samsung Galaxy S5, com tela de dimensões 360 x 640 pixels. Mostra-se, na Figura 34 (a) a parte superior da tela de dimensionamento dos trocadores de calor WOT. Nota-se que ela possui os mesmos componentes da tela da versão Desktop, mas empilhadas, de modo a caber em uma tela mais estreita. Visualiza-se, na Figura 34 (b), a parte de gráficos para o mesmo dispositivo.

Figura 34 - Capturas de tela da view de dimensionamento de trocadores WOT simuladas para um Samsung Galaxy S5.

(a) (b)

Fonte: do Autor (2019).

Simulou-se também, a tela de documentação para a versão móvel, mostrada na Figura 35 (a). Pela limitação de espaço, recolhe-se o menu superior do aplicativo e ele permanece oculto até que se clique no botão “hambúrguer” (com três linhas horizontais) que ativa a expansão do menu, como na Figura 35 (b).

Figura 35 - Capturas de telas de Documentação (a) e de expansão do menu (b), simuladas para um Samsung Galaxy S5.

(a) (b)

Fonte: do Autor (2019).

Além disso, simulou-se o uso para o modelo Ipad, com dimensões 1024 x 1366 pixels. Mostra-se, na Figura 36, a tela de Documentação capturada na simulação do Ipad.

Figura 36 - Captura de tela da página de Documentação, simulada para um Ipad.

5 CONCLUSÃO

Neste trabalho apresentou-se o processo de criação de um aplicativo WEB, passando-se pelas etapas iniciais de especificação do problema e modelagem do software, e posterior programação.

Tinha-se como objetivo inicial o desenvolvimento de um aplicativo que superasse as limitações da ferramenta já disponível, além de apresentar-se de maneira expansível para futuras funcionalidades. Com base nos resultados, pode-se afirmar que o objetivo geral do projeto foi alcançado com sucesso, tendo o projeto recebido bons feedbacks na sua entrega final.

Entretanto, não se cumpriram os dois últimos objetivos específicos, que dizem respeito à implementação do nível de acesso aos usuários e à hospedagem da ferramenta no servidor da empresa. Não se cumpriu o primeiro por questões de priorização de atividades por parte da empresa, que deu preferência para a realização de mudanças em outros aspectos do aplicativo. Já, o segundo não se cumpriu por conta da demora na aprovação de projeto do setor de TI (tecnologia da informação) da empresa, inviabilizando a hospedagem em primeiro momento.

A entrega do aplicativo agradou os responsáveis na empresa e resultou no interesse de outros que não estavam envolvidos, originalmente, no desenvolvimento da ferramenta. Com isso, após a entrega deste projeto, já se iniciou a expansão da ferramenta para implementação de novas funcionalidades.