Desenvolvimento de Sistema Web para Gerenciamento de Salas de Integração e Recursos
Desenvolvimento de Sistema Web para Gerenciamento de Salas de Integração e Recursos
Desenvolvimento de Sistema Web para Gerenciamento de Salas de Integração e Recursos
INSTITUTO DE INFORMÁTICA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
Porto Alegre
2019
UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL
Reitor: Prof. Rui Vicente Oppermann
Vice-Reitora: Profa. Jane Fraga Tutikian
Pró-Reitor de Graduação: Prof. Vladimir Pinheiro do Nascimento
Diretora do Instituto de Informática: Profa. Carla Maria Dal Sasso Freitas
Coordenador do Curso de Ciência da Computação: Prof. Sérgio Luis Cechin
Bibliotecária-Chefe do Instituto de Informática: Beatriz Regina Bastos Haro
AGRADECIMENTOS
Agradeço à minha companheira Caroline Mundel que viveu comigo essa etapa
importante, agradeço também à minha família por todo o suporte, pois sem eles nada seria
possível. Agradeço a todos os professores que compartilharam seu tempo e conhecimento,
nos permitindo evoluir como pessoas e profissionais, em especial aos professores Leandro e
Franscisco que foram vitais no desenvolvimento deste trabalho, bem como à professora
Sibele que aceitou participar do processo de avaliação.
RESUMO
Este trabalho tem como objetivo desenvolver uma solução de software para apoiar
educadores que atuam em Salas de Integração e Recursos (Serviço de Atendimento
Educacional Especializado - AEE) no atendimento de alunos com necessidade educacionais
especiais. Nas rotinas de trabalho, esses educadores necessitam gerenciar as informações a
respeito do desenvolvimento do aluno, elaborar pareceres, preencher formulários pré-
estabelecidos. A solução propõe o desenvolvimento de um sistema web, responsivo, pelo
qual o professor poderá preencher formulários, fazer a inclusão de imagens e vídeos na
base de dados do aluno, importar informações para elaboração de pareceres e armazenar o
histórico do aluno em uma linha do tempo. Além disso, permite que sejam criados
formulários modelos, por meio da própria solução, visando atender as necessidades
específicas de cada escola, além de permitir fácil evolução, garantindo a longevidade da
solução. Por se tratar de uma solução web, foi escolhida a linguagem de programação PHP
junto com o framework Symfony, e na camada de persistência de dados foi utilizado o
sistema de gerenciamento de banco de dados PostgreSQL. O desenvolvimento do trabalho
teve como resultado uma solução que atende às necessidades primordiais de professores
especializados que atuam nas salas de recursos, a qual foi submetida a testes em um
ambiente real, com um resultado satisfatório.
ABSTRACT
This work aims to develop a software solution to support educators working in Integration
of Resource Rooms for the Specialized Educational Attendance Service in the care of
students with special educational needs. In their working routines, these educators need to
manage information about student development, prepare opinions, and fill out pre-
established forms. The solution here presented proposes the development of a responsive
Web system whereby the teacher can fill out forms, include images and videos in the
student database, import information for feedback and store student history on a timeline.
In addition, it allows template forms to be created to meet the specific needs of each school,
and allows for easy evolution, ensuring the longevity of the solution. Because it is a web
solution, the PHP programming language was chosen along with the Symfony framework,
and PostgreSQL database management system was used as the persistent layer. The
development of the work has resulted in a solution that meets the overriding needs of
specialist teachers working in resource rooms, which has been tested in a real environment,
with a satisfactory result.
1 INTRODUÇÃO ............................................................................................. 9
2 TECNOLOGIAS E ARQUITETURA UTILIZADAS ..................................... 12
2.1 Front-end ...................................................................................................................................... 13
2.1.1 HTML .................................................................................................................................... 13
2.1.2 CSS ........................................................................................................................................ 14
2.1.3 JavaScript ............................................................................................................................... 14
2.2 Back-end ....................................................................................................................................... 14
2.2.1 Controller ............................................................................................................................... 15
2.2.2 Model ..................................................................................................................................... 16
3 MODELAGEM DA SOLUÇÃO ................................................................... 18
3.1 Histórias de usuário...................................................................................................................... 18
3.2 Banco de dados ............................................................................................................................. 19
3.2.1 Tabelas ................................................................................................................................... 21
4 DESENVOLVIMENTO DO PROJETO ....................................................... 23
4.1 Model ............................................................................................................................................ 24
4.2 Controller ..................................................................................................................................... 28
4.3 View .............................................................................................................................................. 30
5 FUNCIONALIDADES DO SISTEMA .......................................................... 32
5.1 Tela inicial .................................................................................................................................... 32
5.2 Adicionar Aluno ........................................................................................................................... 32
5.3 Perfil do Aluno ............................................................................................................................. 33
5.4 Adicionar - Foto/Vídeo ................................................................................................................. 34
5.5 Adicionar - Acompanhamento ..................................................................................................... 35
5.6 Adicionar - Parecer ...................................................................................................................... 36
5.7 Adicionar - Plano de desenvolvimento ......................................................................................... 37
5.8 Adicionar - Adequação curricular ............................................................................................... 38
5.9 Adicionar Formulário Modelo ..................................................................................................... 39
5.10 Adicionar Agrupador ................................................................................................................. 40
5.11 - Adicionar Campo ..................................................................................................................... 41
6 AVALIAÇÃO .............................................................................................. 43
6.1 Utilização do Sistema.................................................................................................................... 43
6.2 Dúvidas e dificuldades decorrentes da utilização ........................................................................ 44
6.3 System Usability Scale .................................................................................................................. 45
6.3.1 Questionário ........................................................................................................................... 45
6.3.2 Pontuação ............................................................................................................................... 46
7 CONCLUSÃO............................................................................................. 47
9
1 INTRODUÇÃO
1
No período deste estudo o professor Francisco Dutra dos Santos Jr. já desenvolvia pesquisa sobre a
temática no Programa de Pós graduação em Informática na Educação - PPGIE - UFRGS, nível
doutorado. O papel de stakeholder, é devido a sua expertise na área, articulada com o interesse ao
desenvolvimento de tecnologia neste campo.
12
Fonte: https://symfony.com/
A escolha das tecnologias foi embasada por experiências prévias e bem sucedidas,
tanto com a linguagem PHP quanto com o framework.
2
https://symfony.com/
3
https://www.doctrine-project.org/
4
https://twig.symfony.com/
13
2.1 Front-end
2.1.1 HTML
2.1.2 CSS
CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a
apresentação de um documento escrito em HTML ou em XML (MOZILLA CSS, 2019).
Além do CSS puro, foi utilizado SASS (Syntatically Awesome Style Sheets) que é
uma tecnologia que realiza um pré-processamento do CSS (SASS, 2019).
2.1.3 JavaScript
2.2 Back-end
2.2.1 Controller
Uma Controller é uma classe PHP criada com o objetivo de tratar informações do
objeto Request e criar e retornar um objeto Response. O Response pode ser uma página
HTML, JSON, XML, um download de arquivo, um redirecionamento, uma mensagem de
erro para o navegador (SYMFONY CONTROLLER, 2019).
Além da classe de controller propriamente dita, essa camada possui mais dois
recursos importantes, abordados a seguir: route e forms.
2.2.1.1 Route
Quando o sistema recebe uma solicitação, ele executa uma ação de uma Controller
para gerar uma resposta. A configuração de Route define qual ação deverá ser executada
para cada requisição recebida (SYMFONY ROUTE, 2019).
No projeto foi decidido realizar a configuração de Route diretamente nas classes de
Controller, através do recurso de annotation fornecido pelo framework, embora o mesmo
também suporte a opção de haver um arquivo exclusivamente para configuração de Route.
2.2.1.2 Forms
São as classes utilizadas para a entrada de dados na aplicação. Nelas são definidas
características como obrigatoriedade dos dados para aquela requisição. Vale destacar que,
ao contrário das classes de entity (que serão abordadas posteriormente), a classe form
representa as regras naquele ponto, logo, podemos ter classes forms com regras diferentes
para uma mesma entidade.
O framework utilizado possui diversos recursos para esse tipo de classe, permitindo
que sejam definidos tipo dos campos e características como tamanho e obrigatoriedade.
Além disso, provê proteção aos ataques mais comuns, como submissão de campos que não
estavam previstos e tratamento de inserção de caracteres de controle.
A classe form é utilizada pelo framework em dois momentos: primeiro para
renderizar um formulário HTML propriamente dito, segundo para validar os dados
recebidos na submissão deste formulário.
16
2.2.2 Model
2.2.2.1 Entity
2.2.2.2 Repository
São classes responsáveis por realizar operações não-triviais sobre a base de dados,
as quais são desenvolvidas visando melhor escalabilidade e performance.
Seguindo o padrão do framework, para cada entity deve haver um repository.
Cabe salientar que a ferramenta de ORM já oferece operações triviais, tanto de
escrita, através de comandos para persistência, quanto de leitura, por meio de comandos
para obter todos registros ou filtrar um conjunto de registros através de determinado
critério.
2.2.2.3 Service
Sempre que uma operação demanda algum tratamento diferenciado e/ou complexo,
esse comportamento específico deve ser implementado em uma classe de service. Essas,
17
por sua vez, ao contrário das classes de entity e repository, podem possuir de forma
simultânea referências a diversas entidades da aplicação, visando executar regras de
negócio mais elaboradas.
18
3 MODELAGEM DA SOLUÇÃO
3.2.1 Tabelas
● escola
○ Armazena informações básicas de uma escola para o sistema.
● aluno
○ Armazena informações básicas de um aluno, assim como o relacionamento
da escola atual do aluno.
● usuario
○ Armazena informações das pessoas autorizadas a acessar o sistema. Nestas
tabelas estão contidos todos os atores do sistema, diferenciados através de
sua referência à tabela de perfil.
○ Todo usuário, com exceção do usuário com perfil de Administrador, está
relacionado a uma escola, visando restringir o acesso aos registros de sua
responsabilidade.
● perfil
○ Armazena o nome do perfil de acesso, sendo eles: Administrador,
Coordenador e Educador.
● perfil_controle_acao
○ Armazena referência a um perfil de acesso.
○ Nome amigável ao usuário da classe Controller. Exemplo: Aluno, Escola.
○ Nome amigável ao usuário da ação de uma Controller. Exemplo: Salvar,
Visualizar.
○ Nome da rota propriamente dita (é um nome técnico que deve representar
uma Route). Exemplo: aluno_edit, escola_show.
● comentario
○ Armazena a descrição e o nome do arquivo de foto/vídeo salvo.
○ Armazena também referência do usuário que gerou assim como referência
para qual aluno foi gerado.
● acompanhamento
○ Armazena o texto do acompanhamento.
○ Armazena também referência do usuário que gerou assim como referência
para qual aluno foi gerado.
● parecer
○ Armazena o texto do parecer.
○ Armazena também referência do usuário que gerou assim como referência
para qual aluno foi gerado.
22
● formulario
○ Armazena o nome do formulário modelo. Exemplo: Plano de
desenvolvimento individual, Adequação curricular.
● formulario_agrupador
○ Armazena o nome do agrupador de campos dentro de um formulário
modelo. Exemplo: Anacronismos e Habilidades, Plano de Intervenção
Pedagógica.
● formulario_campo
○ Armazena informações dos campos dos formulários modelos, como legenda
e ordem de disposição em tela.
○ Armazena também seus tipos. Exemplo: Texto, Área de texto, Data.
○ Todo campo deve possuir uma referência de um formulario_agrupador.
○ Possui uma referência à entidade_dado_mapeado.
● entidade_dado_mapeado
○ Armazena o nome da entidade e o nome do atributo/método que pode ser
acessado e utilizado como valor para um registro de formulario_campo.
● formulario_registro
○ Armazena os dados de um formulário preenchido, originado com base em
um formulário modelo pré-existente.
○ Os registros desta tabela são os formulários dos alunos propriamente ditos.
● formulario_registro_campo
○ Armazena os valores preenchidos para cada campo existente em um
formulário modelo.
● migration_versions
○ Controle interno do framework para organização das execuções dos arquivos
de migração da base de dados.
23
4 DESENVOLVIMENTO DO PROJETO
4.1 Model
As pastas diretamente relacionadas à camada de model são Entity, Repository e
Service. Conforme dito anteriormente, um dos pontos fortes do framework symfony são
seus utilitários por linha de comando. Todas as entidades do projeto foram criadas a partir
de comandos, o que garante uma padronização e diminui as chances de erros.
Visando demonstrar o uso prático, será apresentado um cenário de exemplo no qual
será adicionada a entidade Turma ao projeto, fazendo com que uma Escola possa ter N
Turmas.
O comando utilizado para criar/editar entities é o “./bin/console make:entity” tendo
um exemplo prático ilustrado pela Figura 4.2.
Figura 4.5 – Exemplo de alteração realizada pelo comando make:entity em classe existente
4.2 Controller
Seguindo este modelo, somente é necessário definir quais campos devem ser
renderizados e processados para este formulário, através do método buildForm. O
framework realiza diversas configurações automaticamente, observando os atributos da
entidade em questão e seu formulário. Vale destacar que as principais são: inferir o campo
adequado do HTML para o atributo, padronizar a primeira letra do label como maiúscula,
definir tamanho máximo para o campo e definir sua obrigatoriedade.
4.3 View
Ressalta-se que todo conteúdo na pasta é escrito com comandos da ferramenta Twig
mesclada com HTML. A figura 4.11 apresenta exemplo do trecho que exibe o formulário
para criar/editar uma entidade.
Os comandos entre chaves, por exemplo form_start, são comandos Twig que, por
sua vez, trabalham em conjunto com as definições do Symfony, renderizando o conteúdo
definido na classe Form, que foi abordada no tópico anterior.
32
5 FUNCIONALIDADES DO SISTEMA
A tela inicial do sistema, ilustrada pela Figura 5.1, apresenta a lista de alunos da
escola à qual o usuário está associado e possui as seguintes funcionalidades:
● Ao clicar em uma foto de aluno, o sistema encaminhará para tela de Perfil do
Aluno;
● Ao digitar um nome no campo acima da listagem, o sistema aplicará o valor
digitado como filtro;
● Ao clicar em Novo Aluno, o sistema encaminhará para tela de Adicionar Aluno.
A tela Adicionar Aluno, apresentada na Figura 5.2, permite gerar um novo registro
de aluno. Quando um aluno é adicionado, o sistema infere sua escola com base na escola do
usuário logado.
33
Na tela Adicionar Parecer, ilustrada pela Figura 5.6, é possível definir o texto de um
parecer. Assim como na tela de Adicionar Acompanhamento, foi utilizado um editor texto,
porém este permite formatações avançadas e, na parte de baixo da tela, há uma timeline
horizontal, na qual temos acesso aos registros previamente salvos, os quais podem ter seu
conteúdo importado para o parecer através de um clique.
37
Nesta tela de Adicionar Adequação Curricular, ilustrada pela Figura 5.8, o educador
da SIR registra a proposta de como o professor de sala de aula deve abordar cada conteúdo
de acordo com as necessidades do aluno. Assim como na tela Adicionar Plano de
Desenvolvimento, todos os campos foram configurados através do próprio sistema, pelo
cadastro de formulários, o seu layout foi desenvolvido para remeter o usuário ao modelo
atualmente utilizado no papel, e alguns campos já iniciam com valores obtidos do cadastro
do aluno.
39
Diferentemente das telas anteriores, esta não faz parte do escopo de acesso do perfil
de Educador. Este acesso é permitido apenas para os perfis de Coordenador e
Administrador.
Na criação de um formulário modelo, basta definirmos o nome do mesmo,
conforme Figura 5.9.
Depois de criado, na tela de listagem, teremos acesso ao botão de “Agrupadores”,
permitindo fazer a gestão do mesmo para esse formulário, conforme Figura 5.10.
40
6 AVALIAÇÃO
6.3.1 Questionário
Perguntas Respostas
4) Penso que precisaria do apoio de uma pessoa técnica para 1 (Discordo Fortemente)
poder utilizar este sistema.
5) Eu achei que várias funções deste sistema estavam bem 5 (Concordo Fortemente)
integradas.
6.3.2 Pontuação
7 CONCLUSÃO
REFERÊNCIAS