FACULDADE DE TECNOLOGIA DE SÃO JOSÉ DOS CAMPOS

FATEC PROFESSOR JESSEN VIDAL

DANIELLY GARCIA JARDIM

ANTENAS

São José dos Campos

2020
DANIELLY GARCIA JARDIM

ANTENAS

Trabalho de Graduação apresentado à

Faculdade de Tecnologia de São José dos
Campos, como parte dos requisitos
necessários para a obtenção do título de
Tecnólogo em Banco de Dados.

Orientador: Me. Emanuel Mineda Carneiro

Coorientador: Me. Eduardo Sakaue

São José dos Campos

2020
 iii

Dados Internacionais de Catalogação-na-Publicação (CIP)

Divisão de Informação e Documentação
JARDIM, Danielly
Antenas.
São José dos Campos, 2021.
35f.

Trabalho de Graduação – Curso de Tecnologia em Banco de Dados

FATEC de São José dos Campos: Professor Jessen Vidal, 2021.
Orientador Interno ou Principal: Me. Emanuel Mineda Carneiro.
Orientador Externo ou Coorientador: Me. Eduardo Sakaue.

1. Gestão de projetos. 2. Organização. 3. Centralização de informações. I. Faculdade de

Tecnologia. FATEC de São José dos Campos: Professor Jessen Vidal. Divisão de Informação e
Documentação. II. Título

REFERÊNCIA BIBLIOGRÁFICA

JARDIM, Danielly. Antenas. 2021. 35f. Trabalho de Graduação - FATEC de São José dos
Campos: Professor Jessen Vidal.

CESSÃO DE DIREITOS

NOME(S) DO(S) AUTOR(ES): Danielly Garcia Jardim

TÍTULO DO TRABALHO: Antenas
TIPO DO TRABALHO/ANO: Trabalho de Graduação/2021.

É concedida à FATEC de São José dos Campos: Professor Jessen Vidal permissão para
reproduzir cópias deste Trabalho e para emprestar ou vender cópias somente para propósitos
acadêmicos e científicos. O autor reserva outros direitos de publicação e nenhuma parte deste
Trabalho pode ser reproduzida sem a autorização do autor.

_____________________________________
Danielly Garcia Jardim
Rua Carlos Alvarenga
12239-320, São José dos Campos - SP
 iv

DANIELLY GARCIA JARDIM

ANTENAS

Trabalho de Graduação apresentado à

Faculdade de Tecnologia de São José dos
Campos, como parte dos requisitos
necessários para a obtenção do título de
Tecnólogo em Banco de Dados.

__________________________________________________________________
Me. Jose Walmir Gonçalves Duque – FATEC SJC

___________________________________________________________________
Esp. Fabiano Sabha Walczak – FATEC SJC

__________________________________________________________________
Me. Emanuel Mineda Carneiro – FATEC SJC

__________________________________________________________________
Me. Eduardo Sakaue – FATEC SJC

_____/_____/_____

DATA DA APROVAÇÃO
 v

Agradeço a todos que me apoiaram, fazendo com

que eu tenha DETERMINAÇÃO.
 vi

AGRADECIMENTOS

Agradeço a minha família, que sempre me apoiou e incentivou.

A companhia dos meus amigos e amigas, que sempre estiveram ao meu lado:
Giuliano Gimenez, Fabio Romeiro, Mateus Machado, Jessica Helen e especialmente o
Henrique Liberato, que me ajudou muito na realização desse trabalho.
Aos meus orientadores Eduardo Sakaue e Emanuel Mineda, por toda a confiança,
orientação, esclarecimentos, atenção e auxílio no desenvolvimento deste trabalho.
A Faculdade de Tecnologia de São José dos Campos (FATEC-SJC) pela
oportunidade de estudar nesta instituição de ensino que me proporcionou muitos
conhecimentos e momentos bons.
 vii

RESUMO

Através do Centro de Apoio ao Desenvolvimento e Inovação (CADI) da Faculdade de

Tecnologia de São José dos Campos (FATEC), empresas e alunos de diversos cursos
trabalham juntos para solucionar problemas. Foram detectados alguns problemas com a
organização de projetos e equipes. Para resolvê-los, foi desenvolvido um sistema chamado
Antenas, onde todos os projetos e equipes serão cadastrados. Este sistema apresenta uma
solução capaz de auxiliar tanto o CADI quanto os professores com a organização e
gerenciamento de projetos e equipes. Para seu desenvolvimento, foram realizadas reuniões
com alguns professores e membros do CADI para definir os requisitos do projeto, focando-
se na facilidade da utilização do sistema. Como resultado, temos um sistema funcional que
permite que os projetos fiquem acessíveis e a visualização dos temas e requisitos mais
simples para todos os usuários.

Palavras-Chave: Gestão de projetos; Organização; Centralização de informações.

 viii

ABSTRACT

Through the Centro de Apoio ao Desenvolvimento e Inovação (CADI) of Faculdade de

Tecnologia de São José dos Campos (FATEC), companies and students from different
courses work together to solve problems. Some problems were detected in the organization
of projects and teams. To solve them a system called ‘Antenas’ was developed, where all
projects and teams will be registered. This system presents a solution capable of helping both
CADI and teachers with the organization and management of projects and teams. For its
development, meetings were held with some professors and CADI members to define the
project requirements, focusing on the ease of use of the system that was developed through
Java for back-end, Vue for front-end and MySql as a database. As a result, we have a
functional system that allows projects to be accessible and the visualization of the themes
and requirements simpler for all users.

Keywords: Project management; Organization; Centralization of information.

 ix

LISTA DE FIGURAS

Figura 1 – BPMN................................................................................................................. 14
Figura 2 - Tela inicial. ......................................................................................................... 21
Figura 3 – Visualização da equipe – aluno. ......................................................................... 22
Figura 4 - Perfil do aluno. .................................................................................................... 23
Figura 5 - Arquitetura do sistema - Modelo MVC. ............................................................. 24
Figura 6 - Trecho de Código do Antenas: Controller - Salvamento de um projeto............. 25
Figura 7 - Trecho de Código do Antenas: Service - Salvamento de um projeto. ................ 25
Figura 8 - Trecho de Código do Antenas: Service - Salvamento de um projeto. ................ 26
Figura 9 - Padrão de gerenciamento de estado. ................................................................... 27
Figura 10 - Trecho de Código do antenas - Exemplo do uso vuex...................................... 28
Figura 11 - Diagrama de entidade-relacionamento.............................................................. 30
Figura 12 – Perfil do aluno. ................................................................................................. 33
 x

LISTA DE QUADROS

Quadro 1 - Tecnologias e versões utilizadas. ...................................................................... 22

 xi

LISTA DE ABREVIATURAS E SIGLAS

CADI Centro de Apoio ao Desenvolvimento e Inovação

FATEC Faculdade de Tecnologia
 xii

SUMÁRIO
1. INTRODUÇÃO .............................................................................................................. 13
1.1 Objetivo do Trabalho ............................................................................................. 13
1.2 Conteúdo do Trabalho ........................................................................................... 13
2. FUNDAMENTAÇÃO TÉCNICA ................................................................................. 14
2.1 BPMN ...................................................................................................................... 14
2.1.1 Cadastro Inicial ....................................................................................................... 14
2.1.2 Avaliação Inicial ..................................................................................................... 14
2.1.3 Cadastro Detalhado ................................................................................................ 15
2.1.4 Avaliação Detalhada ............................................................................................... 15
2.1.5 Reunião .................................................................................................................... 15
2.1.6 Designar Responsável ............................................................................................. 15
2.1.7 Entrega .................................................................................................................... 15
2.1.8 Avaliação ................................................................................................................. 15
2.1.9. Finalizado ............................................................................................................... 15
2.2. Levantamento de requisitos ................................................................................... 16
2.2.1 Histórias de usuário (User Story) ........................................................................... 16
2.2.1.1 Representante ....................................................................................................... 16
2.2.1.2 CADI ..................................................................................................................... 17
2.2.1.3 Professor............................................................................................................... 18
2.2.1.4. Aluno.................................................................................................................... 19
2.3. Wireframe ................................................................................................................... 20
2.4 Tecnologias ................................................................................................................... 23
3 DESENVOLVIMENTO................................................................................................. 24
3.1 Arquitetura do sistema ................................................................................................ 24
3.1.1 Back-end .................................................................................................................. 24
3.1.2 Front-end ................................................................................................................. 26
3.1.3 Banco de dados ........................................................................................................ 29
4 RESULTADOS ............................................................................................................... 31
4.1 Ambiente de execução ................................................................................................. 31
4.2 Experimentos e resultados .......................................................................................... 31
4.2.1 Fluxo onde o projeto é finalizado ............................................................................ 31
4.2.2 Fluxo onde o projeto é rejeitado na segunda etapa ................................................ 32
4.2.3 Fluxo onde o projeto é rejeitado na quarta etapa ................................................... 32
5 CONSIDERAÇÕES FINAIS ......................................................................................... 34
5.1 Trabalhos futuros ........................................................................................................ 34
REFERÊNCIAS ..................................................................................................................... 35
 13

1. INTRODUÇÃO

A FATEC (Faculdade de Tecnologia) é uma instituição de ensino superior pública

pertencente ao Centro Estadual de Educação Tecnológica Paula Souza. Na unidade de São
José dos Campos, existe um departamento denominado CADI (Centro de Apoio ao
Desenvolvimento e Inovação), que tem como objetivo a conexão e aproximação entre
empresas e a FATEC, visando a cooperação e extensão.
O CADI possibilita que os cursos sejam modernizados através de projetos com
problemas reais e contato com empresas, oferecendo a oportunidade de os alunos colocarem
em prática os conhecimentos adquiridos em aula. Porém, há muitas dificuldades na gestão,
comunicação e acompanhamento desses projetos juntos aos professores, alunos e empresas,
pois não há uma ferramenta centralizada, o que muitas vezes pode causar confusão e resultar
em uma entrega que não cumpre com os requisitos esperados.
Além disso, as empresas não conseguem realizar um acompanhamento detalhado
sobre o progresso dos projetos e o contato com os alunos é complicado.

1.1 Objetivo do Trabalho

Este trabalho visa o desenvolvimento de uma ferramenta onde o CADI poderá

realizar a gestão dos projetos, permitindo o cadastro e o acompanhamento em uma ponta, e
o desenvolvimento em outra.
Ele também servirá como portfólio para os alunos, que terão um perfil público onde
poderão preencher com seus dados acadêmicos e profissionais. Neste perfil também haverá
uma lista de medalhas ganhas, todos os projetos nos quais já participou e seu desempenho
em cada um deles.

1.2 Conteúdo do Trabalho

O presente trabalho está estruturado em seis Capítulos, cujo conteúdo é sucintamente

apresentado a seguir: no Capítulo 2 é feita a fundamentação das tecnologias; o Capítulo 3
apresenta o desenvolvimento da solução; no Capítulo 4 são apresentados os resultados; o
Capítulo 5 apresenta as considerações finais deste trabalho a partir da análise dos resultados
obtidos.
 14

2. FUNDAMENTAÇÃO TÉCNICA

Neste capítulo serão apresentados os casos de uso, os wireframes, histórias de usuário

e o Business Process Model and Notation (BPMN), que representa o fluxo do projeto.

2.1 BPMN

BMPN é uma notação utilizada para modelar processos de negócios. Ele estabelece
um padrão para representar os processos graficamente, por meio de diagramas. Esse padrão
possui um conjunto de símbolos e regras, que permite modelar diferentes fluxos de processo.

Figura 1 – BPMN.

Fonte - Elaborado pelo autor (2020)

Como apresentado na Figura 1, o projeto é constituído de 9 etapas. A cada ação que

os usuários tomam, ele avança para a próxima. As seções a seguir detalham cada uma das
etapas.

2.1.1 Cadastro Inicial

Ao acessar a aplicação, o representante poderá criar um projeto. Nesse cadastro

inicial, serão salvos apenas o nome e uma descrição breve do projeto.

2.1.2 Avaliação Inicial

O CADI avalia se o projeto está apto a continuar.

 15

2.1.3 Cadastro Detalhado

O CADI avalia se o projeto está apto a continuar.

2.1.4 Avaliação Detalhada

O CADI avalia as novas infamações do projeto e decide se ele irá avançar para a próxima
etapa ou não.

2.1.5 Reunião

Assim que o projeto sai do processo de avaliação, o CADI registra as informações da

reunião, como endereço e uma lista de datas possíveis. Após isso, o representante deverá
selecionar uma data entre as sugeridas pelo CADI.

2.1.6 Designar Responsável

Nesta etapa, o CADI deve selecionar qual professor será responsável por aplicar o
projeto para os alunos, e em qual semestre ele será aplicado.

2.1.7 Entrega

Nesta etapa, o professor poderá editar as informações do projeto como preferir, para que
os alunos possam entender melhor o que devem fazer. Depois que o professor efetivamente
iniciar o projeto, ele estará disponível para os alunos, que deverão formar suas equipes,
cadastrá-las na plataforma e adicionar os links de comunicação e do repositório do projeto.
Ao cadastrar uma nova equipe ou adicionar um novo membro, o aluno deverá informar qual
função desempenhará no projeto. Entre essas funções estão: Scrum Master, DevOps, e Dev,
podendo ser cadastrada mais de uma opção para cada aluno.

2.1.8 Avaliação

O professor pode encerrar o projeto a qualquer momento. Quando encerrado, o professor

deverá atribuir notas e medalhas aos alunos. Feito isso, o ciclo do projeto se encerra.

2.1.9. Finalizado

Nesta fase do projeto, as entregas já foram finalizadas e os alunos avaliados.

 16

2.2. Levantamento de requisitos

A metodologia de levantamento de requisitos foi a entrevista, onde a autora deste

trabalho participou de várias reuniões junto a alguns membros do CADI.
Os requisitos foram documentados no formato de User Stories.

2.2.1 Histórias de usuário (User Story)

User Story ou “história de usuário” é uma descrição de uma necessidade do usuário

do sistema, um requisito sob o ponto de vista desse usuário. A User Story busca descrever
essa necessidade de uma forma simples e leve.
A seguir, são apresentada as histórias de usuário identificadas pelo código USXX
de cada um dos perfis da aplicação.

2.2.1.1 Representante

Este usuário é o representante de uma empresa, que deseja que o projeto seja
realizado em parceria com a FATEC.

US001 Como representante, desejo cadastrar e visualizar os projetos que cadastrei, para
poder acompanhá-los.
US002 Como representante, desejo poder visualizar o progresso do projeto, para poder
acompanhar o passo a passo, do início ao fim.
US003 Como representante, desejo visualizar as equipes e seus membros, para saber
quem são os alunos participantes e qual papel estão desempenhando no projeto.
US004 Como representante, desejo ter acesso ao link do repositório das equipes
cadastradas, para poder acompanhar o processo de desenvolvimento e visualizar o
projeto final.
US005 Como representante, desejo ter acesso ao perfil do aluno, onde deve conter
algumas informações sobre ele, para que eu possa entrar em contato e convidá-lo para
uma possível vaga de emprego/estágio:
• Detalhes: O perfil do aluno deve conter as seguintes informações:
o Medalhas recebidas;
o Cidade;
o Link do GitHub;
o Link do LinkedIn;
 17

o Informações acadêmicas;
o Informações profissionais;
o Projetos que já participou e a descrição deles;
o Desempenho nos projetos;
o Função que o aluno desempenhou no projeto.

2.2.1.2 CADI

O CADI é um professor da FATEC, que é responsável por gerenciar todos os

projetos.

US006 Como CADI, desejo poder visualizar todos os projetos cadastrados, para que
possa realizar o acompanhamento de todos eles.
US007 Como CADI, desejo poder visualizar todas as equipes e seus membros, para
acompanhar o progresso delas.
US008 Como CADI, desejo visualizar os links de comunicação e do repositório do
projeto, para acompanhamento de entregas.
US009 Como CADI, desejo poder decidir se o projeto será aprovado ou não, para que
ele possa seguir com o fluxo ou parar por ali.
US0010 Como CADI, desejo poder cadastrar informações sobre a reunião com o
representante, para que ele saiba o local e a hora que tenho disponível para o encontro.
US0011 Como CADI, desejo poder selecionar um professor responsável pelo projeto e o
semestre em que será aplicado, para que haja um melhor controle e eu saiba quem irá
repassar o projeto para os alunos e em que turma será aplicado.
US0012 Como CADI, desejo ter acesso ao perfil do aluno, onde deve conter algumas
informações sobre ele, para que eu possa entrar em contato e convida-lo para uma
possível vaga de emprego/estágio:
• Detalhes: O perfil do aluno deve conter as seguintes informações:
o Medalhas recebidas;
o Cidade;
o Link do GitHub;
o Link do LinkedIn;
o Informações acadêmicas;
o Informações profissionais;
o Projetos que já participou e a descrição deles;
 18

o Desempenho nos projetos;

o Função que o aluno desempenhou no projeto.

2.2.1.3 Professor

Este usuário é um professor da FATEC, responsável por aplicar o projeto em uma

sala de aula.

US0013 Como professor, desejo poder visualizar e editar os projetos que o CADI me
designou, para que possa visualizar seus requisitos e explicá-los para os alunos.
US0014 Como professor, desejo poder visualizar todas as equipes cadastradas e seus
membros, para que possa realizar o acompanhamento de quantas equipes estão
cadastradas, quais são os participantes e visualizar suas funções na equipe.
US0015 Como professor, desejo visualizar os links de comunicação e do repositório do
projeto, para acompanhamento de todas as entregas.
US0016 Como professor, desejo poder iniciar/encerrar projetos, para que seja exibido ou
não na lista de projeto dos alunos.
• Detalhes: Os projetos devem ficar disponíveis para os alunos apenas quando
iniciado. Ao encerrar, não deve mais ser exibido para quem não estiver
participando e não será mais possível alterar os links de comunicação e do
repositório do projeto, para que haja um controle melhor sobre os projetos e a
lista dos alunos não fique poluída com projetos que já foram encerrados.
US0017 Como professor, desejo que, após encerrar o projeto, seja possível atribuir
medalhas e notas aos membros de todas as equipes cadastradas no projeto, para que
sejam exibidas no perfil dos alunos.
• Detalhes: As notas serão atribuídas de acordo com o desempenho do aluno no
projeto. Os atributos avaliados serão:
o Proatividade;
o Desempenho;
o Entrega de resultados;
o Colaboração.
US0018 Como professor, desejo ter acesso ao perfil do aluno, onde deve conter algumas
informações sobre ele, para que eu possa entrar em contato e convida-lo para uma
possível vaga de emprego/estágio:
 19

• Detalhes: O perfil do aluno deve conter as seguintes informações:

o Medalhas recebidas
o Cidade
o Link do GitHub
o Link do LinkedIn
o Informações acadêmicas
o Informações profissionais
o Projetos que já participou e a descrição deles
o Desempenho nos projetos
o Função que o aluno desempenhou no projeto.

2.2.1.4. Aluno

É um aluno da FATEC que está apto a participar de projetos.

US0019 Como aluno, desejo visualizar os projetos que estão abertos, para visualizar seus
requisitos.
US0020 Como aluno, desejo cadastrar uma equipe para o projeto, especificando um nome
e selecionando qual será a função que irei desempenhar dentro dela, para que o CADI,
professor e representante possam acompanhar os grupos e seus membros.
US0021 Como aluno, desejo cadastrar links de comunicação e do repositório do projeto,
para que toda a equipe, professores, CADI e representante possam acessá-los a qualquer
momento.
US0022 Como aluno, desejo alterar as informações do meu perfil, para mantê-las sempre
atualizadas.
• Detalhes: Desejo editar as seguintes informações:
o Foto do perfil
o Cidade
o Link do GitHub
o Link do LinkedIn
o Informações acadêmicas
o Informações profissionais
o Nome
o E-mail
o Biografia
 20

US0023 Como aluno, desejo ter acesso ao perfil dos outros alunos, onde deve conter
algumas informações sobre ele, para que eu possa entrar em contato e convidá-lo para
uma possível vaga de emprego/estágio:
• Detalhes: O perfil do aluno deve conter as seguintes informações:
o Medalhas recebidas;
o Cidade;
o Link do GitHub;
o Link do LinkedIn;
o Informações acadêmicas;
o Informações profissionais;
o Projetos que já participou e a descrição deles;
o Desempenho nos projetos;
o Função que o aluno desempenhou no projeto.

2.3. Wireframe

Um wireframe é um protótipo, um desenho básico que representa como será a tela

da aplicação. Nesse rascunho, são apresentadas visualmente quais seções deve conter e o
que irá dentro delas.
Ao realizar o acesso, o usuário será redirecionado para a página principal. Ela será a
mesma para qualquer tipo de perfil, mudando apenas os projetos que serão exibidos, o que
varia de acordo com as permissões que o usuário possui. Nela será possível visualizar uma
lista com os projetos disponíveis.
A Figura 2 atende as histórias de usuário: US002, US006, US0013 E US0019.
 21

Figura 2 - Tela inicial.

Fonte - Elaborado pelo autor (2020)

Ao selecionar um projeto da lista, será possível visualizar todas as informações sobre

ele, como: equipes participantes, fase em que o projeto se encontra, entre outras.
A Figura 3 representa a visualização da equipe na perspectiva do aluno, onde será
possível visualizar apenas a equipe que ele faz parte, tendo permissões de adição ou exclusão
de membros da equipe. Ele também pode editar os links do projeto e de comunicação a
qualquer momento.
O wireframe representado na Figura 3 atende as histórias de usuário: US003, US004,
US007, US008, US0014, US0015 e US0021.
 22

Figura 3 – Visualização da equipe – aluno.

Fonte: Elaborado pelo autor (2020)

Quadro 1 - Tecnologias e versões utilizadas.

Nome Versão Funcionalidade

Java 11 Desenvolvimento back-end, domínio e regras de negócio.
Spring 5.2.5 Provedor de serviço REST.
Spring Boot 2.2.6 Configuração e publicação de aplicação
Spring Data 2.3.6 Interfaces genéricas para persistência de dados.
Spring Security 5.2.5 Segurança de acesso.
Hibernate 5.4.2 Mapeamento objeto-relacional.
Liquibase 3.9.0 Criação e validação das tabelas.
MySQL 8.0.23 Gerenciamento do banco de dados.
Apache Maven 3.6.3 Gerenciamento de dependências e empacotamento
VueJs 2.6.12 Framework front-end
NodeJS 14.15.4 Ambiente de execução Javascript
GitHub - Hospedagem e versionamento de código.

Fonte: Elaborado pelo autor (2020)

Depois que todas as etapas do projeto forem concluídas, o professor realizará a avaliação
e atribuirá as medalhas, que devem ser aceitas pelos alunos para que sejam exibidas no perfil.
O Scrum Master da equipe também fará sua avaliação dos membros.
Essas informações estarão disponíveis no perfil do aluno conforme mostra a Figura 4,
junto com diversas informações relevantes, como: cidade em que mora, informações
 23

acadêmicas e profissionais, todos os projetos que participou junto com o desempenho em cada
um deles.
A Figura 4 ilustra as histórias de usuário: US005, US0012, US0018 e US0022.

Figura 4 - Perfil do aluno.

Fonte - Elaborado pelo autor (2020)

2.4 Tecnologias

No desenvolvimento da aplicação, foram utilizadas as tecnologias listadas no Quadro

1
 24

3 DESENVOLVIMENTO

Este capítulo apresenta todo o processo de desenvolvimento do Trabalho.

Toda a arquitetura foi pensada para facilitar e agilizar o processo de acompanhamento
dos projetos para todos os usuários, especialmente professores e CADI, facilitando a interação
entre os usuários.

3.1 Arquitetura do sistema

A arquitetura será explicada dividindo em três partes:
• front-end - parte visual de um sistema, a interface gráfica;
• back-end - fornece os dados solicitados na aplicação, que possui regras de
negócio;
• banco de dados – gerencia e armazena os dados da aplicação.

3.1.1 Back-end

Neste trabalho, foi adotado o padrão MVC (Model, View, Controller) e a linguagem
Java. Como é possível visualizar na Figura 5 o usuário realiza uma requisição ao controller
através do navegador. O controller trata as informações vindas da view e aciona o model, que
se comunica com o banco de dados e efetua as operações necessárias por comandos do banco
de dados.

Figura 5 - Arquitetura do sistema - Modelo MVC.

Fonte: Elaborado pelo autor (2020)

Então, a estrutura do MVC possui os seguintes itens:

• Model (Modelo), contém a lógica de negócio da aplicação;
• View (Visão) que é a representação da informação;
 25

• Controller (Controle) que responde aos comandos e interage com o model.

A Figura 6 está ilustrado um exemplo do método do controller utilizando as classes do

projeto..

Figura 6 - Trecho de Código do Antenas: Controller - Salvamento de um projeto.

1 @PostMapping
2 public Project create(@RequestBody Project project) {
3 return service.save(project);
4 }
Fonte: Elaborado pelo autor (2020)

Segundo as convenções, o controller não deve conter nenhuma regra de negócio, toda a
lógica deve ficar no service. Por isso, na linha 3 da Figura 6, se faz uma chamada para o método
save do service, passando as informações do projeto a ser salvo.
No método save, todos os dados são “setados”, onde todas as verificações são feitas e o
projeto, finalmente, é persistido no banco de dados conforme pode ser visualizado na linha 12
da Figura 7.
1

Figura 7 - Trecho de Código do Antenas: Service - Salvamento de um projeto.

2 public Project save(Project project) {
3 Representative found =
4 representativeService.findById(userService.getUserLoggedIn().getId()
5 );
6 throwIfUserIsNull(found);
7 throwIfUserIsInactive(found);
8 project.setCreatedBy(found);
9
10 project.setCreatedAt(ZonedDateTime.now());
11 project.setProgress(2);
12 project.setOpen(false);
13 return repository.save(project);
14 }
Fonte: Elaborado pelo autor (2020)

E por fim, há o model, representado na Figura 8, onde é especificado todos os atributos

que o objeto, no caso, projeto deve ter, todos os relacionamentos que ele possui com outros
objetos e todo o mapeamento JPA, para que trabalhe em conjunto com o banco de dados.
 26

Figura 8 - Trecho de Código do Antenas: Service - Salvamento de um projeto.

1 public class Project {
2 @Id
3 @GeneratedValue(strategy = GenerationType.IDENTITY)
4 private Long id;
5
6 private String title;
7 private String shortDescription;
8 private String completeDescription;
9 private String technologyDescription;
10 private String notes;
11 private int progress;
12 private java.util.Date updatedAt;
13 private ZonedDateTime createdAt;
14 private Boolean refused;
15 private String reason;
16 private Boolean finished;
17 private Boolean open;
18 private String course;
19 private int semester;
20
21 @OneToOne(cascade = CascadeType.ALL)
22 @JoinColumn(name = "meeting_id", referencedColumnName = "id")
23 private Meeting meeting;
24
25 @OneToOne
26 @JoinColumn(name = "approved_by", referencedColumnName = "id")
27 private Cadi approvedBy;
28
29 @OneToOne
30 @JoinColumn(name = "finished_by", referencedColumnName = "id")
31 private Cadi finishedBy;
32
33 @OneToOne
34 @JoinColumn(name = "created_by", referencedColumnName = "id")
35 private Representative createdBy;
36
37 @ManyToOne
38 @JoinColumn(name = "teacher_id", referencedColumnName = "id")
39 private Teacher teacher;
40 }

Fonte: Elaborado pelo autor (2020)

3.1.2 Front-end

No front-end, está sendo utilizado o Vue.js, que é um framework utilizado na construção

de interfaces de usuário. Ele pode ser utilizado no desenvolvimento de aplicativos web single
page (baseados em uma única página).
Para o design, foi utilizado o element.ui, que possui componentes prontos, agilizando o
desenvolvimento do projeto e fornecendo um design agradável.
 27

Também foi utilizado o Vuex, um padrão de controle de estado para aplicações Vue.js.
Ele utiliza uma árvore única de estado, o que significa que todo estado no nível de aplicação
será centralizado e único, assim como o store. Qualquer componente pode acessar o estado ou
acionar ações.
A Figura 9 é uma representação simples do conceito de fluxo de dados unidirecional.
O Vuex é constituído das seguintes partes:
• Estado (state): Direciona toda a aplicação;
• View: É o mapeamento declarativo do estado;
• Ações (actions): São formas pelas quais o estado pode mudar de acordo
com as interações dos usuários na view.

Figura 9 - Padrão de gerenciamento de estado.

Fonte: Vuex.vuejs (2021)

A Figura 10 ilustra um exemplo simples, utilizando o código da tela de login para

mostrar como o Vuex foi utilizado.
 28

Figura 10 - Trecho de Código do antenas - Exemplo do uso vuex.

1 // view
2 <template>
3 <codigo HTML>
4 </template>
5
6 <script>
7 export default {
8 // state
9 data () {
10 return {
11 form: {
12 email: ‘’,
13 password: ‘’
14 },
15 rules: {
16 email: [
17 { required: true, message: ’Campo obrigatorio’, trigger:
18 ’submit’ },
19 { type: ’email’, message: ’Insira um e-mail valido’,
20 trigger: ’submit’ }
21 ],
22 password: [{ required: true, message: ’Campo obrigatorio’,
23 trigger: ’submit’ }]
24 }
25 }
26 },
27 // actions
28 methods: {
29 submitForm () {
30 this.$refs.form.validate((valid) => {
31 if (valid) {
32 this.$store.commit(’SHOW_LOADING’)
33 this.$store.dispatch(’authenticateUser’, this.form)
34 .then(() => this.$router.push(’/projects’))
35 .catch(err => this.$throwError(err))
36 .finally(() => this.$store.commit(’HIDE_LOADING’))
37 }
38 })
39 }
40 }
41 }

Fonte: Elaborado pelo autor (2020)

Também, foi utilizado o webpack, que é um empacotador de módulos para aplicativos

que utilizam JavaScript. Nem sempre é bom ter todo o código do projeto em um único arquivo.
Por isso o webpack possui a ideia de code splitting (divisão do código) onde é possível
modularizar partes reaproveitáveis do projeto, o que facilita o desenvolvimento. Por exemplo,
uma equipe trabalha em um módulo X e outra em um módulo Y, ambos no mesmo projeto, sem
que um interfira no outro.
 29

Quando o webpack processa o aplicativo, ele cria internamente um gráfico de

dependências, que mapeia os módulos que o projeto precisa e gera pacotes configuráveis. Além
disso, ele permite utilizar o lazy loading, o que é muito vantajoso por permitir dividir
componentes em blocos separados e apenas carregar seu conteúdo quando a página for
acessada, fazendo com que ela carregue mais rápido.

3.1.3 Banco de dados

O mecanismo de banco de dados utilizado é o MySQL, um sistema de gerenciamento

de banco de dados relacional RDBMS (Relational Database Management Systems) que possui
um modelo de cliente-servidor e utiliza a linguagem SQL como interface.
A palavra “relacional” significa que os dados armazenados estão organizados em
tabelas, e cada uma está relacionada com a outra.
Na Figura 11 é ilustrado o diagrama que representa todas as tabelas utilizadas no
trabalho e suas relações.
 30

Figura 11 - Diagrama de entidade-relacionamento.

Fonte: Elaborado pelo autor (2020)

 31

4 RESULTADOS
Neste capítulo serão apresentados os resultados obtidos, mostrando a usabilidade do
sistema.

4.1 Ambiente de execução

Os ambientes utilizados para hospedar o sistema para a realização dos testes foram o
Heroku, para o back-end e o Netlify, para o front-end da aplicação.

4.2 Experimentos e resultados

A aplicação foi testada por alguns professores e membros do CADI, e foram criados
projetos seguindo alguns roteiros.
Os testes foram realizados com o objetivo de garantir que todos os requisitos fossem
cumpridos e talvez gerar novos requisitos para que o uso da aplicação ficasse confortável e
simples (na medida do possível) para todos os usuários.
No momento, apenas professores e membros do CADI efetuaram esses testes, não houve
tempo para realizar testes com alunos e colaboradores.

4.2.1 Fluxo onde o projeto é finalizado

O primeiro roteiro foi o que o projeto fosse finalizado com sucesso. Neste processo,
foram detectados bugs simples, como algum botão que não possuía o comportamento esperado,
corrigido logo em seguida. A seguir, está o fluxo onde o projeto foi finalizado:
a) Criação de projeto (Representante)
b) Aprovação do projeto (CADI)
c) Adição de mais informações sobre o projeto (Representante)
d) Aprovação do projeto (CADI)
e) Informa os dados da reunião (CADI)
f) Seleciona uma data e hora informados pelo CADI (Representante)
g) Define um professor responsável (CADI)
h) Edita as informações do projeto para melhorar o entendimento para
os alunos (Professor)
i) Abre o projeto, para que fique disponível para os alunos (Professor)
j) Cria equipes e adiciona membros (Aluno)
k) Fecha o projeto (Professor)
 32

1) Avalia os alunos e atribui medalhas (Professor)

4.2.2 Fluxo onde o projeto é rejeitado na segunda etapa

No segundo roteiro, o projeto foi avaliado pelo CADI e não passou, foi reprovado. A
seguir, são mostrados os itens do fluxo onde o projeto foi rejeitado na segunda etapa.
a) Criação do projeto (Representante)
b) Reprovação do projeto (CADI)

4.2.3 Fluxo onde o projeto é rejeitado na quarta etapa

No terceiro e último roteiro, o projeto foi reprovado na quarta etapa, interrompendo o

fluxo.
a) Criação do projeto (Representante)
b) Aprovação do projeto (CADI)
c) Adição de mais informações sobre o projeto (Representante)
d) Projeto Rejeitado (CADI)

Ao realizar esses testes, foi notada a necessidade de algumas melhorias. No perfil do

aluno, visualizado na Figura 12, as informações parecem um tanto bagunçadas. Elas devem
ficar dispostas de forma que a visualização fique mais confortável. No momento da atribuição
de medalhas, foi notado que faltaram algumas validações, como atribuir a mesma medalha mais
de uma vez para o mesmo aluno. Ainda na tela de atribuir medalhas, foi notada a necessidade
de excluir uma medalha depois de atribuída
Não foi possível corrigir tais problemas até o momento, pois havia partes mais
importantes que necessitavam de atenção e eles não afetam o uso do sistema. Eles serão
corrigidos futuramente.
 33

Figura 12 – Perfil do aluno.

Fonte: Elaborado pelo autor (2021)

 34

5 CONSIDERAÇÕES FINAIS

Este trabalho foi desenvolvido com o intuito de auxiliar os professores e o CADI da

FATEC-SJC a acompanharem os alunos de forma mais simples e prática, com menos esforço
e de forma mais organizada, pois antes as informações não eram centralizadas, o que podia
ocasionar perda de informações ou passagem de informações incorretas.
Para atender essa necessidade, foram realizadas reuniões com alguns professores e
membros do CADI para levantamento de requisitos, que foi feito através de user stories.
Depois dessas reuniões e diversos testes, foi concluído que o sistema atende os
principais requisitos solicitados, fazendo com que ele tenha um fluxo completo, como
solicitado.
A solução criada está temporariamente disponibilizada no Heroku e Netlify.
Futuramente estará hospedada nos servidores da FATEC, melhorando assim a disponibilidade
e suportando uma quantidade maior de acessos.

5.1 Trabalhos futuros

Alguns requisitos a mais que facilitariam o uso da aplicação

• Sistema de notificação quando um projeto troca de status
• Colocar o sistema em um servidor mais confiável, que aceite um número
maior de acessos simultâneos.
• Refatoração da tela de perfil para que fiquem mais amigáveis ao usuário.
• Criar conexão socket entre o back-end e o front-end, para que seja atualizado
em tempo real
• Enviar notificação para o aluno aceitar entrar no grupo. Antes disso, ficará
como pendente
• Fazer com que o aluno possa escolher as medalhas que deverão ser exibidas
no perfil, para que ele tenha sempre que entrar no sistema para manter o perfil
atualizado.
• Aplicar validações na atribuição de medalhas, para que um aluno não possua
mais de uma do mesmo tipo.
 35

REFERÊNCIAS

VUE.JS. What is VueJs?. Disponível em: https://vuejs.org/v2/guide/ Acesso em 12/10/2021.

VUE.JS. What is Vuex?. Disponível em: https://vuex.vuejs.org Acesso em 12/10/2021.