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.
IMPORTANTE: necesitaras las imágenes de los tipos de los pokemons, los tienes aquí, guárdalos en assets/img
Habilitar Plugin Capacitor HTTP
A continuación, debemos habilitar el plugin Capacitor Http desde el fichero capacitor.config.ts, quedando así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
1 |
ionic g s pokemon |
Esto creará un servicio con la función getPokemon pasándole un id como parámetro:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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/
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.
Así se quedaría:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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í:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
Capacitor HTTP |
Resultados del ejemplo Plugin Capacitor HTTP
Por fin, podemos ejecutar nuestra aplicación con el siguiente comando:
|
1 |
ionic serve |
Este seria el resultado:
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.
Deja una respuesta