CENTRO UNIVERSITÁRIO DA GRANDE FORTALEZA

CURSO DE GRADUAÇÃO EM SISTEMAS PARA INTERNET

ERI JOHNSON SILVA FERNANDES

TÉVIRA: PROTÓTIPO DE UMA APLICACÃO EM REACT PARA REGISTRO DE

ATIVIDADES COMPLEMENTARES

FORTALEZA
2021
 ERI JOHNSON SILVA FERNANDES

TÉVIRA: PROTÓTIPO DE UMA APLICACÃO EM REACT PARA REGISTRO DE

ATIVIDADES COMPLEMENTARES

Trabalho de Conclusão de Curso apresentado ao

Curso de Graduação em Sistemas para Internet
do da Centro Universitário da Grande Fortaleza,
como requisito parcial à obtenção do grau de
tecnólogo em Sistemas para Internet.

Orientador: Prof. Me. Francisco Edvan

Chaves

FORTALEZA
2021
 ERI JOHNSON SILVA FERNANDES

TÉVIRA: PROTÓTIPO DE UMA APLICACÃO EM REACT PARA REGISTRO DE

ATIVIDADES COMPLEMENTARES

Trabalho de Conclusão de Curso apresentado ao

Curso de Graduação em Sistemas para Internet
do da Centro Universitário da Grande Fortaleza,
como requisito parcial à obtenção do grau de
tecnólogo em Sistemas para Internet.

Aprovada em:

BANCA EXAMINADORA

Prof. Me. Francisco Edvan Chaves (Orientador)

Centro Universitário da grande Fortaleza
(UNIGRANDE)

Prof. Me. Adriana Maria Rebouças do Nascimento

Centro Universitário Unigrande (UNIGRANDE)

Prof. Me. Henrrelly Raony da Silva Viana,

Centro Universitário Unigrande (UNIGRANDE)
Dedico este trabalho a Deus; sem Ele eu não
posso fazer nada.
 AGRADECIMENTOS

Estes agradecimentos não serão relacionados somente à realização deste trabalho,

mas a todos àqueles que cooperaram não só na minha vida acadêmica, mas em toda à minha
jornada até aqui, tanto com ensinamentos, apoio e formação de caráter.
Primeiramente, agradeço a Deus, que até aqui tem me ajudado com tudo o que eu
precisei em minha caminhada e também agradeço:
À minha mãe por ter me dado todo amor e educação que precisei nos primeiros
passos de minha caminhada.
À minha tia, Aurineide Silva, que sempre me ajudou com as tarefas pertinentes à
rotina me permitindo focar em outras atividades do trabalho, faculdade e igreja .
Aos meus amigos irmãos do "Point"que sempre estão comigo e intercedem por mim
em todo tempo.
Ao meu amigo, Jay Alves, por toda amizade, conselhos e cuidado para comigo nessa
última década
Ao meu colega e amigo de curso, Carlos Nascimento que sempre me incetivou a
colocar em execução este presente trabalho e pela companhia ao longo do curso.
À minha amiga Loanny Carneiro que tem me ajudado e incentivado no desenvolvi-
mento de alguns de meus projetos pessoais e carreira.
Aos professores pelos ensinamentos, em especial ao Edvan Chaves, que com seus
ensinamentos me inspirou a me profundar no mundo da programação.
Por fim, sou grato a todos que participaram, direta ou indiretamente do desenvolvi-
mento deste trabalho de, enriquecendo o meu processo de aprendizado.
“O fracasso não é razão para você desistir, desde
que continue acreditando.”
(Naruto Uzumaki)
 RESUMO

Nossas vidas tem se beneficiado muito pelo avanço da tecnologia. Há sempre uma aplicação
surgindo que resolve algum problema que não sabíamos que tínhamos e há sempre um amigo com
alguma ideia de negócio que quase sempre envolve o desenvolvimento de um aplicativo. Embora
existe muitas áreas que a teconlogia hoje já abrange, há sempre novas áreas a serem exploradas. A
área academíca é uma deas. Esse traballho visa abordar a prototipação e desenvolvimento de uma
aplicação web React que tem como objetivo facilitar a vida de alunos, professores e coordenadores
agilizando o registro de horas de atividades complementares de cursos universítários. mostrando
as etapas de cada processo, como a concesssão da ideia, tecnologias, linguagem de programação,
bibliotecas, frameworks, banco de dados, hospedagem etc e apresentando a motivação de escolha
das mesmas.

Palavras-chave: Desenvolvimento Web. React. Prototipação.

 ABSTRACT

Our lives have benefited greatly from the advancement of technology. There is always an
application coming up that solves some problem that we didn’t know. We had and there is always
a friend with some business idea that almost always involves developing an application. Although
there are many areas that technology today covers, there are always new areas to be explored.
The academic area is one of these. This work aims to address the prototyping and development of
an application web React that aims to facilitate the lives of students, teachers and coordinators by
speeding up the registration of hours of complementary activities of university courses. showing
the steps of each process, such as the granting of the idea, technologies, programming language,
libraries, frameworks, database, hosting etc. and presenting the motivation for choosing them.

Palavras-chave: Web Development. JavaScript. React. Prototyping.

 LISTA DE FIGURAS

Figura 1 – Logo da Aplicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Figura 2 – Infraestrutura da aplicação . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Figura 3 – Login da Aplicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Figura 4 – Boas-vindas para o Usuário Aluno . . . . . . . . . . . . . . . . . . . . . . 19
Figura 5 – Mensagem de "Em breve!" . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Figura 6 – Tela de cadastro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Figura 7 – Validações no formulário de cadastro . . . . . . . . . . . . . . . . . . . . . 22
Figura 8 – Submissão de atividade complementar . . . . . . . . . . . . . . . . . . . . 23
Figura 9 – Confirmação de submissão de atividade complementar . . . . . . . . . . . . 24
Figura 10 – Lista de atividades complementares . . . . . . . . . . . . . . . . . . . . . . 25
Figura 11 – Listagem de alunos cadastrados . . . . . . . . . . . . . . . . . . . . . . . . 26
Figura 12 – Listagem de atividades de um aluno selecionado . . . . . . . . . . . . . . . 27
Figura 13 – Informações de uma atividade selecionada . . . . . . . . . . . . . . . . . . 28
Figura 14 – Certificado em tela cheia . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Figura 15 – Questão 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Figura 16 – Questão 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Figura 17 – Questão 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Figura 18 – Questão 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
 LISTA DE ABREVIATURAS E SIGLAS

API Interface de Programação de Aplicações / Application Programming Inter f ace

CMS Sistema de gerenciamento de conteúdo / Content Management System
CSS Folha de estilo em cascata / Cascading Style Sheet
HTML Linguagem de Marcação para Hipertexto / Hyper Textmarkup Language
JAR Arquivo Java / Java Archive
 SUMÁRIO

1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1 Objetivos gerais e específicos . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.3 Trabalhos Relacionados . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.4 Organização do Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2 FUNDAMENTAÇÃO TEÓRICA . . . . . . . . . . . . . . . . . . . . . . 14
2.1 Aplicações Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2 Tecnologias Utilizadas em Desenvolvimento Web . . . . . . . . . . . . . 14
2.2.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.3 React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.4 Protótipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3 SISTEMA PROPOSTO . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1 Infraestrutura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4 RESULTADOS COMPUTACIONAIS . . . . . . . . . . . . . . . . . . . 18
4.1 Logar na plataforma como aluno ou professor . . . . . . . . . . . . . . . 18
4.2 Tela Inicial do Aluno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.3 Cadastro de aluno na plataforma . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Cadastro de atividade por parte do aluno . . . . . . . . . . . . . . . . . 22
4.5 Listar e pesquisar alunos . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.6 Aprovar ou reprovar a submissão de uma atividade . . . . . . . . . . . . 27
4.7 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.7.1 Resultado da Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5 CONCLUSÃO E TRABALHOS FUTUROS . . . . . . . . . . . . . . . . 32
REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
 11

1 INTRODUÇÃO

Estamos em constante evolução. Desde da descoberta do fogo, a invenção da roda

até os dias de hoje, o homem tem procurado formas de facilitar e melhorar sua vida. Embora não
soubesse, o homem já tinha o que podemos chamar de “Mentalidade Tecnológica” (CUPANI,
2016) e estava sim produzindo tecnologia, mesmo que tudo isso tenha sido feito por meios de
técnicas que, embora rudimentares, facilitaram e vem facilitando as nossas vidas até então.
A forma como nós buscamos implementar tais melhorias em nossas vidas tem
mudado ultimamente. Com o advento da facilidade de acesso à informação e conhecimento
proporcionado pelo avanços dos meios de comunicação, principalmente pelo acesso à internet, a
tecnologia passou a ter novo papel em todas as esferas das nossas vidas (LASTRES et al., 1999).
Tudo isso nos possibilitou que pudéssemos viver na era digital, onde boa parte
de nossas tarefas são feitas de forma automatizadas e com o menor necessidade de esforço
empreendido. Basta um clique ou até mesmo um comando de voz no seu dispositivo móvel e
temos informações sobre o clima, variação do dólar e resultado do último jogo do seu time do
coração.
O fato é que a tecnologia esteve cada vez mais presente em nosso cotidiano nos
proporcionado novas formas de trabalhar, realizar tarefas com menor esforço empreendido
através de aplicações, sistemas e tudo isso em alta velocidade e alta disponibilidade.

1.1 Objetivos gerais e específicos

Este trabalho tem como objetivo geral demonstrar o desenvolvimento de um protótipo

de aplicação React, que ajude alunos, professores e coordenadores a registrarem as horas de
atividades complementares de cursos universitários.
Sendo alguns de seus objetivos específicos:
• Introduzir a linguagem JavaScript ao qual todo projeto será desenvolvido;
• Conceituar a biblioteca de desenvolvimento front-end, React;
• Desenvolver o protótipo da aplicação com linguagem de programação JavaScript tanto em
sua apresentação gráfica(front-end), tanto na parte lógica(back-end).
 12

1.2 Metodologia

O método para a realização desse trabalho é o estudo de caso, já que o mesmo visa
demonstrar o passo a passo do desenvolvimento da aplicação e as tecnologias envolvidas em
todo o processo. Foram feitas pesquisas relacionadas ao desenvolvimento do projeto, inspirações
visuais para o design da aplicação.
Para atingir os objtetivos do trabalho, foram realizadas as seguintes etapas:
• Compreensão do problema e definição dos requisitos.
• Escolha das tecnologias a serem utilizadas.
• Implementação das funcionalidades funcionais.
• Publicar a aplicação em um servidor web.
• Realização de testes.

1.3 Trabalhos Relacionados

Para realização do trabalho foram feitas pesquisas sobre o tema de prototipação de

aplicações e sobre algumas aplicações já existenstes sobre o mesmo assunto.
É notório um déficit no resultado das buscas pelo tema em questão de aplicações que
buscam melhorar e agilizar o processo de registro de atividades complementares.
Em (CUNHA, 2014) foi proposto uma aplicativo para dispositivos móveis intitu-
lado de "SmartACG"que tinha como objetivo dar suporte ao gerenciamento e classificação de
Atividadades Complementares de Graduação.
Em (UFG, 2020) Uma das poucas aplicações encontradas foi o aplicativo próprio da
instituição UFG( Universidade Federal de Goiás). A instituição disponibiliza um Arquivo Java /
Java Archive (JAR) em sua versão 2.1, construído na linguagem de progamação Java. Além da
aplicação não ser online é necessário instalar o JAR no computador do usuário o que dificulta o
acesso já que é necessário ter o Java instalado na máquina do usário além de outras possíveis
dependências.
Na Universidade Federal do Estado do Rio de Janeiro (UNIRIO, 2015), Não existe
uma aplicação para os discentes registrares as atividades complementares em si. No site da insti-
tuição é disponibilizado um arquivo de texto para que os alunos possam registrar manualmente
suas atividades e cadastrado suas respectivas horas.
 13

1.4 Organização do Trabalho

O restante do trabalho está organizado da seguinte forma. O capítulo 2 aborda os prin-

cipais conceitos relacionados à compreensão do trabalho assim como as principais tecnologias
utilizadas. O capítulo seguinte apresenta a metodologia utilizada. Dando sequência, o capítulo 4
apresenta os resultados obtidos. Por fim, são apresentadas as conclusões e recomendações de
trabalhos futuros.
 14

2 FUNDAMENTAÇÃO TEÓRICA

2.1 Aplicações Web

Para se conceituar aplicações web, é precio primeiro definir o que seria web. Como
bem disse (SILVA, 2008), web do inglês, siginifica teia, que justamente representa o que a internet
é, uma grande "teia de aranha"criada pelo físico e cientista da compútação, Tim Berners-Lee
com o objetivo de interligar computadores do mundo todo.
Segundo Daniel Nations, aplicações web são sistemas desenvolvidos para serem
utilizados em navegadores de internet utilizando tecnologia própria do desenvolvimento para
internet, tais como Linguagem de Marcação para Hipertexto / Hyper Textmarkup Language
(HTML) , Folha de estilo em cascata / Cascading Style Sheet (CSS) e JavaScript (NATIONS,
2020). A principal vantagem desse tipo de aplicação é o fato dos usuários poderem se eximir
da necessidade de instalar a aplicação desenvolvida com essas tecnologias em suas máquinas
para poderem utilizar. Basta que o usuário final da aplicação tenha uma navegador de internet
padrão instalado em seu computador e saiba o endereço da aplicação para ter acesso as devidas
funcionalidades.

2.2 Tecnologias Utilizadas em Desenvolvimento Web

2.2.1 HTML

Embora a web tenha sido inventada em 1992, a linguagem de marcação HTML

já existia no início da década de 1990 (SILVA, 2008). É utilizado para criar a estrutura de
documentos, sites, sistemas web etc. Ela se baseia no conceito de hipertexto criando conexões
com imagens, textos, vídeos, etc. Atualmente está em sua versão cinco e é compátivel com a
maiorias dos navegadores da atualidade.

2.2.2 CSS

O acrônimo CSS, em inglês Cascading Style Sheet. Em português, tem como

tradução livre "Folhas de estilo em cascata"(SILVA, 2008). Ela basicamente serve para estilizar a
estrutura de sites criada com HTML sendo possível alterar através dessa liguagem, fonte, cores,
imagens espaçamento etc.
 15

2.2.3 JavaScript

É uma linguagem de programação multi-paradigma criada em 1995 pelo programador

de computadores americano, Brenda Eich. Podendo ser utilizada tanto com o estilo de de
programação orientada a objetos como funcional (MOZILLA, 2021).
O JavaScript trabalha lado a lado com HTML e CSS. A sua principal função é
a de controlar o comportamento de sites e sistemas os tornado mais dinâmicos. O fato da
liguagem ser bastante dinâmica e está em constante evolução, permitiu-a superar as barreiras do
navegadores e também ser aplicada para desenvolvimento back end, mobile e até mesmo para
uso em desenvolvimento de jogos e inteligência artificial.

2.3 React

O React é como a sua própria documentação o define: “Uma biblioteca JavaS-

cript para criar interfaces de usuário” (REACTJS, 2021) que vem sendo muito utilizado no
desenvolvimento web moderno. Criada pela equipe do Facebook, tendo como uma das suas
principais características, a da utilização de componentes, facilitando assim o reaproveitamento
de código por toda a aplicação desenvolvida. Um outro fator a se mencionar é que o React possui
Interface de Programação de Aplicações / Application Programming Inter f ace (API) própria
para gerenciamento de estado, a saber, a Context API, nativa da própria biblioteca, não sendo
necessário instalar nenhuma depêndencia a mais além de ser mais simples de se utilizar do que
API de terceiros.

2.4 Protótipos

São representações iniciais de um projeto que possibilite testar e validar ideias antes
de lançar um produto, ajudando a tomar melhores decisões. Protótipos ajudam a ter mais
assertividade , economizando tempo e deixando os usuários finais mais satisfeitos. Protótipos
são baratos, permitem coletar feedbacks rápidos e dão a oportunidade de aprimorar ideias antes
de entregar um produto final (TAKE, 2019). Podendo ser de baixa, média e alta fidelidade.
 16

3 SISTEMA PROPOSTO

Nesse ponto, será apresentado o protótipo em si e o problema que ele visa resolver.
Também será apresentado a arquitetura dos elementos que o compõe, base de dados, hospedagem
e definição das funcionalidades iniciais da primeira versão do protótipo.
O sistema proposto leva a alcunha de "Tévira", uma junção das palavras "Te"+
"Vira"(Figura 1, que por sua vez é uma expressão utilizada quando queremos incentivar uma
pessoa a agir mesmo quando as chances de um certo empreendimento de esforço darem certo é
mínimo ou há uma certa limitação de recursos para se alcançar um determinado objetivo, é uma
outra forma de falar "Dê um jeito"em tal situação. Tal título foi escolhido porque se acredita que
representa bem a vida de um estudante onde muita das vezes precisa ser autodidata, está sempre
correndo atrás dos objetivos e dando o seu melhor para concluir sua carreira acadêmica.
Tévira foi desenvolvido com o objetivo de ser uma ferramenta que facilite a vida
tanto de professores, coordenadores e alunos de instituições de ensino superior as quais possuem
atividades complementares obrigatórias em suas grades curriculares.
A aplicação tem como principal funcionalidade fazer o registro das atividades com-
plementares através de um formulário de cadastro ao qual os alunos podem registrar tanto a carga
horária de uma atividade como anexar a imagem do certificado de participação de forma online e
inituitiva, sem a necessidade de instalar aplicativos adicionais ou preencher fichas de cadastro de
forma manual.

Figura 1 – Logo da Aplicação

Fonte: Elaborado pelo autor.

 17

3.1 Infraestrutura

A disposição do protótipo se encontra da seguinte forma, conforme a figura 2: o Fron

end está hospedado na Netlify, que por sua vez é responsável de fornecer os arquivos estáticos e
um link público de acesso à aplicação. Para o desenvolvimento da API foi utilizado o Sistema
de gerenciamento de conteúdo / Content Management System (CMS), Strapi, que por sua vez
usa o banco de de dados relacional, PostgreSQL, onde ambos estão hospedados na Heroku. O
armazenamento dos certificados que estão no formato de imagem, foi utilizado um serviço da
Amazon, que se chama S3, o qual prover um bucket onde se pode armazenar objetos por meio de
uma interface de serviço da web.

Figura 2 – Infraestrutura da aplicação

Fonte: Elaborado pelo autor.

 18

4 RESULTADOS COMPUTACIONAIS

Neste capítulo serão apresentadas algumas funcionalidades, que são as seguintes:

• Aluno ou Professor: logar na plataforma como aluno ou professor;
• Aluno: cadastro de aluno na plataforma;
• Aluno: cadastro de atividade;
• Professor: listar e pesquisar alunos;
• Professor: aprovar ou reprovar a submissão de uma atividade.

4.1 Logar na plataforma como aluno ou professor

Como se pode ver na Figura 3, é apresentada tela de login com dois campos, sendo
eles usuário e senha. Uma funcionalidade interessante é que se pode fazer login tanto com o
nome de usuário como o email cadastrado.

Figura 3 – Login da Aplicação

Fonte: Elaborado pelo autor.

 19

4.2 Tela Inicial do Aluno

Caso login seja feito por um usuário do tipo aluno, essa será a tela de boas-vindas
(Figura 4) com uma mensagem com o nome de usuário e um menu lateral seguindo o layout
outras grandes aplicações do mercado:

Figura 4 – Boas-vindas para o Usuário Aluno

Fonte: Elaborado pelo autor.

O menu principal conta com quatro opções, sendo elas:

• Atividades - nesse menu é onde o aluno pode visualizar as suas atividades.
• Cadastrar Atividades - é onde o usuário aluno pode ter acesso formulário onde se pode
submeter as atividades.
• Sugestões de Atividades - essa funcionalidade será implementada em versões futuras.
Neste menu é onde o aluno poderá enventualmente visualizar as sugestões de atividades
cadastradas previamente pelos professores.
• Estágios - assim como na funcionalidade mencionada anteriormente, esse menu também
será implementado em versões futuras. Neste menu é onde o aluno poderá enventualmente
visualizar as sugestões de estágios previamente cadastradas pelos professores da plata-
forma.
 20

Vale mencionar que quando se clica em alguma funcionalidade que ainda não existe,
é exibido uma mensagem como se pode ver na Figura 5.

Figura 5 – Mensagem de "Em breve!"

Fonte: Elaborado pelo autor.

4.3 Cadastro de aluno na plataforma

A Figura 6 mostra como é feito o registro por parte do aluno na plataforma. Os

campos a serem preenchidos tomaram como base os mesmos dados usado no Centro Universitário
UniGrande.
 21

Figura 6 – Tela de cadastro

Fonte: Elaborado pelo autor.

O formulário é preenchido e os dados são enviados para a API, feita com o Strapi e
posteriormente salvo em um banco de dados PostgreSQL. Também é feito algumas validações
antes de os dados serem enviados para submissão, caso os dados não estejam dentro dos
conformes pré estabelecidos, é exibido uma mensagem em vermelho logo a baixo dos campos
do formulário, conforme pode ser observado na figura 7:
 22

Figura 7 – Validações no formulário de cadastro

Fonte: Elaborado pelo autor.

4.4 Cadastro de atividade por parte do aluno

Essa é a funcionalidade principal da aplicação. Na Figura 8 é exibido o formulário

de submissão de uma atividade complementar.
 23

Figura 8 – Submissão de atividade complementar

Fonte: Elaborado pelo autor.

Para envio da imagem do certificado poder ser tanto clicando na ícone de envio ou
arrastando e soltando um arquivo na área determinada para tal fim. No final da submissão é
exibido uma mensagem com a confirmação com duas opções, uma para cadastrar uma nova
atividade e a outra para listar todas as atividades já cadastradas como se pode observar na Figura
9.
 24

Figura 9 – Confirmação de submissão de atividade complementar

Fonte: Elaborado pelo autor.

caso o usuário aluno clique em "Visualizar atividades"será redirecionado para a

página que lista todas as suas atividades cadastradas pelo usuário logado, conforme a Figura 10.
 25

Figura 10 – Lista de atividades complementares

Fonte: Elaborado pelo autor.

Por padrão as atividades recém criadas são exibidas com o status: "Em avaliação"que
significa que já está pronta para ser avaliada pelo usuário do tipo professor. Lembrando que
somente usuários do tipo professor tem acesso à funcionalidade de avaliação de atividades.

4.5 Listar e pesquisar alunos

Essa funcionalidade somente o usuário do tipo professor pode realizar. Quando

logado, ele tem acesso à opções de menus diferentes do perfil de aluno. Quando o usuário
professor clica em "Avaliar atividades", primeiro lhe é mostrado uma lista com todos os alunos
cadastrados, conforme pode ser visto na Figura 11.
 26

Figura 11 – Listagem de alunos cadastrados

Fonte: Elaborado pelo autor.

Após um usuário localizar um aluno ao qual ele deseja avaliar, ele clica em cima do
nome do aluno e é redirecionado para uma segunda tela que lista todas as atividades do aluno
selecionado, conforme a Figura 12.
 27

Figura 12 – Listagem de atividades de um aluno selecionado

Fonte: Elaborado pelo autor.

4.6 Aprovar ou reprovar a submissão de uma atividade

Quando o o usuário professor clica em uma atividade especifíca como é mostrado na

figura 12, é redirecionado para uma página específica onde contem as informações individuais
da atividade selecionada, como pode ser observado na Figura 13.
 28

Figura 13 – Informações de uma atividade selecionada

Fonte: Elaborado pelo autor.

É nesta tela que o professor pode aprovar uma atividade, além de ver em tela cheia o
certificado submetido clicando na miniatura da imagem como pode ser observado na Figura 14.

Figura 14 – Certificado em tela cheia

Fonte: Elaborado pelo autor.

 29

4.7 Avaliação

Para avaliação da aplicação, o link da aplicação foi disponibilizado para os alunos

(via aplicativo Whatsapp) de uma das disciplinas ofertadas no semestre 2021.1 do Centro
Universitário UniGrande. Foi compartilhado também um formulário avaliativo com 5 questões
visando avaliar a usabilidade da aplicação. O formulário foi baseado em (JÚNIOR, 2018) e foi
composto pelas seguintes questões:
• Qual o nível de facilidade você teve para realizar as tarefas sugeridas (acesso, cadastro,
consulta e cadastro de atividades) para a avaliação?
• Quantos erros você encontrou durante a execução das tarefas (acesso, cadastro, consulta e
cadastro de atividades)?
• Para cada ação do usuário, o aplicativo oferece feedback imediato e adequado sobre seu
status?
• Como qualificaria a usabilidade da aplicação Tévira?
• Você teria alguma observação ou sugestão de funcionalidade para a aplicação?

4.7.1 Resultado da Avaliação

Como a turma onde a aplicação foi avaliada é pequena, obteve-se apenas 5 respostas,
cujos resultados estão apresentados nas Figuras 15, 16, 17 e 18. Observa-se que a maioria não
teve difuldades com a aplicação e classificaram a usabilidade como bo ou muito boa.

Figura 15 – Questão 1

Fonte: Elaborado pelo autor.

 30

Figura 16 – Questão 2

Fonte: Elaborado pelo autor.

Figura 17 – Questão 3

Fonte: Elaborado pelo autor.

Figura 18 – Questão 4

Fonte: Elaborado pelo autor.

 31

A última questão foi aberta e se observou que a maioria das sugestões foi a respeito
da responsividade da aplicação em dispositivos móveis. De fato é uma funcionalidade que não
foi implementada na versão inicial da aplicação, tendo em visto que o desenvolvimento visava
primeiro deixar o prótotipo funcional. Em trabalhos futuros, melhorias serão implementadas
Uma outra sugestão interessante foi a de se mostrar o resultado do total de horas de
atividades cadastradas, que inclusive é uma melhoria que já está mapeada para se colocar na
funcionalidade de dashboard do aluno.
Os resultados foram satisfatórios para um protótipo. Sendo evidente que o maior
gargalo da aplicação é de fato a responsividade para dispositivos móveis, o que acaba impacatando
na usabilidade final para os usuários.
 32

5 CONCLUSÃO E TRABALHOS FUTUROS

Neste trabalho foi desenvolvido um protótipo de aplicação que, embora com apenas
algumas funcionalidades básicas, se mostra capaz de realizar o gestão de atividades complemen-
tares de uma instituição de ensino superior. Listando desde as ferramentas utilizadas como a
linguagem de programação JavaScript e a principal biblioteca para desenvolvimento da interface,
React.
Vale ressaltar que foi possível colocar a aplicação no ar deixando-a totalmente
funcional e escalável, tendo em vista que foi utilizado alguns dos melhores provedores de
serviços do mercardo atualmente para tal feito, como por exemplo serviços da Amazon e Heroku
e Netlify.
Para fins de complemento a este trabalho , pode ser realizar a implementação funcio-
nalidades adicionais, tais como: um dashboard com gráficos mostrando o desempenho para o
aluno e quantas horas de atividade faltam para serem entregues, uma outra sugestão seria uma
funcionalidade para os professores postarem tanto sugestões de atividades complementares além
de também poder indicar estágios.
 33

REFERÊNCIAS

CUNHA, R. R. Smartacg-um aplicativo de suporte ao gerenciamento de atividades

complementares de graduação. Universidade Federal do Pampa, 2014.

CUPANI, A. Filosofia da tecnologia: um convite. [S.l.]: Editora da UFSC, 2016.

JÚNIOR, F. F. DESENVOLVIMENTO E AVALIAÇÃO DE UM APLICATIVO CAPAZ

DE GERENCIAR INTERATIVAMENTE LOCAIS DE INTERESSE. 2018. Disponível
em: <http://www.repositorio.ufc.br/bitstream/riufc/34715/1/2018_tcc_fjfernandes.pdf>. Acesso
em: 01 mai. 2021.

LASTRES, H. M.; ALBAGLI, S. et al. Informação e globalização na era do conhecimento. Rio

de Janeiro: Campus, v. 163, 1999.

MOZILLA. JavaScript Tutoriais. 2021. Disponível em: <https://developer.mozilla.org/pt-BR/

docs/Web/JavaScript>. Acesso em: 23 mai. 2021.

NATIONS, D. What Is a Web Application? 2020. Disponível em: <https://www.lifewire.com/

what-is-a-web-application-3486637>. Acesso em: 21 mar. 2021.

REACTJS. Uma biblioteca JavaScript: para criar interfaces de usuário. 2021. Disponível
em: <https://pt-br.reactjs.org/>. Acesso em: 21 mar. 2021.

SILVA, M. S. Criando sites com HTML: sites de alta qualidade com HTML e CSS. [S.l.]:
Novatec Editora, 2008.

TAKE. O que é prototipação: tudo sobre como fazer, tipos e ferramentas. 2019. Disponível
em: <https://www.take.net/blog/tecnologia/o-que-e-prototipacao/>. Acesso em: 23 mai. 2021.

UFG. Aplicativo para cálculo de atividades complementa-

res. 2020. Disponível em: <Disponívelemhttps://fanut.ufg.br/n/
63674-aplicativo-para-calculo-de-atividades-complementares>. Acesso em: 12 out.
2020.

UNIRIO. Ficha de Registro das Atividades Complementares. 2015. Dis-

ponível em: <http://www.unirio.br/unirio/cchs/ess/atividades-complementares/
ficha-de-registro-das-atividades-complementares/view>. Acesso em: 12 out. 2020.