códigos

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Hoy hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.

     Ahora que ya tenemos claro Cómo crear un módulo en Drupal 9, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será function hook_theme, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.

     En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la function hook_theme en el archivo ( MIMODULO.module ) los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella. 

     Finalmente, añadiremos el archivo routing ( MIMODULO.routing.yml ), para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.  

Requisitos

- Cómo crear un módulo en Drupal 9

Cómo crear módulos con su Controlador y Plantilla en Drupal 9  

     Paso 1 Creación de tu módulo:

          Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"

     Paso 2 Creación del archivo .module para implementar la function_hook_theme():

          En el archivo MIMODULO.module es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la function hook_theme, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.

     Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.

     Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.

<?php

/**
 * Implement hook_theme().
 */
function listado_noticias_theme($existing, $type, $theme, $path) {
    return [
      'listado_noticias' => [
        'variables' => ['items' => [], 'title' => '' ]
      ]
    ];
}

     Paso 3 Creación del Controlador o Controller:

          El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra  function hook_theme.

          Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra function hook_theme, y otro con los datos que obtendremos al conectar con la información recibida desde la function hook_theme.

          Una vez creada nuestra clase controller con el nombre ListadoNoticiasController.php, dentro tendremos la siguiente estructura de código.

<?php

namespace Drupal\listado_noticias\Controller;

use Drupal\Core\Controller\ControllerBase;

class ListadoNoticiasController extends ControllerBase {

  public function page(){

    $items = [
      ['title' => 'Noticia 1'],
      ['title' => 'Noticia 2'],
      ['title' => 'Noticia 3'],
      ['title' => 'Noticia 4'],
    ];

    return [
      '#theme' => 'listado_noticias',
      '#items' => $items,
      '#title' => 'Listado de noticias'
    ];

  }

}

          El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" => "valor" ), ya que los objetos, en realidad también son arrays.

$items = [
  ['title' => 'Noticia 1'],
  ['title' => 'Noticia 2'],
  ['title' => 'Noticia 3'],
  ['title' => 'Noticia 4'],
];

          El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la function hook_theme, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.

          En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la function hook_theme, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.

          Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado. 

return [
  '#theme' => 'listado_noticias',
  '#items' => $items,
  '#title' => 'Listado de noticias'
];

     Paso 4 Creación de la ruta para acceder a la página renderizada:

          Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.

          En esta tarea nos ayudará el archivo listado_noticias.routing.yml , dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.

          Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.

listado_noticias.listado:
  path: '/listado-noticias'
  defaults:
    _controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page'
  requirements:
    _permission: 'access content'

     Paso 5 Creación de la plantilla:

          La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.

          Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el function hook_theme.

          Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será "listado-noticias.html.twig", además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.

          Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.

<h3>{{ title }}</h3>
   <ul>
     {% for noticia in items %}
       <li>{{ noticia.title }}</li>
     {% endfor %}
   </ul>

          Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo  listado_noticias.routing.yml, veremos nuestra página con todos los datos que habíamos configurado.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      Ya que hemos aprendido cómo configurar Contenta CMS de Drupal, para que pueda escuchar nuestra API de Nuxt.js, es el momento de hacer lo mismo desde el otro lado.

   Paso 2 - Configuración de Nuxt.js

     Para obtener datos de la aplicación nuxtapp, usaremos la biblioteca de javascript axios y, específicamente, usaremos la biblioteca axios creada para Nuxt: @nuxt/axios. Si eres desarrollador de PHP, puedes pensar en axios como el Guzzle del mundo de JavaScript. En la Parte 1 de este artículo, cuando instalamos la aplicación mynuxt, extrajimos la biblioteca axios.

   Configuración Variables de entorno ( .env)

  Si queremos conectar nuxtapp con el backend de contenta-drupal, primero tendremos que informarle acerca de algunas variables de entorno, así sabrá hacia dónde podrá realizar las peticiones de datos que quiere obtener.

  Dentro de nuestra aplicación nuxtapp, crearemos un archivo con el nombre .env y dentro pegaremos el siguiente código:

APP_ENV=lando
API_URL=http://contenta-drupal.lndo.site/
CONSUMER_ID={{ Copiaremos aquí el ID Consumer de Drupal en //admin/con

   Después de agregar este archivo, deberá reconstruir la aplicación nuxtapp,  para cargar las variables de entorno en los contenedores de la aplicación; para ello, colocados en la carpeta de nuestrra aplicación de Nuxt.js, ejecutaremos el siguiente comando:

lando rebuild

Configuración de axios ( nuxt.config.js )

   A pesar de que hemos seleccionado la opción Axios, en el momento de realizar la descarga de las dependencias para nuxtapp, si abrimos el archivo de configuración, en el apartado de móldulos, sólo vemos bootstrap-vue/nuxt, al igual que si exploramos la carpeta node_modules, por lo tanto tendremos que descargar axios y luego añadirlo en el listado de módulos dentro del archivo nuxt.config.js.

Para ello, nos aseguraremos de estar en la carpeta nuxtapp y ejecutaremos el siguiente comando para que se descarguen los archivos de axios:

lando yarn add @nuxtjs/axios

 

   Una vez descargado, abriremos el archivo de configuración de Nuxt.js llamado nuxt.config.js y en el apartado de módulos, sutituiremos el código actual por el siguiente:

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/bootstrap
  'bootstrap-vue/nuxt',
],
/*
  ** Axios module configuration
  */
axios: {
  // See https://github.com/nuxt-community/axios-module#options
  debug: process.env.APP_ENV !== "production"
},

   Para ver todas las opciones disponibles puedes leer la URL en el comentario. Para nuestros propósitos, activaremos la depuración con la advertencia de que nuestro APP_ENV no es producción.

   Configuración de la ( baseURL )

     También en el archivo nuxt.config.js, agregaremos un bloque de código env para configurar la baseURL que indica a axios dónde realizar las llamadas API a Contenta. En la parte inferior del archivo, después de la sección build, agregue las siguientes líneas:

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
env: {
  baseURL: process.env.API_URL,
  CONSUMER_ID: process.env.CONSUMER_ID
}

      Después de realizar cambios en los archivos .env o nuxt.config.js, deberá reconstruir la aplicación Lando lando rebuild -y para permitir que la aplicación nuxtapp cargue esos cambios.

lando rebuild -y

   ¡Eso configura nuestra configuración de axios para que ahora podamos realizar solicitudes desde nuestra aplicación mynuxt de regreso a Contenta nuxtapp!

   Hacer una llamada a la API

     Hagamos una ruta de página llamada posts con un archivo index.vue para volver a consultar a Contenta en busca de una publicación. Agregué un tipo de contenido a Contenta con el nombre de la máquina post y consultaré el endpoint /api/node/post/{uuid} para los datos json.

   En Nuxt hay un directorio pages y todo lo que pongas en él, Nuxt creará automáticamente rutas Vue para nosotros. En este caso, crearemos un directorio posts dentro del directorio de páginas:

sudo mkdir pages/posts

   Entonces deberías terminar con una estructura de directorios como esta:

   Observe la estructura del archivo pages/posts/index.vue. Tiene tres secciones: <template>, <script> y <style>. Como probablemente pueda adivinar, la sección <template> contendrá nuestro html, <script> contendrá nuestro javascript y <style> contendrá nuestro css.

   Ahora añadiremos algunos datos para nuestra plantilla. En la sección <script> de pages/posts/index.vue, agreguemos una función data() para que la plantilla sepa qué datos esperamos. En este caso, nuestro tipo de contenido posts consta de los campos title y body. Abriremos pages/posts/index.vue en nuestro editor de código. En la sección <scripts> y a continuación, agregaremos la función data():

<template>
  <section class="container">
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "PLACEHOLDER TITLE",
      body: "PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT"
    }
  }
}
</script>

<style scoped>
</style>

   Ahora nuestra sección<template> tiene acceso a data() y podemos comenzar a construir nuestra plantilla. Agregue a la sección de su plantilla referencias a los marcadores de posición para el title y el body:

<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: 'PLACEHOLDER TITLE',
      body: 'PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT'
    }
  }
}
</script>

<style scoped>
</style>

     En la línea 5, hemos hecho referencia a la clave title de nuestra función data() y hemos representado el contenido del marcador de posición predeterminado en nuestra plantilla. De manera similar, en la línea 12 hemos hecho referencia a la propiedad body, esta vez en una directiva vue v-html. Hemos usado v-html para demostrar el paso de datos que pueden contener html. Podríamos haberlo referenciado de la misma manera que hicimos referencia al título.

     Si ahora visitamos la url de nuestra aplicación: http://nuxtapp.lndo.site/posts deberíamos ver un resultado como el siguiente:

Ahora reemplacemos los datos del marcador de posición con datos reales de contenta-drupal.

   Dentro de la sección <script> agregaremos una nueva función llamada asyncData que devolverá la llamada a nuestra aplicación contenta-drupal con llamadas asyncData y obtendremos los datos e intercambiará los datos del marcador de posición con datos reales.

<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  async asyncData({app}) {
    const data = await app.$axios
      .get('/api/node/post/c6b24529-0d69-4cbb-a966-ab2d6ac5a59b', {})
      .then(res => {
        console.log(res)
        return {
          title: res.data.data.attributes.title,
          body: res.data.data.attributes.body.value
        }
      })
      .catch(err => {
        if (err) {
          return err
        }
      })

    return data
  }
}
</script>

<style scoped>
</style>

   Aquí, en la línea 22, hemos cambiado la función data() por asyncData(). La función asyncData se pasa en el contexto de la aplicación que tiene acceso al objeto $axios a través del trabajo que hicimos en los archivos .env y nuxt.config.js. Usamos este objeto $axios para realizar una solicitud GET de regreso a contenta-drupal y obtener el nodo de publicación con uuid=c6b24529-0d69-4cbb-a966-ab2d6ac5a59b en este ejemplo que uuid está codificado para una publicación específica.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Ahora que hemos aprendido a instalar y configurar, utilizando Lando, una aplicación con Nuxt.js y la distribución optimizada para el sistema headless de Drupal 9, llamada Contenta CMS; es el momento de pasar a la siguiente fase, en la que conectaremos ambas aplicaciones para mostrar los datos servidos desde Drupal, en nuestra aplicación de Nuxt.js.

   Paso 1 - Configuración de Contenta CMS

     Como podrás ver en el capítulo sobre Simple OAuth, para que Drupal pueda escuchar las peticiones desde la API; primero tendremos que configurar tres partes, que nos permitirán realizar esa conexión:

• Rol para la API:

       La idea es crear un rol, al que le otorgaremos los permisos para relizar las conexiones con la API. Para ello, nos iremos a la url "/admin/people/roles" y allí, añadiremos un nuevo Rol, al que llamaremos vue_role, haciendo clic en el botón de añadir nuevo rol.
       Recuerda que Contenta CMS, es un Drupal "vitaminado", por lo que hay ciertas diferencias si queremos acceder a las secciones a través del menú de administración. En este caso, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Role, para encontrar el botón de Add Rol.

Configurar un usuario de API

     Lo siguiente que haremos es, después de haber creado el rol para nuestra API, tendremos que crear un nuevo usuario, al que le añadiremos el  vue_role que acabamos de crear, para esta operación, podremos ir a la url "/admin/people" o si preferimos hacerlo por el menú, al igual que en caso anterior, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Users, para encontrar el botón de Add user.
     En este caso, una vez hagamos clic en el botón para añadir a nuestro usuario, completaremos los campos necesarios como con cualquier otro usuario, le pondremos el nombre de usuario vue_user, y a continuación marcaremos el rol vue_role.

Configurar un consumidor

   El último eslabón de esta cadena de requermientos será el Consumer, que será quien nos permitirá realizar la conexión entre Contenta CMS y la API de Nuxt.js. Para ello, iremos a la url "/admin/config/services/consumer".
   O también podremos acceder a través del menú de administración, esta vez, tal y como lo haríamos desde un Drupal normal y corriente.

   Esta vez, al hacer clic en el botón de Add Consumer, nos aseguraremos de rellenar los campos del formulario con el nombre vue_consumer, para el Consumer, el usuario será vue_user y el rol será vue_role. Asegúrate de aprenderte o dejar apuntado el New Secret, porque será la clave que necesitarás en caso de conectarme con el Consumer, en algunos Headless, como por ejemplo, con Gatsby.

Fantástico, una vez rellenado el formulario, haz clic en guardar para concluir la configuración de nuestra API Drupal Contenta CMS.
A continuación, vamos a configurar la otra parte de este proyecto, o sea, nuestra aplicación de Nuxt.js.

       Con la aparición de varias librerías basadas en JavaScript, como Angular, Vue.js, React, etc. y el aumento definitivo del uso de dispositivos móviles, para conectarse a toda clase de servicios basados en plataformas, webs o aplicaciones; ha llegado el momento perfecto, para que todos aquellos que trabajamos con proyectos desarrollados en Drupal, nos planteemos la posibilidad "Descabezar" o "Desacoplar", el Frontend y el Backend, para seguir sacando el mayor partido, a su potente y flexible interfaz de usuario y al mismo tiempo, que nos adentramos poco a poco en el mundo del Frontend usando las nuevas librerías.

     Por lo general, el elemento común, con el cual funcionan la mayoría o todas estas nuevas librerías basadas en JavaScript, es la lectura de datos en formato Json, debido a la flexibilidad estructural basada en arreglos o Arrays.

     Para ayudarnos con esta transformación o adaptación en Drupal, existen varios módulos contribuidos, algunos incorporados directamente en el núcleo de Drupal, a partir de la versión 8, como el caso de Rest y Json Api, y otros como Json Extras, que nos permitirán ampliar nuestras posibilidades con esta clase de implementaciones.

     Hoy vamos a abordar, la implementación de Json Api y Json Extras, para transformar en formato Json, todo el contenido dentro de nuestra web desarrollada con Drupal 9, sin que tengamos que invertir demasiado tiempo ni complicarnos la existencia. 

GO HEADLESS! DESACOPLAMIENTO DE DRUPAL 9 CON EL MÓDULO JSON API

     Como ya mencionamos al principio de este artículo, el módulo Json Api, ha sido incluido en el núcleo de Drupal 9, por lo que para comenzar a utilizarlo, sólo necesitaremos activarlo desde la url "/admin/modules", o si tienes instalado el módulo Admin Toolbar, podrás hacerlo a través del menú superior, tal y como te muestro en la imagen:

     Ahora sólo nos faltaría descargar e instalar el módulo JSON:API Extras, para mostrarte lo fácil que será convertir en formato Json, todo el contenido que hayamos creado en nuestro Drupal, para poder aplicarle cualquier alternativa en diseño Frontend con la que te sientas más identificado.

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

     Para activar el módulo JSON:API Extras, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en jsonapi_extras -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.   

     En nuestro ejercicio, antes de activar el módulo Json Api del núcleo de Drupal, vamos a descargar el módulo Json:Api Extras, para ello, como siempre, utilizaremos Composer con el comando que hemos mencionado anteriormente. 

     Una vez haya concluido la descarga del módulo, nos iremos a nuestro proyecto, en la url "/admin/modules" y activaremos los siguientes módulos:

     El módulo Serialización se activa automáticamente, como dependencia de Json Api del núcleo de Drupal 9.

     Tan pronto como termine la activación de los módulos que hemos seleccionado, si refrescamos caché, podremos acceder desde el menú de administración a los Servicios Web.

   

 A la mayoría de los que trabajamos con Drupal, en algún momento, nos habrá tocado trabajar en un proyecto, que requería que sirviéramos los datos desde Drupal, para que pudiera ser consumido desde alguna API o herramienta externa, existes múltiples formas de solucionar este problema, mediante el uso de webservices, vistas y varios módulos.

     Si quieres aprender más acerca del uso de Servicios Web en Drupal HAZ CLIC AQUI

     Pero en esta ocasión, nos vamos a referir al caso contrario, es decir, a los pasos necesarios para que podamos consumir, dentro de Drupal, la información provenientes desde una API externa. De esta manera, podremos manipular o presentar los datos, dentro de nuestro proyecto Drupal, sin la necesidad de hacernos responsables de tareas como la insercción o actualización de dichos datos.

   Cómo realizar peticiones de datos externos desde Drupal

     A partir de Drupal 8, se pueden realizar todo tipo de peticiones de datos, hacia fuentes external a Drupal, gracias al método Drupal::httpClient, incluido en el núcleo.  Este método es, simplemente, un envoltorio para que podamos trabajar con la librería de php conocida como Guzzle, que según su página oficial, "Guzzle es un cliente PHP HTTP y un framework, para crear clientes de servicios web RESTful".

     Guzzle utiliza PSR-7 como interfaz de mensajes HTTP. PSR-7 describe interfaces comunes para representar mensajes HTTP. Esto permite que Guzzle funcione con cualquier otra biblioteca que utilice interfaces de mensajes PSR-7.

     Para conocer la versión de nuestro proyecto de Drupal, podremos explorar el archivo composer.lock, y encontraremos varios datos, enlaces, definiciones relacionados con Guzzle:

{
    "name": "guzzlehttp/guzzle",
    "version": "6.5.8",
    "source": {
        "type": "git",
        "url": "https://github.com/guzzle/guzzle.git",
        "reference": "a52f0440530b54fa079ce76e8c5d196a42cad981"
    },
//

 

     Si quiers conocer más acerca de la versión más reciente de Guzzle, HAZ CLIC AQUI

 

   Drupal::httpClient dentro de un módulo personalizado en Drupal

     Si quieres aprender a crear un módulo personalizado HAZ CLIC AQUI

     Para disponer de una fuente de datos externa a Drupal, podremos acceder a la web Data.gov, en la que podremos encontrar un amplio catálogo de informaciones, vía CKAN, con una potente API que nos permitirá realizar, de forma segura, cualquiera de las pruebas relacionadas con nuestras peticiones.

     Vamos a echar un vistazo a algunos ejemplos usando la API de CKAN, para ver la documentación completa HAZ CLIC AQUI.

   Pasos para consumir datos externos a Drupal

     Paso 1 - Inicialización del cliente

       Antes de poder realizar cualquier tipo de petición desde Drupal, vamos a necesitar inicializar el cliente de conexión. Para ello deberíamos incluir la siguiente línea dentro de nuestro Módulo Personalizado:

$client = \Drupal::httpClient();

     Paso 2 - Definir URL de conexión

       Ahora que ya hemos inicializado el cliente, podremos añadir la url y el método que vamos a utilizar para conectarnos y extraer los datos. Para ello, tendremos que agregar una línea como la siguientes, sustituyendo la URL, en caso de utilizar otra dirección.

$client->request('GET', 'http://demo.ckan.org/api/3/action/package_list');

     Guzzle también proporciona una lista de métodos sincrónicos para realizar solicitudes, para ver la lista completa HAZ CLIC AQUI

     Paso 3 - Obtener los datos del requerimiento

       Una vez definidos el método y la url con la que vamos a realizar nuestr petición (Request), necesitaremos recolectar dicha información y guardarla, para luego procesarla, así que añadiremos la siguiente estructura:

$request = $client->get('http://demo.ckan.org/api/3/action/package_list');
$response = $request->getBody();

     Paso 4 - Envío de datos hacia la API

       Ya que hemos aprendido la forma de conectarnos y de recibir los datos, desde una fuenta externa a Drupal, vamos a realizar la prueba contraria, es decir, enviaremos alguna información, en formato JSON, hacia la fuenta externa.

$client = \Drupal::httpClient();
$request = $client->post('http://demo.ckan.org/api/3/action/group_list', [
  'json' => [
    'id'=> 'data-explorer'
  ]
]);
$response = json_decode($request->getBody());

     En el código anterior, hemos cambiado el método GET por el método POST, en client->post(), esto nos ha permitido pasar, además de la url de conexión, un array de nombre "json", compuesto por varias opciones adicionales, entre ellas el formato JSON. Guzzle se encargará de especificar la cabecera de estos datos,  'Content-Type','application/json', así como de añadir el 'json_encoding', para que todo funcione correctamente.

     Finalmente, llamaremos al método json_decode, para decodificar los datos obtenidos en nuestra respuesta.

     Para ver la lista completa de las opciones disponibles, HAZ CLIC AQUI

   Cómo autenticarnos para la conexión

     En algunos casos, necesitaremos autenticarnos, para poder obtener la información desde la fuente externa, con la que deseamos realizar la conexión. En el siguiente ejemplo, puedes ver cómo sería la autenticación para acceder a la API de GitHub.

$client = \Drupal::httpClient();
$request = $client->get('https://api.github.com/user', [
  'auth' => ['username','password']
]);
$response = $request->getBody();

   Como manipular las Excepciones

     Otro de los casos con lo que podremos encontrarnos, son las excepciones. Siempre que utilicemos Drupal::httpClient, tendremos que envolver las excepciones dentro de un bloque try/catch, para poder manejarlas.

     En el siguiente ejemplo, podrás ver cómo manejar una excepción, en un caso de login, para que se muestre en la tabla de errores de Drupal.

$client = \Drupal::httpClient();

try {
  $response = $client->get('http://demo.ckan.org/api/3/action/package_list');
  $data = $response->getBody();
}
catch (RequestException $e) {
  watchdog_exception('my_module', $e->getMessage());
}

     Puedes verificar la lista completa de las excepciones, explorando en la siguiente ubicación: 

CARPETA_RAIZ/vendor/guzzlehttp/guzzle/src/Exception

     Con esta información, podrás obtener diferentes comportamientos, al momento de trabajar con las excepciones.

     El cliente de Guzzle, utiliza un sistema  handler and middleware, para enviar sus peticiones HTTP, puedes revisar la documentación oficial, para que te permita un mayor control sobre el manejo de tus datos, conexiones y resultados.