Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress Plugins
Webdesign

Cómo incorporar APIs externas en tu tema o plugin de WordPress

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las APIs te pueden ayudar a añadir funcionalidad a tus plugins y temas de WordPress. En este tutorial te mostraré cómo usar cualquier API (ya sea desde Flickr, Google, Twitter, etc.) con WordPress. Aprenderás a conectar, recopilar datos, almacenar y renderizar, ¡todo lo que necesitas saber para ampliar tu plugin o tema con nueva funcionalidad!

Usaremos Flickr como ejemplo, creando un sencillo widget que muestre las últimas imágenes de Flickr ordenadas en base al nombre de usuario.

Espera, ¿Qué es una API?

"API" significa Interfaz de Programación de Aplicaciones; un intermediario entre aplicaciones, que les permite comunicarse entre sí, enviándose información de ida y vuelta en tiempo real. Vamos a usar una API web, que usa HTTP para capturar datos de una ubicación remota en algún lugar de Internet.

"Las APIs son utilizadas por las aplicaciones de software de la misma manera que las interfaces de las aplicaciones y otros tipos de software son utilizadas por los seres humanos." –

David Berlind, ProgrammableWeb

Si deseas tener una idea aún más clara de lo que son las APIs antes de profundizar en este tutorial, aquí tienes algunos recursos más para ayudarte:

Plugins para la API de WordPress en Envato Market

Si deseas ver lo que otros desarrolladores de WordPress están construyendo con la API, echa un vistazo a esta colección de plugins en Envato Market, ¡hay un montón de cosas estupendas para la API con las que entretenerte!

api wordpress plugins on codecanyon
Plugins de la API de WordPress en Envato Market

1. Organiza tu entorno de trabajo

Comencemos organizando nuestro entorno de trabajo. Comienza descargando la aplicación Postman, la cual proporciona un entorno de desarrollo de APIs que facilita la conexión, la comprobación y el desarrollo de cualquier API. Para individuos y equipos pequeños es completamente gratuita.

postman app

Vamos a construir un widget en forma de sencillo plugin de WordPress, así que asegúrate de tener WordPress instalado.

2. Escribir el código de base del plugin

Para empezar vamos a crear un sencillo plugin llamado flickr-widget. Crea una carpeta con ese nombre y crea también un archivo flickr-widget.php en ella. En la parte superior del archivo coloca el siguiente código (no dudes en cambiar el autor y las URIs por tus propios datos):

Nota: este es un plugin rudimentario, así que no cargaré un archivo de idioma ni crearé ningún parámetro adicional.

Coloca la carpeta de plugins recién creada dentro de tu instalación de WordPress: wp-content > plugins. Ahora puedes activarlo desde el panel de administración de WordPress accediendo a escritorio > plugins. No verás ningún cambio en tu WordPress porque en realidad no hemos añadido ningún código funcional.

Una nota sobre el uso de las APIs

Antes de ir más lejos, permíteme mencionar rápidamente el uso de la API. Cualquier servicio cuya API desees usar tendrá su documentación; Recomiendo encarecidamente que la revises detenidamente. Puedes utilizar las APIs con todo tipo de lenguajes de desarrollo y a menudo, obtener datos en cualquier formato que necesites: PHP, JSON, Java, etc. Una buena documentación contendrá información detallada sobre cómo conectarse a la API, con instrucciones para cada idioma y también sobre los puntos de conexión principales de la API (un punto de conexión o "endpoint" es un extremo de un canal de comunicación).

Normalmente las APIs web  se clasifican o como SOAP o como REST. SOAP se basa únicamente en XML para proporcionar servicios de mensajería, mientras que REST ofrece un método más ligero, utilizando direcciones de URLs en la mayoría de los casos para recibir o enviar información. En nuestro ejemplo usaremos una API REST.

3. Configurar y comprobar la API con Postman

Así que, este es nuestro plan:

  • Configurar y probar la API con Postman
  • Conectar, recopilar y formatear datos desde la REST API de Flickr
  • Almacenar en caché los datos con transitorios de WordPress

Vamos a hacer referencia a la documentación de la API de Flickr. En la sección Request Formats (Formatos de solicitud) encontrarás REST, XML-RPC, SOAP. Necesitamos REST. Haz clic en él y verás un ejemplo de un punto de conexión genérico de la API REST de Flickr: https://www.flickr.com/services/rest/.

Con la API REST de Flickr podemos GET (obtener), POST (publicar) y DELETE (eliminar) cualquier dato de Flickr que queramos. Copia el punto de conexión de ejemplo y pégalo en Postman (asegúrate de que el tipo de solicitud esté establecido en GET).

Haz clic en el botón Send (enviar) y... ¡Error!

postman error

La solicitud de ejemplo incluía el obligatorio método de la API de Flickr, pero no especificamos la clave de API necesaria para conectarse (las claves se utilizan para realizar un seguimiento y controlar cómo se utiliza una API para evitar, por ejemplo, el uso malintencionado o el abuso de la API tal y como probablemente venga definido en las condiciones del servicio).

4. Obtener la clave de la API

Habiendo establecido que necesitamos una clave de API, vamos a obtener una. Para crear una, primero necesitarás tener una cuenta de Flickr/Yahoo. Una vez hayas entrado en el panel de la API, haz clic en el enlace create your first (crea tu primera):

Después de eso, haz clic en Request an API Key (solicitar una clave de API). Muchos proveedores de API tienen sus propios términos y condiciones concretas sobre el uso de su API. Algunos limitan el acceso, otros tienen versiones ligeras y pro, o comerciales y no comerciales. A veces, las claves de API se proporcionan después de una aprobación manual; depende totalmente del proveedor de la API. He elegido Flickr, porque los requisitos de su API son sencillos. Por ejemplo, Twitter requiere una descripción detallada de la aplicación que deseas construir antes de proporcionar una clave de API y, a continuación, el equipo de revisión la examina.

Dicho esto, haz clic en el botón Apply for a non-commercial key (solicitar una clave no comercial) y proporciona información básica sobre el nombre de la aplicación.

app details

Una vez que hayas enviado la solicitud, recibirás inmediatamente la clave de la API (que te identifica) y el código secreto (que demuestra que eres quien dices ser). ¡Guarda estos datos en un sitio seguro!

5. Establecer los parámetros de solicitud

Ahora necesitaremos un método para solicitar datos. En la documentación de la API de Flickr podemos ver que Flickr tiene toneladas entre los que elegir. Algunos métodos, como la publicación o la eliminación de imágenes, requieren autenticación. Flickr utiliza OAuth para esto; un protocolo abierto, sencillo y seguro que permite a las aplicaciones autenticar a los usuarios e interactuar con los proveedores de API en tu nombre. La información del usuario final se transfiere de forma segura sin revelar la identidad del mismo.

Por ahora, usaremos métodos simples que no requieran oAuth. Haz clic en el método flickr.photos.getRecent para ver qué es necesario. Este método no necesita autenticación, pero toma varios argumentos: api_key (obligatorio), extras, per_page, page. Hagamos una simple solicitud en Postman usando nuestros parámetros:

  • Punto de conexión general de la API: https://flickr.com/services/rest
  • Clave de API - f49df4a290d8f224ecd56536af51FF77 (esta es una clave de API  a modo de ejemplo que tendrás que reemplazar por la tuya)
  • Método - flickr.photos.getRecent

Tendrá el siguiente aspecto:

Esto devolverá la lista de imágenes públicas recientes de Flickr en formato XML.

XML format
Formato XML

Siempre configuro el formato de datos en auto para permitir que Postman decida en qué formato están los datos. Con Postman tienes varias opciones de formato de datos: JSON (mi favorito), XML, HTML y Text. Flickr devuelve datos en formato XML, pero esto no es un problema para nosotros, ya que podemos añadir un parámetro adicional para obtener datos en JSON &formato=json:

JSON format
Formato JSON

6. Conectar, recopilar y formatear datos

Ahora sabemos cómo solicitar datos usando la API REST, vamos a crear nuestro widget de Flickr para WordPress. En el archivo PHP principal del plugin pega el código del widget. No voy a cubrir los detalles de la creación de widgets de WordPress en este tutorial, ya que nuestro enfoque es diferente. Tenemos una guía de aprendizaje Introducción para crear tu primer widget de WordPress por Rachel McCollin que debería ponerte al corriente si lo necesitas.

En el administrador de WordPress, dirígete a Apariencia > Widgets y añade el widget "Photos from Flickr" (fotos de Flickr) a un área de widgets. Ahora, si vas al front-end verás el título del widget, aunque aún no muestra resultados.

Volvemos al archivo PHP de nuestro plugin, y aquí vamos a representar la salida del widget en sí. Tenemos nuestra clave de API, el método y el formato que estamos buscando. Ahora tendremos que asegurarnos de que se proporciona el ID de usuario de Flickr y el número de fotos que el usuario desea obtener. Estos son extraídos de la configuración del widget.

Nota: para obtener un ID de usuario de Flickr, utiliza este servicio. Estoy usando envato como nombre de usuario, y el id es 52617155@N08. Introduce el siguiente código dentro de la instrucción IF:

En este punto podemos unir la URL final del punto de conexión de la API REST con todos los argumentos que hemos recopilado.

Ahora haremos una solicitud de API con la función php file_get_contents():

Si ahora vas al front-end, verás algo como esto en la salida:

Nuestra solicitud tuvo éxito y devolvió datos útiles, así que ahora vamos a decodificarlos y formatearlos. Comenzaremos limpiando la cadena JSON, primero quitando el contenedor (jsonFlickrApi({...});) con un str_replace. A continuación, descodificaremos la URL JSON:

Ahora, si imprimimos nuestros resultados, veremos una matriz asociativa con datos. Cuando estemos listos podemos recorrer esa matriz y crear la estructura de la salida de los datos. Pero primero, echa un vistazo más de cerca al pequeño parámetro stat. Según la documentación de Flickr, esto indica el estado de la respuesta. Por lo tanto, antes de crear la estructura del widget vamos a utilizar este estado para asegurarnos de que tenemos los datos correctos. Añade una instrucción IF:

Crea una matriz vacía antes de la instrucción IF. Esta matriz se utilizará para contener los datos recopilados:

Tu bucle foreach ahora debería tener este aspecto:

Aquí recorremos cada objeto foto de la matriz de fotos a partir de nuestros datos de respuesta. Nuestro widget necesita la siguiente información para funcionar correctamente:

  • URL absoluta de la imagen
  • Enlace de la imagen a Flickr
  • Descripción de la imagen/texto alternativo

Consulta esta página y comprenderás por qué utilicé esta estructura. Aquí encontrarás la información detallada sobre cómo crear la ruta de la imagen y el enlace de la imagen.

Crear la salida del widget

Ahora nuestra matriz $response_results contiene exactamente los datos que necesitamos para crear nuestro widget:

Comenzamos asegurándonos de que nuestra respuesta no esté vacía. Después de eso creamos una lista desordenada, almacenándola en $output, después recorremos cada imagen, añadiendo un enlace contenedor, todos los demás detalles, y finalmente generamos todo el asunto con echo;.

¡Si ahora vas al front-end del sitio verás una lista de imágenes!

Flickr images

Vamos a añadir un estilo básico con CSS para que tenga mejor aspecto.

Crea un archivo flickr-widget.css vacío en la carpeta raíz del plugin. En la parte superior del archivo del plugin pega el siguiente código:

A continuación, dentro de la instrucción IF en la parte superior añade el siguiente código:

Dentro del archivo css añade estilo básico:

¡Ahora se ve mucho mejor!

Bonus: almacenar en caché los datos con los transitorios de WordPress

En esta etapa hemos terminado el widget, pero hay un pequeño detalle más que llevará nuestro desarrollo al siguiente nivel: el almacenamiento en caché.

Cualquier solicitud de API utiliza los recursos del sitio y aumenta el tiempo de carga. Cada recarga del explorador enviará una solicitud de API, y podría además ser realizada por varios usuarios al mismo tiempo. ¿Qué sucedería si, por alguna motivo, el servidor del proveedor de la API estuviese inactivo? Tu sitio sufriría dificultades de carga. La solución consiste en almacenar en caché los resultados y actualizarlos en un intervalo de tiempo determinado. Por lo tanto, la primera vez que un usuario visite nuestra página, se enviará la solicitud de API, pero la próxima vez, o cuando la visite otro usuario, no necesitaremos enviar una nueva solicitud de API, sino que recuperaremos los resultados de la caché de nuestro sitio.

Vamos a modificar el código del widget para almacenar en caché los resultados:

No describiré qué es el transitorio ni cómo funciona, simplemente lo que hace. Cada vez que se representa el widget, primero comprobamos si existe el transitorio; si está presente obtenemos resultados de transitorios, y si no es así, realizamos una solicitud de API. Y nuestro transitorio expirará cada dos horas, con el fin de mantener nuestras últimas imágenes de Flickr reales y actualizadas.

Con el plugin de WordPress Transients Manager incluso puedes ver cómo se ven los resultados de tu solicitud de API de Flickr en caché:

Transients Manager plugin

Y aquí el toque final consiste en eliminar el transitorio para cada actualización del widget. Por ejemplo, si deseas cambiar el número de imágenes mostradas o cambiar el nombre de usuario, deberás realizar una nueva solicitud de API. Esto se puede hacer con el filtro de WordPress widget_update_callback, o con la actualización de la función pública de la clase del widget:

Conclusión

Ha sido un gran esfuerzo, ¡pero ahora ya sabes cómo trabajar con WordPress y APIs! Si te ha gustado este artículo y te apetece ver más tutoriales sobre APIs o transitorios, avísame en la sección de comentarios.

Para coger los archivos de ejemplo del widget dirígete al repositorio de GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.