javascript

Asset Injector

Video de Youtube
URL de Video remoto
Texto

         Este módulo te pemitirá añadir y editar CSS y/o Javascript, sin la necesidad de salir de la interfaz de usuario de administrador en Drupal. Además, podrás limitar las páginas en las que se ejecutan o aplican, solamente seleccionando el tipo de contenido en el selector dentro de la pantalla de configuración del módulo.

 DESCARGA Y ACTIVACIÓN:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/asset_injector

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Asset Injector y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en asset_injector -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

 

Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

The DOMPurify library is not installed.

The DOMPurify library is not installed. This library is necessary if you want to use HTML in Colorbox captions. Without it, all captions will be treated as plain text.

     Cuando trabajas con Colorbox, necesitarás instalar la librería DOMPurify, como uno de sus requisitos, en algunas ocasiones, aunque trabajes con Composer, puede que no se descargue en el lugar correcto y por eso no la encuentre, para solucionarlo, puedes utilizar el comando de Drush que te pongo debajo.

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

Video de Youtube
URL de Video remoto
Texto

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

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

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

 

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

Video de Youtube
URL de Video remoto
Texto

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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Nuxtjs | Presentación

Video de Youtube
URL de Video remoto

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

     Nuxt.js es un framework basado en Vuex, cuyo propósito es ofrecer una alternativa más compacta, para la realización de proyectos que ofrezcan un aspecto atractivo y práctico, con poco tiempo de carga de la información y la capacidad para interactuar con el backend a través del mismo navegador.

Si quieres aprender más sobre este framework,visita su página oficial

Drupal Commerce Headless con Next.js | Introducción

Video de Youtube
URL de Video remoto

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

     En esta serie de videos, nos introduciremos en el mundo del e-commerce o tiendas virtuales, utilizando Drupal Commerce, y para hacerlo más interesante, trabajaremos el frontend desacoplado, con el Framework Next.js . 

     Un proyecto Headless o Desacoplado, permite utilizar la potencia y versatilidad de Drupal o Drupal Commerce, para que se ocupe de todas las funcionalidades relacionadas con base de datos y contenidos, en el Backend, complementándolo con herramientas orientadas a la presentación de contenidos, de manera más efectiva, como pueden ser Angular, React, Vue, Nuxt.js o Nextjs.

Drupal 9 Headless con Vue.js | Requerimientos

     Para poder realizar este curso, será necesario cumplir previamente con varios de los requerimientos de instalación del proyecto; estos son:

  1. Tener instalado y funcionando un proyecto Drupal. HAZ CLIC AQUI
     
  2. Tener conocimientos básicos de Nuxtjs, para realizar el curso HAZ CLIC AQUI
     
  3. Descargar, activar y configurar el módulo de autenticación Simple Oauth. HAZ CLIC AQUI

     Una vez hayas completado estos requermientos, podrás continuar con el resto del curso siguiendo los pasos de los siguientes capítulos.