TCC_Tecnologia_da_Informacao_e_Comunicacao_Igor_Pires_da_Silva

Prévia do material em texto

UNIVERSIDADE FEDERAL DE SANTA CATARINA 
CAMPUS ARARANGUÁ 
CENTRO DE CIÊNCIAS, TECNOLOGIAS E SAÚDE 
CURSO DE TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO 
 
 
 
 
 
Igor Pires da Silva 
 
 
 
 
 
 
 
SABEPI: Sistema avaliativo baseado em peer instruction 
 
 
 
 
 
 
 
 
 
 
 
 
 
Araranguá 
2022 
 
 
Igor Pires da Silva 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SABEPI: Sistema avaliativo baseado em peer instruction 
 
 
 
 
 
 
 
Trabalho Conclusão do Curso de Graduação em 
Tecnologias da Informação e Comunicação do Centro 
de Ciências, Tecnologias e Saúde da Universidade 
Federal de Santa Catarina como requisito para a 
obtenção do título de Bacharel em Tecnologias da 
Informação e Comunicação. 
Orientador: Prof. Cristian Cechinel, Dr. 
 
 
 
 
 
 
 
Araranguá 
2022 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Igor Pires da Silva 
 
 
Sabepi: Sistema avaliativo baseado em Peer Instruction 
 
 
Este Trabalho de Conclusão de Curso foi julgado adequado para obtenção do Título de 
Bacharel em Tecnologias da Informação e Comunicação e aprovado em sua forma final pelo 
Curso de Tecnologias da Informação e Comunicação. 
 
Araranguá, 15 de dezembro de 2022 
 
 
 
________________________ 
Prof. Vilson Gruber, Dr. 
Coordenador do Curso 
 
Banca Examinadora: 
 
 
 
________________________ 
Prof. Cristian Cechinel, Dr. 
Orientador 
Universidade Federal de Santa Catarina 
 
 
 
________________________ 
Prof. Fabrício Herpich, Dr. 
Avaliador 
Universidade Federal de Santa Catarina 
 
 
 
________________________ 
Prof. Vinicius Faria Culmant Ramos, Dr. 
Avaliador 
Universidade Federal de Santa Catarina 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Dedico este trabalho aos meus queridos pais. 
 
 
RESUMO 
 
Introdução: O peer struction é uma metodologia ativa através da instrução em pares que visa 
melhorar a aprendizagem do aluno em sala. Pode ser aplicada de forma simples, em papel, 
mas a ferramenta tecnológica pode otimizar o processo de aplicação e correção. Objetivo: 
Elaborar um sistema web, utilizando a metodologia peer instruction como base para a 
modelagem do sistema. Metodologia: Para elabora o sistema, foi utilizado a metodologia ágil 
Kanban através do processo just in time, ajustando as atividades por demanda. Tecnologias: 
Para desenvolver a aplicação foi utilizado o framework Ruby on Rails e Boostrap. Para 
atualizar partes da página sem a necessidade de atualizá-la por completo, foi utilizado jQuery. 
Limitações: O tempo foi um grande limitador para concluir este projeto. Possibilidades 
Futuras: Transformar a aplicação em um API, adicionar novas funcionalidades, como agrupar 
alunos que divergem em suas respostas, adicionar um chat para que seja possível discutir suas 
respostas. 
 
 
Palavras-chave: peer instruction. Metodologias ativas. Software. 
 
 
 
 
 
ABSTRACT 
 
Introduction: Peer instruction is an active methodology through instruction in pairs that aims 
to improve student learning in the classroom. It can be applied simply, on paper, but the 
technological tool can optimize the application and correction process. Objective: Develop a 
web system, using the peer instruction methodology as a basis for system modeling. 
Methodology: To develop the system, the agile Kanban methodology was used through the 
just in time process, adjusting activities according to demand. Technologies: To develop the 
application, the framework Ruby on Rails and Boostrap were used. To update parts of the 
page without the need to update it completely, jQuery was used. Limitations: Time was a 
major constraint to complete this project. Future Possibilities: Transform the application into 
an API, add new features, such as grouping students who differ in their answers, adding a chat 
so that it is possible to discuss their answers. 
 
Keywords: peer construction. Active methodologies. Software. 
 
 
 
 
 
 
LISTA DE FIGURAS 
 
Figura 1 Diagrama do processo de implementação do peer instruction .................... 18 
Figura 2 - Aluno se identificando para acessar uma sala Kahoot............................... 20 
Figura 3 – Quadro Kanban ......................................................................................... 22 
Figura 4 – Quadro Kanban SABEPI .......................................................................... 23 
Figura 5 – Fluxo de uma requisição em uma aplicação Rails .................................... 25 
Figura 6 – Parte de uma tarefa que cria administradores falsos. ................................ 27 
Figura 7 – Parte do modelo relacional do presente sistema ....................................... 28 
Figura 8 – Exemplo de uma tabela HTML usando DataTable ................................... 29 
Figura 9 – Processo de identificação de um aluno ..................................................... 31 
Figura 10 – Cadastrando uma pergunta ...................................................................... 32 
Figura 11 – Cadastro de uma turma ........................................................................... 32 
Figura 12 – Lista de turmas ........................................................................................ 33 
Figura 13 – Lista das últimas aulas ............................................................................ 33 
Figura 14 – Configurando uma aula ........................................................................... 34 
Figura 15 – Exemplo genérico utilizando o comando generate model ...................... 35 
Figura 16 – Migration gerada pelo comando generate ............................................... 35 
Figura 17 – Modelo lógico ......................................................................................... 36 
Figura 18 – Tabela User ............................................................................................. 37 
Figura 19 – Tabela Classroom .................................................................................... 37 
Figura 20 – Tabela Class_occurrence......................................................................... 38 
Figura 21– Utilizando um relacionamento para selecionar um registro..................... 38 
Figura 22– Tabelas Subject e Course ......................................................................... 39 
Figura 23– Tabelas Topic ........................................................................................... 39 
Figura 24– Tabelas Answer_occurrence .................................................................... 40 
Figura 25– Tabelas Answer ........................................................................................ 40 
Figura 26– Tabelas Answer ........................................................................................ 41 
Figura 27 – Página inicial do sistema ......................................................................... 42 
Figura 28 – Lista de cursos cadastrados ..................................................................... 43 
Figura 29 – Cadastro de uma pergunta ....................................................................... 44 
Figura 30 – Listagem de perguntas ............................................................................ 45 
Figura 31 – Listagem de professores .......................................................................... 45 
 
 
Figura 32 – Menu lateral de navegação ...................................................................... 46 
Figura 33 – Criação de uma sala ................................................................................ 47 
Figura 34 – Salas de um professor ............................................................................. 48 
Figura 35 – Iniciando uma nova aula .........................................................................48 
Figura 36 – A visão de um professor dentro de uma aula .......................................... 49 
Figura 37 – Pagina inicial do sistema ......................................................................... 50 
Figura 38 – Identificação do aluno ............................................................................. 50 
Figura 39 – Visão do aluno após se identificar .......................................................... 51 
Figura 40 - Exemplo de uma chamada de retorno ...................................................... 52 
Figura 41 - Controlador da área administrativa .......................................................... 53 
Figura 42 – Controlador responsável pelos administradores .................................... 53 
Figura 43 – Controladores da área admirativas .......................................................... 54 
Figura 44 – Parte do código do controlador de ocorrências de aulas ......................... 55 
Figura 45 – Modelo Classroom .................................................................................. 56 
Figura 46 – Parte da estrutura de view ....................................................................... 57 
Figura 47 – Edição de um curso ................................................................................. 57 
Figura 48 – Layout área administrativa ...................................................................... 58 
 
 
 
 
LISTA DE TABELAS 
 
Tabela 1– Comparação com outras ferramentas ........................................................ 58 
Tabela 2 – Custo médio para hospedar um aplicativo Rails ...................................... 59 
 
 
 
 
 
 
 
 
 
LISTA DE ABREVIATURAS E SIGLAS 
 
MVC Model-View-Controller 
SABEPI Sistema avaliativo baseado em peer instruction 
 
 
 
 
 
SUMÁRIO 
 
1 INTRODUÇÃO.................................................................................................... 15 
2 OBJETIVOS ........................................................................................................ 16 
2.1 Objetivo Geral ....................................................................................................... 16 
2.2 Objetivos Específicos ............................................................................................ 16 
3 REFERENCIAL TEÓRICO .............................................................................. 17 
3.1 PEER INSTRUCTION .......................................................................................... 17 
3.1.1 Definição e características ................................................................................... 17 
3.1.2 Onde é utilizado ................................................................................................... 18 
3.1.3 Necessidade de ferramentas auxiliares .............................................................. 18 
3.2 Ferramentas similares ............................................................................................ 19 
3.2.1 Kahoot ................................................................................................................... 19 
3.2.2 Socrative ............................................................................................................... 20 
3.2.3 Google Forms ....................................................................................................... 21 
4 Metodologia .......................................................................................................... 21 
4.1 delineamento do estudo ......................................................................................... 21 
4.2 Tecnologias utilizadas ........................................................................................... 23 
4.2.1 Ruby ...................................................................................................................... 24 
4.2.1.1 RubyGem................................................................................................................ 24 
4.2.1.1.1 Ruby on Rails ........................................................................................................ 24 
4.2.1.1.2 Devise .................................................................................................................... 26 
4.2.1.1.3 Pg ........................................................................................................................... 26 
4.2.1.1.4 Faker ...................................................................................................................... 27 
4.2.1.1.5 Cocoon ................................................................................................................... 27 
4.2.1.1.6 Jquery-datatables ................................................................................................... 28 
4.2.2 Npm ....................................................................................................................... 29 
4.2.2.1 Bootstrap................................................................................................................ 30 
 
 
4.2.2.2 jQuery .................................................................................................................... 30 
4.3 Prototipação ........................................................................................................... 30 
4.4 Descrição do modelo da base de dados ................................................................. 34 
4.4.1 Tabela User........................................................................................................... 36 
4.4.2 Tabela Classroom ................................................................................................ 37 
4.4.3 Tabela Class_occurrence..................................................................................... 37 
4.4.4 Tabela Subject e Course ...................................................................................... 38 
4.4.5 Tabela Topic ......................................................................................................... 39 
4.4.6 Tabela Answer_occurrence................................................................................. 39 
4.4.7 Tabela Answer ..................................................................................................... 40 
4.4.8 Tabela Question ................................................................................................... 40 
4.5 Ferramenta implementada ..................................................................................... 41 
4.5.1 Funcionalidades ................................................................................................... 41 
4.5.1.1 Admins_backoffice ................................................................................................. 42 
4.5.1.2 users_backoffice .................................................................................................... 46 
4.5.1.3 Site ......................................................................................................................... 49 
4.5.2 Código implementado .......................................................................................... 51 
4.5.2.1 Controllers ............................................................................................................. 52 
4.5.2.1.1 AdminsBackoffice Controller ................................................................................ 52 
4.5.2.1.2 UsersBackoffice Controller ................................................................................... 54 
4.5.2.2 Models.................................................................................................................... 55 
4.5.2.3 Views ...................................................................................................................... 56 
5 Considerações finais ............................................................................................58 
5.1 Limitações.............................................................................................................. 59 
5.2 Possibilidades futuras ............................................................................................ 60 
REFERÊNCIAS ................................................................................................... 61 
15 
 
1 INTRODUÇÃO 
 
O peer instruction é uma metodologia ativa que surgiu na década de 90, elaborada 
por Eric Mazur, Professor de física na universidade Harvard. Ao perceber que seus alunos não 
conseguiam resolver questões complexas de física, pelo fato de: Não terem noções 
consolidadas sobre o assunto, haja vista que estavam apenas decorando as formulas. Então, 
Mazur, decide testar métodos diferentes de ensinar (MAZUR; SOMERS, 1999). 
Conhecido no Brasil como instrução em pares, sua aplicação é bem simples e ajuda o 
professor a guiar sua aula, antes da mesma ocorrer, os alunos recebem os assuntos a serem 
discutidos em aula e devem ler e absorver. Em sala, o docente apresenta uma questão, que 
servirá para validar o entendimento de sua turma sobre o tópico que será abordado. Após 
verificar quantos alunos acertaram, é analisado quanto isso representa sobre o total da turma. 
Os dados são utilizados para guiar os próximos passos do professor e o rumo que a aula 
seguirá. 
 O problema surge nessa etapa, o professor precisa, constantemente, verificar a 
porcentagem de acerto de cada questão, isso dará a direção de como a aula deve prosseguir. 
Além de aplicar a questão, ainda é preciso recolher a resposta de cada aluno e validar o 
conhecimento. No início da metodologia, Mazur, utilizava cartões para realizar as validações 
e verificar o conhecimento de sua turma. Todo esse processo é extremante simples, porém, 
aplicá-lo sem as ferramentas corretas, torna o processo burocrático e extenso. 
 As mudanças na forma de ensinar estão acontecendo a bastante tempo, as 
metodologias ativas são muito promissoras e as tecnologias da informação e comunicação são 
um grande aliado nessa transformação. A falta de ferramentas, gratuitas, para auxiliar a 
aplicação do peer instruction e a ascensão do ensino a distância motivaram a elaboração desta 
pesquisa. O presente trabalho tem como objetivo minimizar os esforços durante a aplicação 
do peer instruction em sala aula, a proposta é elaborar um sistema web que facilite sua 
aplicação, tornando as aulas mais dinâmicas, ajudando o professor a identificar as lacunas 
presentes no conhecimento dos seus alunos. O maior proposito é oferecer uma ferramenta 
gratuita, de código livre, que todas as instituições possam utilizar. 
 
 
16 
 
2 OBJETIVOS 
 
2.1 OBJETIVO GERAL 
 
Desenvolver um sistema web baseado na metodologia peer instruction, que permita 
o gerenciamento eficiente de uma base de dados com questões separadas por curso, disciplina 
e assunto, e que possibilite ao professor criar salas para que os alunos possam responder a 
determinadas questões e visualizar o percentual de acerto da turma em relação ao tema 
apresentado. 
 
 
2.2 OBJETIVOS ESPECÍFICOS 
 
Modelar um banco de dados que supra as necessidades da aplicação; 
Elaborar um quadro Kanban que auxilie o desenvolvimento do sistema web; 
Criar um protótipo das telas, de baixa fidelidade para facilitar o desenvolvimento; 
Desenvolver um sistema que otimize a aplicação do peer instruction. 
 
 
17 
 
3 REFERENCIAL TEÓRICO 
 
3.1 PEER INSTRUCTION 
 
3.1.1 Definição e características 
 
O método peer instruction, consiste na otimização do tempo em aula, desta forma, os 
discentes recebem o material de conteúdo para leitura anteriormente, para que a aula seja 
utilizada para aprofundar a discussão do material lido. Esse método tira a responsabilidade do 
docente de replicar informações que já estão documentadas e consolidadas, deixando de ser 
uma aula passiva, e tornando-se ativa através da interação proporcionada pelo conhecimento 
da leitura prévia. (ARAUJO; MAZUR, 2013) 
A aula é segmentada em pequenas apresentações orais, cerca de 15 minutos, logo 
após, é apresentando um teste conceitual, geralmente de múltipla escolha, que deve ser 
respondido individualmente. O objetivo deste teste é avaliar a compreensão da turma, tendo 
duração de aproximadamente 2 minutos. Após o teste, sem indicar a resposta correta, é feito 
um levantamento em porcentagem, de acertos da turma, esta informação guiará a tomada de 
decisão seguinte. Então, se a porcentagem de acertos for menor que 30%, os conceitos são 
reapresentados e é feito um novo teste conceitual, reiniciando o processo. Se as respostas 
estiverem entre 30% e 70%, deve-se agrupar os alunos em pequenos grupos (até 5 pessoas), é 
recomendando que o agrupamento seja feito com alunos que discordem na resposta, para que 
eles possam debater e tentem convencer uns aos outros, dependendo do nível do debate, essa 
tarefa pode durar de 3 a 5 minutos. Após o debate, a mesma questão é reaplicada e explicada 
pelo professor. Nesse momento, o professor decide se aplica um novo teste conceitual, sobre o 
mesmo assunto, ou passa para o próximo tópico, que é caso atinja mais que 70%, a questão é 
explicada e um novo tópico é abordado, reiniciando a metodologia (ARAUJO; MAZUR, 
2013). Na figura 1 é possível verificar o fluxo de a aplicação da metodologia. 
 
18 
 
Figura 1 Diagrama do processo de implementação do peer instruction 
 
Fonte: Mansur, Araújo, 2013. 
 
3.1.2 Onde é utilizado 
 
O peer instruction pode ser utilizado em diferentes etapas do ensino, o único 
requisito é que o aluno esteja comprometido com o seu conhecimento, é necessário que o 
mesmo se torne ativo durante o processo de aprendizagem. 
Existe uma grande quantidade de estudos provando sua eficiência, em diferentes 
áreas do conhecimento. Segundo Rachelli e Bisognin (2020), em uma experiência no ensino 
de cálculo, utilizando como base o peer instruction, de 41 alunos matriculados na disciplina 
de cálculo A, aproximadamente, 68% obtiveram aprovação, levando em consideração a taxa 
de aprovação desta disciplina, chegaram à conclusão que a aplicação da metodologia foi bem 
satisfatória. Em outro estudo, Diemer, Bercht, Canto Filho e Schorr (2020), aplicaram a 
metodologia em turmas de algoritmos e programação, o grupo experimental apresentou um 
desempenho superior aos demais estudante, chegando à conclusão que era possível aplicar a 
metodologia no ensino de programação. 
 
3.1.3 Necessidade de ferramentas auxiliares 
 
19 
 
Considerando que cada aluno é requisitado a pensar sobre o assunto e indicar a 
alternativa correta, baseado no texto complementar passado pelo professor antes da aula, a 
necessidade de uma ferramenta para validar o conhecido do discente é de extrema 
importância. 
De acordo com Araujo e Mazur (2013), para validar o entendimento dos alunos sobre 
os assuntos abordados durante as aulas, se faz necessário a utilização de algum tipo de 
ferramenta, que podem ser cartões de resposta ou algum tipo de dispositivo individual, para 
que os alunos consigam indicar sua resposta. Em 2013, Araujo e Mazur já pensavam na 
utilização de algum tipo de dispositivo móvel para facilitar a aplicação. Atualmente, a grande 
maioria dos alunos possuem um smartphone, o que facilita a utilização de sistema para aplicar 
tal metodologia. 
 
3.2 FERRAMENTAS SIMILARES 
 
3.2.1 Kahoot 
 
O Kahoot (2022) é um ferreamente online que permite realizar perguntas e resposta 
direto do seu dispositivo, é uma ótima alternativa para aplicar o peer instruction, ele apresenta 
um sistema gamificado e permite que os alunos joguem enquanto respondem as perguntas, o 
sistema também possui tecnologia assistiva, o que facilita a utilização de pessoas com 
deficiência visual. 
 Segundo um vídeo tutorial do Kahoot (2022), para iniciar uma roda de perguntas, o 
professor deve selecionar a aba "Kahoots"na parte superior esquerda do web site. Ao entrar 
na página, o mesmo deve selecionar um tema e na página seguinte, configurar a sala, é 
possível escolher entre os modos Classic ou Team mode e fazer alguns ajustes finos. Após a 
configuração, o professor é direcionado para uma sala que contém um código de acesso 
chamado Game PIN, então, o professor deve passar este para a sala, que deve acessar o site e 
na parte superior direita, entrar na aba Play, nesta página o aluno deve inserir o código de 
acesso e logo após seu nome (Figura 2), nesta etapa, o mesmo está pronto para responder as 
questões, bastando apenas o professor iniciar a rodada. 
 
20 
 
Figura 2 - Aluno se identificando para acessar uma sala Kahoot 
 
Fonte: KAHOOT, 2022. 
 
No entanto é um programa pago, e a sua versão gratuita é limitada. Para adquirir uma 
licença para apenas um professor, é necessário pagar $ 25 dólares por mês ou então 300 
dólares anuais (KAHOOT, 2022). 
 
3.2.2 Socrative 
 
O Socrative é bem parecido com o primeiro exemplo. Segundo alguns relatos de 
usuários, na página de ensino superior, professores descrevem o quão prático é utilizar a 
ferramenta durante as aulas, obtendo sucesso em aplicar o peer instruction (SHOWBIE, 
2022). 
O mesmo problema ocorre com o produto da empresa Showbie (2022), sua versão 
gratuita é limitada. A emprese oferece alguns tipos de planos, o mais barato, que oferece 
apenas um acesso, custa $ 89,99 dólares por ano. Em seu site, na página de vendas, Showbie 
(2022) oferece um desconto por volume, a partir de três professores, porém não consta 
informações sobre o valor final, para tal conhecimento, se faz necessário entrar em contato 
com a central de vendas. 
 
21 
 
3.2.3 Google Forms 
 
O Google Forms é uma ferramenta online que permite a criação de formulários, com 
objetivo de auxiliar pesquisas envolvendo estatística, possui uma plataforma bem intuitiva. 
Segundo a Google Llc (2022), é possível criar formulários personalizados, escolhendo: cor, 
fonte e adicionar imagens. Além disso, a plataforma gera uma análise automática sobre as 
respostas, em tempo real, exibindo o resultado graficamente. A Google Llc (2022) informa 
que é possível criar e acessar os formulários de qualquer lugar, em qualquer dispositivo. 
O produto da Google Llc (2022) é o mais simples entre os exemplos expostos na 
presente pesquisa, porém, sua versão gratuita serve perfeitamente para aplicar o peer 
instruction. O maior problema em usar o Google Forms, é que ele não foi pensado para 
aplicar tal metodologia, isso torna sua utilização trabalhosa. 
 
4 METODOLOGIA 
 
4.1 DELINEAMENTO DO ESTUDO 
 
Para elaborar o sistema, foi utilizado a metodologia ágil Kanban, segundo a empresa 
Atlassian (2022) o Kanban tem se destacado entre as equipes de desenvolvimento de 
software, porém, ele surgiu no fim dos anos 1940, quando a Toyota começou a otimizar seus 
processos, baseando-se no mesmo processo que os supermercados usavam para abastecer suas 
prateleiras. Esse processo era dinâmico e se baseava na demanda de saída dos itens do 
estoque, fazendo com que ele não ficasse com um excesso de produtos, e mesmo assim, 
garantindo as necessidades dos consumidores. 
Quando a Toyota passou a aplicar esse sistema no chão de suas fábricas, para 
repassar os níveis de estoque, em tempo real, entre os seus funcionários e fornecedores, era 
utilizado um cartão (Kanban). Quando um contêiner, com os materiais utilizados na linha de 
produção se esvaziava, um cartão (Kanban) era passado para o estoque, descrevendo a 
quantidade exata de materiais para dar continuidade na linha produção, por sua vez, o estoque 
repassava um cartão (Kanban) para o fornecedor dando continuidade no fluxo dinâmico de 
produtos. Esse processo vem sendo evoluído desde a década de 1940 e ficou conhecido como 
just in time que em tradução livre significa "na hora certa". 
22 
 
Nos dias atuais, as equipes de desenvolvimento de software continuam aproveitando 
esse processo just in time, ajustando as atividades por demanda e capacidade das equipes. 
Esse processo torna o desenvolvimento flexível, rápido e claro durante todo ciclo de vida do 
software. As atividades das equipes giram em torno do "quadro do Kanban", esse quadro pode 
ser tanto digital, como físico. Sua funcionalidade é garantir que toda a equipe consiga 
visualizar o fluxo de desenvolvimento e, com facilidade, analisar as dependências que 
bloquem atividades subsequentes. Um quadro básico do Kanban gira em torno de três etapas: 
A fazer, em andamento e feito (ATLASSIAN, 2022). 
 
Figura 3 – Quadro Kanban 
 
Fonte: ATLASSIAN, 2022. 
 
Segundo Atlassian (2022), em japonês, a palavra Kanban é traduzida literalmente 
como "sinal visual", a Figura 3 exemplifica um quadro virtual, o mesmo, possui uma etapa a 
mais e isso é totalmente normal, a estrutura depende da complexidade do projeto e os 
processos intermediarias podem varias, dependendo do contexto. O code review é um 
processo em que o código gerado por um programador, passa por uma análise feita por outro 
funcionário e se for aprovado, passa a fazer parte do código fonte. 
Para montar um quadro Kanban, o projeto é quebrado em várias etapas, quanto 
menos complexo, melhor. Cada cartão carrega uma etapa do projeto com suas respectivas 
23 
 
atividades, nele fica marcado o responsável pela atividade, uma breve descrição da tarefa e 
uma estimativa de tempo para ser concluída. 
 
Figura 4 – Quadro Kanban SABEPI 
 
Fonte: Autor, 2022. 
 
A figura 4 mostra o quadro Kanban, que foi desenvolvido utilizando a ferramenta 
Trello, do presente projeto. As etapas de desenvolvimento foram quebradas em pequenas 
tarefas e adicionadas na lista de "A fazer", quando a tarefa é iniciada, ela é arrastada para lista 
"Em andamento" e quando é finalizada, arrastada para "Feito". 
 
4.2 TECNOLOGIAS UTILIZADAS 
 
24 
 
4.2.1 Ruby 
 
De acordo com a Comunidade Ruby (2022), a linguagem foi criada por Yukihiro 
Matsumoto, com a união de suas linguagens favoritas, ele se inspirou no Perl, Smalltalk, 
Eiffel, Ada e Lisp, sua intenção era criar uma linguagem que unisse programação funcional 
com programação imperativa. O maior objetivo era tornar o Ruby simples na aparência e 
complexo no seu interior, com o intuito de trazer a linguagem o mais próximo da realidade. 
A linguagem surgiu em 1995, e se tornou popular em 2006, com usuários espalhados 
por todo o mundo. Grande parte de seu sucesso veio por conta de sua licença totalmente 
gratuita e livre de custos, a linguagem é flexível, nela, é possível alterar, remover e adicionar 
novas funcionalidades, o Ruby é totalmente mantido por sua comunidade. No Ruby tudo é um 
objeto, Yukihiro queria uma linguagem interpretada que fosse melhor que Perl e mais 
orientada a objeto que Python, até mesmo os números e tipos primitivos são objetos em Ruby 
(COMUNIDADE RUBY, 2022). O presente trabalho utilizou a versão 2.5.1. 
 
4.2.1.1 RubyGem 
 
Assim como a maioria das linguagens, Ruby conta com várias bibliotecas, por 
padrão, a linguagem vem com o gerenciador de pacotes, desde a versão 1.9, chamado 
RubyGems, um sistema que facilita a instalação, criação e compartilhamento de bibliotecas. 
As bibliotecas são chamadas de "gem", que em português significa gema ou joia, e o principal 
local de armazenamento é o site rubygems.org (COMUNIDADE RUBY, 2022). 
Uma boa prática, antes de adicionar uma gem em seu projeto, é verificar o número de 
downloads e o ano da última atualização, isso garante com que não sejam adicionadas 
bibliotecas que estão desatualizadas ou obsoletas. 
 
4.2.1.1.1 Ruby on Rails 
 
Uma das gems mais famosas do Ruby, é Rails. Assim como o Ruby, o Rails é 
mantido pela comunidade e possui o código livre para distribuição e modificação. De acordo 
com o guia para iniciante, mantido pela Comunidade Rails (2022), o Ruby on Rails é um 
framework de desenvolvimentoweb, que foi projetado para facilitar a criação de aplicações 
web. O Rails assume que existe a melhor maneira de fazer as coisas e foi projetado para 
25 
 
seguir essa maneira, sua filosofia é forte e indica que caso não seja seguida, o programador 
não terá uma boa experiencia, as duas principais são: Não se repita – cada parte do código 
deve ser única; Convenção sobre configuração - como foi dito antes, o Rails assume várias 
coisas, e uma delas é um conjunto de convenções que faz com que o início de um projeto seja 
muito mais rápido, realizando as melhores configurações, tirando a responsabilidade do 
programador de fazer uma infinidade de configurações que sempre se repetem, indo de acordo 
com a primeira filosofia. 
Sua arquitetura segue o padrão MVC (Model-View-Controller), esse padrão de 
design divide as responsabilidades da aplicação. O model fica responsável por interagir com o 
banco de dados, por sua vez, a view é responsável por exibir as informações para o usuário e o 
controller fica responsável pelo controle da informação entre o model e a view. 
 
Figura 5 – Fluxo de uma requisição em uma aplicação Rails 
 
Fonte: Autor, 2022. 
 
A figura 5 exemplifica uma requisição feita por um usuário, supondo que essa 
solicitação seja para acessar a página inicial da aplicação, utilizando o protocolo HTTP, a 
requisição chega no ActionDispatch, que é responsável por gerenciar as rotas, ele verifica 
qual controller deve ser acionado e qual ação do controller deve ser executada. No nosso 
exemplo, o controller "Home" e a ação "index" foram requisitadas pelo usuário, então, o 
26 
 
método index e executado e caso haja algum dado que deve ser recuperado na base de dados, 
o controller solicita essa informação para o ActiveRecord, os dados são retornados para o 
controller, que por sua vez, passa para o ActionView, que irá renderizar essa informação 
dentro de um arquivo HTML e devolver para o controller, que retorna para o cliente a página 
solicitada. 
 
4.2.1.1.2 Devise 
 
O Devise é uma gem feita para o Rails, com o intuito de acelerar o processo de 
autenticação de uma aplicação, é uma biblioteca robusta e bastante utilizada, sua distribuição 
principal possui aproximadamente 130 milhões de downloads e é constantemente atualizada 
pela comunidade. 
De acordo a Comunidade Devise (2020), a biblioteca conta com 10 módulos: 
• Database Authenticatable: Gera um hash da senha e armazena no banco de 
dados para validar a autenticidade de um usuário durante o login; 
• Omniauthable: Adiciona suporte para OmniAuth, uma biblioteca que permite a 
autenticação utilizando um registro de outro provedor, por exemplo, acessar 
um sistema utilizando sua conta Google; 
• Confirmable: Envia e-mails com instrução de confirmação de uma conta e 
verifica se ela já foi confirmada durante o processo de login; 
• Recoverable: Redefine a senha do usuário, além de enviar por e-mail 
instruções para redefinição; 
• Registerable: Gerencia a inscrição dos usuários, através de um processo de 
registro, possibilitando edição e destruição de suas contas; 
• Rememberable: Gera e limpa tokens de usuário criados nos cookies; 
• Trackable: Rastreia a contagem de logins, com data, hora de login e endereço 
de IP; 
• Timeoutable: Expira as sessões que não estão ativas em um período pré-
definido; 
• Validatable: Fornece validação de e-mail e senhas. É opcional e pode ser 
personalizado com as próprias validações; 
• Lockable: Bloqueia uma conta após um número especificado de tentativas de 
login com falha. Possibilitando o desbloqueio por tempo ou por um envio de e-
mail de verificação. 
 
4.2.1.1.3 Pg 
 
O pg é uma interface Ruby para o sistema de gerenciamento de banco de dados 
relacional do PostgreSQL que facilita a comunicação entre ambas tecnologias (PG, 2019). 
27 
 
A ferramenta PostgresSQL possui mais de 30 anos de desenvolvimento ativo, o que 
lhe rendeu fama, confiabilidade, uma enorme quantidade de recursos e desempenho, ele 
também possui código fonte aberto (THE POSTGRESQL GLOBAL DEVELOPMENT 
GROUP, 2022). 
 
4.2.1.1.4 Faker 
 
De acordo com a Comunidade Faker (2022), esta gem foi portada da biblioteca de 
dados do Perl, que gera dados falsos. Uma gem é útil na hora de preencher a base de dados 
para efetuar teste de implementação, com ela é possível preencher a base com uma infinidade 
de dados, que vão desde endereços fictícios, até informações de programas de televisão. 
Figura 6 – Parte de uma tarefa que cria administradores falsos. 
 
Fonte: Autor, 2022. 
 
A figura 6 mostra um trecho de código que gera administradores falsos, ele é 
executado 20 vezes, apenas no ambiente de desenvolvimento, utilizando os métodos da gem 
Faker para criar o nome e e-mail do administrador. 
 
4.2.1.1.5 Cocoon 
 
Esta gem, segundo Auwera (2010), facilita a criação de formulários aninhados, ao 
invés de cadastrar uma informação por vez, é possível enviar quantas informações for 
necessário. 
28 
 
Figura 7 – Parte do modelo relacional do presente sistema 
 
Fonte: Autor, 2022 
Na figura 7 é possível verificar esta situação, uma questão possui uma ou várias 
respostas. Usando a gem Cocoon, é possível cadastrar, na mesma tela, quantas alternativas for 
necessário. Esta prática reduz significativamente o número de telas de cadastro, acelerando o 
processo de desenvolvimento, melhorando a usabilidade do usuário. 
 
4.2.1.1.6 Jquery-datatables 
 
Esta gem facilita a instalação da ferramenta DataTables em um projeto Rails 
(ADNAN, 2022). De acordo com a empresa Sprymedia Ltd (2022), o objetivo do DataTables 
é aprimorar a acessibilidade dos dados em tabelas HTML. Com este recurso, o usuário final 
pode obter informações úteis, de forma rápida, a ferreamente possui ordenação, pesquisa e 
paginação. Com três linhas de código, é possível transformar uma tabela HTML padrão em 
uma tabela igual à da figura 8. 
 
29 
 
Figura 8 – Exemplo de uma tabela HTML usando DataTable 
 
Fonte: (SPRYMEDIA LTD, 2022) 
 
4.2.2 Npm 
 
O Npm é um gerenciador de pacotes Node.js, em sua documentação, Npm Inc (2022) 
afirma ser o maior registrador de bibliotecas do mundo, utilizado por desenvolvedores de 
código aberto no mundo todo, para compartilhar e emprestar pacotes. Para utilizar o Npm em 
empresas privadas, é necessário pagar uma taxa, porém se o código for público, o serviço é 
gratuito. O serviço é composto por três componentes: 
 
• O site: É utilizado para descobrir pacotes, configurar perfis e gerenciar os 
pacotes, é possível criar organizações, privadas ou públicas, para gerenciar os 
pacotes. 
• Interface de linha de comando (CLI): Este componente é executado a partir de 
um terminal e como a maioria dos desenvolvedores interagem com o Npm. 
• Registro: Um grande banco de dados público, onde ficam os códigos 
JavaScript e as informações que o cercam. 
 
30 
 
Ao utilizar o serviço, um arquivo chamado “package.json” é criado na raiz do 
projeto, nele ficam armazenados os pacotes utilizados com nome e versão, garantindo que ao 
ser compartilhado em outra máquina, todas dependências sejam instaladas, evitando erros. 
 
4.2.2.1 Bootstrap 
 
O Boostrap é um framework front-end, de código livre, para desenvolvimento web 
que acelera o desenvolvimento de forma fácil e rápida, criado em 2011 por Mark Otto e Jacob 
Thornton no Twitter. Inclui modelos de design em HTML e CSS, com fontes, formulários, 
botões, tabelas, navegação, modais, carrosséis de imagens entre outras funcionalidades, 
incluindo algumas funções opcionais que utilizam Javascript. Com ele é possível criar, de 
maneira ágil, sites responsivos, ou seja, que se adequam automaticamente ao tamanho da tela 
do usuário (REFSNES DATA, 2022). 
De acordo com o tutorial da Refsnes Data (2022), qualquer pessoa com 
conhecimentos básicos em HTML e CSS pode usar o Bootstrap, ele é sempre a maneira mais 
fácil de criar um site elegante, sem dificuldades,a grande maioria dos sites utilizam as classes 
Bootstrap. 
 
4.2.2.2 jQuery 
 
0 jQuery é uma biblioteca JavaScript, de fácil utilização é rica em funcionalidades, 
com ela é possível manipular documentos HTML de forma dinâmica, direto do navegador do 
cliente (OPENJS FOUNDATION, 2022). 
Os scripts adicionados, são carregados no navegador do cliente e são executados 
quando a condição é contemplada, por exemplo quando o usuário clica em um botão, o código 
é disparado sem a necessidade de recarregar a página inteirar, existem muitas funções que 
podem ser usadas para manipular a página, sem que o servidor seja requisitado, 
economizando recursos e processamento. 
 
4.3 PROTOTIPAÇÃO 
 
A figura 9 exemplifica a visão do aluno ao entrar em uma sala de aula, após se 
identificar, deve ser feita uma verificação na base de dados para validar se esse aluno já 
31 
 
existe, se ele não existir na base de dados, um novo aluno é criado, logo após, uma sessão 
com suas informações é criada. Caso ele já exista na base de dados, uma sessão com suas 
informações é iniciada. 
Após se identificar, é verificado se ele já respondeu à pergunta corrente e caso: já 
tenha respondido, uma mensagem é exibida, pedindo que ele aguarde uma nova questão; se 
não, a questão corrente é exibida até que o aluno de sua resposta. 
 
Figura 9 – Processo de identificação de um aluno 
 
Fonte: Autor, 2022 
 
A figura 10 ilustra a tela de cadastro de uma nova pergunta, elas podem ser 
cadastradas tanto pelos professores, quanto por administradores, porém, as disciplinas e os 
assuntos/temas, só podem ser cadastrados por administradores. Cada disciplina possui vários 
32 
 
temas e cada tema, possui várias perguntas. Uma pergunta pode ter N respostas, mas apenas 
uma pode estar correta. As perguntas ficam visíveis para todos os professores, isso facilita o 
preenchimento da base dados e torna o sistema colaborativo. 
 
Figura 10 – Cadastrando uma pergunta 
 
Fonte: Autor, 2022 
 
Um usuário professor, pode ter N salas, a figura 11 exemplifica o cadastro de uma 
nova turma, após inserir o nome, curso e disciplina, basta o docente clicar em salvar e sua 
nova sala estará criada. 
 
Figura 11 – Cadastro de uma turma 
 
Fonte: Autor, 2022 
 
33 
 
Após cadastrar uma turma é possível acessar a mesma através da listagem de todas as 
turmas, associadas a conta do professor, as turmas só são visíveis por seus respectivos 
criadores e só é possível ter um professor por turma (Figura 12). 
 
Figura 12 – Lista de turmas 
 
Fonte: Autor, 2022 
 
Ao acessar uma turma, é possível ver uma lista de todas às aulas que já ocorreram, a 
figura 13 exemplifica a visão do professor, só será possível criar uma aula por turma, no dia. 
Após o dia finalizar, o professor poderá iniciar uma nova aula. 
 
Figura 13 – Lista das últimas aulas 
 
Fonte: Autor, 2022 
 
34 
 
 
A figura 14 mostra a visão do professor, ao entrar em uma aula, ele deve selecionar 
um tema e uma questão, estes são exibidos para o docente, baseado na disciplina inserida no 
cadastro da turma, a questão ficará visível para os alunos que acessaram a sala com o código 
de acesso, gerado automaticamente na criação da turma, até que o professor selecione uma 
nova pergunta. 
 
Figura 14 – Configurando uma aula 
 
Fonte: Autor, 2022 
 
 
4.4 DESCRIÇÃO DO MODELO DA BASE DE DADOS 
 
Uma das facilidades de utilizar o framework Ruby on Rails é o processo de modelar 
um banco de dados. Toda tabela criada, conta com as seguintes colunas: “id”, que é auto 
incremental e o Rails faz o trabalho de gerenciar; o mesmo ocorre com a coluna “created_at”, 
toda vez que um registro é criado, ele automaticamente recebe a data atual no padrão iso8601; 
outra coluna parecida com a anterior é a “updated_at”, quando um registro recebe uma 
atualização, esta tabela recebe a data atual. Essas colunas são úteis e seguem um dos 
princípios do Rails, que tira a responsabilidade do programador de realizar processos que se 
repetem, tornando o desenvolvimento ágil. As colunas padrão foram omitidas da modelagem, 
por questões estéticas, porém, assume-se que toda tabela contém as colunas: “id”, 
“created_at” e “updated_at”. 
35 
 
 Outra função interessante são os comandos “generate”, o Rails possui um punhado 
de “generates”, que agilizam o desenvolvimento. Utilizando o console, dentro da pasta do 
projeto, rodando o comando “rails generate model nome_da_tabela 
coluna_um:tipo_da_coluna coluna_dois:tipo_da_coluna coluna_enésima:tipo_da_coluna” o 
Rails invoca o Active Record, que gera os arquivos necessários para conseguir trabalhar com 
os registros no banco de dados, estes podem ser verificados na figura 15. Os mais 
importantes, são os arquivos localizados na pasta “migrate” e o da pasta “models”, aquele, é 
um arquivo que garante o versionamento das tabelas do banco de dados, como pode ser visto 
na figura 16. Já este, é uma classe que herda o Active Record e representa a tabela dentro do 
sistema, nele é possível atribuir algumas funções e utilizar alguns gatilhos, oferecidos pelo 
framework, para fazer com que o sistema funcione corretamente. (Figuras 15 e 16) 
 
Figura 15 – Exemplo genérico utilizando o comando generate model 
 
Fonte: Autor, 2022. 
 
Figura 16 – Migration gerada pelo comando generate 
 
Fonte: Autor, 2022. 
 
36 
 
A figura 17, exibe o esqueleto geral de todas as tabelas do sistema, com todos os 
relacionamentos. Nos subtópicos a seguir, será apresentado tabela por tabela, falando 
brevemente um pouco sobre cada uma. 
 
Figura 17 – Modelo lógico 
 
Fonte: Autor, 2022 
 
4.4.1 Tabela User 
 
A tabela User é a representação de um professor dentro do sistema, ao ser 
cadastrado, um professor passa a ter as seguintes informações: Name, Email e Password. 
Dentro do sistema, o professor poderá ter zero ou quantas salas de aula forem necessárias 
(classrooms) 
37 
 
Figura 18 – Tabela User 
 
Fonte: Autor, 2022. 
 
4.4.2 Tabela Classroom 
 
Esta tabela é a representação de uma sala de aula, nela ficará armazenada as 
seguintes informações: Access_code, um código de acesso, gerado automaticamente pelo 
sistema, único, que terá a função parecida de uma chave primária, será utilizado pelos alunos 
para adentrar em uma aula; User_id, esta coluna será uma chave estrangeira e armazenará a 
referência para a tabela User, que representa o professor no sistema; Name, que armazenará o 
nome da turma; Subject_id, outra chave estrangeira, está guardará a referência para a 
disciplina vinculada a esta Sala de aula. 
 
Figura 19 – Tabela Classroom 
 
Fonte: Autor, 2022. 
 
4.4.3 Tabela Class_occurrence 
 
Esta é uma tabela relacionamento ou entidade associativa, que surge do 
relacionamento muitos para muitos, é a representação de um dia de aula dentro do sistema, 
armazenando o id da questão que será aplicada e o id da sala que partiu essa solicitação. 
 
38 
 
Figura 20 – Tabela Class_occurrence 
 
Fonte: Autor, 2022. 
 
No Rails, é possível carregar o registro em uma variável e utilizar para encontrar 
tabelas que estão relacionadas, como podemos verificar na figura 18, na primeira linha, 
utilizando a função find, acontece um select na tabela classroom, onde o id é igual a 1. Após 
carregar esse registro na memória, é possível explorar os relacionamentos que essa tabela 
possui, no nosso exemplo, a tabela class_occurrence possui um relacionamento com 
classroom, então, é possível carregar todas as class_occurrences que possuem o classroom_id 
igual a 1 e o contrário também é valido. 
 
Figura 21– Utilizando um relacionamento para selecionar um registro 
 
Fonte: Autor, 2022. 
 
4.4.4 Tabela Subject e Course 
 
As tabelas Course e Subject representam, respectivamente, um curso e suas 
disciplinas, foram criadas para garantir a organização dos registros dentro do banco de dados. 
Um curso possui apenas um nome, jáa tabela disciplina, possui um nome e uma referência 
para a tabela curso, isso garante que ao alterar o nome de um curso, não seja necessário passar 
em todas as disciplinas que pertencem a esse curso fazendo tal mudança. 
 
39 
 
Figura 22– Tabelas Subject e Course 
 
Fonte: Autor, 2022. 
 
4.4.5 Tabela Topic 
 
Essa é outra tabela criada para garantir a organização dos registros, ela representa um 
assunto/conteúdo de uma disciplina, possuindo um nome e uma referência para a tabela que 
representa a disciplinas, isso facilita filtra os registros (tabela 23). 
 
Figura 23– Tabelas Topic 
 
Fonte: Autor, 2022. 
 
4.4.6 Tabela Answer_occurrence 
 
Esta tabela é a representação de uma resposta dada por um aluno, esta também é uma 
tabela relacionamento e possui as seguintes colunas: Class_occurrence_id, uma chave 
estrangeira, que indica em qual dia de aula ocorreu essa resposta; answer_id, armazena o id da 
resposta selecionada pelo aluno; student_id, armazena o id do aluno e representa o autor da 
resposta; question_id, guarda o id da questão que foi aplicada. A partir desta tabela é possível 
inferir quantos alunos acertaram uma determinada questão e extrair a média de acertos. 
 
40 
 
Figura 24– Tabelas Answer_occurrence 
 
Fonte: Autor, 2022 
 
4.4.7 Tabela Answer 
 
Essa tabela é a representação de uma das opções de resposta que uma questão possui, 
uma resposta possui: uma descrição, que seria a resposta propriamente dita; a coluna 
is_correct, que armazena um verdadeiro ou falso, que diz se essa reposta está correta ou não; e 
por fim uma chave estrangeira da tabela question, que representa de qual questão essa 
resposta faz parte (Figura 25). 
 
Figura 25– Tabelas Answer 
 
Fonte: Autor, 2022 
 
4.4.8 Tabela Question 
 
Esta tabela é a representação de um enunciado dentro do sistema, que será exibido 
para o aluno durante um teste para validar o conhecimento sobre determinado assunto e 
auxiliar o professor na tomada de decisão durante a aplicação do peer instruction. A tabela 
possui duas colunas: Description, que seria o enunciado da questão e uma referência para a 
tabela Topic indicando de qual assunto pertence esta questão (Figura 26). 
41 
 
 
Figura 26– Tabelas Answer 
 
Fonte: Autor, 2022. 
 
4.5 FERRAMENTA IMPLEMENTADA 
 
O SABEPI é uma ferramenta web que foi criada pensando em solucionar as 
dificuldades que surgem durante a aplicação do Peer Instruction. Foi projetada para cadastrar 
e reaproveitar perguntas, que serão aplicadas durante um dia aula para extrair as informações 
que guiarão o rumo das atividades em aula. O professor, baseado na porcentagem de acerto 
em uma determinada questão, consegue inferir as lacunas no conhecimento de seus aulos, 
determinado quais assuntos devem ser abordados. 
 
4.5.1 Funcionalidades 
 
O sistema conta com três áreas diferentes: O admins_backoffice, onde ficam as 
funcionalidades administrativa; users_backoffice, local onde se encontram as funcionalidades 
dos professores; site, local onde ficam as funcionalidades dos alunos. Dentro do sistema, 
apenas administradores podem cadastrar novos professores, cursos, disciplinas e assuntos. 
Professores e administradores, podem cadastrar, porém, só administradores podem remover 
perguntas. Os alunos só podem acessar as salas de aulas através de um código, único, de 
acesso. 
42 
 
Figura 27 – Página inicial do sistema 
 
Fonte: Autor, 2022. 
 
4.5.1.1 Admins_backoffice 
 
Na área administrativa existe um menu lateral de navegação, ao clicar em “base de 
dados” um submenu é exibo, nele é possível cadastrar/editar/deletar cursos, disciplinas, 
assuntos e perguntas. Na figura 28, é possível verificar a tabela que exibe os cursos 
cadastrados no sistema. Cada linha da tabela representa um curso, exibindo seu id, nome e 
quantas disciplinas ele possui. Na última coluna, ficam os botões de criação, edição e deleção. 
Todas as tabelas de listagem seguem o mesmo padrão, mudando apenas suas colunas e 
entidades. 
43 
 
Figura 28 – Lista de cursos cadastrados 
 
Fonte: Autor, 2022 
 
Ao clicar no ícone de mais, em todas as tabelas do sistema, o usuário é direcionado 
para tela de criação, a figura 29 exibe a tela de cadastro de uma pergunta. Toda questão fica 
associada um assunto, todo assunto fica atrelado a uma disciplina, por sua vez, toda disciplina 
fica associada a um curso. A primeira etapa do cadastro, de uma questão, é a seleção de um 
curso, logo após, o menu seletor de disciplinas é atualizado dinamicamente, baseando-se na 
seleção anterior, recebendo todas as disciplinas associadas a este curso. O mesmo ocorre com 
os assuntos, após a seleção da disciplina, os assuntos associados a ela são preenchidos no 
menu abaixo. 
44 
 
Figura 29 – Cadastro de uma pergunta 
 
Fonte: Autor, 2022. 
 
Após criar todas as associações necessárias, o usuário pode começar a cadastrar sua 
questão, efetivamente, inserido o enunciado da pergunta e suas alternativas. Uma questão 
comporta quantas respostas forem necessárias, fica a critério de quem está realizando a ação 
esta decisão, ao clicar no botão “Adicionar Resposta” uma nova caixa de texto é inserida no 
formulário. Por padrão toda resposta começa sendo falsa, caso seja verdadeira, o checkbox 
(caixa de seleção), abaixo da caixa de texto, deve ser marcado para indicar que a questão está 
correta. Para incentivar o compartilhamento de informação, todas as questões ficam visíveis 
entre todos professores. 
Após o cadastro de uma questão, ela fica visível na listagem de perguntas, podendo 
ser editada ou deletada, caso seja necessário, como pode ser verificado na figura 30. 
 
45 
 
Figura 30 – Listagem de perguntas 
 
Fonte: Autor, 2022. 
 
Os administradores fazem o gerenciamento de todos os usuários, para que um novo 
professor ou administrador seja inserido no sistema, ele deve ser cadastrado no menu de 
edição de usuários, isso garante que usuários de fora não consigam se cadastrar, mantendo o 
controle de acesso do sistema pela instituição que está utilizando a ferramenta. A figura 31 
mostra a listagem de professores, que é muito parecida com a listagem de administradores e 
segue o padrão das demais tabelas de listagem do sistema. 
 
Figura 31 – Listagem de professores 
 
46 
 
Fonte: Autor, 2022. 
 
 
4.5.1.2 users_backoffice 
 
Nesta área, o professor tem acesso a base de dados, igualmente ocorre na área 
administrativa, porém, ele só pode criar ou listar perguntas, como pode ser verificado na 
figura 32. Os professores não podem editar ou deletar perguntas. 
 
Figura 32 – Menu lateral de navegação 
 
Fonte: Autor, 2022. 
 
Ao clicar, no menu lateral, em salas de aula, um submenu é exibido e o professor tem 
duas opções, exibir suas salas ou criar uma nova sala, caso o professor não tenha nenhuma 
sala, ele é automaticamente redirecionado para a página de criação de uma nova sala. Na 
página de criação, ele deve indicar o curso, disciplina e o nome da sala, como pode ser 
verificado na figura 33. 
 
47 
 
Figura 33 – Criação de uma sala 
 
Fonte: Autor, 2022. 
 
Após criar uma sala, o professor pode entrar na página de exibição. As salas são 
representadas por um quadrado e no topo do mesmo, é exibido o nome da sala e um ícone de 
edição, ao clicar nele, o professor é direcionado para uma página onde é possível modificar o 
nome da turma. Abaixo do nome da turma, é mostrado a disciplina desta turma, logo abaixo, 
fica o código de acesso, que é utilizado pelos alunos para adentrar em uma aula. Este 
componente também possui uma “chave seletora” e um botão, aquele, ao ser clicado, ativa ou 
desativa a sala, impedindo que os alunos entrem nela. Já este, redireciona o professor para a 
sala de aula (Figura 34). 
 
48 
 
Figura 34 – Salas de um professor 
 
Fonte: Autor, 2022. 
 
Ao entrar na sala, uma lista com as últimas aulas é exibida, na prima vez,a lista 
estará vazia. Ao clicar em “Nova aula” um modal é aberto, como pode ser analisado na figura 
35. Para iniciar uma aula, o professor deve indicar com qual assunto e questão ele quer iniciar 
a aula, nesse momento, basta clicar em “Criar” e uma nova sala é criada e ficará disponível na 
lista de últimas aula na ordem da mais nova para a mais antiga, basta o professore clicar no 
botão de entrar e ele será direcionado para uma ocorrência de aula. O sistema permite que 
apenas uma aula possa ser criada no dia, caso tente criar duas, um erro é exibido, avisando 
que apenas uma aula pode ser criada no dia. 
Figura 35 – Iniciando uma nova aula 
 
Fonte: Autor, 2022. 
49 
 
 
A figura 36 mostra a visão de um professor ao entrar em uma ocorrência de aula. 
Nesta página existem duas caixas, a primeira serve para exibir algumas informações sobre 
aula. A mensagem exibida ao fim desta caixa é definida a partir da porcentagem de acertos, 
seguindo o diagrama apresentado na figura 1. Ao clicar no botão “Verificar Estatísticas”, caso 
tenha uma nova resposta, as informações são atualizadas. 
Na segunda caixa, é exibido a pergunta e suas respostas, a resposta correta fica 
marcada na cor verde, ao clicar no ícone de uma caneta sobre uma folha, localizado no topo 
esquerdo desta caixa, um modal é aberto, para que o professor escolha uma nova questão. 
Figura 36 – A visão de um professor dentro de uma aula 
 
Fonte: Autor, 2022. 
 
4.5.1.3 Site 
 
Parte do sistema onde os alunos interagem. Na página inicial do sistema, como pode 
ser visto na figura 37, com o código de acesso disponibilizado pelo professor, o aluno 
consegue entrar em uma sala de aula e participar da avaliação que auxiliará o professor na 
tomada de decisão. 
 
50 
 
Figura 37 – Pagina inicial do sistema 
 
Fonte: Autor, 2022. 
 
O aluno, após inserir o código de acesso, é redirecionado para a sala e um modal é 
aberto, sobrepondo as informações, o aluno precisa inserir nome e matrícula para entrar na 
sala, como pode ser analisado na figura 38. Após se identificar, uma sessão é iniciada com 
suas informações, se o aluno já tiver entrado alguma vez no sistema o registro dele é 
carregado, caso contrário, um novo registro é criado no banco de dados. 
 
Figura 38 – Identificação do aluno 
 
51 
 
Fonte: Autor, 2022. 
 
A figura 39, exibe a visão de um aluno após se identificar, para esta tela, foi pensado 
um layout minimalista, sem muitas informações, para não tirar o foco do aluno, um quadro 
que contem em seu topo o nome da disciplina e um botão para finalizar a sessão, caso o aluno 
não reconheça a mesma. No centro superior do quatro, é exibo uma mensagem de boas-
vindas. No centro do quadro, caso o aluno não tem dado sua resposta para a pergunta corrente, 
a questão é exiba até que o mesmo indique sua resposta. Caso ela já tenha respondido, uma 
mensagem informativa, dizendo que aluno deve aguarda uma nova questão, é exibida. 
 
Figura 39 – Visão do aluno após se identificar 
 
Fonte: Autor, 2022. 
 
4.5.2 Código implementado 
 
A aplicação está dividida em três grandes áreas: AdminsBackoffice, responsável pela 
área administrativa; UsersBackoffice, que fica responsável pela área dos professores; Site, 
local onde os alunos interagem com o sistema. Cada área possui um controlador, que herda o 
controlador da aplicação, nele é indicado qual layout (view) será exibido. 
 
52 
 
4.5.2.1 Controllers 
 
O controller representa o C de MVC (modelo, visão e controlador), ao gerar um 
projeto Rails com o comando “rails new nome_do_projeto”, uma estrutura de pastas e 
arquivos são gerados, uma das pastas geradas é a “controllers”, dentro dessa pasta tem um 
arquivo ruby chamado “application_controller”, a classe pai de todos os controllers que 
surgirão durante o ciclo de vido de um projeto Rails. Essa classe principal possui todas as 
configurações e métodos que podem ser usados dentro de um controller, como por exemplo o 
callback (chamada de retorno) “before_action”, como pode ser visto na figura 40, todas as 
vezes que uma função for invocada, dentro do controlador da aplicação ou em todos os outros 
controladores que herdarem este, antes da ação acontecer, uma mensagem dizendo “olá” será 
exibida no console. 
 
Figura 40 - Exemplo de uma chamada de retorno 
 
Fonte: Autor, 2022. 
 
4.5.2.1.1 AdminsBackoffice Controller 
 
A figura 41 exibe o controlador principal da área administrativa, este herda o 
controlador principal do sistema e será herdado por todos os controladores desta área. Neste 
controlador é indicado que antes de qualquer função ser executada, que passe por ele, será 
feita a validação das credências do usuário e caso não possa ver o conteúdo desta página, será 
redirecionado para a página de login. Neste controlador também é indicado que o layout html 
da área administrativa será renderizado. 
 
53 
 
Figura 41 - Controlador da área administrativa 
 
Fonte: Autor, 2022. 
 
Todas as entidades possuem um controlador e quase todos controladores possui os 
métodos: index, geralmente exibe uma listagem da entidade em questão; create, método que 
criar um novo registro de uma entidade; update, ação que atualização um registro de uma 
entidade; destroy, função que remove um registro de uma entidade. A figura 42 exibe uma 
parte do código do controlador que gerencia os administradores. 
 
Figura 42 – Controlador responsável pelos administradores 
 
Fonte: Autor, 2022. 
 
Na Figura 43, é possível ver todos os controladores da área admirativa, por padrão, 
no Rails, cada entidade deve possuir um controlador com seus métodos de CRUD (Inserção, 
seleção, atualização e deleção) e todos os demais que fogem do padrão CRUD. 
 
54 
 
Figura 43 – Controladores da área admirativas 
 
Fonte: Autor, 2022. 
 
4.5.2.1.2 UsersBackoffice Controller 
 
O controlador principal desta área é parecido com o anterior, mudando o método de 
verificação de usuário, que agora verifica se usuário logado é um professor e indicando que 
layout renderizado será o da área dos professores. 
A figura 44 mostra parte do código do controlador responsável pelas ocorrências de 
aula, ao criar uma aula, o método “create” cria uma instância com os parâmetros passados via 
requisição HTTP (Hypertext Transfer Protocol). Logo após, o método “occurence_on_day?”, 
é invocado para verificar se existe uma aula criada neste dia, caso a preposição seja 
verdadeira, o professor é redirecionado para a tela de aulas e um alerta é exibido, informando 
que só é possível criar uma aula por dia. Caso contrário, a aula é criada, se nenhum erro 
acontecer. 
 
55 
 
Figura 44 – Parte do código do controlador de ocorrências de aulas 
 
Fonte: Autor, 2022. 
 
4.5.2.2 Models 
 
A model representa o M de MVC (modelo, visão e controlador), todas as tabelas do 
sistema possuem um arquivo, do tipo ruby, dentro da pasta “models”. Todas herdam a super 
classe “Application Record”, camada da aplicação responsável pelos registros dentro do 
banco de dados. Assim como a super classe “Application Controller”, esta classe possui 
vários métodos que podem ser utilizados para facilitar o desenvolvimento, por exemplo o 
callback (chamada de retorno) “before_create”, após um registro ser criado, o método 
declarado é invocado podendo alterar, manipular, validar os atributos do registro em questão. 
Os relacionamentos entre tabelas, são feitos a nível de aplicação, ou seja, ao acessar 
um banco de dados, criado pelo Rails, utilizando, por exemplo a ferramenta “MySQL 
Workbench” para gerar um modelo, a partir de um banco já existem, utilizando a opção 
engenharia reversa, as tabelas do banco ficarão “soltas”, sem nenhuma relação entre elas, 
porém, isso não significa que não exista essas relações, já que elas são realizadas dentro da 
camada da aplicação, pelo “Active Record”. 
Na figura 45 é possível analisar os relacionamentos da tabela“classroom”, o 
comando “belongs_to” indica ao Rails que essa tabela possui um relacionamento um para um 
com a tabela usuários (representando os professores) e com a tabela disciplina. Já o comando 
“has_many” é um mecanismo oferecido pelo Rails que facilita a pesquisa inversa, partindo de 
56 
 
uma sala de aula, é possível selecionar todas as ocorrências de aula que possuem o id da sala 
de aula em questão. 
Figura 45 – Modelo Classroom 
 
Fonte: Autor, 2022. 
 
A chamada de retorno “set_access_code” presente na figura 45, gera um código de 
acesso único com 4 casas na base 64, após uma sala ser criada. 
 
4.5.2.3 Views 
 
A view representa o V de MVC (modelo, visão e controlador), cada entidade possui 
uma pasta, com o seu nome, dentro da pasta “views” (figura 46). Os arquivos das view, são do 
tipo “html.erb”, esse tipo de arquivo suporta html mesclado com código ruby. Cada página 
está associada a uma ação (método) contida dentro de seu respectivo controlador. 
 
57 
 
Figura 46 – Parte da estrutura de view 
 
Fonte: Autor, 2022. 
 
Cada entidade possui uma pasta, dentro desta pasta possui outra pasta chamada 
“shared”, nesta, possui um formulário que é invocado tanto na página de criação, quando na 
página de edição, ou seja, as duas utilizam o mesmo bloco de código html. Na figura 47, o 
trecho de código invoca o formulário, passando algumas várias locais, que são utilizadas para 
alterar parte do código no momento da renderização, esse tipo de bloco, em rails, é chamado 
de “partial” (parcial). 
Figura 47 – Edição de um curso 
 
Fonte: Autor, 2022. 
Cada área do projeto conta com layout diferente, ao comentar a parte do código que 
renderiza os componentes dentro desse layout, é possível ver apenas o layout da página 
(figura 48). 
 
58 
 
Figura 48 – Layout área administrativa 
 
Fonte: Autor, 2022. 
 
 
5 CONSIDERAÇÕES FINAIS 
 
A tabela 1 apresenta o as funcionalidades que foram implementadas durante a 
elaboração deste projeto comparando com as ferramentas Kahoot e Socrative. Apesar de o 
Socrative e o Kakoot possuírem mais funcionalidades, SABEPI possui código fonte aberto e 
livre para distribuição e foi projetado para aplicar o peer instruction. 
 
Tabela 1– Comparação com outras ferramentas 
Funcionalidade Kahoot Socrative SABEPI 
Criação de jogos e quizzes Sim Sim Apenas quizzes 
Jogos em tempo real Sim Sim Não 
Jogos de aprendizado em ritmo 
próprio 
Sim Sim Não 
Personalização de jogos Sim Sim Não 
Relatórios de desempenho Sim Sim Sim 
Compartilhamento com outros Sim Sim Sim 
59 
 
Integração com outros 
aplicativos 
Sim Sim Não 
Ferramentas de ensino remoto Não Sim Não 
Análise em tempo real Não Sim Sim 
Elaborado para aplicar o peer 
instruction 
Não Não Sim 
Código livre Não Não Sim 
Fonte: kahoot, 2022; Socrative, 2022 
 
O custo de hospedagem de um aplicativo Rails de tamanho médio pode variar 
bastante dependendo da plataforma de nuvem escolhida e dos recursos necessários para o 
aplicativo. Algumas das principais opções de nuvem para hospedagem de aplicativos Rails 
incluem o Amazon Web Services (AWS), o Google Cloud Platform (GCP) e o Microsoft 
Azure. A tabela 2 exibe uma estimativa dos custos médios para hospedar um aplicativo Rails 
de tamanho médio em cada um desses provedores de nuvem. Observe que esses preços podem 
variar de acordo com as configurações e os recursos específicos do aplicativo. Além disso, 
esses provedores de nuvem podem oferecer descontos por uso prolongado ou por 
compromisso de uso. 
 
Tabela 2 – Custo médio para hospedar um aplicativo Rails 
Provedor de nuvem Preço mensal (médio) 
Amazon Web Services (AWS) $200 - $400 
Google Cloud Platform (GCP) $150 - $300 
Microsoft Azure $200 - $400 
Fonte: Microsoft; Amazon; e Google cloud, 2022. 
 
5.1 LIMITAÇÕES 
 
A construção de uma aplicação full stack, profissional que tem a capacidade de atuar 
em várias áreas diferentes dentro de um projeto web (infraestrutura, front end, back end e 
etc...), é um trabalho árduo e exige muitas horas de estudo; a tarefa fica mais complicada 
quando o projeto é executado por apenas um desenvolver. Se fosse necessário refazer todo 
projeto, com toda certeza, optaria em desenvolver apenas uma API. 
60 
 
O tempo disponibilizado para a disciplina de TCC II foi a maior dificuldade em todo 
o ciclo de vida deste projeto, levando em consideração a quantidade de funcionalidades 
desenvolvidas. 
 
5.2 POSSIBILIDADES FUTURAS 
 
O peer instruction é uma metodologia promissora e existem funcionalidades que não 
puderem ser implementadas, a refatoração deste projeto, transformando-o em uma API, seria 
uma oportunidade para que outros acadêmicos pudessem utilizar para criar uma aplicação 
front end, utilizando tecnologias reativas, como React.js, Vue.js e React Native. 
Algumas funcionalidades que facilitariam ainda mais a aplicação do peer instruction 
podem ser: 1) Caso o percentual de acertos em determinado assunto fique entre 30 a 70 por 
cento, criar um agrupamento entre alunos que deram respostas divergentes. 2) Se for uma aula 
remota, seguindo o raciocínio da funcionalidade anterior, criar um canal privado com 
pequenos grupos de alunos que divergiram, para que eles possam debater suas respostas. 3) 
Criar um quadro de métricas, para indicar para os professores quais assuntos os alunos 
possuem mais dificuldade. 
 
 
61 
 
REFERÊNCIAS 
 
ADNAN, Khairi. Jquery-datatables: jquery datatables ruby gems for assets pipeline. Jquery 
datatables ruby gems for assets pipeline. Disponível em: https://github.com/mkhairi/jquery-
datatables. Acesso em: 06 jul. 2022. 
 
ARAUJO, Ives Solano; MAZUR, Eric. Instrução pelos colegas e ensino sob medida: uma 
proposta para o engajamento dos alunos no processo de ensino-aprendizagem de física. 
Caderno Brasileiro de Ensino de Física, [S.L.], v. 30, n. 2, p. 1-23, 17 abr. 2013. 
Universidade Federal de Santa Catarina (UFSC). http://dx.doi.org/10.5007/2175-
7941.2013v30n2p362. 
 
ATLASSIAN. O que é o Kanban? 2022 ©. Disponível em: 
https://www.atlassian.com/br/agile/kanban. Acesso em: 29 set. 2022. 
 
AUWERA, Nathan van Der. Cocoon. 2010 ©. Disponível em: 
https://github.com/nathanvda/cocoon. Acesso em: 05 jul. 2022. 
 
COMUNIDADE DEVISE. Devise is a flexible authentication solution for Rails based on 
Warden. 2020 ©. Disponível em: https://rubydoc.info/github/heartcombo/devise/. Acesso 
em: 1 jul. 2022. 
 
COMUNIDADE FAKER. Gem Faker. Disponível em: https://github.com/faker-ruby/faker. 
Acesso em: 05 jul. 2022. 
 
COMUNIDADE RAILS. Getting Started with Rails. 2022. Disponível em: 
https://guides.rubyonrails.org/v5.2/getting_started.html. Acesso em: 30 jun. 2022. 
 
COMUNIDADE RUBY. Ruby. Disponível em: https://www.ruby-lang.org. Acesso em: 30 
jun. 2022. 
 
DIEMER, Mouriac Halen; BERCHT, Magda; CANTO FILHO, Alberto Bastos do; SCHORR, 
Maria Claudete. METODOLOGIAS ATIVAS NO ENSINO DE ALGORITMOS E 
PROGRAMAÇÃO: um relato de aplicação da metodologia peer instruction. Revista 
Destaques Acadêmicos, [S.L.], v. 11, n. 4, p. 240-255, 30 dez. 2020. Editora Univates. 
http://dx.doi.org/10.22410/issn.2176-3070.v11i4a2019.2400. 
 
GOOGLE LLC. Gere insights facilmente com o Google Forms. Disponível em: 
https://www.google.com/intl/pt-BR/forms/about/. Acesso em: 26 jun. 2022. 
 
MAZUR, Eric; SOMERS, Mark D.. Peer Instruction: a user as manual. American Journal 
Of Physics, [S.L.], v. 67, n. 4, p. 359-360, abr. 1999. American Association of Physics 
Teachers (AAPT). http://dx.doi.org/10.1119/1.19265. 
NPM INC. Npm Docs. Disponível em: https://docs.npmjs.com/. Acesso em: 06 jul. 2022. 
 
OPENJS FOUNDATION. JQuery API. Disponível em: https://api.jquery.com/. Acesso em: 
07 jul. 2022. 
 
62 
 
PG: The Ruby PostgreSQL Driver. 2019 ©. Disponível em: 
https://deveiate.org/code/pg/README_rdoc.html. Acesso em: 4 jul. 2022. 
 
RACHELLI, Janice; BISOGNIN, Vanilde. Peer Instruction:uma experiência no ensino de 
cálculo com base em metodologias ativas de aprendizagem. Revista Eletrônica de Educação 
Matemática, [S.L.], v. 15, n. 1, p. 1-21, 14 maio 2020. Universidade Federal de Santa 
Catarina (UFSC). http://dx.doi.org/10.5007/1981-1322.2020.e66341. 
 
REFSNES DATA. Bootstrap Get Started. Disponível em: 
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp. Acesso em: 07 jul. 2022. 
 
SHOWBIE. Socrative. Disponível em: https://www.socrative.com/. Acesso em: 24 jun. 2022. 
SPRYMEDIA LTD. Using DataTables. 2022 ©. Disponível em: 
https://www.datatables.net/manual/index. Acesso em: 06 jul. 2022. 
 
THE POSTGRESQL GLOBAL DEVELOPMENT GROUP. PostgreSQL: the world's most 
advanced open source relational database. The World's Most Advanced Open Source 
Relational Database. 2022 ©. Disponível em: https://www.postgresql.org/. Acesso em: 4 jul. 
2022. 
 
KAHOOT. Kahoot. Disponível em: https://kahoot.com/. Acesso em: 24 jun. 2022. 
	RESUMO
	ABSTRACT
	LISTA DE FIGURAS
	LISTA DE TABELAS
	LISTA DE ABREVIATURAS E SIGLAS
	SUMÁRIO
	1 INTRODUÇÃO
	2 OBJETIVOS
	2.1 Objetivo Geral
	2.2 Objetivos Específicos
	3 REFERENCIAL TEÓRICO
	3.1 PEER INSTRUCTION
	3.1.1 Definição e características
	3.1.2 Onde é utilizado
	3.1.3 Necessidade de ferramentas auxiliares
	3.2 Ferramentas similares
	3.2.1 Kahoot
	3.2.2 Socrative
	3.2.3 Google Forms
	4 Metodologia
	4.1 delineamento do estudo
	4.2 Tecnologias utilizadas
	4.2.1 Ruby
	4.2.1.1 RubyGem
	4.2.1.1.1 Ruby on Rails
	4.2.1.1.2 Devise
	4.2.1.1.3 Pg
	4.2.1.1.4 Faker
	4.2.1.1.5 Cocoon
	4.2.1.1.6 Jquery-datatables
	4.2.2 Npm
	4.2.2.1 Bootstrap
	4.2.2.2 jQuery
	4.3 Prototipação
	4.4 Descrição do modelo da base de dados
	4.4.1 Tabela User
	4.4.2 Tabela Classroom
	4.4.3 Tabela Class_occurrence
	4.4.4 Tabela Subject e Course
	4.4.5 Tabela Topic
	4.4.6 Tabela Answer_occurrence
	4.4.7 Tabela Answer
	4.4.8 Tabela Question
	4.5 Ferramenta implementada
	4.5.1 Funcionalidades
	4.5.1.1 Admins_backoffice
	4.5.1.2 users_backoffice
	4.5.1.3 Site
	4.5.2 Código implementado
	4.5.2.1 Controllers
	4.5.2.1.1 AdminsBackoffice Controller
	4.5.2.1.2 UsersBackoffice Controller
	4.5.2.2 Models
	4.5.2.3 Views
	5 Considerações finais
	5.1 Limitações
	5.2 Possibilidades futuras
	REFERÊNCIAS
		2022-12-23T09:46:12-0300
		2022-12-23T10:55:53-0300
		2022-12-23T17:21:50-0300
		2022-12-23T17:24:19-0300