enero 2018

Funcionamiento de angular.copy

Introducción

angular.copy es una función que trae el framework AngularJS. Funciona para, como su nombre lo indica, copiar variables.

Cada que utilizamos angular.copy, ésta función devuelve una nueva copia exacta del objeto que le pasamos, pero sin mantener la referencia en el objeto original.

Así, aunque esta nueva copia sufra cambios, el original no se verá afectado. Y lo mismo pasa si el original sufre cambios

Demostración sin angular.copy

Para explicar mejor el funcionamiento, hagamos un pequeño ejemplo que guarde el nombre y la edad de las mascotas en un arreglo. Y luego, que lo dibuje en una tabla.

Como se puede ver, la primera mascota se guarda correctamente. Pero al querer guardar la segunda, o escribir en un input, todas las de la tabla sufren cambios. Esto es debido a que angular mantiene vigilados a los objetos, y como la referencia es la misma entonces actualiza a todos.

Justo en estos casos es cuando copy viene al rescate.

Demostración con angular.copy

Ahora probemos este, en donde sólo modificamos la línea en donde hacemos el push. En este caso, agregamos la copia del elemento al arreglo.

En conclusión, es bueno utilizar esta función si no queremos que los objetos sean los mismos y al actualizar uno se actualicen todos.

Instalar y configurar FileZilla Server [Servidor FTP] versión 0.9.60.2 en Windows

Introducción

Hoy necesitaba respaldar algunos ficheros de una computadora que tenía que formatear. Entré con un live cd y todo bien, pero para copiar todos esos archivos tenía que sacar el disco duro, usar una memoria usb, o algo parecido.

Así que pensé en una solución más “limpia” y confiable, sin mover nada y sin depender del sistema operativo. Por lo que decidí usar FTP.

Afortunadamente el cd vivo que utilicé ya tenía un cliente FTP, pero ahora lo que importaba era instalar un servidor FTP en la computadora en donde guardaría el respaldo. Buscando, encontré FileZilla. Y por eso es que escribo este tutorial.

Descargando

Vamos a la página https://filezilla-project.org/download.php?type=server y hacemos click en Download FileZilla Server. Esperamos a que se termine la descarga y guardamos en un lugar fácil de recordar

Instalando

Ahora ejecutamos como administrador el fichero que descargamos. Primero, aceptamos la licencia

 

Aquí seleccionamos los componentes. Por defecto se instala el servicio; es decir, el servidor propiamente dicho. La interfaz de administración, y los accesos directos para abrir el programa. También podemos instalar el código fuente, pero no es necesario

 

En este apartado se configura la ruta de instalación. Recomiendo no tocarla y dejarla tal y como está

 

Ahora vamos a elegir cómo debería ser iniciado. Lo recomendable es instalarlo como un servicio de Windows (para que inicie junto con el sistema y para que Windows se encargue del servicio).

Abajo nos pide el puerto que será utilizado para administrar el servidor. Ojo: este no es el puerto que usarán los clientes para conectarse, sino nosotros mismos para administrar el servidor. Recomiendo dejarlo como está, y si lo cambiamos hay que recordar el puerto elegido.

Aquí igualmente dejamos los ajustes como están. Por defecto iniciará la interfaz del servidor cuando el usuario inicie sesión

 

 

Esperamos a que se instale…

 

 

Una vez que termine, lo cerramos. Y se iniciará la interfaz. Con esto hemos terminado la instalación.

Configuración del servidor

Muy bien, nuestro servidor ya está instalado y esperando clientes. Pero falta configurarlo.

La interfaz nos mostrará una ventana para ingresar los datos de acceso para administrar el servidor.

Por defecto es en localhost, en el puerto que elegimos anteriormente. Podemos, si queremos, establecer una contraseña.

También somos capaces de marcar “Always connect to this server” para que no nos vuelva a aparecer esa ventana y tome los ajustes que dejemos la primera vez.

Como sea, una vez que hayamos puesto los ajustes hacemos click en Connect.

Usuarios

Comencemos con los usuarios, pues sin usuarios no hay nada que hacer. Hacemos click en el icono de un usuario.

Saldrá lo siguiente:

Hacemos click en Add y vamos a crear nuestro primer usuario.

El usuario puede ser cualquiera, aunque no recomiendo poner espacios o caracteres extraños. Una vez hecho eso, hacemos click en OK.

  1. Los ajustes de la cuenta. Aquí podemos establecer una contraseña para el usuario. Si no marcamos la casilla, no hay problema. Aunque recomiendo siempre establecer una contraseña segura.
  2. Límites de conexiones. Podemos limitar el número de conexiones que ese usuario hace.
  3. Descripción. Una pequeña descripción del usuario. Advertencias, recordatorios, etcétera.
  4. Administración del usuario. Eliminarlo, cambiar el nombre, copiarlo o agregar uno nuevo.

En este caso a mi usuario lo configuré con una contraseña, y no le puse límites. Por lo que queda así:

Con esto ya configuramos un usuario. Podemos configurar los que deseemos. En el siguiente apartado veremos cómo dar permiso a estos usuarios para que puedan acceder a determinadas carpetas y, dentro de ellas, manejar permiso para leer y escribir.

Nota: no cierres la ventana de configuración

Carpetas compartidas

Un servidor FTP se compone de 2 cosas: usuarios y carpetas o folders. Si no, no sirve de nada. Ahora vamos a configurar las carpetas.

En la configuración del usuario ahora vamos a Shared folders

Ahí veremos lo siguiente, en donde agregaremos una nueva carpeta para que sea accedida por FTP.

Se abrirá una ventana para seleccionar la carpeta. En mi caso compartiré “Documentos” para ejemplificar. Pero podemos compartir cualquiera.

Ahora vamos a configurar los permisos:

  1. Podemos agregar otros directorios, eliminarlos o renombrarlos.
  2. Permisos de archivos. Read es leer, es decir, ver los ficheros. Write es tanto crear nuevos archivos como editarlos y guardar cambios. Finalmente, delete es eliminar los archivos. Cuidado con este último ajuste, pues los archivos se eliminarán permanentemente.
  3. Permisos de directorios. Lo mismo que los ficheros, sólo que Read ahora es List. La opción de subdirs es para que esos cambios apliquen a los directorios o carpetas dentro de esa carpeta. Si deshabilitamos esto, el usuario no podrá entrar a las carpetas; sólo podrá ver lo que hay en la carpeta raíz que estamos compartiendo.
  4. Permisos de usuarios, que ya vimos más arriba.

En este caso quiero que “luis” sea un usuario administrador, excepto por una cosa: que no pueda eliminar. Así que marcaré todo excepto dicha opción. La configuración final queda así:

Límites de velocidad

Pasando a la tercera opción, speed limits, podemos configurar los límites de velocidad; tanto de subida como de bajada. Esto lo explicaré en otro tutorial

Filtros de IP

Aquí, en la cuarta opción, podemos bloquear ips. Así, aunque el usuario exista y tenga credenciales correctas, no podrá conectarse. Lo explicaré más tarde.

Hola FTP

Ya configuramos nuestro servidor, ahora vamos a cerrar la ventana de administración. No hay que preocuparnos, el servidor ya está activo y escuchando.

El servidor aceptará conexiones FTP, no importa de cuál sistema operativo (mientras el cliente esté en nuestra red, claro está). Así que podemos conectarnos desde Linux, Mac OS o Windows. En este caso usaré Windows, con el cliente FileZilla client.

Lo abriré y así debe verse:

Como se puede observar, me estoy conectando a localhost o 127.0.0.1. En el usuario puse el usuario que configuré antes, en la contraseña igual.

Y finalmente el puerto… como dije hace un momento, el puerto que mencionamos arriba es para administrar el servidor. Pero recordemos que el puerto para FTP es el 21, por lo que pondremos ese. Una vez puesto esto, hacemos click en Conexión rápida.

En el log podemos ver que se ha conectado correctamente. Y al listar los directorios vemos esto:

Ese es el contenido de mi carpeta Documentos. Ahora puedo hacer click derecho y crear un directorio:

Al hacer click en Aceptar la carpeta es creada. Y si veo los directorios de nuevo:

Ahora recordemos que no dimos permisos de eliminar. Por lo que para probar, intentaré eliminar la carpeta que hice:

Y en el log saldrá esto, indicando que no tengo permiso de hacerlo:

Finalmente quiero demostrar que si desde el explorador de Windows quisiera ver mis documentos, la carpeta que creamos desde filezilla estará ahí:

Conclusión

¿Y para qué sirve todo esto? ¿No puedo administrar mis documentos simplemente desde el explorador de Windows? Claro que sí, pero este fue un ejemplo en donde nos conectamos a localhost. Si después, desde otra pc queremos conectarnos al servidor, simplemente ponemos la ip del servidor en lugar de 127.0.0.1.

Es decir, puede que la ip de tu máquina sea 192.168.1.67. Entonces en la pc que se conectará, pones esa dirección en lugar de 127.0.0.1. Los puertos y usuarios no cambian.

Nota: para esto debes permitir a FileZilla server pasar por el firewall de Windows.

¿Y si quiero acceder desde internet? también se puede, sólo tienes que abrir los puertos de tu módem. De igual manera, sólo cambia 127.0.0.1 por tu ip pública, que puedes encontrar por ejemplo aquí. Si tienes dudas, llama a tu proveedor de servicios de internet.

¿Para qué usar FTP, si puedo usar la red de Windows? si tenemos una pc que no tiene Windows, podemos tardar un poco configurando la red. Así que mejor usamos un cliente FTP. Además, (creo) existen clientes FTP incluso para móviles, por lo que podremos, por ejemplo, subir y bajar archivos desde Android o iOS.

Eso es todo por hoy.

Componentes: Módulo USB a TTL y Teclado matricial en Fritzing

Introducción

Fritzing funciona para diseñar circuitos. Es un programa open source, lo que permite que tenga una comunidad.

Por defecto, Fritzing no trae el componente del USB a TTL ni el teclado matricial; pero gracias a dicha comunidad podemos conseguir uno que alguien más hizo.

Nota: puedes instalar fritzing siguiendo este tutorial

Componentes

Los componentes que veremos son el módulo usb a ttl y el componente de teclado matricial. Son los de las imágenes:

Descargar

USB a TTL

El componente está alojado en GitHub, junto con muchos otros gracias a adafruit. Lo único que tenemos que hacer es ir a esta página:

https://github.com/adafruit/Fritzing-Library/blob/master/parts/USB%20TTL%20Serial%20Cable.fzpz

Una vez ahí, simplemente hacemos click en Download:

Guardamos el archivo en un lugar accesible y listo, ya lo hemos descargado.

Teclado matricial

Igualmente este componente está alojado en GitHub. Para descargarlo seguimos este link. El proceso para descargar es el mismo que el anterior.

 

Instalar en Fritzing

Usb a ttl

Abrimos Fritzing normalmente y esperamos a que cargue. Después, en el menú seleccionamos Archivo > Abrir, como se ve en la imagen:

Buscamos el componente que descargamos anteriormente y hacemos click en Abrir:

Esperamos un instante de tiempo y podremos ver que a la derecha, en componentes > Mine ha aparecido el nuevo módulo:

Ahora ya podemos usarlo en cualquier circuito. Así se ve:

Teclado matricial

Lo mismo que hicimos para el módulo usb a ttl. Lo abrimos y se verá en los componentes:

Cuando lo agregamos a un circuito, luce así:

Guardando cambios

Independientemente de que guardemos o no el circuito, tenemos que guardar el componente que hemos utilizado. Al salir de Fritzing, se nos mostrarán 2 alertas preguntando si queremos guardar cambios.

Tenemos que hacer click en “Yes” y “Guardar” respectivamente:

Y con eso hemos agregado ambos componentes que no vienen incluidos por defecto.

API de binbox.io en Javascript

Introducción

Recientemente hice una entrada sobre la api de binbox.io en Python y dije que escribiría un poco sobre cómo consumirla pero ahora con Javascript nativo, el cual se puede ejecutar en el navegador.

Incluyendo scripts

Esto es muy, muy simple. Creamos un documento HTML nuevo e incluimos el script de binbox.io al final. Dicho script se puede encontrar en esta ruta. Esto proporcionará un objeto global el cual contiene una clase que podemos instanciar.


Con ese código ya podemos comenzar a trabajar.

Nota: si cargamos estos scripts desde un servidor con https habrá errores, pues no podemos cargar http desde https. Esto es debido a que el script de binbox carga dentro de sí mismo a jQuery, pero desde http. Entonces aunque carguemos el script (de Binbox) con https, éste cargará a otro (jQuery) sin http provocando un error.

En resumen, no uses estos ejemplos en un servidor con https.

Instanciando con nuestro nombre de usuario

Ya hemos incluido el script, ahora es momento de usar las clases que nos brinda. Para poder acortar y crear pastes necesitamos instanciar la clase API del objeto Binbox. Como parámetro, el método constructor requiere una url completa de nuestro usuario para la api.

La url es algo así: http://tu_usuario.binbox.io/

En donde obviamente tenemos que cambiar tu_usuario por el nombre de usuario real.

Acortando un link

Para acortar un enlace o link podemos, una vez instanciada la clase, llamar al método create. Dicho método tiene que ser llamado con dos argumentos.

El primero, un objeto con dos propiedades: title y url, lo que sería el título y el enlace, respectivamente.

El segundo, una función que será llamada una vez que el enlace sea acortado; es decir, una función callback.

Si no entiendes mucho sobre las funciones anónimas o los callbacks, aquí te dejo una breve introducción a ello.

Sabiendo eso, hagamos un ejemplo en donde se acorte un link y el resultado se ponga en un párrafo.

Puedes probar el ejemplo aquí: Abrir plnkr

Creando un paste

Crear un paste es igual de sencillo que crear un link. En este caso sólo cambia la propiedad “url” por “text”. Así:


Los resultados aquí: Click para abrir la vista en plnkr.co

Interfaz gráfica

Una vez visto esto, se me ocurrió hacer una pequeña aplicación que permite crear pastes y links acortados. Simple, pero funciona. Como lo expliqué arriba, hay un error con binbox y https. Así que no puedo embeber, pero sí puedo poner el link: ver demostración.

Algunas capturas

Código

Aquí el código:

Y eso es todo por hoy.

Api de binbox.io en Python

Introducción

Binbox es un servicio que permite acortar links y crear pastes, ambas cosas generan dinero para el usuario final. Desde hace mucho he querido usar su API pero no entendía nada de REST, ni de las peticiones POST, GET, etcétera.

Así que lo olvidé por unos meses o años, y ayer recordé que nunca pude hacerlo. Lo intenté de nuevo y ahora sí pude hacerlo. Además, lo implementé en Python, ya que hacerlo en Javascript es muy fácil (ellos proveen la librería y las capas de abstracción superiores).

Creando pastes

Lo que me pareció más difícil es que (y no sé la razón) los datos se deben encriptar usando la librería sjcl. Eso es fácil si estás en javascript, ¿pero y en Python? así que me puse a investigar y al final encontré una que tenía un error, el cual solucioné aquí.

Una vez teniendo la librería, tuve que decodificar los datos. Ya que la librería los devolvía con una b al inicio. Es decir, eran bytes. Por lo que regresaba algo como b’hola mundo’ en lugar de un simple ‘hola mundo’. Para solucionarlo, decodifiqué cada cosa codificada: el vector, el texto cifrado y la sal

        texto_encriptado = SJCL().encrypt(texto, sal)
        texto_encriptado['ct'] = texto_encriptado['ct'].decode('utf-8')
        texto_encriptado['iv'] = texto_encriptado['iv'].decode('utf-8')
        texto_encriptado['salt'] = texto_encriptado['salt'].decode('utf-8')

Una vez hecho eso, me enfrenté a que el objeto JSON no debería tener espacios en blanco, y debía usar comillas dobles ” en lugar de comillas simples ‘. Para ello modifiqué los separadores y los mandé como argumento a json.dumps, quedando así:

texto_encriptado_como_json = json.dumps(texto_encriptado, separators=(',', ':'))

Ahora, para terminar, tenía que codificar los datos en base64:

texto_como_json_codificado = b64encode(texto_encriptado_como_json.encode('utf-8'))

Debido a que base64 devuelve un objeto codificado, tuve que, de nuevo, decodificarlo para remover la b al inicio:

texto_base64_decodificado = texto_como_json_codificado.decode('utf-8')

Y ahora sí pude hacer la petición:

        datos = {
            'data': texto_base64_decodificado,
            'title': titulo,
        }
        peticion = requests.post(self.url_api, data = datos)

Creando links

Para crear links no encontré ningún problema, ya que los datos se mandan en texto plano.

Código

Finalmente para ahorrar dolores de cabeza a alguien que quiera usar la api desde Python, hice una pequeña clase que puede crear pastes y links acortados.

Es fácil de usar. Simplemente creas una instancia con tu nombre de usuario. Luego, puedes llamar a crear_paste o acortar_link. Ambos métodos devolverán el link del paste junto con la clave de acceso y el link acortado respectivamente.

Implementación

Para probar el código, podemos usar esto:

""" Ejemplos """
binbox = BB("parzibyte")
link_paste = binbox.crear_paste("Paste desde parzibyte.me!", "Hola. Este es un paste que fue creado en parzibyte.me/blog :)")
link_acortado = binbox.acortar_link("https://parzibyte.me/", "Link acortado desde parzibyte.me")
print("El link del paste: {}".format(link_paste))
print("El link acortado: {}".format(link_acortado))

Aquí la captura:

Si visito el link del paste, efectivamente sale el texto que mandé desde Python:

Con el link acortado pasa lo mismo:

Y así fue como pude implementar la api de binbox.io en Python, sin muchas complicaciones más que las que ofrece la librería sjcl.

Implementación de SJCL (Stanford Javascript Crypto Library) en Python

Introducción

La librería SJCL es una librería para encriptar texto en Javascript. Fue creada por algunos estudiantes de la universidad de Stanford.

Funciona para, como su nombre lo dice, encriptar texto y datos en javascript y también para desencriptar los mismos. Es decir, encripta y desencripta usando una contraseña.

Ayer estaba implementando una API en Python, pero requería que los datos fueran encriptados con dicha librería. Así que buscando encontré una implementación que, aunque tenía algunos errores, los pude arreglar

Nota

Probé esto en Python versión 3, no sé cómo funcione en las versiones anteriores.

Implementación

La librería, como lo mencioné, ya existe y puede verse en este sitio, pero como se pueden dar cuenta está un poco desatendida. De todos modos la instalé usando:

pip install sjcl

Intenté probar y salía lo siguiente:

Así que me puse a investigar (la solución era muy, muy sencilla, pero cuesta encontrarla) un poco, y analicé la salida del error. Decía que la excepción se lanzó en la línea 170 del archivo sjcl.py. Fui al repositorio de GitHub y busqué la línea 170:

ciphertext = cipher.encrypt(plaintext)

Investigando me di cuenta de que el error esperaba datos de tipo byte, no strings simples. Y encontré una respuesta en stackoverflow que sugería codificar los datos. Así que descargué el archivo (ventajas del código abierto), lo guardé en un lugar accesible, desinstalé usando pip uninstall sjcl (para que no hubiera confusiones al hacer el import), y cambié la línea 170, así:

ciphertext = cipher.encrypt(plaintext.encode("utf-8"))

Guardé los cambios, y probé:

Ahora sí funciona. Y para desencriptar…

Por lo que ahora sí ya podemos encriptar y desencriptar a gusto.

Código de ejemplo

Aquí dejo el código que usé para probar:

Eso es todo por hoy. Investigué la implementación porque la API de binbox.io necesita que los datos vayan codificados de esta manera. Pronto escribiré una entrada sobre ello.

Reiniciar contador de auto incremento en MySQL

Introducción

En MySQL podemos establecer una columna como autoincremento, es decir, que tenga una columna cuyo valor vaya aumentando en 1 automáticamente cada que ingresa un nuevo dato. Esto está genial, porque podemos utilizar esa columna como un identificador.

Todo muy bien hasta aquí, hasta que por alguna u otra razón necesitamos reiniciar ese contador. Ya que por ejemplo puede que tengamos algunos registros eliminados y entonces habrá “huecos” en nuestra tabla.

También puede darse el caso de que hayamos vaciado nuestra tabla y queremos que el contador comience desde 1.

Para ello es que escribo hoy esa entrada, para reiniciar y establecer al valor mínimo permitido el autoincremento.

Comando y explicación

Si no quieres ver el tutorial completo, la consulta es la siguiente:

No te preocupes, el contador se pondrá al valor más bajo que tenga tu tabla. Por ejemplo, supongamos que tienes 10 registros de 100 que había (eliminaste 90 aleatoriamente) por lo que la secuencia del contador puede ir así:

1, 20, 21, 26, 31, 35, 36, 37, 38, 41

Tu autoincremento estará en 100, aunque en realidad el valor más grande que tienes es 41. Si insertas un nuevo registro, su valor será 101, no 42.

Lo que logras con esta consulta es resetear el contador al valor más bajo, que en este caso es 41. Y luego, al insertar el siguiente registro, su valor será 42.

Si quieres ver un ejemplo continúa leyendo…

Ejemplo

Para este ejemplo crearé una tabla de prueba llamada “nombres” que sólo tendrá dos columnas: un auto incremento y el nombre. La definición queda así:

Ahora voy a insertar algunos valores….

Hasta ahora, los datos que tengo son estos:

Voy a eliminar los últimos 2 nombres:

Y ahora los datos que existen son los siguientes:

Aquí viene la parte crucial de este experimento. Si inserto un nuevo nombre, su rowid será el 6, aunque yo esperaba que fuera el 4. Vamos a insertarlo entonces:

Pero al ver los datos, vemos que efectivamente el id que tomó es el 6:

Ahora eliminaré de nuevo ese nombre, es decir, el que tiene el rowid 6:

Y no insertaré un nuevo nombre justo ahora, sino que reiniciaré el contador:

Ahora sí insertaré un nuevo nombre, cuyo rowid espero que sea 4:

Si selecciono los datos, veré que efectivamente el rowid es 4. Y eso comprueba que este método funciona perfectamente

Eso es todo por hoy

Gestionando sitio o blog con API de WordPress y Python

Introducción

WordPress tiene una API que podemos consumir para gestionar completamente un blog. Todas las peticiones se hacen a un mismo archivo PHP. Pero hoy no hablaremos de PHP, sino de Python y una librería que nos va a facilitar el trabajo.

Me gustaría recalcar que esta api sirve tanto para sitios que están en wordpress.com (por ejemplo, algo como misitio.wordpress.com) y para sitios que no están en wordpress.com pero usan wordpress, por ejemplo, este sitio que, aunque está alojado en un servidor distinto, utiliza wordpress.

Comprobación rápida

Para comprobar si nuestro sitio puede ser manejado con la api, vamos a comprobar si existe un archivo llamado xmlrpc.php.

Para ello iremos a la dirección de nuestro sitio y adjuntaremos /xmlrpc.php

En este caso probaré con un blog gratuito que he creado en wordpress.com, pero esto aplica para cualquier sitio que tenga wordpress instalado.

En mi caso, la ruta normal es parzibyte.wordpress.com pero la del archivo es parzibyte.wordpress.com/xmlrpc.php

Navegando, tenemos que encontrar algo así:

Si es que sale así, entonces podemos comenzar a trabajar. El mensaje que sale indica que sólo se aceptan peticiones POST, y en este caso estamos haciendo una de tipo GET. Muy bien, ahora podemos proseguir.

Requisitos

Los requisitos no son muchos, ni son engorrosos. Además, si antes hemos programado con Python esto será pan comido.

  • Python superior a la versión 3
  • Pip o easy install

Tip: Puedes seguir este tutorial fácil para ver cómo instalar dichos requisitos 😉

Instalando python-wordpress-xmlrpc

Una vez que ya tenemos PIP instalado, en una terminal vamos a escribir:

pip install python-wordpress-xmlrpc

Esperaremos a que se descargue y listo

Puedes consultar la documentación oficial si quieres ver alternativas.

Hola mundo

Es hora de crear nuestro hola mundo. Para ello, abriremos nuestro editor de código favorito, crearemos un archivo nuevo y escribiremos lo siguiente:

Guardamos, y en la terminal escribimos python nombre_del_archivo.py

Obviamente vamos a remplazar los datos que aparecen ahí por los verdaderos. Si ponemos el usuario o la contraseña equivocada, aparecerá algo así:

En cambio, si todo va bien, algo así se verá. En este caso puede que nos parezca redundante, pero no es así, ya que el nombre de usuario ha sido obtenido directamente de wordpress

Listando posts

Una vez que ya nos pudimos autenticar, es hora de trabajar como se debe. Comenzaremos leyendo los posts que tenemos en nuestro sitio. Para ello, veamos el siguiente código:

En él, simplemente obtenemos las entradas llamando al método GetPosts(). Se supone que si nos autenticamos correctamente, debe mostrar las entradas que tenemos. Por el momento sólo muestra las primeras 10 entradas y el título de ellas.

Cabe mencionar que muestra tanto las que son borradores y las que están publicadas.

Al ejecutar el script se debe ver algo así:

Y si voy al verdadero sitio, veré esto:

Por lo que se comprueba que los datos de la API son reales.

Listando más propiedades de los posts

Hasta ahora sólo mostramos el título (que es lo que se imprime por defecto al imprimir el objeto), pero ciertamente las entradas tienen otras propiedades como id, estado, contenido, etcétera. Así que ahora vamos a imprimir 10 posts (al igual que hace un momento) pero también imprimiremos las propiedades más importantes.

Como sólo tengo 1 post, sólo se imprimirá uno. Pero el punto es demostrar las propiedades

El código es el siguiente:


Lo ejecutamos y debe aparecer algo así:

En este caso es la primera entrada y la única que existe. Tiene un id, contenido, título, y estado. Por cierto, no sólo existen esas propiedades. Podemos usar todas las que se muestran en esta lista de la documentación oficial.

Creando un post

Crear o insertar una nueva entrada o post es igual de sencillo que todo lo que hemos hecho hasta ahora. Vamos a crear uno que diga Hola mundo. Por cierto, todos los posts que publiquemos desde la api serán marcados como borradores (por lo que no serán publicados) pero tenemos un pequeño truco detallado más abajo para publicarlos instantáneamente.

Muy bien, para insertar podemos usar lo siguiente:

Y al ejecutarlo, vemos esto:

Si vamos al sitio de wordpress, vemos lo siguiente:

Maravilloso, tiene el título que nosotros pusimos en el script. Y si la abrimos para ver detalles, podemos ver en la url que el id efectivamente es el 17. Y que sí podemos incluir contenido HTML:

La única desventaja es que fue publicada como borrador. Ahora veremos cómo convertir instantáneamente ese borrador en una entrada pública.

Cambiar estado de borrador a entrada publicada

Como dijimos, cuando publicamos con la api, la entrada se queda como borrador. Pues bien, como nos devuelve el id de la entrada podemos obtenerla para editarla, cambiar su estado y guardar cambios. Así:

La entrada fue publicada correctamente:

Incluso se puede visitar aquí

Etiquetas y categorías

Al publicar un post también podemos agregar categorías y etiquetas. Simplemente establecemos la propiedad “term_names” de la nueva entrada. Para las etiquetas usamos post_tag y para las categorías category. Cada clave necesita un arreglo.

El código queda así:


Voy a ejecutar el script:

Podemos ver la entrada aquí, y si observamos bien, veremos que tomó las etiquetas y categorías que le pusimos:

Así es como podemos seguir jugando con toda la api.

Eliminando entrada

Para terminar este CRUD, falta mostrar cómo eliminar. Para ello necesitamos el id. En este caso eliminaré la entrada que dice “Primera entrada del blog”. Listaré todos los posts y veré cuál id tiene:

Es el id 4, con ello puedo llamar a DeletePost y pasarle ese id como argumento. Como medida de seguridad, haré que el sistema pregunte si realmente quiero realizar esa acción y que muestre los detalles del post a eliminar usando el método GetPost.

Así que el código queda así:


Al correrlo y confirmar sale esto:

Si visito la página, veré que el post se ha movido a la papelera. No sé si exista un método para eliminarlo permanentemente, pero con moverlo a la papelera basta. Ya que luego podemos vaciarla en una sola operación.

Script interactivo

Me tomé el tiempo de crear un script interactivo que junta todos estos métodos y permite editar, eliminar, insertar y listar lo básico.

Si no queremos ingresar nuestros datos cada que corramos el script, podemos remplazar los campos que dicen “usuario por defecto” y los otros dos (los de contraseña y sitio).

Si estamos en un sistema  que no es Windows, ponemos el comando que usamos para limpiar la pantalla en lugar de “cls”.

Y bien, aquí el código:

Algunas capturas:

Conclusión

Con este script de python podemos llevar a cabo cualquier operación que podemos hacer a mano. Si buscamos la manera, podremos optimizar esto y hacer que nos ahorre tiempo en nuestra vida cotidiana. Por ejemplo, podemos establecer estilos predeterminados con html, publicarlas de una base de datos, etcétera.

Se puede hacer todo lo que sea imaginable.

 

Imprimir el contenido de un div con HTML y Javascript

Introducción

Siempre vamos a necesitar imprimir en la mayoría de aplicaciones que desarrollemos, independientemente del lenguaje en el que lo hagamos. En este caso veremos cómo imprimir con HTML y Javascript, conservando los estilos y obteniendo una impresión que es exactamente igual a lo que vemos en pantalla.

Precisamente esta mañana tuve que investigar un método fácil, rápido y viable para imprimir contenedores, y aquí traigo los resultados.

Nota: para investigar la mayoría de lo que expongo aquí tomé como referencia la maravillosa respuesta a esta pregunta de StackOverflow

Actualización: he quitado los plunkers y he puesto enlaces directos; ya que que plnkr.co ha estado fallando y los estilos no se estaban cargando; por eso ahora mejor alojo los ejemplos en vivo en mi servidor. Abajo de cada explicación está el link. Sólo te contaba; porque esto no afectará tu experiencia de usuario ni el código expuesto; todo funciona como un encanto.

Función

Aquí pondré la función pero un poco modificada. Primero, eliminé el encabezado, ya que si queremos incluir un encabezado lo ponemos en el mismo div, y si no, no lo incluimos.

En segundo lugar hice que reciba un elemento, no el id de un elemento. Es decir, la función recibe un elemento del DOM (obtenido con document.querySelector o con document.getElementById) en lugar de una cadena.

Así que queda así:

Imprimiendo el hola mundo

Para este ejemplo vamos a crear 2 divs con diferente contenido y sólo imprimiremos uno de ellos. En el script ya puse la función que definimos arriba. Pondré un botón y cuando hagan click en él se imprimirá el contenido de un div.

El código para escuchar al botón es el siguiente:

Mira el ejemplo en acción aquí.

Ya imprimimos el hola mundo, podemos pasar a cosas más avanzadas

Añadiendo estilo al imprimir

El documento, sin estilos, a mi parecer se ve bonito; pero siempre tendremos la necesidad de cambiar alguna u otra cosa. Así que voy a agregar unos estilos sólo para demostrar el concepto. Para ello, le pondré al párrafo un padding de 18 px y un color de fondo color rosa.

Al encabezado le pondré el color azul. El estilo queda así:

Ahora vemos los cambios, pero si intentamos imprimir no se ve ningún estilo. Esto es porque al imprimir se crea un documento nuevo que no lleva los estilos css. Pero para cargarlos, podemos añadir lo siguiente a nuestra función para imprimir:

Nota: esta vez necesitamos modificar la función para imprimir y poner una función en el evento onload de la ventana, para que primero cargue los estilos y luego imprima. Esto no es necesario si tu documento no lleva estilos.

Y ahora sí, si imprimimos veremos algo así:

Si deseas probarlo en vivo haz click aquí.

Ahora sí podemos añadir cualquier estilo, e incluso podemos agregar 2, 3 o infinitas hojas de estilo. Para ello fue que esperamos al window.onload, para que termine de cargar los estilos y luego imprima.

Añadir estilo diferente del documento

Si queremos que nuestro documento, al ser visualizado se vea de una forma pero al ser impreso de otra, podemos manejar dos hojas de estilo. Una para imprimir y otra normal. Para ello voy a crear una hoja de estilos nueva, en donde ahora el encabezado será rojo y el fondo del párrafo verde:

También al imprimir, cambiaremos la función para que ahora cargue una diferente hoja de estilos.

Ahora veamos los resultados. Normalmente, el documento luce así:

Pero al imprimir, se ve así:

Míralo en vivo aquí.

Imprimir diferentes contenedores

Para terminar este tutorial demostraré cómo podemos imprimir diferentes contenedores, incluso aunque no sean divs.

Para ello crearé un párrafo con el id parrafo, y pondré igualmente un botón. Así que el código HTML queda así:

Y para escuchar a los botones:

Podemos probar el código en el siguiente enlace: ejemplo 4 de imprimir con HTML, JS y CSS.

Y así es como podemos jugar con los estilos y los elementos. Por cierto, podemos cambiar el tamaño de la ventana (que por defecto es de 400 x 600)