MERN

Full Stack para desarrollo Web. Stack se refiere a la pila de herramients utilizada para
desarrollo.

M por Mongo DB

Base de datos NoSQL orientada a documentos y grandes cantidades de datos. Los datos
son almacenados en un formato similar a json llmado Bson. Las tablas se conocen como
colecciones y los registros como documentos.

Se usa con un ORM llamado mongoose ya que al trabajar con MERN no hay soporte para
las vistas, la autenticacion, los correos y otros servicios, estos tienen que ser configurados
por nosostros. No es lo mismo al trabajar con Laravel que ofrece un paquete completo para
cubiri estas configuraciones.

E por Express JS

Es una herramienta para crear un servidor. En JS a diferencia de rails o laravel no tiene un

sistemas de vistas definido , ni orm, ni sistema de autenticacion como se menciono
anteriormente.

Express JS en un framework de backend, Un framework es un conjunto de reglas y

convenciones que se usan para desarrollar software de manera más eficiente y rápida. Estos
marcos de trabajo se emplean para ahorrar tiempo y esfuerzo en el desarrollo de
aplicaciones, ya que proporcionan una estructura básica que se puede utilizar como punto
de partida. Además, los frameworks también ofrecen soluciones a problemas comunes en el
desarrollo de software, lo que significa que los desarrolladores pueden centrarse en las
funcionalidades específicas de su aplicación en lugar de perder tiempo resolviendo
problemas técnicos.

Proporciona un conjunto de herramientas para aplicaciones web, peticiones y respuestas

HTTP, enrutamiento y middleware para construir y desplegar aplicaciones a gran escala y
preparadas para la empresa.

También proporciona una herramienta de interfaz de línea de comandos (CLI) llamada

Node Package Manager (NPM), donde los desarrolladores pueden obtener paquetes
desarrollados. También obliga a los desarrolladores a seguir el principio de No te repitas
(DRY).

Express.js se utiliza para una amplia gama de cosas en el ecosistema

JavaScript/Node.js — puedes desarrollar aplicaciones, endpoints de API, sistemas de
enrutamiento y frameworks con él.
R por React

Se implementa react ya sea con next, remix para la renderizacion de las vistas de la
palicacion

N por Node JS

Es un entorno de ejeccuion en JS que se encuentra en el servidor. Originalmente JS tiene su

entorno de ejecucion en los navegadores, es decir los navegadores permiten la compilacion
de JS a lenguaje de maquina, pero esto solo se hacia en laos navegadores, es decir en el
lado del Cliente. Su creador Ryan Dahl en el año 2009 creo Node JS basado en el entorno
de ejecucion V( de Chrome para dar soporte a JS en el lado del servidor.

Entre sus ventajas se encuentra lagran cantidad de librerias disponibles paa integrarlos en
proyectos con NPM. Puede consultar bases de datos , autenticar usuarios, manejar rutas y
mucho mas

¿Qué es el desarrollo web moderno?

El desarrollo web moderno consiste en la construcciones de aplicaciones frontend para

conectarse servidores de los cuales envían y reciben datos. Las aplicaciones frontend
utilizan el enfoque single-page. En este el cliente se comunica con el backend vía JSON,
GraphQL, XML, text, binary streams y otros formatos que son transmitidos vía HTTP.

El servidor se comunica con las bases de datos y otros servicios. En otras palabras, actúa
como punto intermedio entre la aplicación frontend y la base de datos y otros servicios. El
servidor hace cosas que la capa de frontend no puede hacer como: autenticación, validación
de datos, trabajo con archivos del sistema, encriptación, etc.

La forma en la que el servidor se comunica con el frontend y viceversa es mediante varios

endpoints identificados por direcciones URL en concordancia con el estándar HTTP.
Cada petición de datos tiene un URL, cabeceras y cuerpo de mensaje.

La implementación de servidores es aquella en donde node aparece. Node es utilizado para

implementar servidores de backend los cuales son frecuentemente API’s REST basadas
en JSON (así como otros formatos).

Node es un framework por si mismo pues ofrece mecanismos de muy bajo nivel. El
framework express es usualmente utilizado para implementar aplicaciones REST en
servidores Node.

PASOS PARA INICIAR

Crear una carpeta con el nombre del proyecto, abrirla en vs code, dentro de ella crear una
carpeta llamada backend.

abrir la terminal, comando cd backend para ir a ese directorio y comando:

npm init

Llenar los campos requeridos

Instalar la dependencia de Express y cuando se termina de ejecutar el comando esto crea el

archivo package.json, asi como la carpeta node modules

 Crear el archivo index.js que es el archivo que tendra la configuracion del servidor,
para esto se usa commonJS

Se crea un archivo llamado index.js, este va a ser el encargado de tener la configuracion de

conexión con el servidor,en index.js se escribe :

const express=require(“express”);

//Esto lo que hace es ir a node_modules, buscar el paquete de express y asignarlo a la

variable express

const app= express();

app.listen(4000,()=>{

console.log (“Servidor corriendo en el puerot 4000”);

})

Para mandar a llamar este archivo hacemos una modificacion en el archivo package.json,
en el area scripts escribimos en lugar de “tests”, colocamos “dev”

"scripts": {
"dev": "node index.js"
}

Esto lo que quiere decir es que al ejecutar el script dev va a llamar a node, va a buscar el
archivo index.js y va a ejecutar su contenido
 ¿Qué es CommonJS (CJS)?

Es probable, sobre todo si no llevas mucho tiempo en el ecosistema Javascript, que te hayas
encontrado con conceptos como CommonJS (CJS), ES Modules (ESM), o incluso algunos
ya menos frecuentes como AMD, System, UMD, IIFE o similares. Dichas siglas o
nombres, suelen hacer referencia al sistema de módulos (importaciones desde otros
archivos) utilizado en Javascript.

CommonJS surge cerca de 2009 como una serie de pautas para crear un sistema de
módulos en el ecosistema Javascript. Algo más tarde, el equipo de NodeJS implementó
parcialmente una versión síncrona de CommonJS, por lo que consigue popularizar un
sistema de módulos no oficial como el que puedes ver a continuación:

js
// module-name.js
module.exports = {
/* ... */
}

// index.js
const module = require("./module-name.js");
const package = require("package");

module.method();

De esta forma, haciendo un require() podemos importar módulos CommonJS que se

exportan con un module.exports desde otros archivos. También es habitual encontrar
importaciones de paquetes que habitualmente residen en la carpeta node_modules,
obteniendo la carpeta principal del campo main del package.json. Este sistema se conocería
más tarde como bare imports (importaciones desnudas), haciendo referencia a que no se
indica una ruta de un archivo, sino un con el nombre del paquete.

Sin embargo, estos require() son creados por NodeJS y no son compatibles directamente
en navegadores, salvo que se preprocese o transpile antes con alguna herramienta como
podría ser un empaquetador o automatizador del estilo de Webpack, Parcel, Rollup, Babel
o similar. Estas herramientas buscan los require() y los sustituyen por el código del
fichero correspondiente, uniendo y empatando todos los archivos Javascript necesarios de
nuestra aplicación web en un sólo archivo Javascript llamado bundle.

¿Qué es body-parser y para qué se utiliza?

Body-parser es una librería de Node.js que se utiliza con Express para analizar y procesar
los datos de solicitudes HTTP, como JSON o datos de formulario. Permite acceder a los
datos del cuerpo de la solicitud en un formato fácilmente utilizable en una aplicación
Node.js.

Usualmente el cuerpo de una petición (payload), contiene información desde una

petición tipo POST cuando un cliente desea crear una nueva entidad/registro o actualizar
uno existente mediante PUT. Los desarrolladores quienes implementan servidores,
requieren frecuentemente acceder a la información del cuerpo de dicha petición.

El módulo npm body-parser permite realizar esta tarea. No es necesario programarla. Solo
se requiere instalar body-parser y habilitar json() así como url-encode como middlewares
para convertir datos a JSON.

¿Qué es Nodemon?

Es una herramienta que nos ayuda a reiniciar nuestro servidor (o algún otro proceso
de nuestra computadora) cada vez que hagamos un cambio en nuestro código:
https://www.npmjs.com/package/nodemon. Toma la finalidad de ejecutarse como un
demonio que vive para ejecutar comandos que deben de mantenerse ejecutando.

Habilitando ESM en lugar de CommonJS

Para trabajar con importacion y expoetacion de modulos debemos modificar el archivo

package.json

"description": "Iniciando con Mern Stack",

"type":"module",
"main": "index.js",

y en el archive index.js ya no se usa require sino import:

import express from 'express'

const app= express();

app.listen(4000,()=>{console.log("Server is running on port 4000")});

Cuando se importan dependencias que se han instalado no hace falta colocar la extension, si
se importan modulos, es decir funciones contenidas en otros archivos que se crearon se
deben especificar la ruta y la extension.
Creando una Base de Datos con MongoDB y Conectando con Compass

Registrarse en Mongo Db, elegir plan free, crear el cluster con los datos por defecto
iniciales, crear el usuario, password y los datos de la conexcion, finish and close.

Descargar e instalar MongoDB Comapss para monitorear la base de datos.

En Mongo DB dar click a connect, seelccionar en este caso conectar con mongoDB
compass, copiar el link de conexión, ir a compass, pegar este link , colocar el password y
dar click a conectar.

Como Conectar la BD de MongoDB con el proyecto

Mogoose

Mongoose es una biblioteca de modelado de datos orientada a objetos (ODM) para

MongoDB y Node.js. Administra las relaciones entre los datos, proporciona validación de
esquemas y se utiliza para traducir entre objetos en el código y la representación de esos
objetos en MongoDB.

Mapeo de objetos entre Node y MongoDB administrado a través de Mongoose

MongoDB es una base de datos de documentos NoSQL sin esquema. Significa que puede
almacenar documentos JSON en él, y la estructura de estos documentos puede variar,
porque que no se aplica como las bases de datos SQL. Esta es una de las ventajas de usar
NoSQL, ya que acelera el desarrollo de aplicaciones y reduce la complejidad de las
implementaciones.
Para instalar mongoose, creamos una terminal, accedemos con cd a la carpeta backend y
alli corremos

Para crear mayor separacion del codigo según su funcionalidad, se crea una carpeta llamda
config dentro de la carpeta banckend, la cual contendra un archivbo llamado db.js, este
archivo contendra el codigo para conectarnos a la base de datos.

Ocultando la conexión de BD en variables de entorno

La url de conexión a mongoDB deb estar oculta, asi como cualquier otra url de ruta de
conexión a BD de nuestra aplicación, par esto se usa las variables de entorno. En MERN
vamos a usar dotenv , instalamos dtenv con npm i dotenv,lo importamos en el archivo
index.js con import dotenv from ‘dotenv’

luego jecutamos el metodo config de dotenv

const app= express();

dotenv.config();

En el archive .env se pueden tenr distintas variables de entorno por ejemplo:

HOLA=Mundo

y en el archivo donde se usan se llama de la siguiente manera:

Ejemplo

console.log(process.env.HOLA)

Esto nos traera un console log de mundo

A lo que se refiere una variable de entorno es que puedes tener cieros valores para localhost
y en produccion otros diferentes.
EXPRESS INICIAR UN PROYECTO

Pasos iniciales

1. Escribir npm init para inicializar el proyecto.

2. Instalar express con npm install express.
3. Crear un nuevo archivo app.js
4. La primera linea que se va a escirbir cuando se desarrolla una aplicación con
expresss (esto en todos los archivos que lo requieran) es:
const express = require(‘express);

Cuando importamos express tenemos acceso a una funcion que nos permite crear
una aplicación de express, es la funcio nde mayor nivel que podemos tener para crear
nuestra aplicación de express.

const app= express();

El llamado de esta funcion nos retorna una aplicación de express, con esto ya se puede
comenzar a definir las rutas.

Normalmente, en este punto se trabaja con una base de datos, para efectos de este curso
inicial se va a simular una base de datos con un archivo que tiene un formato json pero con
un objeto JS.

Como se empiezan a manejar las rutas en Express

Routing en Express (Direccionamiento o Enrutamiento):

Escribir app seguido del metodo get, con los parametros path, como una cadena de
caracteres y como segundo argumento pasamos una arrow function , esta arrow function
toma como paremtros request y response (req y res), ellos tienen los mismos metodos y
propiedades que en Node.En esta arrow function se especifica que va a suceder cuando la
palicacion se encuentre con el path que se le esra dando al metodo get como primer
argumento.

Para enviar respuesta se usa el metodo de res .send Ejemplo

res.send(‘Mi primer Servidor’)

Tembien se debe establecer el puerto:

cuando se este en un ambiente de produccion, este puerto se asigna de forma dinamica a la
aplicación, esto formara parte de las variables de ambiente del servicio que sirva de hosting
para la aplicación, estos datos se guardan en el archivo .env

y la constante puerto se debe definir de esta forma:

const PUERTO = process.env.port || 3000;

Esto quiere decir que se va a asignar la variable port definida en el archivo .env o el puerto
3000, cualquiera de los 2 que exista.

En express tambien tenemos el metodo listen, es un metodo de app

app.listen(PUERTO, ()=>{

console.log(`El servidor esta escuchando en el puerto ${PUERTO}`)

);

Este metodo recibe 2 argumentos: El puerto y una arrow function que define el servidor
cuando comience a escuchar.

AGREGAR RUTAS

app.get(‘/api/cursos’,(req,res)=>{

res.send(infoCursos)

});

PARAMETROS DE RUTA – PARAMETROS URL

Para establecer las rutas por parametro se colocan en la url 2 puntos (:) luego de la barra
seguidos del nombre del parametro url. Ese parametro se extrae del objeto de solicitud
request.

Importante: el nombre que va despues de los 2 puntos debe coincidir con alguna de las
llaves aasignadas en el archivo infoCursoso, en este caso debe coincidir con el nombre del
campo en una BD relacional o nombre de llave en una BS NoSQL

Ejemplo
app.get('/api/cursos/programacion/:lenguaje',(req,res)=>{
const {lenguaje}=req.params;
 const
resultados=infoCursos.programacion.filter(curso=>curso.lenguaje==lenguaje);
if (resultados.length===0){
return res.status(404).send(`No se encontraron resultados para el lenguaje $
{lenguaje}`);
}

Tambien podemos tener mas de 1 parametro de busqueda en la url

app.get('/api/cursos/programacion/:lenguaje/:nivel', (req, res) => {

const lenguaje = req.params.lenguaje;
const nivel = req.params.nivel;

const resultados = infoCursos.programacion.filter(curso => curso.lenguaje ===

lenguaje && curso.nivel === nivel);

if (resultados.length === 0) {
return res.status(404).send(`No se encontraron cursos de ${lenguaje} de nivel
${nivel}`);
}

res.send(JSON.stringify(resultados));
});

PARAMETROS QUERY

Sirven para realizar consultas y ordenarlas de acuerdo a ese parametro query. Por ejemplo

https://localhost:3000/cursos/programacion/python/?ordenar=vistas

parametro valor
query campo en la BD

if (req.query.ordenar === 'vistas') {

return res.send(JSON.stringify(resultados.sort((a, b) => a.vistas - b.vistas)));
}