Obtener la información mediante un Service HTTP, CryptoNG

Para obtener la información usaremos un API que nos retorna la información que queremos mostrar en nuestra aplicación.

Lo primero que haremos es ir a la pagina de CoinMarketCap para obtener las credenciales del API

Una vez tengamos nuestro API vamos a generar un servicio en nuestro proyecto mediante el comando:

ng g s api

Se creara nuestro service para que en el podamos programar todos los métodos necesarios para que nuestra app obtenga la información desde el API.

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

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

  constructor() { }
}

Ahora para poder hacer las llamadas HTTP debemos importar el modulo HttpClientModule en nuestro archivo app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule //<=== ***
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Siguiente paso es inyectar el cliente HTTP en nuestro servicio y crear los métodos para obtener la información de tal manera que el servicio quede de esta forma:

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


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

  endpoint: string = 'http://localhost:3000/cryptos'

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get(this.endpoint)
  }
}

Ahora según la documentación oficial de la API no podemos acceder desde nuestro localhost al servidor mediante una app, tenemos 2 opciones usar un proxy o crear un servicio en NodeJS para obtener los datos por ahora usaremos un servidor para hacer la petición ya que nos recomiendan hacerlo de esta manera en la documentación de CoinMarketCap 

Les dejo el servidor a continuación:

const express = require('express')
const app = express()
const port = 3000
const request = require('request');
var cors = require('cors')

app.use(cors())

app.get('/cryptos', (req, res) => {
    var options = {
        'method': 'GET',
        'url': 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
        'headers': {
            'X-CMC_PRO_API_KEY': 'aqui deben colocar su api_key',
        }
    };
    request(options, function (error, response) {
        if (error) throw new Error(error);
        res.send(JSON.parse(response.body));
    });
})

app.listen(port, () => {
    console.log(`Crypto app listening at http://localhost:${port}`)
})

Estamos cerca de tener nuestra aplicación funcional.

Ahora vamos a nuestro archivo app.component.ts, lo primero que haremos es implementar la interfaz OnInit con su respectivo método ngOnInit() y su constructor para realizar la inyección del servicio que creamos anteriormente.

La variable cryptos es la que contendrá la información obtenida de nuestra API, como puedes ver no me estoy suscribiendo al servicio es porque vamos a usar un pipe para mostrar la información.

El pipe que usaremos es: «async»

Finalmente nuestro app.component quedaría de la siguiente manera.

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'crypto-ng';
  public cryptos;

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.cryptos = this.api.getData().pipe(map((data) => { return data.data }));
  }

}

En nuestro HTML por el contrario vamos a agregar el pipe «async» donde mediante la directiva ngFor vamos a iterar la información.

<header class="header">
  <h1>💰 CryptoNG 🤑</h1>
  <small>Precios de criptomonedas de hoy por capitalización de mercado</small>
</header>
<section class="section">
  <table style="width:100%">
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Ultimas 24h</th>
      <th>Ultimos 7D</th>
    </tr>
    <tr *ngFor="let crypto of cryptos | async">
      <td>{{crypto.id}}</td>
      <td>{{crypto.name}}</td>
      <td>{{crypto.quote.USD.price}}</td>
      <td>{{crypto.quote.USD.percent_change_24h}}</td>
      <td>{{crypto.quote.USD.percent_change_7d}}</td>
    </tr>
  </table>
</section>
<footer class="footer">
  <p><a href="https://aquiensistemas.com"> Aquí en sistemas</a> - 2021</p>
  <small>Encuentra este proyecto en <a href="https://github.com/aquiensistemas/crypto-ng">GITHUB</a></small>
</footer>

De esta forma ya tenemos nuestra aplicación funcional

Siguientes temas

Anterior

Deja un comentario