thesis: very rough draft of the app itself development and features
Pedro Lucas Porcellis porcellis@eletrotupi.com · 3 months ago
108aca6e9f1fb2185c61c9a73304600c51f460df Browse filesParents
204e7cfChanged files
9
Additions
+224
Deletions
0
/dev/null → monografia/chapters/development.tex
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
/dev/null → monografia/images/screenshot-add-components.jpeg
Binary file
/dev/null → monografia/images/screenshot-create-mood.jpeg
Binary file
/dev/null → monografia/images/screenshot-history.jpeg
Binary file
/dev/null → monografia/images/screenshot-initial-page.jpeg
Binary file
/dev/null → monografia/images/screenshot-insights.jpeg
Binary file
/dev/null → monografia/images/screenshot-link-mood-assess-impact.jpeg
Binary file
/dev/null → monografia/images/screenshot-link-mood-with-trigger.jpeg
Binary file
/dev/null → monografia/images/screenshot-login.jpeg
Binary file