Routing con Express.js

¿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.

Solicitudes REST con Curl

Conocido como “Cliente 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

Para los que usamos Firefox

• Una extensión JSON View

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

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}`);
});

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!

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(‘express’);
const app = express();

const port = 3001;

app.get(’/’, (req, res) => {
res.send(‘mi server en express’);
})
app.get(’/nueva-ruta’, (req, res) => {
res.send(‘nueva ruta’);
})
app.get(’/productos’, (req, res) => {
res.json({
name: ‘productos1’,
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 “ipconfig” (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

Yo les recomiendo esta extensión de Chrome JSON-handle
https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj

Está super genial!!!
Screen Shot 2023-03-23 at 8.24.48.png

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 ✨.

// 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

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.