En esta cuarta sesión de la escuela desarrollo web con node js conocerás qué es EJS Express y cómo usarlo para añadir javascript a un archivo HTML. Para continuar con el desarrollo full stack es clave conocer métodos para pasar datos de front al back-end y viceversa, de esta manera retroalimentar constantemente nuestra web en general.
Esta nueva sesión nos abre la puerta a conocer nuevos e infinitos caminos para desarrollar una web y aunque en el video de esta sesión lo hacemos con un blog, puedes crear cualquier tipo de web, así que vamos a empezar.
Contenido
Lo que vas a necesitar
- Repositorio: haz click aquí para ver el repositorio del curso completo.
- EJS: haz click aquí para ver la documentación de EJS.
Qué es y para qué sirve EJS
API Mailchimp NodeJS: cómo conectar y crear miembros en lista
Como sabemos uno de los mejores métodos para promover nuestro negocio es email marketing y si usamos…
Google Auth2.0 NodeJS: inicio de sesión con google
Una de las herramientas más importantes para nuestro sitio o desarrollo web es el inicio de sesión, …
CRUD Mongodb Atlas
En esta sexta sesión de la escuela desarrollo web con Node Js veremos cómo implementar CRUD Mongodb …
En sus siglas Embedded JavaScript templating, o en español Plantillas JavaScript incrustadas, es un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple. Uno de los mejores motores de plantillas de express y por ende, para Node js.
En otras palabras, las variables, funciones, entre otras ideas que tengamos para nuestro desarrollo, EJS nos permite en la renderización del archivo, pasar variables y así mostrarlas en el documento HTML final. Por ende, podremos retroalimentar nuestro desarrollo en front con datos que el visitante otorgue o bien, dependiendo del comportamiento en la misma web.
Instalar EJS
La instalación de EJS tiene varios puntos pero son sencillos aunque antes de iniciar cabe aclarar que ya debemos tener nuestra aplicación inicializada en npm, con el archivo server.js y así mismo, asignado como mínimo el método listen. Ahora lo que haremos será lo siguiente:
npm install ejsEscribimos el comando en la terminal y esperamos que termine de instalar. Una vez suceda vamos a pasar a la solicitud, como todos los paquetes instalados, asi:
const ejs = require('ejs');Ahora el siguiente paso, es crear un folder con el nombre «views», justo dentro del folder del repositorio, es decir, por fuera de cualquier otro folder. Ahora, vamos a escribir el comando:
app.set('view engine', 'ejs');Este comando debemos usarlo por defecto en nuestra configuración para indicar cómo y donde se encontrarán los archivos EJS en nuestro programa en general. Ahora ya puedes iniciar a crear archivos con la extensión «.ejs» para así comenzar a usar las ventajas del mismo.
Layouts EJS
Con layout podremos comenzar a crear nuestras plantillas. En sí una plantilla es algo que se conserva en varias o todas las páginas pero solo cambian ciertos valores y esto no solo lo vemos en las webs sino también en una aplicación móvil.
Tan simple como entrar a nuestra cuenta de facebook, la cual es una plantilla donde todos los elementos se encuentran en lo smismos lugares para todos los usuarios en el mundo, pero solo cambian los datos.
Ahora con layout ejs podemos crear un header y footer fijo e independiente para todas las páginas de la web. Para hacerlo primero crea dos archivos: header.ejs y footer.ejs. Dentro de cada uno crea las siguientes secciones como base:
<!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">
<title>home</title>
</head>
<body>
<!-- Contenido body -->El anterior es header, y ahora para footer:
<!-- Contenido body -->
</body>
</html>Una vez creados ambos archivos ya puedes pasar a incluirlos en los archivos que desees como home, about us, faq, my account, entre otros. Para hacerlo, abre uno de los archivos ejs y luego escribe los comandos:
<%- include('header'); -%>
<!-- Contenido -->
<%- include('footer'); -%>y listo! ya sabes cómo crear layouts con header y footer para todas tus páginas usando include.
Tags y Javascript
Por último y más complejo dejamos las etiquetas o tags, para añadir javascript a nuestro html. Para hacerlo vamos a tomar el mismo ejempo que el video: creamos un arreglo de objetos que contiene 3 post boceto
var entradas = [
{
fecha: "3/6/2022",
titulo: "Primera entrada",
contenido: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa. Dui sapien eget mi proin sed libero enim. Est ultricies integer quis auctor elit. Felis imperdiet proin fermentum leo. Morbi tristique senectus et netus et malesuada. Eget mi proin sed libero enim. Vitae auctor eu augue ut lectus arcu. Aliquam etiam erat velit scelerisque in dictum. Imperdiet dui accumsan sit amet.",
},
{
fecha: "3/7/2022",
titulo: "Segunda entrada",
contenido: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa. Dui sapien eget mi proin sed libero enim. Est ultricies integer quis auctor elit. Felis imperdiet proin fermentum leo. Morbi tristique senectus et netus et malesuada. Eget mi proin sed libero enim. Vitae auctor eu augue ut lectus arcu. Aliquam etiam erat velit scelerisque in dictum. Imperdiet dui accumsan sit amet.",
},
{
fecha: "3/8/2022",
titulo: "Tercera entrada",
contenido: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa. Dui sapien eget mi proin sed libero enim. Est ultricies integer quis auctor elit. Felis imperdiet proin fermentum leo. Morbi tristique senectus et netus et malesuada. Eget mi proin sed libero enim. Vitae auctor eu augue ut lectus arcu. Aliquam etiam erat velit scelerisque in dictum. Imperdiet dui accumsan sit amet.",
}
];Teniendo esta variable creada, para poderla mostrar en el front, debemos primero pasar el valor por el renderizado de la siguiente forma:
app.route("/")
.get(function(req, res){
res.render("home", {todasEntradas: entradas});
});En este caso, en reder agregamos solo el nombre del archivo EJS dentro del folder VIEWS. como segundo argumento, pasamos como objeto «clave: valor» la variable que contiene los 3 primeros post del blog, llamada entradas. Pero esta variable será el valor de todasEntradas, es decir que todasEntradas será la forma en la que usaremos dentro del archivo EJS, en front.
Para esto, copia y pega el siguiente fragmento en la página principal:
<%for(let i =0; i < todasEntradas.length; i++){ %>
<%let posActual = todasEntradas[i]; %>
<!-- POSICION BOCETO -->
<h5><%=posActual.fecha%>.</h5>
<h2><%=posActual.titulo%>.</h2>
<p style="margin-bottom: 50px !important;" > <%=posActual.contenido%>.</p>
<!-- POSICION BOCETO -->
<%}%>Aquí podemos ver varias cosas importantes:
- Para recorrer el arreglo de objetos usamos un for, tal cual como cualquier arreglo javascript.
- Todos los elementos javascript tienen una etiqueta enfrente, con la diferencia de que los datos pasados en render, llevan la etiqueta «<%= » ya que estos contienen un valor que viene del back-end.
- Por otro lado el elemento javascript como «for» o «let» o «abrir y cerrar corchetes» (prácticamente todo javascript) lleva la etiqueta de apertura y cierre «<%».
Hablando un poco del for, vemos que creamos la variable posActual que es precisamente la posición que se está iterando, y lo vemos por el «[i]». Ahora, la posición o post «BOCETO» usamos las etiquetas mencionadas arriba para mostrar tanto la fecha, como título y contenido.
Como el for recorre todo el arreglo, por cada posición crea un nuevo elemento HTML, por ende se verá así:
y listo! de esta manera podemos ver cómo podemos pasar los datos del back-end al front, usando EJS para pasar los datos al renderizar.
Video de ayuda
Producto sugerido
Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.
Quntis Lámpara para monitor de computadora, barra de luz para monitor de pantalla para el cuidado de los ojos, lámpara de tareas LED de lectura electrónica con atenuación automática, barra de lámpara regulable, control táctil, sin deslumbramiento de pantalla, ahorro de espacio, lámparas de escritorio para oficina en casa
- Sin reflejos de pantalla y sin parpadeo, antiluz azul: la barra de luz para monitor de computadora Quntis tiene un diseño óptico asimétrico único que ilumina solo tu escritorio y teclado mientras garantiza que no se reflejen en la pantalla. Gracias a su avanzado sistema de protección ocular, nuestras lámparas de escritorio para oficina en casa bloquean la luz azul y la radiación óptica, aliviando eficazmente la fatiga ocular para proteger tus ojos. Es la opción ideal para estudiantes, diseñadores de pintura y trabajadores de oficina de negocios.
Conclusión
En esta cuarta sesión usamos EJS Express para poder crear plantillas, pasando datos del back-end al front, en la renderización. Este proceso es clave porque se puede retroalimentar la web con los datos que el usuario nos entrega y así mismo comenzar a crear un desarrollo más completo.
