octubre 2017

Objetos anónimos en PHP

Introducción

De todos los lenguajes que he manejado, siempre me ha gustado Javascript; porque es muy flexible y simple. No necesitas escribir 500 líneas para decir Hola mundo, ni necesitas un compilador. Sólo necesitas un editor de texto (incluso el bloc de notas) y un navegador web.

Si necesitamos un objeto anónimo, que no dependa de una clase (porque, ¿para qué escribir una clase si sólo vas a instanciar un objeto?) podemos definirlo así:

let auto = {
  color: "Blanco",
  placas: "NEY3494"
};

Y listo, no necesitamos definir clases, o instanciar, ni nada de eso.

¿Por qué necesitamos objetos anónimos?

Porque a veces no necesitamos un objeto definido. Es decir, no hay una clase que defina lo que el objeto será. Un ejemplo es cuando queremos devolver muchos valores de una vez y no queremos usar arreglos:

function obtenerDatosDeClientes(){
  $totalDeClientesRegistrados = obtenerClientes();
  $promedioComprado = obtenerPromedioComprado();
  $ventasExitosas = obtenerVentasExitosas();
  $ventasConError = obtenerVentasConError();
}

Ahí estamos calculando el total de clientes, el promedio, el número de ventas exitosas y de ventas erróneas. Podemos devolverlas todas en un objeto, pero para ese objeto no necesariamente necesitamos una clase, porque ¿Cómo se llamaría la clase?

Soluciones

En PHP, en cambio, no podemos definir objetos de esta manera tan simple. Así que para crearlo tenemos dos opciones o trucos.

Crear nuevo objeto de la clase stdClass

Ahora voy a ilustrar cómo sería crear un objeto auto:

$auto = new stdClass;
$auto->color = "Blanco";
$auto->placas = "NEY3494";

Y listo, con eso tenemos un objeto anónimo que aunque sí tiene que ser instanciado no necesariamente tiene una clase real.

Decodificar un objeto anónimo en formato JSONy usarlo

Esto más me parece un truco, pero igual funciona. Podemos hacer lo siguiente:

$auto = json_decode("{}");
$auto->color = "Blanco";
$auto->placas = "NEY3494";

Con json_decode transformamos un objeto en formato JSON. Y como estamos decodificando un objeto vacío, al transformarlo será un objeto vacío pero de PHP. Es un truco, pero funciona.

Implementación

Ahora veamos cómo podemos aplicar esto al problema expuesto. Recordemos que teníamos la función:

function obtenerDatosDeClientes(){
  $totalDeClientesRegistrados = obtenerClientes();
  $promedioComprado = obtenerPromedioComprado();
  $ventasExitosas = obtenerVentasExitosas();
  $ventasConError = obtenerVentasConError();
}

Y podemos devolver todas las propiedades así:

function obtenerDatosDeClientes(){
  $totalDeClientesRegistrados = obtenerClientes();
  $promedioComprado = obtenerPromedioComprado();
  $ventasExitosas = obtenerVentasExitosas();
  $ventasConError = obtenerVentasConError();

  $objeto = new stdClass;
  $objeto->totalClientes = $totalDeClientesRegistrados;
  $objeto->promedioComprado = $promedioComprado;
  $objeto->ventasExitosas = $ventasExitosas;
  $objeto->ventasConError = $ventasConError;
  return $objeto;
}

Al llamar a la función, accederíamos a los resultados usando el operador flecha en lugar de acceder a ellos usando el índice de un arreglo.

Eliminar filas o valores duplicados en MySQL en una sola consulta

Introducción

A veces tenemos uno, dos o más datos que se repiten en nuestras tablas. Incluso a veces no sólo se repiten 2 veces, sino 3 o más. Así que hoy veremos cómo eliminar estos duplicados.

Solución

Básicamente tenemos que agregar algunos índices a la tabla. Ya que, si recordamos, los índices son índices porque no se repiten (y porque ayudan a hacer las búsquedas más rápidas). Entonces, si agregamos índices en los campos que no queremos que se repitan, se eliminarán de tal forma que, de todos los repetidos sólo quedará uno.

La consulta es:

ALTER IGNORE TABLE tu_tabla ADD UNIQUE INDEX(columna_1, columna_2);

En donde tu_tabla es el nombre de la tabla con datos repetidos. En este caso se supone que sólo son 2 columnas, pero podemos agregar muchas columnas.

Usamos IGNORE para que no nos dé ningún error, ya que nos intentará avisar que hay datos repetidos y que serán eliminados. Pero como nosotros ya sabemos que hay repetidos, ignoramos el error.

Después de hacerlo, podemos eliminar el índice usando:

 ALTER TABLE tu_tabla DROP INDEX columna_1;

Aquí es importante mencionar que el nombre del índice es formado por el nombre de la primer columna. Por lo que si la primer columna fue “nombre” entonces el índice será “nombre” sin importar cuántas columnas hayas indexado.

Nota: está de más decir que debemos hacer un respaldo completo antes de hacer cualquier movimiento. Nunca se sabe si algo puede salir mal.

ejemplo para ilustrar

Nota: tal vez la tabla no tenga sentido, pero recuerden que es para ilustrar. Es que no se me ocurre otra cosa para poner el ejemplo.

Crear tabla

Voy a crear una tabla y le pondré datos duplicados. La tabla guardará datos sobre mascotas. Para crear la tabla usamos:

CREATE TABLE mascotas (
  id     BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(255)    NOT NULL,
  edad   SMALLINT        NOT NULL,
  raza   VARCHAR(255)    NOT NULL,
  genero CHAR            NOT NULL
);

Llenar tabla

Para ponerle algunos datos usamos:

INSERT INTO mascotas (nombre, edad, raza, genero)
VALUES
  ('Maggie', 2, 'Maltés', 'F'),
  ('Cuco', 5, 'Chihuahua', 'M'),
  ('Coqueta', 3, 'Chihuahua', 'F'),
  #Atención aquí abajo: El único dato que cambia es el género
  ('Coqueta', 3, 'Chihuahua', 'M'),
  ('Chucha', 1, 'Pastor alemán', 'F'),
  ('Maggie', 2, 'Maltés', 'F'),
  ('Cuco', 5, 'Chihuahua', 'M'),
  ('Cuco', 5, 'Chihuahua', 'M'),
  ('Coqueta', 3, 'Chihuahua', 'F'),
  ('Chucha', 1, 'Pastor alemán', 'F');

Mostrando datos

Ahora mostramos los datos con:

SELECT * FROM mascotas;

Obtenemos:

Podemos observar que se repiten los datos. Y para este ejemplo supondremos que no pueden existir dos perros que tengan el mismo nombre, la misma edad, la misma raza ni el mismo género.

Es importante notar que Coqueta se repite 3 veces (está en el #3, #4 y #9), pero en las primeras dos en realidad no se repite, ya que cambia el género. Entonces se supone que esa fila debe quedar intacta, porque aunque los datos coincidan con la mascota #3 y #9 el género cambia.

Eliminando duplicados

Ahora ejecutaré el comando:

ALTER IGNORE TABLE mascotas ADD UNIQUE INDEX(nombre, edad, raza, genero);

Volveré a mostrar los datos:

Y podemos ver que Coqueta sigue ahí, y así debe ser. Porque indiqué que sólo quería eliminar aquellos en donde tanto el nombre, la edad, la raza y género fueran iguales. Y en éste caso cambia el género.

Si quisiéramos eliminar en donde se repitiera el nombre, la consulta sería:

ALTER IGNORE TABLE mascotas ADD UNIQUE INDEX(nombre);

Así podemos ir jugando con las columnas y los datos.

Eliminar índice

Finalmente, si no queremos que los índices estén ahí, podemos usar:

ALTER TABLE mascotas DROP INDEX nombre;

Es necesario notar que el nombre del índice es tomado de la primera columna que especificamos al indexar. Como en este caso fue nombre, entonces ese fue el nombre del índice.

Remplazar caracteres con asteriscos en Arduino

Introducción

Hoy escribí una entrada sobre cómo remplazar caracteres o enmascarar una cadena en C++. Pensé que así como funcionó en CPP funcionaría en Arduino, pero no fue así. Así que me puse a leer la documentación de los Strings en Arduino y me di cuenta de que no son muchas cosas las que cambian.

Diseño de la función

La función es muy sencilla. En mi caso usé setCharAt, que es toma como parámetros la posición de la cadena en donde queremos poner el carácter y el carácter. Sabiendo eso podemos usar un ciclo for que vaya desde 0 hasta la longitud de la cadena (para esto podemos usar cadena.length() ) e ir llamando a setCharAt con el contador del ciclo y el carácter de remplazo.

Pero bueno, vayamos al código, que hablar es de mal gusto.

String enmascarar(String cadenaOriginal, char mascara) {
  for (int x = 0; x < cadenaOriginal.length(); x++)
    cadenaOriginal.setCharAt(x, mascara);
  return cadenaOriginal;
}

Ejemplo

Ahora vamos a probar la función. Voy a imprimir por medio del monitor serial. Remplazaré con asteriscos, con puntos y con guiones bajos.

void setup()
{
  Serial.begin(9600);
  Serial.println("enmascarar(\"Hola mundo\", '*') --> " + enmascarar("Hola mundo", '*'));
  Serial.println("enmascarar(\"Ya quedó\", '_') --> " + enmascarar("Ya quedó", '_'));
  Serial.println("enmascarar(\"A ver\", '.') --> " + enmascarar("A ver", '.'));
}
void loop(){}

String enmascarar(String cadenaOriginal, char mascara) {
  for (int x = 0; x < cadenaOriginal.length(); x++)
    cadenaOriginal.setCharAt(x, mascara);
  return cadenaOriginal;

}

La salida será la siguiente:

enmascarar("Hola mundo", '*') --> **********
enmascarar("Ya quedó", '_') --> _________
enmascarar("A ver", '.') --> .....

Así podemos por ejemplo poner esos caracteres al ingresar una contraseña.

Enmascarar una cadena con un carácter en C++

Introducción

No me gusta mucho programar en C++ ni en C, pero hay algunas ocasiones en las que es necesario. En esta ocasión tuve que enmascarar una cadena. Es decir, que algo como “Hola” se convierta en “****”. O en lugar de asteriscos, que se muestre un guión bajo o algún carácter.

La razón es que en un ejercicio de Arduino se tiene que pedir un código de acceso y luego se debe mostrar en una LCD ese código remplazado por asteriscos o algún otro símbolo. Debido a que (y espero que sea cierto) al programar en Arduino podemos usar las funciones nativas de C y CPP (o C++) hice una función en C++.

Solución

Es simple, crear una nueva cadena de longitud N y llenarla con el símbolo especificado. La función queda así:

string enmascarar(string cadenaOriginal, char mascara){
	return string(cadenaOriginal.length(), mascara);
}

Creamos una nueva cadena; su longitud será la misma que la que queremos enmascarar. Y vamos a llenarla con la máscara, que será de tipo char.

Para probar, hice este sencillo programa:

#include <iostream>
using namespace std;

string enmascarar(string cadenaOriginal, char mascara){
	return string(cadenaOriginal.length(), mascara);
}

int main(){
	cout << "\nenmascarar(\"132458\", '_'). Resultado --> " + enmascarar("132458", '_');
	cout << "\nenmascarar(\"Probemos :)\", '*'). Resultado --> " + enmascarar("Probemos :)", '*');
	cout << "\nenmascarar(\"Esta lleva números 123\", '0'). Resultado --> " + enmascarar("Esta lleva números 123", '0');
}

 

Compilando

Para compilar uso el compilador de MinGW llamado g++ corriendo sobre Windows. Simplemente corrí esto:

cls && g++ 2_EnmascararString.cpp -o 2_EnmascararString.exe && 2_EnmascararString.exe

Y los resultados son:

Obviamente la implementación depende de la situación en la que estemos. Espero poder traer el tutorial en Arduino más tarde.

(429) Too Many Requests Laravel – Solución y explicación

Introducción

Cuando estamos consumiendo una api creada con Laravel, puede que nos aparezca el error que dice “(429) Too Many Requests“. Aquí explicaré por qué pasa y qué solución tenemos para ello.

Básicamente esto aparece porque estamos haciendo muchas peticiones en un corto periodo de tiempo; por ejemplo, hacer 100 peticiones en menos de un minuto.

Es una forma que tiene Laravel para protegernos. Ya que de esta forma bloqueamos el acceso a un usuario malicioso que haga miles de peticiones para que nuestro servidor caiga. Si pasa el límite, sólo se le responderá con el código http 429.

Continue reading…

Imprimir ticket en impresora térmica usando Javascript

Introducción

Actualización agosto 2019

¿Quieres imprimir con JavaScript sin usar el diálogo de impresión, con la posibilidad de cortar el papel y abrir el cajón de dinero? mira este post.

Recientemente escribí un tutorial sobre cómo imprimir un ticket en una impresora térmica usando PHP. Veamos entonces cómo podemos imprimir ticket en impresora térmica usando JavaScript.

Las complicaciones que tenemos al imprimir con PHP son:

  • Confusión de cómo usar la librería
  • Forzar a que el lenguaje del servidor sea PHP

Así que ahora decidí hacer una entrada para saber cómo imprimir un ticket en una impresora térmica sin usar PHP, sólo Javascript. El resultado será el siguiente:

Continue reading…

Solución al error stk500_getsync() attempt 10 of 10 not in sync resp=0xd1 – Arduino

Ayer intenté subir un pequeño sketch muy básico a un Arduino y me encontré el error mencionado en el título.

Solución

La solución era muy simple. Anteriormente usaba un Arduino Uno, pero ahora estaba experimentando con un Mega. Intenté subir el programa y tardaba mucho, hasta que lo desconecté y apareció ese error. Seguí intentando y al final me di cuenta de que simplemente tenía que seleccionar la placa correcta en el editor:

Otras soluciones

El problema que experimenté es muy poco común, ya que cuando este error aparece normalmente las causas son:

  • Un cable conectado al pin 0 (RX). Simplemente cambia de pin si no es necesario que lo uses. De hecho no es recomendado usar el 0 y el 1 para cosas simples o que no necesitan estrictamente esos puertos.
  • Puerto COM erróneo. Asegúrate de elegir bien el puerto, y si no funciona en uno, prueba con los demás.
  • Drivers o controladores no instalados o actualizados. Puedes ir al administrador de dispositivos de Windows y desde ahí actualizarlos.

Referencias

Si sirve de algo, aquí dejo el enlace en donde, al ver los comentarios, encontré la solución a mi problema: http://www.instructables.com/id/A-solution-to-avrdude-stk500getsync-not-in-syn/

 

Tipado débil y tipado fuerte: diferencias y explicación

Introducción

Tal vez hemos escuchado que algunos lenguajes de programación son de tipado fuerte y otros de tipado débil. Hay una gran diferencia entre ambos tipos. Normalmente el tipado débil es el más criticado de todos, pero también es querido por muchos. Aquí daré una pequeña explicación.

Para comenzar, debemos saber que el tipado se refiere a cómo declaramos los tipos de variables. Por ejemplo, algunas las declaramos como enteras, algunas otras como cadena, flotantes, etcétera. Y en algunos lenguajes, no necesitamos declarar el tipo, pues éste se adivina.

Por otro lado, el tipado fuerte no permite hacer operaciones entre objetos de distintos tipos. No podemos sumar una cadena mas un entero. En cambio, en los débilmente tipados sí.

Tipado débil

La mayoría de veces, el tipado débil es en donde no indicamos el tipo de variable al declararla. La verdadera diferencia es que podemos asignar, por ejemplo, un valor entero a una variable que anteriormente tenía una cadena.

También podemos operar aritméticamente con variables de distintos tipos. Por ejemplo, sumar “x” + 5.

Ventajas

  • Nos olvidamos de declarar el tipo
  • Podemos cambiar el tipo de la variable sobre la marcha. Por ejemplo, asignarle un string a un int
  • Escribimos menos código

Desventajas

  • Al hacer operaciones, a veces éstas salen mal. Por ejemplo, puede que intentemos sumar 500 + “400.00” + 10, cosa que será errónea
  • Especialmente en Javascript, he notado que hay errores al comparar números que creemos que son números, pero no lo son. Por ejemplo, algo como “20” > “100” dará como resultado true, ya que son comparados como cadena, no como números.
  • Hay que castear muchas veces. En ocasiones, tendremos que castear forzosamente las variables para que se comporten como queremos y no generen errores como los mencionados arriba.
  • Código menos expresivo. Al declarar los argumentos de una función no sabemos si ésta espera un flotante, un entero, un string, etcétera. Tenemos que ir a la función, ver lo que hace e inferir el tipo de variable que espera
  • Inseguridad: existe la posibilidad de que un atacante descubra una vulnerabilidad en donde nosotros esperemos una variable de determinado tipo pero se reciba otra

Lenguajes que lo usan

  • PHP
  • Javascript

Ejemplo

Veamos lo que pasa en JavaScript cuando hacemos la siguiente operación:

let resultado = "x" + 5;

En un lenguaje fuertemente tipado daría un error, pero en JavaScript no pasa nada:

Tipado fuerte

Aquí es en donde indicamos el tipo de dato al declarar la variable. Dicho tipo no puede ser cambiado nunca. Y no podemos operar entre distintos tipos.

Ventajas

  • Código expresivo: ahora sí sabremos de qué tipo espera un argumento una función
  • Menos errores: Nos olvidaremos de ver el tipo de variable antes de hacer operaciones con ésta

Desventajas

  • Escribir más codigo: tenemos que declarar el tipo de variable al declararla

Lenguajes que lo usan

Por mencionar algunos…

  • C
  • C#
  • Java
  • Ruby
  • Python

Ejemplo

Intentemos realizar la operación de “x” + 5 en Python, y veamos lo que pasa:

Conclusión

Es un poco difícil determinar los de tipado débil y los de tipado fuerte. Los de tipado fuerte son más seguros, pues no permiten hacer operaciones con variables de distintos tipos.

Personalmente preferiría que todos fueran de tipado fuerte. Si no nos queda otra opción, simplemente hay que castear o comprobar el tipo cada vez que trabajemos con una variable. Afortunadamente tenemos funciones como gettype, settype, typeof, etcétera.

Además, algunos lenguajes (como PHP) están introduciendo un tipado fuerte al declarar funciones. De todos modos, al final todo depende del programador, pues éste se encarga de que el código funcione.

Descargar o incluir librerías javascript de GitHub usando rawgit

Introducción

Muchas veces encontramos proyectos buenos o librerías que resuelven el problema que tratamos de solucionar, pero están en GitHub y puede que no sepamos incluirlas. O también puede que no tengamos npm, bower y ninguna de esas cosas confusas que ponen. Así que en esta entrada trataré de explicar cómo es que podemos descargar librerías de GitHub a mano, de una forma fácil. Esto traerá ventajas ya que podremos obtener siempre la última versión.

Proyecto de ejemplo

Veamos este proyecto, por ejemplo. Funciona para crear gráficas, pero si sólo queremos el script… ¿cómo sabemos cuál archivo descargar? ¿en dónde está ese archivo?

La mayoría de los proyectos que he visto tienen una carpeta llamada dist. Ahí es en donde se guardan los archivos finales, listos para ser usados.

Podemos ver que hay 4 archivos ahí. Normalmente siempre debemos tomar los que terminan con min.js (el tercero) ya que están minificados. Es decir, están optimizados y pesan menos que el archivo original. Si quisiéramos analizar el código fuente y tal vez modificarlo usaríamos el que no tiene min (el primero de la lista).

Sea cual sea el archivo, vamos a abrirlo y veremos el código fuente:

Código como RAW

Para poder ver el código tal como es, y poder descargarlo para incluirlo hacemos click en raw. Lo que nos llevará a lo siguiente:

Ahí ya tenemos la librería tal y como es. Podemos presionar Ctrl + S (o click derecho y elegir Guardar como) para guardarla como un archivo .js.

Rawgit

También podemos usar rawgit, un tipo de cdn que se encarga de proveer los archivos de GitHub con los encabezados Content-Type establecidos correctamente. Si queremos, podemos copiar el link del archivo raw (el de la captura de arriba) e ir a rawgit.com para pegarlo ahí y ahora sí obtener el enlace para incluirlo en una etiqueta script.

Al pegarlo en el primer campo de texto, los otros dos se llenan automáticamente. Para usarlo en producción, simplemente hay que copiar el de la izquierda. Para usarlo en desarrollo, usemos el de la derecha. Yo siempre uso el de la izquierda.

Y una vez copiado, podemos incluirlo así:

<script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js">

Como lo dije hace un momento, también podemos descargar la librería una vez que la hayamos abierto como raw. En ese caso la incluiríamos así:

<script type="text/javascript" src="carpeta_en_donde_se_guardo/nombre_archivo.js">

Ventajas y desventajas

La ventaja de usar rawgit es que ahorramos ancho de banda si es que subimos nuestro proyecto a internet. La desventaja es que éste servicio no ofrece ninguna garantía, ya que es gratis. Pero en todo el tiempo que llevo usándolo nunca ha fallado.

Cambiar opacidad de imagen usando Photoshop

En una ocasión estaba tratando de bajar la opacidad de una imagen; es decir, hacer más transparente la imagen. Me encontré con muchos tutoriales pero al final decidí buscar otro método y aquí lo expongo.

Nota: en este post se explica cómo hacerlo con Adobe Photoshop CC 2015 pero debería funcionar para otras versiones.

Abriendo imagen

Simplemente vamos al menú Archivo > Abrir y seleccionamos la imagen. En este caso abriré una que descargué de aquí, ya que puedo modificarla a mi gusto sin restricciones.

Al abrirla se nos preguntará si queremos modificar el color. Dejaremos la opción por defecto

 

Ahora así se ve la imagen abierta:

Creando capa para cambiar opacidad

Vamos a hacer doble click en la capa Fondo para crear una nueva capa:

Y aparecerá una ventana

Desde ahí podemos cambiar la opacidad. En este caso la puse en 30 % y ahora mi imagen luce así:

Jugando con la opacidad

Ahora puedo hacer doble click en la Capa 0 y aparecerá la siguiente ventana:

Directamente desde ahí podemos cambiarla, y después hacer click en Aceptar.

Guardando cambios

Una vez que tengamos la imagen con la opacidad deseada, vamos a exportarla. Para ello podemos elegir Archivo > Exportar como PNG. Si no aparece esta opción, hay que buscar la opción equivalente como “Exportar como…” o algo así, dependiendo de la versión puede cambiar.

Recomiendo guardarlo como PNG para que conserve transparencia.

Comparación

Ahora veamos una comparación de ambas imágenes:

Opacidad 100 %

 

Opacidad 30 %

De esta forma podemos cambiar la opacidad de una imagen usando Photoshop. Me parece un truco rápido y sencillo, ya que sólo tenemos que abrir, crear una nueva capa con una opacidad diferente y exportarla como PNG o como el formato original.

Capturar pantalla completa en Google Chrome

A veces es necesario hacer una captura de pantalla rápida con el navegador Google Chrome. O tal vez necesitemos capturar la pantalla completa o capturar una página completa o entera. Hoy mostraré una extensión de este navegador llamada FireShot.

Instalando extensión

Podemos descargarla de la chrome web store desde aquí. Una vez instalada aparecerá en la lista de extensiones.

Capturando pantalla

Al hacer click en el botón nos aparecen muchas opciones

Capturar página entera

Podemos capturar toda la página, es decir, la página completa, no sólo lo que visualicemos en la pantalla. Dependiendo de qué tan larga esté la página se tardará más o menos.

Después de esperar a que capture la página, se abrirá una nueva pestaña en donde tendremos muchas opciones.

Guardar como imagen

Podemos guardarla en el sistema como imagen png. Después podremos abrirla y hacer zoom.

Guardar como PDF

También podemos exportar la captura completa como PDF sin perder calidad alguna.

Copiar al portapapeles

Si lo deseamos, podemos copiar la imagen al portapapeles haciendo click derecho y seleccionando Copiar imagen, para después pegarla en Word, Paint, etcétera.

Capturar área visible

Al contrario que capturar la página entera, a veces necesitaremos capturar sólo lo que estemos viendo, para eso es esta opción.

Podemos fijarnos en que ahora en donde está la imagen no hay scroll, es porque sólo capturó la parte que estábamos viendo. También podremos guardarla, copiarla, exportarla a pdf y todas las opciones que vimos anteriormente.

Capturar área seleccionada

Puede que en ocasiones necesitemos simplemente recortar parte de una página web. Al hacer click en esa opción podremos recortar la pantalla:

Después de recortar a nuestro gusto, se abrirá otra pestaña en donde tendremos las mismas opciones de siempre:

Enviando por correo electrónico

La extensión incluso puede enviar las imágenes que capturemos usando nuestro correo.

Podemos elegir el formato a enviar:

Después, simplemente tenemos que darle permiso haciendo click en “Request permissions“:

Se abrirá una alerta para pedir permisos:

Si le damos permiso, se abrirá nuestro correo automáticamente y se creará un nuevo envío en donde la captura estará adjuntada de forma automática:

Cabe mencionar que esto sólo funciona con gmail, desde el sitio mail.google.com, y no funciona con inbox (el correo mejorado de Google).

Conclusión

Esta extensión nos ayuda mucho sin tener que instalar nada en nuestra computadora, todo lo hacemos desde la web. Hay más opciones que no mencioné en este post, pero podemos descubrirlas experimentando con la extensión.

De nuevo dejo el enlace en donde se puede descargar: Captura de página completa – FireShot

También dejo el enlace al artículo en donde saqué las capturas; se me hace muy interesante: La garra del león

Cuidado con las rutas de Laravel

Introducción

Las rutas de Laravel son una gran herramienta que nos permite construir una api rápidamente, y de forma fácil y eficaz. Simplemente tenemos que definir una ruta así:

Para después poder consumirla con una petición get a sitio.com/api/usuarios (por ejemplo). De esta manera nos evitamos parsear la ruta y muchas cosas que son laboriosas.

También podemos definir una ruta para que coincida con variables. Por ejemplo, la siguiente ruta muestra las ventas de algún año:

Podemos consumirla llamando a sitio.com/api/ventas/2017 y obtendríamos las ventas del año 2017 (en un caso teórico).

Conforme nuestras rutas crezcan, puede que olvidemos las rutas que hemos definido anteriormente y que incluso repitamos algunas de ellas.

Descripción del problema o error

Como se vio anteriormente, podemos obtener las ventas de un año con la siguiente ruta:

Y puede que después definamos una ruta para obtener las ventas canceladas, así:

Si ahora llamamos a sitio.com/api/ventas/2017 obtendremos las ventas del 2017, claro está. Y si quiero las ventas canceladas podría llamar a sitio.com/api/ventas/canceladas.

Pues aquí está el problema, ya que al llamar a sitio.com/api/ventas/canceladas Laravel pensará que estamos consultando las ventas por año, y que queremos las ventas en donde el año sea “canceladas” cosa que no tiene sentido. Lo que en realidad queremos son las ventas canceladas.

Esto podría traernos muchos errores, ya que no sabríamos por qué al llamar a sitio.com/api/ventas/canceladas no nos está devolviendo nada.

Solución

Podemos hacer dos cosas: renombrar nuestras rutas o delimitarlas con una expresión regular.

Renombrando rutas

Una solución que no me gusta mucho pero que funciona es renombrar nuestras rutas. Por ejemplo, podemos cambiar a que las ventas por año sean así:

Y ahora al llamar a ventas canceladas las rutas no se confundirán. Ya que para las ventas canceladas se llamará a sitio.com/api/ventas/canceladas y para las ventas por año se llamará a sitio.com/api/ventas/anio/2017 (agregamos anio antes de la variable).

De esta manera ya no chocarán. A mí se me hace una solución no tan práctica, pero funciona perfectamente y no tiene nada de malo.

Restringiendo rutas con expresión regular

Otra solución que me gusta más es hacer que la ruta coincida sólo si ésta coincide a su vez con una expresión regular. Es decir, podemos usar el método where de las rutas, para indicar que queremos que coincida sólo si es un número.

La ruta de las ventas por año quedaría así:

Simplemente estamos indicando que coincida sólo si la variable año es un número de 4 dígitos.

Así que al llamar a sitio.com/api/ventas/2017 obtendremos las ventas del 2017, ya que 2017 es un año de 4 dígitos.

Al llamar a sitio.com/api/ventas/canceladas la ruta no coincidirá, ya que “canceladas” no es un año, por lo que Laravel buscará otra ruta para ver si coincide antes de lanzar un error. Y como encontrará la ruta de las ventas canceladas, caerá ahí y obtendremos correctamente lo que queremos.

Usar las expresiones regulares también nos ayuda a mejorar un poco nuestra aplicación, y a delimitar datos para evitar errores.

Referencias

Aquí dejo algunos enlaces que pueden ser de ayuda para entender mejor esto

Documentación oficial de las rutas de Laravel

Expresión regular para un año de 4 dígitos

Probar expresiones regulares online

Aprende más sobre Laravel aquí.

Códigos de barras con AngularJS

A veces es necesario generar códigos de barras o códigos qr con javascript o angularjs. En este caso mostraré cómo podemos hacerlo de una forma realmente rápida y fácil usando este poderoso framework.

Incluyendo lo necesario

Necesitaremos únicamente incluir a angularjs (obviamente) y una librería llamada angular-barcode que podemos encontrar en GitHub.

Nuestro encabezado lucirá algo así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

Ahora vamos a empezar a crear nuestro script para la app, y crear un pequeño controlador.

Comenzando a definir vistas y controladores

En nuestro script escribiremos lo siguiente:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {

  }]);

Como ya declaramos nuestra app en javascript, ahora vamos a ponerlo en HTML para que Angular se encargue de pegar la vista y el controlador. Así que en nuestra vista vamos a declarar la app y el controlador como se ve en el código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">

  </div>
</body>

</html>

Ahora sí vamos a empezar a declarar nuestro código de barras. Simplemente tenemos que poner la etiqueta <angular-barcode> con algunas opciones. Entonces nuestra vista quedaría así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Como podemos ver, estamos definiendo los atributos bc-options, bc-type y el modelo. Vamos a analizar estos 3.

bc-options

Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.

bc-type

Puede ser svg, canvas o img. El código de barras puede ser pintado como una imagen, como un elemento svg o en canvas. Yo recomiendo usar svg porque permite una resolución bastante buena; sobre todo si vamos a imprimir.

Modelo o ng-model

Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.

 

Definiendo propiedades en controlador

Ya declaramos nuestras propiedades para que se reflejen en las vistas, ahora falta definir las opciones en nuestro controlador. Vamos a definir el modelo y las opciones:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigoBarras = "parzibyte.me";
  }]);

Las opciones las he tomado directamente del ejemplo de la librería, podemos verlo aquí para obtener una idea de todo lo que podemos lograr. Con lo explicado arriba, el resultado que se obtuvo es el siguiente:

Haciendo que el código de barras cambie al escribir

Ya pusimos nuestro código de barras, pero es estático. Podemos hacer que sea dinámico y que conforme introduzcamos texto, cambie. Simplemente tenemos que agregar un input y ligarlo al modelo. Sólo tenemos que agregar el siguiente código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <input type="text" ng-model="codigoBarras">
    <br>
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Agregando el input, conseguimos cambiar de forma dinámica al código de barras generado. Así se ve ahora:

ng-if, ng-repeat…

Como es una directiva de angularjs, podemos usar ng-if, ng-show, ng-repeat y cualquier otra cosa. Vamos a hacer que se pueda ocultar y mostrar, y también a hacer que se repita dependiendo de un arreglo.

Para ello, en lugar de definir una variable de tipo string, usaremos un arreglo. Por lo que nuestro script cambiará a esto:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigos = ["hola", "mundo", "somos", "palabras"];
  }]);

Ahora usaremos ng-repeat en nuestra vista:

<angular-barcode ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

Con lo que tendremos algo así:

Ahora vamos a agregar un checkbox para ocultar o mostrarlos. Simplemente hay que modificar a nuestra vista con el siguiente código:

<label for="mostrarCodigos">¿Mostrar?
    <input type="checkbox" ng-model="mostrarCodigos" />
    </label>
    <br>
    <angular-barcode ng-show="mostrarCodigos" ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

El resultado ahora es el siguiente:

Imprimiendo códigos

Claro que podemos imprimir en javascript y angularjs, simplemente hay que llamar a window.print. Vamos a agregar un botón para imprimir nuestros códigos:

<button type="button" ng-click="imprimir()">Imprimir</button>

En nuestro controlador vamos a crear la función imprimir:

$scope.imprimir = function(){
      window.print();
    };

Ahora podemos probarlo:

Nota: si deseamos ocultar el botón al imprimir, recomiendo leer este post para ocultar elementos al imprimir usando CSS.

Conclusión

Así es como podemos generar códigos de barras. Hay muchas opciones que tal vez ponga en otro post. Por el momento sólo nos dedicamos a crearlos y a usar la magia del framework, pero falta ver cómo cambiar colores, tamaño, etcétera. Recomiendo ver el proyecto en GitHub, y visitar el ejemplo en donde nos muestran las opciones.