frontend

Cuatro maneras para realizar una copia de tu base de datos Drupal

        Antes de realizar cualquier tipo de actualización en tu proyecto de Drupal, es altamente recomendable, sacar una copia de tu base de datos actual, para evitar posibles pérdidas de información durante el proceso. Tienes varias opciones para extraer esta copia de la base de datos.

• Copia de la base de datos utilizando Drush.

     Para exportar la base de datos de tu proyecto Drupal, utilizando Drush, colócate en la carpeta raiz de tu proyecto, usando tu consola de comandos y a continuación, ejecuta el siguiente comando, sustituyendo el final, por el nombre que quieres para identificar tu copia de seguridad:

  drush sql:dump --result-file=../mi_backup.sql 

• Copia de la base de datos desde la interfaz PhpMyAdmin.

  Si tienes activado el administrador de Base de datos PhpMyAdmin, puedes exportar tu base de datos, a través de su interfaz. Para ello, sólo tienes que acceder a PhpMyAdmin, y a continuación seleccionar la base de datos que necesitas exportar; luego seleccionas el botón exportar, desde el menú superior de PhpMyAdmin y haces clic en continuar.

  El resultado será un archivo con la extensión .sql, que se descargará automáticamente.

• Exportar la base de datos utilizando la línea de comandos MySql.

     Para extraeer una copia de tu base de datos, a través de los comandos MySql, deberás ejecutar la siguiente línea, sustituyendo los datos del usuario root, y tu bases de datos y el archivo.sql resultante.

mysqldump -u usuario -p base_de_datos > archivo.sql

 

• Exportar una copia de la base de datos, usando el módulo Backup and Migrate.

     Otra forma que nos ofrece Drupal, para exportar una copia de la base de datos, será a través del módulo Backup and Migrate, con el que podremos descargar, a través de la interfaz de Drupal, una copia completa de nuestro sitio web, en formato comprimido, que podremos importar en el entorno local o cualquier otro entorno que necesitemos.

     Si quieres aprender a configurar y utilizar el Módulo Backup and Migrate HAZ CLIC AQUI

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 tenemos arrancando y funcionando, todo lo que vamos a necesitar, para comenzar con nuestra implementación usando diseño de patrones, empezaremos por realizar los primeros cambios que marcarán el estilo y apariencia de nuestra web. Para ello, realizaremos la exploración de los archivos del Storybook o guía de estilos, para ir conociendo las opciones disponibles y sacar el mayor provecho de ello.

     Paso 1 - Definición de la paleta de colores:

        El primer lugar donde comienza nuestro viaje hacia la personalización de nuestra guía de estilos, será la definicición de la paleta de colores que vamos a utilizar en nuestra web. Para ellos tendremos que abrir varios archivos, que iremos explicando paso a paso.

        Si abrimos nuestra guía de estilos, encontraremos la Paleta de colrores, dentro del menú Colors, tal y como muestro en la siguiente imagen, desde aquí podremos comprobar en tiempo real, cada uno de los cambios que realicemos relacionados con este apartado.

      Ahora que ya tenemos claro, dónde comprobaremos los cambios aplicados, abriremos el primero de los archivos de configuración, relacionados con esta parte, que encontraremos, dentro de "NUESTRO-THEME-PERSONALIZADO/components/00-base/01-colors/_00-colors-vars.scss". Se trata de un archivo, en formato SASS, donde se definen todos los colores, utilizando variables.

     Una vez entiendas el concepto, será fácil comenzar a aplicar los cambios, aunque no tengas conocimientos previos de SASS, ya que al ejecutar el comando para arrancar la guía de estilos (npm run develop), ésta se encargará de realizar las compilaciones para que todo se vea de acuerdo a lo que se ha definido.

     Vamos a realizar una rápida comprobación de que todo funciona correctamente, y de que no tendremos que ejecutar comando de SASS, para ver los resultados inmediatamente; en la última línea del archivo encontraremos la variable "$blue: #005de0;", vamos a cambiar el código del color por el de uno completamente diferente ($blue: #ff6600;) y guardaremos los cambios, sin hacer nada más, a continuación, volveremos a la guía de estilos y veremos de inmediato el cambio, en el color llamado PRIMARY.

     El otro de los archivos, relacionado con la paleta de colores, ubicado justo debajo el anterior, es el llamado _01-colors-used.scss, si lo abrimos, veremos que existen dos variables principales, que definen dos Perfiles de color ($defaultColors y $darkColors), para nuestra instalación, que se mostrarán en función del navegador, el modo default se muestra para todos navegadores en general y el modo Dark, sólo en aquellos navegadores que soporten este tipo de presentación, como los dispositivos MAC. 

     Dentro de cada uno de estos perfiles, están todas las variables que se encuentran definidas en el anterior archivo, con el nombre que se muestra dentro de la paleta. Esta es una de las razones por las cuales al realizar el cambio código de color en el archivo de variables, se aplica automáticamente al resto de archivos relacionados.

     Esto quiere decir, que además de los colores existentes, podremos agregar nuestros nombres personalizados y asignarles las variables que hayamos definido en otro archivo para poder emplearlas al momento de aplicar nuestros estilos.

   Aplicando lo colores dentro de nuestra hoja de estilos

      Durante el proceso de creación de nuestro proyecto, puede que en algún caso necesitemos utilizar, alguno de estos colores, en un elemento en concreto, para que el color se aplique correctamente, en lugar de llamar a la variable de forma directa, tendremos que emplear la función clr(), de esta foma, mantendremos el concepto de "centralizar" y obtendremos mejores resultados al utlizar el diseño de patrones.

     El siguiente código, muestra la forma en que se aplica el color a los enlaces del menú principal, dentro del archivo _00-main-menu.scss, ubicado en "NUESTRO-THEME-PERSONALIZADO/components/02-molecules/menus/main-menu/ _00-main-menu.scss.

&--open {
  background-color: clr(background);
  display: block;
  left: 0;
  overflow-y: scroll;
  position: absolute;
  top: 134px;
  right: 0;
  width: 100%;
}

     Configuración de los nombres de los colores en el Storybook

         Por último, pero no menos importante, está el archivo donde se definen los nombres de los colores que se muestran dentro de nuestra guía de estilos, se trata del archivo colors.yml. Podremos comprobarlo, si cambiamos el nombre de cualquiera de los colores y, sin hacer nada más que guardarlo, abrimos la guía de estilos.

     Una vez tengamos configurada correctamente la paleta de colores, todos los cambios relacionados con esta parte, estarán centralizadas, fáciles de modificar, y además, dichos cambios se aplicarán autormáticamente, a través de todo el proyecto Drupal.

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

     Llegados a este punto, ya tenemos al menos los conocimientos básicos, sobre el diseño de patrones o atómico, también conocido como "Pattern Labs", además de haber realizado, un pequeño recorrido por la estructura de archivos de la guía de estilos o storybook, que nos generó la instalación del módulo Emulsify y de nuestro tema personalizado, dentro del proyecto Drupal 9, con el cual estamos trabajando en este curso.

     Es el turno de comenzar a aplicar este diseño de patrones, dentro de una de las plantillas Twig de Drupal 9, para entender mejor las posibilidades ofrecidas, por esta nueva forma de trabajo, cuyo fin principal, además de permitir que los diseñadores puedan trabajar paralelamente con los programadores, sin previos conocimientos sobre Drupal, ni dependencias entre ellos; la posibilidad de "Centralizar" y "Reutilizar" al máximo todos los componentes, disminuyendo así el tiempo de implementación, en todas sus fases.

     Aplicando Pattern Labs en las plantillas Drupal 9

          Paso 1 - Activación del modo Debug o Depurador de Drupal:

             Ya que el diseño de patrones, implica la modificación de las plantillas que vienen por defecto en Drupal, lo primero que deberíamos hacer antes de comenzar con esto, será activar el modo debug o depurador, para conocer el nombre de cada pantilla, de acuerdo con los nodos, campos o vistas que estemos modificando. Existen dos meneras de hacerlo:

            Opción 1: Consiste en renombrar el archivo default.services.yml, ubicado dentro de la carpeta /web/sites/default, y a continuación cambir los valores de debug y cache, como se muestra en la imagen.

           Opción 2: Configurando el archivo settings.local, tal y como te explico en Configuración desarrollo local Drupal 8 Haz clic aquí.

     Una vez hayas activado el modo depurador, ejecutarás los comandos drush cr y drush updb, para borrar la caché de drupal y actualizar la base de datos. Entonces al hacer clic en la tecla F12 o seleccionar la opción explorar del navegador, verás los nombres sugeridos por drupal para las plantillas, como te muestro en la siguiente imagen.

         Paso 2 - Explorar plantillas por defecto generadas por Emulsify

             Como ya hemos mencionado antes, uno de los propósitos del Diseño de patrones es reutilizar siempre que podamos, por esta razón, cuando se genera el Tema personalizado, Emulsify crea varias pantillas Twig, que nos pueden servir, tanto como guia para entender la manera en que trabaja o como base para generar plantillas más complejas.

            Si abrimos la carpeta Templates, veremos varias de ellas, clasificadas por su tipo, esta estrucutra nos facilita la ubicación y nos marca la guia de trabajo que deberíamos mantener durante nuestro desarrollo.

        Paso 3 - Explorar nuestros contenidos y opciones a implementar

           Es muy importante tener claro que nuestra mentalidad debe ser "NO REINVENTEMOS LA RUEDA", esto significa, que deberíamo evaluar constantemente, a medida que vayamos avanzando en nuestro proyecto, para saber si es necesario crear un nuevo componente o simplemente reutilizar uno que ya esté listo.

          Por ejemplo, si vamos a la carpeta llamada VIEWS, econtraremos dentro la plantilla para una Vista del tipo lista sin formato, con el nombre views-view-unformatted--frontpage.html.twig, esto significa que si en nuestra página principal pensamos tener un listado de artículos, productos o de imágenes, sólo tendríamos que crear una vista del tipo correspodiente y obtendríamos un resultado al instante.

         En la siguiente imagen, he generado algunos artículos, utilizando el módulo Devel y sin hacer nada más, como por defecto, los artículos vienen configurados para mostrarse en la página principal del sitio, obtuve lo que te muestro a continuación:

         Si abrimos la plantilla por dentro, encontraremos el siguiente código...

{% embed "@organisms/grid/grid.twig" with {
  grid_type: 'card',
  grid_label: title
} %}
  {% block grid_content %}
    {% for row in rows %}
      {{ row.content }}
    {% endfor %}
  {% endblock %}
{% endembed %}

          Eplicación: 

          Lo primero que vemos aquí es la inclusión o importación del modelo o patrón para este tipo de vista, en este caso a través de embed en lugar de include, a continuación se definen el tipo de patrón para los contenidos que se mostrará dentro del las cuadrículas, usando CARD, y el campo título de la vista.

         Si vamos a la documentación de la Página Oficial de Symfony, podremos leer la siguiente explicación:

" La etiqueta incrustada combina el comportamiento de incluir y extender. Le permite incluir el contenido de otra plantilla, al igual que lo hace include. Pero también le permite anular cualquier bloque definido dentro de la plantilla incluida, como cuando se extiende una plantilla.

Piense en una plantilla incrustada como un "esqueleto de micro diseño ".

          En la siguiente parte del patrón de diseño, se define un bloque, dentro del cual estará contenida la vista completa, por eso verás que al final están las etiquetas de cierre correspondientes al cierre del bloque y al cierre del embed declarado al principio.

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

     IMPORTANTE: Emulsify nos permite crear un BASE THEME a partir de Emulsify NO un Subtheme     

     Si eres de l@s que estás interesad@ en aprender a implementar, las utilizar tendencias en maquetación y diseño web, este es uno de los principales módulos que deberías considerar conocer, ya que te ayudará, en caso de que quieras darle un Giro de 360º a tus proyectos en Drupal, utilizando los componentes y el conocido como Diseño Atómico. Si quieres aprender más sobre esta tendencia revolucionaria, tienes el curso Introducción a Pattern Lab y Drupal 9 usando Emulsify.

     Emulsify Drupal, según su página oficial, "es una herramienta de código abierto para crear sistemas de diseño con componentes reutilizables y pautas claras para los equipos. Emulsify ayuda a las organizaciones a escalar su diseño al tiempo que reduce los costos, agiliza los flujos de trabajo y mejora la accesibilidad".

     A diferencia de otros themes contribuidos de Drupal, su instalación supone varias diferencias con respecto al resto. Su propósito fundamental, es ofrecernos todo lo que vayamos a necesitar para crear un Base Theme para Drupal, utilizando componentes. 

     Por esta razón, he creado esta guía paso a paso, de la instalación del módulo, desde su Página oficial 

     Prerrequisitos:

• PHP 7.1
   

• Node (we recommend NVM)
   

• Composer
   

• Yarn (optional)

   Instalación del módulo Emulsify Drupal para Drupal 9

       Ya que desde la página de Drupal han anunciado hace tiempo, que el final del soporte tanto para Druapl 7 como para Drupal 8, terminará previsiblemente, a finales de este mismo año 2021, he decidido enfocarme en la instalación para Drupal 9, pero puedes seguir la guía con los cambios para otras versiones que están en la misma página.

     Paso 1 - Descarga del módulo usando composer

        A estas alturas, ya debes estar totalmente familiarizado con la instalación de módulos y themes en Drupal, utilizando el gestor de paquetes Composer, que nos facilitará enormemente las tareas de descarga o actualización de nuestros proyetos.

        Así que, nos colocaremos en la carpeta raíz del proyecto y en este caso, el comando a utilizar será el siguiente:

composer require emulsify-ds/emulsify-drupal

     Paso 2 - Preparación para generar el Tema Base

       Aquí es donde comienzan las diferncias, con respecto a otras instalaciones, como por ejemplo la del módulo Bootstrap, en este caso, al descargar el módulo se ha creado la carpeta contrib, dentro de la carpeta themes y dentro podremos ver todos los archivos relacionados con Emulsify, a continuación, nos moveremos hacia dicha carpeta, para poder generar un base theme que heredará todas las características y funcionalidades necesarias. O sea, que escribiremos en consola lo siguiente para movernos hasta la carpeta del theme padre:

cd web/themes/contrib/emulsify-drupal

   Paso 3 - Generar el Tema base

     Una vez colocados dentro de la carpeta del Theme padre, podremos ejecutar el siguiente código, para que se autogeneren todos los archivos relacionados con nuestro nuevo Tema base o personalizado:

php emulsify.php "THEME NAME"

    Si quieres conocer alguna otras opciones puedes ejecutar también el comando:

php emulsify.php -h

   Paso 4 - Descargar las dependencias del Base Theme

     Como he mencionado al principio, esta instalación rompe con lo que estábamos acostumbrados, esto significa, que tendremos que colocarnos dentro de la carpeta de nuestro nuevo_base_theme, que acabamos de generar, para poder comenzar con la descarga del resto de dependencias que hace tan pontente este tipo de instalación:

cd ../../custom/base_theme_name/

    Paso 5 - Instalación de dependencias para el Base Theme

     Este proceso suele tardar algo más de lo habitual, ya que tendrá que descargar un considerable número de archivos, destinados a facilitarnos la vida de aquí en adelante, por lo que no deberías inmpacientarnos. En mi caso en particular, tuve que abrir una segunda pestaña en mi consola, para asegurarme de que no se había quedado bloqueada la descarga, podemos usar cualquiera de las siguientes opciones:

yarn

npm install

 

   Paso 6 Construcción del Tema base

     Ya que tenemos descargardo, todo lo que vamos a necesitar para comenzar con nuestra implementación, nos toca construir la estructura, antes de poder utilizarlos en nuestro proyecto, también tenemos dos opciones a elegir:

yarn build

npm run build

 

   Paso 7 - Habilitar el base theme y sus dependencias

     Como ya tenemos todo a punto y listo para comenzar, nos toca activar el theme y sus dependencias, para ello utilizaremos la herramienta Drush, además tendremos que movernos a la carpeta principal para poder ejecutar el comando, fíjate que en lugar de utlizar en se emplea then, que es el comando correcto a partir de las versiones de drush =>9:

drush then base_theme_name -y && drush en components emulsify_twig -y

   Paso 8 - Activación del Tema Base

     Ahora sí, ya podemos activar nuestro theme para comenzar a soltar nuestra imaginación y creatividad, para ello, volveremos a utlizar la herramienta Drush:

drush config-set system.theme default base_theme_name -y

 

  Comprobación

    Si nos vamos a la página principal de nuestro proyecto, ahora podremos ver el cambio en la estructura y diseño para comenzar con esta nueva aventura...

   Arrancando la Guía de Estilos

     Si todo funciona correctamente, podremos arrancar nuestra guía de estilos, para comenzar a trabajar con el diseño, en paralelo con el desarrollo de nuesro proyecto Drupal, ejecutando el siguiente comando desde dentro de la carpeta de nuestro tema personalizado

npm run develop