UNIVERSIDADE FEDERAL DE ALAGOAS - UFAL
CAMPUS ARAPIRACA
SISTEMAS DE INFORMAÇÃO
ARTHUR RODOLPHO FERREIRA FLORENTINO
TIAGO PAULINO SANTOS
O DESENVOLVIMENTO DE UM MÓDULO WEB PARA AVALIAÇÃO DE ALUNOS
NUMA EMPRESA DE CURSOS PREPARATÓRIOS EM PENEDO / AL
ARAPIRACA
2020
Arthur Rodolpho Ferreira Florentino
Tiago Paulino Santos
O desenvolvimento de um módulo web para avaliação de alunos numa empresa de cursos
preparatórios em Penedo / AL
Monografia apresentada como requisito parcial para obtenção do grau de Bacharel em Sistemas de Informação da Universidade Federal de Alagoas -UFAL, Campus Arapiraca.
Orientador: Prof. Me. Rômulo Nunes de Oliveira
Arapiraca
2020
Universidade Federal de Alagoas – UFAL Biblioteca Campus Arapiraca - BCA Bibliotecário Responsável: Nestor Antonio Alves Junior
CRB - 4 / 1557
CÍCERO GOMES DOS SANTOS
F633d Florentino, Arthur Rodolpho Ferreira
O desenvolvimento de um módulo web para avaliação de alunos numa empresa de cursos preparatórios em Penedo / AL / Arthur Rodolpho Ferreira Florentino; Tiago Paulino Santos. – Arapiraca, 2020.
51 f.
Trabalho de Conclusão de Curso – TCC [Graduação] – Sistemas de informação - Bacharelado, Universidade Federal de Alagoas – UFAL, Campus Arapiraca, Arapiraca, 2020.
Orientador: Prof. Me. Rômulo Nunes de Oliveira.
Bibliografia: p. 50. Anexo: p. 51.
1. Tecnologia da informação. 2. Angular. 3. Firestore Database. 4. Framework. 5. Javascript. 6. Metódos ágeis. I. Santos, Tiago Paulino. II. Oliveira, Rômulo Nunes de. III. Título.
Arthur Rodolpho Ferreira Florentino
Tiago Paulino Santos
O desenvolvimento de um módulo web para avaliação de alunos numa empresa de cursos
preparatórios em Penedo / AL
Data de Aprovação: 28/02/2020
Monografia apresentada como requisito parcial para obtenção do grau de Bacharel em Sistemas de Informação da Universidade Federal de Alagoas UFAL, Campus Arapiraca.
Banca Examinadora
Prof. Me. Rômulo Nunes de Oliveira
Universidade Federal de Alagoas - UFAL
Campus Arapiraca
(Orientador)
Profa. Ma. ayara Rosy Félix da Silva
Instituto Federal de Alagoas - IFAL
Campus Batalha
(Examinadora)
Prof. Me. Italo Cario Lopes Silva
Universidade Federal de Alagoas - UFAL
Campus Arapiraca
(Examinador)
Dedicamos este trabalho primeiramente a Deus
por sempre estar ao meu lado nos momentos
mais difíceis desse trabalho. Gostaríamos de
de-dicar esse trabalho a todos os nossos professores
da graduação, que foram de fundamental
impor-tância na construção da nossa vida profissional.
Ao professor Rômulo, pela sua paciência,
conse-lhos e ensinamentos que foram essenciais para o
desenvolvimento do TCC. Dedicamos este
pro-jeto as nossas famílias e amigos que sempre
es-tiveram presentes direta ou indiretamente em
todos os momentos de nossa formação.
AGRADECIMENTOS
Neste momento agradecemos a todos que contribuíram direta e indiretamente para que
esta dissertação se concretizasse. As nossas famílias pela paciência de se absterem de nossa
presença contínua no lar, muitas vezes nos fazendo ausentes em momentos importantes em prol
da realização deste projeto.
Agradecemos também ao colega Bruno Henrique, colega de sala e amigo pessoal de
nossa equipe, entusiasta do desenvolvimento web e mobile, que com seus conhecimentos sobre
o framework utilizado, não economizou recursos de tempo para compartilhar seus
conheci-mentos, agilizando a produção de todo o código do projeto, bem como nos orientando quando
encontrávamos problemas durante a produção em noites e noites a fio.
Ao nosso orientador, Professor Msc. Rômulo, agradecemos pela confiança em nosso
potencial, pelo profissionalismo com que nos orientou, pela paciência e garra com que nos
ajudou e por toda sua contribuição para a produção deste trabalho e evolução profissional que
nos proporcionou.
A nova fonte de poder não é o dinheiro na mão
de poucos, mas a informação na mão de muitos.
RESUMO
Com o advento da tecnologia de informação, cada dia mais as empresas buscam diferencial
com-petitivo melhorando seus processos, buscando torná-los mais inteligentes e precisos, melhorando
assim, os resultados organizacionais. O mesmo desejo pelo diferencial competitivo é encontrado
em uma empresa localizada no Baixo São Francisco, em Penedo-AL, conhecida como Objetivo
Cursos Preparatórios, que apesar de ser bem consolidada no mercado, ainda assim conta com
baixa infraestrutura tecnológica para atender algumas demandas dos processos de sistemas de
informação. Foram analisados vários subsistemas da empresa com a finalidade de levantar as
informações necessárias para a análise do desempenho de professores e estudantes. Foi percebida
a necessidade de implementar um sistema informatizado que auxiliasse no processamento das
informações e obtenção de estatísticas de simulados realizados, melhorando a performance
do processo, tornando-o menos trabalhoso e mais rápido com a utilização de um subsistema
para analisar o desempenho de estudantes e professores. Para informatizar este processo, foi
utilizada a aplicação da metodologia de desenvolvimento ágil e um conjunto de ferramentas que
serão mencionadas ao decorrer dos capítulos. Com a utilização dessas tecnologias foi possível
desenvolver um módulo web com portabilidade e responsividade, permitindo o acesso do sistema
de uma boa parte de dispositivos, tornando o sistema altamente disponível, escalável e facilitando
a gestão de todo o processo de avaliação dos simulados.
Palavras-chave: Tecnologia da informação. Angular. Firestore Database. Framework. Javascript.
Métodos ágeis.
ABSTRACT
With the advent of information technology, more and more companies seek competitive
diffe-rentiation improving their processes, seeking to make them more intelligent and accurate, thus
improving organizational results. The same desire for the competitive differential is found in a
company located in Baixo São Francisco, Penedo-AL, known as Preparatory Courses Objective,
which despite being well consolidated in the market, still has a low technological infrastructure
to meet some of the demands of the processes of information systems. Several subsystems of
the company were analyzed in order to gather the necessary information for the analysis of the
performance of teachers and students. It was noticed the need to implement a computerized
system that would aid in the processing of the information and obtaining statistics of simulated
realized, improving the performance of the process, making it less laborious and faster with the
use of a subsystem to analyze the performance of students and teachers. In order to computerize
this process, it was used the application of agile development methodology and a set of tools
that will be mentioned during the chapters. With the use of these technologies it was possible to
develop a web module with portability and responsiveness, allowing the access of the system
to a good number of devices, making the system highly available, scalable and facilitating the
management of the entire simulation evaluation process.
Keywords: Information technology. Angular. Firestore Database. Framework. Javascript. Agile
methods.
LISTA DE FIGURAS
Figura 1 – Hierarquia de Linguagens de Script . . . .
19
Figura 2 – Fluxo de Desenvolvimento Incremental . . . .
24
Figura 3 – Diagrama de Requisitos . . . .
27
Figura 4 – Fluxo da Metodologia de Desenvolvimento . . . .
30
Figura 5 – Diagrama de Processo para Realização do Simulado . . . .
31
Figura 6 – Diagrama de Caso de Uso . . . .
32
Figura 7 – Diagrama de Classes
. . . .
33
Figura 8 – Estrutura do Projeto no Angular . . . .
35
Figura 9 – Estrutura do Arquivo app.module.ts . . . .
37
Figura 10 – Estrutura Principal do Arquivo app.routing.ts . . . .
38
Figura 11 – Coleta da Configuração do Firestore . . . .
39
Figura 12 – Implementação da Conexão com a Aplicação Angular . . . .
39
Figura 13 – Exemplo de interpolação com Two-way Data Binding . . . .
40
Figura 14 – Exemplo de uso da diretiva [(ngModel)] . . . .
41
Figura 15 – Tela de Login . . . .
42
Figura 16 – Tela da Dashbord . . . .
43
Figura 17 – Tela de Cadastro de Pessoas . . . .
44
Figura 18 – Tela da Lista de Simulados . . . .
45
LISTA DE TABELAS
Tabela 1 – Ranking das Linguagens mais usadas em 2019/2020 . . . .
17
Tabela 2 – Lista de Ações dos Usuários
. . . .
42
LISTA DE ABREVIATURAS E SIGLAS
ABNT
Associação Brasileira de Normas Técnicas
API
Application Programming Interface
CSS
Cascading Style Sheets
DBMS
Database Management System
ES5
ECMAScript 5
ES6
ECMAScript 6
ENEM
Exame Nacional do Ensino Médio
HTML
HyperText Markup Language
HTTP
Hyper Text Transport Protocol
IDE
Integrated Development Environment
MVC
Modew-View-Controller
NoSQL
Not Only SQL
ORM
Object-relational Mapping
REST
Representational State Transfer
SI
Sistemas de Informação
SOAP
Simple Object Access Protocol
SQL
Structured Query Language
TI
Tecnologia da Informação
UML
Linguagem de Modelagem Unificada (do inglês, Unified Modeling
Lan-guage)
SUMÁRIO
1
INTRODUÇÃO . . . .
13
1.1
JUSTIFICATIVA
. . . .
13
1.2
OBJETIVOS . . . .
14
1.2.1
Objetivo Geral . . . .
14
1.2.2
Objetivos Específicos . . . .
14
1.3
METODOLOGIA . . . .
15
1.4
ORGANIZAÇÃO E ESTRUTURA DA MONOGRAFIA . . . .
16
2
TECNOLOGIAS, FERRAMENTAS E METODOLOGIAS UTILIZADAS 17
2.1
FERRAMENTAS E TECNOLOGIAS
. . . .
17
2.1.1
Javascript e Typescript . . . .
17
2.1.2
Angular Framework . . . .
20
2.1.3
Twitter Bootstrap . . . .
21
2.1.4
Github . . . .
22
2.1.5
Google Firestore . . . .
23
2.2
METODOLOGIAS APLICADAS . . . .
23
2.2.1
Métodos Ágeis . . . .
23
3
ANÁLISE DO ESTADO ATUAL DO SISTEMA DE INFORMAÇÃO . .
25
3.1
ANÁLISE DOS SUBSISTEMAS . . . .
25
3.2
LEVANTAMENTO DE REQUISITOS FUNCIONAIS E NÃO FUNCIONAIS 26
3.3
ANÁLISE DO SUBSISTEMA DE FEEDBACK PEDAGÓGICO . . . .
28
3.4
DIAGRAMAS . . . .
30
3.4.1
Diagrama de Processo . . . .
31
3.4.2
Diagrama de Casos de Uso
. . . .
32
3.4.3
Diagrama de Classes . . . .
33
4
DESENVOLVIMENTO DO MÓDULO
. . . .
35
4.1
ESTRUTURA INICIAL . . . .
35
4.2
Estrutura do app.module.ts
. . . .
36
4.3
Estrutura em Rotas a partir do app.routing.ts . . . .
37
4.4
Configurações de Conexão com o Google Firestore . . . .
38
4.5
Two-way Data Binding
. . . .
40
4.6
Testes e implementação . . . .
41
4.6.2
Consulta de Simulados . . . .
44
4.6.3
Consulta de Desempenho e Resultados . . . .
45
5
CONSIDERAÇÕES FINAIS
. . . .
47
5.1
DIFICULDADES . . . .
47
5.2
FUTURAS ATUALIZAÇÕES . . . .
48
5.2.1
Emissão de Provas . . . .
48
5.2.2
Emissão das Folhas de Redação e de Resposta . . . .
48
5.2.3
Leitura Óptica das Folhas de Resposta
. . . .
48
5.3
CONCLUSÃO . . . .
48
REFERÊNCIAS
. . . 50
13
1 INTRODUÇÃO
É certo que na atual conjuntura do mercado, utilizar a informação como subsídio para
apoio à tomada de decisões é algo que deve ocorrer de forma bastante natural e fluida. Fazer
uso do conhecimento adquirido para fomentar descobertas, aumentar produtividade e tornar um
processo qualquer em uma versão melhorada de si é um dos papéis principais da Tecnologia da
Informação (TI).
A aplicabilidade do uso da informação não pode ser mensurada em sua total amplitude,
tendo em vista que sempre que houver algum processo, método ou ação, haverá informação.
Diante desta visão, é importante refletir como a análise e o tratamento de informações, para
direcionamento pedagógico, pode ser feito de forma a fornecer subsídio para o gerenciamento
de desempenho de alunos e professores.
A partir desses índices e relatórios de simulados aplicados, objetiva-se transformar
a tarefa de correção manual dos gabaritos de simulados, em um processo estratégico para
empresas especializadas em cursos preparatórios, potencializando os processos metodológicos, e
solidificando a empresa no citado nicho de negócios.
Neste contexto, é proposta desta obra, a análise e criação de um subsistema que contemple
a solução do problema da correção dos gabaritos, bem como dispor de ferramentas estatísticas
de representação de dados.
1.1
JUSTIFICATIVA
Assim como em qualquer empresa, a necessidade de mensurar, analisar e avaliar os
diversos aspectos da preparação de alunos para concursos diversos, federais e estaduais e o
ENEM (Exame Nacional de Ensino Médio), é tida por uma empresa educacional desse ramo
como a chave para a garantia da qualidade do seu serviço. Baseado nesta premissa, uma empresa
do ramo educacional, localizada na região do Baixo São Francisco, na cidade de Penedo/AL,
cujo nome fantasia é Objetivo Cursos Preparatórios, desenvolveu ao longo de três anos uma
metodologia de treinamento própria, voltada para preparação para concursos públicos e para o
ENEM.
No escopo desta metodologia educacional, percebe-se o quanto é crucial a performance
na execução das questões, estimulando os alunos a maximizar a quantidade de acertos de
questões. O maior entrave no sistema de informação desta metodologia está no processamento
das informações e resultados das avaliações, pois tudo é feito de forma manual, através do uso
14
de formulários e planilhas eletrônicas.
Isso fez com que as informações sejam descentralizadas, muitas vezes pela falta de
automação no processo estejam sujeitas a ocorrência de erros ou falhas, e grande intervalo de
tempo para que essas informações sejam processadas e apresentadas, interferindo diretamente na
obtenção dos resultados.
Diante do exposto, é sensível a necessidade da presença de uma ferramenta que
automa-tize a execução desses processos, descentralizando partes necessárias, garantindo a qualidade da
informação e, otimizando desta o tempo gasto. Desta maneira, pode-se inferir que o Sistema de
Informação (SI) estará cumprindo seu papel à luz do seu conceito, conforme citado a seguir.
“SI é um conjunto de componentes inter-relacionados que coletam (ou recuperam),
processam, armazenam ou distribuem informações destinadas a apoiar na tomada de decisões, a
coordenação e o controle de uma organização.” (LAUDON; LAUDON, 2011).
Este trabalho teve como finalidade criar uma ferramenta específica para auxiliar na
metodologia do curso, a fim de facilitar a execução dos processos de correção dos simulados,
contagem de acertos, quantificação das notas, conversão das notas, emissão de boletins e alguns
relatórios de aproveitamento referentes aos simulados aplicados, baseado na persistência de
dados.
1.2
OBJETIVOS
1.2.1
Objetivo Geral
Desenvolver uma solução capaz de otimizar o processamento e armazenamento das
infor-mações dos simulados, sumarizando, classificando, categorizando, ordenando e disponibilizando
informações pedagógicas de forma estratégica e direcionada às necessidades da metodologia de
ensino do Objetivo Cursos Preparatórios.
1.2.2
Objetivos Específicos
• Analisar o subsistema pedagógico, mapeando os processos-alvo da empresa;
• Documentar os processos metodológicos utilizados no trabalho;
• Criar uma ferramenta de software para auxiliar a obtenção das informações dos simulados;
• Descrever informações sobre o funcionamento do módulo Web através do resultado de
15
1.3
METODOLOGIA
O trabalho foi iniciado com a análise dos sistemas na sede de funcionamento da empresa
em questão, buscando documentar através da análise de processos e da coleta de informações,
através de entrevistas para conhecer o escopo de cada necessidade por trás da metodologia do
curso, e como será produzida a ferramenta que lhes forneça o diferencial competitivo desejado.
Nesta fase, foram estabelecidos requisitos funcionais e não funcionais no módulo a ser criado.
Uma vez concluídas as sessões de briefing
1, para levantamento de requisitos, iniciou-se a
documentação e a fase de projeto do módulo. Nesta fase, foi documentado o mapeamento de
cada processo-chave, buscando também possibilidades de melhoria com a implementação do
módulo, sem ferir as regras de negócio da empresa, estabelecendo padrões de construção para o
protótipo.
Em sequência, foi necessário projetar a estrutura que será codificada, ou seja, foram
projetados diagramas de classe, de casos de uso e de processos através da modelagem UML
2(Unified Modeling Language).
De posse de toda a documentação, foi iniciada a codificação do projeto, atendendo aos
requisitos demandados. Para isso, foram utilizadas ferramentas de auxílio como framework
3para
o desenvolvimento da interface e das camadas do backend
4da aplicação.
Concluída a fase de codificação e documentação do projeto, foi adquirido o domínio
desejado pela empresa e, desta forma, foi preparado o projeto para ser compilado, e implantado.
Com a infraestrutura em execução, realizou-se um treinamento com os envolvidos, coordenadores,
assistentes e professores, sobre as funcionalidades e procedimentos de uso da ferramenta.
Finalizando os testes e treinamentos, o banco de dados foi migrado para seu estado inicial
e a implantação do projeto foi finalizada com os ajustes que se apresentaram necessários, bem
como a apresentação de sugestões que pudessem ser implementadas no futuro.
1 Técnica bastante utilizada por profissionais das áreas de Administração de Empresas, que consiste em elaborar
documento, onde é possível encontrar o resumo do que será preciso para executar determinado projeto, tarefa, atividade ou demanda.
2 É uma linguagem que define uma série de artefatos que ajuda na tarefa de modelar e documentar os sistemas
orientados a objetos.(BOOCH etal., 2006).
3 Um framework é uma estrutura que fornece suporte pare recursos genéricos para serem utilizados em aplicações
de tipos semelhantes. Ele permite o reuso tanto de projeto quando de suas classes específicas de sistema. (SOMMERVILLE, 2011, p. 300).
4 Camada das aplicações onde estão contidas as regras de negócio, gerenciamento de conteúdo e operações
16
1.4
ORGANIZAÇÃO E ESTRUTURA DA MONOGRAFIA
Este trabalho está organizado e dividido em quatro capítulos. No segundo capítulo, estão
descritas as ferramentas de produção de software e metodologias de Engenharia de Software que
foram utilizadas para a produção da solução, bem como a análise dos pontos e a justificativa para
o uso das tecnologias mencionadas no escopo do dado problema, confrontando com os recursos
disponíveis.
O capítulo seguinte é dedicado a descrição do atual sistema de informações da empresa,
elencando os diversos subsistemas existentes no ambiente analisado, como funciona a coleta,
armazenamento e processamento das informações do atual sistema.
Também consta uma análise mais profunda sobre o papel pedagógico na empresa, bem
como a automatização do processamento das informações que poderia solucionar problemas
como tempo de feedback
5e erros de cálculo.
Em certos aspectos, como a análise de desempenho de professores, a obtenção de
infor-mações que poderiam custar muito tempo e trabalho, mas que podem oferecer um diferencial
para a tomada de decisões e, posterior condução de trabalhos de capacitação de profissionais
internos.
Ainda neste capítulo, está descrita a documentação das informações coletadas,
cons-tituindo os diagramas essenciais à Engenharia de Software, de forma a ratificar os modelos
constatados e reafirmar as necessidades do cliente, no tocante ao modelo de solução.
O quarto capítulo é reservado para apresentação do resultado da construção do modelo,
as principais codificações, paradigmas de desenvolvimento, em suma, toda documentação do
projeto em si, como telas principais, menus e outros. Neste capítulo será demonstrado a fase
pós-projeto, como procedimentos de teste, implementação e avaliação do ponto de vista do
usuário, demonstrando se os objetivos gerais e específicos foram cumpridos.
Para conclusão, encontram-se os comentários sobre pontos específicos relacionados ao
projeto, como comentários sobre erros, dificuldades encontradas, documentando essas
ocor-rências de maneira que possam servir tanto para futuras aplicações como para manutenção do
próprio sistema. Em termos de sistemas de informação informatizados, percebe-se que estes
devem acompanhar a evolução dos processos das empresas, ou mesmo ser a evolução destes.
Ainda na conclusão, foram destacadas possibilidades de alterações futuras que podem beneficiar
o software e seus usuários.
5 Informação que o emissor obtém da reação do receptor à sua mensagem, e que serve para avaliar os resultados
17
2 TECNOLOGIAS, FERRAMENTAS E METODOLOGIAS UTILIZADAS
Antes de iniciar o desenvolvimento de uma aplicação Web é necessário definir quais as
tecnologias que serão utilizadas: linguagem de programação, IDE (Ambiente de Desenvolvimento
Integrado), DBMS (Sistema Gerenciador de Banco de Dados), servidor de aplicação, framework,
entre outros componentes. A linguagem Javascript, para Web, vem sendo largamente utilizada
e, pela sua constante atualização de código, é uma opção para o desenvolvimento Web, como é
possível aferir na Tabela 1.
Tabela 1 – Ranking das Linguagens mais usadas em 2019/2020
Fonte: Tiobe (2020).
No escopo técnico, buscou-se reduzir custos na criação do produto, ou seja, tentou-se ao
máximo conciliar a utilização de tecnologias que tornassem a obtenção da solução acessível, bem
como houvesse potencial para futuras correções, implementações de novas regras de negócio e
novas funcionalidades. O resultado dessas ponderações resultou na escolha de tecnologias já
difundidas no mercado, que analisando seu atual papel no cenário da tecnologia, pode-se prever
um longo ciclo de vida e, ainda fomentadas por grandes empresas, tornando o custo total (no que
tange gastos com investimento em licenças) deste projeto o mais baixo possível.
2.1
FERRAMENTAS E TECNOLOGIAS
2.1.1
Javascript e Typescript
O JavaScript (DEVMEDIA, 2019) foi introduzido em 1995 como uma maneira de
progra-mar as páginas no Netscape Navigator 2.0. A linguagem é adotada por todos os outros principais
18
navegadores gráficos. É possível usar aplicativos da Web com os quais você pode interagir
diretamente, sem fazer uma página recarregar para sempre. O Javascript é uma linguagem de
programação interpretada e desenvolvida com a finalidade de atuar do lado do cliente e interagir
sem que fossem necessárias as demandas desse script para o servidor. Inicialmente o Javascript
era utilizado somente para que componentes HTML (Linguagem de Marcação de Hipertexto)
respondessem a eventos, como validar os dados de um formulário antes de fazer uma chamada
para um servidor, contribuindo para que validações menores e tratamentos pequenos ocorressem
ainda na camada do cliente. Com o tempo, a linguagem Javascript passou a funcionar para que
objetos respondessem a eventos e, essa reposta fosse visual, ou seja, tornando componentes
estáticos como HTML e CSS (folha de estilo em cascata) em componentes que pudessem assumir
propriedades distintas quando em tempo de execução, trazendo para o usuário não somente
validações, mas animações e outros eventos assíncronos.
Javascript vem se popularizando tanto, que inclusive frameworks da linguagem tem
dominado boa parte da Web. De acordo com a BuiltWith Trends (2020), empresa que mensura
estatística de uso de linguagens, frameworks e tecnologias Web, dos dez mil sites mais acessados
da Web, 88,07% deles utiliza jQuery, uma biblioteca de funções Javascript utilizada largamente
na manipulação de eventos e animações.
O Javascript é uma linguagem relativamente antiga e ao longo da sua história sofreu
alterações. No momento atual, browsers (navegadores) como Chrome (Google), Safary (Apple),
Firefox (Mozilla), entre outros, implementam suporte à versão ECMAScript 5 (ES5) do
Javas-cript, que foi padronizada em 2009 e tem sido adotada desde então pelos navegadores. Porém,
atualmente o Javascript possui uma versão mais atual da linguagem, que é a versão ECMAScript
6 (ES6), conhecido também como ES2015, por ter sido oficialmente publicada em junho de
2015.
Nessa nova versão do Javascript foram disponibilizadas diversas características, que
tornam a linguagem significativamente mais completa e fácil de ser utilizada. O fato é que
programadores modernos já estão utilizando o ES6, porém os browsers ainda não possuem
suporte para a maioria desses novos recursos do ES6. Logo, temos uma incompatibilidade, pois
estão sendo criadas aplicações modernas que não são suportadas pelos navegadores atuais. Para
resolver este problema é preciso executar um transpiler, ou seja, é preciso modificar os códigos
modernos ES6 e converte-los para a versão ES5, cujos browsers atuais suportam. De acordo com
Fenton (2017), o processo de transpiler pode ser compreendido da seguinte maneira:
19
Transpilingé um termo específico para pegar o código-fonte escrito em um idioma e transformar em outro idioma com um nível de abstração semelhante. Então (sim-plisticamente) quando você compila C#, seus corpos de método são transformados pelo compilador em IL. Isso não pode ser chamado de transpilação porque os dois idiomas são níveis muito diferentes de abstração. Quando você compila o TypeScript, ele é transformado pelo compilador em JavaScript. Esses são níveis de abstração muito semelhantes, então você pode chamar isso de transpilação. Compiladores e transpila-dores podem otimizar o código como parte do processo. Outras combinações comuns que podem ser dubladas com transpilação incluem C++ para C, CoffeeScript para JavaScript, Dart para JavaScript e PHP para C ++. (FENTON, 2017, p. 22).
Fazer este transpiler é uma característica bastante significativa do Typescript. O
Types-cript além de realizá-lo, convertendo os códigos ES6 em códigos ES5, também atua como uma
expansão da linguagem Javascript tornando-o este o grande diferencial do Typescript, já que o
transpiler
do código por si só poderia ser feito por outros recursos já existentes, como o Babel
1por exemplo. Devido a estes motivos, o Typescript foi escolhido para o desenvolvimento da
aplicação Web.
O Typescript engloba o ES5 e o ES6 como pode ser observado na Figura 1:
Figura 1 – Hierarquia de Linguagens de Script
Fonte: Os autores (2019).
Por fim, a coleção de frameworks destinados às mais diversas finalidades aparece não
somente em navegadores ou para manipulações no lado cliente da aplicação, mas também na
construção de serviços Web REST (Transferência de Estado Representacional), SOAP (Protocolo
Simples de Acesso a Objetos) e APIs (Interface de Programação de Aplicativos), provendo
serviços diversos para aplicações de alta performance. Para o lado servidor da aplicação, vale
1 Disponível em: https://babeljs.io/. Acesso em: 04 fev. 2019.20
destacar um framework que vem se popularizando junto com o Angular, o Node.Js, que utiliza
por padrão a mesma semântica de desenvolvimento.
2.1.2
Angular Framework
O Angular 2+
2, ou simplesmente Angular, é um framework para construção de aplicações
Web, gratuito e de código aberto, escrito baseado em Typescript. Ao se construir uma aplicação
destinada para Web sempre há a necessidade da implementação de uma série de componentes,
como gerenciamento de acesso, formulários, painel de gestão do site e até upload de arquivos.
Devido a isso, se dá a necessidade de utilizar um framework, que traga essas soluções de forma
mais prática para implementação no projeto.
A implementação do framework Angular torna-se essencialmente atraente quando
esta-mos nos referindo ao desenvolvimento de aplicações Web que sigam o modelo MVC (Modelo
Visão Controle), separando de forma muito intuitiva e prática cada camada, permitindo que
haja um bom reuso de código, além de uma organização melhor das camadas. De acordo com
(JAIN et al., 2015), o AngularJS incorpora os princípios básicos por trás do padrão de projeto de
software MVC original, criando aplicativos Web no lado cliente.
Outro ponto atraente ao desenvolvimento, é que além de usar como linguagem o
Ty-pescript, a utilização de Mapeamento de Objetos através da criação de classes, permite que a
modelagem e a manipulação dos dados ocorra sem a necessidade de utilizar linguagem SQL
(Linguagem Estruturada de Consulta) para realizar a persistência dos dados. Outro ponto positivo
da utilização do Angular é o uso do sistema de templates e rotas, sendo bastante extensível,
podendo haver a segmentação de design, códigos Javascript client-side (lado cliente da aplicação),
serviços e outros.
O conjunto de soluções que o framework oferece, bem como o número de comunidades
disponíveis e ativas que fomentam a melhoria contínua do código aberto, proporciona ao
desen-volvedor do projeto uma boa oportunidade de construção da solução, garantindo um ciclo de vida
mais longo ao software. Outro ponto de grande relevância é a facilidade com que podemos criar
APIs e serviços REST, através de protocolos HTTP, podendo separar ainda mais as camadas de
um projeto de software.
21
2.1.3
Twitter Bootstrap
Um dos principais embates na hora de desenvolver aplicações para a web é fazer reuso
de código, ou seja, reaproveitar trechos e blocos de código em finalidades comuns. Isso é muito
comum acontecer no desenvolvimento do aspecto visual, ou seja, na visão do usuário, na camada
de apresentação.
Ao criar a camada de apresentação, é importante estabelecer padrões de campos, botões
e outros objetos para manter a interface com o usuário agradável e organizada. Tal padronização
necessitaria que fosse criado o botão via linha de código, toda vez que ele se fizesse necessário,
diante disso, a utilização de templates
3nesta área de front-end é bastante comum, pois já trazem
esses componentes visuais predefinidos e agilizam muito o desenvolvimento front-end
4que é o
caso do Twitter Bootstrap
5.
Atualmente, em sua versão quatro, o framework para desenvolvedores de front-end
disponibilizado pelo Twitter, foi uma ferramenta de grande ajuda no desenvolvimento de uma
interface gráfica agradável e leve, com boas interações e principalmente, nos auxiliando com
os layouts responsivos
6, potencializando a produtividade e minimizando o tempo de entrega
da interface. O Bootstrap é composto por uma biblioteca de componentes, de código aberto,
para desenvolvimento com HTML, CSS e Javascript. Dentre as vantagens que popularizaram o
Bootstrap podemos citar:
• Biblioteca vasta de componentes visuais;
• Boa perspectiva de reuso de código;
• Documentação;
• Grande comunidade;
• Padronização visual;
• Responsividade.
Sem o uso de frameworks para padronizar, muitos problemas de renderização aconteciam
por conta da diversidade de dispositivos, sistemas e navegadores utilizados para acessar os
3 Modelo de documento utilizado para a criação e padronização da parte visual em um sistema.4 Front-end é a interface, responsável por coletar a entrada em várias formas do usuário e processá-la. 5 Kit de ferramentas de código aberto para desenvolvimento com HTML, CSS e JS.
6 Design responsivo ou layout responsivo expande e contrai com a finalidade de se acomodar de maneira usável e
22
websites. O Bootstrap foi capaz de tornar as aplicações que se utilizam da Web mais flexíveis,
ao ponto de permitir boas experiências de usabilidade nos dispositivos móveis como tablets e
smartphones, que possuem tela significativamente menor que um desktop convencional.
Outro ponto que permitiu a difusão deste framework, foi a constante contribuição da
comunidade
7a facilidade com que a documentação é disponibilizada, permitindo que os
progra-madores mantenham-se sempre atualizados e que a ferramenta sempre esteja acessível.
Analisando tantos pontos positivos, enxergamos neste framework um conjunto de
solu-ções para o desenvolvimento do módulo Web que é alvo deste estudo, fazendo dele a escolha
para tecnologia a ser implementada no front-end, na camada de visão do nosso projeto.
2.1.4
Github
O GitHub
8é um serviço disponibilizado para Web, no sistema de controle de versão de
arquivos Git que permite o controle de versionamento de software, permitindo que o
desenvol-vimento de software possa ser dividido entre duas pessoas ou mais, maximizando a produção,
reduzindo as ocorrências de erros no controle de versionamento, e desenvolvimento de software
por equipes.
A utilização da plataforma GitHub auxilia bastante no desenvolvimento, pois torna
tangível a possibilidade de que os desenvolvedores de um dado software possam desenvolvê-lo
simultaneamente, contribuindo para a construção da solução, bem como a realização de ajustes ou
correções. Desta maneira valoriza-se a integridade do sistema, e evita que alterações indesejadas,
como a sobrescrição de scripts, ocorram e atrasem o andamento do projeto.
Um ponto crucial para o desenvolvimento, quando utilizado o GitHub, é o recurso
de commit com comentário, ou seja, cada vez que é realizada uma alteração ou conjunto de
alterações, é necessário que para a publicação no repositório GitHub seja feita. Essas alterações
passem por um comando de confirmação, que permite que comentários sejam adicionados via
metadados aos arquivos alterados. Desta maneira, os diversos desenvolvedores que tenham
permissão de contribuição no repositório, tenham conhecimento sobre as alterações feitas em
um ou mais arquivos, quem fez as alterações, e há quanto tempo as alterações foram feitas.
7 Disponível em: https://angularbrasil.herokuapp.com/. Acesso em: 28 maio 2019.23
2.1.5
Google Firestore
O Google Firestore
9vem destacando-se no mercado pela sua escalabilidade e pela fácil
interação com app do iOs e Android, fazendo-o uma solução robusta para desenvolvimento de
sistemas distribuídos, onde os acessos se originam de diversos sistemas e dispositivos diferentes.
O modelo de dados do Cloud Firestore disponibiliza estruturas de dados em hierarquia
bem flexíveis, podendo armazenar seus dados em documentos, organizados em coleções. Os
documentos podem conter objetos aninhados complexos, além de subcoleções. É possível usar
consultas para recuperar documentos individuais e específicos ou recuperar todos os documentos
em uma coleção que corresponda aos parâmetros da consulta. As consultas podem conter
inúmeros filtros em cadeia e combinar filtragem e classificação.
O Cloud Firestore usa sincronização de dados para atualizar dados em qualquer
dispo-sitivo conectado. No entanto, ele também é projetado para fazer consultas de busca simples e
únicas de maneira eficiente. Outro recurso é o armazenamento em cache dos dados ativamente
usados pelo aplicativo, assim o aplicativo poderá escrever, ler, deletar e consultar dados, mesmo
que o dispositivo esteja desconectado. Quando o dispositivo retorna ao estado de conexão com a
internet, as alterações locais são sincronizadas novamente na nuvem do Cloud Firestore. O Cloud
Firestore baseia-se na infraestrutura do Google Cloud Platform, replicando automaticamente os
dados em várias regiões, garantindo consistência, operações atômicas em lote e suporte real a
transações.
2.2
METODOLOGIAS APLICADAS
2.2.1
Métodos Ágeis
Os métodos ágeis surgiram da necessidade em substituir a abordagem pesada ou
tradicio-nal, onde é gasto mais tempo com planejamento do que com o desenvolvimento do software por
uma abordagem mais “leve” tendo como objetivo produzir softwares rapidamente por meio de
incrementos, Sommerville (2011) descreve o desenvolvimento incremental da seguinte maneira:
“O desenvolvimento incremental é baseado na ideia de desenvolver uma implementação inicial,
expô-las aos comentários dos usuários e continuar por meio da criação de várias versões até que
um sistema adequado seja desenvolvido.” (SOMMERVILLE, 2011).
O método ágil é a forma de se pensar na gestão do projeto para um ciclo adaptativo,
incremental e iterativo com entregas cada vez mais frequentes como pode ser visto na Figura
9 É uma solução em nuvem da empresa Google para o armazenamento de documentos, caracterizando-se como24
2. Por se tratar de um método empírico, é necessário a constante interação com o cliente. Essa
metodologia reduz prazo, custo e aumenta a qualidade da aplicação.
Figura 2 – Fluxo de Desenvolvimento Incremental
Fonte: Sommerville (2011). Adaptado.
Em um ambiente com constante mudança, os métodos ágeis são adequados para o
desenvolvimento de aplicações em que os requisitos são alterados durante o processo de
de-senvolvimento. Por ser desenvolvido em ciclos incrementais e funcionais. De acordo com
Sommerville (2011), são apresentadas três vantagens importantes:
• O custo da acomodação das mudanças nos requisitos do cliente é reduzido;
• Maior facilidade na obtenção e análise dos resultados;
• Possibilidade de obter entrega e implementação rápida de módulos funcionais, mesmo que
não tenham sido concluídos todos os requisitos.
No que tange as vantagens descritas por Sommerville (2011), há de fato uma redução no
custo do projeto, visto que a documentação é simplificada e bastante reduzida, focando mais no
desenvolvimento do protótipo. Essa facilidade permite ao desenvolvedor observar de maneira
mais objetiva a necessidade do cliente, e processar os resultados de maneira rápida. A entrega
gradual permite que o cliente acompanhe a sua evolução e adeque seus processos de produção à
ferramenta.
Neste capítulo foram descritas todas as tecnologias, métodos e ferramentas utilizadas
para a criação do sistema. A seguir será abordado o atual sistema de informações da empresa.
25
3 ANÁLISE DO ESTADO ATUAL DO SISTEMA DE INFORMAÇÃO
Realizando uma visita técnica à empresa, primeiramente foi necessário identificar a
infraestrutura, sendo esta composta por três notebooks com acesso total à Internet. A percepção
inicial na observação e na entrevista esteve sempre voltada para os objetivos pedagógicos. Ao
fazer o levantamento do estado atual do sistema de avaliação da empresa, percebemos que
todos os processos, tanto de gestão administrativa quanto pedagógica, são realizados utilizando
formulários, anotações e algumas planilhas eletrônicas, que servem de apoio para processar todas
as informações de matrículas, compras e pagamentos.
3.1
ANÁLISE DOS SUBSISTEMAS
Dentro de todo o escopo de sistemas e subsistemas existentes na empresa, foram
obser-vados alguns subsistemas, como o financeiro, relacionamento e marketing, acompanhamento
pedagógico e o de gestão de pessoas.
No que tange o subsistema financeiro, as principais atividades relacionadas são as
ati-vidades de cadastro de alunos, recepção de matrículas, recebimento de pagamentos, gestão
de contratos, mediação de acordos de pagamento, pagamento de fornecedores, pagamento de
colaboradores, aquisição de materiais e serviços, controle de fluxo de caixa, atendimento ao
cliente interno e externo.
Quanto ao subsistema de marketing, observou-se o fluxo de planos de ação comerciais,
planejamentos promocionais, gerenciamento de cronogramas de publicações em redes sociais e
produção de conteúdo para Internet.
Todo o controle desse subsistema é feito com base em formulários, planilhas eletrônicas
e anotações em livros-caixa. É perceptível que há divergência entre os mesmos dados, quando
analisados por diferentes fontes em virtude da descentralização das informações financeiras, fato
que dificulta uma análise rápida e precisa acerca da saúde financeira da empresa, impactando
diretamente na tomada de decisões estratégicas. Sobre o atendimento ao cliente, além do
aten-dimento presencial, são utilizados meios telefônicos e, também redes sociais como Instagram,
WhatsApp e Facebook.
Sob a ótica do subsistema de gestão pedagógica, o acompanhamento é feito de forma
não tão controlada, pois a dificuldade principalmente em processar os dados das avaliações torna
o processo muito trabalhoso, levando cerca de até três dias para se obter macro resultados sob a
ótica de cada aluno, levando ainda mais tempo para se obter informações sobre desempenho de
26
professores e, da turma em geral. A distribuição do material se dá por meio impresso, distribuído
em sala de aula, também sem o controle da recepção do material, ou seja, caso determinado
aluno perca o material didático, é inviável para a empresa cobrar pela emissão de segunda via
das apostilas, pois não há controle de entrega. A percepção do acompanhamento do curso se dá
através da entrega dos planos de aula dos professores, quando fornecido o material didático para
impressão.
O subsistema de gestão de pessoas é mais um sistema não informatizado na empresa que
consiste na utilização da rede de contatos dos próprios colaboradores e gestores da empresa, que
utilizam a rede de comunicação para captar talentos potenciais, convidando-os ou simplesmente
mantendo currículos em potencial nas pastas de e-mail organizados em pasta específica para esta
finalidade. Não há sistemas informatizados que são utilizados para cadastrar potenciais talentos.
Tendo avaliado todo o escopo de subsistemas disponíveis na empresa, podemos perceber
que a falta de informatização atinge todas as áreas, algo que resulta na inviabilidade de aumento
na demanda produtiva nas atividades da empresa. As áreas onde há uma alta demanda (como na
área de processamento dos resultados dos simulados), caso haja um aumento sensível da mesma,
a qualidade operacional é diretamente afetada, comprometendo diretamente o crescimento da
empresa sob pena de deteriorar sua imagem institucional.
Diante das demandas por informatização dos processos, foi escolhido o processo que
ocorre de maneira rotineira e que demanda mais tempo para a obtenção das informações, que é
o processamento e tratamento das informações dos simulados para obtenção de conhecimento
sobre o serviço prestado pela empresa.
3.2
LEVANTAMENTO DE REQUISITOS FUNCIONAIS E NÃO FUNCIONAIS
Para realizar o levantamento de requisitos, as técnicas utilizadas foram a entrevista e
a observação, analisando sempre aspectos qualitativos e quantitativos. A primeira baseia-se
na compreensão dos requisitos sociais, onde o analista através da observação, toma nota das
situações reais em que o sistema será utilizado. Como a análise de observação tem algumas
desvantagens como, consumir bastante tempo e o induzir a erros em suas observações, a técnica
necessita ser complementada com outra técnica, onde foram escolhidas a observação e a
entre-vista. É de suma importância que o levantamento de requisitos seja feito de maneira correta, para
que não seja comprometido o resultado, como pode ser analisado a seguir: “A parte individual
mais difícil da construção de um sistema de software é decidir o que construir. Nenhuma parte
do trabalho danifica tanto o sistema resultante se for feita errado. Nenhuma outra parte é mais
27
difícil de consertar depois.” (PRESSMAN; MAXIM, 2016).
Mesmo sendo uma técnica tradicional, a entrevista permite o contato direto com os
possíveis atores de cada sistema, bem como obter uma perspectiva sobre o que o demandante
espera do software, o que realmente o software fará e como o analista irá construir o projeto,
descrevendo especificações e prioridades, baseando-as na necessidade e importância de cada
processo. Para que ocorra com sucesso, é necessário que a entrevista seja planejada, ou seja,
que o analista esteja ciente sobre dados, formulários, relatórios e documentos relacionados ao
sistema ou subsistema pertinente; desta maneira, se concretizará uma documentação eficiente
pós entrevista.
Analisada a complexidade do subsistema proposto, através da observação e da entrevista,
foi realizado o levantamento de requisitos funcionais e não-funcionais, de maneira a garantir a
qualidade do produto final. A entrevista, de acordo com Sommerville (2011), é um instrumento
que faz parte do processo de engenharia de requisitos e sua finalidade é compreender a interação
dos usuários com o sistema, compreendendo suas dificuldades e necessidades. Esta decisão foi
tomada levando-se em consideração que o processo de produção é estritamente interno, ou seja,
não sofre interferência de terceiros, como sistemas externos (Web services, API’s de terceiros).
Uma vez aplicada as técnicas mencionadas, foi elaborado o diagrama de requisitos que
norteou a construção das prioridades do sistema, como mostra a Figura 3.
Figura 3 – Diagrama de Requisitos
28
3.3
ANÁLISE DO SUBSISTEMA DE FEEDBACK PEDAGÓGICO
Diante da quantidade de dados a serem extraídos das provas de simulado, há uma
dificuldade muito grande em obter informações precisas com o modelo atual, que usa a correção
totalmente manual, em conjunto com a listagem em planilhas.
No estado atual, o simulado é preparado segundo parâmetros preestabelecidos pela
coordenação do curso, onde cada disciplina vai compor uma área de conhecimento. Na aplicação
do simulado, o aluno responderá um determinado número de questões e, em alguns casos,
também fará uma redação. A respeito da redação, é muito importante salientar que é dividida
em cinco competências, onde a cada uma é atribuída uma nota, entre zero e duzentos, dividida
em seis níveis (0, 40, 80, 120, 160 ou 200), cuja soma compõe a nota final da redação. As
competências da redação são enumeradas e analisadas da seguinte forma:
• Competência I: Demonstrar domínio da escrita formal da Língua Portuguesa;
• Competência II: Compreender a proposta de redação e aplicar os conceitos das várias
áreas de conhecimento para desenvolver o tema, dentro dos limites estruturais do texto
dissertativo-argumentativo em prosa;
• Competência III: Selecionar, relacionar, organizar e interpretar informações, fatos, opiniões
e argumentos em defesa de um ponto de vista;
• Competência IV: Demonstrar conhecimento dos mecanismos linguísticos necessários para
a construção da argumentação;
• Competência V: Elaborar proposta de intervenção para o problema abordado, respeitando
os direitos humanos.
Com o recolhimento dos cartões resposta dos alunos, inicia-se a análise dos resultados. É
preparada uma planilha que quantifica o número absoluto de acertos por aluno em cada disciplina,
bem como computada a nota de cada competência das redações. Após a coleta manual, as notas
das disciplinas de áreas comuns são agrupadas para serem calculadas as notas proporcionais por
área de conhecimento, que no caso do curso preparatório para o ENEM, é dividido em quatro
áreas:
• Linguagens, Códigos e suas Tecnologias;
• Matemática e suas Tecnologias;
29
• Ciências Humanas e suas Tecnologias;
• Ciências da Natureza e suas Tecnologias.
Após a quantificação e conversão dessas notas, feitas em planilhas manuais e eletrônicas,
é realizada a identificação dos alunos que tiveram a melhor nota geral, melhores notas por área
de conhecimento e melhores redações, para realizar o acompanhamento pedagógico, conceder
premiações e, por fim, a produção de boletins com todas as informações do desempenho para o
aluno.
Todo esse processo é realizado pela coordenação do curso. Algumas implementações
complementares, como uma visão geral por disciplina, por área de conhecimento ou mesmo uma
análise comparativa entre dois ou mais eventos, é muito trabalhosa para ser feita manualmente.
As informações são necessárias à coordenação pedagógica para tomada de decisões quanto aos
métodos e ferramentas utilizadas em sala, ou mesmo para identificar lacunas na metodologia de
algum professor que necessitem ser alinhadas. Desta forma, será maximizado o desempenho
e melhorada continuamente a qualidade do curso ofertado, convertendo isso em aprovações e,
posteriormente, capitalizando em melhoria da imagem organizacional e aumento na carteira de
clientes.
Em entrevista com a coordenação dos cursos, foi relatado que essas informações são
muito importantes para que possa existir uma visão prévia (dos certames públicos) de como o
ambiente está funcionando, comparando as integrações entre as áreas como um ecossistema,
onde os diferentes agentes se interligam com a finalidade de criar uma atmosfera de experiência
mais próxima da realidade, inclusive usando isso para que o aluno aprenda a lidar com questões
psicológicas que possam interferir no seu desempenho.
Finalizando o levantamento, foi estabelecido o fluxo de como se darão as atividades de
desenvolvimento do módulo desejado, conforme Figura 4. Foi feito o levantamento de requisitos
com os administradores, em seguida foram selecionados e definidos os requisitos funcionais e
não funcionais. Definidos, foram novamente submetidos aos principais interessados para que
fossem validados. Com os requisitos validados, foram definidos os diagramas e a documentação
necessária para a criação dos módulos de desenvolvimento para em seguida iniciar a codificação.
Após a codificação de cada módulo, foi apresentado para os administradores verificarem e
validarem as funções propostas pelo módulo entregue. Com a entrega e aprovação deste módulo,
o fluxo finalizou e iniciou-se a criação de um novo módulo incremental.
30
Figura 4 – Fluxo da Metodologia de Desenvolvimento
Fonte: Os autores (2019).
3.4
DIAGRAMAS
Sobre o planejamento do projeto, de acordo com os preceitos da Engenharia de Software,
podemos afirmar a necessidade do uso de ferramentas de modelagem do sistema para que seja
possível ter uma visão, verificar especificações e analisar como será construído o software. A
UML (Unified Modeling Language) para o engenheiro de software é como a planta de uma
construção para o engenheiro (PRESSMAN; MAXIM, 2016), ou seja, a UML fornece subsídios
para a construção do projeto, bem como para previsão do resultado desta construção.
Dentre os diagramas UML, em consonância com o método de desenvolvimento ágil XP
1,
levantou-se a necessidade de utilizar um grupo de diagramas UML para a elaboração do modelo
conceitual, deixando a visão acerca do projeto definida o suficiente para ser desenvolvida com
qualidade e reduzindo a quantidade de documentação a ser produzida, focando desta maneira, na
codificação. Para tal, foram selecionados os seguintes diagramas:
• Diagrama de Processo;
• Diagrama de Caso de Uso;
• Diagrama de Classe.
1 O XP é um dos mais utilizado dos métodos ágeis, pois a abordagem foi desenvolvida para impulsionar
práticas notoriamente mais eficazes, como o desenvolvimento iterativo e incremental, a níveis extremos. No Extreme Programmingdiferentes versões de um software podem ser desenvolvidas, integradas e testadas em um único dia por programadores diferentes (SOMMERVILLE, 2011), garantindo uma maior produtividade no desenvolvimento, tornando os problemas encontrados em uma parte do sistema de software.
31
Para elaboração da documentação UML foi utilizado o aplicativo Astah
2, ferramenta
dedicada à modelagem de diagramas UML.
3.4.1
Diagrama de Processo
O diagrama de processo é utilizado para descrever a sequência de passos que serão
executadas para a conclusão de um processo no sistema, concentrando-se no fluxo do controle
deste processo.
Na Figura 5 é apresentado o Diagrama de processo para realização do simulado, onde, o
coordenador é responsável por abrir o processo (simulado). Após isso, é solicitado ao professor
a definição do conteúdo e a elaboração de todas as questões. Em seguida, é feita a revisão das
questões, que por sua vez são enviadas num arquivo de texto para análise pelo coordenador, que
poderá aceitar o conteúdo ou solicitar a revisão e posterior reenvio do material.
Uma vez que são definidas as questões do simulado, o coordenador abre o período de
inscrições para os alunos. Caso não haja inscrições, o simulado é cancelado. De outra maneira, é
impresso o caderno de questões com o respectivo cartão-resposta e folha de redação. No dia e
horário agendado para o simulado, o mesmo é aplicado pela coordenação do curso. Na aplicação
o aluno resolve as questões e preenche o gabarito, entregando-o ao final do simulado. De posse
do gabarito, o coordenador realiza o lançamento das informações, disponibiliza as notas para a
conferência e entrega dos resultados aos alunos.
Figura 5 – Diagrama de Processo para Realização do Simulado
Fonte: Os autores (2019). 2 Disponível em: http://astah.net/download. Acesso em: 08 jun. 2019.
32
3.4.2
Diagrama de Casos de Uso
O diagrama de casos de uso é um diagrama UML que define todas as funcionalidades que
foram propostas pelo sistema, ou seja, que representam os requisitos funcionais. Um diagrama
de caso de uso demonstra o comportamento produzido pelo sistema na visão de atores
3externos
(BOOCH et al., 2006), como é possível perceber através da Figura 6.
Figura 6 – Diagrama de Caso de Uso
Fonte: Os autores (2019).
A partir da utilização da solução foi possível ao coordenador automatizar as inscrições
dos alunos, sem que fosse necessária intervenção direta da coordenação do curso, demandando
menos tempo no gerenciamento das inscrições, bem como na emissão dos cartões-resposta
personalizados de acordo com os dados das inscrições. Foi importante também o gerenciamento
automático de prazo no sistema de inscrições, auxiliando a coordenação a preparar o material
impresso em tempo hábil e deixando o aluno ciente das informações sobre o simulado.
Com os gabaritos lançados pelos próprios alunos, tornou-se possível disponibilizar de
forma mais rápida o levantamento de informações sobre os desempenhos de cada professor. Essa
informação auxilia a coordenação a mensurar o trabalho que está sendo desenvolvido por cada
professor, e desta maneira, avaliar o ensino naquela turma.
A disponibilidade das informações dos simulados fornece ao professor dados para
au-toavaliação e avaliação dos alunos sob seu cuidado. Através desta metodologia de trabalho,
foi possível obter subsídio para diversificar a abordagem metodológica quando se observou
necessário por parte dos professores.
33
3.4.3
Diagrama de Classes
O diagrama de classes é o diagrama UML mais presente nos projetos de software, isso se
deve ao seu caráter intrínseco de relacionar as classes que fazem parte de um sistema. Em suma,
o diagrama subsidia a documentação da estrutura das classes de um sistema, seus atributos, suas
ações e interações com outras classes, estabelecendo relacionamentos com outros diagramas.
Na Figura 7 pode-se observar a representação das classes que compõem o subsistema abordado
neste trabalho.
Figura 7 – Diagrama de Classes
Fonte: Os autores (2019).
Diante do que foi levantado na fase de projeto, foi observado que a estrutura derivada do
processo documentado nas Figuras 5 e 6 deu origem às classes constantes na Figura 7. Dentre
34
as classes relacionadas, está a classe “Usuario”. A classe “Usuario” é responsável por definir
os atributos de acesso ao sistema, definindo a qual grupo de atores ele pertence. Esta definição
ocorre a partir de um dos atributos da classe chamado “tipo”, que é um atributo que recebe
valores de texto, e de um identificador único, o atributo “id”. Outro atributo importante para
garantir o acesso seguro ao sistema é a validação do status do usuário. O status pode receber
valores “verdadeiro” ou “falso”, impedindo assim, que usuários cadastrados e não autorizados,
como ex-alunos e ex-professores, continuem acessando o perfil.
A classe “Inscricao” decorre na necessidade de gerenciar os prazos de inscrições dos
simulados, registrando o ato de inscrição, repassando informações complementares ao aluno,
e repassar os dados à coordenação. Para identificar de maneira única, cada inscrição recebe
um atributo alfanumérico chamado “idInscri”, contendo também informações sobre o aluno, o
simulado, data e hora da inscrição e outros.
Entre as classes mais importantes está a classe “Simulado”. Como principais atributos,
os objetos desta classe recebem dados como o prazo de inscrição, se haverá redação, tempo de
prova, data de aplicação, status de execução e um resumo da quantidade das matérias e questões
aplicadas. Como nas demais classes, a classe “Simulado” também recebe um identificador único,
chamado “idSim”.
Com o simulado realizado é necessário adicionar as respostas dos alunos no sistema.
Para isso, o aluno deve estar logado em seu perfil, localizar o respectivo simulado e adicionar as
respostas do gabarito. A classe “Gabarito” vai conter tanto o gabarito do aluno quanto o gabarito
oficial, diferenciando-os por um atributo chamado “gabOfic”, do tipo booleano, atribuindo o
valor verdadeiro quando o objeto daquela classe for um gabarito oficial. Para identificar um
objeto específico da classe, foi criado um atributo de identificação chamado “idGab”. Na classe
gabarito estão contidos os números das questões e as respectivas respostas definidas no respectivo
cartão. Desta maneira é feito um comparativo entre as respostas do aluno com as respostas do
gabarito oficial previamente definido, gerando assim a estatística do desempenho.
Uma vez que foi concluída a estruturação da documentação que serviu de base para o
projeto, bem como a compreensão de como cada classe, atributo e método que foi utilizado,
o próximo passo foi dar início à codificação do módulo, concretizando através do uso das
ferramentas e das metodologias definidas, a construção da interface, criação das camadas da
aplicação e definição das regras de negócio.
35
4 DESENVOLVIMENTO DO MÓDULO
Estar ciente sobre o caminho de desenvolvimento de um módulo é uma parte tão
impor-tante quanto compreender as metodologias aplicadas ao desenvolver a ferramenta. Neste capítulo
serão apresentados detalhes da implementação da ferramenta proposta, bem como a maioria
dos procedimentos aqui contidos, cujo conhecimento é reaproveitável para outros módulos ou
sistemas que por ventura venham a ser desenvolvidos utilizando a mesma ferramenta.
4.1
ESTRUTURA INICIAL
Ao utilizar o framework Angular é preciso compreender que há um conjunto de arquivos
que são gerados pelo próprio Angular na criação do projeto. Contudo, há a necessidade de
estruturar os diretórios de maneira adequada às boas práticas de desenvolvimento, padronizando
e organizando o código, tornando-o menos complexo de ser manipulado.
Ao criar um projeto utilizando Angular, através do Node Package Manager, ou
simples-mente “npm”, instalamos as dependências de todos os componentes utilizados, como o BootStrap,
Google Firestore e alguns outros. O resultado disso é a seguinte estrutura de organização de
arquivos ilustrada na Figura 8.
Figura 8 – Estrutura do Projeto no Angular
Fonte: Os autores (2019).
Antes de comentar sobre a estrutura das pastas, é necessário observar a presença do
arquivo “angular.json”, que é o arquivo que armazena em json todos os componentes que o
36
projeto possui e que são necessários para o funcionamento da aplicação. Ele é muito importante,
pois o comando npm install, que instala automaticamente todas as dependências do projeto só
funciona se o arquivo estiver corretamente configurado. Configurá-lo por sua vez é imprescindível
para que o desenvolvedor obtenha as dependências do projeto de maneira rápida e eficiente
durante os processos de desenvolvimento e homologação de versão.
Dentre todas as estruturas geradas pelo Angular, algumas em específico são de extrema
importância e serão manipuladas em todo o projeto. Dentro do diretório “app” está contido todo
o código do software, os módulos, serviços, modelos, componentes criados e tudo aquilo que for
dinamicamente renderizado para a aplicação. Para melhor organizar os componentes, foi criada
uma pasta específica para os componentes visuais que são alterados com menor frequência, como
cabeçalhos, rodapés, menus, formulários de login. Essa pasta foi nomeada como
componentes-tela. A segunda pasta, chamada “modules”, irá conter o restante dos componentes utilizados na
aplicação.
Dos componentes de aplicação alocados nesta pasta, optamos em realizar a inclusão de
submódulos do sistema, orientados de acordo com o escopo de cada classe mapeada, bem como
os métodos necessários para cada um. Ou seja, tudo que se relacionar a componentes ou métodos
de usuários, se encontrará numa pasta chamada “usuario”, repetindo esta estratégia para todas as
outras classes do sistema.
Dentro da pasta “app”, localizada no diretório principal, é necessário criar alguns
arqui-vos para que todos os componentes e rotas da aplicação se comuniquem, são eles, "app.module.ts",
responsável por gerenciar os módulos, componentes e serviços e o “app.rounting.ts”, responsável
por gerenciar as rotas e rotas-filha. Ambos arquivos serão detalhados a seguir.
4.2
ESTRUTURA DO APP.MODULE.TS
Dentro do diretório principal da aplicação há por definição um arquivo chamado “app.module.ts”,
ilustrado na Figura 9. Este arquivo é escrito em Typescript e armazena um conjunto de módulos,
componentes, serviços e dependências para a chamada da aplicação. A anotação “@NgModule”
armazena um bloco de parâmetros, do qual podemos elencar quatro deles:
• declarations: define o conjunto de componentes a serem carregados pelo módulo;
• imports: define o conjunto de módulos a serem carregados pelo módulo principal;
• providers: parametriza os serviços a serem disponibilizados;
37
• bootstrap: define o Bootstrap como fonte de CSS (Cascade Style Sheet).
Figura 9 – Estrutura do Arquivo app.module.ts
Fonte: Os autores (2019).
