Está en la página 1de 12

S4

SERVICIOS Y
APLICACIONES
TELEMÁTICAS

Práctica 3. Aplicación web en el servidor


TITULACIÓN: Grado en Ingeniería de tecnologías de telecomunicación (14312020)
TITULACIÓN: Doble Grado Ing. de tecnologías de la telecomunicación e Ing.
telemática (15212007)
TITULACIÓN: Grado en Ingeniería telemática (14512016)
CENTRO: ESCUELA POLITÉCNICA SUPERIOR (LINARES)
CURSO ACADÉMICO: 2023-2024

Descripción de las tareas a realizar


En esta práctica se deberán desarrollar algunos de los servicios consumidos en la
práctica 2 sobre Node.js para dar soporte a la gestión del blog personal, aparte de
otros nuevos. El profesor aportará un código de base a partir del cual realizar la
aplicación.
Las características que deberá cumplir la aplicación servidora sobre Node.js serán las
siguientes:
1. Soporte empleando Express al servicio /blog con el método PUT (crear nueva
entrada de blog).
2. Soporte empleando Express al servicio /blog/id con el método DELETE para
borrar una entrada del blog.
3. Soporte empleando Express al servicio /blog/entries/user con el método
GET para mostrar solamente las entradas del blog del usuario “user”. La salida
se deberá mostrar en un HTML generado basándose en una plantilla Mustache
con el mismo aspecto que el resto de páginas de la práctica 2.
4. Soporte para el acceso a datos empleando MongoDB.

Tarea previa. Instalación y configuración de Node.js y MongoDB

Previo al inicio de la práctica, se deberá tener descargado e instalado Node.js


(incluye NPM) y la versión Community de MongoDB. A continuación, se detallan los
pasos a seguir.
Instalación de Node.js
Node.js está disponible en varias versiones en https://nodejs.org/en/download/.
Una vez instalado, tendremos disponible en el intérprete de comandos (shell) el
comando node.
Para ejecutar un script con Node.js, simplemente se ejecuta:
node nombre-script.js

1/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

Instalación y uso de npm


El gestor npm se instala automáticamente junto con Node.js. Se puede comprobar que
está instalado ejecutando el comando npm –v, que mostrará la versión disponible si
se instaló correctamente.
Una vez instalado, para actualizar npm a nuevas versiones se puede ejecutar:
npm install npm@latest –g
Actualizar módulos con npm
Con npm outdated, ejecutado en el directorio de la aplicación, se muestran los
paquetes que están desactualizados.
Para actualizar los módulos desfasados: ejecutar en el directorio donde está la
aplicación npm update y así los módulos que tengan disponible una nueva versión
se descargarán.
Vea: https://docs.npmjs.com/updating-packages-downloaded-from-the-registry
Instalación y uso de MongoDB
Para instalar la versión Community de MongoDB, en función de su sistema
operativo, deberá seguir las indicaciones que se encuentran en:
https://docs.mongodb.com/manual/administration/install-community/
Al instalar MongoDB también se instala la aplicación MongoDBCompass que
permite gestionar a través de su interfaz de usuario las bases de datos locales,
facilitando así la creación de datos de inicio y borrado de registros.
Iniciar una base de datos
El servicio de MongoDB se instala en el sistema operativo y no es necesario iniciarlo,
pero si se quiere iniciar el servidor MongoDB en un directorio concreto y con una
carpeta para la base de datos concreta se puede ejecutar lo siguiente:

"C:\Program Files\MongoDB\Server\6.0\bin\"mongod --dbpath


.\data\db

La ruta hasta la instalación puede ser esa o similar. También se puede agregar
mongod al path del sistema operativo. La ruta para los ficheros de la base de datos
(por ejemplo ".\data\db") se puede elegir por el administrador según su criterio.
Para iniciar MongoDB en una dirección IP concreta:

"C:\Program Files\MongoDB\Server\6.0\bin\"mongod --dbpath


.\data\db --bind_ip 192.168.1.160

Nota: con MongoDBCompass nos podremos conectar al servidor de MongoDB y


gestionar las bases de datos locales (creación, modificación, eliminación), así como ,
crear, editar y borrar documentos manualmente.
2/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

Tarea 1. Creación del proyecto Node.js e instalación de módulos y


dependencias

Tarea 1.1. Creación del proyecto

1. Abrir el cuadro de
ejecución de comandos
pulsando la tecla
Windows y la tecla R y
poner “cmd” o
directamente escribir
cmd al pulsar en el
botón de Inicio de
Windows y pulsar sobre
el icono de “Símbolo
del sistema”. Esto
abrirá una ventana del
intérprete de
comandos.
2. Navegar a la carpeta
donde se desea
realizar la práctica.
Emplee el comando cd. Figura 1. Abrir consola de Windows.
3. Crear una carpeta
denominada “práctica3”. Emplee el comando mkdir práctica3. También
puede emplear el explorador de archivos. Si se equivoca, puede borrar la
carpeta con rmdir.
4. Entrar en la carpeta recién creada: escribir cd práctica3.
5. Inicializar la carpeta como un proyecto Node.js: escribir npm init y
completar la información que se va solicitando. Este proceso creará el fichero
de configuración package.json. Los pasos son los siguientes:
a. Nombre de paquete (package name): practica3 (sin tilde).
b. Versión (version): dejad la que viene por defecto (pulsar enter).
c. Descripción (description): poner una breve descripción de la práctica
como su título, asignatura, etc.
d. Fichero de inicio (entry point): introducir app.js.
e. Comando de test (test command): dejar en blanco.
f. Repositorio git (git repository): dejar en blanco.
g. Palabras clave (keywords): node.js, express, mongodb.
h. Autor/es (author): poner el nombre/nombres de los autores sin tildes.
i. Licencia (license): dejar en blanco.
j. Después sale el contenido del fichero package.json y pregunta si es
correcto, si es así pulsar enter para confirmar.
6. No cierre la ventana del intérprete de comandos de Windows, la necesitará en
la sub-tarea siguiente.

Tarea 1.2. Instalación de los módulos necesarios para el proyecto.

3/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

En la misma ventana del intérprete de comandos instalar los módulos necesarios (con
–save, aunque es la opción por defecto, actualiza la configuración de package.json
y los módulos se copian en una nueva carpeta node_modules y se crea también un
nuevo archivo package-lock.json con toda la información de los módulos
instalados). A la hora de entregar la práctica nunca copie la carpeta node_modules.
Ejecute los siguientes comandos para instalar los módulos que necesita la práctica:
1. Instalar Express:

npm install express –-save


2. Instalar controlador para MongoDB:

npm install mongodb --save


3. Instalar soporte a las plantillas Mustache:

i. npm install mustache --save


ii. npm install mustache-express -–save

Tarea 1.3. Preparar el código de inicio.

1. Descomprimir, en el
mismo directorio
creado, el fichero zip
proporcionado para la
práctica en la
plataforma de
docencia de la
Universidad de Jaén.
La carpeta debería
quedar con un fichero
app.js y una carpeta
/public con un
Figura 2. Página de inicio por defecto.
fichero index.html en
su interior.
2. Si todo se ha realizado correctamente podrá ejecutar la práctica con el
comando node app.js y luego navegar a la URL que le mostrará el propio
servidor y ver la página de inicio de la Figura 2 en el navegador web.
3. Pare el servidor pulsando las teclas Ctrl y C, pero no cierre la ventana del
intérprete de comandos. También puede ejecutar y parar de la misma manera
la aplicación desde una ventana de Terminal en Visual Studio Code.

Tarea 2. Preparación de la aplicación del servidor

Tarea 2.1. Copiar el código de la práctica 2 en el nuevo proyecto

4/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

Para que las peticiones de la aplicación estén dentro del mismo dominio y cumplan
con la política de seguridad de SOP (same-origin policy), se debe copiar todo el
contenido de la práctica 2 a la carpeta /public del nuevo proyecto. Reemplace
cualquier fichero allí existente y actualice las URL de los servicios incluidos en el
index.html o en script.js de la práctica 2:
 Las peticiones HTTP de los servicios se deben hacer a una URL relativa del
tipo "/login" o "/blog", eliminando el dominio labtelema.ujaen.es:
o Cambiar, por ejemplo, http://labtelema.ujaen.es:8083/login
por /login.
Recuerde que si intenta acceder a los servicios de la práctica 3 desde otra IP o puerto
deberá tener configurado el CORS (Cross Origin Resource Sharing) en el servidor (ver
Tema 4), de otra manera la petición será bloqueada por el navegador.
Vuelva a iniciar el servidor con node app.js y cargue de nuevo la página de inicio en
el navegador, deberá ver su práctica 2. No cierre la ventana del intérprete de
comandos.

Tarea 2.2. Crear un usuario de prueba empleando MongoDBCompass.

La aplicación que acaba de desplegar aún no cuenta con ningún dato en su base de
datos. Como muestra de cómo modificar la base de datos con una herramienta ajena
a la aplicación se va a emplear MongoDBCompass que se debe haber instalado
junto con el servidor MongoDB Community. Siga los siguientes pasos:
1. Escribir MongoDBCompass o buscar la aplicación entre las instaladas en el
grupo “MongoDB Inc” del menú de inicio de Windows.
2. Al iniciar la aplicación necesitamos conectarnos al servidor, y para eso se nos
abre por defecto esta función. No debemos cambiar la URL que debe ser
mongodb://localhost:27017.
3. Pulsamos en el botón conectar (“connect”).

Figura 3. Cuadro de conexión con la base de datos MongoDB.

4. Se nos abre el panel de control de las bases de datos y pulsamos en el botón


“+” para añadir una nueva (ver Figura 4). Se nos abre un nuevo cuadro que
permite introducir el nombre de la base de datos y el de una colección. Como
nombre de la base de datos escribimos “blog” y en la colección “users”.
5/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

5. La nueva base de datos y su colección aparecerán en el explorador de bases


de datos de la izquierda. Desplegamos las colecciones de la base de datos
“blog” y pinchamos sobre la colección “users”. En el panel de la derecha
aparecerán los documentos de la colección (si los tuviera, en este momento
estará vacía) y algunos controles sobre la colección que nos permiten añadir
datos, filtrar, etc. Nos quedamos en la pestaña “Document” y pulsamos en
“Add data” y seleccionamos “Insert document”. Se nos abre un editor de
JSON en el que borramos su contenido, copiamos lo siguiente:

{
"user": "usuario",
"email": "usuario@mail.com",
"name": "Usuario",
"surname": "User",
"password": "12345"
}
6. Pulsamos “Insert” y el nuevo documento
aparecerá en la colección. Podremos actualizarlo
con los controles que aparecen a la derecha Figura 4, Crear base de
cuando pasamos el cursor sobre él o cuando datos.
damos doble clic sobre alguna de sus propiedades.
Podemos repetir los pasos 5 y 6 cambiando los datos para insertar más
documentos en la colección “users”.

Tarea 2.3. Probar la aplicación de servidor con Postman.

Antes de pasar a modificar el código de la aplicación servidora, podemos emplear la


aplicación Postman para probar el correcto funcionamiento de los servicios. Más
adelante, la podremos emplear para comprobar los nuevos servicios que se
implementen. Para instalar Postman hay que ir a
https://www.postman.com/downloads/ y descargarlo. También es necesario que nos
registremos antes de comenzar a usarlo. Una vez instalado, registrados y
autenticados Postman nos permite hacer peticiones HTTP con multitud de
posibilidades de configuración. La petición que se hará de ejemplo será la de
autenticación según lo siguientes pasos:
1. Iniciar la aplicación servidora si no lo está ya (node app.js).
2. En el panel de la derecha en el control de pestañas pulsar sobre el botón “+”
para preparar una nueva petición.
3. Cambiar el método de GET a POST.
4. En el campo de URL poner la URL con la IP que da la aplicación servidora más
la ruta del servicio /login. Ejemplo: http://192.168.1.156:8083/login.
5. Pinchamos en la pestaña “body” bajo la URL para añadir datos a la petición.
6. Seleccionamos “raw” y en el desplegable que aparece al final de esa línea
elegimos “JSON”.
7. En el cuadro inferior escribimos el JSON de la petición según nos marca la
práctica: {"user":"usuario", "password":"12345"}
8. Pulsamos el botón “Send” y comprobamos en la ventana donde tenemos el
servidor iniciado los mensajes que se muestran.

6/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

Como se ha podido comprobar, con Postman podemos probar cualquier servicio que
hagamos sin necesidad de tener previamente implementado el front-end.

Tarea 3: servicio PUT /blog

A partir del código facilitado, crear un servicio para recibir los datos enviados desde el
cliente en el formato especificado en la práctica 2. El servicio está definido según las
siguientes características:
 Método a emplear: PUT.
 URL del servicio: /blog.
 Datos: los datos que se deberán recibir en formato JSON en el servidor son el
usuario que lo crea ("user"), el título ("title") de la entrada del blog, la fecha
de ésta (“date”) y el texto con los comentarios ("comment"). Ejemplo del JSON:
{
"user": "user1",
"title": "Primera entrada del blog",
"date": "2024-02-12",
"comment": "Esta es una entrada de mi blog"
}
 Si en el servidor alguna de las propiedades del JSON no está presente, o hay
una propiedad de más, se deberá enviar un error 400.
 Respuestas que el servidor debe enviar cliente:
o 201. En el caso de recibir los datos correctamente y después de insertar
el examen correctamente en la base de datos.
o 400. Se enviará esta respuesta si el formato recibido es incorrecto.
o 500. Se enviará esta respuesta si ha habido un error al guardar el
examen en la base de datos.

Pasos:

1. Crear la entrada en la aplicación express para el método PUT /blog.


2. Añadir los eventos para la recepción de datos desde el cliente.
3. Comprobar el formato de los datos recibidos (emplee for … in y un modelo
de los datos esperados para comprobarlos).
4. Hacer la conexión con la base de datos MongoDB. La base de datos se deberá
llamar “blog” y la colección “entries”.
5. Añadir el documento con la entrada del blog a la base de datos.
6. Responder al cliente con el resultado de la operación.

Tarea 4: servicio DELETE /blog/id

El servicio DELETE /blog/id buscará en la base de datos una entrada del blog, en
concreto aquella con un identificador especificado en la ruta "id", y la eliminará. El
servicio está definido según las siguientes características:
 Método a emplear: DELETE.
 URL del servicio: /blog/id.
 Datos: no se envían datos.
7/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

 Respuestas que el servidor debe enviar cliente:


o 200. En el caso de recibir una petición correcta y después de borrar la
entrada del blog.
o 404. En el caso de que el documento no se encuentre en la base de
datos.
o 500. Se enviará esta respuesta si ha habido un error al borrar la entrada
del blog de la base de datos.
Nota: recuerde especificar la ruta como /blog/:id para obtener el valor de id con
req.params.id.

Pasos:

1. Crear la entrada en la aplicación express para el método DELETE /blog/:id.


2. Generar el identificador válido para la consulta a la base de datos a partir del id
recibido.
3. Hacer la conexión con la base de datos MongoDB. La base de datos se deberá
llamar “blog” y la colección “entries”.
4. Borrar el documento de la base de datos cuyo _id coincida con el pasado en
el servicio.
5. Responder al cliente con el JSON resultado de la operación.

Tarea 5: servicio GET /blog/entries/user

Generar una salida HTML, empleando una plantilla Mustache para mostrar la lista de
entradas del blog directamente en HTML, pero solamente las de un usuario.
Este servicio no hace falta que se integre en la página creada para la práctica 2, se
podrá probar directamente a través de una pestaña del navegador, por ejemplo, con:
http://localhost:8083/blog/entries/usuario.
Para mostrar todas las entradas del blog del usuario, se deberá emplear una
estructura en HTML basada en listas no ordenadas. Además, se deberán añadir, al
menos, un estilo con tres propiedades para los elementos del listado.

Pasos:

1. Crear la entrada en la aplicación express para el método GET


/blog/entries/:user.
2. Hacer la conexión con la base de datos MongoDB. La base de datos se deberá
llamar “blog” y la colección “entries”.
3. Buscar todos los documentos (entradas del blog de un usuario) en la base de
datos. Para que el motor de plantilla Mustache pueda recorrer los elementos,
el resultado de la búsqueda se debe asignar a una propiedad nueva en un
objeto JSON: {"entries":result} que será el que finalmente se pasará al
motor de plantilla.
4. Añadir el soporte a los motores de plantilla a la aplicación.
5. Crear una plantilla HTML con Mustache, llamada entries.html, en una nueva
carpeta /views.

8/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

6. Pasar al motor de plantillas (render) los datos y la plantilla, para después


devolver el html resultante al cliente.

Tarea 6: Soporte en la aplicación (front-end) del servicio DELETE


/blog/id para borrar entradas del blog del listado

Añadir en la página index.html de la práctica 2, en la sección de Blog, a cada entrada


del blog un botón “Borrar” para que al pulsarlo se haga una petición a una función
deleteEntry(id) que con el API Fetch haga una petición HTTP al servicio DELETE
/blog/id (Tarea 4) y se pueda borrar dicha entrada del blog del servidor. Además, si
se recibe una respuesta correcta del servicio, eliminar ese elemento del DOM. Para
poder realizar el borrado del elemento del DOM cada elemento de la lista de entradas
deberá tener un id único vinculado a la de la propia entrada del blog.

Pasos:

1. Recorrer el array JSON descargado para crear un elemento de lista <li> por
cada entrada del blog en el contenedor del punto 1. Crear un id único para cada
elemento <li>.
2. Añadir el botón borrar a cada entrada del blog mostrada con la llamada a una
función para borrar que incluya en el evento onclick la llamada a la función
para borrar dicha entrada.
3. Revisar la documentación del API Fetch y crear una función deleteEntry(id)
que se llame desde cada botón “Borrar” para que se acceda al servicio DELETE
/blog/id en el servidor Node.js.
4. Eliminar del DOM el elemento <li> que contiene la entrada del blog desde la
que se ha pulsado el botón borrar si la petición DELETE resulta correcta.

Competencias a desarrollar
La realización del presente ejercicio intenta desarrollar las siguientes competencias:
 C.7. Conocimiento y utilización de los fundamentos de la programación
en redes, sistemas y servicios de telecomunicación.
o En esta práctica se profundiza en la programación de servicios en el
ámbito del a World Wide Web, concretamente en la creación de
aplicaciones en el servidor con la tecnología Node.js que permite
aprovechar los conocimientos previos adquiridos de JavaScript además
del manejo de datos con bases de datos no-SQL como es MongoDB.
 CB.4. Que los estudiantes puedan transmitir información, ideas,
problemas y soluciones a un público tanto especializado como no
especializado.
o Se busca desarrollar esta competencia a través de la interacción con el
alumno para que comente sus desarrollos dentro de la parte de
validación de su trabajo.
 CG.3. Conocimiento de materias básicas y tecnologías, que le capacite
para el aprendizaje de nuevos métodos y tecnologías, así como que le
dote de una gran versatilidad para adaptarse a nuevas situaciones.
9/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

o Con esta práctica se busca que el alumnado complemente su


conocimiento en el desarrollo de servicios y aplicaciones telemáticos a
partir de información técnica, como la mostrada en los seminarios,
bibliografía, así como la disponible en portales especializados en
Internet. Con esto además se busca lo siguiente:
 Afianzamiento del conocimiento del lenguaje HTML.
 Afianzamiento del conocimiento del lenguaje CSS.
 Afianzamiento del conocimiento de la sintaxis de transferencia
JSON.
 Afianzamiento del conocimiento del lenguaje JavaScript.
 Afianzamiento del conocimiento del DOM.
 Familiarización con el desarrollo de aplicaciones de servidor con
Node.js.
 Familiarización con el gestor de paquetes npm.
 Familiarización con Express sobre Node.js.
 Familiarización con MongoDB sobre Node.js.
 Familiarización con el uso de plantillas Mustache sobre Node.js.
 Afianzamiento del conocimiento del entorno de desarrollo de
aplicaciones usado en el curso.
 Afianzamiento del uso de los recursos de referencia de Internet.
 CG.9. Capacidad de trabajar en un grupo multidisciplinar y en un entorno
multilingüe y de comunicar, tanto por escrito como de forma oral,
conocimientos, procedimientos, resultados e ideas relacionadas con las
telecomunicaciones y la electrónica.
o Esta competencia está en sí contenida en todas las tareas dado que la
mayoría de las fuentes estarán en inglés, buscado potenciar el desarrollo
en la comprensión de este idioma. Asimismo, a través de los
comentarios del código se busca que el alumno sea capaz de sintetizar
y explicar los objetivos de su trabajo de forma clara para que puedan ser
entendidos por otros.

Resultados de aprendizaje
La realización del presente ejercicio persigue la consecución de los siguientes
resultados:
 Resul-05. Fomentar los trabajos grupales, así como la transmisión de
procedimientos, resultados e ideas en el ámbito de las telecomunicaciones.
 Resul-10. El alumno distinguirá y relacionará los conceptos de servicio y
aplicación en el ámbito de las comunicaciones; además asimilará los
detalles vinculados con los servicios de telecomunicación más populares y
las aplicaciones y protocolos que los soportan. Describir los principales
servicios y aplicaciones de Internet.
 Resul-21. Conocer materias básicas y tecnológicas que capaciten para el
aprendizaje de nuevos métodos y tecnologías
 Resul-22. Dotar de una gran versatilidad para adaptarse a nuevas
situaciones.
 Resul-23. Analizar y valorar el impacto social y medioambiental de las
soluciones técnicas.
10/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

 Resul-24. Trabajar en un grupo multidisciplinar y en un entorno multilingüe.


 Resul-25. Comunicar, tanto por escrito como de forma oral, conocimientos,
procedimientos, resultados e ideas relacionadas con las
telecomunicaciones y la electrónica

Detalles de la práctica.
Recursos necesarios

 Ordenador PC.
 Conexión a Internet.
 Recursos: transparencias de clase.
 Recursos online: W3schools, Mozilla Developer Network o Stack Overflow,
entre otros.
 Entorno de desarrollo: Visual Studio Code.
 Navegador: Mozilla Firefox o Google Chrome.
 Servidor Node.js.
 Gestor de bases de datos MongoDB.
 Gestor de paquetes npm.

Programación de la práctica

Esta práctica se realizará en cuatro sesiones durante otras cuatro semanas.


 Trabajo en laboratorio: 8 horas.
 Trabajo autónomo del alumno: 12 horas.
Sesiones en laboratorio:
 Primera sesión. Preparación de una aplicación.
o Completar la tarea preliminar, así como la tarea 1 y 2.
 Segunda sesión. Desarrollar servicios de la Tarea 3 y 4.
 Tercera sesión: Desarrollar servicios de la Tarea 5.
 Cuarta sesión: Modificar la vista para completar la Tarea 6 y prueba de la
práctica en conjunto.
Trabajo autónomo:
 Repaso de tecnología AJAX: 1 hora.
 Repaso de Node.js y expess: 1 hora.
 Repaso de MongoDB: 1 hora.
 Revisar estructura del proyecto Node.js creado: 1 hora.
 Revisar la especificación de los servicios: 1 hora.
 Revisar y probar la Tarea 3: 1 hora.
 Revisar y probar la Tarea 4: 1 hora.
 Revisar y probar la Tarea 5: 1 hora.
 Revisar y probar la Tarea 6: 1 hora.
 Revisar y probar la práctica: 3 horas.

11/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024

Material a entregar en la plataforma de docencia de la UJA

No se tiene que entregar ningún material.

Evaluación
La evaluación de esta práctica se realizará a través la validación de la misma por el
profesor y la realización de una prueba de evaluación a lo largo del cuatrimestre. La
no validación de la práctica de manera satisfactoria podrá conllevar una penalización
de hasta un punto en la nota final de S4.

12/12

También podría gustarte