Utiliza una API REST externa con WordPress

En el mundo del desarrollo web, llega un punto donde necesitamos utilizar los datos de un servidor externo, por ejemplo, necesitamos saber cuántos seguidores tenemos en nuestro Instagram ó queremos obtener los datos de un libro, etc., y éstos a su vez, plasmarlos dentro de nuestro WordPress para una mejor visualización; la solución será usar una API REST externa con WordPress.

Tal vez ya consumas una API desde cURL o una librería externa. ¿Pero lo has intentado usando las funciones de tu WordPress?

¿Qué es una API REST?

Una API REST es una interfaz entre sistemas que utilizan peticiones HTTP para obtener y/o modificar datos, y hasta ejecutar funcionalidades específicas de la API REST.

Las respuestas de estas peticiones HTTP serán en formato JSON o XML, y podrás hacer lo que quieras con ellas con tu lenguaje de programación favorito.

Si no sabes qué son las peticiones HTTP, sigue éste enlace para saber más al respecto (las peticiones más comunes son: GET y POST).

Gráficamente, así es como funciona una petición a una API REST:

La gráfica anterior se explica de la siguiente manera:

El cliente quiere conocer los estados de México, y existe una API REST que te da a conocer los estados del país seleccionado (/servicios/estados/), entonces le tenemos que enviar el valor “México” en el parámetro “país”, y la API REST se encargará de devolvernos los estados del país México; y con esos datos, el cliente se encargará de cómo manejarlos.

HTTP API

WordPress contiene un conjunto de funciones que pertenecen a la HTTP API, y sirven para hacer peticiones HTTP a API REST ó cualquier otro servidor que retorne alguna respuesta. Así mismo, también contiene funciones para leer dichas respuestas.

Lo que aprendas a continuación, te servirá para tus plugins y temas WordPress que desarrolles en el futuro.

API REST de CoinMarketCap

Vamos a desarrollar un pequeño plugin que se conecte a la API de CoinMarketCap; es una web que te muestra los precios de todas las criptomonedas que hay en el mercado.

Lo que queremos hacer es obtener las últimas 5 criptomonedas más populares del mercado y mostrarlas en nuestra barra de administración de WordPress, justo así:

Si no tienes idea de cómo hacer un plugin WordPress, te invito a que leas mi post donde te explico lo que necesitas para poder desarrollarlos.

Usando la HTTP API de WordPress

Entonces, te comentaba sobre unas funciones de WordPress para hacer peticiones a una API REST, una de ellas es wp_remote_request():

wp_remote_request( string $url, array $args )

1	wp_remote_request( string $url, array $args )

Ésta acepta dos parámetros:

$url (string) – La URL donde haremos nuestra petición.
$args (array) – Los argumentos de nuestra petición.

En nuestro caso, la URL de nuestra petición sería la siguiente:

$convert_to = 'MXN';
$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$convert_to = 'MXN';

$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

Nótese las variables $convert_to y $just_show, esas las puedes editar a tu criterio; si quieres que el resultado sea en euros, tendrías que cambiar MXN por EUR y si quieres mostrar las últimas 10 monedas populares, solo cambia el 5 por 10.

Visita la documentación de la API de CoinMarketCap para más información de los parámetros que aceptan sus URLs.

También dijimos que acepta un segundo parámetro, los argumentos:

$args = array(
   'method' => 'GET',
);

$args = array(

'method' => 'GET',

);

¡Sorpresa! Tenemos que especificarle qué tipo de método HTTP usará nuestra petición, en este caso la documentación de la API nos dice que usemos GET para la petición.

Con los códigos anteriores, tenemos este código:

$convert_to = 'MXN';
$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$args = array(
   'method' => 'GET',
);

$response = wp_remote_request( $coinmarketcap_api_url, $args );

$convert_to = 'MXN';

$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$args = array(

'method' => 'GET',

);

$response = wp_remote_request( $coinmarketcap_api_url, $args );

Y listo, ya estamos haciendo una petición a la API REST de CoinMarketCap.

Manejando el resultado de la petición

¿Ahora cómo manejamos el resultado?

Bien, pues podemos asignar el resultado de la petición a una variable, en este caso, se la asignamos a la variable $response; y aquí viene otra de las funciones de la HTTP API de WordPress, wp_remote_retrieve_body():

wp_remote_retrieve_body( array $response )

1	wp_remote_retrieve_body( array $response )

Y como ven, acepta un parámetro de tipo array, y ahí es justo donde vamos a poner nuestra variable $response, la cual contiene la respuesta de nuestra petición.

Entonces, nuestro código sería:

$response = wp_remote_request( $coinmarketcap_api_url, $args );
$cryptocurrencies = wp_remote_retrieve_body( $response );

1 2	$response = wp_remote_request( $coinmarketcap_api_url, $args ); $cryptocurrencies = wp_remote_retrieve_body( $response );

Aunque, si no te gusta escribir toda esa función, simplemente podrías hacer esto:

$response = wp_remote_request( $coinmarketcap_api_url, $args );
$cryptocurrencies = $response['body'];

1 2	$response = wp_remote_request( $coinmarketcap_api_url, $args ); $cryptocurrencies = $response['body'];

Que sería lo equivalente al código anterior.

Pruebas, ¿en verdad funciona?

¡Si funciona! Si mandamos a imprimir la variable $cryptocurrencies con la función var_dump(), veríamos lo siguiente:

Convirtiendo el resultado

Hasta aquí todo bien, pero ahora tenemos un problema, el resultado en sí está en formato JSON, y tenemos que convertirlo a un array para que PHP lo pueda leer correctamente; esto lo hacemos con la función json_decode():

json_decode( string $string, bool $assoc_array )

1	json_decode( string $string, bool $assoc_array )

La cual acepta dos parámetros:

$string (string) – El JSON string a decodificar.
$assoc_array (bool) – Si queremos que la decodificación sea un array o no.

Y lo implementamos en nuestro código; nota que el segundo parámetro de la función json_decode() es true:

$response = wp_remote_request( $coinmarketcap_api_url, $args );
$cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

1 2	$response = wp_remote_request( $coinmarketcap_api_url, $args ); $cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

!Bien! Nuestra variable $cryptocurrencies ya es un array.

Barra de administración

Pero si recuerdan, les dije que debíamos agregar las criptomonedas en nuestra barra de administración de WordPress. ¡No temas! Es totalmente sencillo.

Tenemos que usar el hook llamado admin_bar_menu, el cual nos permite agregar un nuevo menú en la barra de administración:

add_action( 'admin_bar_menu', 'wp_cmkcap_add_admin_bar_menu', 999 );

1	add_action( 'admin_bar_menu', 'wp_cmkcap_add_admin_bar_menu', 999 );

El código anterior nos indica que ejecutará la función wp_cmkcap_add_admin_bar_menu() en el momento que el hook admin_bar_menu sea ejecutado.

Creando el menú principal

Ten mucho en cuenta que la función acepta un parámetro ($wp_admin_bar) de tipo WP_Admin_Bar, éste será muy importante, porque nos permitirá agregar nuestro menú:

wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ){}

1	wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ){}

A continuación, agregamos nuestro título principal del menú:

$parent_node = array(
   'id'    => 'wp_cmkcap_admin_bar',
   'title' => 'Cryptocurrencies',
);

$wp_admin_bar->add_node( $parent_node );

$parent_node = array(

'id' => 'wp_cmkcap_admin_bar',

'title' => 'Cryptocurrencies',

);

$wp_admin_bar->add_node( $parent_node );

Ten en cuenta el método add_node(), éste será el encargado de agregar nuestro menú a la barra de administración de WordPress. Y recuerda muy bien qué valor le estás poniendo al índice id de la variable $parent_node.

Agregando los títulos dentro del menú

¿Recuerdan que convertimos nuestra respuesta JSON a un array? Bien, pues ahora lo leemos con la función foreach de PHP:

foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {
   $child_node = array(
      'id'    => 'cryptocurrency-' . $cryptocurrency_data['id'],
      'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',
      'parent' => 'wp_cmkcap_admin_bar',
   );

   $wp_admin_bar->add_node( $child_node );
}

foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {

$child_node = array(

'id' => 'cryptocurrency-' . $cryptocurrency_data['id'],

'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',

'parent' => 'wp_cmkcap_admin_bar',

);

$wp_admin_bar->add_node( $child_node );

}

La variable $cryptocurrency_data contendrá toda la información de la criptomoneda, entonces si queremos solo el nombre de la criptomoneda, tendríamos que llamar a la variable de la siguiente forma:

$cryptocurrency_data['name'];

1	$cryptocurrency_data['name'];

Puedes revisar qué información contiene $cryptocurrency_data en la imagen cuando hicimos el var_dump().

Y ahora, quiero que pongas atención en el valor del índice title dentro de la variable $child_node:

$child_node = array(
   'id'    => 'cryptocurrency-' . $cryptocurrency_data['id'],
   'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',
   'parent' => 'wp_cmkcap_admin_bar',
);

$child_node = array(

'id' => 'cryptocurrency-' . $cryptocurrency_data['id'],

'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',

'parent' => 'wp_cmkcap_admin_bar',

);

En el índice title es donde pondremos el nombre de la criptomoneda concatenado con su precio en pesos mexicanos, para este ejemplo.

Y el valor del índice parent tendrá que ser igual al valor del índice id que le pusiste en tu variable $parent_node. Esto para que cada título de la criptomoneda se vaya agregando abajo del menú Cryptocurrencies.

Con el código anterior unido, la función wp_cmkcap_add_admin_bar_menu() se vería de esta manera:

function wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ) {
   $parent_node = array(
      'id' => 'wp_cmkcap_admin_bar',
      'title' => 'Cryptocurrencies',
   );

   $wp_admin_bar->add_node( $parent_node );

   $convert_to = 'MXN';
   $just_show = 5;
   $coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;
   $args = array(
      'method' => 'GET',
   );
   $response = wp_remote_request( $coinmarketcap_api_url, $args );
   $cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

   foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {
      $child_node = array(
         'id' => 'cryptocurrency-' . $cryptocurrency_data['id'],
         'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',
         'parent' => 'wp_cmkcap_admin_bar',
      );

      $wp_admin_bar->add_node( $child_node );
   }
}

function wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ) {

$parent_node = array(

'id' => 'wp_cmkcap_admin_bar',

'title' => 'Cryptocurrencies',

);

$wp_admin_bar->add_node( $parent_node );

$convert_to = 'MXN';

$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$args = array(

'method' => 'GET',

);

$response = wp_remote_request( $coinmarketcap_api_url, $args );

$cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {

$child_node = array(

'id' => 'cryptocurrency-' . $cryptocurrency_data['id'],

'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',

'parent' => 'wp_cmkcap_admin_bar',

);

$wp_admin_bar->add_node( $child_node );

}

Resultado final

¡Listo! Hemos terminado, descarga el código completo y ejecútalo en tu WordPress y verás cómo funciona a la perfección, así es como se debería ver el código:

<?php

/*
Plugin Name: WP CoinMarketCap
Plugin URI:  https://roelmagdaleno.com/
Description: Get the latest cryptocurrency data.
Version:     1.0
Author:      Roel Magdaleno
Author URI:  https://roelmagdaleno.com/
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

function wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ) {
   $parent_node = array(
      'id'    => 'wp_cmkcap_admin_bar',
      'title' => 'Cryptocurrencies',
   );

   $wp_admin_bar->add_node( $parent_node );

   $convert_to            = 'MXN';
   $just_show             = 5;
   $coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;
   $args                  = array(
      'method' => 'GET',
   );
   $response              = wp_remote_request( $coinmarketcap_api_url, $args );
   $cryptocurrencies      = json_decode( wp_remote_retrieve_body( $response ), true );

   foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {
      $child_node = array(
         'id'    => 'cryptocurrency-' . $cryptocurrency_data['id'],
         'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',
         'parent' => 'wp_cmkcap_admin_bar',
      );

      $wp_admin_bar->add_node( $child_node );
   }
}

add_action( 'admin_bar_menu', 'wp_cmkcap_add_admin_bar_menu', 999 );

<?php

Plugin Name: WP CoinMarketCap

Plugin URI: https://roelmagdaleno.com/

Description: Get the latest cryptocurrency data.

Version: 1.0

Author: Roel Magdaleno

Author URI: https://roelmagdaleno.com/

License: GPL2

License URI: https://www.gnu.org/licenses/gpl-2.0.html

function wp_cmkcap_add_admin_bar_menu( $wp_admin_bar ) {

$parent_node = array(

'id' => 'wp_cmkcap_admin_bar',

'title' => 'Cryptocurrencies',

);

$wp_admin_bar->add_node( $parent_node );

$convert_to = 'MXN';

$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$args = array(

'method' => 'GET',

);

$response = wp_remote_request( $coinmarketcap_api_url, $args );

$cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {

$child_node = array(

'id' => 'cryptocurrency-' . $cryptocurrency_data['id'],

'title' => $cryptocurrency_data['name'] . ' / ' . $cryptocurrency_data['price_mxn'] . ' MXN',

'parent' => 'wp_cmkcap_admin_bar',

);

$wp_admin_bar->add_node( $child_node );

}

add_action( 'admin_bar_menu', 'wp_cmkcap_add_admin_bar_menu', 999 );

Funciones de Ayuda

Pero podríamos usar otra función para hacer nuestras peticiones en vez de wp_remote_request(), y sería la función wp_remote_get(), la cual acepta los mismos parámetros que la función que hemos usado anteriormente.

Solo que le pasamos únicamente el primer parámetro, que es la URL de la API REST; el código quedaría de ésta forma:

$convert_to            = 'MXN';
$just_show             = 5;
$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;
$response              = wp_remote_get( $coinmarketcap_api_url );
$cryptocurrencies      = json_decode( wp_remote_retrieve_body( $response ), true );

$convert_to = 'MXN';

$just_show = 5;

$coinmarketcap_api_url = 'https://api.coinmarketcap.com/v1/ticker/?convert=' . $convert_to . '&limit=' . $just_show;

$response = wp_remote_get( $coinmarketcap_api_url );

$cryptocurrencies = json_decode( wp_remote_retrieve_body( $response ), true );

Nótese que hemos eliminado la variable $args, (donde le decíamos que ibamos a hacer una petición GET) ya que ésta función es solamente para hacer peticiones HTTP GET.

Si tu API te pide una petición HTTP POST, entonces usuarías la función wp_remote_post().

Puntos a tomar en cuenta

Cada API REST es diferente, nos piden distintos parámetros y alguno de ellos nos podría pedir ciertos argumentos, como cabeceras HTTP, el tiempo de espera del servidor, si desea verificar el SSL, entre otros. Si llegases a usar un argumento, lo tendrías que especificar dentro de la variable $args, por ejemplo:

$args = array(
   'timeout' => 30,
   'httpversion' => '1.1',
   'sslverify' => false,
   'body' => array(
      'username' => 'avengers',
      'password' => 'infinitywars',
   ), 
);

wp_remote_post( $api_url, $args );

$args = array(

'timeout' => 30,

'httpversion' => '1.1',

'sslverify' => false,

'body' => array(

'username' => 'avengers',

'password' => 'infinitywars',

);

wp_remote_post( $api_url, $args );

Otro punto a tomar en cuenta es que algunas API REST necesitarán una API KEY para poder realizar nuestras peticiones exitosamente; tienes que revisar en la documentación de la API REST que estés usando, si necesitas una API KEY para empezar a utilizar su recurso.

De vez en cuando, las API REST podrían alentar un poco tu sitio, todo depende de qué tan rápida sea la respuesta de la API REST que estés utilizando. La solución a esto es que sólo hagas una única petición al momento de activar tu plugin y guardes el resultado de la petición en un valor en tu base de datos, y de ahi vas leyendo su valor, así te ahorras las llamadas que podrían arruinar tu sitio.

Recursos

¿Te interesa seguir trabajando con API REST y WordPress? Aquí te dejo algunos recursos:

Lista de APIs públicas.
La HTTP API de WordPress.
Insomnia. Un programa para hacer peticiones HTTP a API REST.

Si has llegado hasta aquí, ¡te felicito!

Ahora, te invito a que en los comentarios me expongas tus dudas que surgieron a lo largo del post ó las ideas que tienes sobre cómo implementar esto en algún plugin.

Si con éste tutorial has hecho un plugin parecido al que acabamos de desarrollar, comenta con un screenshot los resultados y explícanos de que se trata. 🙂

¿Te gustó mi contenido? Compártelo con los demás:

Join the Conversation

8 Comments

pepoo says:
9 enero, 2018 at 9:59 AM
Hola, me encantaría saber como puedo mostrar el resultado de la API REST en una tabla que sea responsive. No en el admin menú 😀
Muchísimas gracias por el post.
Un saludo.
Responder
1. Roel Magdaleno says:
  9 enero, 2018 at 1:30 PM
  Hola, lo que se me ocurre es que, utilices la Shortcode API (https://codex.wordpress.org/Shortcode_API) de WordPress para que puedas pedir los datos deseados e imprimirlos en la tabla responsive, algo así:
  [mishortcode criptomonedas=”bitcoin,xrp,eth”]
  Donde el valor de “criptomonedas” sería el valor que vas a mandar a pedir a la API. Ese shortcode lo pondrías en un post o página.
  Checa el código de este plugin para que sepas como están contruyendo la tabla responsive: https://es.wordpress.org/plugins/automatic-responsive-tables/
  Ya tu te encargas de poner los valores dentro de la tabla.
  Saludos y me da mucho gusto que te haya servido el post. 🙂
  Responder
  1. pepoo says:
    9 enero, 2018 at 2:25 PM
    Muchas gracias por contestar tan rápido.
    Justamente lo que no se es como pasar el array que hay dentro de $cryptocurrencies (en tu ejemplo) a una tabla con bootstrap (HTML5) de manera automática para poder hacer peticiones a la API y que te salgan en formato tabla. Tipo esto: http://issues.wenzhixin.net.cn/bootstrap-table/
    Se que es un poco complicado… pero no encuentro la manera.
    Responder
    1. Roel Magdaleno says:
      9 enero, 2018 at 4:46 PM
      La verdad es que no es nada complicado, lo que tienes que hacer es renderizar la tabla desde PHP, tendrías que definir el inicio de la tabla, y dentro de la tabla, ejecutas un loop foreach que recorra los elementos de $cryptocurrencies.
      Aquí hay un ejemplo del código: https://wp-types.com/forums/topic/create-table-rows-with-a-foreach-loop/
      Y bueno, yo lo programaría de la forma como sale en la imagen (espero estar entendiendo lo que quieres):
      https://uploads.disquscdn.com/images/003bf9c6ee001bc4c1bdad8d101420c54ead1f946c8f9584515b0d9c1f00f917.png
      ¡Inténtalo! Espero te pueda servir. Saludos. 🙂
      Responder
      1. pepoo says:
        10 enero, 2018 at 2:45 AM
        Estoy aprendiendo mucho, te agradezco tu esfuerzo.
        El código que uso es el siguiente:
        https://paste.ofcode.org/yYC2a6VLyWh4kPXZZBWU2V
        y este es el resultado:
        https://uploads.disquscdn.com/images/89079fb26d6846b07c2d30db656d06ef4afa7117297e7dc02b1376d34732454f.jpg
        Se muestran las 5 array pero no los componentes que hay dentro…
        Muchas gracias 😀
      2. Roel Magdaleno says:
        10 enero, 2018 at 1:01 PM
        Ahh! Pero no estás usando WordPress, verdad? De todas formas te muestra “Array” porque estás imprimiendo un Array, no el componente, si quieres acceder a los componentes deberías mandarlos a llamar así:
        $crypto_table .= ” . $cryptocurrency_data[‘name’] . ‘ ‘;
        $crypto_table .= ” . $cryptocurrency_data[‘price_usd’] . ‘ ‘;
        Y tu foreach debería ser así:
        foreach ( $cryptocurrencies as $key => $cryptocurrency_data ) {
        $crypto_table .= ” . $cryptocurrency_data[‘name’] . ‘ ‘;
        $crypto_table .= ” . $cryptocurrency_data[‘price_usd’] . ‘ ‘;
        }
        Fíjate bien en el resultado final del plugin que hicimos en este post, es justo como lo estoy haciendo. Saludos. 🙂
José says:
8 diciembre, 2018 at 2:55 PM
Saludos, tu post fue tremendo. Me gustaría saber como hacer para comunicarme con una API que solciita como parametro un XML que pienso crear con WP All Export
Responder
1. Roel Magdaleno says:
  8 diciembre, 2018 at 5:09 PM
  Gracias por comentar. Sobre tu pregunta, tendrías que buscar la documentación de la API a la que harás petición para ver cómo recibe el XML. En teoría, deberías enviar el contenido del XML y el header “Content-type” tiene que ser “application/xml”. Te aconsejo usar el programa “Insomnia”, es para probar APIs, yo lo uso mucho. Saludos!
  Responder

Utiliza una API REST externa con WordPress

¿Qué es una API REST?

HTTP API

API REST de CoinMarketCap

Usando la HTTP API de WordPress

Manejando el resultado de la petición

Pruebas, ¿en verdad funciona?

Convirtiendo el resultado

Barra de administración

Creando el menú principal

Agregando los títulos dentro del menú

Resultado final

Funciones de Ayuda

Puntos a tomar en cuenta

Recursos

Join the Conversation

Cancelar respuesta

Leave a comment