\section{Metodologia}

O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
desde a subseção \ref{subsec:definicao-da-proposta-de-trabalho} até a \ref{subsec:implantacao-do-software}, presentes a seguir.

\subsection{Ferramentas utilizadas}

\begin{itemize}
	\item \textbf{Git}:
	      Sistema de controle de versão distribuído gratuito e de código aberto.

	\item \textbf{Github}:
	      Plataforma de desenvolvimento que permite aos desenvolvedores criar, armazenar, gerenciar e compartilhar seu código.

	\item \textbf{Github Actions}:
	      Serviço integrado de integração contínua e implantação contínua (CI/CD) fornecido pelo GitHub. Ele permite que
	      os desenvolvedores automatizem fluxos de trabalho, incluindo construção, teste e implantação de aplicativos
	      diretamente em seus repositórios GitHub.

	\item \textbf{React}:
	      Biblioteca JavaScript \textit{front-end} gratuita e de código aberto para construir interfaces de usuário baseadas em componentes.

	\item \textbf{Figma}:
	      Applicação web colaborativa para design de interface.

	\item \textbf{Taiga}:
	      Sistema de gerenciamento de projetos gratuito e de código aberto para startups, desenvolvedores ágeis e designers.

	\item \textbf{Jitsi}:
	      Uma coleção de aplicativos multiplataforma de voz, videoconferência e mensagens instantâneas gratuitos e de código aberto para a
	      plataforma Web, Windows, Linux, macOS, iOS e Android.

	\item \textbf{Material Design}:
	      \textit{Design System} desenvolvido pelo Google para criar interfaces visuais consistentes, modernas e intuitivas em
	      aplicativos e websites. Caracterizado por elementos tridimensionais, sombras e animações suaves, o Material Design visa
	      proporcionar uma experiência de usuário coesa em diferentes dispositivos e plataformas.

	\item \textbf{Visual Studio Code (VS Code)}:
	      Um editor de código otimizado para criar e depurar aplicativos modernos da Web e da nuvem.

\end{itemize}

\subsection{Definição da proposta de trabalho}
\label{subsec:definicao-da-proposta-de-trabalho}
Inicialmente, foi discutido diversas propostas para este trabalho de conclusão de curso, sendo elas:

\begin{itemize}
	\item{Gerenciador de quantidade de pessoas em ambientes internos utilizando dispositivos Bluetooth;}
	\item{Plataforma de Ensino para os Institutos Federais;}
\end{itemize}

Devido à complexidade e custo de desenvolvimento da primeira proposta citada acima, foi escolhida segunda proposta. A prerrogativa
da plataforma ser de código aberto teve uma forte contribuição para sua escolha.

\subsection{Prototipação do layout}

Nesta etapa foram feitos protótipos das telas principais do sistema: Página Inicial, Informações, Calendário Acadêmico, Login e Sala
de Aula.

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{login}
	\caption{Login}
\end{figure}

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{pagina-inicial}
	\caption{Página inicial}
\end{figure}

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{turma-detalhes-comunicados}
	\caption{Sala de aula – Comunicados}
\end{figure}

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{turma-detalhes-atividades}
	\caption{Sala de aula – Atividades}
\end{figure}

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{turma-detalhes-pessoas}
	\caption{Sala de aula – Pessoas}
\end{figure}

\vfill
\cleardoublepage{}

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{atividade-detalhes.png}
	\caption{Detalhes de atividade}
\end{figure}

A estrutura lógica das telas prototipadas foram baseadas no sistema \textit{Google Classroom} visando
a facilidade de uso por parte dos usuários, uma vez que a ferramenta é bem difundida no ambiente acadêmico do IFMG\@.

\subsection{Codificação do protótipo}

Após a prototipação das telas principais, iniciou-se o desenvolvimento da aplicação utilizando uma abordagem proposta
por Andrew Hunt e David Thommas em seu livro O Programador Pragmático \cite{pragmatic-programmer} chamada de \textit{Projéteis Luminosos}.
Essa abordagem é uma analogia à atiradores de armas de fogo que utilizam projéteis luminosos. Esses projéteis são carregados a intervalos
no pente de munição com as balas comuns. Quando disparados, seu fósforo se acende e deixa uma trilha pirotécnica da arma até o que quer 
que atinjam. Se os projéteis estiverem atingindo o alvo, as balas comuns também estarão. O feedback é imediato e, já que eles operam no 
mesmo ambiente da munição real, os efeitos externos são reduzidos.

Os projéteis luminosos no contexto do desenvolvimento do IF Salas foi necessário para validar como certos fluxos, antes prototipados
no Figma, funcionariam na prática. Essa abordagem foi escolhida pelo fato do IF Salas ser algo que nunca foi construído e utilizado
anteriormente no contexto do IFMG Sabará. Ou seja, alguns requisitos ainda pareciam incognitos e, não tinhamos uma ideia nitida
de como o sistema funcionaria na prática. Mesmo que \textit{Google Classroom} tenha sido utilizado anteriormente em alguns contextos,
a ferramenta ainda era de propósito geral, e certos fluxos comuns não foram cobertos pela ferramenta, como por exemplo todo o fluxo
de criação, atribuição e correção de atividades interdisciplinares.

A arquitetura e organização dos arquivos do código do projeto foi estruturada seguindo as práticas mais difundidas no mercado de 
desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estão:

\begin{itemize}
	\item Modularização das pastas do projeto por agrupamento lógico. Exemplo: arquivos utilitários ficam em uma pasta chamada utils;
	\item Convenções de nomes de arquivos. Exemplo: arquivos de estilos nomeados como styles.js;
	\item Context API para gerenciamento de estado global;
\end{itemize}

Em relação à manutenção e versionamento de código, foi adotada a metodologia Git Flow \cite{git-flow} com adaptação ao contexto do IF Salas. 
O Git Flow é uma metodologia de desenvolvimento de software baseada em Git que define um conjunto de regras e práticas para 
gerenciar o fluxo de trabalho de uma equipe de desenvolvimento. Essa abordagem é baseada em dois ramos principais: master e develop. 
O ramo master contém o código em produção, enquanto o ramo develop é usado para integração contínua e desenvolvimento de novas funcionalidades. 
Além desses ramos principais, o Git Flow introduz outros tipos de ramos, como ramos de feature, release e hotfix, cada um com sua 
função específica dentro do ciclo de vida do desenvolvimento.

Os ramos de feature são criados a partir do ramo develop e são usados para desenvolver novas funcionalidades ou melhorias no código. 
Uma vez concluído o trabalho na feature, ela é mesclada de volta ao ramo develop. Os ramos de release são criados a partir do develop 
para preparar uma nova versão do software para implantação em produção. Após testes e ajustes finais, o código da release é mesclado 
ao master e ao develop. Por fim, os ramos de hotfix são criados a partir do master para corrigir problemas críticos em produção, sendo então 
mesclados tanto ao master quanto ao develop. 

Entretanto, houve uma adaptação da metodologia Git Flow para o contexto IF Salas, sendo ela a não utilização dos ramos hotfix e release,
uma vez que não houve a implantação do software em ambiente de produção. Observe o diagrama abaixo:

\begin{figure}[ht]
	\centering
	\includegraphics[width=.7\textwidth]{gitflow.jpg}
	\caption{Git Flow Adaptado}
\end{figure}


\subsection{Implantação do software}
\label{subsec:implantacao-do-software}

Além da estrutura git descrita anteriormente, foi criada uma automação que é ativada quando qualquer código for integrado ao ramo principal (master). 
Essa automação é um pipeline que é executado utilizando a ferramenta Github Actions, na qual a aplicação do IF Salas é disponibilizada de forma 
online no domínio \url{https://ifsalas.xyz}. O mesmo pipeline é disparado quando qualquer código é integrado ao ramo de desenvolvimento (development).
Entretanto, a aplicação será disponibilizada de forma online no domínio \url{https://dev.ifsalas.xyz} para fins de testes.