Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

3 D铆as
11 Hrs
4 Min
49 Seg

Routing con Express.js

4/27
Recursos

Aportes 71

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

驴Quieres compartir tu servidor con tu familia pero no lo pueden ver en sus celulares? 馃槙 馃槙

Trat茅 de compartir esto como comentario pero era un poco largo xd, aqu铆 dejo un mini turorial en platzi para que despliegues tu servidor en tu red LAN y puedas compartir tus hello worlds con tu familia 馃槃 馃槃 馃槃

Express ocupa el metodo get, para recibir las rutas en el servidor

Se puede responder con un mensaje

res.send('Contenido de respuesta');

O una respuestas en formato JSON

res.json({
    name: 'Producto 1',
    price: 1000
  });

Se recomienda instalar el plugin
JSON Viewer

req y res

req es un objeto que contiene informaci贸n sobre la solicitud HTTP que provoc贸 el evento. En respuesta areq, usa respara devolver la respuesta HTTP deseada.

el routing se se refiere a determinar c贸mo una aplicaci贸n responde a una solicitud de cliente a un punto final en particular) y un m茅todo de solicitud HTTP espec铆fico.

  • La definici贸n de la ruta adopta la siguiente estructura:
app.METHOD(PATH, HANDLER)
  • app es una instancia de express.

  • METHOD es un m茅todo de solicitud HTTP, en min煤sculas.

  • PATH es una ruta en el servidor.

  • HANDLER es la funci贸n ejecutada cuando la ruta coincide.

Para los que gustamos un poquito mas del estilo Dark, ac谩 un peque帽o aporte sobre JSON Viewer:

  1. Vamos a la configuraci贸n de la extension:
  2. En el select Theme tenemos una secci贸n de estilos Dark a escoger:
  3. Por 煤ltimo, a disfrutar de su nuevo dark theme鈥 馃馃馃

Checa la documentaci贸n de Express.js relacionada con Routing y as铆 entender qu茅 es. c贸mo funciona y c贸mo puedes usarlo para desarrollar tus apps

en firefox no es necesario instalar ningun tipo de plugin, se abre automaticamente, adjunto foto:

aunque si les molesta ver ese formato pueden bajarse esta extension: https://addons.mozilla.org/es/firefox/addon/jsonview/ para que se vea de la siguiente manera:

Amando este curso!! 馃槂

Yo uso Opera y funcion la misma extension que para Google Chrome

Les comparto esta explicaci贸n sobre express que me parecion interesante:

const express = require('express');

var app = express();

app.get('/', (req, res) => {
    res.send('Hello Express')
});

app.listen(process.env.PORT || 3000)

Linea 1: Importas express con require

Linea 2: Inicializamos el app express en la variable app

Linea 3: .get decidira que cuando obtiene esa ruta en especifico 麓麓./麓麓 debe dar la respuesta que se especifica en la funcion. Esta toa dos argumentos 1: la URL y 2: a funci贸n que le dice a express qu茅 enviar a la persona que hace la solicitud 麓麓hello express麓麓.

Linea 4: .listen vincular谩 la aplicaci贸n al puerto de nuestra m谩quina.

As铆 me gustan los videos, al grano sobre el tema y cortos.

Aspectos b谩sicos del routing en Express.js

La definici贸n de ruta tiene la siguiente estructura:
app.METHOD(PATH, HANDLER)
Donde:

  • app es una instancia de express.
  • METHOD es un m茅todo HTTP, en min煤sculas.
  • PATH es una ruta en el servidor.
  • HANDLER es la funci贸n que se ejecuta cuando la ruta coincide.

Con Brave tambi茅n funciona la extensi贸n:

Yo uso firefox developer edition y me formatea el json en automatico.

Para los que usamos Firefox

Podemos enviar p谩ginas en el JSON:

app.get('/home', (req, res) => {
  res.json({
    home: 'home page',
    index: '/'
  })
})

JSON (JavaScript Object Notation)

Es el formato de texto sencillo con el que se comunican el cliente y el servidor mediante el protocolo HTTP y el est谩ndar de construcci贸n de APIS: REST no SOAP.

馃 Espero le sirva el aporte 馃

Te amo Firefox, no tuve que descargar nada porque me entiendes.

Yo uso desde hace tiempo la extensi贸n JSON Viewer, es una total maravilla cuando estas trabajando desde el front y quieres ver si la ruta que utilizaste funciona bien y que datos vienen

Buenas noches. dejo incluido el mismo ejercicio pero con typescript. https://github.com/bdavidegonzalez/my-store

Pueden usar firefox dev edition para mi es el mejor y no hay que descargar extensiones para visualizar JSON, directamente te los muestra como cuando inspeccionas c贸digo y tiene un filtro para JSON

Solicitudes REST con Curl

Conocido como 鈥淐liente URL鈥 es una utiler铆a para hacer solicitudes y tranferir informaci贸n.

.
Ejemplo, tenemos que:

curl localhost:3000

Salida

Hola a mi server de express

Excelente extension! No la conocia, mil gracias!

Se ve genial con esta extensi贸n!!

Link para instalar JSON Viewer

Para quienes usan opera, les recomiendo esta extensi贸n

https://addons.opera.com/es-419/extensions/details/json-lite/

As铆 est谩 el index.js, puerto era el 9123 y funciona sin problema, por estandarizarme en el curso lo cambie a 3456, funciona tambi茅n

const express = require('express');
const app = express();
const port = 3456;

app.get('/', (req, res)=>{
  res.send("Mi tienda en express");
});

app.get('/otraRuta', (req, res)=>{
  res.send("Mi otra tienda en express");
});

app.get('/:id', (req, res)=>{
  res.send(`Mi tienda en express (ruta es = a endpoint) n煤mero ${req.params.id}`);
});

app.get('/json/:id', (req, res)=>{
  res.json({
    id:req.params.id,
    producto: req.params,
    precio:1
  });
});


app.listen(port, ()=>{
  console.log(`Mi tienda en el puerto ${port}`);
});
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) =>{
  res.send("Hola mi server en Express");
});

app.get('/nueva-ruta', (req, res) => {
  res.send('Hola, soy la nueva ruta');
});

app.get('/products', (req, res) => {
  res.json({
    name: 'Product 1',
    price: 1000
  })
})

app.listen(port, () =>{
  console.log("My port: " + port);
});

const express = require(鈥榚xpress鈥);
const app = express();

const port = 3001;

app.get(鈥/鈥, (req, res) => {
res.send(鈥榤i server en express鈥);
})
app.get(鈥/nueva-ruta鈥, (req, res) => {
res.send(鈥榥ueva ruta鈥);
})
app.get(鈥/productos鈥, (req, res) => {
res.json({
name: 鈥榩roductos1鈥,
price: 鈥1000鈥
});
})

app.listen(port, () => {
console.log('listening on port 鈥 + port);
});

馃槏

Mi respuesta de categor铆as con un Json que tiene dos propiedades, el nombre de la categor铆a y un array de productos.

{
  "name": "Categorie 1",
  "products": [
    {
      "name": "Product 1 ",
      "price": 1000,
      "quatity": 10
    }
  ]
}

Tanto Firefox como Edge tienen soporte para JSON鈥 prefiero el de Firefox, pero esto es lo que muestra Edge:

Yo solo saque la ip de mi equipo con el comando 鈥渋pconfig鈥 (en Windows) desde una terminal, despu茅s solo abr铆 un navegador en mi celular y sustitu铆 el localhost por la ip
eje. 192.168.100.111:3000
Saludos

Conciso y al grano, como debe ser, sin ahondar en ejemplos rebuscados que solo confunden y estresan al estudiante. El mejor profesor que vi en Platzi hasta ahora!

Este es mi nuevo aporte probando con el formato de texto y el formato de json, que me parece ideal en el sentido de que se generen secciones seg煤n la informaci贸n que queremos consultar.

const express = require('express');
const app = express();
const port = 8080;

app.get('/', (req, res) => {
    res.send('hola mi server en express');

});

app.get('/nueva-ruta', (req, res) => {
    res.send('Hola, soy una nueva ruta');

});

app.get('/productos', (req, res) => {
    res.json( {
        name: 'Vestido tipico', 
        price: 1000
    });

});

app.get('/categorias', (req, res) => {
    res.json([{
            name: 'Polleras',
        },
        {
            name:'Camisas'
        },
        {
            name: 'Pecheras'
        }
]);

});

app.listen(port, () => {
    console.log('Mi port ' + port)
})

Test route

app.get('/products', (req,res) => {
  res.json({
    "ok":"true",
    "works":true
  })
})

En Chrome si se puede ver automaticamnete

Routing con Express

a帽adimos dos nuevas rutas a la app
.
.
una 鈥/items鈥 tendr谩 respuesta de parte del servidor en texto

res.send('...')
app.get('/items', (req,res)=> {
    res.send('hello items')
})

la otra 鈥/products鈥 tendr谩 respuesta de parte del servidor en JSON

res.json({...})
app.get('/products', (req,res)=> {
    res.json({
        name: "products-1",
        price: 3000
    })
})

el c贸digo completo quedar铆a de esta forma
index.js:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req,res)=> {
    res.send('hello home')
})

app.get('/items', (req,res)=> { 
    res.send('hello items')
}) 

app.get('/products', (req,res)=> { 
    res.json({
        name: "products-1",
        price: 3000
    })
}) 

app.listen(port, ()=> {
    console.log(`Listening on port ${port}`)
})

podemos visualizar mejor las respuestas del servidor en formato JSON instalando una extensi贸n de Chrome llamada JSON Viewer

Por lo visto en Firefox no es necesario descargar ninguna extensi贸n, je je. El mismo navegador directamente reconoce cuando la respuesta es un JSON y lo muestra como tal 鉁.

para json les recomiendo https://jsoncrack.com/editor
tambien esta la extension en vscode

// Importando express
const express = require('express');
// Inicializando la aplicacion
const app = express();
// Variable del puerto
const port = 3000;

// Routing
app.get('/', (req, res) => {
  res.send('Hola mi server en express');
});

app.get('/productos', (req, res) => {
  res.json({
    producto1: 'Ordenador',
    price: 1233,
  });
});

app.get('/nueva-ruta', (req, res) => {
  res.send('Hola soy una nueva ruta')
});

// Escuchando al puerto
app.listen(port, () => {
  console.log('Esta corriendo en el puerto' + port);
});
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hola, bienvenido a mi servidor con Express');
});

app.get('/nueva-ruta', (req, res) => {
  res.send('Hola, soy una nueva ruta');
});

//Podemos enviar un JSON
app.get('/productos', (req, res) => {
  res.json([{
    name: 'Producto 1',
    price: 1000
  },
  {
    name: 'Producto 2',
    price: 500
  },
  {
    name: 'Producto 3',
    price: 800
  }]);
});

app.listen(port, () => {
  console.log('Mi puerto ' + port);
});

La extension se llama: JSON viewer

const express = require('express')

const app = express();
const PORT = 3000

app.get('/', (req, res)=>{
  res.send('hola este es mi primer servidor con express')
});

app.get('/nueva-ruta', (req, res)=>{
  res.send('hola, esta es una nueva ruta o end-point')
});

app.get('/products', (req, res)=>{
  res.json(
    {
      name: "Producto1",
      price: 100
    }
  )
});

app.listen(PORT,()=>{
  console.log(`Server on port ${PORT}`)
});

Sobre la extensi贸n de JSON Viewer en Chrome.
Pueden la extensi贸n desde el navegador y agregarle estilos predeterminado y modificar muchos m谩s elementos sobre como se prensenta el JSON.

Json = Diccionario en Python 馃

Una alternativa es https://jsonviewer.stack.hu/

res.json() tambien puede recibir objetos como parametros

app.get('/products', (req, res) =>{
    const data = [
        {
            "id":"1",
            "name":"Guitar",
            "price":"2500"
        },
        {
            "id":"2",
            "name":"Microphone",
            "price":"500"
        }
    ]
    res.json(data)
})

Esto sirve si por ejemplo queremos leer un archivo json que tengamos y que llamemos con require

Una alternativa a la extencion de chrome para visualizar el formato json de una mejor manera es agregar la siguiente linea a su codigo

// config
 app.set('json spaces', 2)

Ahora entiendo lo de las rutas!!

Se recomienda tener las rutas en un archivo aparte esto para poder tener dividido el c贸digo en piezas peque帽as y ser mas f谩cil su manejo a futuro

En platzi no tienen un curso donde expliquen exactamente que es un JSON. Para quienes tengan est谩 duda le recomiendo este curso de YouTube, est谩 muy sencillo https://youtu.be/lLsYjzpSDyA

As铆 quedaron:

Este curso esta muy bueno 馃槂 estoy aprendiendo mucho

Go!!!

Muy buena esa extension, ayuda a ver mejor la informacion

En Firefox no hace falta instalar una extension para ver los JSON, tiene un visor integrado bastante bueno.

Perfeca clase, yo intente manda mi response en formmato JSON mandando una llista de objetos, pero no mostraba nada 馃槮 asi que lo pase a formato send:

// practicando una nueva ruta
app.get('/categories', (req, res) => {
  res.json({
    name: 'On sale',
    type: 'clothes'
  });
});

Aca dejo mi aporte

Agregue la ruta user

Me encanta como vamos en este curso, el profesor explica todo a detalle y se entiende muy bien.

La verdad escrib铆 tremendo manuscrito, pero le di a la opci贸n de enlace y me borro 1 hora de trabajo, lo 煤nico que no se perdi贸 fue el pr贸logo en que me apoye en ChatGPT para dar una breve y entretenida info a cerca de node :/ 隆Disfr煤tenla viajeros! En los albores del siglo XXI, cuando las vastas redes de informaci贸n ya hab铆an tejido su telara帽a alrededor del globo, emergi贸 un nuevo poder en el reino de la programaci贸n. Este nuevo entorno, conocido como Node.js, fue forjado por el visionario Ryan Dahl en el a帽o 2009. Inspirado por el deseo de expandir las capacidades de JavaScript, el lenguaje que dominaba los confines de los navegadores web, Dahl busc贸 llevarlo m谩s all谩, a las profundidades y vastedades de los servidores y sistemas operativos. Node.js naci贸 del motor V8 de Google, un coraz贸n pulsante capaz de ejecutar JavaScript a velocidades antes inimaginables. Este nuevo reino se caracterizaba por su naturaleza asincr贸nica y no bloqueante, donde el bucle de eventos y las promesas tej铆an una danza de operaciones eficientes y multitarea, permitiendo a las aplicaciones realizar m煤ltiples tareas simult谩neamente sin caer en el letargo de los procesos bloqueantes. Con el nacimiento de npm, el gran repositorio de m贸dulos, Node.js no solo se fortaleci贸, sino que tambi茅n cre贸 un vasto mercado de herramientas y librer铆as. Este mercado se convirti贸 en el caldo de cultivo para que desarrolladores de todos los confines del mundo pudieran compartir sus creaciones y soluciones, fortaleciendo as铆 el ecosistema de Node.js. As铆, Node.js se estableci贸 no solo como un entorno de ejecuci贸n, sino como una piedra angular en la construcci贸n del moderno desarrollo web y de aplicaciones. Desde peque帽as aplicaciones personales hasta grandes sistemas distribuidos, Node.js ha continuado expandiendo su imperio, llevando la vers谩til y omnipresente lengua de JavaScript a cada rinc贸n del reino digital. Este pr贸logo busca honrar esos inicios y reconocer el papel de Node.js como un puente entre mundos, una herramienta de poder inmenso que ha transformado la forma en que construimos y operamos en el vasto reino de la tecnolog铆a.