Escolar Documentos
Profissional Documentos
Cultura Documentos
1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1.1 Objetivo Geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1.2 Objetivos Específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.2 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.3 Organização do Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . 13
2 REVISÃO DA LITERATURA . . . . . . . . . . . . . . . . . . . . . . 14
3 REQUISITOS E ESPECIFICAÇÕES . . . . . . . . . . . . . . . . . . 17
3.1 Fluxos de Usuário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2 Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3 Princípios Arquiteturais . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4 TECNOLOGIAS UTILIZADAS . . . . . . . . . . . . . . . . . . . . . 23
4.1 Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 Java e Spring Boot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 ApiREST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.4 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.5 SystemVerilog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.6 Icarus Verilog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.7 Fliplot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.8 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5 PROJETO E IMPLEMENTAÇÃO . . . . . . . . . . . . . . . . . . . 27
5.1 Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2 Banco de Dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.3 Telas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.3.1 Área do Professor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.3.2 Área do Aluno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.4 Arquitetura Geral do Sistema . . . . . . . . . . . . . . . . . . . . . . . 35
6 CONCLUSÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
12
1 Introdução
1.1 Objetivos
1.1.1 Objetivo Geral
1.2 Metodologia
A princípio, foi implementado um protótipo, na linguagem Java e utilizando o
framework Spring Boot, que constituiu, de forma simples, a funcionalidade principal
objetivada para a plataforma. Esse protótipo apresentou a característica de iniciar a
simulação de um design escrito em SystemVerilog partindo de informações e de comandos
Capítulo 1. Introdução 13
de uma página Web, a qual foi feita utilizando o framework Angular, HTML, CSS e
TypeScript.
Com o suporte obtido a partir da construção do protótipo da funcionalidade
principal, foi deĄnido o fluxo de interação da aplicação com o usuário - incluindo funções
e requisitos secundários, o fluxo de arquitetura e o da estrutura do sistema de Banco de
Dados.
Em posse da proposta da plataforma, especiĄcada tecnicamente, foram previstas e
construídas as telas que compõem a interface gráĄca da plataforma e o projeto backend
necessário, utilizando as mesmas linguagens e tecnologias usadas inicialmente para o
protótipo, ajustou-se a comunicação entre eles de forma que se obteve uma aplicação
integrada, a qual interage com o usuário satisfatoriamente.
Em seguida, foram implementados o sistema de banco de dados e toda sua comuni-
cação com o backend, considerando ações e consultas desse último sobre o banco, para
garantir a persistência de dados da aplicação.
Por Ąm, foram feitos eventuais ajustes no código-fonte, além da escrita e da revisão
do trabalho.
2 Revisão da Literatura
3 Requisitos e EspeciĄcações
3.2 Requisitos
Baseado nos fluxos propostos, foram mapeadas as funcionalidades que o sistema
deve apresentar para os dois tipos de usuário e escritas como requisitos na linguagem
Gherkin. Esse tipo de linguagem é utilizado na abordagem de desenvolvimento caracterizada
como BDD (Behavior Driven Development), a qual se caracteriza como uma técnica de
desenvolvimento ágil com o intuito de diminuir diĄculdades de comunicação, permitindo
que todos os membros de uma equipe utilizem uma mesma linguagem para realizar o
trabalho: o cliente, a área de negócio, a área de testes e os desenvolvedores.
A linguagem Gherkin caracteriza-se pela descrição de características de interesse
por meio de cenários simples, usando palavras-chave como ŞDadoŤ, ŞQuandoŤ e ŞEntãoŤ, a
Ąm de evitar ambiguidades (PAPADOPOULOS et al., 2017). As Tabelas 1 e 2 condensam
os requisitos, a partir dos aspectos da linguagem como colunas. Esta linguagem é utilizada
O sistema direciona à
Um professor logado tela de ŚRegistro de
Pressiona o botão
acessando a tela AlunoŠ, com os campos
ŚNovo AlunoŠ
que detalha uma turma nome, username, e-mail
e botão ŚRegistrarŠ
O sistema direciona à
tela de ŚVincular Novas
AtividadesŠ, a qual lista
Um professor logado Pressiona o botão atividades cadastradas que
acessando a tela ŚVincular outras atividades não estão vinculadas àquela
que detalha uma turma à TurmaŠ turma, com opção de seleção,
nome, descrição, campo para
entrada de data limite e
botão ŚVincular AtividadesŠ
O sistema lista o nome dos
alunos da turma com status
da última submissão salva
Um professor logado Pressiona o botão
por ele àquela atividade,
acessando a tela ŚVer SubmissõesŠ
além de opções para baixar
que detalha uma turma em uma atividade
arquivo VCD e de Design
dos alunos que já submeteram
àquela atividade
Fonte: Autoria Própria
A escrita dos requisitos foi fundamental para deĄnir a criação dos componentes no
contexto de frontend, as requisições que devem estar previstas tanto em diferentes rotas
na API e quanto em comunicação ao banco de dados, além de demais métodos necessários,
no que tange ao backend e quais entidades devem existir em Banco para persistência
conveniente dos dados da aplicação.
Capítulo 3. Requisitos e EspeciĄcações 22
4 Tecnologias Utilizadas
4.1 Angular
O Angular (ŚAngular2Š ou ŚAngular2+Š) foi lançado em setembro de 2016 e se trata
de uma versão revolucionária do AngularJS, framework lançado em 2009 e que, devido
aos seus benefícios, foi posteriormente patrocinado pela Google. Desde sua versão anterior,
ele utiliza uma matriz de controladores e serviços com o intuito de criar aplicativos de
Śpágina únicaŠ, melhorando a experiência do usuário (SULTAN, 2017).
Tal framework possui diretivas de atributos, estruturais e até personalizadas que
aprimoram a capacidade dos elementos HTML, anexando comportamentos personalizados
à construção da tela. Além disso, o funcionamento de suas unidades-base (componentes)
combinam o elemento ŚViewŠ (arquivos estáticos referentes a construção da tela) e o
elemento ŚControllerŠ (código em linguagem de programação para que as ações resultantes
da interação em tela ocorram) em um só conteiner que lida com ambas as funcionalidades.
Ademais, o Angular, em relação a sua versão anterior, admite a utilização de
TypeScript, linguagem transpilada em JavaScript que possui o diferencial sobre essa última
de suportar ŚtipagensŠ de variáveis e classes (SULTAN, 2017).
No contexto da plataforma a qual se trata o presente trabalho, o Angular foi
utilizado para a implementação da interface gráĄca e de uma primeira camada de controle.
Foram criados componentes angular conforme as jornadas de usuário da Figura 1; foram
utilizadas as diretivas citadas, principalmente as estruturais, na construção das telas; e,
ainda, o suporte às classes do TypeScript permitiu que objetos trafegassem pelo frontend,
sendo utilizados para requisições à API, com atributos semelhantes aos objetos do backend.
Por sua vez, o Spring Boot foi projetado para simpliĄcação da utilização do Spring,
possuindo conĄguração automática, iniciador de dependências, possibilidade de controle
do aplicativo pelo console, etc (JOVANOVIĆ et al., 2017).
Neste projeto, foram utilizadas as facilitações citadas do Spring Boot sob um
projeto Maven. A injeção de dependência foi feita entre os componentes que constituem
diferentes camadas da arquitetura, as quais serão melhor explicadas no tópico que trata
do Projeto e Implementação do Backend, a orientação a objetos foi utilizada, de forma
que classes com nomes e atributos semelhantes às entidades de Banco foram criadas, a Ąm
de utilizar facilidades dos métodos JPA na camada de mapeamento.
4.3 ApiREST
APIRest trata-se de uma interface de programação de aplicações que utiliza o estilo
arquitetônico REST, o qual se trata de um estilo cliente-servidor sem estado que utiliza
restrições adicionais para conectar os componentes Web fornecendo uma interface uniforme.
Ele é caracterizado pelo uso de verbos HTTP (HTTP GET, POST, PUT, DELETE),
códigos de status autodescritivos para resposta e hipermídia como o mecanismo do estado
do aplicativo (DHALLA, 2021).
Para a API da aplicação em questão, foram utilizados os quatro verbos HTTP cita-
dos, os quais refletem alterações nos registros do Banco de Dados ao Ąm do processamento
dessas requisições de entrada, que chegam à API a partir do controle feito pelo frontend
após interações do usuário com a interface gráĄca.
4.4 MySQL
O MySQL trata-se de um servidor e gerenciador de Banco de Dados do tipo relaci-
onal, que possui licença de uso gratuita (MILANI, 2007). O tipo relacional é caracterizado
Capítulo 4. Tecnologias Utilizadas 25
pela representação dos dados em tabelas, nas quais cada linha é um registro que possui
uma chave única e as colunas são atributos quem compõem dados.
4.5 SystemVerilog
A linguagem de descrição de hardware SystemVerilog uniĄca design, especiĄcação e
veriĄcação de hardware e foi proposta para coexistir e aprimorar a HDL Verilog, buscando
aumento de produtividade. SystemVerilog permite veriĄcação em testbenchs com base em
metodologias manuais ou automáticas (IEEE. . . , 2018).
Devido ao fato da SystemVerilog derivar-se da Verilog, ensinada na graduação em
Engenharia Elétrica da UFCG, e ter a característica de suporte a testbenchs, constitui-se
como a HDL proposta e utilizada no contexto desta plataforma.
4.7 Fliplot
Fliplot é um projeto de código aberto (RACKS, 2021), disponível na Web, desen-
volvido utilizando Javascript e HTML com um backend em Python. Ele possui suporte a
arquivos VCD e uma interface gráĄca que permite análise de formas de onda ao longo do
tempo.
Considerando a possibilidade obter o arquivo VCD, com as formas de onda, ge-
rados pelo testbench em SystemVerilog, o projeto fliplot foi utilizado na aplicação como
visualizador externo para esses tipos de arquivo, havendo um botão para abrí-lo em uma
nova aba, após o arquivo VCD estar disponível para download pelo usuário.
4.8 Git
O sistema de armazenamento, organização, controle e versionamento utilizado no
contexto da implementação objeto deste trabalho foi o Git, ligado ao utilitário Github. O
Git apresenta licença de software livre e foi inicialmente idealizado por Linus Tovalds em
2005 para coordenação do desenvolvimento do Kernel do Linux (SPINELLIS, 2012).
Capítulo 4. Tecnologias Utilizadas 26
5 Projeto e Implementação
5.1 Backend
O Backend foi construído levando em consideração a arquitetura apresentada e,
dessa forma, o projeto foi dividido em três pastas principais:
• Controller: Pasta que se refere aos componentes de código referente às rotas da API,
deĄnindo a lógica de negócio do que estará disponível para consumo da API em
cada rota;
• Repository: Pasta que se refere aos componentes de código que se comunicam com o
Banco de Dados, a partir da utilização das tecnologias JPA e Hybernate (Camada
de Persistência).
• Model: Pasta que se refere aos componentes de código que são as classes dos objetos
que trafegam na aplicação;
necessária uma relação Śmuitos para muitosŠ - muitas turmas para muitas atividades. Dessa
forma, tal tabela têm os registro dos vínculos entre as duas tabelas, por meio das chaves
estrangeiras, e, ainda, o atributo de Śdata limiteŠ adicionado a essa vinculação, podendo
vincular prazos diferentes a turmas diferentes, mesmo sendo uma mesma atividade.
5.3 Telas
A interface foi dividida em duas visões: a do aluno e a do professor. Em um primeiro
momento, no entanto, independente do usuário, apresenta-se a tela de login (Figura 5), na
qual é possível entrar com dados válidos de usuário e senha, sendo direcionado, após isso,
para a área do aluno ou do professor.
Existe a opção, ainda, na tela de login de cadastrar-se na aplicação como professor.
O formulário de registro de novo professor gera uma requisição de adição de um professor
ao Banco de Dados com as características informadas.
temporário e fazer sua simulação por um Service no Backend, para análise de sintaxe e
validação do conteúdo.
O arquivo que deve ser adicionado no formulário da tela da Figura 10 serve para
especiĄcar as entradas que devem ser aplicadas ao ŚGolden DesignŠ, o qual se trata de
um módulo em SystemVerilog que possui o comportamento que satisfaz o que o professor
espera na atividade, e ao design a ser submetido pelo aluno. Com as mesmas excitações,
os blocos poderão ter suas saídas comparadas, obtendo, assim, o status da submissão do
Capítulo 5. Projeto e Implementação 30
aluno. Dessa forma, o conteúdo desse arquivo de texto servirá para a elaboração de um
arquivo testbench em SystemVerilog que faz tais comparações em momentos desejados.
O arquivo em questão deve ter formato de texto e ter a característica de a cada
linha listar valores em decimal ou a palavra ŚrandŠ, caso se queira excitar a entrada naquele
caso com um valor aleatório, para as entradas especiĄcadas na primeira tela de adição
de atividade, em ordem, separados por Ś_Š. Tratando-se de uma atividade que requer um
Capítulo 5. Projeto e Implementação 31
bloco sequencial, além de um valor para cada entrada, deve haver o símbolo Ś#Š, ao Ąm
da linha, seguido da quantidade de clocks que devem passar para que a comparação das
saídas seja feita. O testbench gerado pode ser conferido pelo usuário na tela de conĄrmação
de criação da atividade.
A outra opção na área do professor, conforme detalhado na Tabela 1, é a de listar
as turmas relacionadas a ele, existindo a opção de detalhar uma turma em especíĄco, com
a lista de alunos a de atividades que se referem a ela (Figura 12), de adicionar turma e de
excluir uma existente.
Capítulo 5. Projeto e Implementação 32
Para uma turma em especíĄco, é possível adicionar alunos relacionados a ela, por
meio de uma tela de cadastro de ŚNovo AlunoŠ e de ŚVincular outras Atividades à TurmaŠ,
por meio de uma tela em que atividades não pertencentes àquela turma são listadas para
seleção, havendo adição de uma data limite para submissão dos alunos (Figura 13).
Existe, ainda, a opção de visualização das submissões dos alunos daquela turma a
cada atividade a ela associada, conforme é observado na Figura 14.
Capítulo 5. Projeto e Implementação 33
salvo em diretório especíĄco com o nome conforme em Banco de Dados, gerando o arquivo
de formas de onda de extensão VCD e o status da submissão do aluno, os quais serão
disponibilizados em tela conforme Figura 16, com a saída do simulador, caso tenha, e
o botão para abrir em outra aba a aplicação Fliplot para visualizar as formas de onda
geradas.
Apenas após o usuário apertar o botão ŚSubmeterŠ, a submissão em questão será
salva em Banco de Dados e o arquivo em diretório apropriado, com a denominação também
Capítulo 5. Projeto e Implementação 35
6 Conclusão
Referências
AYODELE, K. P.; INYANG, I. A.; KEHINDE, L. O. An ilab for teaching advanced logic
concepts with hardware descriptive languages. IEEE Transactions on Education, v. 58,
n. 4, p. 262Ű268, 2015. Citado na página 15.
BECKER, K. A web based tool for teaching hardware design based on the plain simple
hardware description language. In: 2014 IEEE Global Engineering Education Conference
(EDUCON). [S.l.: s.n.], 2014. p. 88Ű93. Citado na página 14.
CANESCHE, M. et al. Google colab cad4u: Hands-on cloud laboratories for digital design.
In: 2021 IEEE International Symposium on Circuits and Systems (ISCAS). [S.l.: s.n.],
2021. p. 1Ű5. Citado na página 15.
IEEE Standard for Verilog Hardware Description Language. IEEE Std 1364-2005
(Revision of IEEE Std 1364-2001), p. 1Ű590, 2006. Citado na página 25.
JOVANOVIĆ, Ž. et al. Java spring boot rest web service integration with java artiĄcial
intelligence weka framework. In: International ScientiĄc Conference ŞUNITECH 2017.
[S.l.: s.n.], 2017. p. 323Ű327. Citado 2 vezes nas páginas 23 e 24.
LUKOVIć, V. et al. The remote lab Şnexys 2 fpga platformŤ aimed for learning design of
digital circuits. In: 2017 4th Experiment@International Conference (exp.atŠ17). [S.l.: s.n.],
2017. p. 101Ű102. Citado na página 15.
Referências 38
MORGAN, F. et al. Vicilogic 2.0: Online learning and prototyping of digital systems
using pynq-z1/-z2 soc. In: 2018 International Symposium on Rapid System Prototyping
(RSP). [S.l.: s.n.], 2018. p. 76Ű82. Citado na página 14.
MOSBECK, M.; HAUER, D.; JANTSCH, A. Vels: Vhdl e-learning system for automatic
generation and evaluation of per-student randomized assignments. In: 2018 IEEE Nordic
Circuits and Systems Conference (NORCAS): NORCHIP and International Symposium of
System-on-Chip (SoC). [S.l.: s.n.], 2018. p. 1Ű7. Citado 2 vezes nas páginas 15 e 16.
SINGER, J. Jvm versus clr: a comparative study. In: CITESEER. Proceedings of the 2nd
international conference on Principles and practice of programming in Java. [S.l.], 2003. p.
167Ű169. Citado na página 23.
SULTAN, M. Angular and the trending frameworks of mobile and web-based platform
technologies: A comparative analysis. In: Proc. Future Technologies Conference. [S.l.: s.n.],
2017. p. 928Ű936. Citado na página 23.