Documentos de Académico
Documentos de Profesional
Documentos de Cultura
SERVICIOS Y
APLICACIONES
TELEMÁTICAS
1/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024
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:
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.
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:
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.
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.
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”).
{
"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”.
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.
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:
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
Pasos:
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:
8/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024
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
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
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
11/12
Servicios y Aplicaciones Telemáticas
Práctica 3. Aplicación web en el servidor
Curso 2023/2024
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