# Express | Método GET - Parámetros de Ruta & Parámetros de Consulta
## Introducción
Las aplicaciones web son una comunicación unidireccional desde el navegador al servidor. El navegador emite una solicitud y el servidor devuelve un recurso (HTML, CSS, JS), esto es lo que llamamos solicitudes `GET`. Puede pensar en las solicitudes `GET` como una solicitud HTTP en la que desea *obtener* algo.
En esta lección, aprenderemos también cómo enviar datos desde el navegador al servidor, y cómo el servidor recibe esos parámetros y los usa para realizar operaciones.
## Creamos nuestro proyecto
Para esta lección vamos a necesitar una aplicación para practicar todos los conceptos, creamos una carpeta `express-get-params` y un archivo`app.js` dentro de ella. También necesitaremos algunos **node_modules**, por lo que debemos ejecutar el comando `npm init`.
Después de crear el `app.js` necesitamos el directorio `views` y un archivo `index.hbs` dentro.
```bash
$ mkdir express-get-params; cd express-get-params
$ npm init
$ touch app.js
$ mkdir views; cd views; touch index.hbs
$ code .
```
En el archivo `app.js`, copie/pegue el siguiente código e instale los módulos`express` y `hbs` usando **`npm install express hbs`**.
```javascript
// app.js
const express = require('express')
const app = express()
const hbs = requiere('hbs')
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.get('/', function (req, res) {
console.log(req)
})
app.listen(3000, () => console.log('Example app listening on port 3000!'))
```
Y finalmente, agreguemos `nodemon`, por lo que no es necesario reiniciar el servidor para cada cambio. En el archivo `package.json`, agregue la siguiente línea dentro del objeto **scripts**:
```javascript
"start": "nodemon app.js",
```
El `package.json` tiene que verse algo así:
```javascript
{
"name": "get-params",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"hbs": "~4.0.1"
}
}
```
:::info
¡Es posible que la versión no sea la misma! ¡No te preocupes por eso!
:::
¡Estamos listos! Vamos a la terminal y ejecutamos el comando **`npm start`**. Deberíamos ver lo siguiente:
Nuestro servidor está listo!
## Peticiones `GET`
Cada vez que navegamos a una URL, hacemos una solicitud GET al servidor, y hay algunas formas en las que podemos enviar datos a nuestro servidor para usar esa información. Aprenderemos dos técnicas para entregar datos a nuestro servidor a través de solicitudes `GET`:
- Parámetros de Rutas
- Parámetros de Query
### Parámetros de Rutas
Los parámetros de ruta son **segmentos de URL con nombre** que se utilizan para capturar los valores especificados en su posición en la URL. Los valores obtenidos se rellenan en el objeto **req.params**, con el nombre del parámetro de ruta especificado en la ruta como **sus respectivas claves**.
Para definir rutas con parámetros de ruta, simplemente especifique los parámetros de ruta en la ruta como se muestra a continuación. Agreguemos el siguiente código a nuestro archivo `app.js`:
```javascript
app.get('/users/:username', function (req, res) {
res.send(req.params)
})
```
Navegamos a **`http://localhost:3000/users/ucom`** en nuestro navegador!
```javascript=
{ username: 'ucom' }
```
Observe que el `:username` se completa en el objeto **req.params** como una `key` y la `cadena` que enviamos en esa posición de la URL es el` value` de esa `key`. Eso significa que podemos reemplazar el `:username` con cualquier cosa que queramos. Por ejemplo, esta vez recibamos un `bookId`:
```javascript
app.get('/books/:bookId', function (req, res) {
res.send(req.params)
})
```
Navegamos a **`http://localhost:3000/books/131l2kj3h$j3h1jk2`** en nuestro navegador!
```javascript=
{ bookId: '131l2kj3h$j3h1jk2' }
```
#### Más parámetros de rutas
En algún momento necesitaremos enviar más de un parámetro, en esos casos podemos hacer algo como lo siguiente:
```javascript
app.get('/users/:username/books/:bookId', function (req, res) {
res.send(req.params)
})
```
So, if now we navigate to **`http://localhost:3000/users/ucom/books/8989`** on our browser, we should see the following:
```javascript=
{ username: 'ucom', bookId: '131l2kj3h$j3h1jk2' }
```
#### Ejemplos
Si vamos a la página de [Linkedin de la UCOM](https://www.linkedin.com/company/ucompy) y vemos la URL.
**¿Cómo crees que el servidor Linkedin obtiene la información sobre qué perfil debería mostrar? ¿Tienen una ruta para cada repositorio? ¿O quizás algo como esto?**
```javascript
app.get('/company/:companyName', function (req, res) {
//............
})
```
:::success
Las rutas parametrizadas son útiles para desarrollar una aplicación porque nos permite obtener información de las solicitudes de los clientes y mostrar información de acuerdo con esa información.
:::
### Parámetros de Consulta
A veces nos resultará útil enviar parámetros en la URL como una cadena, y para ese propósito los parámetros de consulta son fantásticos.
En términos simples, la **cadena de consulta** es la parte de una URL después del signo de interrogación `?` y generalmente contiene pares clave-valor separados por `&` y `=`. El servidor puede utilizar estos pares **clave/valor** como argumentos para consultar una base de datos, o tal vez para filtrar resultados.
Recibirá la información sobre el objeto `req.query` de nuestras rutas.
Veamos un ejemplo:
Agregue el siguiente código en el archivo `app.js`:
```javascript
app.get('/search', function (req, res) {
res.send(req.query)
})
```
Al igual que los parámetros de ruta, los **parámetros de consulta** son objetos de pares clave-valor. Todo lo que viene después del `?` Se emparejará como clave-valor utilizando el `=` como separador.
Si vamos a **`http://localhost:3000/search?city=Barcelona`**
Entonces en nuestro caso tendremos:
```javascript
console.log(req.query)
// => { "city" : "Barcelona" }
```
:::warning
It's super important to notice the difference between **route params** and **query strings**. On query strings, the URL we create on the `app.js` does not include the params.
:::
#### Más parámetros de consulta
Cuando estamos haciendo algunas búsquedas o filtros, es común tener más información para enviar al servidor. En ese caso, podemos usar `&` para adjuntar más parámetros.
Si queremos agregar una `fecha de inicio`, por ejemplo, naveguemos a
**`http://localhost:3000/search?city=Barcelona&start-date=2018-01-18`**
```javascript
{ "city" : "Barcelona", "start-date" : "2018-01-18" }
```
#### Parámetros de consulta desde formularios
Un uso muy frecuente de los `parámetros de consulta` es usarlos al enviar información desde un formulario, por ejemplo, una búsqueda de usuario. Imaginemos que estamos haciendo una aplicación donde los usuarios pueden buscar habitaciones de hotel para alquilar en diferentes ciudades.
En nuestro `app.js` agreguemos el siguiente código:
```javascript
app.get('/', function (req, res) {
res.render('index')
})
```
Y en nuestro archivo `index.hbs` agregamos lo siguiente:
```html
<form action="/search" method="GET">
<label for="">City</label>
<input type="text" name="city" id="">
<label for="">Start-Date</label>
<input type="date" name="start-date" id="">
<label for="">End-Date</label>
<input type="date" name="end-date" id="">
<button type="submit">SEARCH</button>
</form>
```
:::success
¡Espera un segundo! Repasemos algunas cosas clave sobre nuestro código :
- El método del `form` es **GET**. Por defecto, siempre va a ser un método **GET**.
- La `action` del `form` es **/search**, eso significa que cuando hagamos click en el botón **SEARCH**, vamos a hacer una **petición GET a la ruta `/search`**
- En cada input, lo que pongamos en el campo `name` va a ser cada una de las `keys` del objeto `req.query`, y lo que pongamos en el input va a ser el `value`.
:::
Vamos a **`http://localhost:3000`** , complete el formulario y haga clic en el botón **SEARCH**. Deberíamos ver algo como esto:
### Examples
Probémoslo en aplicaciones del mundo real para ver cómo funcionan. Navega a [Linkedin](www.linkedin.com) y busca "ucom" en la entrada que se muestra en la barra superior:
When we search we notice the URL is the following:
:::info
https://www.linkedin.com/search/results/all/?keywords=ucom&origin=GLOBAL_SEARCH_HEADER
:::
### Tabla de Ayuda :wink:
Dada la URL: `http://localhost:3000/products/1345?show=reviews`, y la ruta `/products/:id`, podemos desestructurar el objeto `req` en los siguientes campos:
|HTTP Request | Express `req` object |
|------------------|----------------------|
|Method | req.method // `GET` |
|URL Path | req.path // `/products/1345`|
|URL Params | req.params.id // `1345`
|URL Query String | req.query.show // `reviews`|
|All headers | req.headers['Accept-Language'] // `"en-US,en;q=0.9`|
## Recursos Extra
- [Express Routing](http://expressjs.com/en/guide/routing.html)
- [Express API](http://expressjs.com/en/api.html)
Sign in with Wallet
Connect another wallet