JAVASCRIPT

Comenzamos en 5 minutitos

YUNIOR

Twitter: @YuniorGlez

Linkedin: Yunior González Santana

Correo: yunior@squaads.com

PROGRAMA DE HOY

Repaso teórico, ¿promesas?, ¿llamadas API Rest?
Ronda de preguntas cortas y microejercicios
---- Descanso ----
Conectando un frontend con una API
Extra: QueryParams
Ronda de dudas

Un mundoooooo ideaaaaal

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

SE RECARGA LA PÁGINA

NO SE RECARGA LA PÁGINA

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' )

Podemos jugar con POSTMAN

Hacemos todas las operaciones en directo. Estate atento, que luego te toca a ti

https://jsonplaceholder.typicode.com/users

TU TURNO

CREA TU PROPIA API CON Y USAMOS POSTMAN

1. Haz una petición de toda la tabla

2. Fíjate en la respuesta, y guarda un nuevo recurso.

3. Trata de editar con un PATCH y con un PUT dos de los recursos

4. Borra uno de los recursos

5. Prueba a hacer un GET pero con esto al final ?_limit=10

https://retool.com/api-generator

Sobre las 10:50 10:55 comenzamos a dejar la mano levantan si terminaste el ejercicio

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

http://localhost:3000/obtenerUsuarios

http://localhost:3000/lista_libros

http://localhost:3000/list-all-book/3

Peticiones desde el front

FETCH

JQUERY

AXIOS

XMLHTTPRequest

Angular HttpClient

Importar axios

axios.get(url)

axios.post(url, body)

axios.put(url, body)

axios.delete(url)

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js"/>

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 !

.then().then().then()

function obtenerUsuarios() {
  return fetch('https://jsonplaceholder.typicode.com/users')  
}


function main(){
  
  console.log('Voy a obtener los usuarios');
  obtenerUsuarios()
    .then(response=> {
      console.log('me ha llegado una respuesta');
      console.log({response});
      return response.json();
    })
  	.then(data => {
    	console.log('El primer then ya terminó, y me respondió esto');
    	console.log({data})
  	})
  
}

main()

.then().then().then()

function obtenerUsuarios() {
  return fetch('https://jsonplaceholder.typicode.com/users')  
}


function main(){
  
  console.log('Voy a obtener los usuarios');
  obtenerUsuarios()
    .then(response=> {
      console.log('me ha llegado una respuesta');
      console.log({response});
      return response.json();
    })
  	.then(data => {
    	console.log('El primer then ya terminó, y me respondió esto');
    	console.log({data})
  	})
  
}

main()

.then().then().then()

function obtenerUsuarios() {
  return fetch('https://jsonplaceholder.typicode.com/users')  
}


function main(){
  
  console.log('Voy a obtener los usuarios');
  obtenerUsuarios()
    .then(response=> {
      console.log('me ha llegado una respuesta');
      console.log({response});
      return response.json();
    })
  	.then(data => {
    	console.log('El primer then ya terminó, y me respondió esto');
    	console.log({data})
  	})
  
}

main()

VUESTRO TURNO

Juega con la api de jsonplaceholder

1- Descarga el proyecto siguiente

https://github.com/YuniorGlez/jCCLM-API-REST-FRONTEND

2 - Consigue dibujar los recursos de la api en la pantalla nada más cargue la página

3 - Extra: conectar otras apis de otros compis

PLAN B: https://retool.com/api-generator

Curso de Introducción a la Programación JCCLM. Día 1 Yunior

By Yunior González Santana

Curso de Introducción a la Programación JCCLM. Día 1 Yunior

Primer día clases de Yunior