Reto: Implementar API HTTP

Clase 43 de 63 • Curso de Angular 6 2018

Hasta ahora, los datos que hemos consumido han sido a través de la librería angularfire2, la cual establece comunicaciones con el backend usando sockets.

Sin embargo, es muy común establecer comunicaciones a través de llamados HTTP hacia APIs. Así que, busca una API REST que puedas consumir usando el HttpClientModule en Angular, como las APIs de Reddit, weather, etc.

Comentarios

Daniel Rodríguez

student•

Yo implementé la funcionalidad de obtener el clima de nuestras coordenadas, para ello cree 2 servicios:

1.- Servicio para consultar las coordenadas del navegador:

  getGeoLocation(): Observable<any>{
    return new Observable( (observer) => {
      navigator.geolocation.getCurrentPosition(resp => {
        //console.log({lat: resp.coords.latitude, lng: resp.coords.longitude});
        observer.next(resp)
      },
      err => {
        observer.error( err )
      });
    });
  }

2.- Servicio para obtener los datos del clima en base a las coordenadas enviadas por parametros (obtenidas en el servicio anterior) mediante la API de openweathermap.org:

  endpoint = 'https://api.openweathermap.org/data/2.5/';
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
  };

  getWeatherByCoord(lat:string, lon:string){
    return this.httpClient.get(this.endpoint + 'weather?lat='+lat+'&lon='+lon+'&units=metric&appid=AQUÍ_VA_SU_API_KEY')
    .pipe( map( (data:any) =>{
      let city = data.name;
      let country = data.sys.country;
      let weather = data.weather[0].main;
      let description = data.weather[0].description;
      let icon = data.weather[0].icon;
      let temp = parseInt(data.main.temp);
      let humidity = data.main.humidity;
      let x:Weather = { city, country, weather, description, icon, temp, humidity };
      return x;
    }
    ), //Map
    ); //Pipe
  }

Luego solamente use algunas funciones de rxjs para suscribirme en cola a los Observables creados anteriormente y así poder obtener la data del clima ;)

//Pipe se encarga de encolar las suscripciones por si se necesitan ejecutar en estricto orden
      //En este caso es así, pues primero necesitamos las coordenadas del servicio de Geolocation
      //Y despues consultar el servicio de Weather para traer el clima por medio de la API
      this.geoLocationService.getGeoLocation().pipe(
        flatMap( 
          (resp) => this.weatherService.getWeatherByCoord(resp.coords.latitude, resp.coords.longitude),
        )
      ).subscribe( //Solo se necesita suscribirse al servicio final para completar el proceso
        (data: Weather) => {
          this.weatherData = data;
          console.log(data);
        },
        (err) => {
          this.error = "No es posible consultar el servicio del clima en estos momentos.";
          console.log(err);
        }
      );

El resultado:

Tarde un poco mas de lo esperado pues soy un poco nuevo con los Observables de rxjs pero creo que fue un buen resultado a pesar de lo mencionado.

Wilson Fabian Pérez Sucuzhañay

student•

Estoy creando un graphql y sockets en php POR DIOS NO LARAVEL jaja por eso me estoy tardando pero estoy en el reto al terminarlo subo demo.

Sigaweb sas

student•

Aquí está el código de una clase para el backend que realicé utilizando Spring y java. Muy sencillo y sin autenticación.

@CrossOrigin(origins = {"http://localhost:4200"})
@RestController
@RequestMapping("api")
public class ClienteRestController {

    @Autowired
    private ClienteService clienteService;

    @GetMapping("clientes")
    public List<Cliente> index() {
        return clienteService.findAll();
    }


    @GetMapping("clientes/{id}")
    public ResponseEntity<?> getCliente(@PathVariable("id") Long id) {
        Cliente cliente = null;
        Map<String, Object> response = new HashMap<>();

        try {
            cliente = clienteService.findById(id);
        } catch (DataAccessException e) {
            response.put("mensaje", "Error al realizar la consulta. Por favor intenta de nuevo más tarde.");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        if (cliente == null) {
            response.put("mensaje", "El cliente con el id: ".concat(id.toString()).concat(" no existe, verifica la información"));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.NOT_FOUND);
        }
        return new ResponseEntity<Cliente>(cliente, HttpStatus.OK);
    }

    @PostMapping("clientes")
    public ResponseEntity<?> createCliente(@RequestBody Cliente cliente) {
        Cliente clienteNew = null;
        Map<String, Object> response = new HashMap<>();
        try {
            clienteNew = clienteService.save(cliente);
        } catch (DataAccessException e) {
            response.put("mensaje", "No se pudo crear el cliente. Por favor intenta de nuevo más tarde.");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        response.put("mensaje", "Cliente creado con éxito");
        response.put("cliente", clienteNew);
        return new ResponseEntity<Map<String, Object>>(response, HttpStatus.CREATED);
    }

    @PutMapping("clientes/{id}")
    public ResponseEntity<?> updateCliente(@RequestBody Cliente cliente, @PathVariable("id") Long id) {

        Cliente clienteActual = null;
        Cliente clienteUpdated = null;
        Map<String, Object> response = new HashMap<>();

        try {
            clienteActual = clienteService.findById(id);
        } catch (DataAccessException e) {
            response.put("mensaje", "Ha ocurrido un error al buscar el cliente");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        if (clienteActual != null) {
            clienteActual.setNombre(cliente.getNombre());
            clienteActual.setApellido(cliente.getApellido());
            clienteActual.setEmail(cliente.getEmail());

            try {
                clienteUpdated = clienteService.save(clienteActual);
                response.put("mensaje", "El cliente ha sido actualizado con éxito");
                response.put("cliente", clienteUpdated);
                return new ResponseEntity<Map<String, Object>>(response, HttpStatus.CREATED);
            } catch (DataAccessException e) {
                response.put("mensaje", "Ha ocurrido un error al actualizar el cliente");
                response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
                return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
            }
        } else {
            response.put("mensaje", "No se ha encontrado un cliente con ese id");
            return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
        }

    }

    @DeleteMapping("clientes/{id}")
    public ResponseEntity<?> deleteCliente(@PathVariable("id") Long id) {
        Map<String, Object> response = new HashMap<>();
        try {
            clienteService.delete(id);
            response.put("mensaje", "El cliente ha sido eliminado con éxito");
            return new ResponseEntity<>(response, HttpStatus.OK);
        } catch (DataAccessException e) {
            response.put("mensaje", "Ha ocurrido un error al intentar eliminar el cliente");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

    }


}```

Wilson Alejandro Gonzalez Gaitan

student•

Api llamada API_ENDPOINT = 'https://rickandmortyapi.com/api/';

e implementacion de llamada

<import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

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

  API_ENDPOINT = 'https://rickandmortyapi.com/api/';

  constructor(private httpClient: HttpClient) {
  }

  get() {
    return this.httpClient.get(this.API_ENDPOINT + '/character/');
  }
}
>

Pedro Roberto Capriles Morales

student•

Realice el ejemplo de uso de HttpClient con el servicio api rest de GitHub

GithubService

import { Injectable } from '@angular/core';
import { IGithubService } from '../interfaces/IGithubService';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment.prod';

@Injectable({
  providedIn: 'root'
})
export class GithubService implements IGithubService {

  constructor(private httpClient:HttpClient) { }

  GetUser(username:string):any {
    const url = environment.gitHub.endpoint +"users/"+username;
    const httpHeader:HttpHeaders = new HttpHeaders();
    httpHeader.append("x-github-otp","OTP");
    httpHeader.append("Content-Type","application/json");
    return this.httpClient.get(url,{headers: httpHeader})
  }
}

Llamado del servicio

    this.githubService.GetUser(this.model.username).subscribe((data)=>{
      console.log(data);
    },(error)=>{
      console.log(error);
    });

  getGeoLocation(): Observable<any>{
    return new Observable( (observer) => {
      navigator.geolocation.getCurrentPosition(resp => {
        //console.log({lat: resp.coords.latitude, lng: resp.coords.longitude});
        observer.next(resp)
      },
      err => {
        observer.error( err )
      });
    });
  }

  endpoint = 'https://api.openweathermap.org/data/2.5/';
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
  };

  getWeatherByCoord(lat:string, lon:string){
    return this.httpClient.get(this.endpoint + 'weather?lat='+lat+'&lon='+lon+'&units=metric&appid=AQUÍ_VA_SU_API_KEY')
    .pipe( map( (data:any) =>{
      let city = data.name;
      let country = data.sys.country;
      let weather = data.weather[0].main;
      let description = data.weather[0].description;
      let icon = data.weather[0].icon;
      let temp = parseInt(data.main.temp);
      let humidity = data.main.humidity;
      let x:Weather = { city, country, weather, description, icon, temp, humidity };
      return x;
    }
    ), //Map
    ); //Pipe
  }

//Pipe se encarga de encolar las suscripciones por si se necesitan ejecutar en estricto orden
      //En este caso es así, pues primero necesitamos las coordenadas del servicio de Geolocation
      //Y despues consultar el servicio de Weather para traer el clima por medio de la API
      this.geoLocationService.getGeoLocation().pipe(
        flatMap( 
          (resp) => this.weatherService.getWeatherByCoord(resp.coords.latitude, resp.coords.longitude),
        )
      ).subscribe( //Solo se necesita suscribirse al servicio final para completar el proceso
        (data: Weather) => {
          this.weatherData = data;
          console.log(data);
        },
        (err) => {
          this.error = "No es posible consultar el servicio del clima en estos momentos.";
          console.log(err);
        }
      );

@CrossOrigin(origins = {"http://localhost:4200"})
@RestController
@RequestMapping("api")
public class ClienteRestController {

    @Autowired
    private ClienteService clienteService;

    @GetMapping("clientes")
    public List<Cliente> index() {
        return clienteService.findAll();
    }


    @GetMapping("clientes/{id}")
    public ResponseEntity<?> getCliente(@PathVariable("id") Long id) {
        Cliente cliente = null;
        Map<String, Object> response = new HashMap<>();

        try {
            cliente = clienteService.findById(id);
        } catch (DataAccessException e) {
            response.put("mensaje", "Error al realizar la consulta. Por favor intenta de nuevo más tarde.");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        if (cliente == null) {
            response.put("mensaje", "El cliente con el id: ".concat(id.toString()).concat(" no existe, verifica la información"));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.NOT_FOUND);
        }
        return new ResponseEntity<Cliente>(cliente, HttpStatus.OK);
    }

    @PostMapping("clientes")
    public ResponseEntity<?> createCliente(@RequestBody Cliente cliente) {
        Cliente clienteNew = null;
        Map<String, Object> response = new HashMap<>();
        try {
            clienteNew = clienteService.save(cliente);
        } catch (DataAccessException e) {
            response.put("mensaje", "No se pudo crear el cliente. Por favor intenta de nuevo más tarde.");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        response.put("mensaje", "Cliente creado con éxito");
        response.put("cliente", clienteNew);
        return new ResponseEntity<Map<String, Object>>(response, HttpStatus.CREATED);
    }

    @PutMapping("clientes/{id}")
    public ResponseEntity<?> updateCliente(@RequestBody Cliente cliente, @PathVariable("id") Long id) {

        Cliente clienteActual = null;
        Cliente clienteUpdated = null;
        Map<String, Object> response = new HashMap<>();

        try {
            clienteActual = clienteService.findById(id);
        } catch (DataAccessException e) {
            response.put("mensaje", "Ha ocurrido un error al buscar el cliente");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

        if (clienteActual != null) {
            clienteActual.setNombre(cliente.getNombre());
            clienteActual.setApellido(cliente.getApellido());
            clienteActual.setEmail(cliente.getEmail());

            try {
                clienteUpdated = clienteService.save(clienteActual);
                response.put("mensaje", "El cliente ha sido actualizado con éxito");
                response.put("cliente", clienteUpdated);
                return new ResponseEntity<Map<String, Object>>(response, HttpStatus.CREATED);
            } catch (DataAccessException e) {
                response.put("mensaje", "Ha ocurrido un error al actualizar el cliente");
                response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
                return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
            }
        } else {
            response.put("mensaje", "No se ha encontrado un cliente con ese id");
            return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
        }

    }

    @DeleteMapping("clientes/{id}")
    public ResponseEntity<?> deleteCliente(@PathVariable("id") Long id) {
        Map<String, Object> response = new HashMap<>();
        try {
            clienteService.delete(id);
            response.put("mensaje", "El cliente ha sido eliminado con éxito");
            return new ResponseEntity<>(response, HttpStatus.OK);
        } catch (DataAccessException e) {
            response.put("mensaje", "Ha ocurrido un error al intentar eliminar el cliente");
            response.put("error", e.getMessage().concat(": ").concat(e.getMostSpecificCause().getMessage()));
            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }

    }


}```

<import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

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

  API_ENDPOINT = 'https://rickandmortyapi.com/api/';

  constructor(private httpClient: HttpClient) {
  }

  get() {
    return this.httpClient.get(this.API_ENDPOINT + '/character/');
  }
}
>

import { Injectable } from '@angular/core';
import { IGithubService } from '../interfaces/IGithubService';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment.prod';

@Injectable({
  providedIn: 'root'
})
export class GithubService implements IGithubService {

  constructor(private httpClient:HttpClient) { }

  GetUser(username:string):any {
    const url = environment.gitHub.endpoint +"users/"+username;
    const httpHeader:HttpHeaders = new HttpHeaders();
    httpHeader.append("x-github-otp","OTP");
    httpHeader.append("Content-Type","application/json");
    return this.httpClient.get(url,{headers: httpHeader})
  }
}

Reto: Implementar API HTTP

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos