Skip to content

Documentación TFC

Jump to bottom
alexaib edited this page Jun 12, 2023 · 20 revisions

Información del proyecto

Antecedentes

La gestión de datos para un individuo se trata de una cuestión que ha abierto muchos debates. Hay usuarios que prefieren el uso de hojas de cálculo, con la desventaja de tener que realizar grandes modificaciones sobre la estructura original cada vez que se desee cambiar cómo interactúan los datos o la propia estructura de datos. A su vez, otros tantos que escogen una gestión mediante bases de datos pensadas para usuarios finales, aún con las limitaciones que impondrá el utilizar una aplicación cerrada para conectarla con aplicaciones de terceros.

Motivación

La meta de este proyecto es satisfacer esta necesidad, dotando a los usuarios con una interfaz de usuario sencilla y extensible, basada en tecnologías web. De este modo, se conseguirá una aplicación base, sobre la que construir aplicaciones multiplataforma y fácilmente expansibles, que permita al usuario ajustarla a sus necesidades específicas, sin aumentar la complejidad más allá de lo necesario.

Objetivos

En base a los puntos anteriormente expuestos, los objetivos de este proyecto será tratar de, la mejor forma posible, tratar de solventar las dificultades que pueda encontrar un usuario, tanto inexperto como experto, a la hora de administrar los datos que requiera.

  1. Flexibilidad. La aplicación debe poder ser modificada para cumplir exactamente con las expectativas del cliente, de modo que la creación de temas deberá ser una prioridad.

  2. Simplicidad. Una vez que esté en manos del cliente, se espera que la aplicación sea lo más simple e intuitiva posible, de modo que apenas se requiera formación para obtener un alto grado de productividad.

  3. Estabilidad. Basándose en tecnologías altamente probadas, la aplicación no deberá presentar ningún fallo u otro tipo de error que pueda poner en riesgo el trabajo del cliente.

  4. Portabilidad. Se espera que la aplicación pueda ser fácilmente distribuida tanto a plataformas móviles como a plataformas de escritorio, con las menores modificaciones posibles al código. Al tener una única base de código, se propiciarán los tres objetivos listados anteriormente.

Desarrollo de la práctica

Material y especificaciones

Con estos objetivos en cuenta, se propone el uso de la tecnología Electron. Electron permite embeber una aplicación web en un binario nativo de Chromium, logrando desarrollar con tecnologías web aplicaciones de escritorio.

De este modo, se conseguirá hacer una base de código uniforme para todas las plataformas, en JavaScript (o TypeScript), y de forma similar, una forma estándar de crear interfaces de usuario, provista con HTML y hojas de estilo CSS.

Electron se basa en una aplicación multiproceso, fomentando el patrón de desarrollo MVC, descrita por dos procesos principales:

  • Main, basado en el framework node.js, actuará como el backend de la aplicación (ej: Escritura en sistema de archivos, consultas a la BD). Por este motivo, se trata del proceso más vulnerable, y por ello debe ser protegido del código que ejecuta renderer. Se detallará más adelante como interactuan estos procesos.

  • Renderer, similar a un script de una página web. Permitirá dotar de dinamismo a la página web, con animaciones, interacciones en tiempo real con el usuario, entre otras características.

Al igual, Electron permite una fácil exportación a sistemas operativos de escritorio. En el caso de plataformas móviles, no existe un soporte directo. Aún así, el proyecto Capacitor permite generar paquetes APK y nativos a iOS, de modo que no existiría ningún impedimento.

Para almacenar datos, inicialmente se plantea la utilización de la base de datos SQLite, dado su alto nivel de portabilidad y eficiencia.

Como no se espera tratar una cantidad masiva de datos, ni será necesaria la implementación de concurrencia o acceso por parte de usuarios externos, se ha descartado la utilización de bases de datos en servidor (como PostreSQL, MangoDB u otras relacionales/no-SQL que deban administrarse como servicio).

El framework seleccionado para realizar la interfaz gráfica será next.js, basado en React, una librería que destaca por su simplicidad y amplio soporte en la comunidad. Soportado por la plataforma Vercel, permite crear interfaces gráficas basadas en tecnologías web rápidamente.

React se basa en un sistema de estados. Un cambio en un estado genera una petición de renderizado en el componente en el que se creó dicho estado, y en todos sus hijos.

Al igual, React se basa en un paradigma de programación distinto a la programación imperativa (como la que encontraríamos en Java); la programación declarativa. En esta modalidad, el desarrollador no indica CÓMO se realiza una acción, sino QUÉ acción sucederá. La implementación la realizará el toolkit, o en su defecto el programador, pero de forma separada al fichero de definición de la interfaz gráfica (TSX).

TSX es un formato que mezcla TypeScript con XML, y permite generar interfaces gráficas con una estructura muy similar a HTML.

next.js es una libraría que envuelve React, y permite simplificar, entre otras cosas, el enrutamiento de las páginas en el servidor o proceso main (mediante un sistema virtual de páginas web, a las que se puede acceder con la ruta /mipagina), sin tener que cambiar físicamente la URL del navegador.

A su vez, se empleará MaterialUI, librería gráfica para React basada en las especificaciones Material Design de Google. Aportará widgets y componentes complejos que se podrán usar en la aplicación, a parte de un estilo minimalista y adaptativo a cualquier pantalla.

Un ejemplo de React: Un dialogo modal de bienvenida (componente), y si es visible o no (estado). Un cambio en el estado visible dispararía un redibujado del componente, de modo que sea visible o invisible.

Como base para la aplicación, se utilizará el proyecto de código abierto nextron, que permite embeber una aplicación basada en next.js dentro de un entorno Electron.

Enlaces relevantes:

Electron: https://www.electronjs.org/

Capacitor: https://github.com/capacitor-community/electron

SQLite: https://sqlite.org/index.html

next.js: https://nextjs.org/

Nextron: https://github.com/saltyshiomix/nextron

MaterialUI: https://mui.com/

Planificación

La gestión del proyecto se realizará desde la plataforma GitHub. Igualmente, el progreso realizado será registrado en un tablero Kanban, con todas las propuestas y elementos en los que se esté trabajando actualmente. El sistema de control de versiones será Git. Cada nueva release será un cambio sustancial al proyecto. Las versiones de pre-lanzamiento (0.X) serán incrementales, y no se espera que sean completamente funcionales ni libres de errores.

Las versiones post-lanzamiento serán únicamente mejoras a las características ya existentes en el proyecto. No se permitirán cambios que requieran refactorizaciones u otro tipo de cambios de gran envergadura una vez sea lanzada la primera versión estable (1.0).

La idea tras estas políticas de desarrollo es poder distinguir fácilmente para tanto miembros del equipo, como a los tutores el progreso del proyecto, al igual que permitir independencia a los miembros del equipo a la hora de trabajar.

Descripción del trabajo realizado

Preparación de entorno

Los pasos seguidos para la preparación del entorno de trabajo del proyecto han sido los siguientes:

Como IDE principal, se ha escogido Microsoft Visual Studio Code. Flexible, buen soporte para desarrollo web, y con un amplio soporte de extensiones, será el IDE más recomendado para poder trabajar sin problemas.

Para desarrollo web, se ha introducido Visual Studio dentro de un contenedor para desarrollo, con todas sus dependencias necesarias (node.js, Chromium...). De este modo, se garantiza la compatibilidad y portabilidad del entorno de trabajo, y se evitarán futuros imprevistos.

Para lograrlo, se ha utilizado la herramienta Toolbox, basada en Podman, gestor de contenedores alternativo a Docker, con la particularidad de no requerir ningún daemon/engine para poder iniciar contenedores basados en sistemas operativos Red Hat Linux (Fedora y Red Hat Enterprise). La principal ventaja es la transparente integración con el host (exposición del sistema de archivos del host, creación de ventanas), y utilizar el directorio personal del usuario como volumen de almacenamiento persistente.

La imagen del sistema que ejecuta el contenedor es Fedora 38, la última versión en la fecha de realización del proyecto de Fedora Linux. La lista del software instalado dentro del contenedor es la siguiente:

# $ dnf history userinstalled
# Packages installed by user
bash-5.2.15-3.fc38.x86_64
bash-completion-1:2.11-9.fc38.noarch
bc-1.07.1-17.fc38.x86_64
bzip2-1.0.8-13.fc38.x86_64
chromium-112.0.5615.121-2.fc38.x86_64
code-1.77.3-1681292829.el7.x86_64
coreutils-9.1-11.fc38.x86_64
diffutils-3.9-1.fc38.x86_64
dnf-4.15.0-1.fc38.noarch
dnf-plugins-core-4.4.0-1.fc38.noarch
fedora-release-container-38-34.noarch
fedora-repos-modular-38-1.noarch
flatpak-spawn-1.0.5-3.fc38.x86_64
fpaste-0.4.3.0-2.fc38.noarch
git-2.40.1-1.fc38.x86_64
glibc-all-langpacks-2.37-1.fc38.x86_64
gnupg2-smime-2.4.0-3.fc38.x86_64
gvfs-client-1.50.4-1.fc38.x86_64
hostname-3.23-8.fc38.x86_64
iproute-6.1.0-1.fc38.x86_64
iputils-20221126-2.fc38.x86_64
keyutils-1.6.1-6.fc38.x86_64
less-608-2.fc38.x86_64
lsof-4.96.3-3.fc38.x86_64
man-db-2.11.2-2.fc38.x86_64
man-pages-6.04-1.fc38.noarch
mesa-dri-drivers-23.0.3-1.fc38.x86_64
mesa-vulkan-drivers-23.0.3-1.fc38.x86_64
mtr-2:0.95-5.fc38.x86_64
nano-default-editor-7.2-2.fc38.noarch
nodejs20-full-i18n-1:19.8.1-7.fc38.x86_64
nss-mdns-0.15.1-8.fc38.x86_64
openssh-clients-9.0p1-15.fc38.x86_64
passwd-0.80-14.fc38.x86_64
pigz-2.7-3.fc38.x86_64
procps-ng-3.3.17-9.fc38.x86_64
rootfiles-8.1-33.fc38.noarch
rpm-4.18.1-1.fc38.x86_64
rsync-3.2.7-2.fc38.x86_64
sudo-1.9.13-1.p2.fc38.x86_64
tar-2:1.34-8.fc38.x86_64
tcpdump-14:4.99.4-1.fc38.x86_64
time-1.9-20.fc38.x86_64
traceroute-3:2.1.2-1.fc38.x86_64
tree-2.1.0-2.fc38.x86_64
unzip-6.0-60.fc38.x86_64
util-linux-2.38.1-4.fc38.x86_64
util-linux-core-2.38.1-4.fc38.x86_64
vim-minimal-2:9.0.1486-1.fc38.x86_64
vte-profile-0.72.1-1.fc38.x86_64
wget-1.21.3-5.fc38.x86_64
which-2.21-39.fc38.x86_64
whois-5.5.16-1.fc38.x86_64
words-3.0-41.fc38.noarch
xorg-x11-xauth-1:1.1.2-3.fc38.x86_64
xz-5.4.1-1.fc38.x86_64
yum-4.15.0-1.fc38.noarch
zip-3.0-36.fc38.x86_64
zsh-5.9-5.fc38.x86_64

Si bien es cierto que no será requerido por todos los miembros del equipo, será necesario de cara a la presentación final del proyecto, para garantizar la inexistencia de fallos por culpa del entorno.

Configuración de npm. (Gestor de paquetes de node.js, el entorno de ejecución en el que se ejecutará la aplicación Electron. Deberá ser utilizado para poder gestionar las dependencias del proyecto)

  • Para crear el proyecto con una base utilizando el tema visual Material UI, de Google, se ejecuta el siguiente comando dentro del contenedor de desarrollo web:

npx create-nextron-app dataManager --example with-material-ui

  • Una vez dentro del directorio del proyecto, se podrá ejecutar la aplicación en modo desarrollador para asegurar que todas las dependencias han sido correctamente instaladas con el siguiente comando:

npm run dev

De este modo, el entorno de desarrollo estará listo, y los miembros del equipo podrán trabajar con el mismo entorno en cualquier dispositivo.

El proyecto contendrá los siguientes paquetes:

# my-nextron-app@1.0.0 /home/alexaib/Projects/Electron/dataManager
├── @emotion/cache@11.10.8
├── @emotion/react@11.10.8
├── @emotion/server@11.10.0
├── @emotion/styled@11.10.8
├── @mui/material@5.12.2
├── @types/node@18.16.3
├── @types/react@18.2.0
├── electron-builder@23.6.0
├── electron-serve@1.1.0
├── electron-store@8.1.0
├── electron@21.4.4
├── next@12.3.4
├── nextron@8.5.0
├── react-dom@18.2.0
├── react@18.2.0
└── typescript@4.9.5

Descripción técnica de la aplicación

En esta sección, se expondrá una visión técnica del funcionamiento de cada componente de la aplicación, con el objetivo de ilustrar a grandes rasgos como interactúan los distintos procesos durante el ciclo de vida de la misma.

La aplicación se divide en los siguientes directorios:

  • app: Contiene una compilación a javascript y HTML de los ficheros del proyecto; se genera en base al código fuente de la aplicación. Es ignorada por el sistema de control de versiones.

  • db: Contiene una definición de las tablas que usará la aplicación final (es decir, las tablas exclusivas de la aplicación, no del sistema). Contiene dos subdirectorios, data y tables, para indicar los scripts de inicialización de datos y los scripts de definición de las tablas de la BD, respectivamente.

  • main: Contiene el código fuente del backend de la aplicación, es decir, del proceso main de Electron. Entre otras funciones, se encarga realizar las operaciones que interactuen con el sistema de ficheros del sistema, como la creación de la BD, consulta y modificación de registros, entre otros. Al igual, se encarga de generar la ventana de la aplicación. El lenguaje empleado es TypeScript.

  • renderer: Contiene el código fuente del frontend de la aplicación, del proceso renderer. Contiene las páginas web de la aplicación (en el subdirectorio pages), así como los componentes reutilizables entre las mismas (components), librerías (lib), recursos exclusivos de las páginas (public) y los estilos globales que sobrescriben a la librería gráfica (styles).

  • resources: Contiene recursos adicionales para la aplicación, como archivos de iconos, imágenes, archivos de configuración, plantillas HTML, etc. Estos recursos se utilizan durante la ejecución de la aplicación y se pueden acceder desde el código del proceso principal o desde el proceso de renderizado de la página web.

node_modules: Se crea automáticamente cuando se instalan las dependencias del proyecto a través de herramientas de gestión de paquetes como npm (Node Package Manager) o Yarn. Contiene todas las dependencias de la aplicación, incluyendo React, Next.js, Material UI y cualquier otro paquete de terceros utilizados en el proyecto.

dist: Contiene los archivos generados después de compilar y empaquetar la aplicación para su distribución. Aquí se encuentran los archivos ejecutables de la aplicación, junto con otros recursos necesarios para su ejecución, como archivos de configuración o recursos adicionales. Este directorio no se incluye en el control de versiones y se genera como parte del proceso de construcción o empaquetado de la aplicación.

Centrandose en la funcionalidad que aporta cada fichero, se encontraría lo siguiente:

Proceso MAIN

Su fichero principal es background.ts. Se ejecuta en segundo plano, y tal y como se describió anteriormente, es el fichero principal del proceso main. Contiene una serie de escuchadores, los cuáles ejecutarán una función lambda ante un cambio en la aplicación. A este cambio se le conoce como señal, y es la forma principal que tienen main y renderer de comunicarse.

Las señales se mandan a través de un sistema, conocido como IPC (InterProcess Communication). De este modo, tanto main como renderer pueden intercambiar información.

Es importante resaltar que son métodos asíncronos, dado que son procesos distintos y no pueden bloquearse el uno al otro. Las señales que manda y escucha el proceso renderer las realiza mediante su ipcRenderer, y el main, mediante su ipcMain.

De este modo, se puede especificar una función que se ejecute tras la respuesta del ipc del proceso contrario.

A continuación, se detallará en profundidad background.ts:

Importa los módulos app e ipcMain de Electron, así como las funciones createWindow y dbManager del archivo helpers. También importa el módulo serve de electron-serve.

isProd: Es una variable booleana que indica si la aplicación se ejecuta en modo de producción (true) o en modo de desarrollo (false), basado en la variable de entorno NODE_ENV.

closeApp: Es una función que cierra la base de datos (dbManager.closeDb()) y sale de la aplicación (app.quit()).

Serve: Si la aplicación se está ejecutando en modo de producción, utiliza el módulo serve para servir los archivos estáticos en el directorio app. Permite optimizar el acceso a las páginas en el modo de producción, ya que no deberán ser compiladas dinámicamente, como sucede en modo desarrollador.

app.setPath: Si la aplicación se está ejecutando en modo de desarrollo, establece la ruta del directorio de datos de usuario (userData) agregando el texto "(development)" al final. Esto ayuda a distinguir entre el entorno de desarrollo y el de producción, y a determinar la visibilidad de elementos como la consola de desarrollo.

createWindow: Crea una nueva ventana de Electron con la configuración proporcionada (ancho: 1000, alto: 600) y almacena la referencia en la variable mainWindow.

mainWindow.loadURL: Carga la URL de la aplicación en la ventana principal. En modo de producción, carga app://./home.html, mientras que en modo de desarrollo carga http://localhost:${port}/home. También muestra las herramientas de desarrollo de Electron si está en modo de desarrollo (mainWindow.webContents.openDevTools()).

app.whenReady().then(): Una vez que Electron está listo, inicializa la base de datos (dbManager.initDb()) y muestra un mensaje en la consola si la conexión a la base de datos fue exitosa.

ipcMain.on: Define diferentes escuchadores de eventos (ipcMain.on) para manejar la comunicación entre el proceso principal y los procesos de representación de Electron. Estos eventos están relacionados con operaciones en la base de datos, como autenticación de usuarios, consultas de tablas y registros, inserción y actualización de registros, entre otros.

app.on('window-all-closed', closeApp): Cuando todas las ventanas de la aplicación se cierran, llama a la función closeApp para cerrar la base de datos y salir de la aplicación.

Igualmente, se cuenta con una serie de scripts de ayuda (helpers) que permiten simplificar el proceso principal:

  • create-window.ts. Crea y configura una ventana de navegador en Electron. Utiliza la biblioteca electron-store para almacenar y restaurar el estado de la ventana, incluyendo su posición y tamaño. También se encarga de garantizar que la ventana sea visible en al menos uno de los monitores disponibles. Además, configura las opciones de la ventana, como las preferencias de web, el tamaño mínimo y la altura mínima, y elimina el menú de la aplicación.

  • db-manager.ts proporciona una capa de abstracción para facilitar la gestión de la base de datos. Permite almacenar y consultar datos, así como ejecutar scripts SQL y realizar operaciones CRUD en tablas específicas. La función executeSQLDir ejecuta scripts SQL en un directorio especificado, initSystemStruct inicializa las tablas del sistema, initAppStruct inicializa las tablas de la aplicación, y initAppData inicializa los datos de la aplicación. También incluye funciones para obtener la lista de tablas, obtener información de columnas, obtener registros, obtener información de claves externas, insertar registros, y actualizar registros en la base de datos.

  • index.ts exporta a los dos módulos citados anteriormente a background.ts.

Proceso RENDERER

Como se explico anteriormente, es el proceso encargado de realizar todos el trabajo relacionado con las páginas web.

El código fuente de este proceso contiene tanto páginas como componentes. Las páginas son accesibles y se pueden establecer como el contenido de una ventana, mientras que un componente está orientado a ser reutilizable y a ser contenido dentro de una o varias páginas.

Se encuentran las siguientes páginas y componentes:

Página Home

Se define en home.tsx. La página principal representa la pantalla inicial de la aplicación. Los usuarios son recibidos y se les brinda la opción de iniciar sesión. Si la base de datos está vacía, se les pedirá a los usuarios que inicialicen la base de datos proporcionando un nombre de usuario y una contraseña.

La página principal está compuesta por los siguientes componentes y características principales:

El componente Root representa el contenedor principal de la página y se aplica un estilo centrado, para captar más fácilmente la atención del usuario.

El componente LoginDialog es un diálogo emergente que se muestra cuando el usuario hace clic en el botón de inicio de sesión. Permite al usuario ingresar su nombre de usuario y contraseña. Al enviar el formulario, se envía un mensaje al proceso principal a través de ipcRenderer para autenticar al usuario. Si la autenticación es exitosa, se redirige al usuario a la página de resumen (/overview), de lo contrario, se muestra una notificación de error.

El componente InitDialog es otro diálogo emergente que se muestra si la base de datos está vacía. Pide al usuario que inicialice la base de datos proporcionando un nombre de usuario y una contraseña.

El componente Head se utiliza para establecer el título de la ventana en la etiqueta

.

Se muestra el nombre de la aplicación y un subtítulo utilizando el componente Typography, así como el logotipo de la aplicación dentro de un contenedor Box con estilos específicos.

En la parte inferior de la página, se encuentra un enlace que redirige a los usuarios a la página "Acerca de" de la aplicación. Al hacer clic en el enlace, se abre el enlace externo en el navegador predeterminado del usuario. Por último, se muestra un botón de inicio de sesión que abre el diálogo LoginDialog al hacer clic en él.

Tal y como se había descrito durante la introducción, React se basa en componentes y en aportarles estados para dotarles de funcionalidad. La pantalla Home cuenta con los siguientes estados para los componentes anteriormente descritos:

loginDialogOpen: Este estado se utiliza para controlar si el diálogo de inicio de sesión está abierto o cerrado. Se inicializa con el valor false utilizando el hook useState, y luego se actualiza mediante la función setLoginDialogOpen cuando se hace clic en el botón de inicio de sesión.

username y password: Estos estados se utilizan para almacenar los valores ingresados por el usuario en los campos de nombre de usuario y contraseña en el diálogo de inicio de sesión. Se inicializan con el valor 'none' utilizando el hook useState, y luego se actualizan mediante las funciones setUsername y setPassword respectivamente, cuando el usuario ingresa valores en los campos correspondientes.

snackbarOpen: Este estado se utiliza para controlar si la notificación de error está abierta o cerrada. Se inicializa con el valor false utilizando el hook useState, y luego se actualiza mediante la función setSnackbarOpen cuando se recibe una respuesta del proceso principal después de intentar autenticar al usuario.

Por último, la única función que contiene la pantalla:

handleLogin: Esta función se ejecuta cuando el usuario hace clic en el botón de inicio de sesión. Envía un mensaje al proceso principal a través de ipcRenderer para autenticar al usuario utilizando el nombre de usuario y la contraseña almacenados en los estados username y password. Luego, cuando se recibe una respuesta del proceso principal, si la autenticación es exitosa, se redirige al usuario a la página de resumen (/overview), de lo contrario, se establece el estado snackbarOpen en true para mostrar la notificación de error.

Página Overview

Se define en overview.tsx. Muestra una vista general de los datos.

AppStrings: Este objeto se importa desde el archivo '../lib/strings' y contiene cadenas de texto utilizadas en la página. Estas cadenas pueden incluir títulos, etiquetas o cualquier otro texto que se muestre en la página.

Head: Este componente se importa desde 'next/head' y se utiliza para gestionar los elementos

del documento HTML generado para esta página. En este caso, se establece el título de la página utilizando el valor de AppStrings.overviewTitle. También se agrega un enlace a una hoja de estilos externa para cargar los iconos de Material-UI desde Google Fonts.

ResponsiveAppBar: Este componente se importa desde '../components/ResponsiveAppBar' y representa la barra de navegación responsive de la aplicación. Proporciona una barra de navegación con opciones para navegar entre las diferentes secciones de la aplicación.

Root: Este es un componente estilizado utilizando la función styled de Material-UI (@mui/material). Se utiliza para envolver el contenido principal de la página y aplicar estilos específicos. En este caso, se centra el contenido y se agrega un relleno utilizando el tema (theme) proporcionado por Material-UI.

TabContainer: Este componente se importa desde '../components/TabContainer' y representa el contenedor de pestañas en la página de resumen. Proporciona una interfaz de pestañas para mostrar diferentes secciones o vistas de la aplicación.

La página de la overview no cuenta con ningún estado, dado que ser'an sus componentes quienes aportarán la funcionalidad en sí a la propia página.

Componente InfoSnackbar

Utiliza los componentes Snackbar, Alert y AlertTitle de Material-UI para renderizar la notificación. Cuando openState es true, el Snackbar se muestra durante un período de tiempo determinado (autoHideDuration de 3000 ms) y luego se cierra automáticamente. También se puede cerrar manualmente haciendo clic en el botón de cierre en la esquina superior derecha del Snackbar. El estado openState y la función setOpenState se utilizan para controlar la apertura y cierre del Snackbar.

Componente InitDialog

Emplea el hook useEffect para enviar una solicitud al proceso principal (ipcRenderer) para obtener los registros de usuario de la base de datos. Si no se encuentran registros de usuario, se establece el estado initDialogOpen en true para abrir el diálogo de inicialización.

useEffect cobra mucha importancia a lo largo de la aplicación, como se verá posteriormente, dado que nos permite indicar a React que no debe volver a ejecutar el código que contiene en caso de que deba volver a renderizar el contenido de ese componente. En este caso, por ejemplo, no se desearía enviar una solicitud a la base de datos para que compruebe si existe un usuario cada vez que cambie la visibilidad del dialogo. Para evitarlo, se contiene todo el código relacionado con esa query dentro del hook.

Dentro del diálogo, se muestra un título, un texto descriptivo y los campos de entrada requeridos. Para cada campo, se utiliza un componente TextField de Material-UI. Se utiliza un mapeo del array fields para generar dinámicamente los campos de texto. Cada campo tiene un estado de error asociado (error) que se establece en true si el campo está vacío. Cuando se realiza un cambio en los campos, se ejecuta la función validateContent que valida y actualiza el estado de error y la validación correspondiente en el objeto validations. Además, se actualiza el estado cleared para habilitar o deshabilitar el botón de continuación.

Cuando se hace clic en el botón de continuación (handleInit), se envía una solicitud al proceso principal para crear un nuevo usuario en la base de datos. Si la creación del usuario es exitosa, se cierra el diálogo de inicialización estableciendo initDialogOpen en false. En caso de error, se puede agregar una lógica para mostrar un mensaje de error al usuario.

Componente Link

Es un componente relativamente simple. Proporciona opciones de personalización (naked, en caso de que no se quiera aplicar el estilo de Material UI), y permite redirigir al usuario a otra página empleando el sistema de enrutamiento de next.js (useRouter).

Componente RegistryPreview

Se encarga de obtener y mostrar una vista previa de un registro específico de una tabla en la base de datos.

El componente utiliza el hook useEffect explicado anteriormente para enviar una solicitud a través del ipcRenderer para obtener el registro correspondiente a partir de un valor de clave externa (fkval). La solicitud se realiza utilizando los mensajes mesg-db-get-fk-table y mesg-db-get-registry para obtener información relacionada de la base de datos.

Una vez que se recibe la respuesta del servidor de la base de datos a través de ipcRenderer, el registro se almacena en el estado local del componente utilizando el hook useState y la función setRegistry. El estado del registro se actualiza cuando cambian las dependencias fk, fkval y originTab.

El componente renderiza un contenedor PreviewContainer que muestra el registro obtenido. Utiliza un bucle map en Object.keys(registry) para iterar sobre las claves del registro y mostrar cada clave y su valor correspondiente en un componente Box.

En resumen, este componente se encarga de obtener y mostrar una vista previa de un registro específico de la base de datos. Mejora la navegación y la experiencia del usuario al proporcionar información relevante de un registro relacionado.

Componente ResponsiveAppBar

Este componente se basa en un ejemplo público de MUI y tiene varias características y funcionalidades.

La barra de navegación consiste en una AppBar de MUI que se adhiere en la parte superior de la pantalla. Contiene un logotipo de la aplicación, un menú desplegable para opciones de configuración de la aplicación y un menú desplegable para opciones de usuario.

El componente utiliza los hooks de estado useState para controlar el estado de los elementos desplegables (anchorElNav, anchorElUser) y el estado del diálogo de creación de usuario (usrDialogOpen).

El componente también define dos funciones internas: parseNavActionMenu y parseUserActionMenu. Estas funciones se encargan de manejar las acciones del menú desplegable de navegación y del menú desplegable de usuario respectivamente. Dependiendo de la acción seleccionada, se realiza una tarea específica, como abrir un diálogo de creación de usuario o navegar a una página diferente.

El componente contiene el diálogo UserCreationDialog que se abre cuando se selecciona la opción "Create DB user" en el menú de navegación. Este diálogo muestra campos de texto para ingresar un correo electrónico y una contraseña, y utiliza ipcRenderer para enviar una solicitud a través de mesg-db-create-user y manejar la respuesta a través de reply-db-create-user. Si la operación tiene éxito, el diálogo se cierra, de lo contrario, se muestra un mensaje de error (a implementar).

El componente renderiza los elementos de la barra de navegación, incluyendo el logotipo de la aplicación, los elementos de configuración de la aplicación, y el avatar de usuario (no se puede cambiar, dado que no llegó a ser implementado el almacenamiento de imágenes).

Componente TabContainer

Se trata de uno de los componentes más importantes de toda la aplicación, ya que permite mostrar y manipular datos de una base de datos en forma de tablas. Es el que se utiliza como hijo en la página de Overview. El componente consta de varios subcomponentes, como TabsSelector, DataDisplay, DataControlButtons, AdditionDialog y DeletionDialog.

El estado del componente TabContainer incluye las siguientes variables: tabValue, que representa el índice de la pestaña activa; tabs, que almacena las tablas de la base de datos; tabFields, que contiene los campos de la tabla seleccionada; y rows, que guarda las filas de la tabla seleccionada.

El componente TabsSelector renderiza las pestañas basadas en el estado tabs. Cada pestaña representa una tabla de la base de datos y se activa al hacer clic en ella. Al cambiar la pestaña, se actualiza el estado tabValue y se dispara la actualización de los campos y las filas correspondientes.

El componente DataDisplay muestra las filas y columnas de la tabla seleccionada utilizando el componente DataGrid de Material-UI. La configuración de las columnas se basa en el estado tabFields. Además, el componente permite editar los valores de las celdas y realizar actualizaciones en la base de datos a través de las solicitudes enviadas al servidor.

El componente DataControlButtons muestra los botones de agregar y eliminar. Al hacer clic en el botón "Agregar", se abre el diálogo AdditionDialog, que muestra los campos de la tabla seleccionada y permite ingresar nuevos valores para agregar una fila a la base de datos. Al hacer clic en el botón "Eliminar", se muestra el diálogo DeletionDialog, que solicita la confirmación para eliminar las filas seleccionadas.

Costes de desarrollo

La aplicación está siendo desarrollada para poder ser adaptada a las necesidades de un cliente cualquiera, de modo que con apenas aplicar un tema nuevo y extender clases/funciones existentes pueda ajustarse a los requerimientos de un nuevo usuario.

Es decir, el proyecto busca crear una base unificada y "abstracta" para una familia de futuras aplicaciones, pudiendo actualizar la base y las aplicaciones derivadas en cascada, en caso de solución de errores, o actualizar aplicaciones específicas en caso de un nuevo requerimiento por parte de un cliente.

Dicho esto, es difícil estimar los costes que deberían ser cargados a un cliente en específico. La base tendrá un coste en forma de suscripción por versiones, aún por definir, y las modificaciones realizadas específicamente para cada cliente serán evaluadas individualmente.

Dado que tanto las dependencias del software como las herramientas que serán necesarias para trabajar en el proyecto no están restringidas por licencias de pago, el coste inicial para trabajar en el proyecto será cero. Asimismo, dado que el software se ejecutará de forma local y no requerirá ningún servidor, no se estima ningún coste de mantenimiento a corto, medio y largo plazo.

Para el desarrollo y las pruebas de este proyecto, hemos utilizado Docker y Apache Guacamole como parte de nuestras herramientas y tecnologías. A continuación, se presenta una descripción de su uso:

Docker: Hemos utilizado Docker para facilitar el proceso de desarrollo, pruebas y despliegue de la aplicación. Docker es una plataforma de contenedores que nos permite empaquetar la aplicación y sus dependencias en un entorno aislado y portátil. Esto nos brinda la flexibilidad de ejecutar la aplicación de manera consistente en diferentes entornos, lo que simplifica la configuración y evita problemas de compatibilidad. Al utilizar Docker, hemos creado imágenes de contenedor que incluyen todas las dependencias necesarias para ejecutar la aplicación de manera confiable. Esto nos permite crear un entorno de desarrollo coherente para todo el equipo y garantiza que cada miembro tenga acceso a la misma configuración del entorno.

Además, Docker nos ha permitido realizar pruebas fácilmente en diferentes configuraciones y versiones del sistema operativo, lo que nos ayuda a garantizar que la aplicación sea compatible con diferentes entornos de implementación.

Resultados y validación

Para el desarrollo del proyecto, se desea seguir una metodología de trabajo similar a Scrum. Esto significa que constantemente habrá una validación del trabajo realizado en cada sprint/milestone con respecto a lo planteado en la descripción de la misma. De este modo, se garantizará que todas las propuestas sean realistas, y no corran riesgo de posponerse de forma indefinida ni de dejar al proyecto en un estado de "Development Hell".

Dado que la aplicación está pensada para ser expansible, se deberá asegurar que el proyecto puede servir como una base fiable y robusta.

Gracias al tipado estático que provee TypeScript con las extensiones de linting, se pueden encontrar y evitar muchos errores relacionados con tipos de datos que de otro modo serían únicamente identificables en tiempo de ejecución en JavaScript.

Al usar un framework declarativo basado en React como Next.js, se minimiza la posibilidad de errores, dado que gran parte del desarrollo de la interfaz se ha delegado a dicha librería.

Para probar la correcta funcionalidad de todos los métodos back-end de la aplicación, como la escritura y lectura de datos y de preferencias de usuario, se contempla la posibilidad de emplear el framework de unit testing provisto nativamente por Electron.

Por último, para asegurar el rendimiento correcto de la aplicación, se hará uso de las herramientas de depuración incluidas en la rutina de Chromium embebida dentro de Electron, de modo que se pueda investigar problemas en la ejecución del programa, tales como tiempos de carga y renderizado en distintos dispositivos, entre otros.

Ejemplo: Ventana de depuración de tiempos de ejecución en Chromium image

Los resultados de las pruebas serán adjuntos en la entrega final del proyecto.

Descripción del entorno de pruebas de la aplicación

Archivo docker-compose.yml

El archivo docker-compose.yml es un archivo de configuración utilizado por Docker Compose para definir y administrar servicios y redes de contenedores. En este caso, el archivo contiene la configuración para implementar un entorno de Guacamole, un cliente de escritorio remoto basado en web.

Versión

La versión de Docker Compose especificada en este archivo es 3.8.

Redes

La sección networks define la red utilizada por los servicios.

  • data_network: Define una red de tipo bridge llamada data_network que se utilizará para conectar los contenedores de los servicios.

Servicios

La sección services define los servicios y sus configuraciones.

Servicio 'guacd'

El servicio guacd utiliza la imagen guacamole/guacd, que proporciona el demonio de Guacamole. Este servicio permite la comunicación entre el cliente de Guacamole y los servidores de escritorio remoto.

  • container_name: Especifica el nombre del contenedor como "guacd".
  • image: Especifica la imagen utilizada para el contenedor.
  • networks: Asigna el servicio a la red data_network.
  • ports: Mapea el puerto 4822 del host al puerto 4822 del contenedor.
  • restart: Configura el servicio para reiniciarse automáticamente.
  • volumes: Monta los directorios locales ./drive y ./record dentro del contenedor.

Servicio 'postgres'

El servicio postgres utiliza la imagen postgres para ejecutar una base de datos PostgreSQL.

  • container_name: Especifica el nombre del contenedor como "postgres".
  • image: Especifica la imagen utilizada para el contenedor.
  • networks: Asigna el servicio a la red data_network.
  • restart: Configura el servicio para reiniciarse automáticamente.
  • environment: Establece variables de entorno para configurar la base de datos PostgreSQL, incluyendo el nombre de usuario, contraseña y base de datos.
  • volumes: Monta los directorios locales ./init y ./data dentro del contenedor.

Servicio 'guacamole'

El servicio guacamole utiliza la imagen guacamole/guacamole, que proporciona la interfaz web de Guacamole.

  • container_name: Especifica el nombre del contenedor como "guacamole".
  • image: Especifica la imagen utilizada para el contenedor.
  • networks: Asigna el servicio a la red data_network.
  • restart: Configura el servicio para reiniciarse automáticamente.
  • ports: Mapea el puerto 8080 del host al puerto 8080 del contenedor.
  • links: Establece una relación de dependencia con el servicio guacd.
  • environment: Establece variables de entorno para configurar la conexión con el servicio guacd y la base de datos PostgreSQL.
  • depends_on: Establece una dependencia con los servicios guacd y postgres.

Servicio 'nginx' (opcional)

El servicio nginx utiliza la imagen nginx para configurar un servidor web Nginx como proxy inverso para Guacamole.

  • container_name: Especifica el nombre del contenedor como "nginx_guacamole".

restart: Configura el servicio para reiniciarse automáticamente.

  • image: Especifica la imagen utilizada para el contenedor.
  • volumes: Monta los directorios locales ./nginx/templates, ./nginx/ssl/self.cert y ./nginx/ssl/self-ssl.key dentro del contenedor.
  • ports: Mapea los puertos 443 y 80 del host al contenedor.
  • links: Establece una relación de dependencia con el servicio guacamole.
  • networks: Asigna el servicio a la red data_network.

Servicio 'debianVNC'

El servicio debianVNC utiliza la imagen alexaib/debian-vnc para ejecutar un contenedor con un servidor VNC basado en Debian.

  • container_name: Especifica el nombre del contenedor como "debianVNC".
  • image: Especifica la imagen utilizada para el contenedor.
  • networks: Asigna el servicio a la red data_network.
  • environment: Establece variables de entorno para configurar el servidor VNC.
  • command: Especifica el comando que se ejecutará en el contenedor.
  • ports: Mapea el puerto 5901 del host al puerto 5901 del contenedor.
  • restart: Configura el servicio para reiniciarse automáticamente.
  • volumes: Monta los directorios locales ./drive y ./record dentro del contenedor.

Apache Guacamole

Hemos utilizado Apache Guacamole como una solución de acceso remoto para facilitar el desarrollo y las pruebas de la aplicación. Apache Guacamole es un cliente de escritorio remoto basado en web que nos permite acceder a las aplicaciones y recursos del proyecto de forma remota a través de un navegador web.

Al utilizar Guacamole, hemos podido acceder de manera segura a las instancias de contenedor de Docker donde se ejecuta la aplicación. Esto nos ha brindado la capacidad de realizar pruebas exhaustivas, depurar problemas y garantizar un acceso fácil y seguro a la aplicación para todo el equipo de desarrollo.

Para implementar Apache Guacamole lo cual implica la implementación y configuración de esta herramienta de acceso remoto de código abierto en un entorno de red. Apache Guacamole se utiliza para permitir a los usuarios acceder de forma segura a escritorios y aplicaciones remotas a través de un navegador web estándar, sin necesidad de instalar software adicional en sus dispositivos.

El despliegue de Apache Guacamole implica varios pasos. En primer lugar, se requiere un servidor donde se ejecutará la aplicación. Este servidor debe tener los requisitos de hardware y software adecuados para soportar el tráfico y la carga de trabajo esperada. Luego, se instala y configura el servidor de Guacamole, siguiendo las instrucciones proporcionadas en la documentación oficial.

Después de la configuración del servidor, se procede a configurar los recursos remotos a los que los usuarios podrán acceder. Esto puede incluir escritorios virtuales, servidores de aplicaciones o cualquier otro recurso remoto compatible. Cada recurso se configura individualmente en Guacamole, especificando los detalles de conexión necesarios, como direcciones IP, puertos y credenciales de acceso.

Una vez que los recursos remotos están configurados, se pueden crear conexiones y grupos de conexiones en Guacamole para organizar y gestionar el acceso de los usuarios. Se pueden establecer políticas de acceso y permisos para controlar quién puede acceder a qué recursos.

Finalmente, los usuarios pueden acceder a los recursos remotos a través de un navegador web utilizando la interfaz web de Guacamole. Desde allí, pueden iniciar sesiones y trabajar con los escritorios o aplicaciones remotas como si estuvieran utilizando localmente.

Capturas de pantalla de Apache Guacamole:

Página principal image

Pagina de inicio image

Instancia image

image

Página web de DataWorks

Acerca de la página:

La página web de DataWorks es un sitio dedicado a promover y ofrecer nuestra aplicación. El sitio web utiliza HTML, CSS y JavaScript para crear una interfaz interactiva y receptiva.

La página principal presenta un encabezado pegajoso con un logotipo y un menú de navegación que permite acceder a diferentes secciones del sitio, como "Home" (Inicio), "About" (Acerca de), "Download" (Descargar) y "Contact us" (Contáctanos).

Estructura HTML:

La página web se divide en tres archivos HTML:

  • index.html: El archivo principal, aqui podremos encontrar un poco de información del proyecto, un formulario de contacto y un parte de reseñas.
  • about.html: Contiene información acerca del proyecto, así como capturas y información del equipo.
  • contact.html: Contiene un formulario de contacto.

Estilos CSS y SCSS

  • style.css: Archivo CSS principal que contiene estilos personalizados para la página web.
  • style.scss: Archivo SCSS que importa y compila todos los estilos SCSS.
  • responsive.css: Archivo CSS que se encarga del responsive.

Funcionalidad JavaScript

  • script.js: Archivo JavaScript principal que contiene la funcionalidad del formulario en la página web.

Framework Bootstrap

  • bootstrap.css: Archivo CSS de Bootstrap que proporciona estilos predefinidos para componentes y diseño responsivo.
  • bootstrap.js: Archivo JavaScript de Bootstrap que incluye funcionalidades adicionales, como el desplazamiento suave y la activación de los componentes.

Carpeta de imágenes

  • img/: Carpeta que contiene todas las imágenes utilizadas en la página web.

Otras carpetas y archivos

  • docs/: Carpeta que contiene documentacion de la página web, podrás encontrar este archivo.

Tecnologías utilizadas y su rol en esta página web:

Las tecnologías utilizadas en esta página web (HTML, CSS, SCSS, JavaScript y Bootstrap) desempeñan roles específicos en el desarrollo y diseño de la página, brindando funcionalidad, estilos y una estructura coherente. Aquí tienes una descripción de por qué se utilizaron estas tecnologías:

  1. HTML (HyperText Markup Language): Se utiliza como el lenguaje de marcado estándar para crear la estructura de la página web. HTML define los elementos y su organización, permitiendo la creación de secciones, encabezados, enlaces, formularios y otros elementos necesarios para construir la página.

  2. CSS (Cascading Style Sheets): Se utiliza para aplicar estilos visuales a los elementos HTML. CSS permite controlar el diseño, colores, fuentes, márgenes y otros aspectos de presentación de la página web, asegurando una apariencia consistente y atractiva.

  3. SCSS (Sassy CSS): Es una extensión de CSS que ofrece características adicionales y mejoras en la escritura de estilos. Se utiliza para modularizar y organizar los estilos CSS, facilitando su mantenimiento y reutilización en proyectos más grandes.

  4. JavaScript: Se utiliza para agregar funcionalidad interactiva y dinámica a la página web. En este caso, se utiliza JavaScript para validar y enviar el formulario de contacto, así como para agregar comportamientos adicionales como la navegación en el menú.

  5. Bootstrap: Es un framework CSS y JavaScript que proporciona componentes y estilos predefinidos para facilitar el diseño y la creación de páginas web responsivas. Bootstrap ofrece una serie de utilidades y clases que ayudan a crear un diseño fluido y adaptable, así como componentes como barras de navegación, botones y formularios que agilizan el desarrollo y aseguran una apariencia coherente en diferentes dispositivos.

En resumen, estas tecnologías se utilizan en conjunto para construir y diseñar la página web de manera eficiente, brindando una estructura sólida, estilos atractivos y una funcionalidad interactiva. Cada una de estas tecnologías tiene su propósito y contribuye a la creación de una experiencia de usuario agradable y efectiva.

Despliegue de la página web:

La página web ha sido desplegada en GitHub Pages, lo que significa que está disponible en Internet para que los usuarios puedan acceder a ella. GitHub Pages es un servicio de alojamiento web gratuito proporcionado por GitHub.

Para acceder a la página web desplegada en GitHub Pages, se puede utilizar la siguiente URL: https://deveshaha.github.io/UE-DataWorks-Web/index.html

¿Por qué Github Pages?

Decidimos utilizar GitHub Pages para el despliegue de nuestra página web por varias razones. En primer lugar, es una opción gratuita y fácil de usar. Al estar integrado directamente con nuestra cuenta de GitHub, nos permite desplegar la página web sin complicaciones adicionales ni costos extras. Solo necesitamos tener un repositorio en GitHub y seguir unos simples pasos para activar GitHub Pages.

Otra ventaja de GitHub Pages es su alta disponibilidad y rendimiento. Al desplegar nuestra página web en GitHub Pages, se distribuye a través de una red de servidores globales, lo que garantiza una carga rápida de la página y una experiencia confiable para nuestros usuarios, independientemente de su ubicación geográfica.

En resumen, GitHub Pages es la elección ideal para nosotros debido a su facilidad de uso, integración con las herramientas de colaboración de GitHub, alta disponibilidad y rendimiento.

Conclusión:

En conclusión, la página web de DataWorks utiliza una combinación de tecnologías como HTML, CSS, SCSS, JavaScript y Bootstrap para crear una interfaz interactiva y receptiva. Estas tecnologías desempeñan roles específicos en el desarrollo y diseño de la página, brindando funcionalidad, estilos y una estructura coherente.

HTML se utiliza para crear la estructura de la página, CSS se encarga de aplicar estilos visuales, SCSS ofrece mejoras en la escritura de estilos, JavaScript agrega funcionalidad interactiva y dinámica, y Bootstrap proporciona componentes y estilos predefinidos para facilitar el diseño y la creación de páginas web responsivas.

La página web ha sido desplegada en GitHub Pages debido a su facilidad de uso, integración con herramientas de colaboración de GitHub, alta disponibilidad y rendimiento. Esto permite a los usuarios acceder a la página de manera rápida y confiable.

En conjunto, estas tecnologías y el despliegue en GitHub Pages permiten a DataWorks construir una página web eficiente, atractiva y con una experiencia de usuario agradable.

Capturas de la página web:

image Página principal

image Página principal breve descripción

image Página principal descripción

image Página principal formulario de contacto

image Página principal reseñas

image Página Acerca de

image Página Acerca de: equipo

image Página Acerca de: detalles tecnicos y capturas de pantalla

image Página Contacto

Conclusiones

Aportaciones:

En este proyecto se ha logrado desarrollar una aplicación multiplataforma basada en tecnologías web, con una interfaz de usuario sencilla y extensible para gestionar datos, que permite a los usuarios ajustarla a sus necesidades específicas sin aumentar la complejidad más allá de lo necesario. La aplicación se ha diseñado teniendo en cuenta la flexibilidad, simplicidad, estabilidad y portabilidad.

Se ha utilizado el framework Electron, que proporciona una base de código uniforme para todas las plataformas, en JavaScript o TypeScript, y una forma estándar de crear interfaces de usuario, provista con HTML y hojas de estilo CSS. Además, Electron permite una fácil exportación a sistemas operativos de escritorio y el proyecto Capacitor permite generar paquetes APK y nativos a iOS.

Para almacenar los datos se ha utilizado la base de datos SQLite, que ofrece un alto nivel de portabilidad y eficiencia. Se ha descartado la utilización de bases de datos en servidor, como PostreSQL o MangoDB, debido a que no se espera tratar una cantidad masiva de datos, ni será necesaria la implementación de concurrencia o acceso por parte de usuarios externos.

La interfaz gráfica se ha desarrollado utilizando el framework next.js, basado en React, que destaca por su simplicidad y amplio soporte en la comunidad. Se ha utilizado el proyecto de código abierto nextron para embeber la aplicación basada en next.js dentro de un entorno Electron.

Trabajo futuro:

Como trabajo futuro, se podría considerar la implementación de una versión móvil de la aplicación, utilizando el proyecto Capacitor para generar paquetes APK y nativos a iOS. También se podría estudiar la posibilidad de utilizar otras bases de datos para almacenar los datos, dependiendo de las necesidades del usuario. Por último, se podría explorar la posibilidad de incorporar funcionalidades de inteligencia artificial o machine learning para ofrecer recomendaciones personalizadas al usuario.

Bibliografía y webgrafía

Anexos

Informe General: Desarrollo de Aplicación de Gestión de Datos

Durante este proyecto, nos hemos enfocado en proporcionar una solución sencilla y flexible, basada en tecnologías web, que permita a los usuarios adaptarla a sus requisitos específicos sin añadir complejidad innecesaria. Para poner a prueba la capacidad de adaptación de la aplicación en un contexto real, hemos utilizado como caso de estudio la administración de una residencia canina.

Este informe resalta los aspectos clave del desarrollo de nuestra aplicación de gestión de datos, la cual busca abordar los desafíos actuales en este campo. Nuestro enfoque en la estabilidad y portabilidad nos ha permitido desarrollar una solución que cumple con las expectativas de los usuarios y se adapta a diferentes entornos. Esto nos ha permitido crear una aplicación multiplataforma, fácilmente escalable, que se pueda adaptar a las necesidades específicas de cada usuario sin aumentar la complejidad más allá de lo necesario.

Directrices Particulares para el Proyecto de Desarrollo de Aplicación de Gestión de Datos

Alcance del proyecto:

a. El proyecto se enfocará en desarrollar una aplicación de gestión de datos para el cliente simulado, que es el administrador de una residencia canina. b. La aplicación deberá permitir al administrador gestionar la información de los perros, incluyendo datos como nombre, raza, historial médico y reservas de alojamiento.

Requisitos técnicos:

a. La aplicación se desarrollará utilizando tecnologías web, asegurando su compatibilidad multiplataforma y acceso desde dispositivos móviles y de escritorio. b. Se utilizará una base de datos para almacenar y administrar la información de los perros y las reservas de alojamiento.

Interfaz de usuario:

a. La interfaz de usuario deberá ser intuitiva, fácil de usar y adaptada a las necesidades del administrador de la residencia canina. b. Se priorizará la flexibilidad y personalización de la interfaz, permitiendo al administrador ajustarla según sus preferencias y requerimientos.

Funcionalidades clave:

a. Registro y gestión de perros: La aplicación permitirá ingresar y actualizar los datos de los perros, incluyendo información médica, alimentación y cuidados especiales. b. Reservas de alojamiento: Se implementará un sistema para realizar y gestionar reservas de alojamiento para los perros, incluyendo fechas, tipo de alojamiento y servicios adicionales.

Directrices particulares para los listados de programas

Listado de Programas:

  • @emotion/cache@11.10.8: Biblioteca de almacenamiento en caché para emociones en React.
  • @emotion/react@11.10.8: Biblioteca para usar estilos emocionales en aplicaciones de React.
  • @emotion/server@11.10.0: Módulo de servidor para emociones en React.
  • @emotion/styled@11.10.8: Biblioteca para estilizar componentes utilizando emociones en React.
  • @mui/material@5.12.2: Biblioteca de componentes de interfaz de usuario de Material-UI.
  • @types/node@18.16.3: Definiciones de tipo para Node.js.
  • @types/react@18.2.0: Definiciones de tipo para React.
  • electron-builder@23.6.0: Herramienta para crear instaladores y paquetes de aplicaciones de Electron.
  • electron-serve@1.1.0: Módulo para servir archivos estáticos en aplicaciones de Electron.
  • electron-store@8.1.0: Almacenamiento de datos persistente para aplicaciones de Electron.
  • electron@21.4.4: Plataforma de desarrollo de aplicaciones de escritorio utilizando tecnologías web.
  • next@12.3.4: Marco de desarrollo de React para crear aplicaciones web y estáticas.
  • nextron@8.5.0: Kit de herramientas para desarrollar aplicaciones de Electron con Next.js.
  • react-dom@18.2.0: Biblioteca para renderizar componentes de React en el navegador.
  • react@18.2.0: Biblioteca principal para construir interfaces de usuario utilizando componentes de React.
  • typescript@4.9.5: Lenguaje de programación tipado utilizado para el desarrollo de aplicaciones JavaScript a gran escala.

Este listado incluye los programas y bibliotecas utilizados en el paquete my-nextron-app@1.0.0 del proyecto ubicado en /home/alexaib/Projects/Electron/dataManager. Estos programas y bibliotecas son parte del entorno de desarrollo y permiten la construcción y funcionamiento de la aplicación.

Clone this wiki locally