marzo 26, 2018

Descargar una imagen PNG, GIF y JPG con Python

Introducción

Hoy veremos cómo descargar una imagen de una URL utilizando Python. Dependiendo de dicha url crearemos un archivo en nuestro disco duro. En pocas palabras, descargaremos la imagen.

Requisitos

Necesitamos instalar requests utilizando pip. Si no lo tienes, aquí dejo un tutorial.

Instalar requests

Una vez que hayamos instalado Python, ejecutamos el siguiente comando:

pip install requests

Con ello habremos instalado la dependencia, una vez hecho esto, lo demás será más fácil.

Descargar imagen jpg con Python

En este caso descargaremos esta imagen: https://golang.org/doc/gopher/appenginegophercolor.jpg

La guardaremos con el nombre “go.jpg”. Nuestro código fuente de ejemplo se ve como a continuación:

Cuando ejecutemos nuestro programa, no aparecerá nada en la consola, pero sí en el directorio en donde lo hayamos ejecutado:

Descargar imagen jpg con Python

Descargar imagen jpg con Python

Descargar PNG con Python

Igualmente podemos descargar una imagen en formato PNG. Para ello, sólo cambiamos el archivo de salida y obviamente la url. Quedando así:

Descargar GIF con python

Curioso pero cierto. También podemos descargar una imagen GIF utilizando Python.

Conclusión

Ya vimos lo fácil que es descargar imágenes de una url con Python. Podemos llamarlas en un ciclo, indexar un sitio web, etcétera.

Generar PDF a partir de imágenes con Python 3 e img2pdf

Introducción

Debido a circunstancias que no tengo que explicar, me vi en la necesidad de convertir JPG a PDF, o en pocas palabras, convertir un montón de imágenes a un documento PDF.

Conozco una herramienta llamada ilovepdf, es en línea y muy cómoda. Pero pone un límite; y por otro lado mi internet no es el de la nasa.

Me puse a pensar, por lo tanto, cómo convertir mis imágenes a PDF. Y encontré la respuesta que vengo a exponer.

Además, será en Python, un lenguaje querido por todos.

Convertir imágenes JPG a PDF

Requisitos

Primero necesitamos tener instalado Python 3 y pip. Aquí un grandioso tutorial de cómo instalarlo en Windows 10.

Instalar img2pdf

Así se llama el paquete que nos permitirá convertir JPG a PDF. Lo instalamos con:

pip install img2pdf

En mi caso, sale esto al instalar:

Instalación exitosa de img2pdf

Instalación exitosa de img2pdf

Por favor ignoren la advertencia de que pip necesita actualizarse. Ya lo he dicho antes, con que diga “Successfully…” nos damos por bien servidos.

Carpeta de imágenes

Para este ejemplo, tengo una carpeta con imágenes. Se ve así:

Directorio con imágenes para convertir

Directorio con imágenes para convertir

Ahora vamos a partir esto en partes para entenderlo mejor.

Obtener lista de imágenes

Esto no tiene nada que ver con la conversión a PDF. Simplemente veremos cómo obtener una lista de archivos en determinado directorio, para que más tarde podamos convertirlas. El código para ver el contenido de un directorio es este:

Al ejecutarlo, se listarán todos los archivos que estén en el directorio en donde se ejecute el script.

Pero como vemos, no todo son imágenes. Están por ejemplo los scripts que estamos viendo justo ahora. Para omitirlos podemos hacer una comparación, e imprimir sólo los archivos .jpg:

Si lo ejecuto, ahora sólo muestra imágenes jpg.

Listar únicamente imágenes JPG

Listar únicamente imágenes JPG

Con eso ya tenemos la mitad de este tutorial.

Convertir imágenes a PDF

Para ello, primero filtramos los archivos del directorio actual de manera que sólo queden imágenes jpg en la lista. Con esa lista, llamamos a img2pdf y listo. Antes de ello abrimos el documento para escribir sobre él, esperamos un poco (dependiendo de cuántas imágenes sean) y se habrá generado nuestro archivo PDF.

 

Y con eso estamos listos. Por cierto, créditos a quien respondió la pregunta de este sitio. También dejo el enlace a la documentación oficial.

Ejemplos e introducción a los objetos y clases en Go

Introducción

Go, o Golang es un lenguaje de programación compilado. No tiene una forma de definir una clase (así como estamos acostumbrados por ejemplo en Java) pero sí podemos crear objetos.

¿Cómo declarar una clase en Go?

No declaramos una clase, declaramos un tipo. Por ejemplo, si yo quisiera declarar la clase Mascota, pondría esto:

Declaramos variables de distintos tipos dentro de nuestro tipo.

¿Cómo crear un objeto en Go?

Tomando el ejemplo de arriba, podemos crear un objeto de la siguiente forma:

Podemos imprimirlo, se verá esto:

Instanciar un objeto

Podemos instanciar o crear un objeto de 2 maneras. En la primera, mandamos en orden los valores del objeto. Así:

Pero no recomiendo esa forma, ya que no es expresiva y si el orden de los valores cambia dentro del tipo, tendremos que cambiar también las llamadas a la creación del mismo.

Recomiendo esto:

Ahí definimos cuál variable estamos pasando. Además, el orden no importa (en este caso las mandé en el mismo orden pero fue coincidencia)

Métodos dentro de una clase

También podemos declarar métodos o funciones. Programemos la función ladrar, en donde imprimimos un mensaje y accedemos a algunas propiedades de nuestra mascota.

Vemos claramente que no definimos la función dentro de nuestro tipo, sino que la adjuntamos a un apuntador del mismo. Si yo ejecuto el programa, sale esto:

Métodos de clases en Go

Métodos de clases en Go

 

Modificando y obteniendo propiedades

Podemos modificarlas directamente, como se ve a continuación:

Modificar variable en objeto

Modificar variable en objeto

Igualmente obtenerlas:

Con este resultado:

Obtener propiedad de un objeto

Obtener propiedad de un objeto

Pero no es recomendado obtenerlas así. Eso sería dejar nuestras variables públicas, y generaría  (en la mayoría de los casos) muchos errores.

Setters y getters

Podemos crear getters y setters para obtener y establecer propiedades. Veamos por ejemplo el setter y getter de edad.

Para establecer su edad definimos otra función, igualmente para obtenerla.

El resultado al ejecutarlo sigue siendo el mismo, pero ahora ya hemos implementado getters y setters.

Setter en Go

Setter en Go

Objetos dentro de otras clases

Para terminar el post y no hacerlo muy largo, veamos que podemos tener objetos dentro de objetos.

Pongamos a nuestra mascota un dueño. Un dueño es del tipo Persona.

Al ejecutar, el resultado es este:

Objetos dentro de objetos en Go

Objetos dentro de objetos en Go

Con eso terminamos por hoy.

Creando un buscador de artículos con API de Wikipedia y VueJS

Introducción

Ya expliqué cómo consumir la API de Wikipedia por separado. Hoy veremos un ejemplo de un buscador de Wikipedia.

Lo he hecho con mi framework Javascript favorito hasta el momento: VueJS. Encima de VueJS corre VuetifyJS que simplemente proporciona componentes con el estilo Material Design.

Vamos allá.

Probar app terminada

Ya ni sé por qué le decimos a cualquier cosa “app” pero no encuentro otro nombre para nombrar las cosas. En fin, si quieres ver el proyecto terminado aquí dejo un link a codepen. Igualmente lo dejo embebido:

See the Pen Wikipedia viewer by Luis Cabrera Benito (@parzibyte) on CodePen.

Construyendo un buscador de Wikipedia

Bueno, vamos a explicar cosa por cosa.

Herramientas utilizadas

  • VueJS, un framework de Javascript
  • API de Wikipedia
  • VuetifyJS, estilo Material design sobre VueJS
  • Lodash, sólo para no tener que escribir mi propio debounce
  • Material Icons, para los iconos

Interfaz

Quise hacerla como el buscador de Google pero al final salió otra cosa y, como me gustó, así la dejé. Puse una imagen de Wikipedia, abajo un campo para introducir texto, luego un botón para obtener un artículo aleatorio y finalmente un seleccionador de idiomas.

Traducciones

Si en la app cambiamos el idioma, veremos que la leyenda de Artículo aleatorio y Comienza a escribir cambian. Así se ve en español:

Visor de Wikipedia en español

Visor de Wikipedia en español

Así en inglés:

Visor de Wikipedia en inglés

Visor de Wikipedia en inglés

Lo mismo para otros idiomas. Cabe aclarar que saqué todo del traductor de Google jaja, así que puede que haya errores. En fin, eso no importa; lo que importa es cómo se cambia el texto.

Para ello, tenemos que remontarnos a los idiomas soportados. Puse estos:

Y entonces, en los valores calculados de la app puse estos métodos:

Por el momento fijémonos en los dos últimos. Dependiendo del idioma seleccionado, regresan un valor. Es decir, es un objeto y accedemos a una de sus propiedades. Dicha propiedad puede ser “es”, “en”, etcétera.

Lo mismo aplica para la URL de búsqueda. Podemos ver que utilizamos el poder de las backticks en Javascript para regresar una URL dependiendo del idioma seleccionado.

¿y en qué momento seleccionamos un idioma por defecto? en el método mounted del ciclo de vida de nuestra aplicación:

Seleccionamos el primer idioma que encontremos, ya después el usuario podrá elegir otro, y cuando eso pase, todo se refrescará automáticamente gracias a la reactividad de VueJS.

Búsqueda

La parte más importante de la aplicación. Detecta cuando empezamos a escribir y busca.

Detectar cambios

Con watch, vigilamos cuando cambie “busqueda”. En caso de que cambie y de que tenga un valor que no sea falso, buscaremos. Como vemos llamamos al método buscar.

Debounce

Ok. Una vez que detectamos los cambios, hacemos un debounce. Un debounce es algo así (al menos en js) como llamar a una función una única vez, en el intervalo dado. Para no complicarme las cosas utilicé lodash.

Explicando de mejor manera, si no hiciéramos un debounce, la función se llamaría el número de veces que el usuario escribiera. Si quería buscar “hola”, la función se llamaría con “h”, luego con “ho”, y así, 4 veces.

Al usuario no le importaba buscar “h” ni “ho” o “hol”, sino “hola”, pero sin querer llamó a la función 4 veces. Esto cargaría al servidor. Para ello, hacemos que sin importar cuántas veces se llame la función, sólo se llame después de medio segundo (500 milisegundos).

De esta manera, el usuario podrá buscar y su búsqueda regresará en 500 milisegundos; cosa que ni notará.

Buscar

Cuando buscamos, simplemente llamamos a la url de la api y le concatenamos el valor de la búsqueda. Esperamos a que hayan resultados y primeramente eliminamos las etiquetas HTML, luego hacemos un JSON.parse para decodificar la cadena en formato JSON y finalmente establecemos los resultados de la búsqueda a respuesta.query.search.

VueJS detectará el cambio y entonces mostrará la lista de resultados:

Resultados de la búsqueda | Consumiendo API de wikipedia

Resultados de la búsqueda | Consumiendo API de wikipedia

Cuando hacemos click, el objeto clickeado pasa a ser el valor de la variable resultadoSeleccionado.

Resultados

Como dijimos arriba, el resultado pasa a ser parte de nuestra app. Y para ello lo mostramos en la vista:

Utilizamos v-if para ocultarlo en caso de que no seleccionen nada. Mostramos el título y el snippet. También un botón que en realidad es un link, y que dirige al enlace que tenga la variable rutaArticulo. Esta variable ya fue vista anteriormente, allá arriba.

Artículo aleatorio

Igualmente sólo es un link-botón definido así:

Cuyo href es la variable rutaArticuloAleatorio que ya vimos más arriba.

Otras cosas

Sólo hace falta mencionar la equis que aparece en la barra de búsqueda, cuya función es limpiar el campo de texto. Viene por defecto en el componente, así que no hace falta explicarla.

Conclusión

Espero que haya explicado todo y que no queden dudas. De todos modos, puedes dejar un comentario si algo no quedó claro. Aquí dejo el código fuente, pues es la mejor manera de estudiar el funcionamiento. Nos vemos luego.

Backticks o plantillas de cadena en Javascript

Introducción

Javascript es un lenguaje que evoluciona rápidamente. Hace algunos años se introdujeron las backticks o template strings. Permiten concatenar y trabajar con cadenas de una mejor y sencilla manera.

Plantillas de cadena

Concatenar

¿Qué pasaba si queríamos un texto largo, legible en el código? podíamos hacer algo así:

En cambio, con las backticks podemos hacer esto:

¿Fabuloso, no?

Expresiones

Como vimos, con ${} podemos acceder a variables. Pero no es acceder a variables lo único que podemos hacer; de hecho podemos poner una expresión como cualquier otra.

Veamos por ejemplo cómo imprimir una tabla de multiplicar. Normalmente sería así:

Con resultados:

Tabla de multiplicar con ES5

Tabla de multiplicar con ES5

En cambio, con las template strings haríamos algo así:

El resultado sería el mismo:

Tabla de multiplicar con ES6

Tabla de multiplicar con ES6 

Comillas, saltos de línea y tabulaciones

Podemos escapar cualquier tipo de comillas. Los saltos de línea los ponemos incluyendo el salto de línea directamente en la plantilla, al igual que las tabulaciones. Aquí un ejemplo:

Con eso podemos poner mucho texto sin preocuparnos por escaparlo. El resultado es este:

Sin necesidad de escapar texto, tabulaciones, comillas o saltos de línea

Sin necesidad de escapar texto, tabulaciones, comillas o saltos de línea

Funciones

Para terminar de explicar, veremos que también podemos llamar a funciones, pasar parámetros y todo eso. De hecho, dentro de una función también usamos las backticks.

Al ejecutar el código, este es el resultado:

Funciones llamadas dentro de plantillas de texto

Funciones llamadas dentro de plantillas de texto

Conclusión

Recordemos que no todos los navegadores lo soportan, así que es mejor investigar antes de implementar. Por otro lado, podemos utilizar un compilador como Babel que convertiría las template strings en cadenas simples, concatenadas, respetando saltos de línea, llamadas a funciones y todo eso.

BabelJS para transformar backticks. A la derecha texto transformado.

BabelJS para transformar backticks. A la derecha texto transformado.

En este caso lo hice directamente desde el navegador, pero ya hay muchas herramientas que permiten compilarlo automáticamente.