Crea una cuenta o inicia sesi贸n

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

Routing con Express.js

4/27
Recursos

Aportes 63

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

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

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

Amando este curso!! 馃槂

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:

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.

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

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鈥 馃馃馃

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.

Con Brave tambi茅n funciona la extensi贸n:

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

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.

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

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.

Para los que usamos Firefox

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.