TG - Dani v7

Prévia do material em texto

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 
 
 
 
 
 
 
 
 
 
 
 
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 
 
 
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 
 
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 oprojeto 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 Desempenhonos 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. 
@PostMapping 1 
public Project create(@RequestBody Project project) { 2 
 return service.save(project); 3 
}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. 
public Project save(Project project) { 2 
 Representative found = 3 
representativeService.findById(userService.getUserLoggedIn().getId()4 
); 5 
 throwIfUserIsNull(found); 6 
 throwIfUserIsInactive(found); 7 
 project.setCreatedBy(found); 8 
 9 
 project.setCreatedAt(ZonedDateTime.now()); 10 
 project.setProgress(2); 11 
 project.setOpen(false); 12 
 return repository.save(project); 13 
}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. 
public class Project { 1 
 @Id 2 
 @GeneratedValue(strategy = GenerationType.IDENTITY) 3 
 private Long id; 4 
 5 
 private String title; 6 
 private String shortDescription; 7 
 private String completeDescription; 8 
 private String technologyDescription; 9 
 private String notes; 10 
 private int progress; 11 
 private java.util.Date updatedAt; 12 
 private ZonedDateTime createdAt; 13 
 private Boolean refused; 14 
 private String reason; 15 
 private Boolean finished; 16 
 private Boolean open; 17 
 private String course; 18 
 private int semester; 19 
 20 
 @OneToOne(cascade = CascadeType.ALL) 21 
 @JoinColumn(name = "meeting_id", referencedColumnName = "id") 22 
 private Meeting meeting; 23 
 24 
 @OneToOne 25 
 @JoinColumn(name = "approved_by", referencedColumnName = "id") 26 
 private Cadi approvedBy; 27 
 28 
 @OneToOne 29 
 @JoinColumn(name = "finished_by", referencedColumnName = "id") 30 
 private Cadi finishedBy; 31 
 32 
 @OneToOne 33 
 @JoinColumn(name = "created_by", referencedColumnName = "id") 34 
 private Representative createdBy; 35 
 36 
 @ManyToOne 37 
 @JoinColumn(name = "teacher_id", referencedColumnName = "id") 38 
 private Teacher teacher; 39 
}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 acessaro 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. 
// view 1 
<template> 2 
 <codigo HTML> 3 
</template> 4 
 5 
<script> 6 
export default { 7 
 // state 8 
 data () { 9 
 return { 10 
 form: { 11 
 email: ‘’, 12 
 password: ‘’ 13 
 }, 14 
 rules: { 15 
 email: [ 16 
 { required: true, message: ’Campo obrigatorio’, trigger: 17 
’submit’ }, 18 
 { type: ’email’, message: ’Insira um e-mail valido’, 19 
trigger: ’submit’ } 20 
 ], 21 
 password: [{ required: true, message: ’Campo obrigatorio’, 22 
trigger: ’submit’ }] 23 
 } 24 
 } 25 
 }, 26 
 // actions 27 
 methods: { 28 
 submitForm () { 29 
 this.$refs.form.validate((valid) => { 30 
 if (valid) { 31 
 this.$store.commit(’SHOW_LOADING’) 32 
 this.$store.dispatch(’authenticateUser’, this.form) 33 
 .then(() => this.$router.push(’/projects’)) 34 
 .catch(err => this.$throwError(err)) 35 
 .finally(() => this.$store.commit(’HIDE_LOADING’)) 36 
 } 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 queele 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. 
 
 
https://vuex.vuejs.org/