Práctica #11: Node JS y Express: Desarrollo de Aplicaciones

UCSM Esc. Prof.
de Ingeniería de Sistemas INFORME DE PRÁCTICAS

Noviembre - 2022 DESARROLLO DE
APLICACIONES
Práctica N° 11:
Node JS y Express
Elaborado por: Fernandez Lopez, Luciana Alexandra
Ordoñez Arratia, Joseph Fernando
Yanarico Suyo, Cinthya Daniela
© IEEE 2013 The Institute of Electrical and Electronics Engineers, Inc.

Práctica N° 11: Node JS y Express
GRUPO N° 3
PRÁCTICAS DE DESARROLLO DE APLICACIONES
Presentado por:
2020700992 FERNANDEZ LOPEZ, LUCIANA ALEXANDRA
2020245441 ORDOÑEZ ARRATIA, JOSEPH FERNANDO
2020231692 YANARICO SUYO, CINTHYA DANIELA
ii
RECONOCIMIENTOS
Los autores de este trabajo reconocen con gratitud a los creadores de Node JS y Express
PALABRAS CLAVES
Node JS y Express
iii
ÍNDICE
1. RESÚMEN 1
2. INTRODUCCIÓN ...........................................................................................................1
3. MARCO TEÓRICO ........................................................................................................1
3.1 NODE JS ...............................................................................................................1
3.2 EXPRESS .............................................................................................................1
4. EXPERIENCIAS DE PRÁCTICA ...................................................................................2
4.1 Aplicación Básica Node JS ...................................................................................2
4.2 Node JS y MySQL ................................................................................................3
4.3 Node JS y plantillas HTML ...................................................................................4
4.4 Aplicación Básica en Express ..............................................................................6
4.5 Manejo de Rutas en Express ...............................................................................8
4.6 Manejo de Middleware en Express ................................................................... 14
5. EJERCICIOS............................................................................................................... 16
5.1 Ejercicio 1........................................................................................................... 16
5.2 Ejercicio 2........................................................................................................... 18
6. CONCLUSIONES DE LA PRÁCTICA: ....................................................................... 34
7. CUESTIONARIO ......................................................................................................... 35
8. BIBLIOGRAFÍA ........................................................................................................... 36
iv
ÍNDICE DE TABLAS Y FIGURAS

Visualización de versión de node y npm .............................................................................1
Instalación de express mediante la terminal de VS ............................................................2
v
1. RESÚMEN
En el presente informe se desarrolla el uso de NodeJS y Express, las cuales son herramientas que
deberían conocerse y abordarse al menos en un aspecto básico para poder comprender el lenguaje
de Javascript.
NodeJS es un entorno de ejecución JavaScript en tiempo real, que tiene la finalidad de crear
aplicaciones, sitios web dinámicos y eficientes.
Express es un framework de backend minimalista y rápido, con similitudes a Sinatra y sirve para el
desarrollo de aplicaciones escalables.
Los aprendizajes obtenidos con esta práctica consisten en la creación de aplicaciones básicas
utilizando ExpressJS, utilizando herramientas como enrutamiento, middleware, mysql, html.
Con el desarrollo de esta práctica se concluye que el framework ExpressJS es una herramienta
bastante robusta para la elaboración de aplicaciones web, abriendo una infinidad de posibilidades al
desarrollador.
2. INTRODUCCIÓN
Node.js es un tiempo de ejecución de JavaScript, de ahí su sufijo ".js". Este tiempo de ejecución es
de código abierto o de código abierto, multiplataforma y del lado del servidor.
Los desarrolladores de JavaScript han creado este entorno para llevar este lenguaje de programación
un paso más allá.
Antes de que se creara Node.js en 2009, el lenguaje de programación JavaScript solo podía
ejecutarse en el navegador o en el lado del cliente, pero... ¿Y si quisiéramos usar el lenguaje fuera
del navegador o del servidor?
Debido a que JavaScript solo se podía usar dentro de etiquetas [eliminadas] [eliminadas], los
desarrolladores tenían que usar diferentes lenguajes y herramientas tanto para el frontend como para
el backend.
Node.js incluye todo lo que necesita para ejecutar código JavaScript del lado del servidor. Algo que
facilita mucho el trabajo de los desarrolladores y que actualmente es una de las herramientas más
utilizadas en el desarrollo web.
Express es un marco gratuito y de código abierto para Node.js. Tiene funciones, herramientas,
complementos y paquetes que ayudan a simplificar los procesos de desarrollo. También conocido
como Express, fue creado y publicado por primera vez por TJ Holowaychuk en 2010. Se basa en
los principios y enfoques de Node.js y los utiliza para crear aplicaciones web. Express.js es
importante para el desarrollo de aplicaciones empresariales, especialmente para la automatización
y la integración de tecnología.
1
3. MARCO TEÓRICO
3.1 NODE JS
¿Qué es?
Es un entorno de ejecución que trabaja con JavaScript, opera del lado de servidor y a tiempo real,
se encuentra construido sobre el motor de Google JavaScript V8, no almacena los datos en búfer,
cuenta con su propio gestor de paquetes para Node, ofrece la elaboración de aplicaciones escalables
además de simplificar la comunicación trabajando de forma asíncrona.[1]
¿Cuándo se usa?
Se recomienda para la elaboración de aplicaciones que trabajen a tiempo real, en aplicaciones de
transmisión de datos como las de streaming, basadas en JSON:API, de página única y vinculadas a
E/S
¿Cómo se configura y se instala?
Para instalar Node, es necesario descargarlo de su página web oficial https://nodejs.org/en/
recomendando la versión recomendada para la mayoría de los usuarios.
Posteriormente nos dirigimos a ejecutar el instalador.
Para confirmar la instalación correcta de Node en el sistema, deberemos consultar la versión del
Node en la consola mediante el comando: node -v
Ademas podemos consultar el gestor de paquetes NPM que viene incluido con Node mediante el
comando: npm -v
Visualización de versión de node y npm
3.2 EXPRESS
¿Qué es?
Es el framework más popular que trabaja con Node js, simplifica la implementación de Node
especialmente en el manejo de rutas, permite el desarrollo de aplicaciones backend escalables,
ofrece herramientas para peticiones y respuestas HTTP y middleware, trabaja siguiendo el principio
de DRY (no repetir).
¿Cuándo se usa?
1
Se implementa en aplicaciones de una sola página, consiste en enrutar la aplicación en una sola
pagina de índice, aplicaciones de streaming, ya que manejan muchas capas de datos a tiempo real
que express puede manejar, aplicaciones fintesh, dirigidas al ámbito financiero por el alto nivel de
usuario y transacciones.
¿Cuáles son las ventajas de usarlo?
Presenta las ventajas de ser flexible y rápido, destaca como el mejor entre los framework de Node.js,
tanto como el sistema de enrutamiento y middleware son excelentes. Suele formar parte de stack
reconocidos como MERN y MEAN, puede realizar conexiones a una base de datos fácilmente,
asegura la escalabilidad de la aplicación, es compatible con el motor V8 de Google, indicando lo
potente que es en la construcción y despliegue de las aplicaciones, cuenta con una gran
documentación provista por la comunidad y su característica mas importante es su función como
middleware.[2]
¿Cómo se configura e instala?
Como prerrequisito es necesario tener instalado Node.js. Para instalar Express debemos crear
primeramente una aplicación con Node.js dentro de nuestro editor de código o consola mediante el
comando: npm init, completamos los campos de información que nos pide y se procedera a instalar
express de manera local con el comando npm install express o de forma global con npm install
express –sabe.
Instalación de express mediante la terminal de VS
4. EXPERIENCIAS DE PRÁCTICA
4.1 Aplicación Básica Node JS
Index.js
2
4.2 Node JS y MySQL
Conexión entre Node.js y MySQL
3
4.3 Node JS y plantillas HTML
a) Creando carpeta "nodehtml" para nueva aplicación e ingresar a la misma

b) Creación de archivo "package.json" (se fuerza el llenado de parámetros
predeterminados)
npm init --f
c) Instalar paquete file-server
npm install file-server
d) Crear scripts "index.js" e "index.html"
index.js
-------------------------------------------------------------------------------
//importar paquetes http y fs
var http = require('http'),
fs = require('fs'); //file server
//creacion de plantilla
var html = fs.readFileSync("./index.html");
//crear el servidor, se encuentra en escucha y despliega el html

http.createServer(function (req, res) {
res.write(html);
res.end();
4
}).listen(3010);//puerto 3010
*******************************************************************************
index.html
-------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>Documento NODE y Bootstrap5</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
</head>
<body style="background-color:#ffbd2e"> 
<div class="px-4 pt-5 my-5 text-center border-bottom">


<h1 class="display-2 fw-bold">Kings League</h1>
<div class="col-lg-10 mx-auto">

<h2 class="pt-5 display-7">Nace Kings League,
la liga de fútbol de los streamers.</h2>

<h2 class="pt-3 mb-4 display-6">
El fútbol de siempre pero con nuevas reglas:
partidos rápidos, todos el mismo día y en el mismo lugar, con
más acceso y en abierto.</h2>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">

<button type="button" class="btn btn-dark btn-lg px-4 me-sm-
3">Equipos</button>
<button type="button" class="btn btn-outline-light btn-lg px-
4">Fechas</button>
</div>
</div>
<div class="overflow-hidden" style="max-height: 32vh;"> 
<div class="container px-5">

<img
src="https://pbs.twimg.com/profile_banners/1589569521614000128/1668104435/1500x
500" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image"
width="900" height="700" loading="lazy"> 
</div>
</div>
</div>


5
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
</script>
</body>
</html>
4.4 Aplicación Básica en Express
a) Creando carpeta "express" para nueva aplicación e ingresar a la misma

b) Creación de archivo "package.json" (llenar por lo menos nombre de paquete y
autor)
npm init --
c) Instalar paquete Express

npm install express
6
d) Abrir archivo "package.json" para verificar instalación de paquete express
e) Crear scripts "index.js" para ejemplo de Express y ejecutarlo

index.js
-------------------------------------------------------------------------------
//importar el paquete Express
var express = require('express');
//crear aplicacion express
var app = express();
//creando manejadores de rutas
app.get('/', function(req, res){
res.send('<h1>Pagina principal</h1>');
})
app.get('/login', function(req, res){
res.send('<h2>Aqui es la ruta de login</h2>');
})
app.get('/user', function(req, res){
res.send('<h2>lista de usuarios</h2>');
})
//servidor de escucha que desplega la ruta http

app.listen(3010,function(){
console.log('Express server running on port 3010');
});
-------------------------------------------------------------------------------
7
4.5 Manejo de Rutas en Express
8
package.json
{
"name": "expressjs",
"version": "1.0.0",
"description": "Experiencia Manejo de Rutas en Express",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Joseph Ordonez",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
index.js
// importar paquete Express
// crear aplicación en Express

9
// invocando archivo de manejo rutas

var rutas = require('./urls.js');
app.use('/',rutas);
// Servidor
console.log('Aplicación iniciada en http://localhost:3000');
});
urls.js
// Gestionador de rutas
var router = express.Router();
const path = require('path');
// Manejadores de rutas
router.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
});
//Anidamiento de rutas
router.get('/express',function(req,res){
res.sendFile(path.join(__dirname+'/express.html'));
router.get('/express/express2', function(req,res){
res.sendFile(path.join(__dirname+'/express2.html'))
})
})
router.get('/node',function(req,res){
res.sendFile(path.join(__dirname+'/node.html'));
})
router.get('/bootstrap', function(req,res){
res.sendFile(path.join(__dirname+'/bootstrap.html'))
})
module.exports = router;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
integrity="sha384-
<title>Inicio</title>
</head>
<body>
10

<nav class="nav justify-content-center ">
<a class="nav-link active" href="./" aria-current="page">Inicio</a>
<a class="nav-link" href="./express">ExpressJS</a>
<a class="nav-link" href="./node">NodeJS</a>
<a class="nav-link" href="./bootstrap">Boostrap 5</a>
</nav>

<div class="container"> 
<div class="row">
<div class="col-12">
<br/>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Experiencia 4.5</h1>
<p class="col-md-8 fs-4">En esta experiencia de práctica se
desarrolla el manejo de rutas en ExpressJS</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
express.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
<title>Express</title>
</head>
<body>

</nav>

<div class="row">
<h1 class="display-5 fw-bold">Hello World from ExpressJS</h1>
11
<p class="col-md-8 fs-4">Express. js es un framework de

backend Node. js minimalista, rápido y similar a Sinatra, que proporciona
características y herramientas robustas para desarrollar aplicaciones de backend
escalables.</p>
<button class="btn btn-primary btn-lg" type="button"
onclick="href= './express/express2'">Conocer más</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
express2.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
<title>Express</title>
</head>
<body>

</nav>

<div class="row">
<h1 class="display-5 fw-bold">Hola de nuevo!</h1>
<p class="col-md-8 fs-4">Anidamiento de rutas con
ExpressJS</p>
<button class="btn btn-primary btn-lg" type="button"
href="./express/express2">Conocer más</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
12
node.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
<title>Node</title>
</head>
<body>

</nav>

<div class="row">
<h1 class="display-5 fw-bold">NodeJS</h1>
<p class="col-md-8 fs-4">Ideado como un entorno de ejecución
de JavaScript orientado a eventos asíncronos, Node. js está diseñado para crear
aplicaciones network escalables.</p>
<button class="btn btn-primary btn-lg" type="button">Conocer
más</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
13
<title>Boostratp</title>
</head>
<body>

</nav>

<div class="row">
<h1 class="display-5 fw-bold">Bootstrap 5</h1>
<p class="col-md-8 fs-4">Bootstrap es un framework front-end
utilizado para desarrollar aplicaciones web y sitios mobile first, o sea, con un
layout que se adapta a la pantalla del dispositivo utilizado por el usuario.</p>
<button class="btn btn-primary btn-lg" type="button">Conocer
más</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4.6 Manejo de Middleware en Express
14
Nótese como con cada clic al botón se registrará la hora en la que se pulsó. De este modo podrían
guardarse asistencias, registros de entrada y salida, etc.
package.json
{
"name": "expressmiddleware",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"license": "ISC",
"dependencies": {
"express": "^4.18.2",
"moment": "^2.29.4"
}
}
index.js
// importando paquete express
// Middlewares
const middleware = function(req,res,next){
const moment = require('moment')
let hora = moment().format('hh:mm:ss')
console.log('Time:', hora);
next();
};
// Invocando middleware
app.use(middleware);
// Manejador de rutas
app.use('/',rutas);
// levantando servidor
15
console.log('Servidor iniciado en http://localhost:3000');
});
urls.js
// Creando manejadores de rutas

});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
</head>
<body>
<h1 class="display-5 fw-bold">Registre la hora!</h1>
<p class="col-md-8 fs-4">Registre la hora cuantas veces guste pulsando el
siguiente botón.</p>
<a class="btn btn-primary" href="./" role="button">Registrar Hora</a>
</div>
</div>
</body>
</html>
5. EJERCICIOS
5.1 Ejercicio 1
Node y HTML
index.js
-------------------------------------------------------------------------------
//importar paquetes http y fs
16
var http = require('http'),

fs = require('fs'); //file server
//creacion de plantilla
var html = fs.readFileSync("./index.html");
//crear el servidor, se encuentra en escucha y despliega el html

http.createServer(function (req, res) {
res.write(html);
res.end();
}).listen(3010);//puerto 3010
*******************************************************************************
index.html
-------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>Ejercicio Node y Html</title>

to-fit=no">

<link
rel="stylesheet"
integrity="sha384-
</head>
<body>

<div class="bg-image" style="
background-image: url('https://esportsjunkie.com/wp-
content/uploads/2022/04/PGL-Major-Antwerp-2022.jpg');
background-size: cover;">

<div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">

<div class="container col-xxl-8 py-5 text-light">
<div class="row flex-lg-row-reverse align-items-center g-5 py-
5">
<div class="col-10 col-sm-8 col-lg-6">

<img
src="https://media.a24.com/p/6f234356b7e2e38935380f5bdb99657b/adjuntos/296/imag
enes/008/996/0008996875/1200x675/smart/majorjpg.jpg" class="d-block mx-lg-auto
img-fluid" width="700"
height="500" loading="lazy">
</div>
<div class="col-lg-6">

<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-
aligned hero with image</h1>

<p class="lead pt-4 pb-4">Congratulations to Cloud9,
FURIA, Fnatic, Heroic, Outsiders, MOUZ,
17
Natus Vincere, and Team Spirit; they will compete in

front of 18,000+ CS:GO fans at the sold out
Jeunesse Arena to become Major Champions.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-
start ">

<button type="button" class="btn btn-outline-light
btn-lg px-4 me-md-2">Watch now</button>
<button type="button" class="btn btn-outline-light
btn-lg px-4">LAST CHANCE: FAN FEST
TICKETS</button>
</div>
</div>
</div>
</div>
</div>
</div>

<script
integrity="sha384-
</script>
<script
integrity="sha384-
</script>
</body>
</html>
*******************************************************************************
5.2 Ejercicio 2
18
Aplicación básica con express:
Packaje.json
-------------------------------------------------------------------------------
//archivo json con express,con index.js como main
{
"name": "express",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "Cinthya", //autor
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
*******************************************************************************
Index.js
-------------------------------------------------------------------------------
//modulo path
//importar el paquete Express
//crear aplicacion express
//creando manejadores de rutas
app.get('/', function(req, res){
res.sendFile(path.resolve(__dirname, 'index.html')); //archivo html
})
app.get('/novedades', function(req, res){
res.sendFile(path.resolve(__dirname, 'novedades.html')); //archivo html
})
app.get('/embajadores', function(req, res){
res.sendFile(path.resolve(__dirname, 'embajadores.html')); //archivo html
})
//servidor de escucha que desplega la ruta http

console.log('Express server running on port 3010');
});
*******************************************************************************
Index.html
-------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>Express con HTML</title>

to-fit=no">
19
<link
rel="stylesheet"
integrity="sha384-
</head>
<body>

<div class="container my-5">

<div class="bg-image" style="background-image:
url('https://wallpapercave.com/wp/wp11326368.jpg');
height: 100%; width: 100%; background-size: cover;">


<div class="row p-4 pb-0 pe-lg-2 pt-lg-5 align-items-center rounded-
3 border shadow-lg">

<div class="col-lg-7 p-3 p-lg-5 pt-lg-3 text-light">
<h1 class="display-4 fw-bold lh-1">JUEGA LA FIFA WORLD CUP
2022™</h1>
<p class="lead">Vive la experiencia de jugar en el mejor
escenario futbolístico con EA SPORTS™ FIFA 23 a partir del 9 de noviembre.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start
mb-4 mb-lg-3">

<button type="button" class="btn btn-light btn-lg px-4
me-md-2 fw-bold">Comprar ahora</button>
<button type="button" class="btn btn-outline-light btn-
lg px-4">Más información</button>
</div>
</div>

<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg
">
<img class="rounded-lg-2"
src="https://wallpapercave.com/wp/wp11326332.jpg" alt="" width="720" >
</div>
</div>
</div>
</div>
</div>

<script
integrity="sha384-
</script>
<script
integrity="sha384-
</script>
20
</body>
</html>
*******************************************************************************
Novedades.html
-------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>Novedades FIFA 23</title>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<link
rel="stylesheet"
integrity="sha384-
</head>
<body>

<div class="container py-4">


<div class="mb-4 bg-light rounded-3">

url('https://media.contentapi.ea.com/content/dam/ea/fifa/fifa-
23/soundtrack/images/2022/09/f23-soundtrack-coverart-
16x9.jpg.adapt.1456w.jpg');
height: 100%; width: 100%; background-size: cover;">

<div class="container-fluid py-10 p-5 text-light">
<h1 class="display-5 fw-bold">BANDA SONORA DE FIFA 23</h1>
<p class="col-md-8 fs-4">!Escucha la banda sonora de EA SPORTS™ FIFA
28, con Stromae,
Danger Mouse, Flume, Bad Bunny, Jack Harlow, ROSALIA, M.I.A, y
más!</p>

<button class="btn btn-outline-light btn-lg" type="button">Escuchar
Banda Sonora</button>
</div>
</div>
</div>
</div>


<div class="row align-items-md-stretch">

<div class="col-md-6">

21

url('https://media.contentapi.ea.com/content/dam/ea/fifa/fifa-23/world-
cup/features-page/common/f23-wc-tournamentmode-16x9.jpg.adapt.1456w.jpg');
height: auto; width: 100%; background-size: cover; background-position:
right;">


<div class="h-100 p-5 text-light rounded-3">
<h2>UNA TEMPORADA CON DOBLE
TORNEO DE LA FIFA WORLD CUP™</h2>
<p>Disfruta de la competición cumbre del futbol internacional con la
llegada
a FIFA 23 de la FIFA World Cup Qatar 2022™ y la FIFA Women's World
Cup
Australia and New Zealand 2023™. Estas novedades llegarán como
actualizaciones posteriores sin coste adicional. Mantente al día de
las
Ultimas noticias para obtener mas información a medida que se
acerquenlos torneos.</p>

<button class="btn btn-outline-light" type="button">Más
información</button>
</div>
</div>
</div>
</div>


<div class="col-md-6">


<div class="bg-image " style="background-image:
url('https://media.contentapi.ea.com/content/dam/ea/fifa/fifa-
23/common/homepage-new-in/f23-hmpg-womensfc-16x9.jpg.adapt.crop16x9.652w.jpg');
height: auto; width: 100%; background-size: cover; background-position:
right;">


<div class="h-100 p-5 text-light ">
<h2>PRESENTAMOS EL FUTBOL
FEMENINO DE CLUBES</h2>
<p>Juega con clubes femeninos por primera vez en la historia de EA
SPORTS
FIFA con la Barclays Women's Super League, Division 1 Arkema y la
fase
eliminatoria de la UEFA Women's Champions League, que llegará a FIFA
28 a principios de 2023. Además, disfruta de los increibles
movimientos
capturados con HyperMotion2 en las plataformas de nueva generación,
que aporta animaciones únicas y reales al futbol femenino.</p>

<button class="btn btn-outline-light" type="button">Más
información</button>
</div>
</div>
</div>
22
</div>

</div>


<footer class="pt-3 mt-4 text-muted border-top">
© 2022 Electronic Arts Inc.
</footer>
</div>

<script
integrity="sha384-
</script>
<script
integrity="sha384-
</script>
</body>
</html>
*******************************************************************************
Embajadores.html
-------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>Embajadores</title>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<link
rel="stylesheet"
integrity="sha384-
</head>
<body>

<section class="text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Embajadores</h1>
</div>
</div>
</section>

<div class="album py-2">
23


<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

<div class="col">
<div class="card shadow-sm" >

<div class="container p-0 mb-4" width="299" height="225" >
<img
src="https://media.contentapi.ea.com/content/dam/ea/fifa/fifa-
23/common/athletes-and-ambassadors/f23-ambassadors-vinicius-jr-
16x9.jpg.adapt.crop16x9.652w.jpg" class="img-fluid" alt="..." width="100%"
height="225">
</div>

<div class="card-body">
<h4>VINÍCIUS JR.</h4>
<p class="card-text">Vini es la alegría del futbol
personificada. Es un trabajador incansable, un generoso creador de juego, un
campeón humilde.</p>
</div>
</div>
</div>

<div class="col">
<div class="card shadow-sm">

<img
23/common/athletes-and-ambassadors/f23-ambassadors-son-min-heung-
height="225">
</div>

<h4>HEUNG-MIN SON</h4>
<p class="card-text">Son elevandose de héroe de culto del
club e icono de su seleccién nacional a ganador de la Bota de Oro de la Premier
League.</p>
</div>
</div>
</div>

<div class="col">

<img
23/common/athletes-and-ambassadors/f23-ambassadors-catarina-macario-
height="225">
</div>

<h4>CATARINA MACARIO</h4>
<p class="card-text">Macario este año tendrá su mirada
puesta en conseguir la tercera FIFA
24
Women's World Cup™ consecutiva para Estados Unidos.</p>

</div>
</div>
</div>

<div class="col">

<img
23/common/athletes-and-ambassadors/f23-ambassadors-chloe-kelly-
height="225">
</div>

<h4>CHLOE KELLY</h4>
<p class="card-text">Chloe Kelly con su segundo gol para las
Leonas, coronó a Inglaterra como campeona de Europa.</p>
</div>
</div>
</div>

<div class="col">

<img
23/common/athletes-and-ambassadors/f23-ambassadors-jude-bellingham-
height="225">
</div>

<h4>JUDE BELLINGHAM</h4>
<p class="card-text">Con solo 19 años, es uno de los
jugadores mas jóvenes en ser incluidos en el Equipo de la Temporada de la
Bundesliga.</p>
</div>
</div>
</div>

<div class="col">

<img
23/common/athletes-and-ambassadors/f23-ambassadors-virgil-van-dijk-
height="225">
</div>

<h4>VIRGIL VAN DUK</h4>
25
<p class="card-text">Nada puede superar a Virgil. Su aplomo,

elegancia y potencia forman ya parte del folclore liverpuliano.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<script
integrity="sha384-
</script>
<script
integrity="sha384-
</script>
</body>
</html>
*******************************************************************************
26
Express y rutas
27
package.json
{
"name": "ejercicio1",
"version": "1.0.0",
"description": "Ejercicio Express y Rutas",
"main": "index.js",
"scripts": {
},
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
index.js
// importar paquete Express
// crear aplicación en Express

// invocando archivo de manejo rutas

app.use('/',rutas);
app.use('/public', express.static(path.join(__dirname, 'public')))
// Servidor
console.log('Aplicación iniciada en http://localhost:3000');
});
urls.js
// Gestionador de rutas
28

// Manejadores de rutas
});
router.get('/instruments',function(req,res){
res.sendFile(path.join(__dirname+'/instruments.html'));
});
router.get('/support',function(req,res){
res.sendFile(path.join(__dirname+'/support.html'));
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
integrity="sha384-
</head>
<body>
<div class="text-center margin m-3">
<img width="100" src="./public/Yamaha.jpg"/>
</div>
<nav class="nav justify-content-left border ">

<a class="nav-link" href="./instruments">Instrumentos</a>
<a class="nav-link" href="./support">Soporte</a>
</nav>
<div class="text-center m-4">

<h1>The Home Page</h1>
</div>
<div>
<img src="./public/Trumpet.jpg"/>
</div>
</body>
</html>
instruments.html
29
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
<title>Instruments</title>
</head>
<body>
</div>
<nav class="nav justify-content-left border">

</nav>
<div class="text-center m-4">

<h1>The Instruments Page</h1>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-around;" class="m-
3">
<div>
<div>
<img width="250" src="./public/clarinet.jpg" />
</div>
<div>
<h3>Clarinets</h3>
</div>
</div>
<div>
<div>
<img width="250" src="./public/sax.jpg" />
</div>
<div>
<h3>Saxophones</h3>
</div>
</div>
<div>
<div>
<img width="250" src="./public/flute.jpg" />
</div>
<div>
<h3>Flutes</h3>
</div>
</div>
</div>
</body>
</html>
support.html
<!DOCTYPE html>
<html lang="en">
<head>
30
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
<title>Support</title>
</head>
<body>
</div>
<nav class="nav justify-content-left border">

</nav>
<div class="text-center m-4" style="background-color: black;">

<h1 style="color: white;">The Support Page</h1>
</div>
<div class="text-center">
<h4>
Contact us
</h4>
<h4>
Firmware / Software Updates
</h4>
<h4>
FAQs
</h4>
<h4>
Manual Library
</h4>
<h4>
Warranty Information
</h4>
<h4>
Product Registration
</h4>
<h4>
Support Services
</h4>
</div>
</body>
</html>
31
Express y Middleware
package.json
{
"name": "expressmiddleware",
"version": "1.0.0",
"description": "Ejercicio Express y Middleware",
"main": "index.js",
"scripts": {
},
32
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
index.js
// importando paquete express

var cont = 0 //contador
app.use('/public', express.static(path.join(__dirname, 'public'))) //archivos
estaticos
// Middleware
const middleware = function(req,res,next){
cont++
console.log('Ejecución de middleware nro: ', cont);
next();
};
// Invocando middleware
app.use(middleware);
// Manejador de rutas
app.use('/',rutas);
// levantando servidor
console.log('Servidor iniciado en http://localhost:3000');
});
urls.js
// Creando manejadores de rutas

});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
33
</head>
<body style="background-color: beige;">
<img width="200" src="./public/Meiji.png"/>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-around;">

<div>
<img src="./public/Foto1.jpg" class="img-fluid rounded" width="200">
</div>
<div>
</div>
<div>
</div>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-around; margin-top: 50px;">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</body>
</html>
6. CONCLUSIONES DE LA PRÁCTICA:
a) Con la elaboración de la experiencia de practica se pudo apreciar el alto rendimiento al ejecutar
la aplicación, dado que Node.js se ejecuta a tiempo real, por ende, se entiende que Node se
implementa cuando se realizaran operaciones como acceso a la base de datos o ficheros y en
aplicaciones que operan a tiempo real como los juegos en línea.
b) Por otro lado, tenemos a Express, este Framework minimalista de fácil instalación el cual nos
ayudó a simplificar el proceso de desarrollo que ya teníamos con Node.js, se percibió las
diferencias en la gestión de rutas entre Express y Node donde notamos como Express es más
fácil de mantener.
c) Express es un marco de aplicación web minimalista con grandes ventajas, pero también
necesitamos agregar bibliotecas y funciones de terceros para expresar todo su potencial.
d) Node.js le permite crear cualquier aplicación que pueda crear en cualquier otro lenguaje de
propósito general como Java, C, Python o Ruby.
e) ExpressJS permite manejar rutas de manera práctica y sencilla, haciendo que la aplicación
cuente con una mayor escalabilidad.
f) El middleware en ExpressJS puede ayudarnos a realizar operaciones que no son visibles al
usuario, de modo que se puedan registrar cuantas veces se solicitó una página o a que hora se
pulsó un botón. De este modo podemos identificar ataques de solicitud como también guardar
registros de asistencia, entrada y salida.
34
7. CUESTIONARIO
1. ¿Qué es un framework?
Un framework es un esquema o marco de trabajo que trabaja con Node.js y ofrece una
estructura base para elaborar un proyecto con objetivos específicos
2. ¿Qué es un entorno de ejecución?
Un entorno de ejecución es un servicio de máquina virtual que sirve como base software para
la ejecución de programas. En ocasiones pertenece al propio sistema operativo, pero también
se puede instalar como software independiente que funcionará por debajo de la aplicación.
3. ¿Cuál es la diferencia entre Node JS y Express?
Node. js se utiliza para crear aplicaciones controladas por eventos, E/S del lado del servidor.
Express. js utiliza enfoques de Node.
4. ¿Cuáles son las ventajas o características más resaltantes de Express?
Análisis del cuerpo de las peticiones HTTP.
Enrutado y mejor organización del código.
Cabeceras automáticas en las respuestas.
Determinación de las cabeceras apropiadas para las respuestas.
Parámetros URL análisis del query string.
Análisis de las cookies.
5. ¿Indique un ejemplo de una situación en la quería útil utilizar un Middleware en una
aplicación web?
Middleware es software que proporciona servicios y funciones regulares además de las
aplicaciones proporcionadas por el sistema operativo. Por lo general, se ocupa de la gestión
de datos, los servicios de aplicaciones, las comunicaciones, la autenticación y la gestión de
API.
6. ¿Haga un cuadro comparativo de Node JS y otro entorno virtual de ejecución similar
conocido en el mercado?
Node.js Bun.js
Agrupar una plantilla básica de React toma 6 Compatible con JSX, Typescript y TSX.
segundos. Agrupar una plantilla básica de React toma 8ms.
Un servidor HTTP sin procesar de node.js maneja Un servidor HTTP sin procesar de bun.js maneja
70k solicitudes por segundo. 152k solicitudes por segundo.
Mas lento que bun.js Mas rápido que NPM.
Soporta Next.js No es compatible con Next.js en su totalidad.
Posee un amplio soporte y documentación. No tiene un soporte completo y documentación.
Usa JavaScript V8 de Google. [3] Usa JavaScriptCore en lenguaje Zig.[3]
7. ¿Haga un cuadro comparativo de Express y otro framework similar conocido en el

mercado?
Express Koa
Aplicación de middleware con la función de Sigue el paradigma de async/await para definir su
app.use() funcion de middleware.
Usa la tecnología de devolución de llamada. Mejor rendimiento que Express.
Incluye middleware. Usa la funcion ES6 Generator, evitando las
Utiliza los objetos req, res, next. devoluciones de llamada.
Incluye enrutamiento y plantillas.[4] Es más modular.
Menos susceptible al hacking.[4]
8. ¿Averigue que frameworks o plataformas están involucrados en las siguientes pilas o

stacks de desarrollo MERN, MEVN, MEAN?
La M significa MongoDB, esta base de datos NoSQL, la E hace referencia a Express, la R a
react y N a node, por ende, MERN es Mongo, Express, React y Node, MEVN significa
Mongo, Express, Vue y Node y MEAN es Mongo, Express, Angular y Node.
35
9. ¿Cómo se llama el gestor de paquetes con el que cuenta Node JS?

El gestor de paquetes de Node es NPM.
10. ¿Cuántas rutas como máximo puede manejar un archivo.js en Express?
No existe una cantidad de rutas máxima que pueda manejar Express, es libre de recibir la
cantidad de rutas que requiera para el desarrollo de su aplicación.
8. BIBLIOGRAFÍA
[1] Qué es Node.js y para qué sirve. (s. f.-a). Blog de LucusHost.
https://www.lucushost.com/blog/que-es-node-js/
[2] ¿Qué es Express.js? Todo lo que Debes Saber. (s. f.). Kinsta. https://kinsta.com/es/base-de-
conocimiento/que-es-express/
[3] N. Romankiv. "Is Bun.js the Node.js killer?!" Medium. https://levelup.gitconnected.com/is-bun-

js-the-node-js-killer-ffeb0f89196a (accedido el 13 de noviembre de 2022).
[4] "Koa vs.Express - Filosóficamente, Koa apunta a "arreglar y reemplazar el nodo", mientras que
Expr - Español". Runebook.dev. https://runebook.dev/es/docs/koa/koa-vs-express.md (accedido el
13 de noviembre de 2022).
36

Práctica #11: Node JS y Express: Desarrollo de Aplicaciones

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Práctica #11: Node JS y Express: Desarrollo de Aplicaciones

Cargado por

Copyright:

Formatos disponibles

UCSM Esc. Prof.

de Ingeniería de Sistemas INFORME DE PRÁCTICAS

© IEEE 2013 The Institute of Electrical and Electronics Engineers, Inc.

PRÁCTICAS DE DESARROLLO DE APLICACIONES

ÍNDICE DE TABLAS Y FIGURAS

Visualización de versión de node y npm

Instalación de express mediante la terminal de VS

4.2 Node JS y MySQL

Conexión entre Node.js y MySQL

4.3 Node JS y plantillas HTML

a) Creando carpeta "nodehtml" para nueva aplicación e ingresar a la misma

npm init --f

c) Instalar paquete file-server

npm install file-server

d) Crear scripts "index.js" e "index.html"

//crear el servidor, se encuentra en escucha y despliega el html

<body style="background-color:#ffbd2e">

<div class="px-4 pt-5 my-5 text-center border-bottom">

4.4 Aplicación Básica en Express

a) Creando carpeta "express" para nueva aplicación e ingresar a la misma

c) Instalar paquete Express

d) Abrir archivo "package.json" para verificar instalación de paquete express

e) Crear scripts "index.js" para ejemplo de Express y ejecutarlo

//servidor de escucha que desplega la ruta http

4.5 Manejo de Rutas en Express

// crear aplicación en Express

// invocando archivo de manejo rutas

<p class="col-md-8 fs-4">Express. js es un framework de

4.6 Manejo de Middleware en Express

// Creando manejadores de rutas

var http = require('http'),

//crear el servidor, se encuentra en escucha y despliega el html

Natus Vincere, and Team Spirit; they will compete in

Aplicación básica con express:

//servidor de escucha que desplega la ruta http

<div class="bg-image" style="background-image:

Women's World Cup™ consecutiva para Estados Unidos.</p>

<p class="card-text">Nada puede superar a Virgil. Su aplomo,

// crear aplicación en Express

// invocando archivo de manejo rutas

app.use('/public', express.static(path.join(__dirname, 'public')))

var express = require('express');

<nav class="nav justify-content-left border ">

<div class="text-center m-4">

<nav class="nav justify-content-left border">

<div class="text-center m-4">

<nav class="nav justify-content-left border">

<div class="text-center m-4" style="background-color: black;">

var app = express();

// Creando manejadores de rutas

<div style="display: flex; flex-direction: row; justify-content: space-around;">

7. ¿Haga un cuadro comparativo de Express y otro framework similar conocido en el

8. ¿Averigue que frameworks o plataformas están involucrados en las siguientes pilas o