JAVASCRIPT

Un mundoooooo ideaaaaal

Bueno ... preparados

¿Para hacerte un adulto ya?

ASÍNCRONÍA

FRONTEND

BACKEND

FRONTEND

BACKEND

+

=

FULLSTACK

¿Why backend?

Cuando el usuario interactúa con nuestras webs o aplicaciones debemos guardar sus datos en algún servidor.

Si un usuario declara eventos en su calendario, tenemos dos opciones:

- O guardamos sus datos solo en local, y ese usuario si reinstala la app o si entra desde otro dispositivo no ve datos.

- O guardamos sus datos en una base de datos en "la nube" y podemos sincronizar sus diferentes dispositivos porque sabemos que vuelve a entrar con el mismo usuario

Bases de datos

Una base de datos es básicamente dónde se almacenan los datos de la aplicación.

Estos datos no son solo los que el usuario crea, edita, borra o ve, si no también los propios usuarios, otros datos de configuración de la web, otros datos de tablas que se relacionan con las que el usuario ve, etc etc

A grandes rasgos, porque no es parte del alcance de este curso, existen dos tipos de bases de datos

Relacionales y No Relacionales

Bases de datos. NO relacionales

La gran mayoría de bases de datos no relacionales están basadas en una estructura JSON

LO IMPORTANTE

LOS CHICOS DE BACKEND NOS VAN A GUARDAR DATOS EN LA NUBE, NOSOTROS VAMOS A APRENDER A MANDARLE LOS DATOS DESDE EL FRONT Y A PEDIRLES DATOS DESDE EL FRONT

API REST

COMUNICACIÓN CLIENTE - SERVIDOR

Ordenador usuario

Servidor facebook

== DAME EL HTML =>

<= TOMA EL HTML ==

== DAME LOS POSTS =>

<= TOMA LOS POSTS ==

Le he dado like a este post =>

<= ok, lo tengo en cuenta ==

== He subido un nuevo post =>

<= ok, lo tengo en cuenta ==

Ordenador usuario

Servidor facebook

== DAME EL HTML =>

<= TOMA EL HTML ==

== GET /POSTS =>

<= TOMA LOS POSTS ==

POST /POST/ID/LIKES/ =>

<= ok, lo tengo en cuenta ==

== POST: /ME/POSTS =>

<= ok, lo tengo en cuenta ==

users

posts

pages

messages

RECURSOS

Una buena api hoy en día, nos responde en JSON, por lo tanto, si le pedimos usuarios nos dará un array de usuarios

Si le pedimos un solo usuario nos dará un objeto

RECURSOS

GET ( URL )

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

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

Para pedir datos

Para mandar datos

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

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

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

¿Que es esto de GET?

Una petición a un servidor, o a una api, se hace mediante HTTP y esto se compone de dos partes:

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

== DAME LOS POSTS =>

<= TOMA LOS POSTS ==

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

Resumen

GET

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

Para pedir

POST

PUT

DELETE

Para añadir

Para actualizar

Para borrar

Resumen

GET

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

Para pedir

POST

PUT

DELETE

Para añadir

Para actualizar

Para borrar

ejemplo

.get('URL' + '/users')

.get('URL' + '/users/25')

.post('URL' + '/users', body)

.put('URL' + '/users/25', body)

.delete('URL' + '/users/25')

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== DAME LOS USUARIOS =>

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

typicode

GET 'https://jsonplaceholder.typicode.com/users'

Podemos jugar con POSTMAN

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== DAME EL USUARIO CON ID = 5 =>

Al pegar una url en el Chrome, hacemos un GET por defecto

Servidor

Cliente

typicode

GET https://jsonplaceholder.typicode.com/users/5

Podemos jugar con POSTMAN

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== INTRODUCE UN USUARIO NUEVO =>

Servidor

Cliente

typicode

POST https://jsonplaceholder.typicode.com/users

Podemos jugar con POSTMAN

BODY : { name : "Bentejui", email : "email@" ... }

URL

Digamos, que es la forma de apuntar a un recurso en particular

Tiene dos partes claras, el host y el recurso

VERBO

Indica la acción que queremos hacer desde el front con nuestra solicitud. Son varios:

GET POST PUT DELETE

EJEMPLO

Juguemos con jsonplaceholder.typicode

== MODIFICA AL USUARIO 5 =>

Servidor

Cliente

typicode

PUT https://jsonplaceholder.typicode.com/users/5

Podemos jugar con POSTMAN

BODY : { name : "Bentejui", email : "email@" ... }

Resumen

GET ( URL )

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

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

GET

1 RECURSO = 1 URL

STANDARD => NOUNS

http://localhost:3000/users

http://localhost:3000/books

http://localhost:3000/books/3

Hay algunos locos que

también usan los sustantivos en singular

Peticiones desde el front

FETCH

JQUERY

AXIOS

XMLHTTPRequest

Angular HttpClient

Si usamos por ejemplo VITE como se usa en mkweb

import axios from 'axios';

axios.get(url)

axios.post(url, body)

axios.put(url, body)

axios.delete(url)

npm install axios

STANDAR URL NAMES

GET : /USERS

GET : /USERS/:id

POST : /USERS

PUT : /USERS/:id

DELETE : /USERS/:id

LOS DATOS NO ESTARÁN EN LOCAL ESTA VEZ , ESTARÁN EN UN SERVIDOR

axios.get( URL ) axios.post(URL, DATA)

axios.put( URL, DATA ) axios.delete( URL )

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users';

axios.get(urlServer)

    .then( (users) => {
  		console.log('Usuarios =' , users.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO TRAER DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.get(urlServer)

    .then( (user) => {
  		console.log('Usuario con id 5 =' , user.data )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

COMO MANDAR DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users';

axios.post(urlServer, newUser)

    .then( (user) => {
  		console.log('Usuario añadido con id =' , user.data.id )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

Resumen

GET ( URL )

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

GET ( URL + '/25' )

POST ( URL, DATA )

PUT ( URL + '/25', DATA )

DELETE ( URL + '/25' )

¿Por qué then y catch?

ASINCRONÍA

COMO MANDAR DATOS. Javascript


var urlServer = 'https://jsonplaceholder.typicode.com/users/5';

axios.post(urlServer, newUser)

    .then( (user) => {
  		console.log('Usuario añadido con id =' , user.data.id )
	}) 
    .catch( (error) => {
	  	console.log('Algo salio mal =' , error )
	})

¡ LIVE CODING !

VUESTRO TURNO

Jugamos con la api de

DRAGONBALL

Jugamos con la api de

DRAGONBALL

Creamos un repositorio vacío en github
Que uno del equipo cree un proyecto de mkweb
Subimos al repo y añadimos a los compis
Comenzamos instalando axios
Creamos un módulo/fichero donde programaremos las llamadas a la api de dragonball
Repasamos la documentación de esta api con calma y planificamos que queremos hacer.

Requisitos mínimos, llamar a 1 endpoint y extraer datos, ejemplo la de characters y mostrar en la consola todos los personajes o filtrar y mostrar a los de mínimo 000 Ki, etc.

Extras: Tratar de dibujarlos en la pantalla, investigar document.getElementById('id') y usar element.innerHTML para dibujar en el DOM. Ideal hacer esto desde otro módulo