GATu - DESENVOLVIMENTO DE UM

SISTEMA WEB E MOBILE PARA

GERENCIAMENTO DE TURMA

Francisco Pinto Moreira Neto

 PROJETO DE CONCLUSÃO DE CURSO

Data de Depósito: 15/03/2021

Assinatura:

GATu - DESENVOLVIMENTO DE UM SISTEMA WEB E

MOBILE PARA GERENCIAMENTO DE TURMA

Francisco Pinto Moreira Neto

Patrı́cia Mascarenhas Dias

Tiago Alves de Oliveira

Monografia apresentada ao Curso de Engenharia de Computação da

UEMG Unidade Divinópolis, como requisito parcial para obtenção do
tı́tulo de Bacharel em Engenharia da Computação, sob a orientação
dos professores Profa. Patrı́cia Mascarenhas Dias e Prof. Tiago Alves
de Oliveira

Universidade do Estado de Minas Gerais - UEMG Unidade Divinópolis

15/03/2021
Dedico a Deus e aos meus
pais esse trabalho.
 Agradecimentos

Agradeço primeiramente a Deus por todas as coisas boas na minha vida. Agradeço
meus pais por todo carinho, cuidado, apoio que sempre tiveram comigo e pelos sacrifı́cios que
tiveram que fazer para me proporcionar sempre o melhor. Obrigado à minha noiva, por todo
o companheirismo, ajuda e por suportar todas as crises de ansiedade e estresse desses últimos
tempos. Obrigado a todos meus familiares e amigos também pelo apoio e compreensão. Sou
muito grato de ter tido a oportunidade de ter professores incrı́veis mas principalmente a Profa.
Patrı́cia Mascarenhas Dias e o Prof. Tiago Alves de Oliveira, que além de meus orientadores
sempre me ajudaram com tudo, dentro e fora da faculdade. Muito obrigado por terem sempre
acreditado em mim.
”Talvez não tenha conseguido fazer o melhor,
mas lutei para que o melhor fosse feito. Não
sou o que deveria ser, mas Graças a Deus,
não sou o que era antes.”
Martin Luther King
 Sumário

Lista de Figuras ii

Lista de Tabelas iv

1 Introdução 1
1.1 Objetivos do Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Objetivo Geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.2 Objetivos Especı́ficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Justificativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Estrutura da Monografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Trabalhos Correlatos 4

3 Materiais e Métodos 6
3.1 Fundamentação Teórica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.1 Arquitetura Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.2 Sistemas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.3 Sistemas Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.4 Banco de Dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4 Desenvolvimento 12
4.1 Diagrama de Caso de Uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2 Diagrama Entidade Relacionamento . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3 Identidade Visual e Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5 Análise dos Resultados 17

5.1 Sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.1.1 Sistema Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

i
 5.1.2 Sistema Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.2 Usabilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

6 Conclusões e Trabalhos Futuros 26

A Apêndice 27

ii
 Lista de Figuras

3.1 Usuário Web - Solicitação e resposta para uma página web. Fonte: Próprio Autor 8

4.1 Diagrama de caso de uso do coordenador. Fonte: Próprio Autor. . . . . . . . . . 13

4.2 Diagrama de caso de uso do representante. Fonte: Próprio Autor. . . . . . . . . 13
4.3 Diagrama de caso de uso dos alunos e pais. Fonte: Próprio Autor. . . . . . . . . 14
4.4 Diagrama entidade relacionamento do projeto. Fonte: Próprio Autor. . . . . . . 14
4.5 Tela de login Sistema Web. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . . 15
4.6 Tela principal Sistema Web. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . 15
4.7 Tela de login e tela inicial Sistema Mobile. Fonte: Próprio Autor. . . . . . . . . 16

5.1 Tela de Login do Sistema Web. Fonte: Próprio Autor. . . . . . . . . . . . . . . . 18

5.2 Tela principal Sistema Web. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . 18
5.3 Tela de Representantes. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . . . . 19
5.4 Tela de cadastro de Representantes. Fonte: Próprio Autor. . . . . . . . . . . . . 19
5.5 Tela de login dos aplicativos do representante e do aluno. Fonte: Próprio Autor. 20
5.6 Tela de inicial do aplicativo do aluno. Fonte: Próprio Autor. . . . . . . . . . . . 20
5.7 Tela de checklist do aplicativo do aluno. Fonte: Próprio Autor. . . . . . . . . . . 21
5.8 Tela de inicial do aplicativo do representante. Fonte: Próprio Autor. . . . . . . . 21
5.9 Telas de cadastro de tarefa e telefone. Fonte: Próprio Autor. . . . . . . . . . . . 22
5.10 Tela de chat Mobile. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . . . . . . 22
5.11 Mensagem automática enviada pelo Whatsapp. Fonte: Próprio Autor. . . . . . . 23
5.12 Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:
Próprio Autor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.13 Gráfico referente a avaliação da facilidade de utilização do aplicativo desenvol-
vido. Fonte: Próprio Autor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.14 Gráfico referente a avaliação da performance do aplicativo desenvolvido. Fonte:
Próprio Autor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

iii
5.15 Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:
Próprio Autor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.16 Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:
Próprio Autor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

iv
Lista de Tabelas

v
 Resumo

Pinto, Francisco. DESENVOLVIMENTO DE UM SISTEMA WEB E MOBILE PARA GERENCI-

AMENTO DE TURMA. Monografia do curso de Engenharia da Computação — UEMG Unidade
Divinópolis – Divinópolis, 2020.

Uma das habilidades mais valorizadas e difı́ceis atualmente é a organização. Difı́cil pois o
mundo requer mais produtividade, com cada vez mais tarefas a serem realizadas no dia a dia.
Muitas vezes as pessoas acumulam um emprego, estudos e vida social. Por isto, é necessária
uma organização e auto disciplina muito alta.
Com o foco nos estudantes, esse estudo é sobre a implantação de um sistema para gerencia-
mento de atividades escolares das turmas do CEFET Divinópolis. Além de identificar os tipos
de atividades escolares os alunos possuem, foi necessário verificar as melhorias que fizessem o
sistema encaixar ao uso do aluno.
O trabalho foi desenvolvido através de um sistema web e dois aplicativos mobile. O sistema
web será usado pelo coordenador, que terá o gerenciamento sobre todas as salas, podendo gerar
relatórios e ver as tarefas de cada turma. Os aplicativos serão usados pelos alunos, um deles
será usado pelo representante, que terá a possibilidade de cadastro de tarefas e telefones, e o
outro aplicativo será usado pelo representante a fim de acompanhar suas atividades da semana.

Palavras-chave: Desenvolvimento, Escolar, Sistema web, ReactJs, NodeJS, Flutter, Aplicativo

mobile.

vi
 Abstract

Pinto, Francisco. DEVELOPMENT OF A WEB AND MOBILE SYSTEM FOR CLASS MANA-
GEMENT. Monograph of the computer engineering course — UEMG Divinópolis – Divinópolis-MG,
2020

One of the most valued and difficult skills today is organization. Difficult because the world
requires more productivity, with more and more tasks to be carried out on a daily basis. People
often accumulate a job, studies and social life. For this reason, a very high organization and
self-discipline is necessary.
With a focus on students, this study is about the implementation of a system for managing
school activities of the CEFET Divinópolis classes. In addition to identifying the types of school
activities students have, it was necessary to check the improvements that made the system fit
the student’s use.
The work was developed through a web system and two mobile applications. The web
system will be used by the coordinator, who will manage all the rooms, being able to generate
reports and see the tasks of each class. The applications will be used by the students, one
of them will be used by the representative, who will have the possibility to register tasks and
phones, and the other application will be used by the representative in order to track their
activities of the week.

Keywords: Development, Academic, Web System, ReactJs, NodeJS, Flutter, Mobile App.

vii
 Capı́tulo

1
Introdução

De acordo com (MORAN, 2007), atualmente com a transformação e evolução mundial, a

sociedade muda e avança em um ritmo acelerado, surgindo a necessidade de uma contı́nua
atualização, principalmente no âmbito escolar. Esse ritmo acelerado na nossa vida, mais espe-
cificamente na vida acadêmica, nos faz buscar ferramentas e soluções que nos facilitem alguns
pontos, um deles é a questão de planejamento estudantil e da auto regulação em relação a
atividades acadêmicas.
Segundo Perrenoud (1999), a auto regulação consiste nas “capacidades do sujeito para gerir
ele próprio seus projetos, seus progressos, suas estratégias diante das tarefas e obstáculos”. Essa
auto regulação parte dos próprios alunos para realização de seus objetivos.
Existem vários estudos que relacionam essa auto regulação com a melhora no desempenho
acadêmico (TESTA; FREITAS, 2005; LIMA; JESUS, 2011; FRANçA; TEDESCO, 2020). E a partir
de constatações no processo de aprendizado e nas notas dos alunos dos cursos técnicos do
CEFET-MG, utilizado como base para a prática e teste desse projeto, o setor pedagógico viu
a necessidade da elaboração de um software para auxiliar os alunos a fazer essa gestão.
A ideia do GATu (abreviação das palavras Gestão de Agenda de Turma) é fazer com que os
alunos consigam administrar melhor sua agenda escolar, a forma pensada pela equipe pedagó-
gica consiste em um aplicativo e uma página web onde o representante da sala será o responsável
pelo cadastro das atividades, e que essas atividades ficarão disponı́veis em um monitor na sala.
Esse software otimizaria um processo convencional.
A gestão de atividade escolares, convencionalmente, se dá de forma manual, onde cada aluno
anota a data e o conteúdo de tal. A desvantagem desse método se dá que frequentemente essa
informação é esquecida e somente lembrada na véspera da sua data. O GATu visa auxiliar o
representante de turma a fazer esse controle e automatizar o lembrete aos alunos.
Temos muitas ferramentas pedagógicas, entre elas o computador e a internet, quando bem

1
utilizados, poderão oferecer uma maior contribuição para uma nova postura docente (RAMOS,
2009).
Segundo Massetto (2002, p.144): ”É importante não nos esquecermos de que a tecnologia
possui um valor relativo: ela somente terá importância se for adequada para facilitar o alcance
dos objetivos e se for eficiente para tanto”.

1.1 Objetivos do Trabalho

Neste tópico serão apresentados os objetivos esperados do trabalho, inicialmente de maneira
resumida e objetiva e em seguida, de forma mais detalhada.

1.1.1 Objetivo Geral

O objetivo geral deste trabalho consiste em desenvolver um sistema Web e mobile para
auxiliar no gerenciamento das atividades acadêmicas dos alunos do CEFET-MG - Campus V.

1.1.2 Objetivos Especı́ficos

Para a conclusão do objetivo geral, é necessário concluir os seguintes objetivos especı́ficos:

• Identificar o método de organização já utilizado;

• Identificar os tipos de atividades acadêmicas existentes;

• Definir os requisitos do sistema;

• Definir o layout da solução;

• Criar a documentação do projeto;

• Criar as plataformas web e mobile;

• Testar a aplicação em uso com os alunos.

1.2 Justificativa
Neste contexto, vê-se a necessidade da criação de um sistema para uma melhor visão e
gerenciamento das atividades escolares.
Com o aplicativo implantado e sua utilização pelos alunos, durante o perı́odo letivo e com a
aviação da distribuição e organização das notas dos alunos, será possı́vel identificar e analisar a
quantidade e distribuição dessas tarefas durante o perı́odo letivo e o reflexo dessa distribuição
e organização nas notas dos alunos.

2
1.3 Estrutura da Monografia
A presente monografia está dividida em cinco capı́tulos. No capı́tulo 2 são apresentados
os trabalhos realizados. No capı́tulo 3 são apresentados todas as técnicas necessárias para
que possa utilizar esse artifı́cio junto aos objetivos do trabalho. Ainda no terceiro capı́tulo é
apresentada a metodologia utilizada na realização do trabalho. No capı́tulo 4 é apresentado o
desenvolvimento do trabalho. Por fim, no capı́tulo 5 são apresentadas as considerações finais.

3
 Capı́tulo

2
Trabalhos Correlatos

Alinhando tecnologia e auto regulação, os autores citam um aumento de produtividade e

performance. Os estudantes podem focar em coisas mais importantes e deixar a tecnologia
auxilia-los. Esse é objetivo do GATu.
A tecnologia estará cada vez mais presente no cotidiano, seja ele escolar ou profissional. Com
isso, é importante utilizar-se dela a nosso favor. Uma aplicação bem sucedida da tecnologia é
na área industrial. De acordo com (RODRIGUES; BRAGA, 1988) empresas investiam mais em
tecnologia para seus processos, o conhecimento sobre a própria empresa crescia. Ou seja, a
tecnologia ali empregada, ajudava no entendimento mais profundo dos problemas e processos
fazendo com que decisões mais corretas fossem tomadas.
No ambiente escolar o uso de computadores e celulares não é apenas uma forma de en-
tretenimento, eles são também uma importante ferramenta na prática pedagógica, podendo
solucionar problemas na esfera acadêmica. O GATu, como dito anteriormente, será um sistema
automatizado que auxiliará o estudante a se auto-regular.
A grande resistência feita por professores e a coordenação em geral ao uso deses aparelhos
em sala de aula é em relação ao desvio de foco, muitas vezes, dos alunos. Porém, o uso destes
com softwares educacionais em sala de aula, podem auxiliar a dinâmica, o aprendizado e o
conteúdo das aulas, como dito por (TEIXEIRA; BRANDãO, 2003).
A auto regulação segundo (TESTA; FREITAS, 2005) é um ramo da psicologia, desenvolvida
principalmente com base na teoria social da aprendizagem. Ressaltando que a auto regulação
é um aspecto importante do estudante e da performance acadêmica em sala de aula.
Um fator determinante para a auto regulação em qualquer área é a gestão do tempo. Uma
gestão do tempo bem feita, pode além de organizar as tarefas, fazer com que não haja uma con-
fusão e bloqueio mental. Segundo (LIMA; JESUS, 2011) um dos principais fatores que resultam
na má administração do tempo, é a falta de planejamento que deixa os problemas sem ordem

4
de prioridades e separação, causando uma confusão na estratégia de resolução.
Segundo (FRANçA; TEDESCO, 2020), aprendizagem autorregulada pode ser vista como uma
habilidade a se desenvolver nos ambientes escolar e informal. Apoiada ainda por tecnologias
educacionais, possuem um grande potencial para melhoria da qualidade da educação no Brasil.

5
 Capı́tulo

3
Materiais e Métodos

Nesse capı́tulo são apresentadas a fundamentação teórica e a metodologia utilizada nesse

trabalho. Na Seção 3.1 é apresentada a fundamentação teórica do trabalho. A Seção 3.2
apresenta a metodologia empregada no trabalho.

3.1 Fundamentação Teórica

Nessa seção são apresentadas todas as teorias e conceitos que serão utilizados no trabalho.
Na subseção 3.1.1 é apresentada o funcionamento arquitetura de um sistema web. Na subseção
3.1.2 é mostrado o que é um sistema web. Na subseção 3.1.3 é abordado sobre sistemas mobile.
E na subseção 3.1.4 o que são bancos de dados e o sistema de bancos relacionais.

3.1.1 Arquitetura Web

Aplicações web são compostas por dois atores principais, o cliente e o servidor. O cliente
podendo ser representado por um navegador web e o servidor por uma aplicação na forma de um
serviço. A interação ocorre quando o navegador acessa um site e o servidor processa e retorna
uma resposta, normalmente composta por HTML (HyperTet Markup Language), Javascript,
XML e outros elementos (EDUCAÇÃO, 2020).

HTML5

O HTML(HyperTet Markup Language), surgiu com a necessidade de descobrir um método

para possibilitar o compartilhamento de texto e pesquisas de forma eletrônica. Com isso, Tim
Berners-Lee inicia uma pesquisa para o desenvolvimento do HTML (BRITO; ZANELATO, 2013).

6
 Segundo (MILETTO; BERTAGNOLLI, 2014), o HTML(HyperTet Markup Language) é uma
linguagem de marcação para criar páginas que podem ser acessadas por um navegador, sendo
sua principal caracterı́stica é a utilização de hipertexto para viabilizar a navegação.
Desde sua criação, houveram algumas versões de HTML e visando a criação de padrões, pro-
tocolos e diretrizes, surgiu a W3C (Consórcio World Wide Web). Em 2006, W3C e WHATWG
(Web Hypertext Application Technology Working Group) uniram esforços para corrigirem erros
das versões anteriores e adicionarem novas funcionalidades, como semântica e acessibilidade,
surgindo o HTML5, versão usada atualmente. Atualmente a W3C desenvolve especificações
técnicas e orientações para aplicações web (ANTONIO; MACEDO, 2013).
A criação de páginas HTML segue uma certa estrutura resumida basicamente em head, que
seria a cabeça e body o corpo da aplicação, parte onde ficam basicamente o conteúdo visı́vel
da página. E para a inserção de elementos e textos nas páginas, são utilizados as tags, os
marcadores. (MILETTO; BERTAGNOLLI, 2014)

CSS3

Em 1997, paralelamente com o lançamento do HTML4, foi criado o CSS (Cascading Style
Sheets) (ANTONIO; MACEDO, 2013). Antes do CSS ser criado, as páginas HTML, tinham que
utilizar tags especı́ficas para estilização. E quando um elemento tinha sua aparência alterada,
todas as outras páginas sofriam a alteração também. O CSS permitiu criar estilos personalizados
para cada elemento, deixando o HTML apenas para a marcação do texto e ficando responsável
pela estilização (MILETTO; BERTAGNOLLI, 2014).
A declaração em CSS acontece por meio de seletores e as propriedades. Os seletores re-
presentam uma estrutura, um elemento ou uma classe de elementos.Já as propriedades são as
que darão caracterı́stica a estilização, como o aumento de uma fonte, a mudança de cor de um
elemento, entre outros (ANTONIO; MACEDO, 2013).

Javascript

Grande parte de regras e funções de interatividade em páginas web, é possı́vel realizar com
CSS. Porém páginas web também necessitam de scripts, que podem ser feitos com Javascript,
que gerenciem e manipulem informações de elementos dentro das páginas (ANTONIO; MACEDO,
2013).
Segundo (FLANAGAN, 2013), Javascript se tornou a linguagem mais onipresente da história,
pois está na ampla maioria de sites modernos, em computadores de mesa, tablets, smartfones
e todos os navegadores modernos também. Segundo (SILVA, 2010), a linguagem foi criada pela
Netscape com o objetivo de fornecer interatividade à páginas web, sendo lançada em 1995.
O Javascript pode ser encontrado tanto na parte do cliente, quanto na parte do servidor.
Na parte do cliente ela é incorporada no código HTML através da tag <script> e na parte do
servidor é utilizada para diversos fins, um deles é a manipulação do banco de dados (FLANAGAN,
2013)

7
3.1.2 Sistemas Web
Sistemas ou aplicações web nada mais são que softwares que estão hospedados na internet.
A vantagem deste tipo de aplicação é sua velocidade e escalabilidade.
Para um sistema web existem basicamente duas partes, o cliente e o servidor. A função
do servidor consiste, basicamente, em receber uma solicitação (ou requisição) e enviar uma
resposta para o cliente. O usuário do sistema, representando o cliente, ao clicar em um link,
obtém uma resposta do servidor, geralmente em HTML, com instruções ao browser de como
exibir o conteúdo na tela (PALMEIRA, 2020).
Na figura 3.1, é possı́vel ver o funcionamento de um sistema web e seu passo a passo, onde
o usuário clica em um link em seu navegador web, seu navegador formata e envia a solicitação
para um servidor, que localiza a página com endereço selecionado. Depois que a página é
encontrada, o servidor formata e envia uma resposta ao navegador, que transforma a resposta
para um formato visual e assim o usuário visualiza a página.

Figura 3.1: Usuário Web - Solicitação e resposta para uma página web. Fonte: Próprio Autor

React.JS

O React.Js é uma biblioteca criada pelo Facebook e baseada na linguagem Javascript (KOP-
PALA, 2018). A biblioteca é orientada a componentes, podendo ser encapsulados e gerenciar seu
próprio estado (REACT, 2020). Isso faz, por exemplo, com que não seja necessário recarregar a
página a cada nova requisição, podendo ser atualizado apenas o componente afetado.
Segundo (JUNIOR; FARAH, 2019), os padrões de React utilizam a estrutura de componentes
com o objetivo de dividir o código em partes menores, podendo assim ser reaproveitados na
aplicação. Alguns dos padrões são, Container and Presentation, que tem o objetivo de separar
a parte lógica, eventos e manipulação de dados da parte de apresentação, e o padrão High-Order
Components que consiste em funções que melhoram um componente criado, tornando o código
mais fluido e com um melhor desempenho.

8
Node.JS

Os sistemas construı́dos com linguagens .NET, Java, PHP, entre outras, possuem a caracte-
rı́stica de paralisarem um processo quando processam uma entrada ou saı́da (I/O) no servidor
(PEREIRA, 2017). Além de criarem uma nova thread a cada requisição, o que resulta em um
maior consumo de recursos e em uma menor eficiência do sistema.
O Node.Js surgiu para resolver este problema, no final de 2009, utilizando como base a
engine Javascript V8, utilizada também no navegador Google Chrome. O Node funciona de
forma assı́ncrona utilizando uma única thread de execução, ou seja, quando uma nova requisição
é feita, ela entra no fluxo de requisições, a máquina virtual verifica do que se trata, delega essa
atividade e já atende uma nova requisição (PEREIRA, 2017).
O Node conta também com um gerenciador de pacotes, o Node Package Manager (NPM),
instalado com ele (HOLMES, 2016). O NPM faz com que seja possı́vel a instalação e gerencia-
mento de pacotes de terceiros, facilitando o desenvolvimento.

Web Services

Devido a ausência de padrões, as empresas e usuários ficavam presos a sistemas de uma só
empresa por não compatibilidade na comunicação, desta forma criou-se uma demanda por uma
tecnologia que permitisse com que sistemas diferentes comunicassem entre si. A resposta para
esta demanda foram os web services e a linguagem XML, que permitiram isto de forma rápida,
fácil e barata (ABINADER; LINS, 2006).
Web services são um conjunto de métodos para a comunicação entre programas. O protocolo
aqui utilizado é o REST (Representational State Transfer ), baseado no HTTP e utilizando
formatos de representação JSON.

3.1.3 Sistemas Mobile

Segundo (PREZOTTO; BONIATI, 2014), são considerados dispositivos móveis, celulares, ta-
blets e outros dispositivos que ofereçam mobilidade e autonomia. E por oferecer essa mobilidade,
estão presente em grande quantidade na vida das pessoas, o que oferece um grande mercado
para o desenvolvimento de aplicações próprias.
Ao pensar em desenvolver aplicações mobile, é importante pensar em qual plataforma se
deseja desenvolver. Celulares Android são maioria dos aparelhos, porém celulares IOS também
são bastante usados. Cada plataforma oferece opções de criar aplicativos. Para o Android,
utilizamos a linguagem Java e Kotlin e a Apple oferece as ferramentas Objective-C ou Swift
(LOPES, 2016).
Para o desenvolvimento da aplicação mobile do GATu, será utilizada uma plataforma hı́-
brida. Segundo (PREZOTTO; BONIATI, 2014), este tipo de aplicação possui a finalidade de
funcionar em qualquer dispositivo, podendo ser de qualquer plataforma, Android e IOS por
exemplo. Um exemplo de Framework que permite o desenvolvimento hı́brido é o Flutter.

9
Flutter

O Flutter é um framework, desenvolvido pela Google em linguagem Dart, que permite o

desenvolvimento multiplataforma (IOS e Android) a partir da composição de widgets, que são
os blocos como botões, menus e etc (FLUTTER, 2020).
O Flutter renderiza seus próprios componentes ao contrário da grande maioria que utiliza
os componentes nativos. Os widgets podem ser adicionados de forma fácil e rápida e não
dependendo se a plataforma os suporta, permitindo com que o Flutter forneça widgets de um
formato especı́fico (ZAMMETTI, 2020). De acordo com (CORAZZA, 2018), isso é o que torna o
Flutter diferente de outros frameworks.

3.1.4 Banco de Dados

Segundo (ELMASRI; NAVATHE, 2006), a construção de um banco de dados consiste em arma-
zenar os dados em alguma mı́dia, seja de forma local ou remota, e controlá-los através de um
SGBD (Sistema Gerenciador de Banco de Dados). A manipulação desse banco pode ocorrer de
forma, por exemplo, a consultar um dado cadastrado, cadastrar um novo dado e gerar relatório
dos dados. Um banco de dados também torna possı́vel o compartilhamento desses dados a
múltiplos usuários e programas autorizados.

Banco de Dados Relacionais

Bancos relacionais são muito utilizados pois possuem fácil instalação, manutenção e con-
trole, além de oferecerem validação automática de algumas caracterı́sticas como controle de
transações, otimização de consultas, entre outras (LOPES, 2014).
Os bancos de dados relacionais trabalham com a linguagem SQL(Structured Query Lan-
guage), nele as informações são armazenadas em tabelas e cada tabela contém linhas (instân-
cias) e colunas (informação de cada instância). Cada coluna possui seu tipo de dado onde para
uma informação ser adicionada, é necessário que tenha o mesmo tipo (COSTA, 2007).

3.2 Metodologia
Em uma análise e conversa com um cliente, é comum que ele diga que entendeu tudo da
proposta e todas as funcionalidades, concordando e autorizando o desenvolvimento. Porém
quando o software é concluı́do e apresentado, ele percebe que não está como necessariamente
ele pensou, frustrando-o (DIAS, 2019). Por isso, a metodologia escolhida para o desenvolvimento
da aplicação é a prototipagem.
A prototipagem permite uma maior clareza, as funções, recursos e requisitos de um sistema,
o que não fica claro apenas com uma explicação do cliente (PRESSMAN; MAXIM, 2016). Os
protótipos, normalmente, são desenvolvidos rapidamente e representam uma forma simples do
software, podendo apresentar algumas funcionalidades. O desenvolvimento de um protótipo

10
pode acarretar também pontos negativos, como omissão da complexidade de algumas regras de
negócio e a frustração por alguma mudança na versão final do software (SOARES, 2007).
Mas embora possam ocorrer problemas, a prototipação é um paradigma bastante utilizado
na engenharia de software, pois a experiência adquirida em seu desenvolvimento é muito impor-
tante em etapas posteriores, o que reduz custo e resulta em um sistema melhor (NEPOMUCENO,
2012).
Para a prototipagem do sistema web e do sistema mobile foi utilizando o software Adobe XD,
que permite a criação de fluxos de usuários, designs de alta fidelidade, protótipos interativos,
animações e muito mais (ADOBE, 2020).

11
 Capı́tulo

4
Desenvolvimento

Nesse capı́tulo é apresentado como será desenvolvido a ferramenta proposta por esse sistema.
A ferramenta que será desenvolvida consiste em uma plataforma web e mobile que auxiliarão
no processo de gerenciamento das atividades acadêmicas.
De forma geral, pelas plataformas web e mobile será possı́vel o cadastro das atividades e
de contatos de alunos. De forma mais especı́fica, na plataforma web o coordenador terá um
acesso mais global e com mais poder, podendo realizar mais funções, já na aplicação mobile,
o representante terá um controle da sua sala. As funções de cada um serão demonstradas nos
diagramas de caso de uso abaixo mostrados.
Na Seção 4.1 são apresentados os diagramas de Caso de Uso do Sistema. Já na seção 4.2 é
apresentado o Diagrama Entidade Relacionamento proposto para o sistema. Por fim, na seção
4.3 é apresentada a Identidade Visual do Sistema, juntamente com um protótipo de como ficará
design da ferramenta.

4.1 Diagrama de Caso de Uso

Segundo (VIEIRA, 2020), o diagrama de Casos de Uso auxiliam no levantamento dos requi-
sitos funcionais do sistemado sistema. Esses diagramas fazem relação entre as funcionalidades
e as interações com os elementos externos e entre si. Nas figuras 4.1, 4.2 e 4.3 é possı́vel ver os
diagramas de todos os atores do sistema.
O primeiro caso de uso a ser relatado aqui é o da Figura 4.1, que representa o diagrama
de caso de uso para o usuário do tipo coordenador. Este ator possui todas as permissões do
sistema, sendo assim, ele pode gerenciar os contatos dos alunos, gerenciar as tarefas da turma,
gerar os relatórios (para o setor pedagógico), gerenciar os representantes de turma e visualizar o
calendário. Essas tarefas também incluir a gerência de feriados, análises detalhadas das turmas

12
e questões pedagógicas que serão tratadas durante a implementação.

Figura 4.1: Diagrama de caso de uso do coordenador. Fonte: Próprio Autor.

O diagrama do representante de turma é representado pela Figura 4.2, que possui menos
permissões que o coordenador, porém ainda consegue cadastrar tarefas e telefones e visualizar o
calendário. O Representante ficará responsável apenas pelo gerenciamento de sua turma. Caso
seja necessário a exclusão ou alteração de alguma função, ele deverá solicitar à coordenação.

Figura 4.2: Diagrama de caso de uso do representante. Fonte: Próprio Autor.

Já o diagrama que representa os atores pais e alunos, mostrado na figura 4.3, possui per-
missão apenas para visualizar o calendário. Pois estes atores não poderão realizar alterações
na aplicação. De forma geral, esses diagramas deixam claro as funcionalidades principais ou
atores e a relação entre eles. Com esses elementos bem definidos, é mais simples definir como
o sistema deve agir com cada ator.

13
 Figura 4.3: Diagrama de caso de uso dos alunos e pais. Fonte: Próprio Autor.

4.2 Diagrama Entidade Relacionamento

Segundo Gonzales o modelo entidade-relacionamento consegue descrever e definir de forma
sistemática um processo no banco de dados. Onde as tabelas são ligadas umas às outras para
descrever as dependências e exigência entre elas.
A figura 4.4 exibe o diagrama entidade relacionamento modelado pensando nos requisitos
da aplicação. Como se trata de um banco relacional, as tabelas estão conectadas e para esta
aplicação existem a tabela de Usuário, que abstrai as informações comuns tanto a representantes,
quanto a coordenadores, a pais e a alunos. Há também a tabela de Representante, onde é
possı́vel além dos dados de usuário, preencher o número de sua matrı́cula e a qual turma ele
representa. A tabela Coordenador que é um usuário comum, mas com privilégios maiores no
sistema. E existem ainda as tabelas de Tarefa, Campus, Matéria, Turma e Tipo Tarefa. Mesmo
com toda essa modelagem feita, durante o processo de desenvolvimento é comum esse diagrama
sofrer mudanças, porém com ele, já se consegue imaginar a estrutura necessária.

Figura 4.4: Diagrama entidade relacionamento do projeto. Fonte: Próprio Autor.

14
4.3 Identidade Visual e Design
O resultado esperado com relação ao design da aplicação é apresentado nas figuras 4.5, 4.6
e 4.7a. Na figura 4.5, está apresentada a tela de login da aplicação web. Na tela de login, o
usuário poderá acessar a plataforma através da inserção do e-mail e senha. Podendo também
recuperar sua senha, caso tenha perdido.

Figura 4.5: Tela de login Sistema Web. Fonte: Próprio Autor.

Na figura 4.6, encontra se o layout da tela principal da aplicação web. A tela inicial também
é um painel de gerenciamento de toda a aplicação, nesta tela o usuário coordenador poderá
adicionar, remover as tarefas, números de telefones, e representantes da plataforma. Nesta
página também é possı́vel visualizar os calendários de qualquer turma cadastrada.

Figura 4.6: Tela principal Sistema Web. Fonte: Próprio Autor.

Para a aplicação mobile, os layouts são os da Figura 4.7. Na figura 4.7a, é possı́vel visualizar
a página de login do usuário representante de sala. Nesta tela é possı́vel realizar a autenticação
através da inclusão do e-mail e senha. Também é possı́vel realizar um cadastro na plataforma
ou recuperar a senha em caso de perda.

15
 Figura 4.7: Tela de login e tela inicial Sistema Mobile. Fonte: Próprio Autor.

Já a figura 4.7b representa a tela principal da aplicação mobile. Nesta tela, encontra-se o
calendário de forma destacada com cores que sinalizam diferentes tipos de tarefas e atividades
no dia. Logo abaixo, encontra-se um campo onde serão apresentados em forma de texto, os
nomes das atividades do dia selecionado no calendário. O botão flutuante à direita tem a função
de realizar cadastros, tanto de telefones de alunos, quanto de novas tarefas.
As cores utilizadas para desenho do protótipo têm como base as cores da logo do CEFET, as
quais também são utilizada tanto no design aplicativo mobile quanto no design da ferramenta
web. O nome pensado para a ferramenta é GATu vem da abreviação de Gerenciamento de
Agenda de Turma.

16
 Capı́tulo

5
Análise dos Resultados

Neste capı́tulo é apresentado o resultado final de todo o sistema desenvolvido (aplicação web
e aplicativos mobile), bem como a validação de sua implantação teste através de um formulário
de pesquisa.

5.1 Sistema
O sistema, como descrito no capı́tulo 4, tem como proposta principal a boa usabilidade,onde
os usuários pudessem contar com um aplicativo simples, com telas fluı́das e limpas, e o design
elaborado no começo do projeto seguiu com pequenas alterações. Para as diferentes funções e
os diferentes usuários, o sistema é dividido em duas partes, a parte mobile, a parte web.

5.1.1 Sistema Web

O sistema web será totalmente direcionado para uso do coordenador. Abaixo são mostradas
as telas e funcionalidades apresentadas pelo mesmo.
Na figura 5.1 é apresentada a tela de login onde os administradores do sistema gerenciarão as
funcionalidades e os representantes das salas. Nesta tela não há opção de inclusão ou cadastro
de novos usuárias, já que essa é uma função restrita.
Na figura 5.2 é apresentada a tela inicial da aplicação na web, seguindo a proposta de
funcionalidade do app mobile, o calendário de tarefas é exibido no formato mês ou semana.
Neste formato, para cada tarefa é incluı́do um card na data, que funciona como um “lembrete”
virtual, facilitando a vida acadêmica do aluno, cumprindo a função principal da aplicação. As
tarefas são marcadas no calendário de acordo com a sala a ser solicitada. Para isso, ao carregar
a tela,o sistema faz algumas requisições http do tipo GET para a api, que retorna as atividades

17
 Figura 5.1: Tela de Login do Sistema Web. Fonte: Próprio Autor.

e as mesmas são renderizadas na tela no seu respectivo dia.

Figura 5.2: Tela principal Sistema Web. Fonte: Próprio Autor.

Na mesma tela se encontra a barra lateral de navegação do sistema, essa barra funciona
como menu, que conta com as funções: calendário (inicial), a aba Representantes, onde é
possı́vel que o coordenador(a) da unidade realize cadastros ou remova representantes. A aba
atividade onde é possı́vel cadastrar todos os tipos de atividades do campus e de cada sala. Uma
aba de telefones, onde é possı́vel adicionar telefones para o recebimento de mensagens. A aba
relatórios, onde são disponibilizados dados de quantidade de atividades por sala. E um botão
sair do sistema.
As telas de cadastro de representantes, atividades e telefones seguem a mesma lógica e layout
de funcionamento, por suas funcionalidades serão representadas nas figuras 5.3 e 5.4 referentes
a aba Representantes do menu.
Na figura 5.3, podemos observar a lista dos representantes, onde nessa lista são preenchidos
os dados: nome, matrı́cula, curso e turma. e as ações de editar e excluir. Para o preenchimento
da tabela, o sistema faz uma requisição http do tipo GET para a api, que retorna os alunos
cadastrados no campus. Caso o usuário clique na opção de excluir aquele dado, o sistema faz

18
uma requisição do tipo DELETE e exclui o representante com aquele id.

Figura 5.3: Tela de Representantes. Fonte: Próprio Autor.

Na figura 5.4 temos a parte de cadastro, ela contém todos os dados necessários para se ca-
dastrar um novo representante. Depois de todos os dados preenchidos, validados e submetidos,
o sistema faz uma requisição POST para a api, que cadastra o representante.

Figura 5.4: Tela de cadastro de Representantes. Fonte: Próprio Autor.

Como dito anteriormente, o sistema web, tem como principal função gerenciar a aplicação
de forma mais geral. Para utilização dos alunos, o sistema será mobile.

5.1.2 Sistema Mobile

O sistema mobile foi desenvolvido em linguagem hı́brida e por isso pode ser utilizada em
dispositivos com sistema operacional Android e IOS. Para a disponibilização dos mesmos nas
lojas de aplicativos, é necessário o pagamento de uma taxa em cada loja. De forma inicial, pelo
alto valor na loja de aplicatios IOS, os apps serão disponibilizados apenas em Android.

19
 A parte mobile será dividida em dois aplicativos, cada representante terá instalado o apli-
cativo na versão do representantes, com outras funções e responsabilidades.
As telas de login dos dois aplicativos, representadas na imagem 5.5, são bem parecidas.
Apenas com uma diferença: que no aplicativo aluno é possı́vel criar uma nova conta no próprio
aplicativo, o que não é possı́vel no representante, pois o mesmo tem mais permissões no sistema
e necessita de uma autorização dada pelo sistema web. É possı́vel verificar que a autenticação
é realizada pelo e-mail e senha, além de ser possı́vel recuperar a senha.

Figura 5.5: Tela de login dos aplicativos do representante e do aluno. Fonte: Próprio Autor.

Após efetuar o login no aplicativo do aluno, é possı́vel verificar uma tela como a mostrada
na figura 5.6, onde há uma frase de boas vindas, um calendário onde os dias marcados com
um ponto são aqueles que possuem algum tipo de atividade. Há também um quadro onde são
mostrados os nomes das atividades no dia selecionado no calendário. E no final da página,
existe um botão que, ao clicado, oferece duas opções, sair do aplicativo ou ir para a página de
checklist mostrada na figura 5.7

Figura 5.6: Tela de inicial do aplicativo do aluno. Fonte: Próprio Autor.

A figura 5.7, mostra a função de checklist, onde o aluno consegue ver as tarefas da semana
atual, onde sempre que ele conclui uma tarefa, ele clica na tarefa e a adiciona como concluı́da,
a removendo do checklist e deixando apenas as restantes.

20
 Figura 5.7: Tela de checklist do aplicativo do aluno. Fonte: Próprio Autor.

Como mostrado na figura 5.8, entrando no aplicativo do representante, observa-se prati-

camente a mesma tela apresentada no aplicativo do aluno, acrescidas com algumas opções no
menu. No menu temos as opções de Sair do aplicativo, adicionar número, adicionar tarefa, e
visualizar o chat.

Figura 5.8: Tela de inicial do aplicativo do representante. Fonte: Próprio Autor.

Para cadastrar uma nova tarefa, o representante deverá informar o nome da atividade, a
matéria, o professor e o tipo da atividade, podendo ser prova, atividade em sala, trabalho ou
atividade a ser entregue posteriormente. Já para o cadastro de telefone somente são necessários
os dados nome e telefone. Esses são automaticamente associados a sala. As telas de cadastro
de atividade e telefone podem ser vistas na figura 5.9.

21
 Figura 5.9: Telas de cadastro de tarefa e telefone. Fonte: Próprio Autor.

A última opção do menu é o chat. O chat tem a função de criar uma rede de comunicação
entre coordenador e os representantes, nele representantes e coordenador podem enviar mensa-
gens de forma mais geral entre si, motivando uma integração maior entre salas e coordenação.
A figura 5.10 apresentam um printscreen tela de chat.

Figura 5.10: Tela de chat Mobile. Fonte: Próprio Autor.

Outra opção fornecida pelo sistema é o envio de mensagens com as tarefas a serem entre-
gues durante a próxima semana. Essas mensagens são recebidas no whatsapp dos alunos, que
quiserem receber, de forma automática todos os domingos. A figura 5.11 mostra um exemplo
real de envio da semana.

22
 Figura 5.11: Mensagem automática enviada pelo Whatsapp. Fonte: Próprio Autor.

5.2 Usabilidade

Para a validação parcial do app, foram realizados alguns testes com a aplicação mobile.
Estes mobile foram realizados pelos usuários finais, alunos de uma turma do CEFET Divinó-
polis. Para o testes, os alunos fizeram o uso do app durante três semanas e posteriormente
responderam algumas perguntas do formulário do Apêndice A.

Foram elaboradas 5 possı́veis respostas para as perguntas do questionário (1 - Concordo

Totalmente, 2 - Concordo, 3 - Neutro, 4 - Discordo, 5 - Discordo Totalmente), seguindo a escala
Likert, que permite descobrir o nı́vel de concordância com certa afirmação de acordo com uma
escala pré definida, o que facilita a análise.

Foram elaboradas 5 perguntas. A primeira pergunta tratava-se da avaliação dos alunos

sobre a interface do app ser ou não amigável. A segunda pergunta questionava se o app tinha
uma fácil utilização. A performance do app foi questionada na terceira pergunta. Na quarta
pergunta foi questionado se o aplicativo facilitou o acompanhamento das atividades. E a quinta
pergunta objetivou em se a aplicação contribuiu em sua organização escolar.

O gráfico da primeira pergunta pode ser observado na figura 5.12. Nele podemos observar
que 44,4% dos alunos acharam amigável a interface do aplicativo, outros 33,3% discordaram e
22,2% se mantiveram neutros demonstrando que a aplicação tem um layout bonito para muitos,
porém pode melhorar em alguns aspectos.

23
 Figura 5.12: Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:
Próprio Autor.

Para a segunda pergunta, observa-se que 55,5% dos alunos acham a aplicação de fácil utili-
zação, o restante se mantiveram neutros, conforme mostrando no gráfico da figura 5.13. Com
essa pergunta, pode-se observar que a maioria acha a aplicação de fácil utilização, porém alguns
ainda possuem dificuldade.

Figura 5.13: Gráfico referente a avaliação da facilidade de utilização do aplicativo

desenvolvido. Fonte: Próprio Autor.

A performance da aplicação foi avaliada conforme o gráfico da figura 5.14. Em sua maioria,
66,7%, os alunos acharam que a plicação possui uma boa performance em uso e o restante dos
alunos se mantiveram neutros. Isto demonstra que o aplicativo se manteve estável e respondendo
as requisições feitas.

Figura 5.14: Gráfico referente a avaliação da performance do aplicativo desenvolvido. Fonte:

Próprio Autor.

24
 A figura 5.15 representa o gráfico das respostas dos alunos sobre a facilitação do acompa-
nhamento das tarefas, e 66,6% dos alunos concordaram, 22,2% se mantiveram neutros e 11,1%
discordaram. Com as respostas fornecidas, observa-se a eficiência do aplicativo.

Figura 5.15: Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:

Próprio Autor.

O gráfico da última pergunta pode ser observado na figura 5.16. Nele podemos observar que
55,5% dos alunos acharam que o aplicativo contribuiu na organização escolar.

Figura 5.16: Gráfico referente a avaliação da interface do aplicativo desenvolvido. Fonte:

Próprio Autor.

Com as respostas obtidas do formulário do Apêndice A, pode-se constatar que houve um

número considerável de alunos que obtiveram algum problema ou dificuldade com a aplicação.
Porém de forma geral, a maioria dos alunos acredita que o aplicativo pode contribuir com sua
organização escolar.

25
 Capı́tulo

6
Conclusões e Trabalhos Futuros

No desenvolvimento deste trabalho, foram utilizadas tecnologias bem populares, Flutter

como um framework muito popular e em ascensão em projetos mobile e React e Node como
tecnologias consolidadas em desenvolvimento web. Estas linguagens em conjunto tornaram
possı́vel o desenvolvimento de um sistema rápido, seguro e eficiente.
Salienta-se que após o desenvolvimento do sistema, não foi possı́vel o teste de eficiência
da aplicação em relação a melhora desempenho escolar causado pela organização, devido a
pandemia do COVID-19, com a mudança dos calendários escolares que sofreram alterações e
com as aulas remotas.
De modo geral, o objetivo principal do trabalho foi cumprido, disponibilizando uma ferra-
menta capaz de auxiliar no controle e na organização de atividades acadêmicas dos alunos e
com um gerenciamento prático pelo coordenador.
Por fim, de modo a aprimorar a aplicação desenvolvida, foram levantados os seguintes pontos
para trabalhos futuros:

• Criar o chat para o aplicativo do aluno;

• Dividir o chat em conversas individuais;

• Geração de relatórios completos;

• Liberação dos aplicativos a outras turmas e cursos;

• Observar a relação notas X organização;

26
 Apêndice

A
Apêndice

1. A aplicação possui uma interface amigável?

() Concordo Totalmente () Concordo () Neutro () Discordo () Discordo Totalmente
2. A aplicação é de fácil utilização?
() Concordo Totalmente () Concordo () Neutro () Discordo () Discordo Totalmente
3. A aplicação obteve uma boa performance em uso?
() Concordo Totalmente () Concordo () Neutro () Discordo () Discordo Totalmente
4. A aplicação facilitou o acompanhamento e a gestão das tarefas?
() Concordo Totalmente () Concordo () Neutro () Discordo () Discordo Totalmente
5. A aplicação contribuiu em sua organização escolar?
() Concordo Totalmente () Concordo () Neutro () Discordo () Discordo Totalmente

27
 Referências Bibliográficas

ABINADER, J.; LINS, R. Web Services em Java. Brasport, 2006. ISBN 9788574522494.
Disponı́vel em: <https://books.google.com.br/books?id=MUdQSavIynEC>.

ADOBE. Ferramenta de design de UX/UI e colaboração | Adobe XD. 2020. Access date: 25
ago. 2020. Disponı́vel em: <https://www.adobe.com/br/products/xd.html>.

ANTONIO, J.; MACEDO, A. Explorando html5, css3 and jquery mobile for intelligent home
control. In: . [S.l.: s.n.], 2013.

BRITO, W. D.; ZANELATO, A. P. A. A INOVAÇÃO DA WEB COM HTML5. [S.l.], 2013.

CORAZZA, P. V. Um aplicativo multiplataforma desenvolvido com Flutter e NoSQL para o

cálculo da probabilidade de apendicite. [S.l.], 2018.

COSTA, R. L. de C. SQL Guia Prático. [S.l.], 2007.

DIAS, R. P. Prototipagem de Software. 2019. Access date: 27 ago. 2020. Disponı́vel em:
<https://medium.com/contexto-delimitado/prototipagem-de-software-7ac07027e6d8>.

EDUCAÇÃO, C. P. Arquitetura básica de uma aplica-

ção web. 2020. Access date: 20 ago. 2020. Disponı́vel em:
<https://siteantigo.portaleducacao.com.br/conteudo/artigos/informatica/arquitetura-
basica-de-uma-aplicacao-web/37326>.

ELMASRI, R.; NAVATHE, S. B. SISTEMAS DE BANCO DE DADOS. [S.l.], 2006.

FLANAGAN, D. JavaScript: O Guia Definitivo. [S.l.], 2013.

FLUTTER. Flutter - Beautiful native apps in record time. 2020. Access date: 13 ago. 2020.
Disponı́vel em: <https://flutter.dev/>.

FRANçA, R. S. de; TEDESCO, P. C. de A. R. Autorregulação da aprendizagem em tecnologias

educacionais: Tendências e oportunidades. Revista de Sistemas de Informação da FSMA,
n. 25, p. 42–45, 2020.

28
HOLMES, S. MEAN Definitivo com Mongo, Express, Angular e Node. [S.l.], 2016.

JUNIOR, A. H.; FARAH, P. R. Avaliação de code smells e padrões de projeto

em aplicações com angular e react. In: Anais da III Escola Regional de Engenha-
ria de Software. Porto Alegre, RS, Brasil: SBC, 2019. p. 81–88. Disponı́vel em:
<https://sol.sbc.org.br/index.php/eres/article/view/8499>.

KOPPALA, J. ERP Solution with ReactJS. [S.l.], 2018.

LIMA, M. do C. F.; JESUS, S. B. Autorregulação da aprendizagem em tecnologias

educacionais: Tendências e oportunidades. GeSec - Revista de Gestão e Secretariado, v. 2,
n. 2, p. 121–144, 2011.

LOPES, J. M. UM ESTUDO COMPARATIVO ENTRE BANCOS DE DADOS

CONSIDERANDO AS ABORDAGENS RELACIONAL E ORIENTADA A GRAFO. [S.l.],
2014.

LOPES, S. Aplicações mobile hı́bridas com Cordova e PhoneGap. Casa do Código, 2016. ISBN
9788555191572. Disponı́vel em: <https://books.google.com.br/books?id=uSCjCwAAQBAJ>.

MILETTO, E. M.; BERTAGNOLLI, S. de C. Desenvolvimento de Software II: Introdução ao

Desenvolvimento Web com HTML, CSS, Javascript e PHP. [S.l.], 2014.

MORAN, J. M. Novas tecnologias e mediação pedagógica. [S.l.]: Papirus Editora, 2007.

NEPOMUCENO, D. Modelos Incremental, Espiral e de Prototipação. 2012.

PALMEIRA, T. V. V. Como funcionam as aplicações web. 2020. Access date: 20 ago. 2020.
Disponı́vel em: <https://reactjs.org/>.

PEREIRA, C. R. Node.js Aplicações web real-time com Node.js. [S.l.], 2017.

PERRENOUD, P. Avaliação: da excelência à regulação das aprendizagens: entre duas lógicas.

[S.l.], 1999.

PRESSMAN, R.; MAXIM, B. Engenharia de Software - 8a Edi-

ção. McGraw Hill Brasil, 2016. ISBN 9788580555349. Disponı́vel em:
<https://books.google.com.br/books?id=wexzCwAAQBAJ>.

PREZOTTO, E. D.; BONIATI, B. B. Estudo de frameworks multiplataforma para

desenvolvimento de aplicações mobile hı́bridas. Anais do EATI - Encontro Anual de Tecnologia
da Informação e Semana Acadêmica de Tecnologia da Informação, Anais do EATI, 2014. ISSN
0034-7590. Disponı́vel em: <http://www.eati.info/eati/2014/assets/anais/artigo8.pdf>.

RAMOS, N. C. C. M. O USO DO COMPUTADOR E DA INTERNET COMO

FERRAMENTAS PEDAGÓGICAS. [S.l.], 2009.

29
REACT. React – Uma biblioteca JavaScript para criar interfaces de usuário. 2020. Access
date: 13 ago. 2020. Disponı́vel em: <https://reactjs.org/>.

RODRIGUES; BRAGA, S. A informática na organização e no trabalho. Revista de

Administração de Empresas, scielo, v. 28, p. 43 – 50, 09 1988. ISSN 0034-7590.
Disponı́vel em: <http://www.scielo.br/scielo.php?script=scia rttext&pid = S0034 −
75901988000300006&nrm = iso>.

SILVA, M. S. JavaScript - Guia do Programador: Guia Completo das Funcionalidades de

Linguagem JavaScript. [S.l.], 2010.

SOARES, B. C. Requisitos para utilização de prototipagem evolutiva nos processos de

desenvolvimento de software para Web. [S.l.], 2007.

TEIXEIRA, A. C.; BRANDãO, E. J. R. SOFTWARE EDUCACIONAL: O DIFÍCIL

COMEÇO. [S.l.], 2003.

TESTA, M.; FREITAS, H. Auto-regulação da aprendizagem: analisando o perfil do estudante

de administração. In: . [S.l.: s.n.], 2005.

VIEIRA, R. UML — Diagrama de Casos de Uso. 2020. Access date: 13 ago. 2020. Disponı́vel
em: <https://medium.com/operacionalti/uml-diagrama-de-casos-de-uso-29f4358ce4d5>.

ZAMMETTI, F. Flutter na prática: Melhore seu desenvolvimento mobile com o SDK open
source mais recente do Google. Novatec Editora, 2020. ISBN 9788575228234. Disponı́vel em:
<https://books.google.com.br/books?id=Pi7KDwAAQBAJ>.

30