Relatório de Estágio

Victor Lamounier Bittencourt∗

2018, 1 de julho

Resumo

Este documento tem por objetivo registrar as informações relevantes referentes ao

período de estágio realizado pelo autor na empresa WayCarbon. Todos os elementos
do processo vão de acordo à disciplina de estágio supervisionado como ofertada e
ministrada aos alunos do curso Engenharia de Controle e Automação, às normas da
UFMG para este fim e à Lei no 11.788, de 25 de Setembro de 2008. Faz-se registro
de todos os itens requeridos pelo ministrador da disciplina, Professor Walmir Matos
Caminhos, além de todos elementos julgados relevantes pelo autor para a boa compre-
ensão do trabalho realizado e do engrandecimento pessoal e profissional vividos dentro
da empresa.

Aluno: Victor Lamounier Bittencourt

Supervisor: Breno Rates Azevedo
Professor Orientador: Luiz Themystokliz Sanctos Mendes
Empresa: WayCarbon Soluções Ambientais e Projetos de Carbono Ltda.
Período de Realização: 26/09/2017 a 25/09/2018

∗
victorlbitten@gmail.com

1
 Sumário

Sumário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1 Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Descrição da empresa e do setor de trabalho . . . . . . . . . . . . . . . . . . 4
2.1 História da empresa e do Climas . . . . . . . . . . . . . . . . . . . . 4
2.2 Atuação da WayCarbon . . . . . . . . . . . . . . . . . . . . . . . . . 4
3 Descrição das atividades realizadas . . . . . . . . . . . . . . . . . . . . . . . 5
3.1 Arquitetura do Climas . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2 Ferramentas utilizadas . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.1 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.2 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.3 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2.4 CakePHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2.5 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2.6 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2.7 HTML 5, CSS 3 e JavaScript . . . . . . . . . . . . . . . . . 9
3.3 Refatoração da página de ações . . . . . . . . . . . . . . . . . . . . . 9
3.4 Refatoração do modal de ações . . . . . . . . . . . . . . . . . . . . . 11
3.5 Refatoração da página de login . . . . . . . . . . . . . . . . . . . . . 13
3.6 Tarefas gerais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.6.1 Árvores de hierarquias . . . . . . . . . . . . . . . . . . . . . 14
3.6.2 Organogramas . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.6.3 Detalhes de questões . . . . . . . . . . . . . . . . . . . . . . 15
3.6.4 Usuários desativados . . . . . . . . . . . . . . . . . . . . . . 15
4 Contribuição do estágio para formação acadêmica e profissional . . . . . . . 16
5 Conclusão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1 Introdução
O processo de estágio é prática comum há vários séculos nas instituições de ensino,
servindo ao fim de melhor preparar os aspirantes à profissão em questão, garantindo que
profissionais já habituados àquele labor passem adiante os conhecimentos práticos obtidos
ao longo dos anos. A definição inicial retirada do site Wikipédia lê "A função do estágio é
oferecer, aos aprendizes, o conhecimento prático das funções profissionais. Ele possibilita,
aos estudantes, um contato empírico com as matérias teóricas que lhes são passadas em
sala de aula. Trata-se do entendimento, hoje consolidado pelos educadores, de que a teoria,
sem a prática, é incompleta, prejudicando o acesso imediato ao mercado de trabalho. O
estágio visa a superar este problema"(ESTÁGIO. . . , 2018). Seguindo este conceito e com
a intenção de formar profissionais aptos a atuar bem, a Universidade Federal de Minas
Gerais requer que seus estudantes passem por um período de estágio como pré-requisito
para sua formatura.
No âmbito da Engenharia de Controle e Automação, o estágio apresenta aos alunos
uma oportunidade única de vivenciar os conceitos absorvidos na academia. Isso se dá pelo
fato de esta engenharia possuir uma ampla gama de possibilidades, variando em campos
de atuação diversos, como eletrônica, desenvolvimento de softwares para fins web e outros,
controle e automação industrial, instrumentação industrial e mais. Desta forma, durante o
período de estágio, o aluno é convidado a perceber as especificidades de uma das áreas de
atuação e entender as nuances da relação existente entre elas.
O estágio aqui descrito foi realizado na empresa WayCarbon, uma das líderes em
consultoria estratégica e soluções tecnológicas para mercados de baixo carbono e controle
de sustentabilidade. Sediada no Parque Tecnológico BH-Tech, a empresa viu o mercado
de créditos de carbono, sua principal fonte de renda até 2014, atingir seu apogeu e entrar
em processo de queda. Os diretores, vendo que o mercado já não apresentava o potencial
antes presente, reinventaram a forma de prestar os serviços de consultoria ambiental e
prestaram-se à vanguarda de transformar esses serviços em softwares web, visando um
produto de confiabilidade e disponibilidade altas, além de extremamente versátil e flexível,
capaz de ser empregado com eficiência por diferentes empresas atuando em diferentes áreas.
Antes chamado eClimas, o software atingiu a versão 1.8 e transformou-se no
carro-chefe nos lucros da empresa. Agora em sua segunda versão e renomeado para
Climas, o produto visa corrigir as deficiências de seu predecessor e introduzir novos
conceitos de gerência ambiental aos clientes. O autor atuou, em seu período de estágio,
no desenvolvimento deste programa, que tem suas funcionalidades e funcionamento geral
descritos ao longo do relatório.

3
2 Descrição da empresa e do setor de trabalho
2.1 História da empresa e do Climas
A WayCarbon começa a atuar em 2006, quando quatro alunos da UFMG se propõe
a prestar serviços de consultoria ambiental. Após alguns anos atuando nessa área, percebem
a oportunidade de trabalhar com créditos de carbono, mercado bastante lucrativo até
meados de 2013.
Quando o mercado de créditos de carbono entra em declínio, os diretores decidem-se
por inovar e orientar a prestação de seus serviços a softwares, dando início à produção do
eClimas, produto que oferecia às empresas contratantes funcionalidades de gerenciamento
do impacto ambiental. Além disso, o software permitia que os clientes organizassem
o aparato empresarial para obtenção de certificados internacionais de responsabilidade
ambiental.
À medida que o eClimas se tornava um produto de sucesso, várias vulnerabilidades
e oportunidades de otimização foram identificadas. A partir desse ponto o diretor de
inovação tecnológica da WayCarbon, Breno Rates, decide-se por buscar consultoria com
outras empresas para a construção da versão 2.0 do software. Assim surge o novo produto,
renomeado para Climas, que está ainda em desenvolvimento e foi o principal alvo dos
trabalhos realizados pelo autor em seu período de estágio.

2.2 Atuação da WayCarbon

A WayCarbon oferece diferentes produtos e serviços no campo de eco-eficiência,
gerência de resíduos ambientais e licenciamento ambiental. Grande parte de seus serviços é
oferecida através do Climas, que permite que as empresas gerenciam seus resíduos, impacto
ambiental, organizem seus funcionários e sua produção para obtenção de certificados
internacionais de responsabilidade ambiental e ajustem parâmetros de eficiência ambiental
da produção.
Além da solução digital, há a abordagem de consultoria ambiental e avaliação de
impacto por parte dos especialistas da empresa. Há uma equipe destinada a realização de
licenciamento ambiental, que conta com um grupo de estudo de viabilidade de desenvolvi-
mento de softwares nessa área, hoje em estado de testes no produto LicenTIa.
O objetivo final dos trabalhos da WayCarbon é identificar as falhas e maiores
impactos gerados pelas empresas contratantes e propor soluções eficientes e viáveis econo-
micamente.

4
3 Descrição das atividades realizadas
O estagiário atuou como parte de uma equipe de oito pessoas no desenvolvimento
do software web Climas. Durante o período de estágio desenvolveu-se rapidamente afinidade
com o frontend e o web design, áreas que tem como objetivo propor a forma como o usuário
irá interagir com o produto, suas ferramentas e dados. Grande parte do tempo de trabalho
foi gasto nestas áreas, mas trabalhos com o backend também foram realizados.
A seguir, uma breve descrição da estrutura do Climas é feita.

3.1 Arquitetura do Climas

O climas utiliza dois bancos de dados: MongoDB e MySQL, sendo este relacional e
aquele não-relacional. Apesar de haver diferenças claras entre as características fundamen-
tais dos dados armazenados em cada um dos bancos, a escolha pela utilização de um banco
não-relacional dentro do projeto parece ter sido um erro, e acarretou diversos problemas
com os quais a equipe teve de lidar neste período.
O gerenciamento backend do MySQL é feito através da linguagem PHP, encapsu-
lada no framework CakePHP. Esta escolha também provou-se extremamente inapropriada
por uma série de fatores, a saber: 1) o ORM(Object-relational mapping) fornecido
pelo framework é confuso e mal documentado, atendo-se longamente à descrição de par-
tes irrelevantes ou de fácil compreensão e evitando explanações longas das partes mais
complicadas de seu funcionamento. Esta característica dificulta o trabalho em alto nível e
torna o processo de manipulação do banco de dados um processo longo e tortuoso, baseado
muitas vezes em tentativa e erro e 2) a comunidade de programadores que trabalha com o
CakePHP é reduzida quando comparada àquela de outros frameworks disponíveis, como o
Laravel, ferramenta mais utilizada para este fim. Desta forma, buscar ajuda online sobre
como executar algumas tarefas é complicado e demorado, muitas vezes não retornando
resposta clara à busca.
O gerenciamento backend dos dados presentes no MongoDB é realizado através
do pacote Mongoose, do Node.js. Apesar de tanto o pacote quanto a ferramenta serem
apropriadas para este fim e fáceis de trabalhar, a escolha de banco não relacional para os
dados ali armazenados não foi totalmente acertada, dificultando o processo de gerência dos
dados.
Para o frontend, a escolha feita pela equipe foi o AngularJS 1.56, ferramenta da
Google que utiliza JavaScript. Apesar de já ultrapassada(existe framework inteiramente
novo oferecido pela Google, Angular), esta ferramenta é extremamente poderosa e facilita
a implementação das páginas e integração com o backend.

5
3.2 Ferramentas utilizadas
3.2.1 MySQL

O MySQL é uma ferramenta SGDB(Sistema de Gerenciamento de Bancos de

Dados) por uma equipe mista de suecos e finlandeses. Utiliza a linguagem SQL como
interface para criar, estruturar e gerenciar bancos de dados relacionais, que se conectam
através de chaves estrangeiras em suas diversas tabelas. A linguagem SQL possui forte
embasamento matemático na teoria relacional e o SGDB permite, desde que o banco de
dados seja bem planejado e bem estruturado, consultas extremamente rápidas em conjuntos
de dados de larga escala. Grandes empresas, como NASA, Motorola e Texas Instruments,
utilizam a ferramenta para gerência de dados em missões críticas.
É utilizado dentro do Climas para armazenar a maior parte das informações, como
dados dos usuários e das empresas.

Figura 1 – Logo do banco de dados MySQL

3.2.2 MongoDB

Diferente do MySQL, o MongoDB é uma ferramenta NoSQL, e não utiliza esquema

relacional para armazenamento e organização dos dados. Ao invés disso, utiliza esquemas
de documentos e coleções livres e independentes, estruturados em formato semelhante
ao JSON(JavaScript Object Notation). Através desta proposta, o MongoDB permite
organização mais natural de arquivos, e apresenta tempo de busca extremamente baixo. A
escolha entre uma estrutura relacional ou uma estrutura não relacional depende fortemente
do modelo dos dados que se deseja armazenar, não sendo feita simplesmente baseando-se
em afinidade pelas ferramentas.
No Climas, o MongoDB é utilizado para armazenar informações referentes às
ferramentas de painéis, funcionalidade oferecida pelo software.

6
 Figura 2 – Logo do banco de dados MongoDB

3.2.3 PHP

O PHP é uma linguagem livre largamente utilizada no lado do servidor das

aplicações, capaz de gerar conteúdo dinâmico para as páginas web. Figura entre as primeiras
linguagens a se poder inserir em documentos HTML, além de apresentar grande facilidade
para integração com a linguagem SQL. Por estes motivos, grande parte da comunidade de
desenvolvedores web começaram a utilizá-la, tornando-a o grande nome que é nos dias de
hoje. Apesar de já haver diversas outras linguagens que oferecem tudo que o PHP tem,
ainda há uma forte cultura em torno dela.
No âmbito do Climas, a linguagem é utilizada em conjunto com o framework
CakePHP para implementar as rotas do backend e os modelos e interações com o banco de
dados relacional, MySQL.

Figura 3 – Logo da linguagem PHP

3.2.4 CakePHP

Framework que utiliza a linguagem PHP para fornecer modelo rápido de trabalho
sem comprometer a flexibilidade. Utiliza esquema MVC(Model-View-Controller) para
organização de arquivos e arcabouço de comunicação e estruturação de projetos. É possível
criar modelos para o banco de dados e estender a abstração inicial de controlador. Permite
que partes repetitivas do código sejam armazenadas em componentes para agilizar a
produção. Oferece ORM para interação com o banco de dados.
Dentro do Climas, o CakePHP é utilizado como framework backend para gerencia-
mento do banco relacional, MySQL.

7
 Figura 4 – Logo do framework CakePHP

3.2.5 Node.js

O Node.js é um interpretador de código JavaScript que permite utilizar a linguagem

no lado do servidor. É muito utilizado em aplicações que necessitam de alta escalabilidade
nas conexões, facilitando a produção de códigos que lidam com dezenas de milhares de
conexões em uma única máquina física. Um ponto bastante forte de utilizar o Node.js é o
NPM (Node Package Manager), repositório para pacotes para a ferramenta que implementa
arcabouço colaborativo, permitindo à comunidade fazer uploads e downloads de pacotes,
agilizando a produção.
No âmbito do Climas, é utilizado para implementar backend de comunicação com
o MongoDB.

Figura 5 – Logo do interpretador JavaScript Node.js

3.2.6 AngularJS

AngularJS é um framework frontend mantido pela Google que tem como objetivo
facilitar a produção de SPA(Single Page Applications). Utiliza estrutura MVVM(model-
view-view-model) e pode ser visto como extensão às tags HTML para interação entre
as views e os modelos. Permite criação de diretivas, blocos de códigos de escopo próprio
que podem ser incluídos em quaisquer partes do código para evitar repetibilidade na
implementação.(ANGULARJS, 2018)
No escopo do Climas é utilizado como framework frotend para gerenciamento das
páginas, fazendo integração com o CakePHP e permitindo comportamento dinâmico à
aplicação.

8
 Figura 6 – Logo do framework AngularJS

3.2.7 HTML 5, CSS 3 e JavaScript

HTML, CSS e JavaScript são a tríade básica para construção de páginas web
dinâmicas. HTML é a markup language que descreve o conteúdo a ser inserido na página,
bem como características básicas do posicionamento dos elementos. Disponibiliza diversas
tags para inserção do conteúdo. CSS, ou Cascade Style Sheet, é a folha de estilos a ser
aplicada aos elementos HTML. Permite estilização ampla dos elementos. JavaScript é a
linguagem de programação utilizada para dar dinamismo à página, e pode ser utilizada
para integração com o backend.

Figura 7 – Legenda

3.3 Refatoração da página de ações

A página de ações é utilizada para que o gestor de um relatório possa atribuir
tarefas aos funcionários da empresa relacionados ao relatório. A intenção da página era
apresentar proposta semelhante àquela do Trello, onde o usuário tem à sua disposição
diversas lanes que podem ser utilizadas para organização lógica dos cartões. No caso da tela
de ações, há quatro lanes: liberado, executando, executado e aceito. Além disso, existem
tabs que organizam as questões segundo o tipo ao qual pertencem(questões ambientais,
governança corporativa, etc).
Outro requisito era que o usuário fosse capaz de arrastar os cartões entre as lanes e
modificar a ordem em que aparecem, alterando, assim, sua prioridade: os cartões possuem
prioridade descendente. Para implementar essa funcionalidade foi necessário adicionar uma
coluna à tabela no banco de dados MySQL que armazena os cartões para que armazenasse
também sua prioridade. Uma dificuldade encontrada nesta parte do projeto - e que se
repete constantemente - foi a má definição das rotas no backend. Além de o sistema não ser
stateless, forte impedimento a seu escalamento horizontal, as rotas não são implementadas

9
de forma a manipular informações atomicamente.É trabalho constante na empresa ter de
escrever rotas quase idênticas às já existentes, com apenas pequenas modificações, para se
manipular as informações desejadas. Quase um mês de trabalho foi gasto nesta refatoração
para modificar as rotas e separá-las, de forma a não onerar o servidor em manipulações
desnecessárias.
Depois que as rotas estavam refatoradas, o trabalho de refatoração na dinâmica e no
estilo geral da página foi iniciado. Na versão anterior da página, o usuário era bombardeado
com uma quantidade imensa de informações, dificultando o entendimento do conteúdo
exibido. As cores utilizadas possuíam contraste agressivo e serviam pouco à função de
informar ao usuário o que os elementos significavam. O plugin utilizado para implementar
o drag de cartões era pouco responsivo, mal documentado e apresentava bugs constantes.
A responsividade da tela era mal implementada, punindo usuários que utilizassem telas
muito grandes ou muito pequenas. A saber: telas com largura superior a 1680px ou inferior
a 1280px faziam com que as lanes se sobrepusessem. Outro mês de trabalho foi gasto
para corrigir todos esses problemas, e a versão final da tela é como exibido na Figura 8.
Como pode ser visto na Figura 8, a página oferece funcionalidade para adicionar nova ação,

Figura 8 – Versão final da tela de ações

reservada somente àqueles com status de supervisão do relatório em questão, e exportação

das ações para planilhas Excel. Ambas funcionalidades estão no canto superior direito,
nos botões Adicionar e Exportar. As abas Ambiental-C, Governança Corporativa, etc, são
utilizadas para organização dos cartões. A caixa de pesquisa possui substring search e
responde a diversas pesquisas diferentes, como nome dos usuários relacionados aos cartões,
nome e número do cartão, data de entrega e código da pergunta associada ao cartão.
Em cada cartão deve constar seu título, data de entrega, código da questão a

10
ele associada, progressão da checklist ligada ao cartão, bem como avatar dos usuários a
ele relacionados. As datas de entrega podem ser coloridas de três formas: fundo branco
significa que existe ao menos 48h até o vencimento da deadline, fundo amarelo significa que
existe entre 0h e 48h até o vencimento da deadline, e fundo rosa significa que a deadline
já expirou. As checklists possuem formato completo/total, e devem possuir fundo verde
quando todas as tarefas foram finalizadas. O avatar dos usuários exibe a foto do perfil do
usuário no caso de ela existir, ou exibe as iniciais do nome do usuário no caso de ele não
possuir foto.
Toda a gerência das ações(adição, remoção, associação de usuários, pergunta
associada, checklists, etc) é feita através do modal de ações, que é aberto quando o usuário
adiciona nova ação ou clica em um cartão já existente. O modal também foi refatorado, e
este processo é descrito na seção seguinte.

3.4 Refatoração do modal de ações

O modal de ações é a ferramenta utilizada para gerenciamento de um cartão. O
usuário pode acessá-lo quando adiciona uma nova ação ao relatório ou quando clica em
uma ação já existente. O modal foi completamente refatorado visual e dinamicamente para
que apresentasse modelo comum ao proposto em outras partes do sistema, além de ter
recebido novas funcionalidades.
O cabeçalho do modal exibe informações básicas a seu respeito, como o nome
do relatório ao qual o cartão está associado. As abas Detalhes, Comentários e Lista de
Tarefas apresentam as funcionalidades do modal. Em Lista de Tarefas, o usuário pode
propor tarefas que representem o passo-a-passo a se seguir para realização da ação, e em
Comentários os usuários associados ao cartão podem discutir detalhes sobre o progresso
da ação.
A aba Detalhes é a que fornece as funções essenciais para o cartão. Aqui, é possível
alterar o nome a ser exibido no cartão na tela de ações, adicionar tags para facilitar a
organização dos cartões e informar a deadline da ação. É possível também dizer a qual
questão do relatório aquela ação está associada, bem como utilizar o botão Ir para questão
para se direcionar à página de detalhes daquela questão. A caixa de descrição foi melhorada
grandemente ao receber editor Summernote, permitindo que o usuário edite o texto de
descrição com flexibilidade. A Figura 9 mostra a versão final do modal de ações.

11
 Figura 9 – Versão final do modal de ações

Entre todas as modificações feitas no modal de ações, a que tomou mais tempo e
apresentou mais desafios foi a ferramenta de adicionar e remover usuários. Essas dificuldades
se apresentaram em diferentes frentes, a saber: 1) em caráter lógico, uma vez que a lista não
deve exibir todos os funcionários da corporação, mas apenas aqueles que possuam perfis
com determinadas características. Apesar de a lógica com os perfis não ser complexa, a
obtenção desses perfis no banco de dados foi bastante desafiadora de se implementar devido
a erros de normalização das tabelas quando de sua concepção. 2) Foi necessário recriar
a forma como os usuários já adicionados eram exibidos, pois a lista não era responsiva
nem flexível e se comportava mal em telas pequenas. A solução adotada aqui - e também
adotada em diversas outras partes da aplicação posteriormente - foi a tecnologia Flexbox
fornecida pela equipe do CSS. Esta forma de se declarar estilos permite que o caráter
responsivo dos elementos HTML sejam descritos de forma matemática, em relação ao
tamanho da tela utilizada. Desta forma, é possível dispor os itens nativamente flexíveis
e responsivos, quando muitos avatares devem ser exibidos, uma nova linha é adicionada
abaixo da já existente. 3) A caixa de adição de usuários utilizava um plugin dropdown
que não era responsivo, vazava à tela quando listas extensas eram exibidas e forçava o
escopo da caixa de pesquisa no escopo da lista, impedindo o usuário de acessar a pesquisa
enquanto navegava pela lista. Como o plugin era mal documentado, realidade comum em
aplicações pequenas como estas, depois de dois dias de pesquisa sobre como resolver esses
problemas, decidiu-se por recriar completamente a caixa de gerenciamento de usuários.
Desta forma, o estilo da caixa foi adaptado para condizer com o estilo geral do Climas, sua
altura foi limitada através de percentual da altura da tela utilizada, impedindo que a lista
vazasse à tela e scroll estilizado foi adicionado. Um identificador de usuários selecionados
foi criado na forma de um V verde. A cor dos nomes de usuários foi modificada para ser

12
igual à cor da identidade visual do produto, e possui efeito on hover para que o usuário
identifique em que ponto da lista se encontra. A versão final da caixa de gerenciamento de
usuários pode ser conferida na Figura 10.

Figura 10 – Detalhe da ferramenta de adição de usuários no modal de ações

3.5 Refatoração da página de login

As telas de login são de extrema importância para a experiência do usuário com as
aplicações por serem o primeiro contato que tem com elas. Uma tela que possui proposta
atraente e intuitiva, quando bem executada, passa ao usuário impressão inicial positiva da
aplicação, enquanto uma tela não responsiva, confusa, com paletas agressivas pode gerar
má impressão no usuário.
A tela de login do Climas se encaixava mais na segunda descrição do que na
primeira, e uma refatoração completa foi proposta. Apesar de suas funcionalidades terem
permanecido inalteradas, o visual da tela foi recriado em uma proposta mais simplificada e
intuitiva, como pode ser visto na Figura 11.

Figura 11 – Versão final da página de login

13
 A tela anterior possuía diversos problemas para a experiência do usuário: os botões
para login com contas de terceiros(Google e Microsoft) não eram posicionados perto do
botão de login com conta Climas, dificultando o entendimento do usuário sobre como
executar a operação. Além disso, esses botões não seguiam os padrões requeridos pelas
empresas que oferecem o serviço, utilizando cor leve que não contrastava com o fundo
azul da página, e fazia com que não parecessem botões. A tela não era responsiva -
problema presente na maioria das telas da aplicação - funcionando bem somente para
alguns tamanhos.
A proposta da nova tela é construída em torno de uma caixa branca composta por
duas partes básicas: login com conta Climas e login com contas de terceiros, em proporção
3:2, dividas por um separador vertical que possui cor da identidade visual da empresa. O
roda-pé da caixa apresenta opção de seleção de idioma, que atualmente conta com três
opções: Português, Inglês e Espanhol.
Para que a tela fosse responsiva e mantivesse o comportamento esperado à medida
que as proporções da tela fossem alteadas, lançou-se mão novamente do Flexbox da
CSS. Todos os elementos tem suas proporções definidas em relação às proporções da tela,
mantendo sempre o mesmo aspecto. Os botões de login com contas de terceiros foram
recriados para possuírem formato e cor que seguisse o estilo proposto pelas empresas que
fornecem o serviço.

3.6 Tarefas gerais

A rotina de trabalho dentro da empresa gira constantemente em torno de correções
de bugs e refatoração de partes do sistema para melhoria da eficiência do produto, e são
difíceis de categorizar como foi feito nas três seções anteriores. Este seção dedica-se a
descrever o ciclo básico de trabalho que tomou a maior parte do tempo do período de
estágio.
Como já descrito anteriormente, existe um problema estrutural e uma dívida téc-
nica imensos no projeto do Climas, o que torna o trabalho lento. Muitos problemas que à
primeira vista parecem pequenos, como um estado de tela que não é salvo corretamente,
depois de investigação cuidadosa acaba se mostrando uma grande falha de projeto. A
partir do momento que a falha é descoberta, outro trabalho investigativo deve ser iniciado
para entender quais implicações as propostas de solução trarão a outras partes do sistema.
Desta forma, problemas que, em um projeto bem estruturado, levariam poucas horas para
serem resolvidos, acabam se tornando problemas de uma semana inteira.

3.6.1 Árvores de hierarquias

Há uma estrutura dentro dos dados das empresas no Climas chamada hierarquia.
As hierarquias são basicamente árvores e podem possuir sete níveis. Em empresas grandes,
essas hierarquias atingem números muito altos, e tornam quaisquer operações sobre a

14
árvore extremamente lentas. A ferramenta utilizada para trabalhar com as hierarquias é
um plugin que não possui otimização alguma no algoritmo de busca e manipulação dos
nós da árvore, fazendo com que qualquer operação seja extremamente lenta.
Um dos trabalhos realizados no estágio envolvia exibição das hierarquias e a
construção de ferramenta de busca nos nós. Quando o usuário abre o painel de hierarquias,
todos os nós estão aninhados, e a renderização ocorre rapidamente. Entretanto, à medida
que o usuário insere qualquer caractere no campo de busca, o processo de scan na árvore é
iniciado. Como as hierarquias são extensas, esse processo é lento e tortuoso, punindo o
usuário e tornando a utilização da ferramenta quase inviável. Algumas melhorias foram
feitas através de uma matriz de adjacências, tornando a busca mais rápida. Ainda assim, o
processo ainda é demorado, pois o plugin não é otimizado. Melhorá-lo parecia uma tarefa
demorada e complicada, e a orientação do coordenador foi de deixar essa ferramenta em
pendência.

3.6.2 Organogramas

A tela de organogramas permite que o usuário gerencia parâmetros associados às

hierarquias da empresa. Havia um bug recorrente que ocorria de forma aleatória: quando
o usuário modificava algum parâmetro, uma notificação confirmando a modificação era
exibida, mas a modificação não era efetivamente modificada. Isso ocorria por um erro
comum dentro do código do Climas em operações assíncronas: não existe bloco de catch()
em muitas delas. Dessa forma, quando o backend responde com um erro, o retorno da
requisição não verifica o status do retorno, e simplesmente exibe a notificação de sucesso
sem que a modificação tenha sido efetivada no banco de dados. Essa situação foi corrigida
adicionando bloco catch() que notifica o usuário em caso de erro.

3.6.3 Detalhes de questões

Quando o usuário acessa uma questão, a página de detalhes é exibida. Um erro

de projeto na disposição dos itens na tela fazia com que os botões de navegação entre
as questões e chaveamento entre estados se sobrepusessem. Para solucionar o problema,
metade da página teve de ser reconstruída para que os espaços fossem respeitados.

3.6.4 Usuários desativados

Os gestores de relatórios podem desativar usuários da empresa. Quando essa

operação ocorre, o tratamento correto seria buscar todas as relações que o usuário desativado
tem com as informações da empresa e desfazer essas conexões no banco de dados. Entretanto,
se algum erro ocorresse neste ínterim, nenhuma ação corretiva era tomada, deixando usuários
desativados relacionados a algumas informações da empresa. Esse problema repercutia em
várias páginas do Climas, onde usuários desativados continuavam a serem exibidos para os
gestores. Um trabalho de busca por esses usuários teve de ser feito para que se pudesse

15
apagá-los do banco de dados e refatoração de todo o processo de desativação do usuário
teve de ser feita.

4 Contribuição do estágio para formação acadêmica e profissional

O estágio contribuiu fortemente para consolidação de conhecimentos que obtive ao
longo do curso, servindo bem ao propósito de integrar partes do meu conhecimento que,
mesmo sabendo que se relacionavam, não conseguia perceber. Participar de um projeto
de grande porte na área de desenvolvimento de web softwares exigiu que a aplicação de
conhecimentos diversos obtidos em AEDs I, AEDs II, Redes de computadores, Automação
em tempo real e Técnicas de integração de dados, evidenciando as relações existentes entre
essas diferentes áreas.
No âmbito profissional, o estágio me ajudou a ver que realmente quero trabalhar
com desenvolvimento de softwares quando me formar. Essa dúvida me consumia há bastante
tempo, uma vez que a Engenharia de Controle e Automação é extensa e permite que
o profissional atue em diversas áreas. Além disso, essa foi minha primeira experiência
profissional formal, e ajudou bastante na construção de conceitos sobre como ser um bom
profissional, trabalhar em equipe e me desenvolver como pessoa através do trabalho.

5 Conclusão
O período acadêmico foi muito importante pra mim e me ensinou muitas coisas,
mas, indubitavelmente, meu período de estágio foi o mais valioso até agora. Minha relação
com as pessoas da empresa me ensinou muito sobre como ser um bom profissional é
recompensador, sobre como participar ativamente de um projeto conjunto pode ser bom.
O engrandecimento pessoal através do trabalho era algo em que não acreditava fortemente,
e hoje me é um conceito claro, uma prática diária.

16
 Referências

ANGULARJS. AngularJS, 2018. Visitado em 29 de julho de 2018. Disponível em:

<https://angularjs.org/>. Citado na página 8.

ESTÁGIO profissional. Wikimedia, 2018. Visitado em 20 de julho de 2018. Disponível em:

<https://pt.wikipedia.org/wiki/Est%C3%A1gio_profissional>. Citado na página 3.

17