## Materials and Methods
### System Architecture  
To support the interaction between AD patients/caregivers and the nutritionist, a framework based on the design of a mobile application focused on AD patients/caregivers to provide real-time data to the nutritionist was developed. The major focus was the user interface for the AD patient/caregiver. However, the system must inform the nutritionist of the discrepancies between the defined nutrients and real consumption. It will allow the adjustment of the food plan according to the effective consumption of nutrients. A detailed view of the framework is presented in Figure 1.  
Generally, the system comprises three components: a web backend, a mobile frontend, and an offline API. The backend component is a critical part of the system since it allows the management of important elements [51]. The backend allows nutritionists to determine the physiological markers of AD patients and create food plans adjusted to the needs of each individual with a focus on nutrients. The nutritionist web application focuses on appointments and the food plan. The appointment refers to managing energy expenditure and its distribution throughout macro- and micro-nutrients. To support user monitoring between appointments, it presents historical data related to previous food plans, physical conditions (weight, body fat, visceral fat, fat-free mass, muscle mass, and body mass index), and other parameters for the control and analysis of user goals (bowel function, sleep quality, race, food preferences, lifestyle, clinical conditions, and water intake) [24]. It was developed as a Progressive Web Application (PWA) in LitElement [52].  
\begin{table}
\begin{tabular}{p{14.2 pt} p{142.3 pt} p{142.3 pt}} \hline
**No.** & **Task** & **Process** \\ \hline
1 & Register the consumption of 130 mL of water outside the food plan & Grab a cup of water, fill it with the amount \\ \hline
2 & For lunch, check which food will be consumed, of the prescribed food plan from the nutritionist & Identify a meal in a list and see the food that it contains \\ \hline
3 & Exchange the food corn in the lunch for another equivalent & In the preparation of food, an ingredient is missing. It needs to be exchanged \\ \hline
4 & Remove broccoli from the meal & Lunch contains broccoli, which are not of the interest of the patient. They are to be removed \\ \hline
5 & Add lettuce to a meal & The patient loves lettuce. It must be added to the dish. \\ \hline
6 & Register the consumption of the lunch & Check the dish to identify the amount of food consumed \\ \hline
7 & Reduce the amount of food in a dish to 50\% & A prescribed food was not completely ingested \\ \hline
8 & Add an ice cream as an extra meal & The patient really wants an ice cream. Give it to him \\ \hline
9 & The food plan for the day is complete. See if all the macronutrients were ingested & Ingestion of all (or parts) of food from the meals \\ \hline
10 & Check the lunch in two days & In the prescribed food plan, see the food that composes the lunch \\ \hline \end{tabular}
\end{table}
Table 2: Task description.  
The front end (also developed as a PWA) allows AD patients/caregivers to visualize the food plan and report food consumption, providing valuable information for the nutritionist. This component offers the following functionalities: meal import, weekly visualization of a food plan, view and consume meals, exchange, add or remove food, water consumption, and statistics. All the data are integrated into a MongoDB database [53], and the communication API places requests to the server, as shown in Figure A1 of Appendix A. These can be of type _get_, _post_, or _put_, related to the variables that have to be sent by URL. General information about food is stored in the local storage, while the remainder is stored in _Redux_[54].