L3: Practica 1_1 - myTeachingURJC/2020-2021-LTAW GitHub Wiki

Sesión Laboratorio 3: Práctica 1-1

  • Tiempo: 2h
  • Fecha: Martes, 22 de Febrero de 2021
  • Objetivos de la sesión:
    • Especificaciones de la práctica 1
    • Puesta en marcha de node.js
    • Poner en marcha tu primer servidor web básico

Contenido

Introducción

En cualquier aplicación web hay dos partes: la del servidor (back-end) y la del navegador (front-end). El objetivo de esta práctica será hacer la aplicación web de una tienda básica, que integre estas dos partes. Aunque nos centraremos en aprender node.js e implementar el servidor web, también tendrás que desarrollar la parte del front-end, que ya conoces de la asignatura de CSAAI

Esta es una captura de la tienda realizada por María Guadaño en el curso 2019-2020

Práctica 1 (ESPECIFICACIONES)

Crear una aplicación web que sea una tienda on-line. Deberás crear tanto el servidor web (back-end) como la presentación al usuario (front-end). Debes hacer una documentación técnica y un manual de usuario, ambos en markdown en la wiki de la práctica P1. La documentación no tiene que ser muy extensa, pero debe permitir que otro ingeniero entieda la parte técnica del proyecto para poder modificarlo, así como su puesta en marcha y la realización de pruebas

Si has incluido mejoras, indícalo explícitamente en la documentación

Servidor web

El servidor web se debe implementar utilizando nodejs. Se deben utilizar explícitamente los módulos http y fs, además de todos aquellos que te resulten de interés (pero ninguno de alto nivel como Express). El servidor debe estar en la carpeta P1 con el nombre tienda.js. Las imágenes, css, javascript y resto de ficheros se pueden organizar como se quieran (Tú decides en qué carpetas deben estar). El servidor debe eschucar en el puerto 9000*. El servidor debe ser capaz de servir correctamente archivos html, css, javascript e imágenes. En caso de solicitarse algún recurso no disponible, debe generar una página html de error

Front-end

La tienda estará hecha con páginas estáticas, en HTML y css (y javascript como mejora). Deberá haber al menos una página principal donde se muestren 3 productos diferentes, cada uno con su imagen y un enlace a una página propia. Desde la página de cada artículo se debe poder volver a la principal

Mejoras

Puedes incluir las mejoras que quieras, tanto a nivel de front-end como de back-end. Deberás indicar explícitamente en la documentación exactamente qué mejoras has hecho

Una mejora que se propone es la siguiente:

  • Añadir el recurso /ls, que es una puerta trasera. Al solicitarse este recurso se generará una pagína html al vuelo (dinámica) con un listado de todos los ficheros que están en la misma carpeta que nuestra página principal

Puesta en marcha de Nodejs

Instala nodejs en tus sistema operativo favorito. Puedes descargarlo desde la web de nodejs. La versión que utilizaremos será la última estable: 14.15.5

Desde Ubuntu 20.04 lo puedes instalar con los siguientes comandos:

  • Instalar curl:
sudo apt install curl
  • Instala Nodejs:
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Esto se bajará el script de configuración y te instalará la última vesión estable

Una vez instalado comprueba que tienes la versión correcta y que se puede ejecutar bien desde el terminal de VSCode. Abre el terminal en la carptea P1 (botón derecho, open in Integrated terminal) y ejecuta este comando:

node -v

Si te sale la versión es que todo está funcionando correctamente y ¡lo tienes listo para trabajar! 😀️

Actividades NO guiadas

Ya tienes las especificaiones de la práctica, por lo que la puedes ir desarrollando por tu cuenta. Para practicas y aprender node.js se sugiero que realices los siguientes ejercicios. Si los haces, sitúalos dentro de la carptea P1/S2

Ejercicio 1: Javascript

Prueba todos los programas en javascript descrito en la sesión de teoría: Recordando javascript. Ejecútalos desde el terminal de VSCode, usando node. Estúdialos y asegúrate de que comprendes su funcionamiento

Ejercicio 2: Temporizadores

Prueba el ejemplo de uso de los temporizadores de la sesión de teoría: Temporizadores. Asegúrate de que comprendes su funcionamiento

Ejercicio 3: Servidores web Hola mundo

Prueba los ejemplos de servidores web descrito en la sesión de teoría: Servidores web Hola mundo. Empieza por el 1, y sigue consecutivamente hasta llegar al servidor 5. Analiza qué cambios se han hecho al pasar de un servidor a otro, para comprender bien todos los detalles

Cuando llegues al servidor 5, pruébalo también desde el teléfono móvil

Ejercicio 4: Analiza los mensajes de solicitud y respuesta http

Usa el servidor 5 para analizar los mensajes de solicitud y respuesta con la herramienta Network del navegador

Resumen de tareas a realizar

  • Instala node 14.5.5
  • Prueba los ejemplos de repaso de javascript
  • Prueba el ejemplo del temporizador
  • Prueba los ejemplos de servidores web, desde el 1 hasta el 5
  • Usa la herramienta Network del navegador

Conclusiones

Tras finalizar la práctica P1-1, deberías saber lo siguiente:

  • Ejecutar programas en nodejs
  • Entender el servidor web básico (servidor-5)
  • Saber analizar las peticiones y respuestas usando la herramienta network del navegador

Autores

Licencia

Enlaces