Pruebas de visualización de una página desde distintos dispositivos

Uno de los mayores problemas para los desarrolladores web es la diferente interpretación de los estándares web por parte de los navegadores, ocasionando que un sitio web se vea de forma distinta en diferentes navegadores. Ademas, con el surgimiento de dispositivos móviles en los últimos años,  ahora también se deben hacer pruebas de las páginas bajo distintas resoluciones para abarcar mas usuarios.

Aunque puede consumir mucho tiempo navegar desde distintos dispositivos y sistemas operativos para hacer las pruebas, existen herramientas para automatizar este proceso. Una que me gustó fue Remote Preview, una aplicación web que al definir una URL en un panel central, envía el navegador web de todos los dispositivos a esa dirección, permitiéndote ver como es la página en cada dispositivo, ademas, cada 1100ms chequea la URL, por lo que si la cambias, automáticamente todos los dispositivos visitan el sitio. Esto permite ahorrar el tiempo de navegación desde cada dispositivo y permite identificar rápidamente, problemas de compatibilidad entre resoluciones o plataformas.

Para entender mejor esta herramienta, les dejo un video donde pruebo como se ve mi blog en distintos navegadores y plataformas móviles:

Así que si desarrollas un sitio web, no dejes de usar esta herramienta para comprobar que el sitio se ve bien desde tu teléfono, tableta, computadora, desde los navegadores de escritorio, sistema operativo y otros. Mientras mas compatibilidad brindes a dispositivos, mas usuarios podrán leer tu contenido y recibir mas visitas.

 

Hace 10 años en esa fecha: Ophcrack 2: Un LiveCD que crackea passwords de Windows

Hace 11 años en esa fecha: Las metas de Microsoft

Cómo ordenar de forma personalizada elementos en Woocommerce

En Woocommerce, puedes ordenar el listado de productos de varias formas en Ajustes -> Productos -> Ordenamiento de Productos por defecto, pero si en alguna parte del sitio necesitas crear tu propio listado a través de una consulta (generalmente mediante WP_Query) a la base de datos, lo mas probable es que desees mantener el orden establecido en ese apartado.

La manera de mantener el orden, es extraer esa configuración inicial mediante el objeto global $wp_query, pues posee la información por defecto (o la modificada por el usuario) para realizar una consulta, así que accediendo a los atributos order, orderby y enviando ambos al la consulta, obtendrás el orden de la configuración inicial, tal como se muestra en el siguiente ejemplo:

$args = array(
   'posts_per_page' => -1,
   'post_type'      => array('product'), //Para consultar solo los productos
   'product_cat'    => $category, //Me traigo una categoria deseada
   'order'          => $wp_query->get('order'), //Trae el orden seleccionado en frontend
   'orderby'        => $wp_query->get('orderby') //Trae el atributo de orden seleccionado en el frontend
);
$loop = new WP_Query( $args );

Recuerda que debes previamente traer el objeto global $wp_query y luego con el resultado de la consulta, la puedes recorrer con los métodos normales de WordPress.

Hace 5 años en esa fecha: Liberado jQuery Categories List 1.1

Cómo enviar los correos electrónicos predefinidos de Woocommerce

Woocommerce es una excelente herramienta para montar tu propia tienda en línea, es fácil de instalar y usar gracias que está construida sobre WordPress. Ademas es posible modificar todo su comportamiento mediante la instalación o construcción de plugins.

Hace unas semanas construyendo un plugin para cambiar el flujo normal de los estados de una orden, me tocó enviar los correos predefinidos (nueva orden, orden procesada, etc) manualmente. Para mi sorpresa no encontré documentación sobre como hacerlo, y al leer el código fuente de la clase para enviar correos, me dí cuenta que posee estructura extraña porque utiliza muchos hooks y variables globales, así que me costó hacerlo.

Envío de correos

Woocommerce posee una clase llamada WC_Emails (no confundir con WC_Email que es abstracta para definir una plantilla de correo) cuya tarea es cargar todas las plantillas de correos definidas y posee métodos para enviar el correo. Pues simplemente se debe seleccionar una de las plantillas disponibles y ejecutar el método trigger con los parámetros requeridos para enviar el correo electrónico, es importante NO instanciar un objeto desde esta clase, pues al momento de crearse se instancia ciertas cosas de la plantilla y se ejecutan, ocasionando bugs como repetición del encabezado y ejecución múltiple de hooks.

Por ello, solo debemos llamar a la función WC()->mailer() que siempre nos devuelve el objeto global de WC_Emails, seleccionamos la plantilla en el atributo emails, podemos personalizar el texto del sujeto o encabezado del correo y finalmente se ejecuta el método trigger con los parámetros del contenido del correo (los cuales varían en cada plantilla), tal como se puede observar en el siguiente ejemplo:


$wcEmail = WC()->mailer();
$emailer = $wcEmail->emails['WC_Email_Customer_Note']; //Enviar una nota al usuario
$emailer->subject = $subject; //Sujeto del correo
$emailer->heading = $title; //Título del contenido del correo
$emailer->trigger(array(
   'order_id' => $order_id, //Número de la orden
   'customer_note' => $msg  //Contenido de la nota
));

Las plantillas de correo disponibles por defecto (ya que puedes agregar tus propias plantillas) son:

  • WC_Email_New_Order
  • WC_Email_Cancelled_Order
  • WC_Email_Customer_Processing_Order
  • WC_Email_Customer_Completed_Order
  • WC_Email_Customer_Refunded_Order
  • WC_Email_Customer_Invoice
  • WC_Email_Customer_Note
  • WC_Email_Customer_Reset_Password
  • WC_Email_Customer_New_Account

En caso de necesitar los parametros, simplemente chequeen los archivos con las clases. El nombre del archivo es la misma constante pero todo en minúsculas y cambiando piso por guiones, por ejemplo, WC_Email_Customer_Invoice está definido en el archivo wc-email-customer-invoice.php. Es fácil, aunque parezca lo contrario. Pero descubrir esta información me tomó tiempo al tener que chequear el código fuente de los correos en woocommerce, así que espero que les haya servido de gran ayuda y ahorra de tiempo.

Hace 7 años en esa fecha: Amarok 2 disponible ahora en Windows

Como agregar rutas personalizadas en el API REST de Woocommerce

Woocommerce es una excelente plataforma para montar tu propia tienda en línea. Aunque mucha gente piensa que WordPress sigue siendo solo una plataforma para blogs, desde hace años se ha cambiado el funcionamiento interno para soportar todo tipo de contenido. Woocommerce es un ejemplo de ellos, pues este plugin permite soportar todo el contenido requerido en una tienda en línea como: productos, órdenes, pagos, descuentos, entre otros.

API REST

El plugin incluye una API REST para las operaciones mas básicas (se debe activar previamente), permitiendo comunicación hacia o desde aplicaciones externas, extendiendo aún mas las posibilidades de procesos que se pueden implementar en la tienda. Sin embargo, si manejas flujos de compras personalizados o deseas realizar acciones mas allá de las disponibles en el API por defecto, puedes agregar las tuyas tal como se explicará a continuación.

Desarrollo del plugin

El plugin se divide en 2 archivos, el principal para definir el plugin como tal y permitirle indicar a WordPress en que momento se va a cargar el segundo archivo, que contiene los métodos que responden a las rutas personalizadas del API.

Cargador de la clases

Para modificar WordPress, siempre es recomendable hacerlo a través de plugins, por eso el primer paso es definir un plugin como cualquier otro y dentro del constructo de la clase del plugin, indicar a Woocommerce que luego de cargar el código necesario para implementar el API (a través del hook woocommerce_api_loaded) se deben agregar la(s) clase(s) que implementan las rutas personalizadas (a través del hook woocommerce_api_classes), este código lo pueden ver a continuación:


/**
 * Plugin Name: Woocommerce custom path example
 * Description: Custom API calls plugin
 * Version: 1.0
 * Author: Miguel Useche
 * Author URI: http://migueluseche.com
 * License: GPL 3.0
 *
 * @package MyPlugin
 */

 
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if (!class_exists('WD_API_LOADER')) {

    /**
     * Main plugin class
     *
     * @package MyPlugin
     * @author Skatox
     */

    class WD_API_LOADER
    {
        public function init()
        {
          add_action( 'woocommerce_api_loaded', array( $this, 'load' ) );
        }

        public function load()
        {
            require_once plugin_dir_path( __FILE__ ).'wc-api-custom.php';
            add_filter( 'woocommerce_api_classes', array( $this, 'register' ) );
        }

        public function register( $api_classes=array() )
        {
          array_push( $api_classes, 'WC_API_Custom' );

          return $api_classes;
        }
    }
}

$wc_custom_api = new WD_API_LOADER();
$wc_custom_api->init();

Leyendo observarán que es un plugin de WordPress donde la clase WD_API_LOADER registra los hooks mencionados anteriormente, para inyectar en el momento que Woocommerce carga sus clases del API, las clases que instancia los procesos personalizados a ser implementados en el API.

Al final es recomendable instanciar la clase en un objeto, de este modo es posible acceder a los métodos de forma global desde plugines externos, como por ejemplo para detener la carga de las clases o implementar modificaciones permitiendo dar mayor flexibilidad al plugin.

Clase con los métodos de la API REST

El siguiente paso corresponde a crear la clase que responde a las peticiones HTTP del API. En este ejemplo, se define una constante con el PATH personalizado y en el constructor se definen las rutas personalizadas y el método que se debe llamar que responderá a la petición realizada. Si observas, el parámetro recibido es un array donde la llave representa la ruta relativa del API y como valor, otro arreglo con el nombre de la función a procesar la petición y las banderas del tipo de petición. Estas últimas banderas permiten definir el tipo de petición a recibir, por ejemplo
WC_API_Server::READABLE indica que lee datos desde la petición tal como es una petición GET,
WC_API_Server::ACCEPT_DATA permite decir que lea el cuerpo de la petición y permite leer información para peticiones POST y PUT, entre otros.


/**
 * Custom API REST path  class
 *
 * @package MyPlugin
 * @author Skatox
 */

class WC_API_Custom extends WC_API_Resource
{

    const PATH = '/custom';

    /**
     * Function to define each of the custom path
     */

    public function register_routes($routes)
    {
        //GET Request
        $routes[self::PATH . '/orders'] = array(
            array(array($this, 'listShippingOrders'), WC_API_Server::READABLE),
        );

        //POST Request
        $routes[self::PATH . '/orders/(?P<order_id>\d+)/fulfillments.json'] = array(
            array(array($this, 'createItem'), WC_API_Server::CREATABLE | WC_API_Server::ACCEPT_DATA),
        );

        //PUT Request
        $routes[self::PATH . '/variants/(?P<id>\d+).json'] = array(
            array(array($this, 'updateItem'), WC_API_Server::EDITABLE | WC_API_Server::ACCEPT_DATA),
        );

        return $routes;
    }

    public function listShippingOrders($fields = null, $filter = array(), $status = null, $page = 1)
    {
        $wcApiOrders = new WC_API_Orders($this->server);
        $orders = $wcApiOrders->get_orders($fields, $filter, $status, $page);

        //Removes orders without shipping methods
        foreach ($orders['orders'] as $key => $oreder)
        {
            if (empty($oreder['shipping_methods'])) {
                unset($oreders['orders'][$key]);
                continue;
            }
        }

        return $order;
    }

    public function createItem($order_id, $data)
    {
        //Do insert proccess and then return the response array
    }

    public function updateItem($id, $data)
    {
        //Do update proccess and then return the response array

    }
}

Una vez que proceses la petición, si necesitas devolver un objeto JSON, simplemente debes retornar un array con la información deseada y automáticamente Woocommerce se encargará de transformarlo en un objeto JSON e imprimirlo en la salida.

Recomendaciones

Como podrás observar, no es difícil. En caso que no sepas como desarrollar debido a la poca documentación. Te recomiendo leer el código fuente de las clases del API de Woocommerce, son fáciles de entender, creadas por el mismo equipo del plugin y verás como están creados los métodos existentes. Una de las mejores clases para guiarte, es la de productos que se encuentra ubicada en la ruta wp-plugins/woocommerce/includes/api/class-wc-api-products.php, pues es muy completa y posee todas las operaciones REST soportadas.

Recuerda crear un plugin para esto, evita colocarlo en el functions.php pues será difícil de mantener y dificulta migrar de tema (porque el API dependerá de ésta). Finalmente, recuerda respetar el estándar REST, he visto gente que implementa todo en POST y agrega incompatibilidades a aplicaciones.

Ya depende de tu imaginación, descubrir como extender las funcionalidades de Woocommerce a través de un API REST personalizado.

Cloud 9 un entorno de desarrollo en la nube

Hace unas semanas debido a una fuerte gripe, me tocó trabajar en casa para un trabajo que debía hacer una oficina donde tenía mi computadora con todo el entorno de desarrollo configurado. Sin embargo en la organización tenían configurado el servicio Cloud9 para poder trabajar remotamente.

Cloud9 es un completo entorno de desarrollo y ejecución en la nube, permitiéndote desde tu navegador web crear y ejecutar software web. El mismo posee un editor muy parecido a Sublime Text (de hecho muchos atajos del teclado son iguales), acceso a la terminal de un servidor y la posibilidad de configurar dependencias necesarias para ejecutar el programa: servidor web, framework, base de datos, etc.

Entorno de desarrollo de Cloud9

Entorno de desarrollo de Cloud9, todo se está ejecutando desde el navegador

El espacio de trabajo

El uso de Cloud9 es muy sencillo, primero debes configurar un espacio de trabajo (Workspace), actualmente (al menos en la versión gratuita) te ofrece entornos como LAMP, Django, NodeJS, puro HTML, Rails, entre otros. Luego de seleccionar el entorno especificas asignas un repositorio de control de versiones (creo que es impensable hoy en día hacer un proyecto sin eso), para obtenerlas fuentes, haces las configuraciones requeridas por tu aplicación y listo. Luego se encarga de correr los servicios necesarios y puedes acceder a tu aplicación web desde una URL.

Plantilla de espacios de trabajo disponibles en Cloud9

Plantilla de espacios de trabajo disponibles en Cloud9

¿Por qué usarlo?

La principal ventaja de usar Cloud9 es poder escribir el código de un programa, guardar, cambiarte de equipo o de localidad y seguir escribiendo código el mismo código sin problemas. Aunque puedes sacrificar privacidad (en la licencia no se ve nada extraño) es muy útil en casos donde trabajas en distintos lugares y no puedes cargar tu portátil (en mi caso me muevo entre casa, universidad y oficinas de clientes pero por la inseguridad no puedo cargar mi portátil en todos lados). Otro caso, como en el que descubrí la herramienta, en organizaciones pueden usarlo como respaldo en caso que un empleado necesite trabajar desde su casa u otro lugar de forma urgente.

Algo interesante, es que en pocos segundos puedes tener un entorno de ejecución funcional. Con unos clics puedes tener un servidor web hecho Django y empezar a trabajar en él (o estudiarlo), luego con otros clics tienes un entorno en Ruby. Lo cual es mas fácil que estar instalando dependencias y configurar servicios en tu sistema operativo.

El editor está realizado en Javascript y tecnología detrás de ella es un servidor NodeJS que crea contenedores en Docker, me parece interesante esta arquitectura. Algo que me parece “fácil” de replicar en otros servidores y poder contar con una solución similar.

Si deseas contar con IDE y entorno de ejecución que puedas usar en cualquier computadora sin estar descargando cosas, te recomiendo utilizar Cloud9. Lo único es que como toda nube, dependes de un tercero y a veces puedes desconfiar de la seguridad del mismo o de la calidad de protección de los datos. Aunque, me parece un buen entorno para aprender tecnologías o hacer experimentos rápidamente.

Sitio oficial de Cloud9

Hace 3 años en esa fecha: Breve resumen del FUDCon Día #3

Hace 5 años en esa fecha: ¡Feliz día del Blog!