Angular

Services

Servicios

Podemos crear un servicio a través del comando

ng generate service users

ng generate service services/users

Servicios

Podemos crear un servicio a través del comando

ng g service users

En stackblitz

Click derecho en app

Servicios

2 ficheros :

users.service.ts

users.service.spec.ts

El fichero spec es para realizar pruebas unitarias de nuestro servicio. En este caso se sale del alcance del curso.

Servicios

¿Por qué estamos creando un servicio?

Evitar código duplicado.
KISS - Keep It Simple Stupid.
Modularizar.
No importar axios en todos los componentes que necesiten hacer consultas.
Un solo fichero gestiona un solo recurso.

¿Por qué estamos creando un servicio?

NO AL SPAGETTI CODE

Como usamos nuestro servicio

¿Cómo usamos nuestro servicio?

En Angular, los constructores se usan para la inyección de dependencias. Así mantienen el código más desacoplado y más independiente.

Dependency Injection - Angular

¿Cómo usamos nuestro servicio?

En cualquier página, en cualquier componente, o en cualquier otro servicio incluso donde necesitemos cargar los usuarios de la api .... SOLO PONEMOS ESTA LÍNEA DE CÓOODIGOOOOO

¿Se dan cuenta de lo útil que es?

this.users = this.usersService.getAllUsers();

Como será nuestro getAllUsers()

export class UsersService { 


  constructor(){}

  public getAllUsers() : User[]{

   return [ 
      {
        name : "Luis",
        email : "luis@gmail.com"
      }
    ]
  }

}

Live coding

LifeCycle Hooks

export class ExampleComponent implements OnInit {
  
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() {
    this.logIt('Hola');
  }
  

  logIt(msg: string) {
    console.log(`Momento OnInit = ${msg}`);
  }
  
}

Live coding

Utils services

Swal Alert Service

Ejemplo de servicio

https://sweetalert2.github.io/#download

Swal Alert Service

npm install sweetalert2

Swal Alert Service

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2'

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor() {
  }

  public success() {
    return Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }

}

Swal Alert Service

import { Injectable } from '@angular/core';
import Swal from 'sweetalert2'

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor() {
  }

  public success() {
    return Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }

}

export class AppComponent implements OnInit {

  constructor(private alertService : AlertService) {
  }

  onClick() {
    this.alertService.success();
  }
  
}

Investiga sweet alert o toastr o angular material toast

Crea un servicio para gestionar y lanzar mensajes de alerta y de success llamándole desde cualquier componente

https://codeseven.github.io/toastr/demo.html

https://material.angular.io/components/snack-bar/overview

https://sweetalert2.github.io/#download

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

Peticiones con axios

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

Stackblizt

Instalar 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/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 )
	})

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

¿Por qué then y catch?

ASINCRONÍA

¿Para que era el then?

¿Cómo usamos nuestro servicio?

Importamos axios en nuestro servicio y lo usamos

IMPORTANTE EL RETURN

Tipar es bueno :)

Tipamos diciendo que vamos a recibir un array de User.

Como usamos nuestro servicio para hacer un GET de los usuarios RESUMEN

app.component.ts

users.service.ts

Como usamos nuestro servicio para hacer un POST de un usuario nuevo

app.component.ts

users.service.ts

¡ LIVE CODING !

EXAMPLE

VUESTRO TURNO

Ejercicio en grupo

Crea un servicio para descargar los posts que hay en jsonplaceholder

Crea un componente para que cargue todos los posts y los muestre. en la pantalla con un ngFor

Pásale a un componente hijo llamado POST cada item de la lista

https://jsonplaceholder.typicode.com/posts

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

json -server

Usando vuestra propia api

- Mete dentro de la base de datos muchas tareas con esta pinta

{ 
  "tasks" : [ 
	{ title : "tarea 1", id : 1} , 
	{ title : "tarea 2", id : 2} , 
	{ title : "tarea 3", id : 3}
	] 
}

db.json

desde el frontend.....

Este es el front

https://stackblitz.com/edit/eoi-base-todolist

no te olvides darle a "Fork"

¡ Puedes usar esta base o partir del vuestro !

Usando vuestra propia api

Reutilizando la base anterior o tu propio proyecto, crea un servicio llamado TasksService para trabajar con "nuestra api".

Debemos realizar las siguientes acciones:

- Obtener todas las tareas.

- Añadir tarea.

- Modificar tarea.

- Borrar una tarea.

Live coding

Ejercicio individual

Crea un mini proyecto que se conecte con alguna de estas apis

https://apilist.fun/

Simplemente crea un mínimo frontend para mostrar al menos un listado de recursos o dos y para pedir los detalles de esos recursos GET /cats y GET /cats/id por ejemplo

Obviamente realiza el código de traer información de la api con un servicio