Aprende a usar el plugin Capacitor HTTP en IONIC

Hola a todos, hoy os voy a explicar como podemos utilizar el plugin capacitor HTTP de IONIC.

En nuestras aplicaciones IONIC, es normal necesitar algo para poder llamar a APIs para devolvernos datos para nuestra app.

Tenemos un plugin de Capacitor en IONIC preparado para este fin llamado HTTP.

Para este tutorial, vamos a usar la API pokeapi que nos devuelve datos relacionado con pokemons.

Creación de proyecto

Primero, debemos crear nuestro proyecto, tenemos un tutorial sobre ello.

IONIC 7 – Guía sobre como crear tu primera aplicación

IMPORTANTE: necesitaras las imágenes de los tipos de los pokemons, los tienes aquí, guárdalos en assets/img

plugin capacitor http 1

Habilitar Plugin Capacitor HTTP

A continuación, debemos habilitar el plugin Capacitor Http desde el fichero capacitor.config.ts, quedando así:


const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'example-capacitor-http',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  plugins: {
    CapacitorHttp: {
      enabled: true
    }
  }
};

Servicio de pokemon donde usaremos el Plugin Capacitor HTTP

Después, crearemos un servicio dentro de la carpeta src con el siguiente comando:

$ ionic g s pokemon

Esto creará un servicio con la función getPokemon pasándole un id como parámetro:


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

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

  getPokemon(id: number){

  }

}

Obteniendo pokemons con Plugin Capacitor HTTP

Posteriormente, obtendremos los datos usando el plugin capacitor HTTP.

Primero, necesitamos con el objeto HttpOptions de @capacitor/core, puedes ver todas sus propiedades aquí.

En nuestro caso, la url que vamos a usar es la siguiente https://pokeapi.co/api/v2/pokemon/<id> siendo <id> intercambiado por el id del pokemon a buscar.

También, recomiendo pasarle la propiedad params un objeto vacio, esto es por Android ya que sino fallaría.

Después, con CapacitorHttp tenemos varias funciones, puedes verlo aquí.

Nosotros utilizaremos la función get pasándole las opciones antes indicadas. Esta función devuelve un HttpResponse con los datos que queremos mostrar.

Si quieres probar el resultado de la consulta HTTP, lo podéis hacer desde la propia pokeapi.

plugin capacitor http 3

Así se quedaría:


import { Injectable } from '@angular/core';
import { CapacitorHttp, HttpOptions, HttpResponse } from '@capacitor/core';

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

  getPokemon(id: number){

    // Opciones
    const options: HttpOptions = {
      url: 'https://pokeapi.co/api/v2/pokemon/' + id,
      params: {} // necesario para android
    }

    // Hacemos la peticion a la pokeapi
    return CapacitorHttp.get(options).then( (response: HttpResponse) => {
      return response.data;
    })

  }

}

Recoger datos desde la página

Seguidamente, en home.page.ts tendremos dos atributos, el id del pokemon y el pokemon completo.

También, inyectaremos el servicio de pokemonService y un método llamado getPokemon donde obtenemos el pokemon.

El componente se vería así:


import { Component } from '@angular/core';
import { PokemonService } from '../services/pokemon.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public id: number;
  public pokemon: any;

  constructor(private pokemonService: PokemonService) {
    this.id = 1;
    this.pokemon = null;
  }

  getPokemon() {
    // Obtenemos un pokemon dado su id
    this.pokemonService.getPokemon(this.id).then(pokemon => {
      this.pokemon = pokemon;
      console.log(pokemon);
    })
  }

}

Formulario para mostrar un pokemon

Con posterioridad, en el home.page.html tendremos un pequeño formulario donde escribiremos el id del pokemon a buscar.

Después, tendremos un card donde mostraremos los datos del pokemon.

Este es el resultado:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Capacitor HTTP
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  
  <!-- Filtro -->
  <ion-item>
    <ion-input label="Id: " type="number" [(ngModel)]="id" name="id"></ion-input>
    <ion-button [disabled]="!id" (click)="getPokemon()">
      <ion-icon name="search-outline"></ion-icon>
    </ion-button>
  </ion-item>

  <ion-card *ngIf="pokemon">
    <!-- Sprite -->
    <ion-img [src]="pokemon.sprites.front_default"></ion-img>

    <!-- Nombre -->
    <ion-card-header class="ion-text-center">
      <ion-card-title class="ion-text-capitalize">{{pokemon.name}}</ion-card-title>
    </ion-card-header>

    <ion-card-content>

      <ion-grid>
        <!-- Tipo -->
        <ion-row>
          <ion-col class="ion-text-center">Tipo</ion-col>
          <ion-col>
            <ion-img class="ion-padding-start ion-padding-end" [src]="'assets/img/' + pokemon.types[0].type.name + '.gif'"></ion-img>
          </ion-col>
          <ion-col>
            <ion-img class="ion-padding-start ion-padding-end" *ngIf="pokemon.types[1]" [src]="'assets/img/' + pokemon.types[1].type.name + '.gif'"></ion-img>
          </ion-col>
        </ion-row>
        <!-- Peso -->
        <ion-row class="ion-text-center">
          <ion-col size="4">Peso</ion-col>
          <ion-col size="8">{{pokemon.weight / 10}} kg</ion-col>
        </ion-row>
        <!-- Altura -->
        <ion-row class="ion-text-center">
          <ion-col size="4">Altura</ion-col>
          <ion-col size="8">{{pokemon.height / 10}} m</ion-col>
        </ion-row>
      </ion-grid>

    </ion-card-content>
    
  </ion-card>

</ion-content>

Resultados del ejemplo Plugin Capacitor HTTP

Por fin, podemos ejecutar nuestra aplicación con el siguiente comando:

$ ionic serve

Este seria el resultado:

plugin capacitor http 2

Aquí os dejo el codigo en Github.

Por ultimo, os dejo un video donde hacemos todo lo comentado en este articulo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *