164 lines
9.4 KiB
TeX
164 lines
9.4 KiB
TeX
\section{Metodologia}
|
||
|
||
O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
|
||
desde a subseção \ref{subsec:prototipacao-do-layout} até a \ref{subsec:coleta-de-feedbacks}, 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 primariamente de hospedagem de código-fonte e arquivos com controle de versão usando o Git
|
||
|
||
\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{Prototipação do layout}
|
||
\label{subsec:prototipacao-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=1\textwidth]{login}
|
||
\caption{Login}
|
||
\end{figure}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{pagina-inicial}
|
||
\caption{Página inicial}
|
||
\end{figure}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{turma-detalhes-comunicados}
|
||
\caption{Sala de aula – Comunicados}
|
||
\end{figure}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{turma-detalhes-atividades}
|
||
\caption{Sala de aula – Atividades}
|
||
\end{figure}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{turma-detalhes-pessoas}
|
||
\caption{Sala de aula – Pessoas}
|
||
\end{figure}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{atividade-detalhes.png}
|
||
\caption{Detalhes de atividade}
|
||
\end{figure}
|
||
|
||
\vfill
|
||
\cleardoublepage{}
|
||
|
||
A estrutura lógica das telas prototipadas foi baseada 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 a 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 incógnitos e, não tínhamos 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.
|
||
|
||
Em resumo, no contexto do IF Salas, as "balas reais" representam as funcionalidades finais e completas da aplicação, ou seja, as
|
||
características e fluxos que devem ser totalmente implementados e funcionar conforme esperado para o usuário final.
|
||
Já os "projéteis luminosos" simbolizam as versões intermediárias ou protótipos dessas funcionalidades, que foram desenvolvidos para testar
|
||
e validar se as ideias ou fluxos funcionam na prática antes de serem totalmente desenvolvidos e integrados na aplicação.
|
||
|
||
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}
|
||
|
||
\subsection{Versionamento de código}
|
||
|
||
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=1\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.
|
||
|
||
\subsection{Coleta de feedbacks}
|
||
\label{subsec:coleta-de-feedbacks}
|
||
|
||
A coleta de feedbacks foi feita de maneira informal, seguindo uma abordagem holística e participativa, envolvendo tanto discentes quanto docentes
|
||
para garantir uma visão abrangente da usabilidade do software. Inicialmente, foi estabelecido um ambiente acolhedor e receptivo, incentivando os usuários
|
||
a compartilharem suas experiências de forma franca e aberta. Foram organizadas também sessões de demonstração, onde os participantes puderam experimentar o software
|
||
em situações simuladas de uso, como visualizar atividades avaliativas, por exemplo. Durante essas interações, foi observado atentamente as reações dos
|
||
usuários, seus padrões de navegação e eventuais dificuldades encontradas ao utilizar o IF Salas. A coleta de feedbacks também se estendeu para além
|
||
dos ambientes controlados, aproveitando oportunidades informais de conversas durante o dia a dia acadêmico. Essa abordagem multifacetada permitiu uma
|
||
compreensão detalhada das necessidades e expectativas dos usuários em relação à usabilidade do IF Salas, fornecendo percepções valiososas para refinamentos
|
||
futuros e melhorias contínuas.
|