101 lines
3.7 KiB
TeX
101 lines
3.7 KiB
TeX
\section{Metodologia}
|
||
|
||
O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
|
||
desde a subseção 3.2 até a 3.7, 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}
|
||
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 prototipas 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.
|
||
|