2024-02-09 23:01:47 +00:00
|
|
|
|
\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.
|
|
|
|
|
|
|
2024-02-11 22:34:09 +00:00
|
|
|
|
\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.
|
|
|
|
|
|
|
2024-02-12 02:01:01 +00:00
|
|
|
|
\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.
|
|
|
|
|
|
|
