API REST

COMUNICACIÓN CLIENTE - SERVIDOR

Resumen

GET ( URL )

var URL = 'https://jsonplaceholder.typicode.com/users'

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

CREAR SERVIDOR

var http = require('http');

var server = http.createServer( ( req, res) => {
    console.log('Estoy atento a las llamadas');
});

server.listen(5000, (err) => {
    if (!err){
        console.log('Servidor escuchando en el puerto 5000');
    }
});

MODULO EXPRESSJS

npm i express

Creando server

var express = require('express')
var app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World')
})
 
app.listen(3000)

GET:  "http://localhost:3000/ " =>    'Hello world'

Creando server

var express = require('express')
var app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World')
})
 
app.listen(3000)

POST:  "http://localhost:3000/ " =>   ¿?

Creando server

var express = require('express')
var app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World')
})
 
app.listen(3000)

GET:  "http://localhost:3000/users " =>   ¿?

Respuesta json

var express = require('express')
var app = express()
 
var users = [{name : 'a'},{name : 'b'}]

app.get('/users', function (req, res) {
  res.json(users);
})
 
app.listen(3000)

GET:  "http://localhost:3000/users" =>   [ {} , {} ]

PARÁMETROS

REQ Y RES 

== REQUEST => 

Ordenador usuario

Servidor facebook

REQ

REQ

req.url

 

req.method

 

req.params

 

req.headers

 

req.query

/USERS

"GET" || "POST" || "PUT" || "DELETE"

{ } 

{ } 

{ } 

RES

<= RESPONSE == 

Ordenador usuario

Servidor facebook

RES.SEND()

RES.JSON()

POSTMAN

JUGUETEAMOS POSTMAN 

GET Y POST

GET

1 RECURSO   =  1 URL 

STANDARD => NOUNS

http://localhost:3000/users

http://localhost:3000/books

http://localhost:3000/books/3

También se suelen nombrar en singular

GET

EN LA PRÁCTICA

app.get('/users', function (req, res) {
  res.json(users);
})

app.get('/users/:id', function (req, res) {

  const userId = req.params.id;

  const user = users.find(u => u.id == userId);

  res.json(user);
});

POST

app.post('/users', function (req, res) {
  
    const newUser = req.body; // ¿UNDEFINED?
    
    newUser.id = ();
    
    users.push(newUser);
    
    res.json(newUser);
})

MIENTRAS TANTO EN EL REQ

¿ Y EL CONTENIDO DEL FORMULARIO ?

var express = require('express')

var app = express();

// Middlewares 
app.use(express.json());

IMPORTANTE

DELETE Y PUT

DELETE Y PUT

HTTP

CODE ERRORS

HTTP CODE ERRORS

  • 418 I'm a teapot
app.post('/users', function (req, res) {
    if (bodyIsEmpty(req.body)){
        res.status(400).send('Contenido del body vacío');
    }
    console.log('Hola');
    const newUser = req.body;
    newUser.id = users.length;
    users.push(newUser);
    res.json(newUser);
})

app.post('/users', function (req, res) {
    if (bodyIsEmpty(req.body)){
        res.status(400).send('Contenido del body vacío');
    }
    console.log('Hola');
    const newUser = req.body;
    newUser.id = users.length;
    users.push(newUser);
    res.json(newUser);
})

ERROR

app.post('/users', function (req, res) {
    if (bodyIsEmpty(req.body)){
        return res.status(400).send('Contenido del body vacío');
    }
    console.log('Hola');
    const newUser = req.body;
    newUser.id = users.length;
    users.push(newUser);
    res.json(newUser);
})

NODEMON

npm i -g nodemon

Oye, Yunior pero ...

¿ Cómo conecto yo mi "api" con un front ? 

Pues como ya hemos hecho con otras apis, mediante axios y si usas servicios mejor que mejor ;)

ejemplo

Cuando tu app arranque tendrás que hacerle un GET a tu server, ¿a dónde?

axios.get('http://localhost:5000/tasks')

ejemplo

Cuando se pulse ese botón, tendrás que mandar a hacer un delete a tu api y luego, si todo ha ido, bien borrarlo de la pantalla

ejemplo

Cuando se pulse ese botón, tendrás que avisar a la api que se ha completado una tarea.
Aquí ya hay varias opciones:

 - Si seguimos el estándar. PATCH /api/todos/20 y en el body el atributo isCompleted : true.

- Otras opciones. Por ejemplo, crear un endpoint concreto para esta "acción" GET/api/completarTODO/20, o podemos mandar la tarea con su completed a true por un PUT

ejemplo

Al introducir una tarea por el front :

 

- Hacer un post con axios a la api

- O bien si estuviese envuelto en un formulario especificar en el form que se hace un POST y que el action es a tu url.

EJERCICIOS

El backend tiene que permitir

 

- Crear tareas

 

- Obtener tareas

 

- Editar tareas

 

- Borrar tareas

Creamos el backend para un TODOLIST :)

EJERCICIOS

Primera API

Queremos desarrollar una api restful con node para un proyecto copia de twitter. Aunque de momento, será solo una primera versión con usuarios y tweets como si fuese un blog personal.

USUARIO

username* : string<uniq>

name? : string

email* : string

tweets : Tweet []

 

TWEET

id* : string<uniq>

text* : string

owner* : string<ID>

createdAt : timestamp

Primera API

  • Deberán estar implementadas las funcionalidades de:
    • Crear un nuevo usuario. En la "variable de usuarios" De momento no hay nada de logins
    • Borrar un usuario 
    • Editar el email de un usuario o el nombre (PATCH)
    • Subir un tweet nuevo por parte de un usuario
    • Ir a buscar un tweet en concreto por su id
    • Borrar un tweet por su id

 

 

OJO ! CONTROLA QUE LA API NO SE PUEDA QUEDAR PILLADA EN NINGÚN MOMENTO, controla campos vacíos, request inválidas, etc etc y devuelve el error en la respuesta y el código correcto para dicho caso

SPEGC Agosto 2022 Full Stack. Nodejs Segundo Día

By Yunior González Santana

SPEGC Agosto 2022 Full Stack. Nodejs Segundo Día

  • 202

More from Yunior González Santana