| 1 | \chapter{Desenvolvimento}
|
| 2 |
|
| 3 | Este capítulo detalha o funcionamento de algumas funcionalidades
|
| 4 | desenvolvidas durante o projeto. Apenas algumas funcionalidades mais
|
| 5 | chaves são abordadas neste capítulo, como o registro de humor, vinculo
|
| 6 | de um gatilho, indicadores, e o registro de atividades.
|
| 7 |
|
| 8 | \section{Processo de Login}
|
| 9 |
|
| 10 | Logo ao abrir o aplicativo, o usuário é redirecionado para a tela de
|
| 11 | login. A tela em si é relativamente simples, e contem os campos de
|
| 12 | email e senha. Existe um elemento proposital aqui, uma forma de gerar
|
| 13 | um certo nível de anonicidade, onde o usuário não precisa se identificar
|
| 14 | com um nome ou número de telefone, ou mesmo ativar através de uma conta
|
| 15 | de outra plataforma, como por exemplo, Google ou Facebook.
|
| 16 |
|
| 17 | Em especial por dois motivos, (1) necessitaria uma conexão OAuth, de
|
| 18 | forma que as plataformas de terceiro poderiam rastrear dados de qual
|
| 19 | usuário tem acesso a qual aplicativo. Isso é importante porque existe,
|
| 20 | e é fartamente documentado, sobre os mecanismos usados por tais plataformas
|
| 21 | para rastrear e monitorar o acesso aos dados dos usuários, de forma a
|
| 22 | vender e monetizar os dados dos usuários.
|
| 23 |
|
| 24 | % TODO: Write citations, link to news articles about it
|
| 25 |
|
| 26 | Por fim, ainda retomando a proposta de oferecer a possibilidade de
|
| 27 | \textit{self-service} para o usuário, o usuário que decidisse
|
| 28 | ter uma instância do aplicativo própria para si, não precisaria de uma
|
| 29 | conta em uma plataforma de terceiro, como Google ou Facebook e tampouco
|
| 30 | precisaria registrar-se nessas plataformas.
|
| 31 |
|
| 32 | \begin{figure}[H]
|
| 33 | \centering
|
| 34 | \caption{Tela de login}
|
| 35 | \label{fig:screenshot-login}
|
| 36 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-login.jpeg}
|
| 37 | \source{O autor, 2026}
|
| 38 | \end{figure}
|
| 39 |
|
| 40 | Por fim, destaca-se aqui que, conforme mencionado anteriormente, na
|
| 41 | modelagem de casos de uso \ref{fig:use-cases}, ao realizar o login,
|
| 42 | no primeiro acesso é enviado um email com um código de verificação,
|
| 43 | seguindo a logistica de \textit{magic links}, onde adiciona uma camada
|
| 44 | extra de segurança, garantindo que apenas o usuário que solicitou o login
|
| 45 | possa acessar a conta.
|
| 46 |
|
| 47 | \section{Página de Consulta de Registros}
|
| 48 |
|
| 49 | A tela inicial é a tela nomeada apenas como ``Novo''. A proposta aqui
|
| 50 | é ser a tela de cadastro rápido de um humor, e também é a tela que
|
| 51 | visualmente mais destoa das demais. O usuário é apresentado com três
|
| 52 | seções distintas:
|
| 53 |
|
| 54 | \begin{itemize}
|
| 55 | \item Cadastro rápido de um humor
|
| 56 | \item Entre ontem e hoje
|
| 57 | \item Registros recentes
|
| 58 | \end{itemize}
|
| 59 |
|
| 60 | Sendo respectivamente, uma seção onde o usuário é convidado a
|
| 61 | ``escolher um humor'', e iniciar o processo de registro de uma nova entrada
|
| 62 | de humor, a seção onde é computado os indicadores do nível de energia
|
| 63 | acumulado entre o dia de ontem e hoje, além da informação da média de
|
| 64 | sono do dia atual e comparada com o dia anterior. Por fim, também é
|
| 65 | listado os últimos dez registros de humor que o usuário cadastrou.
|
| 66 |
|
| 67 | \begin{figure}[H]
|
| 68 | \centering
|
| 69 | \caption{Tela de Consulta de Registros}
|
| 70 | \label{fig:screenshot-consulta-registros}
|
| 71 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-initial-page.jpeg}
|
| 72 | \source{O autor, 2026}
|
| 73 | \end{figure}
|
| 74 |
|
| 75 | Aqui já é introduzido para o usuário um padrão de organização e hierarquia:
|
| 76 | todos elementos centrais são organizados em \textit{cards}, que são
|
| 77 | exibidos em no máximo duas colunas. Também é introduzido, caso o usuário
|
| 78 | já tenha registros de humor cadastrados, como será resumido esses registros
|
| 79 | cadastrados pelo usuário em todas as seções do aplicativo: geralmente,
|
| 80 | tendo um ícone, um título e alguma informação adicional destacada.
|
| 81 |
|
| 82 | \section{Criação de Registros de Humor}
|
| 83 |
|
| 84 | Nesta seção, o usuário pode criar novos registros de humor, escolhendo
|
| 85 | entre uma lista de opções pré-definidas. O humor selecionado na tela
|
| 86 | anterior é mostrado aqui, e o usuário é convidado a julgar como ele se
|
| 87 | sente referente a uma escala de 1 a 10, sobre os níveis de energia,
|
| 88 | estresse e ansiedade, respectivamente.
|
| 89 |
|
| 90 | \begin{figure}[H]
|
| 91 | \centering
|
| 92 | \caption{Criação de Registros de Humor}
|
| 93 | \label{fig:screenshot-consulta-humor}
|
| 94 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-create-mood.jpeg}
|
| 95 | \source{O autor, 2026}
|
| 96 | \end{figure}
|
| 97 |
|
| 98 | Naturalmente, é uma questão dificil de responder, porém é importante
|
| 99 | que seja um momento reflexivo e tampouco, como descreve o aplicativo,
|
| 100 | não necessariamente sendo preciso.
|
| 101 |
|
| 102 | O usuário pode adicionar uma anotação sobre aquele registro em
|
| 103 | específico, que igualmente é um padrão que se repete/apresenta durante
|
| 104 | outras telas.
|
| 105 |
|
| 106 | Por fim, o usuário pode escolher "o que compõe aquele registro", que
|
| 107 | ou seja, escolher emoções e estados/sentimentos que ele sente naquele
|
| 108 | momento. Aqui uma listagem mista desses elementos é apresentado, e que
|
| 109 | cujo ele pode selecionar os que mais se aplica a ele, e julgar um nível
|
| 110 | de intensidade para cada um. Aqui a escala é menor e mais fácil, visando
|
| 111 | facilitar a escolha e julgamento do usuário, entre ``Leve'', ``Moderado'',
|
| 112 | e ``Intenso'', conforme a figura \ref{fig:screenshot-add-components}.
|
| 113 |
|
| 114 | \begin{figure}[H]
|
| 115 | \centering
|
| 116 | \caption{Adicionando sentimentos/emoções}
|
| 117 | \label{fig:screenshot-add-components}
|
| 118 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-add-components.jpeg}
|
| 119 | \source{O autor, 2026}
|
| 120 | \end{figure}
|
| 121 |
|
| 122 | Ao concluir esse processo, e salvar, é apresentado para o usuário
|
| 123 | uma tela de confirmação, onde ele pode opcionalmente vincular
|
| 124 | esse registro a um gatilho em específico, que pode ter ocorrido
|
| 125 | antes de ele salvar o registro, ou opcionalmente, criar um novo
|
| 126 | gatilho. Aqui o projeto novamente, se ancora no EMA, recheando o registro
|
| 127 | de humor com mais contexto sobre o que aconteceu.
|
| 128 |
|
| 129 | \begin{figure}[H]
|
| 130 | \centering
|
| 131 | \caption{Vinculando um humor com um gatilho}
|
| 132 | \label{fig:screenshot-link-mood-trigger}
|
| 133 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-link-mood-with-trigger.jpeg}
|
| 134 | \source{O autor, 2026}
|
| 135 | \end{figure}
|
| 136 |
|
| 137 | Posteriormente, o usuário pode delimitar o impacto que aquele gatilho
|
| 138 | pode ter exercído naquele registro de humor em especial. Aqui, é,
|
| 139 | novamente o processo de chute de impacto, nada com muita precisão.
|
| 140 |
|
| 141 | \begin{figure}[H]
|
| 142 | \centering
|
| 143 | \caption{Avaliando o impacto de um gatilho no humor}
|
| 144 | \label{fig:screenshot-assess-trigger-mood-impact}
|
| 145 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-link-mood-assess-impact.jpeg}
|
| 146 | \source{O autor, 2026}
|
| 147 | \end{figure}
|
| 148 |
|
| 149 | Por fim, vale mencionar que após esse processo, internamente, é enfileirado
|
| 150 | um \textit{background job} que processa alguns indicadores: recalcular
|
| 151 | o nível de energia daquele dia, apresentado na figura \ref{fig:screenshot-consulta-registros},
|
| 152 | recalcular o indicador de correlação entre humor e energia, e agendar
|
| 153 | o \textit{background job} que recalculará o nível de energia daquele
|
| 154 | período (os últimos sete dias), apresentado na figura \ref{fig:screenshot-consulta-registros}.
|
| 155 |
|
| 156 | \section{Indicadores}
|
| 157 |
|
| 158 | Nessa tela é apresentado os indicadores construídos a partir dos
|
| 159 | registros de humor, sono, gatilho. Além disso, embora em estado experimental,
|
| 160 | também é apresentado um ``resumo semanal'' que condensa o mais central
|
| 161 | de todos os indicadores, apresentando o nível de humor, média de sono
|
| 162 | total do período.
|
| 163 |
|
| 164 | \begin{figure}[H]
|
| 165 | \centering
|
| 166 | \caption{Tela de indicadores}
|
| 167 | \label{fig:screenshot-insights}
|
| 168 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-insights.jpeg}
|
| 169 | \source{O autor, 2026}
|
| 170 | \end{figure}
|
| 171 |
|
| 172 | \section{Histórico}
|
| 173 |
|
| 174 | Nessa tela é apresentado o histórico de registros de humor, sono, gatilho,
|
| 175 | e ações de cuidado. Como os dados são diferentes, é consultado os
|
| 176 | \textit{endpoints} respectivos de cada dado, paralelamente, e então é
|
| 177 | processado no aplicativo.
|
| 178 |
|
| 179 | \begin{figure}[H]
|
| 180 | \centering
|
| 181 | \caption{Tela de Histórico}
|
| 182 | \label{fig:screenshot-history}
|
| 183 | \includegraphics[width=0.70\textwidth,height=0.60\textheight,keepaspectratio]{screenshot-history.jpeg}
|
| 184 | \source{O autor, 2026}
|
| 185 | \end{figure}
|
| 186 |
|
| 187 | Para fazer isso, é utilizado um pequeno serviço que atua com o padrão
|
| 188 | de \textit{mappers} para transformar os dados de cada \textit{endpoint}
|
| 189 | em um formato comum, que é utilizado pelo restante da tela.
|
| 190 |
|
| 191 | \begin{lstlisting}[caption={Formato comum da tela de histórico}, label={lst:history-card}]
|
| 192 | export type HistoryCard = {
|
| 193 | id: string; // "<category>-<id>" to avoid collisions
|
| 194 | category: HistoryCategory;
|
| 195 | subtype?: CareActionSubtype; // only set when category === "care_action"
|
| 196 | timestamp: string; // ISO string — used for sorting and display
|
| 197 | title: string;
|
| 198 | summary: string;
|
| 199 | badge?: HistoryBadge;
|
| 200 | raw: MoodEntry | SleepRecord | Trigger | CareAction;
|
| 201 | };
|
| 202 | \end{lstlisting}
|
| 203 |
|
| 204 | Conforme pode-se ver no código \ref{lst:history-card}, o formato comum
|
| 205 | utilizado na tela de histórico, mapeia em essencialmente quatro propriedades
|
| 206 | do dado original, além de uma propriedade adicional para identificar a categoria.
|
| 207 |
|
| 208 | A propriedade \texttt{raw} é utilizada para armazenar o dado original,
|
| 209 | permitindo que seja recuperado posteriormente quando necessário. A
|
| 210 | propriedade \texttt{badge} é utilizada para armazenar qual dado é mostrado
|
| 211 | como um ``indicador'' mais importante para aquele dado em específico,
|
| 212 | por exemplo, que um determinado registro de sono foi ``Insuficiente'', se for
|
| 213 | menor que 7 horas, mostrar se existem vínculos com aquele registro em
|
| 214 | especial, ou mostrar qual nível de um determinado registro de humor
|
| 215 | é considerado importante prestar atenção, como ``Ansiedade alta'',
|
| 216 | ``Energia alta'', etc. O último é importante também saber, por que uma
|
| 217 | pessoa com TAB, pode estar com a energia alta e significar que ela está
|
| 218 | em um período de mania, o que é útil para se detectar alguma alteração
|
| 219 | ou mudança de ciclos.
|
| 220 |
|
| 221 | Vale notar também que o badge é similar ao \textit{badge} que aparece na
|
| 222 | tela de consulta de registros, apresentado na figura \ref{fig:screenshot-consulta-registros}.
|
| 223 |
|
| 224 | \FloatBarrier
|