Si están utilizando Vuetify y desean un componente para mostrar notificaciones en vue.js. Verán que existe una llamado Snackbar que permite implementarlos. El problema de este componente es que requiere definirse en cada vista que hagamos en Vue (por la naturaleza de esta librería) y debemos crear un método para mostrarlo.

Esto es un problema en aplicaciones grandes, porque tendríamos código repetido y descentralizado. Gracias a Vuex podemos evitar este tipo de cosas. Por lo que te explicaré como crear notificaciones con vue.js con Vuex.

Definir opciones del Snackbar en Vuex

Primero vamos a definir en vuestro archivo store.js (o donde instancias Vuex.Store) un estado para tener la configuración por defecto del Snackbar. El estado permite almacenar los parámetros del Snackbar de forma global y poder ser accedida desde cualquier vista. Para ello en la sección de state agrega las siguientes opciones:

export default new Vuex.Store({
  state: {
    snackbar: {
      visible: false,
      color: "success",
      text: null,
      timeout: 10000,
      multiline: false
    },
    ...
    ...
  },

Luego en el mismo archivo, definimos una mutación. En Vuex las mutaciones son los métodos que nos permiten modificar un estado. Esta mutación la usaremos a lo largo de la aplicación para lanzar la notificación desde cualquier lado.

El primer parámetro siempre es el estado actual y el segundo el payload. Éste último es enviado cada vez que llamamos a la notificación con el fin de definir la apariencia. Por ejemplo, si ocurre un error podemos enviar los parámetros de que el tipo de notificación sea error y aparezca de color rojo.

En este ejemplo, agregué opciones para decidir si mostrarlo en multi-línea , elegir color, tiempo de duración, etc. Así que en la sección de mutaciones del store.js agrega:

mutations: {
    alert(state, payload) {
      state.snackbar.text = payload.text;
      state.snackbar.multiline = payload.text.length > 50;

      // Si es mas de 50 caracteres definirlo como multilinea
      if (payload.multiline) {
        state.snackbar.multiline = payload.multiline;
      }
   
      // Color para mensajes de error o éxito
      if (payload.color) {
        state.snackbar.color = payload.color;
      }

     // Tiempo de duración
      if (payload.timeout) {
        state.snackbar.timeout = payload.timeout;
      }
      state.snackbar.visible = true;
   },
   closeAlert(state) {
      state.snackbar.visible = false;
      state.snackbar.multiline = false;
      state.snackbar.text = null;
    },
}

También en esta sección de mutaciones agregué una mutación llamada closeAlert(state) para poder alterar la configuración del snackbar y hacer que se oculte.

Crear el componente de la notificación

Lo mas fácil es crear un componente para la notificaciones. Pues así no mezclas código y lo puedes ubicar en un sólo lugar para que se lance.

Este componente consta simplemente de un Snackbar cuyas opciones son extraídas de un dato llamado snackbar. Este dato es extraído del estado de Vuex definido previamente a través de una variable computada.

Aquí puedes ver el ejemplo de mi componente:

<template>
  <v -snackbar top="" v-model="snackbar.visible" :timeout="snackbar.timeout" :multi-line="snackbar.multiline === true" :color="snackbar.color">
    {{ snackbar.text }}
    </v><v -btn text="" dark="" @click="closeAlert">Close</v>
 
</template>
<script>
import { mapMutations } from "vuex";
export default {
  computed: {
    snackbar() {
      return this.$store.state.snackbar;
    }
  },
  methods: {
    ...mapMutations(["closeAlert"])
  }
};
</script>

Ahora, para implementar el cierre, importo las mutaciones de Vuex para tener acceso a la función closeAlert que definimos previamente. De esta forma al llamar a closeAlert (una mutación) modificará el estado de la variable visible, haciendo que se oculte.

Este component lo puedes colocar antes del cierre de tu v-app para que se pued mostrar en todas las páginas.

Crear las notificaciones en Vue.Js

Cada vez que desees mostrar una notificaciones en vuej.js, solo debes realizar un commit. El primer parámetro es el nombre de la mutación, en este caso alert y las opciones del snackbar la pasas como segundo parámetro.

Un ejemplo para una notificación de error sería algo como:

this.$store.commit("alert", {
  color: "error",
  text:
    "Could not load purchase order info. Status Code: " +
    response.status
});

¡Listo! Ahora podrás mostrar notificaciones con vue.js de forma centralizada a lo largo de tu aplicación.

La entrada Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex se publicó primero en El blog de Skatox.

Leer más

Cuando ocurre un error de WordPress u obtenemos un error HTTP 500 en nuestra instalación (generalmente debido a un error de PHP). El primer paso para resolver el problema es leer el error para conocer que está ocurriendo. Sin embargo, muchos servicios de hosting desactivan mostrar los errores en pantalla para evitar mostrar errores en los sitios de los clientes (se ve mal visualmente). Otra razón para desactivarlo es para prevenir ataques debido a que el error muestre información oculta de la aplicación que pueda ser aprovechada para aprovechar vulnerabilidades.

En algunos casos, por motivos de rendimiento algunos servicios desactivan el almacenamiento de errores en segundo plano. Complicando la posibilidad de conocerlos y arreglarlos.

Cómo mostrar los errores de WordPress

WordPress posee un modo de depuración. Éste permite mostrar los errores de WordPress en la página o almacenarlos en un archivo.

Para activarlo, debes abrir el archivo /wp-config.php. Busca una sección donde puedes colocar constantes. Allí coloca las siguientes constantes:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);
@ini_set('display_errors', 0);

Ahora podrás ver los errores en pantalla, almacenados en el log e incluso forzando al servidor web a guardarlos. Simplemente chequea el error de WordPress. Soluciona y desactiva de nuevo el modo de depuración para volver la página a su estado original.

Espero que te sirva de ayuda. Si conoces otro método, no dudes en compartirlo. Y si deseas leer mas artículos de este tema. Puedes chequear mi categoría del blog dedicada a WordPress.

La entrada Ver los errores de WordPress en los hostings se publicó primero en El blog de Skatox.

Leer más

WordPress ofrece una funcionalidad llama cron que te permite agendar tareas cada cierto tiempo. Éstas tareas son ejecutadas cada cierto tiempo según lo definido. De esta forma puedes ejecutar funciones de forma automática. Por ejemplo: respaldo de base de datos, sincronización con servicios externos, borrar caché entre otros.

¿Cómo funciona el cron de WordPress

WordPress posee un archivo llamado cron.php que al ejecutarlo. Revisa todas las tareas definidas en el cron para ejecutar las funciones de aquellas programadas a la hora actual o anterior. Por ejemplo, si decides ejecutar una tarea cada 12 horas. La primera vez que lo ejecutes lo agendará para ser ejecutado luego de 12 horas. Cada vez que se llama a al archivo cron.php bien sea de forma manual (accediendo directamente a él) o como lo hace por defecto, donde chequea cada vez que la página recibe una visita (no lo hace todo el tiempo). El archivo chequea si existen eventos registrado para la hora actual o ya pasada (es decir se le culminó el tiempo de agendado) y llama a la función definida en cada evento.

Agendar nuestros eventos al cron

Como comenté anteriormente, necesitamos definir el nombre de nuestro evento y la función a ejecutar. Primero debemos chequear que el evento no está agendado previamente para agregarlo. Una vez agregado no es necesario hacerlo de nuevo, con una sola vez se ejecutará varias veces automáticamente. De lo contrario será agregado infinidad de veces al cron. A continuación podemos ver un ejemplo de como hacer este proceso en tu plugin o tema.

if ( ! wp_next_scheduled( 'mi_evento' ) ) {
    wp_schedule_event( time(), 12 * HOUR_IN_SECONDS, 'mi_evento' );
}

En el segundo parámetro podemos ver 12 * HOUR_IN_SECONDS, ésta es una constante definida en WordPress, aunque podemos utilizar las cadenas de texto como ‘daily‘ (diariamente una vez al día), ‘twicedaily‘ (dos veces al día), ‘hourly‘ (cada hora). De esta forma tenemos control de la periodicidad del evento.

Cómo definir mis propios intervalos

Puedes definir tu propio período de tiempo para ejecutar tareas en el cron. Por ejemplo cada 3 horas o crear un período definido por un usuario a través de una caja de texto. Para ello, debes hacerlo de la siguiente forma:

function miprefijo_agregar_intervalo_de_cron( $schedules ) {
    $schedules['medio_minuto'] = array(
        'interval' => 30,
        'display'  => esc_html__( 'Every Five Seconds','mi-dominio-idioma'),
    );
 
    return $schedules;
}

add_filter( 'cron_schedules', 'miprefijo_agregar_intervalo_de_cron' );

Ahí vemos como WordPress posee en la variable $schedules la lista de intervalos y su cantidad en segundos. Nosotros a través de un filtro, vamos a agregar nuestro intervalo de medio minuto a la lista definida en la variable $schedules. Finalmente cada vez que se llame al listado de intervalos, nuestro período personalizado aparecerá allí. Y podemos utilizarlo en el segundo parámetro de wp_schedule_event().

Espero que esta guía os haya gustado, para mas información puedes chequear la documentación oficial de WordPress Cron. Cualquier duda que tengas no dudes en preguntarla.

La entrada WordPress Cron: ejecutar tu tareas cada X horas con intervalos personalizados se publicó primero en El blog de Skatox.

Leer más

WordPress es uno de los CMS mas usados en el mundo. Al parecer 33% de Internet esta soportado por WordPress. Tal vez por su facilidad de uso para crear contenido de forma rápida y fácil para un usuario promedio de Internet. Pero la plataforma no está diseñada para resolver todo tipo de problemas. Por esta razón si tenemos una aplicación web (en este caso hecha con Yii2) o un sistema mas complejo es necesario realizarla con otro tecnología y no a través de plugins.

¿Por que integrar autenticación de WordPress a Yii2

En el párrafo anterior comenté como WordPress no puede ser usado para todo tipo de problemas. A veces necesitamos crear una aplicación con un framework para resolver cierto tipos de problemas o tener mayor control. Yo suelo usar el framework Yii2 permite realizar buenas aplicaciones en poco tiempo. Llevo un par de años usándolo y me gusta mucho.

A veces, tienes un sitio web con WordPress donde tienes una base de datos de usuario. Por ejemplo, una tienda registra todos sus usuarios allí o un sitio de noticias tiene cuentas para todos los redactores. Es posible reutilizar esta información en otro sistema que este alojado en el mismo servidor y usarlo como medio de autenticación.

Se que lo ideal es hacer una autenticación a través de OAuth o un API pero en algunos casos donde es un sistema pequeño, no hay presupuesto ni tiempo para invertir en esta solución es posible hacerlo de la siguiente manera.

Incluir el código base de WordPress

Antes de incluir el código de WordPress para la autenticación, tenemos la posibilidad de descartar la carga de código que no hemos usado, para esto podemos incluir en nuestro archivo PHP las siguientes constantes. Esto lo podemos escribir en en el archivo principal de Yii2, ubicado en /web/index.php antes de iniciar la aplicación.

define( 'WP_USE_THEMES', false);
define( 'COOKIE_DOMAIN', false );
define( 'DISABLE_WP_CRON', true );

Estas 3 constantes desactivan: la carga de temas, limitar la cookie al dominio del sitio y desactivar el cron. Este último evita que se tarde mucho tiempo la autenticación al lanzar los eventos pendientes del cron.

Luego simplemente incluimos los archivos wp-load.php y pluggable.php para cargar las funciones de autenticación de WordPress.

$wp_folder = 'RUTA_AL_WORDPRESS';
require(__DIR__ . '/../' . $wp_folder . '/wp-load.php');
require(__DIR__ . '/../' . $wp_folder . '/wp-includes/pluggable.php');

(new yii\web\Application($config))->run();

Modificación de la autenticación

Una vez realizado el paso anterior, procedemos a modificar la autenticación para que en vez de buscar en la base de datos, utilice la información de WordPress. Para ello en el método de findIdentity lo podemos realizar de la siguiente forma

  public static function findIdentity( $id ) {

    $wp_user = get_user_by($wp_attribute, trim($value));

    if ($wp_user) {
      $user                 = new self();
      $user-&gt;id             = $wpUser-&gt;ID;
      $user-&gt;username       = $wpUser-&gt;data-&gt;user_login;
      $user-&gt;niceName       = $wpUser-&gt;data-&gt;user_nicename;
      $user-&gt;displayName    = $wpUser-&gt;data-&gt;display_name;
      $user-&gt;email          = $wpUser-&gt;data-&gt;user_email;
      $user-&gt;dateRegistered = $wpUser-&gt;data-&gt;user_registered;
      $user-&gt;roles          = $wpUser-&gt;roles;
      $user-&gt;password       = $wpUser-&gt;user_pass;

      return $user;
    } else {
      return null;
    }

¡Listo! Ya podrás iniciar sesión en tu aplicación Yii2 utilizando las credenciales de tu instalación de WordPress. Nota como una vez teniendo el objeto de tipo WP_User podemos acceder a toda la información del usuario.

Espero que te guste y te sirva esta información.


La entrada Autenticar en Yii2 usando los usuarios de WordPress se publicó primero en El blog de Skatox.

Leer más

Tal vez hayas escuchado sobre el servicio AWS Lambda. Su popularidad ha crecido gracias al auge de la arquitectura sin servidores (serverless en inglés). Ésta consiste en desplegar aplicaciones sin preocuparse por las tareas del servidor, pues éstas son manejadas por un servicio exerno. Permitiendo a los desarrolladores enfocarse en la aplicación como tal y no en el mantenimiento de las capas inferiores a él.

¿Qué es AWS Lambda?

Es el servicio de Amazon para ofrecer el desarrollo de aplicaciones serverless. Y como todo producto de esta compañía, tiene su propia forma de trabajar. Por lo que se requiere una pequeña cantidad de conocimientos iniciales para usar el servicio.

¿Cómo iniciarse en AWS Lambda?

Pero no te preocupes, que mi amigo Carlos Guerrero (ya he publicado su material en mi blog) ha desarrollado un excelente video de 1 hora. Conocerás en poco tiempo lo necesario para crear tu primer servicio bajo arquitectura sin servidor. El video se encuentra en español, posee ejemplo de código y muestra la interfaz del servicio para que no te pierdas.

Si te ha gustado, recuerda compartirlo para que otros aprendan. Escríbele a Carlos para que se anime a crear mas contenido. Recuerda comentar si deseas compartir algo en esta entrada.

Happy Development!

La entrada Primeros pasos con AWS Lambda (Serverless) se publicó primero en El blog de Skatox.

Leer más