Relatório final de estágio
\documentclass[
12pt, % tamanho da fonte
a4paper, % tamanho do papel.
% -- opções do pacote babel --
openany,
oneside,
english, % idioma adicional para hifenização
french, % idioma adicional para hifenização
spanish, % idioma adicional para hifenização
brazil, % o último idioma é o principal do documento
]{abntex2}
% ---
% PACOTES
% ---
% ---
% Pacotes fundamentais
% ---
\usepackage[T1]{fontenc} % Selecao de codigos de fonte.
\usepackage{pdfpages}
\usepackage[utf8]{inputenc} % Codificacao do documento (conversão automática dos acentos)
\usepackage{indentfirst} % Indenta o primeiro parágrafo de cada seção.
\usepackage{color} % Controle das cores
\usepackage{graphicx} % Inclusão de gráficos
\usepackage{microtype} % para melhorias de justificação
% ---
% ---
% Pacotes adicionais, usados no anexo do modelo de folha de identificação
% ---
\usepackage{multicol}
\usepackage{multirow}
% ---
% ---
% Pacotes adicionais, usados apenas no âmbito do Modelo Canônico do abnteX2
% ---
% Pacotes de citações
% ---
\usepackage[brazilian,hyperpageref]{backref} % Paginas com as citações na bibl
\usepackage[alf]{abntex2cite} % Citações padrão ABNT
\usepackage{listings}
\lstloadlanguages{Ruby}
\lstset{%
basicstyle=\ttfamily\color{black},
commentstyle = \ttfamily\color{red},
keywordstyle=\ttfamily\color{blue},
stringstyle=\color{orange}
}
\renewcommand{\lstlistingname}{Código}%
\renewcommand{\lstlistlistingname}{Lista de \lstlistingname s}%
% ---
% CONFIGURAÇÕES DE PACOTES
% ---
% Configurações do pacote backref
% Usado sem a opção hyperpageref de backref
\renewcommand{\backrefpagesname}{Citado na(s) página(s):~}
% Texto padrão antes do número das páginas
\renewcommand{\backref}{}
% Define os textos da citação
\renewcommand*{\backrefalt}[4]{
\ifcase #1 %
Nenhuma citação no texto.%
\or
Citado na página #2.%
\else
Citado #1 vezes nas páginas #2.%
\fi}%
% ---
% ---
% Configurações de aparência do PDF final
% alterando o aspecto da cor azul
\definecolor{blue}{RGB}{41,5,195}
% informações do PDF
\makeatletter
\hypersetup{
%pagebackref=true,
pdftitle={\@title},
pdfauthor={\@author},
pdfsubject={\imprimirpreambulo},
pdfcreator={LaTeX with abnTeX2},
pdfkeywords={abnt}{latex}{abntex}{abntex2}{relatório de estágio},
colorlinks=true, % false: boxed links; true: colored links
linkcolor=blue, % color of internal links
citecolor=blue, % color of links to bibliography
filecolor=magenta, % color of file links
urlcolor=blue,
bookmarksdepth=4
}
\makeatother
% ---
% ---
% Espaçamentos entre linhas e parágrafos
% ---
% O tamanho do parágrafo é dado por:
\setlength{\parindent}{1.3cm}
% Controle do espaçamento entre um parágrafo e outro:
\setlength{\parskip}{0.2cm} % tente também \onelineskip
% ---
% compila o indice
% ---
\makeindex
% ---
% ----
% Início do documento
% ----
\begin{document}
% Seleciona o idioma do documento (conforme pacotes do babel)
%\selectlanguage{english}
\selectlanguage{brazil}
% Retira espaço extra obsoleto entre as frases.
\frenchspacing
% ----------------------------------------------------------
% ELEMENTOS PRÉ-TEXTUAIS
% ----------------------------------------------------------
% \pretextual
% ---
% Capa
% ---
\include{capa}
% ---
% ---
% Folha de rosto e Aprovação
% ---
\include{folharosto}
\include{folhaaprovacao}
% ---
% Agradecimentos
% ---
\begin{agradecimentos}
A Deus por ter me dado saúde e força até esse momento.
A este instituto, seu corpo docente, direção e administração que oportunizaram a
janela que hoje vislumbro um horizonte superior, eivado pela acendrada confiança no mérito e ética aqui presentes.
Ao meu orientador Luiz Carlos Rodrigues Chaves, pelo suporte no pouco tempo que lhe
coube, pelas suas correções e incentivos.
Aos meus pais e irmão, pelo amor, incentivo e apoio incondicional.
E a todos que direta ou indiretamente fizeram parte da minha formação, o meu muito obrigado.
\end{agradecimentos}
% ---
% ---
% Epígrafe
% ---
\begin{epigrafe}
\vspace*{\fill}
\begin{flushright}
\textit{``Escolha um trabalho que ama \\
e não terás que trabalhar um único dia em sua vida. \\
(Confúcio)}
\end{flushright}
\end{epigrafe}
% ---
% RESUMO
% ---
% resumo na língua vernácula (obrigatório)
\setlength{\absparsep}{18pt} % ajusta o espaçamento dos parágrafos do resumo
\begin{resumo}
Este relatório tem como objetivo descrever as atividades realizadas durante o Estágio Curricular Supervisionado realizado na escola estadual de ensino médio Lyceu Paraibano, localizada em João Pessoa, PB. As atividades foram exercidas no período de 03 de Março de 2015 a 15 de Junho de 2015. O estágio teve como objetivo aplicar, no desenvolvimento de um sistema de visualização de Boletim escolar online, os conceitos teóricos e práticos aprendidos durante o curso de Sistemas para Internet do Instituto Federal de Ciência e Tecnologia da Paraíba (IFPB) e verificar até que ponto esses conceitos são realizáveis na resolução de problemas do cotidiano escolar.
\noindent
\textbf{Palavras-chaves}: Desenvolvimento de Sistemas, Boletim, Secretaria de Estado da Educação, Educação, Escola.
\end{resumo}
% ---
% ---
% inserir lista de ilustrações
% ---
\pdfbookmark[0]{\listfigurename}{lof}
\listoffigures
\cleardoublepage
% ---
% ---
% inserir lista de tabelas
% ---
\pdfbookmark[0]{\listtablename}{lot}
\listoftables
\cleardoublepage
% ---
% ---
% inserir lista de abreviaturas e siglas
% ---
\begin{siglas}
\item[MEC] Ministério da Educação e Cultura
\item[UML] Unified Modeling Language (Modelagem de Linguagem Unificada)
\item[MVC] Model, View, Controller
\item[NAP] Núcleo de apoio pedagógico
\item[AJAX] Asynchronous Javascript and XML
\end{siglas}
% ---
% ---
% inserir lista de códigos
% ---
\lstlistoflistings
\newpage
\cleardoublepage
%----
% ---
% inserir o sumario
% ---
\pdfbookmark[0]{\contentsname}{toc}
\tableofcontents*
\cleardoublepage
% ---
% ----------------------------------------------------------
% ELEMENTOS TEXTUAIS
% ----------------------------------------------------------
\textual
% ----------------------------------------------------------
% Introdução (exemplo de capítulo sem numeração, mas presente no Sumário)
% ----------------------------------------------------------
\chapter{Introdução}
Neste documento serão demonstradas as atividades de estágio realizadas na escola estadual de ensino médio Lyceu Paraibano, expondo o conteúdo técnico e prático que serviram para a criação de um sistema de visualização de Boletim escolar online denominado Magistro. O estágio foi desenvolvido no período de 03/03/2015 a 15/06/2015 sob orientação acadêmica de Luiz Carlos Rodrigues Chaves e supervisão técnica da diretora escolar Telma Maria Pereira de Medeiros Rodrigues. O foco do trabalho inicialmente foi fazer um levantamento dos possíveis requisitos funcionais do sistema junto aos funcionários da secretaria da escola e após o levantamento desses requisitos desenvolver o sistema. O restante do relatório aborda com mais detalhes a descrição das atividades, descrevendo as atividades realizadas, as ferramentas utilizadas e a metodologia usada para criação do sistema.
\section{Objetivo}
O estágio teve como objetivo desenvolver um sistema de visualização de boletim escolar online, onde os professores, pais e alunos pudessem ter um acompanhamento das notas, como também a geração automática de alguns documentos da escola que dependem dessas notas.
\section{A Empresa}
A empresa concedente do estágio é a escola estadual de ensino médio Lyceu Paraibano localizada na Av. Pres. Getúlio Vargas - Centro, João Pessoa - PB. O Lyceu Paraibano é reconhecido como a escola pública com mais destaque do estado da Paraíba, pela qualidade dos seus professores ou por ser a escola de grandes nomes da história do nosso Estado.
O Lyceu Paraibano foi fundado pela Lei n o 11, de 24 de Março de 1836, e permaneceu durante 117 anos como o único estabelecimento público de ensino secundário na Paraíba. Funcionou por muito tempo no antigo edifício da tesouraria da fazenda, correios e telégrafos, da assembleia legislativa e que hoje abriga a academia de direito da UFPB. Em 1936 cem anos depois da sua fundação, definitivamente o Lyceu ganhou sede própria na avenida Getúlio Vargas no cento da capital Paraibana na administração do então governador Argemiro de Figueiredo.
De acordo com Censo de 2014 a escola conta com mais de 2111 alunos matriculados nos 3 turnos de ensino, 163 funcionários, 18 computadores para os alunos e 8 computadores para uso administrativo.
Devido a grande quantidade de alunos e de documentos gerados no final de cada ano letivo a direção escolar junto com o núcleo de apoio pedagógico (NAP) achou necessário o desenvolvimento de um sistema que possibilitasse a visualização das notas dos alunos, a frequência escolar e a geração automática de alguns documentos que dependem dessas notas.
\section{Descrição Geral das Atividades}
Nessa seção são apresentadas as atividades realizadas no decorrer do estágio que estão em ordem cronológica para melhor organização.
\begin{itemize}
\item Levantamento dos requisitos funcionais e não funcionais;
\item Modelagem do sistema usando UML;
\item Desenvolvimento do sistema;
\item Testes de funcionalidade.
\end{itemize}
\section{Organização do relatório}
Além desse capítulo, o relatório está dividido em outros 3 capítulos, brevemente descritos a seguir:
\begin{itemize}
\item \textbf{Capitulo 2} - Embasamento teórico: Nesse capítulo são descritas as tecnologias adotadas no desenvolvimento do sistema, a metodologia e as ferramentas.
\item \textbf{Capitulo 3} - Atividades realizadas: Nesse capítulo são descritas as atividades realizadas no estágio.
\item \textbf{Capitulo 4} - Conclusão: Capítulo com o relato das experiências adquiridas, objetivos alcançados, trabalhos futuros e considerações finais.
\end{itemize}
\chapter{Embasamento Teórico}
Neste capítulo são descrito os conceitos e tecnologias envolvidas em todo processo de desenvolvimento do sistema Magistro.
\section{Scrum}
Para o desenvolvimento do Magistro foi adotado o framework ágil de desenvolvimento de software Scrum. O Scrum foi escolhido por ser mais simples em relação as outras metodologias ágeis e de fácil adaptação já que todo o sistema foi desenvolvido por apenas um desenvolvedor.
O Scrum foi concebido em 1993 por Jeff Sutherland da necessidade de encontrar uma metodologia que abordasse o problema do desenvolvimento de software de uma forma não tradicional \cite{Ferreira2005}, em 1995 Ken Schwaber refinou a metodologia baseado na sua própria experiência no desenvolvimento de sistemas e processos.
O Scrum é um conjunto de atividades e práticas de gestão que devem ser seguidas para garantir que no final do projeto seja entregue um produto como especificado pelo cliente. Ela segue o paradigma iterativo e incremental onde a cada iteração pequenas partes do sistema são entregues. Isso é importante pois garante que teremos partes funcionais do sistema e essas passarão por todas as atividades até a implantação.
As principais características do SCRUM segundo \citeonline{Ferreira2005} são:
\begin{citacao}
\begin{itemize}
\item é um processo ágil para gerenciar e controlar o desenvolvimento de projetos;
\item é um wrapper para outras práticas de engenharia de software;
é um processo que controla o caos resultante de necessidades e interesses
conflitantes;
\item é uma forma de aumentar a comunicação e maximizar a cooperação;
\item é uma forma de detectar e remover qualquer impedimento que atrapalhe o desenvolvimento de um produto;
\item é escalável desde projetos pequenos até grandes projetos em toda empresa.
\end{itemize}
\end{citacao}
\subsection{Vocabulário utilizado pelo SCRUM:}
\textbf{Time Scrum:} No Time Scrum não existe um líder para ditar as regras do desenvolvimento, o time é autogerido. Por isso, a opinião de todos os envolvidos é importante para o progresso do projeto.
\textbf{Scrum Master:} O Scrum Master não é o líder do time já que o scrum não possui um, mas sim a pessoa com bom conhecimento técnico em Scrum que organiza o projeto facilitando o andamento e garantindo que todos cumpram suas tarefas.
\textbf{Product Owner:} É o responsável por traduzir as histórias do cliente em requisitos para que a equipe possa trabalhar no Sprint.
\textbf{Equipe de desenvolvimento:} São aqueles que participarão na codificação do produto.
\textbf{Eventos:} São pequenas conversas com tempo fixo, objetiva e ágil.
\textbf{Sprint:} É um ciclo de desenvolvimento ou em outras palavras um tempo determinado para entregar uma tarefa. No final de cada Sprint é entregue algo concreto.
\textbf{Reunião de planejamento:} Reuniões realizadas para definir os objetivos do Sprint. Para calcular a quantidade máxima de horas de cada reunião multiplicasse cada semana do Sprint por 2, se um Sprint tem duração de 1 semana, por exemplo, a reunião terá no máximo 2 horas de duração.
\textbf{Reunião diária:} Reunião com no máximo 15 minutos para revisar o andamento do projeto.
\textbf{Revisão da Sprint:} Revisar os itens desenvolvidos e mostrar as novas funcionalidades.
\textbf{Retrospectiva da Sprint:} Serve para fazer um balanço geral da Sprint e verificar o que funcionou bem, as melhorias que tem que ser feitas, os erros e o que será feito para melhorar.
\textbf{Product backlog:} É uma lista com tudo que o cliente desejaria como funcionalidade. É criado pelo product owner e sofre mudanças a cada solicitação do cliente.
\textbf{Sprint backlog:} É uma lista com o que deve ser feito na próxima Sprint.
\subsection{Scrum Solo}
Scrum solo não é uma nova metodologia, é apenas um denominação dada a uma adaptação do Scrum para projetos que possuem apenas um desenvolvedor. Assim, a pessoa envolvida no projeto tem a liberdade de remover algumas coisas desnecessárias do Scrum quando se está trabalhando sozinha.
Durante o desenvolvimento do sistema Magistro, foi utilizada a seguinte adaptação do Scrum:
\begin{itemize}
\item Uma lista das funcionalidades do sistema (Product backlog);
\item Algumas funcionalidades selecionadas para desenvolver (Sprint backlog);
\item Controle das atividades utilizando um quadro Kanban;
\item Cada produto entregue no final da Sprint era validado por funcionários da secretaria da escola;
\item Reuniões com o pessoal da secretaria para reavaliar o Product backlog.
\end{itemize}
\section{JavaScript}
JavaScript é uma linguagem de programação criada em 1995 por Brendan Eich na Netscape \cite{goodman2001}. Foi utilizada inicialmente no navegador Netscape Navigator 2.0 permitindo a criação de conteúdos dinâmicos a partir da manipulação de componentes. Com ela, podemos manipular os componentes diretamente no browser sem a necessidade de fazer requisições no servidor.
Apesar de ser conhecida por dar dinamicidade a conteúdos web, a linguagem de programação JavaScript não se limita apenas ao mundo web, ela pode ser também utilizada em diferentes tipos de ambientes.
As principais características da linguagem segundo \citeonline{Munzlinger2011} são:
\begin{citacao}
\begin{itemize}
\item \textbf{Interpretada:} JavaScript não necessita ser compilada, pois é uma linguagem interpretada diretamente pelo navegador.
\item \textbf{Case sensitive:} Em JavaScript deve-se respeitar letras maiúsculas e minúsculas.
\item \textbf{Fracamente tipada:} JavaScript é chamada de fracamente tipada pois ao declarar as variáveis não definimos qual o tipo da variável(inteira, ponto flutuante, array, booleana, etc). Assim, podemos armazenar em uma variável a informação que desejamos, pois não tem tipo "definido" na declaração.
\item \textbf{Dinamicamente tipada:} Toda linguagem fracamente tipada é também dinamicamente tipada. Isso significa que a variável vai se tornar de um determinado tipo no momento da atribuição do conteúdo. Se o tipo do conteúdo mudar durante a execução do programa a variável vai mudar de tipo dinamicamente.
\item \textbf{Estruturada ou orientada a objetos:} Originalmente a linguagem foi criada seguindo o paradigma de programação estruturada, mas também pode ser programada no paradigma de programação orientada a objetos.
\item \textbf{Acionamentos:} Scripts podem ser acionados por eventos(passar o mouse, clicar, tempo, etc) ou automaticamente na sequência em que o navegador interpreta o conteúdo da página e localiza a linha de comando.
\end{itemize}
\end{citacao}
\section{jQuery}
JQuery é um framework JavaScript que nada mais é que uma coleção de funções pré-definidas e testadas. Foi lançado pela primeira vez em 2006 e hoje é usado por mais de 67.9\% dos sites mais visitados do mundo.\footnote{\url{http://w3techs.com/technologies/overview/javascript_library/all}}
De acordo com \citeonline{silva2008} a biblioteca fornece dinamismo e interatividade às páginas web com o intuito de tornar agradável a experiência do usuário com a aplicação, além de fornecer diversas funcionalidades ao desenvolvedor para facilitar a criação de scripts. Esses scripts visam incrementar, de forma progressiva e não obstrutiva, a usabilidade, a acessibilidade e o design, enriquecendo a experiência do usuário.
\section{Grails}
O framework web Grails, segundo \citeonline{anselmo2010}, é um framework completo para a máquina virtual Java, por tirar proveito da linguagem de programação Groovy e fornecer uma experiência de desenvolvimento produtivo e de fluxo
alinhado.
O Grails foi criado em 2006 influenciado diretamente pelo surgimento do Ruby on Rails. Grails utiliza o paradigma de programação por convenção o que reduz o tempo gasto com configurações deixando assim o programador focado no desenvolvimento do sistema. Possui mais de 1000 plugins que podem ser baixados no endereço https://grails.org/plugins/.
Algumas vantagens oferecidas pelos Grails segundo
\citeonline{Franco2011} são:
\begin{citacao}
\begin{itemize}
\item uma camada para mapeamento objeto-relacional fácil de usar construída no Hibernate;
\item Uma tecnologia de visão expressiva, chamada Groovy Server Pages (GSP);
\item Uma camada de controle construída no Spring MVC;
\item Um ambiente em linha de comando construído no Groovy: Gant.
\item Um container TomCat integrado que é configurado para recarregar quando necessário;
\item Injeção de dependência com o container Spring embutido;
\item Suporte à internacionalização (i18n) construída sobre o conceito MessageSource do núcleo do Spring;
\item Uma camada de serviços transacionais construída na abstração de transações do Spring.
\end{itemize}
\end{citacao}
Seguindo o paradigma de convenção sobre configuração o Grails possui uma estrutura de diretórios fixa onde cada arquivo tem seu lugar pré-definido da seguinte forma:
\begin{itemize}
\item \textbf{Grails App} Diretório principal de um projeto Grails
\begin{itemize}
\item Conf – onde fica localizado os arquivos de configuração.
\item Controllers – os arquivos controladores seguindo o padrão MVC.
\item Domain – os arquivos de domínio seguindo o padrão MVC.
\item i18n – internacionalização.
\item services – arquivos de serviços, remove a lógica de negócio dos.
\item Views – arquivos .GSP que tratam da camada de visualização.
\end{itemize}
\end{itemize}
A versão mais recente do Grails é a 3.0.9 e utiliza a versão 2.4 da linguagem Groovy.
Abaixo, a figura \ref{fig:arquiteturaGrails} mostra a arquitetura do framework Grails.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\label{fig:arquiteturaGrails}
\caption{Arquitetura do Grails}
\includegraphics[width=10cm]{imagens/arquiteturaGrails.jpg}
Fonte: http://eusoudev.blogspot.com.br/2014/03/visao-geral-do-grails-framework.html
\end{figure}
\subsection{Padrão MVC}
No padrão MVC(Model-View-Controller) a aplicação é dividida em 3 camadas, figura \ref{fig:mvc}.
\begin{figure}[!h]
\centering
\label{fig:mvc}
\caption{Camadas do padrão MVC}
\includegraphics[width=10cm]{imagens/padraomvc.jpg}
Fonte: http://www.devall.com.br/blog/show/1358
\end{figure}
A camada de controle é a responsável por processar as ações do usuário e enviar essas para as camadas de domínio ou de visualização. No Grails essa camada é uma intermediação entre as camadas de modelo e visualização, sendo uma prática ruim colocar a lógica do negócio nessa camada, para isso, Grails provê a pasta Services que é onde deve ficar os serviços com as lógicas de negócio da aplicação. A camada de modelo é a camada que contém as classes de modelo que são classes que possuem a função de definir os atributos e as regras de negócio. A camada de visualização é a camada responsável por fazer a ligação entre o usuário e a aplicação.
Em Grails seguindo a convenção as requisições a uma determinada ação é feita obedecendo a seguinte convenção de URL: http://localhost:8080/controlador/acao onde \textit{controlador} é um controlador qualquer da nossa aplicação e ação é uma função ou closures presente nesse controlador, a página .gsp por convenção deve possuir o mesmo nome da ação, no nosso caso acao.gsp.
\section{Groovy}
Groovy é uma linguagem ágil e dinâmica para a plataforma Java, com muitas ferramentas inspiradas em linguagens como Python, Ruby e Smalltalk, tornando-as disponíveis aos programadores, usando uma sintaxe próxima do Java \cite{Koenig2011}.
Para \citeonline{Koenig2011}, a linguagem possui as facilidades de outras linguagens como Ruby e Python, e o poder e estabilidade do Java. O código Groovy é compilado em bytecodes Java, isso quer dizer que você pode escrever em Groovy e em Java diminuindo assim a curva de aprendizagem.
Em Groovy, os seguintes pacotes Java são importados por \textit{default}:
\begin{itemize}
\item java.lang.*
\item java.util.*
\item java.io.*
\item java.net.*
\item groovy.lang.*
\item groovy.util.*
\item java.math.BigInteger
\item java.math.BigDecima
\end{itemize}
Não existe tipos primitivos em Groovy, tudo é um objeto, métodos gets e sets são criados dinamicamente e classes e métodos são declarados como público.
Alguns recursos presentes em Groovy:
\begin{itemize}
\item Clousures
\item Tipagem dinâmica e estática
\item Expressões dento de Strings
\item Interpolar Strings
\item Alteração de código em tempo de execução
\item Construtores específicos para coleções
\end{itemize}
\section{UML}
Unified Modeling Language (UML) é uma linguagem visual utilizada para modelar sistemas computacionais por meio do paradigma de Orientação a Objetos. Essa linguagem se tornou, nos últimos anos, a linguagem-padrão de modelagem de software adotada internacionalmente pela indústria de Engenharia de Software \cite{guedes2014}. A UML disponibiliza uma forma padrão de modelagem de projetos de sistemas, incluindo seus aspectos conceituais tais como processos de negócios e funções de sistema, além de itens concretos como as classes escritas em determinada linguagem de programação, processos de banco de dados e
componentes de software reutilizáveis \cite{videira2001}
A linguagem UML é composta por muitos elementos de modelo que representam as diferentes partes de um sistema de software. Os elementos UML são usados para criar diagramas, que representam uma determinada parte, ou um ponto de vista do sistema. No UML pode-se construir os seguintes diagramas de acordo com \citeonline{Hensgen2015}:
\begin{itemize}
\item \textbf{Diagrama de Caso de Uso} mostra os atores do sistema, casos de uso e seus relacionamentos;
\item \textbf{Diagrama de Classe} mostra as classes os relacionamentos entre elas e os atributos;
\item \textbf{Diagrama de Sequência} mostra os objetos e a sequência das chamadas de método feitas a outros objetos.
\item \textbf{Diagrama de Colaboração} mostra os objetos, seus relacionamentos, dando ênfase aos objetos que participam da troca de mensagens;
\item \textbf{Diagrama de Estado} mostra os estados, mudanças dos estados e eventos em determinado objeto ou uma parte do sistema;
\item \textbf{Diagrama de Atividade} mostra as atividades e as mudanças de uma atividade para outra de acordo com os eventos ocorridos em alguma parte do sistema;
\item \textbf{Diagrama de Componente} mostra os componentes de programação em alto nível;
\item \textbf{Diagrama de Distribuição} mostra as instâncias dos componentes e seus relacionamentos.
\end{itemize}
\section{Draw.io}
Draw.io \footnote{\url{http
s://www.draw.io}} é uma ferramenta gratuita para criação de gráficos, diagramas, UML, etc. Essa ferramenta permite que o usuário salve todo o seu trabalho no Google Drive, Dropbox, no próprio computador ou no navegador web com o uso de plugins, permitindo assim termos uma cópia do nosso trabalho localmente ou na nuvem.
A ferramenta possui uma interface amigável e simples, permite a exportação do projeto em vários formatos como: JPG, PNG, PDF, SVG, HTML e XML.
A interface do draw.io pode ser vista na figura \ref{fig:drawio} a seguir:
\begin{figure}[!h]
\centering
\includegraphics[width=15cm]{imagens/drawio.png}
\caption{Interface do Draw.io}
\label{fig:drawio}
\end{figure}
\chapter{Atividades desenvolvidas}
Nesse capítulo são dispostas as atividades realizadas durante o período do estágio na escola estadual de ensino médio Lyceu Paraibano.
\section{Levantamento de requisitos funcionais}
A metodologia ágil escolhida para o desenvolvimento do sistema foi a Scrum. Geralmente essa metodologia é adotada por uma equipe de desenvolvimento, mas no caso como existiria apenas um desenvolvedor foi decidido suprimir algumas características padrão do \textit{Scrum}.
Sendo funcionário da escola, atuando na secretaria da mesma e assim estando por dentro de todas as atividades, fui durante o desenvolvimento do projeto o cliente (product owner). Sendo assim, também inseria algumas funcionalidades que o sistema poderia ter no \textit{product backlog} e validava-as quando com outros possíveis usuários do sistema (professores, alunos e diretores).
A primeira atividade depois de uma reunião com a direção e alguns professores foi criar a lista de possíveis funcionalidades que haveria no sistema \textit{product bakclog}. Cada nova funcionalidade que aparecia era colocada em uma tabela conforme a Tabela\ref{table:funcionalidades} com os campos ID, Título Descrição e Sugerido por, conforme fossem aparecendo novas funcionalidades a tabela era atualizada. Logo após, foi feita uma seleção das funcionalidades mais importantes que entrariam no \textit{sprint backlog}. Para cada \textit{log} de implementação foi estabelecido a duração máxima de uma semana e as reuniões entre os membros da equipe de desenvolvimento que ocorrem diariamente segundo o padrão Scrum não existiam. Um quadro Kanban foi o único artefato utilizado nessa etapa. Nesse quadro existia as funcionalidades a serem desenvolvidas e os \textit{backlogs} separados por categorias: \textit{To do, In Progress e Done}.
O produto entregue(as funcionalidades implementadas no \textit{sprint backlog}) eram então validadas por possíveis usuários do sistema.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=10cm]{imagens/trello.png} % leia abaixo
\caption{Quadro Kanban usando o trello}
\end{figure}
Algumas regras de negócio foram elicitadas após a primeira reunião com a direção, dentre as principais regras estão:
\begin{itemize}
\item alunos, professores e pais só podem acessar conteúdos do respectivo perfil;
\item professores podem dar aula em várias turmas e em disciplinas diferentes;
\item alunos e professores podem mudar de turma;
\item o administrador é o responsável por cadastrar alunos, responsáveis, professores e administrar o sistema;
\item o aluno caso maior de 18 anos pode ser responsável por si mesmo;
\item as notas só serão lançadas após o início do ano letivo e antes do término do ano letivo;
\item um ano letivo só é encerrado quando todas as notas forem lançadas pelos professores;
\item um novo ano letivo só é iniciado após o encerramento do ano letivo anterior.
\end{itemize}
% Please add the following required packages to your document preamble:
% \usepackage{booktabs}
\begin{table}[!h]
\centering
\caption{Tabela de funcionalidades}
\label{table:funcionalidades}
\end{table}
\section{Modelagem do sistema usando UML}
Após o levantamentos dos requisitos do sistema, foi feita uma análise desses requisitos para a criação do diagrama de classes do sistema usando Unified Modeling Language (UML).
Segundo \citeonline{furlan1998}, diagrama de classe trata-se de uma estrutura lógica estática em uma superfície de duas dimensões mostrando uma coleção de elementos declarativos de modelo, como classes, tipos e seus respectivos conteúdos e relações. A figura \ref{imagem:diagramaDeClasse} mostra o diagrama de classe do Magistro.
Devido ao curto tempo para criação do sistema e para evitar possíveis surpresas durante o desenvolvimento, foi dada uma grande ênfase nessa atividade para entender de que forma o projeto seria conduzido.
O diagrama de classes é utilizado para se ter uma visão geral das classes e dos seus relacionamentos. A figura \ref{imagem:diagramaDeClasse} exibe o diagrama de classe do Magistro contendo as 11 classes e relacionamento entre elas.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=11cm]{imagens/DiagramaMagistro.png} % leia abaixo
\label{imagem:diagramaDeClasse}
\caption{Diagrama de classe do Magistro}
\end{figure}
A seguir é apresentada uma breve descrição das classes do diagrama (Figura \ref{imagem:diagramaDeClasse}):
\begin{itemize}
\item \textbf{Usuário:} Classe que contêm os dados referentes a todos os usuários do sistema;
\item \textbf{Permissão:} Classe gerada pelo plugin springSecurityCore;
\item \textbf{UsuarioPermissao:} Classe que contêm os dados referentes a um usuário e sua permissão;
\item \textbf{Responsável:} Classe que contêm os dados referentes ao responsável pelo aluno;
\item \textbf{Aluno:} Classe que contêm os dados referentes ao aluno;
\item \textbf{Turma:} Classe que contêm os dados referentes as turmas;
\item \textbf{Nota:} Classe que contêm os dados referentes as notas do aluno;
\item \textbf{AnoLetivo:} Classe que contêm os dados referentes ao ano letivo;
\item \textbf{Disciplina:} Classe que contêm os dados referentes as disciplinas;
\item \textbf{Professor:} Classe que contêm os dados referentes aos professores;
\item \textbf{DisciplinaProfessor:} Classe que contêm os dados referentes a disciplina e ao professor que ministra a disciplina;
\item \textbf{Usuário:} Classe que contêm os dados referentes a todos os usuários do sistema;
\end{itemize}
\section{Desenvolvimento do sistema}
Nessa seção são descritas as principais funcionalidades desenvolvidas do sistema.
\subsection{Autenticação dos usuários}
O Magistro possui autenticação para todos usuários que acessam o sistema. Essa autenticação no Grails pode ser feita de forma convencional através de filtros e \textit{sessions} ou através de plugins.
No desenvolvimento do Magistro foi adotado o plugin \textit{spring-security-core} \footnote{\url{http://grails.org/plugin/spring-security-core}}. O spring-security-core é uma biblioteca com várias funções baseada no \textit{Spring Framework}, essas funções fornecem controle de acesso baseado em um usuário e em sua respectiva permissão.
No Magistro, cada usuário possui sua permissão, as permissões desenvolvidas para o sistema foram as seguintes: aluno, professor, responsável e admin. Abaixo o trecho de código \ref{lst:autenticaoUser} mostra como é realizado o controle de acesso para o método create do controlador de alunos, através da anotação @Secured do \textit{spring-security-core} é possível passar como parâmetro as permissões que desejamos.
\begin{lstlisting}[language=Ruby,caption={Autenticação do usuário},label={lst:autenticaoUser}]
@Secured(['ROLE_ADMIN'])
def create() {
def alunoInstance = new Aluno(params)
respond alunoInstance
}
\end{lstlisting}
Apenas o administrador do sistema possui a permissão de cadastrar o ano letivo, alunos, professores, responsáveis e gerenciar todo o sistema. Alunos, professores e responsáveis também possuem funcionalidades do respectivo perfil.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=15cm]{imagens/telaLogin.png} % leia abaixo
\label{imagem:telaLogin}
\caption{Tela inicial de login}
\end{figure}
\subsection{Geração do boletim editável}
Ao acessar a funcionalidade de lançar notas, o professor escolhe uma turma onde ele ministra a aula, a disciplina e a etapa. É exibido para ele uma tabela com os campos editáveis das notas e das faltas como nos mostra a figura \ref{imagem:tabelaNotas}.
Para essa funcionalidade de edição dinâmica das tabelas foi utilizado um plugin \textit{jQuery} chamado \textit{jqGrid} \footnote{\url{http://www.trirand.com/blog/}}. Uma vez que os dados são manipulados no lado do cliente o plugin utiliza \textit{Ajax} para fazer a chamadas no lado do servidor e atualizar as notas dos alunos.
Para criar uma tabela editável usando o \textit{jqGrid} é necessário primeiramente criarmos uma tabela \textit{HTML} com uma ID e com a classe específica do \textit{jqGrid} como mostra o trecho de código \ref{lst:tabelaJqgrid}
\begin{lstlisting}[language=Html,caption={Tabela html jqGrid},label={lst:tabelaJqgrid}]
<table id="notas_alunos_list" class="scroll jqTable"></table>
\end{lstlisting}
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=15cm]{imagens/tabelaNotas.png} % leia abaixo
\label{imagem:tabelaNotas}
\caption{Tabela editável para lançamento das notas}
\end{figure}
Após isso, criamos uma função \textit{javaScript} para manipular nossa tabela e atualizar as notas no lado do servidor usando \textit{Ajax}. Código \ref{lst:funcaoJavaScriptGrid}.
\begin{lstlisting}[language=html,caption={função javaScript jqGrid},label={lst:funcaoJavaScriptGrid}]
$(document).ready(function () {
$("#notas_alunos_list").jqGrid({
url:'alunosDaTurmaDisciplina',
cellurl:'editarNota',
datatype: "json",
cellEdit:true,
colNames:['Aluno','Bimestre','Nota','Faltas'],
colModel:[
{name:'alunoNome'},
{name:'bimestre'},
{name:'nota', editable:true,editrules:{required:true,number:true}},
{name:'faltas',editable:true,editrules:{integer:true}}
],
});
\end{lstlisting}
Então temos os seguintes campos da nossa função:
\begin{itemize}
\item \textbf{url:} url que retorna como resposta um json;
\item \textbf{cellurl:} url que será chamada para atualizar os dados;
\item \textbf{ datatype:} o tipo de dado retornado ao acessar a url, pode ser um xml, json,jsonp,array, xmlstring, jsonstring e script;
\item \textbf{celledit}: se a tabela será editável;
\item \textbf{colNames}: o nome das colunas;
\item \textbf{colModel}: o dos atributos do nosso model especificando quais deles serão editáveis, as validações e o tipo;
\end{itemize}
Após as notas estarem preenchidas, é feita uma requisição \textit{Ajax} ao controlador responsável por atualizar as notas dos alunos. O código \ref{lst:metodoatualizanotas} mostra como é feito esse procedimento.
\begin{lstlisting}[language=Ruby,caption={Método responsável por atualizar as notas},label={lst:metodoatualizanotas}]
@Secured(['ROLE_PROFESSOR'])
def editarNota(){
def nota = null
switch(params.oper) {
case 'edit':
nota = Nota.findById(params.id)
if(params.nota){
nota.nota = params.double('nota')
}
if (params.faltas) {
nota.faltas = params.int('faltas')
}
if (!nota.save(flush:true)) {
nota = null
}
break
}
render nota as JSON
}
\end{lstlisting}
Segundo o código, é feito um \textit{switch} em \textit{params.oper} para saber qual tipo de operação está sendo realizada, caso seja uma operação de edição então é buscado a nota de forma dinâmica pelo seu ID e a nota é atualizada pelo seu novo valor passado. No fim, ela é salva e é retornado um \textit{JSON} como resposta ao cliente.
\subsection{Integração com o Twitter Bootstrap}
A interface do Magistor é totalmente responsiva garantindo que o mesmo possa ser utilizado em dispositivos com diferentes resoluções de tela. O Twitter Bootstrap \footnote{\url{http://getbootstrap.com/}} foi a biblioteca escolhida para fazer a responsividade do sistema.
Para integrar o Twitter Bootstrap com o Magistro foi mais conveniente utilizar um plugin Grails chamado twitter-bootstrap \footnote{\url{https://grails.org/plugin/twitter-bootstrap}}. Para adicionar esse plugin no nosso projeto foi preciso apenas editar o arquivo \textit{BuildConfig;groovy} que é encontrado na pasta \textit{grails-app/conf/}, inserir a seguinte linha em plugins: \textit{runtime ':twitter-bootstrap:3.3.5'} e adicionar os \textit{requeriments} no \textit{Asset-Pipeline} do projeto.
A imagem \ref{imagem:anoLetivoResp} mostra a função de cadastrar um ano letivo de forma responsiva em um dispositivo com resolução 480 x 800.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=8cm]{imagens/anoLetivoResp.png} % leia abaixo
\label{imagem:anoLetivoResp}
\caption{Cadastro do ano letivo responsivo.}
\end{figure}
\subsection{Buscas Ajax com formulários remotos.}
Por padrão, Grails já oferece para nós suporte nativo a Ajax através de um pequeno conjunto de tags, tornando a tarefa de trabalhar com \textit{Ajax} bem trivial \citeonline{kiko}.
No Magistro, o administrador possui a opção de buscar alunos,professores, pais, turmas, etc. Para fazer essa busca foi utilizado uma tag do Grails chamada \textit{g:formRemote} que dispara uma requisição Ajax.
O exemplo de código \ref{lst:formRemoteALuno} mostra o uso da tag \textit{formRemote} para buscar um aluno pelo nome.
\begin{lstlisting}[language=Ruby,caption={formRemote para buscar aluno pelo nome},label={lst:formRemoteALuno}]
<g:formRemote name="buscarAluno" update="resultado"
url="[controller:'aluno',action:'buscarAluno']">
Nome: <g:textField name="nome"/>
<input type="submit" value="Pesquisar"/>
</g:formRemote>
<div id="resultado"></div> #template
\end{lstlisting}
No atributo update é definido um identificador da tag HTML que vai receber o retorno da consulta. O atributo url define qual a action que deverá ser executada \citeonline{kiko}.
Abaixo o método buscarAlunos do controlador Aluno.
\begin{lstlisting}[language=Ruby,caption={action buscarAlunos},label={lst:actionBuscarAluno}]
def buscarAluno(){
def alunos = Aluno.findAllByNomeLike("%${params.nome}%")
render(template:'resultado',model:[alunos:alunos])
}
\end{lstlisting}
E o template que exibe o resultado da consulta.
\begin{lstlisting}[language=html,caption={template resultado},label={lst:template resultado}]
<table>
<thead>
<th>Nome</th>
</thead>
<tbody>
<g:each in="${alunos}" var="aluno">
<tr>
<td>Aluno: "${aluno.nome}"</td>
</tr>
</g:each>
</tbody>
</table>
\end{lstlisting}
\subsection{Geração de gráficos de desempenho escolar}
Quando o aluno acessa a sua página é possível por meio da aba progressão visualizar seu desempenho escolar durante o ano letivo ou se preferir pode também visualizar seu desempenho em relação a anos anteriores.
Para criação desses gráficos foi utilizada uma ferramenta da Google chamada \textit{Google chart tool} \footnote{\url{https://developers.google.com/chart/}} que permite a visualização de gráficos em linhas ou até gráficos mais complexos.
Para utilizar essa ferramenta foi preciso adicionar algumas bibliotecas javaScript na página web, fazer uma requisição Ajax para retornar as notas do aluno agrupadas por bimestre em formato Json, selecionar a opção de gráfico a ser utilizada e criar um gráfico com uma \textit{<div>} atribuindo uma \textit{Id} a ser utilizada pelo \textit{Google Chart tool}.
O trecho de código \ref{lst:formRemoteALuno} exibe o código utilizado para criação do gráfico.
\begin{lstlisting}[language=html,caption={Código para o gráfico de desempenho escolar},label={lst:formRemoteALuno}]
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "${createLink(controller:'aluno',action:'getNotas')}",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, {width: 900, height: 400});
}
</script>
\end{lstlisting}
A figura \ref{imagem:progressao} exibe o gráfico de desempenho anual do aluno.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=13cm]{imagens/progressao.png} % leia abaixo
\label{imagem:progressao}
\caption{Desempenho anual do aluno}
\end{figure}
\subsection{Testes funcionais com GEB}
Os testes funcionais foram feitos para avaliar o comportamento da aplicação durante o desenvolvimento. Grails possui alguns plugins que auxiliam nessa parte de testes funcionais.
O plugin utilizado para execução dos testes funcionais no Magistro foi o GEB \footnote{\url{https://grails.org/plugin/geb}}. GEB utiliza o Spock Framework\footnote{\url{http://spockframework.github.io/spock/docs/1.0/index.html}} para realizar os testes. O Spock ao invés de usar funções para realizar os teste como é feito em teste unitários ele nos incentiva a usar frases que possam ser compreendidas por programadores ou não.
Para utilizar o GEB o processo foi o mesmo para todos os plugins do Grails, apenas inserir no arquivo \textit{BuildConfig.groovy } a linha para o plugin: \textit{ compile ":geb:0.12.2"} e inserir na pasta \textit{/test/functional} o arquivo de teste.
O código \ref{lst:codigoTesteFuncional}
exibe o teste funcional para o CRUD de Aluno.
\begin{lstlisting}[language=Ruby,caption={Teste funcional para o CRUD de Aluno},label={lst:codigoTesteFuncional}]
@Stepwise
class AlunoCRUDFunc extends GebReportingSpec {
def "nao existem alunos"() {
when:
to ListPage
then:
alunoRows.size() == 0
}
def "adicionar aluno"() {
when:
newAlunoButton.click()
then:
at CreatePage
}
def "cadastrar aluno"() {
when:
nome = "Gleydson"
cpf = "412.312.285-97"
createButton.click()
then:
at ShowPage
}
}
\end{lstlisting}
A figura \ref{imagem:saidaTestes} exibe a saída do terminal para o teste funcional do CRUD do aluno. O teste é rodado pelo terminal, então o Grails abre um navegador web e roda todos os testes funcionais, caso algum erro seja encontrado uma mensagem é exibida junto com o caminho para o log de erros.
\begin{figure}[!h]
\centering % para centralizarmos a figura
\includegraphics[width=10cm]{imagens/printTeste.jpg} % leia abaixo
\label{imagem:saidaTestes}
\caption{Saída do teste funcional}
\end{figure}
% ---
% Finaliza a parte no bookmark do PDF
% para que se inicie o bookmark na raiz
% e adiciona espaço de parte no Sumário
% ---
\phantompart
% ---
% Conclusão
% ---
\chapter{Considerações finais}
Com a base adquirida no curso de Sistemas para Internet, nos livros, na elaboração desse relatório final de estágio e no desenvolvimento do sistema Magistro, considero todas essas coisas de grande valia para concretizar esse estágio.
O sistema Magistro permite o lançamento de notas por professores e o acesso dessas notas pelos alunos e seus responsáveis, e a emissão de alguns documentos e relatórios que dependem dessas notas. Até o momento o sistema está em fase de testes e vem cumprindo com as expectativas da direção e dos professores, porém, só estará disponível integralmente para a comunidade escolar a partir do próximo ano letivo por questões do orçamento anual e de adaptação com o novo sistema.
A principal dificuldade encontrada foi em relação ao levantamento de requisitos e de gerenciar o processo de desenvolvimento, mas essas dificuldade foram supridas com o aprendizado adquiridos nas cadeiras de gerência de projetos de software e desenvolvimento e execução de processos de software sendo essas para mim as mais importantes durante o estágio.
Um desafio futuro proposto pela direção da escola é utilizar o sistema para gerenciar atividades da secretaria escolar, como a criação da caderneta do professor online e a emissão automática da ficha do aluno o que é impossível no momento por questões burocráticas.
% ---
% ----------------------------------------------------------
% ELEMENTOS PÓS-TEXTUAIS
% ----------------------------------------------------------
\postextual
% ----------------------------------------------------------
% Referências bibliográficas
% ----------------------------------------------------------
\bibliography{abntex2-modelo-references}
\end{document}