JAVASCRIPT

PROGRAMA DE HOY

  • 1-2h para Rematar de manera individual los 2 ejercicios de ayer, fotos y todos.
  • 0h-1h Resolvemos dudas y vemos como lo hicieron dos compañeros
  • 15m descanso
  • 1h teoría nueva, FETCH y PROMISES

---- respiramos hondo----

  • 2h para practicar el FETCH con https://jsonplaceholder.typicode.com

Mañana veremos algo de testing tranquilos

Practicando

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

Podemos jugar con POSTMAN

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

Importar en el fichero ts donde lo vayas a usar

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

Juega con la api de jsonplaceholder

Programa un frontal que pida de la api de jsonplaceholder todos las TODOS y los muestre en la pantalla

 - Al lado de cada tarea, aparecerá un botón para completarla y otro para borrar la tarea. El botón de borrar tendrá que llamar a la api de jsonplaceholder y decirle que la quiere eliminar y luego eliminarse de la pantalla si la api respondió por el .then(). El boton de completar tendrá que hacer una petición PATCH a esa tarea concreta para editarle el complete

- Añade también un input y un botón para añadir nuevas tareas