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.