Alexander A. E.

Script en flask para registrar cada request (para pruebas)

2024-06-22T00:00:00-05:00

Hoy me aventuré por un camino inusual. Mi día comenzó con el objetivo de guardar mis tweets marcados y mis likes en una base de datos. Para lograrlo, necesitaba acceder al API de Twitter usando tweepy. Sin embargo, me encontré con un obstáculo persistente: Twitter requiere una URL de autorización para probar su API, lo cual complicaba mis intentos de configurar ngrok con un pequeño servidor Python debido a problemas de CSRF.

Después de un tiempo de frustración, tuve una idea: "Tengo mi propio dominio, ¿por qué no añadir un subdominio y utilizarlo como URL de autorización?"

Requerimientos

Disponer de un dominio que pueda recibir peticiones
Mostrar todos los requests y sus parámetros en una URL específica (/dashboard)
Mantener la información persistente utilizando SQLite

Script

Con la ayuda de Skynet, obtuve esto:

::python
import sqlite3
from flask import Flask, request, jsonify, render_template_string

app = Flask(__name__)
DATABASE = 'requests_log.db'
MAX_REQUESTS = 1000
DELETE_BATCH_SIZE = 500  # Number of records to delete when exceeding MAX_REQUESTS


def init_db():
    """Initialize the SQLite database with requests table."""
    with sqlite3.connect(DATABASE) as conn:
        cursor = conn.cursor()
        cursor.execute('''CREATE TABLE IF NOT EXISTS requests (
                            id INTEGER PRIMARY KEY AUTOINCREMENT,
                            method TEXT,
                            path TEXT,
                            params TEXT,
                            headers TEXT,
                            body TEXT
                        )''')
        conn.commit()


def log_request(method, path, params, headers, body):
    """Log request details into SQLite database, excluding '/dashboard'."""
    if path != 'dashboard':  # Exclude logging for '/dashboard' endpoint
        with sqlite3.connect(DATABASE) as conn:
            cursor = conn.cursor()
            cursor.execute('INSERT INTO requests (method, path, params, headers, body) VALUES (?, ?, ?, ?, ?)',
                           (method, path, params, headers, body))
            conn.commit()

            # Check the number of requests and delete oldest if exceeds MAX_REQUESTS
            cursor.execute('SELECT COUNT(*) FROM requests')
            count = cursor.fetchone()[0]
            if count > MAX_REQUESTS:
                cursor.execute('DELETE FROM requests WHERE id IN (SELECT id FROM requests ORDER BY id ASC LIMIT ?)',
                               (DELETE_BATCH_SIZE,))
                conn.commit()


# Initialize the database when the app starts
init_db()


@app.route('/', defaults={'path': ''}, methods=['GET', 'POST', 'PUT', 'DELETE'])
@app.route('/<path:path>', methods=['GET', 'POST', 'PUT', 'DELETE'])
def catch_all(path):
    """Route to catch all requests and log them."""
    method = request.method
    params = request.args.to_dict()
    headers = dict(request.headers)
    body = request.data.decode('utf-8')

    log_request(method, path, str(params), str(headers), body)

    return 'Request logged', 200


@app.route('/dashboard', methods=['GET'])
def dashboard():
    """Route to display request logs in a dashboard."""
    with sqlite3.connect(DATABASE) as conn:
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM requests')
        rows = cursor.fetchall()
        requests_list = [
            {'id': row[0], 'method': row[1], 'path': row[2], 'params': row[3], 'headers': row[4], 'body': row[5]} for
            row in rows]

    # HTML template to render the dashboard view
    table_template = """
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Request Log Dashboard</title>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            table, th, td {
                border: 1px solid black;
            }
            th, td {
                padding: 8px;
                text-align: left;
            }
            th {
                background-color: #f2f2f2;
            }
        </style>
      </head>
      <body>
        <h1>Request Log Dashboard</h1>
        <table>
          <tr>
            <th>ID</th>
            <th>Method</th>
            <th>Path</th>
            <th>Params</th>
            <th>Headers</th>
            <th>Body</th>
          </tr>
          {% for request in requests %}
          <tr>
            <td>{{ request.id }}</td>
            <td>{{ request.method }}</td>
            <td>{{ request.path }}</td>
            <td>{{ request.params }}</td>
            <td>{{ request.headers }}</td>
            <td>{{ request.body }}</td>
          </tr>
          {% endfor %}
        </table>
      </body>
    </html>
    """
    return render_template_string(table_template, requests=requests_list)


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

En principio la lógica es muy simple:

Todo request (que nos sea el /dashboard) lo registra en una base de datos sqlite. Teniendo en cuenta que si se excede cierta cantidad de 1000 requests estoy eliminando los 500 más antiguos.
Al consultar el dashboard, me lista los requests con un formato html mínimamente cómodo.

Claro, para correrlo en un servidor tuve que utilizar supervisord, uwsgi y nginx, aunque quizá se pudo realizar con menos.

Mi archivo uwsgi.ini terminó así:

[uwsgi]
webapps = /home/alexander/webapps
app = %(webapps)/params.alexanderae.com
venv = /home/alexander/.pyenv/versions/flask

chdir = %(app)
module = server:app
virtualenv = %(venv)

uwsgi-socket = %(app)/uwsgi.sock
master = true
processes = 2
threads = 2
thread-stacksize = 128
reload-on-rss = 30
harakiri = 10
vacuum = true

logto = /tmp/uwsgi_params.log

Y mi script de supervisor:

[program:server_app]
command=/home/alexander/.pyenv/versions/flask/bin/uwsgi /home/alexander/webapps/params.alexanderae.com/uwsgi.ini
autostart=true
autorestart=true
stderr_logfile=/var/log/flask_app.err.log
stdout_logfile=/var/log/flask_app.out.log
user=alexander

Y con ello parece que pasaré al paso 2, el cual es intentar conectarme a twitter, esperemos y funcione, ya lo iré contando (o tal vez no).

Crear sitemaps de más de 50000 urls en Django

2023-04-21T00:00:00-05:00

Un sitemap es un archivo XML que contiene una lista de URLs de un sitio web. Este archivo ayuda a los motores de búsqueda a indexar y rastrear todas las páginas de un sitio web. Pero si tu sitio web tiene más de 50,000 URLs, es posible que necesites crear múltiples sitemaps para ayudar a los motores de búsqueda a rastrear e indexar todas tus páginas.

Aquí te mostramos cómo puedes organizar tus sitemaps de más de 50,000 URLs para tu sitio web en Django.

Algunos pasos a seguir antes de paginar el sitemap, que nos pueden facilitar el trabajo son:

1. Divide tu sitio web en secciones:

Organiza tu sitio web en secciones lógicas. Por ejemplo, si fuera un website de noticias, podríamos tener:

noticias de última hora
noticias locales
noticias deportivas
etc.

Esto te ayudará a crear sitemaps secundarios más pequeños.

2. Crea un archivo sitemap.xml principal que agrupe a estas secciones ya definidas:

Agrega las URLs de los sitemaps secundarios que vas a crear. Este archivo será el punto de entrada para los motores de búsqueda.

Antes hemos mostrado ejemplos de cómo realizar esto: Cómo implementar sitemaps en Django

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
      <loc>http://www.ejemplo.com/noticias_locales.xml.gz</loc>
   </sitemap>
   <sitemap>
      <loc>http://www.ejemplo.com/noticias_deportivas.xml.gz</loc>
   </sitemap>
   <sitemap>
      <loc>http://www.ejemplo.com/noticias_de_ultima_hora.xml.gz</loc>
   </sitemap>
</sitemapindex>

3. Crea sitemaps secundarios:

Crea los sitemaps secundarios para cada sección de tu sitio web. Cada sitemap secundario debe contener hasta 50,000 URLs.

4. Comprime los sitemaps secundarios (recomendado, opcional):

Comprime los sitemaps secundarios utilizando gzip para reducir su tamaño y aumentar la velocidad de descarga. Esto lo podemos realizar con la configuración del servidor web (Apache o Nginx).

5. Agrega una caché a los sitemaps (recomendado, opcional)

Esto para no realizar el cálculo después de cada visita, ya que no es tan frecuente que se agreguen nuevas páginas a la web (evaluable según cada caso).

Este punto también lo pueden realizar desde apache / nginx para mayor eficiencia. Noten que Django también es capaz de realizar esta tarea.

¿Qué sucede si uno de mis sitemaps, aún así excede las 50000 urls?

Django cuenta con paginación automática para estos casos. Las url's generadas serían del tipo:

http://127.0.0.1:8001/books/sitemap.xml
http://127.0.0.1:8001/books/sitemap.xml?p=2
http://127.0.0.1:8001/books/sitemap.xml?p=3
etc.

Hay que notar que django utiliza el parámetro GET "p" para identificar a cada página y que no crea un índice que las agrupe, por lo que esta tarea quedaría para nosotros.

Ejemplo de código

Aquí adjunto un proyecto en el que se puede revisar el comportamiento de un website con más de un millón de libros en su sitemap: Django books demo

Referencias

Sitemaps en Django (documentación oficial)

Mejora el rendimiento de tu sitio web con Prefetch, Preconnect, Async y Defer

2023-04-11T00:00:00-05:00

Cuando se trata de optimizar el rendimiento de tu sitio web, hay varias técnicas que puedes utilizar para reducir los tiempos de carga y mejorar la experiencia del usuario. Entre estas técnicas se encuentran el uso de prefetch, preconnect, async y defer.

Prefetch

La técnica de prefetch se utiliza para cargar recursos que se necesitarán en el futuro, antes de que el usuario los solicite. Por ejemplo, si tienes una página que muestra una imagen grande después de hacer clic en un botón, puedes utilizar prefetch para cargar la imagen antes de que el usuario haga clic en el botón. De esta manera, cuando el usuario haga clic en el botón, la imagen ya estará cargada y se mostrará inmediatamente.

Para utilizar prefetch, simplemente agrega la siguiente etiqueta <link> a la sección <head> de tu página:

    <link rel="prefetch" href="ruta-del-recurso-a-cargar">

Preconnect

La técnica de preconnect se utiliza para establecer conexiones de red tempranas con recursos externos, como servidores de terceros o CDN, antes de que el navegador los necesite. Esto puede ayudar a reducir los tiempos de respuesta del servidor y mejorar el rendimiento general de la página.

Para utilizar preconnect, simplemente agrega la siguiente etiqueta <link> a la sección <head> de tu página:

    <link rel="preconnect" href="dominio-del-recurso-a-conectar">

Async

La técnica de async se utiliza para cargar y ejecutar scripts de manera asíncrona, lo que significa que el script se cargará en segundo plano mientras la página se sigue cargando y no bloqueará la carga de la página. Esto puede ayudar a mejorar el tiempo de carga de la página.

Para utilizar async, simplemente agrega la siguiente etiqueta <script> a la sección <head> o <body> de tu página:

    <script async src="ruta-del-script-a-cargar"></script>

Defer

La técnica de defer se utiliza para cargar y ejecutar scripts después de que la página haya terminado de cargarse. Esto puede ayudar a mejorar el tiempo de carga de la página, ya que los scripts no bloquearán la carga de la página.

Para utilizar defer, simplemente agrega la siguiente etiqueta <script> a la sección <head> o <body> de tu página:

    <script defer src="ruta-del-script-a-cargar"></script>

Conclusión

El uso de prefetch, preconnect, async y defer son técnicas útiles que pueden ayudarte a mejorar el rendimiento de tu sitio web. Al utilizar estas técnicas, puedes reducir los tiempos de carga, mejorar la experiencia del usuario y mejorar la eficiencia general de tu sitio web.

Referencias

Cómo realizar debug en CSS con una línea de JS

2023-03-09T00:00:00-05:00

Siempre que me toca escribir algo de CSS, tengo a la mano un fragmento de código en JS que me ayuda a encontrar problemas:

Noten que es independiente de cualquier librería JS, es decir, es Vanilla JS. Y su ingreso es mediante la consola de javascript:

Opción 1

::javascript
[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

Opción 2

::javascript
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Los resultados en ambos casos son similares a:

Referencias

Addy Osmani 108 byte CSS Layout Debugger

Actualizar postgresql sin perder información

2022-05-18T00:00:00-05:00

Utilizo EndeavorOS como sistema operativo, y al ser del tipo rolling rellease¹, tengo la costumbre de realizar actualizaciones frecuentes.

En la última actualización, postgresql dió el salto de la versión 13 a la versión 14, y con ello el motor de base de datos dejó de iniciar y mostraba el error:

An old version of the database format was found.
See https://wiki.archlinux.org/index.php/PostgreSQL#Upgrading_PostgreSQL
Failed to start PostgreSQL database server.

La causa del problema fue que existían bases de datos con la versión 13 que requerían migrarse a la versión 14.

Paso Previo

Para realizar la migración, es necesario instalar un paquete que contiene la versión anterior de postgres. En el caso de EndeavorOS, lo incluye en el paquete: "postgresql-old-upgrade"

Durante el proceso que describiré tuve otro problema, me apareció el mensaje:

"El clúster de origen no fue apagado limpiamente."

el cual tiene su equivalente en inglés:

"The source cluster was not shut down cleanly. Failure, exiting"

y la solución fue iniciar el motor de base de datos antiguo (los binarios de postgresql-old-upgrade).

export PGDATA=/var/lib/postgres/data;
/opt/pgsql-13/bin/postgres

Una vez iniciado, esperamos a que los procesos pendientes acaben y lo detenemos. Con ello, podemos realizar la migración propiamente.

Solución

Movemos la base de datos a un nuevo directorio e inicializamos la base de datos con la nueva versión:

sudo mv /var/lib/postgres/data /var/lib/postgres/olddata
sudo mkdir /var/lib/postgres/data /var/lib/postgres/tmp
sudo chown postgres:postgres /var/lib/postgres/data /var/lib/postgres/tmp
cd /var/lib/postgres/tmp
sudo -u postgres initdb -D /var/lib/postgres/data

Migramos la información de la anterior versión de postgresql a la nueva versión mediante la herramienta "pg_upgrade". Nótese que se debe reemplazar la variable PG_VERSION con la versión anterior:

sudo -u postgres pg_upgrade -b /opt/pgsql-PG_VERSION/bin -B /usr/bin -d /var/lib/postgres/olddata -D /var/lib/postgres/data

por ejemplo, en mi caso el comando fue:

sudo -u postgres pg_upgrade -b /opt/pgsql-13/bin -B /usr/bin -d /var/lib/postgres/olddata -D /var/lib/postgres/data

con ello ya podemos iniciar la nueva base de datos:

sudo systemctl start postgresql

Referencias

How to Upgrade PostgreSQL Databases Preserving Information

Se refiere al concepto de entregar actualizaciones frecuentes en las aplicaciones. Por ejemplo Arch Linux es un sistema operativo del tipo rolling release, mientras Ubuntu con su sistema de actualización cada 6 meses, no lo sería. ↩

JSON en PostgreSQL

2021-03-15T00:00:00-05:00

PostgreSQL incluye soporte para el tipo de dato JSON desde la versión "9.2". En este tutorial se verán ejemplos de cómo trabajar con inserciones y consultas de campos JSON.

¿Qué es JSON?

JSON, es el acrónimo de "JavaScript Object Notation" o "notación de objeto de JavaScript". Es un formato de texto sencillo utilizado para el intercambio de datos.

Su estructura es similar a la del siguiente ejemplo:

::javascript
{
  "autor": "Isaac Asimov",
  "pais": "Rusia",   
  "libros":[
    {
      "titulo": "Yo robot",
      "isbn": "9780739312698"
    },{
      "nombre": "El hombre bicentenario",
      "isbn": "9788440677778"
    } 
  ]
}

Creación de una tabla que utiliza un campo de tipo JSON

La declaración de una columna JSON solo requiere el nombre del campo + el tipo de dato "json", por ejemplo:

::sql
CREATE TABLE book (
   id serial,
   info json
);

En la tabla anterior almacenaremos información sobre grupos de libros por autores.

Inserción de registros

::sql
INSERT INTO book (info)
    VALUES ('{"autor": "Isaac Asimov","pais": "Rusia","libros":[{"titulo": "Yo robot","isbn": "9780739312698"}]}');

o para insertar varios registros al mismo tiempo:

::sql
INSERT INTO book (info)
    VALUES ('{"autor": "Patrick Rothfuss","pais": "EEUU","libros":[{"titulo": "El nombre del viento","isbn": "9788499082479"}]}'),
    ('{"autor": "Arthur C. Clarke","pais": "Reino Unido","libros":[{"titulo": "Cánticos de la lejana Tierra","isbn": "9788401322013"}]}');

Consultas

Para ver la información que ya tenemos almacenada podemos usar:

::sql
SELECT id, info FROM book;

y para mostrar un atributo del json, podemos utilizar el operador "->":

::sql
SELECT info->'autor' FROM book;

autor (json)
"Isaac Asimov"
"Patrick Rothfuss"
"Arthur C. Clarke"

Noten que el operador nos retorna un tipo "json", pero si utilizamos la versión "->>" se transforma en un tipo "text":

::sql
SELECT info->>'autor' as autor, info->'pais' as pais FROM book;

autor (text)	pais (json)
Isaac Asimov	"Rusia"
Patrick Rothfuss	"EEUU"
Arthur C. Clarke	"Reino Unido"

Consultas con condicionales (WHERE)

Por ejemplo, si deseamos obtener los registros cuyos autores pertenezcan a un país, podemos realizar una consulta similar a:

::sql
SELECT info FROM book WHERE info->>'pais' = 'Rusia';

Nótese que para comparar un valor del json con un "text" debemos utilizar el operador: "->>".

Se pueden realizar consultas y operaciones más complejas, pero como al menos como introducción, espero que este post les haya sido de ayuda.

Referencias

Vue + Summernote Editor

2020-07-27T00:00:00-05:00

Parte de un desarrollo que estoy realizando requiere integrar Vue.js y Summernote. Lamentablemente no existe una integración oficial por lo que anotaré los pasos que seguí por si le son de ayuda a alguien.

Observemos que yo ya tengo un proyecto creado con vue-cli
Instalo las dependencias necesarias
- yarn add jquery
- yarn add summernote
Creo un componente al que llamaré Summernote.vue, con un contenido similar a:

::javascript
<template>
    <div :id="element">
        <slot></slot>
    </div>
</template>

<script>
    const $ = require("jquery")
    import "summernote/dist/summernote-lite.min.css";
    import "summernote/dist/summernote-lite.min";

    export default {
        name: "Summernote",
        data() {
            return {
                element: `summernote_${new Date().getTime()}`
            };
        },
        props: {
            config: {
                type: Object
            },
            ready: {
                type: Function
            }
        },
        mounted() {
            this.$nextTick(() => {
                let defaultConfig = {
                    //lang: "es-ES",
                    placeholder: "placeholder...",
                    height: 600,
                    width: 810,
                    focus: true,
                    callbacks: {
                        onInit: () => {
                            this.$emit("ready", this);
                        },
                        onChange: contents => {
                            this.$emit("change", contents);
                        },
                        onEnter: () => {
                            this.$emit("enter");
                        },
                        onFocus: () => {
                            this.$emit("focus");
                        },
                        onBlur: () => {
                            this.$emit("blur");
                        },
                        onKeyup: e => {
                            this.$emit("keyup", e);
                        },
                        onKeydown: e => {
                            this.$emit("keydown", e);
                        },
                        onPaste: e => {
                            this.$emit("paste", e);
                        },
                    }
                };
                let config = Object.assign({}, defaultConfig, this.config);
                $("#" + this.element).summernote(config);
            });
        },
        methods: {
            summernote(...args) {
                $("#" + this.element).summernote(...args);
            },
            ui() {
                return $.summernote.ui;
            }
        }
    };
</script>
<style scoped>
    .summernote-img {
        max-width: 100%;
    }
</style>

Noten que estoy usando la versión lite de summernote, aquella que no requiere bootstrap.

Ahora, con lo anterior, puedo utilizar mi componente recién creado, por ejemplo:

::html
<template>
    <div>
        <summernote :config="summernoteConfig" @ready="readySummernote"></summernote>
    </div>
    <div class="preview">
        <div v-html="contents"></div>
    </div>
</template>

<script>
    import Summernote from "../Summernote";

    export default {
        name: "AnotherComponent",
        components: {
            Summernote
        },
        data() {
            return {
                summernoteConfig: {
                    placeholder: '',
                    tabsize: 2,
                    height: 200,
                    toolbar: [
                        ['font', ['bold', 'underline', 'clear']],
                        ['font', ['superscript', 'subscript']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', ['picture', 'hr']],
                        ['view', ['codeview']],
                    ]
                },
                contents: ""
            }
        },
        methods: {
            readySummernote(editor) {
                editor.summernote('code', this.contents);
                editor.$on("change", contents => {
                    this.contents = contents;
                });
            }
        }
    }
</script>

Lo que hicimos fue:

Importar el componente que creamos para "Summernote"
Crear una variable para la configuración del editor
Creamos un método que reciba los cambios del contenido y los asigne a una variable que le indicamos.
En el html también hemos incluido una vista previa de lo que genera el editor.

Debido a que mi conocimiento del javascript (vue) no es el suficiente, hay algunos otros puntos que intenté realizar y no pude, como por ejemplo:

integrar katex (un plugin de summernote para utilizar latex)
cambiar el idioma de summernote (tuve conflictos con jquery)

Pero espero que al menos como base lo anterior le sea de ayuda a alguien.

Referencias

vue summernote lite: un repositorio del que me guié y a quien pertenece la mayoría de la lógica utilizada aquí
How do I use Summernote with the Vue.js Framework? : un issue en el repositorio de summernote el cual da algunas otras ideas del cómo enfocar el problema

Si les fue de ayuda, compartan la publicación o dejen un comentario :)

Búsqueda avanzada con Postgresql y Django - I

2020-07-20T00:00:00-05:00

Si tuviéramos que implementar un formulario de búsqueda en django, usualmente recurriríamos al método "filter" de los querysets y a algo como:

.filter(nombre__icontains=q)

pero existen situaciones en las que requerimos técnicas más complejas. Y si bien, una opción podría ser utilizar un motor de búsqueda avanzado como ElasticSearch, también podríamos usar las características de postgresql como:

trigrams
unnacent
full text search (fts)

las cuales iremos revisando a detalle según avanzamos.

Entorno de prueba

Para este ejemplo utilizaremos una base de datos que contiene una tabla llamada Book (libro).

La tabla "Book" tiene los siguientes campos:

isbn (identificador único de un libro)
title
authors (separados por comas)
description (reseña)

Para facilitar lo anterior, he preparado un pequeño proyecto en django que se puede descargar de:

django-fts-demo

Y un dataset que contiene la lista de 10'000 libros el cual se puede descargar de:

librera-books-10k

Los pasos a seguir en caso quieran probar con la misma base de datos que utilizo serían:

Clonar el proyecto de django
Crear una nueva base de datos para el ejemplo y configurarla en el settings de django
Ejecutar el siguiente script en el shell de django para importar el CSV a la tabla "Book"

Nota: deben remover la primera línea del archivo CSV para que no se importe como un libro (corresponde a la cabecera de la tabla)

::python
import csv
from books.models import Book

with open(filename) as csvfile:
    reader = csv.reader(csvfile)
    for row in reader:
        Book.objects.create(
            isbn=row[0],
            title=row[1],
            authors=row[2],
            description=row[3]
        )

(Opcional) Crear un superusuario de django para poder ingresar al admin.

Con lo anterior podremos observar que ya tenemos los 10k libros:

Trigrams

Un trigram es un grupo de 3 caracteres tomados de un string.

Instalando la extensión trigrams en postgresql

Siguiendo la documentación oficial de django:

trigram similarity

Lo que necesitamos en principio es activar la extensión trigram de postgres.

Método 1:

La podemos instalar desde el panel de postgres con la sentencia SQL:

::sql
CREATE EXTENSION pg_trgm;

Notando que necesitamos ejecutarla con un usuario que tenga permisos para instalar extensiones.

Para lo anterior es posible que se nos requiera instalar el paquete postgresql-conntrib respectivo de nuestro sistema operativo.

Método 2:

Una alternativa sería crear una migración manual en django similar a:

from django.contrib.postgres.operations import TrigramExtension
from django.db import migrations


class Migration(migrations.Migration):
    dependencies = [
        ('books', '0001_initial'),
    ]
    operations = [
        TrigramExtension(),
    ]

Y aplicarla:

./manage.py migrate

Ejemplo de un trigram

Por ejemplo, para el texto "Harry Potter", postgresql genera los siguientes trigrams:

{"  h","  p"," ha"," po",arr,"er ",har,ott,pot,rry,"ry ",ter,tte}

lo podemos verificar mediante la consola de postgres con la sentencia:

::sql
SELECT show_trgm('Harry Potter');

Trigrams en Django - 1er intento

Primero veamos qué sucede si realizamos la búsqueda del texto "Harry Potter" en nuestro formulario:

Obtenemos 9 resultados con la sentencia:

::python
Book.objects.filter(title__icontains=q)

Ahora, siguiente la documentación, utilicemos:

::python
books = Book.objects.filter(title__trigram_similar=q)

Observamos lo siguiente:

Tenemos un problema, desaparecieron 2 resultados.

Actualicemos la sentencia para ver qué pasó con los 2 resultados que no fueron contados:

::python
books = Book.objects.annotate(
            similarity=TrigramSimilarity('title', q),
        ).filter(title__icontains=q).order_by('-similarity')

Y también actualicemos el html para mostrar el campo "similarity" el cual representa qué tan similar es un resultado comparado a nuestra búsqueda.

Tendremos lo siguiente:

Según la documentación de django, solo son tomados los resultados con un valor de "similaridad mayor a 0.3", y según el anterior resultado, dos de nuestros resultados son excluidos.

Trigrams en Django - 2do intento

Entonces tal vez nos convenga ajustar este límite a un valor de 0.2 para incluir más resultados:

::python
books = Book.objects.annotate(
            similarity=TrigramSimilarity('title', q),
        ).filter(similarity__gt=0.2).order_by('-similarity')

Al realizar nuevamente la búsqueda tendremos:

Esta vez obtenemos inclusive un resultado extra ya que comparte cierta similitud con nuestra búsqueda.

Ventajas de utilizar trigrams

Al buscar similitudes en vez de coincidencias exactas un usuario puede equivocarse y escribir: "Harry Porter" y aún así encontrar algunos resultados:

Nota:

Como indica la documentación de postgres, para obtener mejores resultados con trigrams, el término a buscar debe tener una longitud similar a los resultados esperados.

Es por ello que al buscar "Harry Porter" las cadenas de resultados más largas muestran una menor similitud.

A tener en cuenta !

Utilizar trigrams es mucho más pesado (en términos de recursos computacionales) por lo que la búsqueda puede ser más lenta según la cantidad de registros tengamos almacenados en nuestro sistema.

Para mitigar este problema existen los "index", los cuales veremos en una siguiente ocasión.

Referencias

postgres trigrams

Subir archivos a Amazon S3 directamente

2020-06-14T00:00:00-05:00

Como parte de un proyecto necesito que ciertos usuarios puedan cargar imágenes a Amazon S3. Esto puede realizarse sin necesidad de que el procesamiento sea un servidor que yo administre, es decir, que el formulario puede configurarse para que envíe los archivos directamente a Amazon S3.

Nota: si bien es inseguro que permitamos que cualquier usuario suba archivos a nuestro servidor (no sabemos qué archivos subirá), en mi caso serán "usuarios de confianza".

Para lo anterior necesitamos realizar 2 tipos de tareas:

Crear y configurar los servicios necesarios en la consola de AWS
Escribir el código necesario para la carga de archivos

Configuración de AWS

1.1.- Lo primero es crear un bucket en S3, así que nos dirigimos a la consola y escogemos la opción para crear un bucket.

1.2.- Permitimos el acceso público a nuestro bucket recién creado.

Para ello nos dirigimos a la configuración del bucket, sección "Permisos" - "Bloquear Acceso Público" y desmarcamos los checks.

1.3.- Configuramos el CORS del bucket S3.

En la sección "Permisos" - "Configuración del CORS" añadimos un texto de la forma:

::xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Notando que el "*" en AllowedHeader se refiere a que permitiremos que cualquier website solicite de nuestras imágenes. Esto tan solo lo realizaremos en nuestra demo ya que en realidad aquí debe ir el dominio que utilizaremos en nuestra web.

1.4.- Creamos un "conjunto de identidades anónimas" en "Amazon Cognito"

Para permitir que usuarios sin registrar puedan subir archivos, escogemos la opción de "Administrar grupos de identidades" y seleccionamos "Crear nuevo grupo de identidades".

Note que marcaremos la opción de "Habilitar acceso a indentidades sin autenticar"

Copiamos el ID que nos entrega (lo usaremos más adelante)

1.5.- Ahora debemos brindarles permisos al nuevo rol creado para que sea capaz de manipular archivos de S3.

En la consola de AWS, vamos al servicio "IAM", buscamos el rol creado, en mi caso algo similar a Cognito_demo_1428Unauth_Role y le asociamos una nueva política:

::json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::demo-bucket-1428/*"
            ]
        }
    ]
}

Y todo listo, al menos la primera parte que se refiere a la configuración de AWS.

Código HTML / JS

Utilizaré Cash.js, una alternativa ligera a Jquery para algunas manipulaciones del DOM.

El html mínimo sería similar a:

::html
<form action=".">
    <label for="photo">
        Escoja la foto
        <input type="file" id="photo" name="file">
    </label>
</form>

<progress max=”100” value=”0”></progress>

Tenemos una barra de progreso de la carga, pero no es necesaria, se puede omitir.

Luego debemos incluir el javascript del SDK de AWS (ver referencias) y el código de cash.js (puede utilizarse jquery o vanilla js)

::html
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/7.0.3/cash.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.696.0.min.js"></script>

Y la lógica principal:

::javascript
    var bucketName = 'demo-bucket-1428';
    var bucketRegion = 'us-east-1';
    var IdentityPoolId = "us-east-1:credenciales-super-secretas";

    AWS.config.update({
        region: bucketRegion,
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: IdentityPoolId
        })
    });

    var s3 = new AWS.S3({
        apiVersion: '2006-03-01',
        params: {Bucket: bucketName}
    });

    $('form').on('change', function (ev) {
        ev.preventDefault();
        $('body').css('cursor', 'progress');
        let files = document.getElementById('photo').files
        if (!files.length) return;
        saveFile(files);
    });

    function saveFile(files) {
        if (files) {
            let file = files[0];
            var fileName = file.name;
            var filePath = 'directorio_de_prueba/' + fileName;
            var fileUrl = 'https://s3.amazonaws.com/' + bucketName + '/' + filePath;

            s3.upload({
                Key: filePath,
                Body: file,
                ACL: 'public-read'
            }, function (err, data) {
                if (err) {
                    console.log(error)
                }
                $('body').css('cursor', 'default');
            }).on('httpUploadProgress', function (progress) {
                var uploaded = parseInt((progress.loaded * 100) / progress.total);
                $("progress").attr('value', uploaded);
            });
        }
    };

Y eso es todo, ahora tenemos nuestro formulario que sube archivos a S3 sin necesidad de que pase a través de nuestro servidor.

Como dato extra, para limitar los tipos de archivos permitidos, podemos seguir el siguiente post: How can I allow only certain file types to be uploaded to my Amazon S3 bucket?

Referencias

Cash JS: An absurdly small jQuery alternative for modern browsers.
Uploading Photos to Amazon S3 from a Browser
Uploading Files in AWS S3 Bucket through JavaScript SDK with Progress Bar
AWS SDK JS

Capturar la pantalla con Python (Selenium)

2020-06-10T00:00:00-05:00

Sabemos que en Python podemos obtener el código de HTML de una página web con muchas herramientas como: urllib, requests, faster_than_requests entre otras, pero para renderizar el contenido de un website, necesitamos herramientas como selenium.

Selenium es un entorno de pruebas para websites, el cual nos permite automatizar muchas tareas relacionadas al uso de un navegador mediante código.

Para nuestro ejemplo, necesitaremos dos cosas:

Instalar selenium
```
pip install selenium
```
Instalar chomedriver, el driver oficial para manipular Chrome.

Para ello debemos descargar el driver de la página oficial según nuestro sistema operativo, y agregar el directorio que lo contiene al PATH.

Nota: debemos descargar la versión adecuada según la versión de nuestro navegador.

El código

Ahora podemos escribir el código necesario. Noten que usaremos chrome en su versión headless, de este modo podemos interactuar con el navegador en entornos donde no necesitamos su interfaz gráfica.

::python
from selenium import webdriver

url = 'https://www.djangoproject.com/'
options = webdriver.ChromeOptions()
options.add_argument('--window-size=1024,768')
options.add_argument('--headless')
options.add_argument('--disable-gpu')

browser = webdriver.Chrome(options=options)

browser.get(url)
browser.save_screenshot('django.png')
browser.close()

Lo que nos produce la siguiente salida:

Notamos el uso de algunos parámetros como:

--windows-size: para ajustar el tamaño de la ventana a capturar
--headless: para que chrome se ejecute sin necesidad de iniciar la interfaz gráfica
--disabled-gpu: parámetro necesario si usamos Windows como sistema operativo.

Nota: podemos deshabilitar la visualización del scrollbar con la opción extra --hide-scrollbars

Tomando una captura de la página completa

En la captura anterior, se observa que solo fue tomada una sección de la página. ¿Cómo podemos capturar la pantalla completa del navegador?

Para ello podemos ejecutar un código javascript para conocer el tamaño de la página y tomar una nueva captura:

::python
import time
from selenium import webdriver

url = 'https://www.djangoproject.com/'
options = webdriver.ChromeOptions()
options.add_argument('--window-size=1024,768')
options.add_argument('--headless')
options.add_argument("--hide-scrollbars")
options.add_argument('--disable-gpu')

browser = webdriver.Chrome(options=options)
browser.get(url)
time.sleep(2)  # esperamos que cargue todo con un tiempo moderado
height = browser.execute_script(
    "return Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight )")
print(height)
browser.close()

# realizamos la captura con el "alto" que hemos obtenido
options = webdriver.ChromeOptions()
options.add_argument('--no-sandbox')
options.add_argument(f'--window-size=1024,{height}')
options.add_argument('--headless')
options.add_argument("--hide-scrollbars")
options.add_argument('--disable-gpu')
options.add_argument('--ignore-certificate-errors')

browser = webdriver.Chrome(options=options)
browser.get(url)
browser.save_screenshot('django_fullpage.png')

Si, así de simple.

Observaciones finales

Como hemos visto, con selenium podemos automatizar el proceso de tomar capturas. Un usuario podría ingresar una url en nuestro sistema y mediante lo anterior, podríamos realizar una captura.

Claro, con selenium podemos automatizar muchas otras tareas como darle click a botones, testear formularios u otros, por lo que recomiendo darle una revisión para conocer todas las posibilidades.

Webscraping en 6 líneas de código

2020-06-07T00:00:00-05:00

¿Quién no ha realizado algún proyecto y ha necesitado información de prueba?

Mediante el web scraping, esta tarea resulta trivial, y no te preocupes, no vas a escribir todo a mano.

Para comenzar, utilizaré el mismo ejemplo de un post anterior: Webscraping básico con Python - I

En dicho post realizamos scraping al website de Hacker News

En esta ocasión realizaremos algo similar pero solo con la librería estándar de python para enfocarlo de otra manera:

Paso #1: Consultar a la url

Utilizamos la librería urllib de python para consultar el enlace:

::python
from urllib.request import urlopen

with urlopen('https://news.ycombinator.com/') as f:
    pass

Paso #2: Extraemos los títulos

Al igual que en el post que escribí antes, observamos en el html de Hacker News

y notamos que el título de cada noticia tienen la forma de:

class="storylink">TÍTULO</a>

con ello podemos hacer uso de las expresiones regulares para extraer los bloques similares.

Nota: No olvidemos que tenemos que convertir la salida de urlopen para poder leerla como string.

::python

from urllib.request import urlopen
import re

with urlopen('https://news.ycombinator.com/') as f:
    all_titles = re.findall(r'class="storylink">(.*?)<', f.read().decode('utf-8'))

Paso 3: El gran final, generar las sentencias SQL

Las sentencias INSERT tienen la siguiente forma:

INSERT INTO "nombre_tabla" ("columna1", "columna2", ...);

organizando nuestro código para producir dicha salida, tendríamos:

::python
from urllib.request import urlopen
import re

with urlopen('https://news.ycombinator.com/') as f:
    all_titles = re.findall(r'class="storylink">(.*?)<', f.read().decode('utf-8'))

    for title in all_titles:
        print (f'insert into Titles values ("{title}");')

Y al ejecutar dicho código en la consola tendríamos una salida similar a:

Ejemplo extra: obteniendo noticias del diario "El Comercio"

Tomando como base la página de noticias de Política de "El Comercio", podríamos realizarlo con:

::python
import re
from urllib.request import urlopen

with urlopen('https://elcomercio.pe/politica/') as f:
    all_titles = re.findall(r'class="story-item__title block overflow-hidden primary-font line-h-xs mt-10" href="([\w/-]*?)">(.*?)</a>', f.read().decode('utf-8'))
    for url, title in all_titles:
        print(title)

De este modo obtenemos los títulos de las últimas 50 noticias:

Notas finales

No debemos olvidar que siempre que realicemos webscraping tengamos en cuenta los factores legales: propiedad intelectual, cuidarse de no agotar al servidor con muchas consultas simultáneas, sensibilidad de la información, etc.
Podemos mejorar nuestro código mediante el uso de librerías como: requests, beautifulsoup, faster_than_requests u otras.

Referencias

Get data for your DB schoolwork with 6 lines of python

Profiling con Python

2020-04-12T00:00:00-05:00

Hoy tuve como tarea reducir el tiempo de ejecución de una rutina que tomaba 40 minutos. Era código extenso que veía por primera vez, por lo que decidí usar el módulo "cProfile" de python para realizar un análisis de los posibles cuellos de botella y saber qué se debe tomar como prioridad al optimizar del total del código.

Finalmente logré alcanzar los 3 minutos de ejecución centrándome solo en los métodos más lentos o aquellos que se llamaban en altas cantidades.

¿A qué se le llama profiling?

Se refiere a la acción de realizar la medición de con qué frecuencia y en cuanto tiempo se ejecutan las diversas partes de un programa.

Profiling en Python

Python incluye los módulos cProfile y profile en su librería estandar para realizar profiling.

Ambos módulos proveen las mismas interfaces (métodos) pero la diferencia radica en que profile está implementado en python y es más fácil "extenderlo" (personalizarlo).

La documentación nos recomienda utilizar cProfile.

Ejemplo de uso

Para el ejemplo utilizo la serie de Fibonacci:

::python
import profile

def fib(n):
    if n == 0:
        return 0
    elif n == 1:
        return 1
    else:
        return fib(n-1) + fib(n-2)

def fib_seq(n):
    seq = [ ]
    if n > 0:
        seq.extend(fib_seq(n-1))
    seq.append(fib(n))
    return seq

profile.run('print(fib_seq(32))')

Cuyo resultado es:

   ncalls  tottime  percall  cumtime  percall filename:lineno(function)
18454895/33    4.665    0.000    4.665    0.141 <stdin>:1(fib)
     33/1    0.000    0.000    4.665    4.665 <stdin>:1(fib_seq)
        1    0.000    0.000    4.666    4.666 <string>:1(<module>)
        1    0.000    0.000    4.666    4.666 {built-in method builtins.exec}
        1    0.000    0.000    0.000    0.000 {built-in method builtins.print}
       33    0.000    0.000    0.000    0.000 {method 'append' of 'list' objects}
        1    0.000    0.000    0.000    0.000 {method 'disable' of '_lsprof.Profiler' objects}
       32    0.000    0.000    0.000    0.000 {method 'extend' of 'list' objects}

Donde tenemos que:

ncalls: es el total de veces que se llaman a la función. En este caso la función fib se llama 18454895 veces debido a que es una función recursiva.
tottime: es el total de tiempo que transcurre exclusivamente dentro de la función sin tomar en cuenta las llamadas a subfunciones de la misma.
percall: es el tiempo anterior pero dividido entre el total de llamadas a la función (tiempo promedio).
cumtime: es el tiempo total dentro de una función (incluidas subfunciones)
percall: "cumtime" / número de ejecuciones (tiempo promedio total)
filename:lineno(function): se refiere a la función en cuestión

Para facilitar el paso de parámetros también podemos utilizar el método runctx:

    cProfile.runctx('fib_seq(n)', globals(), {'n': 32})

e inclusive podemos generar un archivo que contenga los resultados:

    cProfile.runctx('fib_seq(n)', globals(), {'n': 32}, 'output.prof')

Utilizando snakeviz para visualizar los resultados de forma gráfica

Snakeviz es un visor gráfico basado en el navegador para la salida del profiler "cProfile" de python.

Para instalarlo bastaría:

pip install snakeviz

y luego ya solo llamaríamos a la aplicación en consola mediante:

snakeviz output.prof

y nos mostrará una salida similar a:

en la que se desglosan las respectivas funciones llamadas y sus tiempos.

Recursos:

Python profile: Librería estándar de Python
profile, cProfile, and pstats: Performance analysis of Python programs
Snakeviz

Recursos para diseñadores (2020)

2020-03-29T00:00:00-05:00

Compilación de recursos para diseñadores que en algún momento me han sido de ayuda. Trataré de incluir el mínimo de páginas por bloque para hacerlo conciso.

Imágenes stock

Pixabay: Creo que es la mejor y más ordenada entre las páginas que contienen imágenes stock gratuitas (1.6 millones de imágenes).
Unsplash: Segunda opción personal a la hora de buscar imágenes (más de 1 millón de imágenes)
Visualhunt: Permite realizar búsquedas por colores
Everypixel: Buscador con múltiples filtros que agrupa a otros buscadores de imágenes.

Otros recursos de imágenes stock

Patrones de imágenes

The Pattern library

Colores

Colección de paletas de colores

Happy hues: Paletas de colores con vista previa en el propio website
Scheme color: Colección de paletas con búsqueda por colores
Colorhunt: Colección de paletas de colores listas para usar

Generadores de paletas

Coolors
Mycolor
Canva color palette: Extrae la paleta de colores desde una imagen

Íconos

IconFinder: Se deben usar sus filtros para escoger solo los íconos gratuitos
Orion icon library: 8600 íconos gratuitos ordenados por categorías
Thousands
Feather icons
Box icons
Icon store

Emails

Really good emails: Colección de correos bien estructurados y diseñados.

Colecciones de páginas web a modo de inspiración

One Page Love: Landing Pages con buen diseño
lapa.ninja
UI Garage: Patrones de diseño de elementos web (Páginas 404, Dashboard, Mensajes de error, etc)
OnePageMania
PageFlows: Flujos de algunas acciones en sitios webs conocidos
Mediaqueri.es: Páginas en sus versiones responsive
SiteInspire: Colección de sitios web
BestWebsite: Colección de sitios web
Pages.xyz: Muestra páginas del tipo: landing, productos, precios y aplicaciones.

Accesibilidad

Wave: Herramienta de prueba de accesibilidad de un sitio web
Funkify: Extensión para chrome que simula la visualización de una página web para personas con diferentes habilidades y discapacidades.
Contrast checker: Verifica el contraste de 2 colores (frente y fondo)

Otros

TinyPNG: Herramienta para reducir el tamaño de imágenes (jpg, png)
Waifu2x: Herramienta para ampliar o mejorar imágenes sin perder resolución.
PaperKit: Grillas para imprimir.

Páginas que compilan recursos (Inception)

UI Goodies: Amplia variedad de recursos como: animaciones, audios, libros, imágenes, etc.
Sans Francisco: Página que agrupa recursos relacionados al proceso UX que se sigue al implementar un website además de los recursos usuales (fotos stock, paletas de colores)
Indie Makers: Compilación de recursos de varios rubros como: diseño, gestión de proyectos, SEO, marketing, etc.

Actualizado al 29 de Marzo del 2020

Post publicado en alexanderae.com

Convertir un archivo CSV a SQLite con Python

2020-03-24T00:00:00-05:00

¿Qué es un archivo CSV?

Un archivo CSV (Comma Separated Values) es un archivo que contiene datos separados por comas (u otros separadores como tabuladores, espacios, puntos y coma, etc). En estos archivos cada línea representa un registro.

Por ejemplo, este archivo toma la forma:

Código, Nombre, Departamento
014285, Colegio Belén, Lima
028514, IIEE 2042, Arequipa
042857, Colegio Toribianitos, Lima

¿Cómo convertir un archivo CSV a un archivo SQLITE?

SQLite viene con su propia línea de comandos para realizar algunas tareas, entre ellas, la importación de archivos CSV.

::sqlite
>>> sqlite3
>>> sqlite> .mode csv
>>> sqlite> .import input.csv table_name
>>> sqlite> .schema table_name
>>> sqlite> .save output.db

Lo que acabamos de realizar es:

Activar el modo CSV (.mode csv)
Importar el archivo en la tabla indicada
Verificamos el script utilizado para crear la tabla anterior
Exportamos el archivo a una base de datos sqlite
Fin :)

¿Por qué no uso python?

En mi caso, el archivo utilizado tenía 170k+ registros y no requería la modificación de sus registros previo a la inserción, por lo que utilizar python era mucho más lento y terminé usando la shell de sqlite directamente.

¿Cómo convertir un archivo CSV a SQLite con Python?

Dependiento de nuestras necesidades podemos:

Utilizar un ORM para generar el código SQL (Pewee ORM, PonyORM, etc)
Utilizar pandas
Utilizar dataset (o en general alguna otra librería), por ejemplo:

::python
import csv, uuid, dataset


def csv2dataset(filename_input, filename_output):
    with open(filename_input, 'r') as file_input:
        input_data = csv.DictReader(file_input)
        db = dataset.connect('sqlite:///' + filename_output)
        table = db['contactos']
        for contact in input_data:
            contact['uuid'] = uuid.uuid4().hex
            table.insert(contact)


if __name__ == '__main__':
    csv2dataset('direcciones.csv', 'direcciones.sqlite')

Referencias

Peewee: ORM para python - I

2019-12-20T22:00:00-05:00

¿Qué es?

Peewee es un ORM para python. Incluye soporte para SQLite, MySQL, PostgreSQL y Cockroachdb.

¿Qué es un ORM?

Sus siglas significan Object-Relational mapping, o en español: Mapeo Objeto-relacional. Es una técnica que permite convertir entre los tipos de datos usados en los lenguajes de programación orientados a objetos y los tipos de datos de algun sistema de base de datos relacional.

Instalación

Se instala mediante pip.

pip install peewee

Para comprobar que se haya realizado la instalación, podemos acceder a la consola interactiva de python y escribimos:

::python

>>> import peewee
>>> peewee.__version__
3.13.1

puede consultar más información sobre la instalación aquí.

Ejemplo de uso

Para ilustrar¹ la idea, utilizaremos el mismo ejemplo de un post anterior que realicé sobre sqlalchemy.

El ejemplo es sobre un modelo de datos para un sistema que se encarga de administrar registros de libros, autores, y etiquetas (o temas, para los libros).

El esquema del modelo es el siguiente:

Consiste en las tablas Libro, Autor y Etiqueta principalmente. Las tablas intermediarias etiqueta_libro y autor_libro se utilizan para expresar la relación de muchos a muchos entre las otras tablas.

Primero, debemos mapear el modelo de la base de datos por medio de peewee, para lo cual escribí tenemos el archivo siguiente que nombrare models.py:

::python

import datetime

from peewee import *

db = SqliteDatabase('libros.db')


class Autor(Model):
    nombre = CharField(max_length=120)

    class Meta:
        database = db


class Etiqueta(Model):
    nombre = CharField(max_length=120)

    class Meta:
        database = db


class Libro(Model):
    titulo = CharField(max_length=120, index=True)
    fecha_publicacion = DateField(default=datetime.datetime.now)
    isbn = CharField(max_length=13, index=True, unique=True)
    autores = ManyToManyField(Autor, backref='libros')
    etiquetas = ManyToManyField(Etiqueta, backref='libros')

    class Meta:
        database = db


db.connect()
db.create_tables([Autor,
                  Etiqueta,
                  Libro,
                  Libro.autores.get_through_model(),
                  Libro.etiquetas.get_through_model()]
                 )

Lo que realiza el código anterior es lo siguiente:

Importa los módulos necesarios
Realiza la conexión a la base de datos, en este caso corresponde a sqlite
Mapeamos las tablas como clases, utilizando los tipos de datos de peewee.
Añadimos las relaciones entre las tablas por medio del campo ManyToManyField
Al final, usamos la sentencia:
```
db.create_tables
```
observando que para crear las tablas intermedias (libro_autor y libro_etiquetas) utilizamos una sintaxis especial.

y ejecutamos el script mediante:

    python models.py

Con ello, observaremos que se creó el archivo "libros.db" el cual contiene nuestra base de datos.

Se puede verificar el contenido de las tablas mediante sqliteman²

La inserción de registros la podemos realizar de la siguiente manera:

::python

autor_1 = Autor.create(nombre='Patrick Rothfuss')
autor_2 = Autor.create(nombre='Fred Saberhagen')
autor_3 = Autor.create(nombre='Julio verne')

etiqueta_1 = Etiqueta.create(nombre='Ciencia Ficción')
etiqueta_2 = Etiqueta.create(nombre='Fantasía')

libro = Libro.create(titulo='El nombre del viento', isbn='9788401337208')
libro.autores = [a1, a2]
libro.etiquetas = [etiqueta_1]

Para modificar algún campo solo debemos modificar el atributo y llamar al método save:

::python
autor_3.nombre = 'Julio Verne'
autor_3.save()

Y las consultas son medainte el método select y los filtros mediante el método where :

::python
libro = Libro.select().where(Libro.isbn == '9788401337208')[0]
print(libro.titulo)

Espero que el post pueda brindar una idea del cómo funciona peewee.

Para información más amplia puede guiarse de la documentación ↩
Sqliteman es un gestor de base de datos para sqlite3 ↩

Webscraping básico con Python - III

2019-12-04T00:00:00-05:00

En esta ocasión, siguiendo el ejemplo del post anterior, realizaré la misma tarea pero utilizando Scrapy, un framework especializado en la tarea de realizar webscraping.

Nuestro objetivo es el mismo: descargar la lista de libros y precios de Books to scrape.

Requisitos

Necesitamos instalar scrapy:

pip install scrapy

Comenzando

Nuestro script, según el ejemplo de la documentación de scrapy, toma la siguiente forma:

::python
import scrapy

url = 'http://books.toscrape.com'


class BooksSpider(scrapy.Spider):
    name = 'books'
    start_urls = [
        url,
    ]

    def parse(self, response):
        for book in response.css('.product_pod'):
            yield {
                'title': book.css('h3 a').attrib['title'],
                'price': book.css('p.price_color::text').get()[1:],
            }

Y ejecutamos el código con:

scrapy runspider books.py -o books.csv

¿Cómo interpreta scrapy lo anterior?

Scrapy inicia consultando los enlaces en start_urls, en este caso solo es un enlace, y posteriormente, ejecuta el método "parse", enviándole el objecto "response" como parámetro.

Dentro del método parse, utilizamos selectores CSS mediante la librería parsel, la cual actua de alternativa a beautifulsoup.

Nótese que mediante la línea de comandos también indicamos el archivo de salida en formato CSV. Scrapy soporta los siguientes formatos de forma nativa: JSON, XML y CSV.

Iterando sobre las páginas

Si se observa el archivo de resultado, veremos que scrapy solo retorna los resultados de la primera página. Para ellos

Actualizando el código para considerar la paginación, quedaría del siguiente modo:

::python
import scrapy

url = 'http://books.toscrape.com'
prefix_page = 'catalogue'


class BooksSpider(scrapy.Spider):
    name = 'books'
    start_urls = [
        url,
    ]

    def parse(self, response):
        for book in response.css('.product_pod'):
            yield {
                'title': book.css('h3 a').attrib['title'],
                'price': book.css('p.price_color::text').get()[1:],
            }

        next_page = response.css('.pager .next a').attrib['href']
        if next_page:
            if prefix_page in next_page:
                next_url = '{}/{}'.format(url, next_page)
            else:
                next_url = '{}/{}/{}'.format(url, prefix_page, next_page)

            yield response.follow(next_url, self.parse)

Y al ejecutar lo anterior nuevamente:

scrapy runspider books.py -o books.csv

obtendríamos de resultado los 1000 libros que existen en la página.

Conclusión

Scrapy resulta una herramienta muy práctica ya que:

Tiene soporte nativo para selectores CSS
Soporte nativo para generar archivos de salida (CSV, JSON)
Permite rotar el "User Agent"
Permite agregar una demora entre descargas para no sobrecargar las páginas a scrapear (DOWNLOAD_DELAY)
Incluye una herramienta que realiza un benchmark a nuestro proceso

Publicaciones anteriores

Referencias

Documentación de Scrapy
Documentación de Parsel

Webscraping básico con Python - II

2019-12-01T00:00:00-05:00

Continuando con un post realizado hace unos meses sobre los fundamentos del webscraping: Webscraping básico con Python - I, en esta ocasión presento otro ejemplo práctico para obtener información de un website.

Para nuestra pruebas utilizaremos Books to scrape, una página que simula ser una librería, creada con fines educativos por ScrapingHub¹.

Dicha web cuenta con:

1000 items en total
Paginación
20 items por página
No requiere javascript para leer el contenido

Requisitos

Necesitamos tener instaladas los siguientes paquetes:

beautifulsoup4: facilita el scraping de websites permitiendo acceder a los elementos HTML de una página de forma sencilla
lxml: HTML parser
requests: permite realizar consultas HTTP

El problema

A modo de ejemplo, intentaremos obtener la información de los libros tales como título y precios.

Comenzando

Nuestro script de forma inicial podría tomar la siguiente forma:

::python
import requests

url = 'http://books.toscrape.com'

content = requests.get(url)
print(content.text)

Lo indicado anteriormente tan solo obtiene el contenido del Home (la pantalla inicial).

Listando las páginas

Analizando la página observamos que la paginación en la sección inferior cuenta con los botones "previous" y "next".

El enfoque que tomaremos será obtener el enlace "next", redirigirnos hacia aquella página y buscar el nuevo enlace "next". En caso de que no exista una página siguiente, nos detenemos.

Notemos que "next_url" se construye de dos maneras porque en la página 1 el enlace es del tipo "catalogue/page-2.html" mientras que en la página 2 hacia adelante es del tipo "page-3.html".

::python
import requests
from bs4 import BeautifulSoup


url = 'http://books.toscrape.com'
prefix_page = 'catalogue'

def obtiene_paginas():
    response = requests.get(url)

    while True:
        soup = BeautifulSoup(response.text, 'lxml')
        next_page = soup.select('.pager .next a')

        if next_page:
            if prefix_page in next_page[0].get('href'):
                next_url = '{}/{}'.format(url, next_page[0].get('href'))
            else:
                next_url = '{}/{}/{}'.format(url, prefix_page, next_page[0].get('href'))
            print(next_url)
            response = requests.get(next_url)
        else:
            break

if __name__ = '__main__':
    obtiene_paginas()

Obtenemos los libros y sus precios

Cada página tiene un listado de libros, a su vez, cada libro está en un bloque con una clase CSS: "product_pod"

::python
def get_books(soup):
    books = []
    html_books = soup.select('.product_pod')
    for html_book in html_books:
        books.append({
            'title': html_book.select('h3 a')[0]['title'],
            'price': html_book.select('.price_color')[0].get_text()[2:]
        })

Note que para el precio, estamos comenzando desde el caracter número 3 ([2:]) ya que los 2 primeros caracteres contienen información no relevante.

Grabando los resultados en una archivo CSV

Un archivo CSV, es un archivo de texto con valores separados por comas que representan datos en forma de tabla.

Escribimos una función que reciba la lista de libros y las escriba al final de un archivo CSV, de tal forma que nuestro código queda similar a:

::python
def export_to_csv(books):
    with open('books.csv', 'a') as csvfile:
        csvwriter = csv.writer(csvfile, delimiter=';')
        for book in books:
            csvwriter.writerow((book['title'], book['price']))

Resultado

Nuestro código finalmente quedará del siguiente modo:

::python
import csv
from datetime import timedelta
from timeit import default_timer as timer

import requests
from bs4 import BeautifulSoup

url = 'http://books.toscrape.com'
prefix_page = 'catalogue'


def get_pages():
    response = requests.get(url)

    while True:
        soup = BeautifulSoup(response.text, 'lxml')
        books = get_books(soup)
        export_to_csv(books)
        next_page = soup.select('.pager .next a')

        if next_page:
            if prefix_page in next_page[0].get('href'):
                next_url = '{}/{}'.format(url, next_page[0].get('href'))
            else:
                next_url = '{}/{}/{}'.format(url, prefix_page, next_page[0].get('href'))
            print(next_url)
            response = requests.get(next_url)
        else:
            break


def get_books(soup):
    books = []
    html_books = soup.select('.product_pod')
    for html_book in html_books:
        books.append({
            'title': html_book.select('h3 a')[0]['title'],
            'price': html_book.select('.price_color')[0].get_text()[2:]
        })

    return books


def export_to_csv(books):
    with open('books.csv', 'a') as csvfile:
        csvwriter = csv.writer(csvfile, delimiter=';')
        for book in books:
            csvwriter.writerow((book['title'], book['price']))


if __name__ == '__main__':
    start = timer()
    get_pages()
    end = timer()
    print(timedelta(seconds=end - start))

Noten que hemos añadido un contador para conocer cuánto tiempo demora nuestro código en ejecutarse.

Si se ejecuta el script, podremos notar que el documento CSV creado contiene los 1000 libros que extrajimos desde la página de prueba.

Posibles mejoras

Un tip rápido para mejorar los tiempos de procesamiento es el de reemplazar la librería requests por: Faster-than-Requests

En mi caso, el tiempo de ejecución total se redujo a la mitad con tan solo el reemplazar la librería.

Referencias

Documentación de BeautifulSoup
Documentación de requests
Documentación de Python para manipular archivos CSV

ScrapingHub es una empresa dedicada a brindar servicios de webscraping. ↩

¿Cómo encontrar imágenes similares con Python?

2019-11-24T00:00:00-05:00

El problema: imágenes que no coinciden (y deberían coincidir)

Una de las tareas en Librera implica recopilar la información de un libro en base a su ISBN, para lo cual en algunos casos se recurre al webscraping.

En algunos casos, al obtener la portada de un libro desde algún servicio externo como Google Books API, Goodreads API o scrapeando alguna web verificábamos que obteníamos una portada incorrecta.

Nuestro proceso para obtener la portada de un libro implicaba:

Consultar varias fuentes (API's)
Escoger la portada en base al tamaño de la imagen, ya que un mayor tamaño, véase ancho x alto implicaba "mayor calidad".

Nota: No descargamos cada imagen, sino que tan solo verificábamos los primeros bits del archivo, ya que allí se encuentra información como las medidas de la misma.

Pero con el tiempo notamos que algunas portadas no coincidían por equis motivos (luego se vio que esto era un 0.005% o menos de las imágenes)

La solución: comparar imágenes para encontrar coincidencias

Crear un script que descargue la portada de varias fuentes y las compare. La portada "escogida" además de tener el mayor tamaño, debe ser similar a alguna de las otras portadas, ya que es "altamente improbable" que el error se produzca entre varias fuentes.

Y es por ello que escribo este post, resumiendo mi pequeña investigación sobre el tema.

Algoritmos para crear "hash" de imágenes

La comparación de las imágenes la podemos realizar de varias formas. En este caso, utilizaremos un hash¹, que sería un string que actua a modo de resumen de cada imagen.

Los hash creados se deben caracterizar por:

Ser únicos para cada imagen
Si una imagen sufre una ligera variación, el hash resultante debe variar mínimamente también.

Para nuestras pruebas usaremos el cover del libro "Toda Mafalda":

Existen algunos algoritmos usualmente empleados en estos temas y son:

Average Hash

El procedimiento del cálculo es el siguiente:

Generar una miniatura con tamaño fijo de la imagen: de este modo los cálculos serán más rápidos de realizar y los tamaños se homogenizan. Podemos trabajar con la medida de 8x8 con lo que tendremos 64 píxeles.
Reducimos los colores transformando la imagen a escala de grises.
Realizamos el cálculo de la media de los 64 valores
Ahora revisamos si cada bit es mayor o menor a la media, con lo que tendremos 64 bits (0 o 1)
Construimos el hash: transformamos la cadena de valores binarios a hexadecimal con lo que tendremos algo similar a: *ffffeff1e1e0661c *

Perceptual Hash

Debido a su implementación, el algoritmo de Average Hash es rápido y sencillo, pero también debido a su naturaleza, puede llegar a generar varios falsos positivos al momento de comparar imágenes similares cuando se realizan ajustes al "gama" de la imagen.

El proceso es:

Escalamos la imagen, pero a diferencia del algoritmo "Average Hash" se recomienda utilizar un mayor tamaño como "32x32"
Reducimos los colores transformando la imagen a escala de grises.
Calculamos la DCT o [Transformada de cosenos discreta]²
Reducimos la DCT: El cálculo anterior nos brinda una matrix de 32x32, pero solo tomaremos los 8x8 píxeles del lado superior izquierdo, lo que nos representa las menores frecuencias
Calculamos el valor promedio (similar al algoritmo anterior)
Cálculamos el hash: establecemos los 64 bits en 0 o 1 según si cada valor supera o no el valor promedio calculado
Construimos el hash: transformamos la cadena de valores binarios a hexadecimal con lo que tendremos algo similar a: e6cd90620d947bce

Otros algoritmos

Tenemos otros algoritmos que pueden ser revisados en las referencias al final del post como:

Block Hash
Diference Hash
Wavelet Hash
Median Hash

¿Cómo comparamos los hashes de las imaǵenes?

Para nuestras pruebas, ajustamos el brillo, contraste y escala de la imagen original para analizar los hashes:

Asumiendo que hemos calculado el hash escogido para nuestras imágenes, ¿cómo los comparamos?

Utilizamos un método conocido como Distancia de Hamming³.

Para las imágenes de prueba, los phash (perceptual hash) son:

    e6cd90620d947bce
    e6ed90e609947b8c

La distancia de hamming calcula el número de bits que deben cambiar entre dos cadenas para ser idénticas.

En este caso, el resultado es de "6", y al ser menor a 10 según algunos autores (Dr. Neal Krawetz) se podría decir que las imágenes son similares.

Referencias

Proyectos personales del 2019

2019-10-16T00:00:00-05:00

Mis proyectos Personales

Y para mi próximo truco, un post inusual.

Este año tengo dos proyectos que avanzo en mi tiempo libre (o que intento al menos).

Librera

Librera es un marketplace de libros originales el cual llevo en conjunto con algunos compañeros. El objetivo es agrupar a diversos vendedores, ya sean librerías, vendedores independientes u ocasionales y permitirles contar con un espacio en el que publicar sus libros.

Uno de los problemas que intentamos resolver es la dificultad para obtener la mejor oferta respecto a algún libro en específico. Con nuestra plataforma, al agrupar diversos proveedores, esperamos facilitar.

El sistema utiliza tecnologías como: Python (Django), PostgresSQL (FTS), Redis, RQ, Selenium entre otros.

Además de ver el flujo normal de un ecommerce, lo que mayormente veo en este proyecto es el trabajo de realizar Web Scraping para obtener la información de los libros en base a su ISBN.

tucole.pe

tucole.pe es un agrupador de todos los colegios del Perú. Gracias a información publicada por el Ministerio de Educación tengo la idea de crear una web en la que los padres y los propios alumnos sean capaces de consultar, opinar y comparar las entidades educativas a nivel nacional.

En este caso, las tecnologías implicadas son: Python (Django), REST, GIS, Web Scraping.

El frontend aún está en desarrollo, pero espero lograr que quede muy similar a la captura anteriormente indicada.

Webscraping básico con Python - I

2019-02-13T00:00:00-05:00

¿Qué es el web scraping?

Es una técnica utilizada mediante programas de software para extraer información de sitios web. Usualmente, estos programas simulan la navegación de un humano en la World Wide Web ya sea utilizando el protocolo HTTP manualmente, o incrustando un navegador en una aplicación.¹

Entre algunos tipos de contenidos que podríamos necesitar extraer tenemos a:

listados de noticias o empleos
lista de productos, sus imágenes y precios
relación de libros
otros

A modo de ejemplo, extraeré contenido de la primera página de Hacker News.

Requerimientos

requests: para realizar la descarga del contenido del website
beautifulsoup4: nos permite navegar en el contenido extraido de forma sencilla

Los instalamos mediante pip:

pip install requests beautifulsoup4

Obtenemos el contenido en formato html de la página a consultar

::python
import requests

url = 'https://news.ycombinator.com/'

content = requests.get(url)
print(content.text)

Utilizamos beautifulsoup para navegar a través del código html

Ahora que tenemos el contenido, podemos por ejemplo, intentar listar los títulos de los 30 post que hacker news nos muestra en la primera página.

Notemos que podemos usar selectores css con beautifulsoup, por lo que es recomendable conocer los mismos, como:

selectores por id: "#boton_enviar"
selectores por clase: ".lista_de_items"
selectores de tipo: "button"
selectores de atributo: "[attr=value]"

Podemos darles un repaso en la documentación de Mozilla Developer Network

Entonces, si utilizamos el inspector de elementos de chrome o firefox en la web de Hacker News podemos observar algo como:

Donde vemos que el contenedor de la lista de historias tiene la clase "itemlist".

Y cada item de la tabla tiene la clase "storylink"

Entonces nuestro código para iterar sobre cada elemento quedaría como:

::python
import requests
from bs4 import BeautifulSoup

url = 'https://news.ycombinator.com/'

content = requests.get(url).text
print(content)

soup = BeautifulSoup(content, 'html.parser')

posts = soup.select('.itemlist .storylink')

print(len(posts), 'posts')
for post in posts:
    print(post.text)

Asi obtendremos el listado de títulos

30 posts
I Bought a House with Solar Panels
JP Morgan Unveils USD-Backed Cryptocurrency for B2B Payments
Amazon Pulls Out of Planned New York City Campus
You don't need to quit your job to make
A Distracted Walk with Fundamental Analysis

Extraer el enlace de cada post

Si quisiéramos avanzar un poco más podríamos obtener los enlaces mediante el método "get":

::python
for post in posts:
    print(post.text)
    print(post.get('href')

Notemos que podemos interactuar con el contenido de muchas maneras, las cuales se pueden revisar en la documentación de beautifulsoup

Otras consideraciones

Al realizar webscraping debemos tener en cuenta puntos como:

La legalidad: no siempre que algo esté publicado en internet significa que podamos copiarlo.
Sobrecarga del servidor: hay que tener cuidado con realizar demasiadas solicitudes al servidor al que queremos consultar, ya que no queremos realizar un ataque DDOS e inhabilitar el website.
No siempre los contenidos están en el formato que deseamos, a veces tenemos que utilizar expresiones regulares para extraer solo lo relevante.
Protección anti-webscraping: algunas webs tienen medidas como captchas, o bloqueos por IP al exceder cierto número de solicitudes.

Eso es todo.. por ahora

De momento sirve a modo de introducción. En otra oportunidad daré algún ejemplo más complejo.

Definición según wikipedia ↩

Instalar y configurar ModPageSpeed en nginx

2018-09-18T00:00:00-05:00

Hoy estuve investigando cómo mejorar el puntage de Google PageSpeed Insights, el cual es una página de google que mide la velocidad de carga de un website además de brindar algunas recomendaciones para mejorar dichas estadísticas.

Investigando encontré ModPageSpeeed un módulo para nginx (y apache) que realiza varias de aquellas optimizaciones, algunas como:

Minificar el html
Unificar archivos css o js
Convertir formatos de imágenes (como de jpg a webp si el navegador lo soporta)

Instalación con nginx (ubuntu server)

Activar el módulo requiere que nginx haya sido compilado con ModPageSpeed como extra, esto significa, que en caso ya contemos con nginx, deberemos reinstalarlo.

Nos aseguramos que tengamos instaladas las dependencias necesarias por nginx, esta referencia puede ayudarnos: Install and compile nginx

Nota: la referencia es tan solo para las dependencias mas no para el proceso de compilar nginx

Por ejemplo:

sudo apt-get install gcc lipcre3-dev zlib1g-dev libssl-dev libxml2-dev libxslt1-dev \
    libgd-dev libperl-dev libgd-dev libgeoip1 libgeoip-dev unzip uuid-dev \
    libjpeg-dev libfreetype6 libfreetype6-dev libtiff5-dev libwebp-dev liblcms2-dev \
    libxslt-dev

Utilizamos la instalación automática recomendada por ModPageSpeed

bash <(curl -f -L -sS https://ngxpagespeed.com/install) --nginx-version latest

Durante el proceso es posible que se nos pregunte si deseamos agregar algun parámetro extra durante la configuración, en mi caso agregué:

--with-debug --with-pcre-jit --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_v2_module --with-http_dav_module --with-http_slice_module --with-threads --with-http_addition_module --with-http_geoip_module=dynamic --with-http_gunzip_module --with-http_gzip_static_module --with-http_image_filter_module=dynamic --with-http_sub_module --with-http_xslt_module=dynamic --with-stream=dynamic --with-stream_ssl_module --with-stream_ssl_preread_module

esto por ejemplo para contar con características como http2 o geoip.

Listo, ya lo tenemos instalado. En mi caso, en el directorio:
```
/usr/local/nginx
```

Configuración

Asumiendo que ya tengamos algún server block ejecutándose:

1. Crear un directorio como "/var/ngx_pagespeed_cache" y cambiar el propietario a nuestro usuario de nginx. Aquí se almacenan los archivos temporales que va generar ModPageSpeed

2. Añadir una configuración similar a la siguiente en cada server block donde necesitemos ModPageSpeed:

    pagespeed on;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    pagespeed EnableFilters combine_css,extend_cache,rewrite_images,lazyload_images,collapse_whitespace,inline_javascript,inline_css,local_storage_cache,prioritize_critical_css;
    pagespeed EnableFilters rewrite_css,rewrite_javascript;
    # Ensure requests for pagespeed optimized resources go to the pagespeed handler
    # and no extraneous headers get set.
    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
      add_header "" "";
    }
    location ~ "^/pagespeed_static/" { }
    location ~ "^/ngx_pagespeed_beacon$" { }

3. Noten que podemos activar o desactivar los filtros a utilizar en la directiva "pagespeed EnableFilters" según los necesitemos.

4. Reiniciamos nginx y eso es todo

    ./nginx -s reload

Nota: cuando hemos instalado nginx, no se agregó al "path", ni tampoco se creó algun script para que auto-inicie, aquello queda a criterio del usuario.

Nota 2: siempre midan el cómo estaba antes y después, de ese modo se compara si realmente hubo alguna mejora o no (en mi caso la hubo).

Cómo hacer un form field de solo lectura en django

2018-06-22T00:00:00-05:00

Para hacer un "Form Field" de solo lectura basta utilizar el atributo "attrs" de los widgets y agregar la propiedad readonly como en el siguiente ejemplo:

Antes:

::python
from django import forms

class CommentForm(forms.Form):
    name = forms.CharField()

Después:

::python
class CommentForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(attrs={'readonly':'readonly'})
    )

Observación:

Notemos que cuando un input es de solo lectura, el usuario no puede modificarlo pero se sigue enviando en el formulario.

Para desactivar el envío totalmente se puede usar el atributo disabled de los form fields.

::python
class CommentForm(forms.Form):
    name = forms.CharField(disabled=True)

Referencias:

Blogs de tecnología de grandes compañías

2018-06-20T00:00:00-05:00

A continuación algunos blogs de tecnología de grandes compañías que vale la pena seguir.

Nota: en algunos casos destaco algún post/video

Otras referencias

Implementar un sitemap en django

2018-04-24T00:00:00-05:00

Continuando con un proyecto personal, esta vez tuve que implementar un archivo sitemap.xml.

¿Qué es el archivo sitemap.xml?

Es un archivo que los indexadores o "search engines" como google o bing utilizan para descubrir las páginas en nuestros websites. Ya que si bien los buscadores pueden "escanear" nuestra página sin ayuda hay casos en los que se recomienda incluir un sitemap (ver sección de "Información adicional").

¿Cómo implementar un sitemap en django?

Django cuenta con una aplicación oficial para la creación de sitemaps. Siguiendo su documentación, los pasos a seguir son:

1. Agregar 'django.contrib.sitemaps' a INSTALLED_APPS

2. Asumiendo que tenemos una aplicación llamada "libros", podríamos crear el archivo "libros/sitemaps.py"

libros/models.py:

django genera la url con el método get_absolute_url

::python
class Libro(models.Model):
    nombre = models.CharField(max_length=64)
    slug = models.SlugField(max_length=64, blank=True)

    def get_absolute_url(self):
        return reverse('libros:libro', kwargs={'slug': self.slug})

libros/sitemaps.py

::python
from django.contrib.sitemaps import Sitemap
from .models import Libro


class LibroSitemap(Sitemap):
    changefreq = 'weekly'
    priority = 0.5
    protocol = 'http'

    def items(self):
        return Libro.objects.all()

3 Registramos el sitemap en el archivo urls.py:

::python
from django.contrib.sitemaps.views import sitemap
from libros.sitemaps import LibroSitemap

sitemaps = {
    'libros': LibroSitemap,
}

urlpatterns = [
    ..
    path('sitemap.xml', sitemap, {'sitemaps': sitemaps}, name='django.contrib.sitemaps.views.sitemap')
]

4 Visitamos la dirección /sitemap.xml y eso sería todo.

Preguntas frecuentes

- ¿puedo tener un sitemap por cada aplicación?

Si quisiéramos agregar otro sitemap, por ejemplo para nuestras páginas estáticas podríamos realizar algo como:

pages/sitemaps.py

::python
from django.contrib import sitemaps
from django.urls import reverse


class PageSitemap(sitemaps.Sitemap):
    priority = 0.8
    changefreq = 'daily'

    def items(self):
        return ['home', 'sobre-nosotros', 'contacto']

    def location(self, item):
        return reverse(item)

urls.py : solo incluyo las secciones nuevas o que han cambiado

::python
..
from pages.sitemaps import PageSitemap

sitemaps = {
    'pages': PageSitemap,
    'libros': LibroSitemap,
}

- ¿Qué pasa si mi sitemap tiene más de 50 000 páginas?

Django permite crear un index para nuestro sitemaps, se recomienda revisar la documentación

- Mi sitemap tiene muchas páginas, es muy lento de procesar ¿y ahora quién podrá defenderme?

se puede utilizar el decorador cache_page de django, ya que no tiene sentido realizar un cálculo muy frecuente, cuando nuestros contenidos se actualizan diariamente o semanalmente.

- ¿cómo puedo utilizar https en mis sitemap?

utiliza el parámetro protocol.

Información adicional

Descargar un archivo y grabarlo en un FileField

2018-04-19T00:00:00-05:00

Estoy desarrollando un proyecto en django y uno de los módulos debe consultar un API externo y descargar imágenes para almacenarlas en un modelo.

Mi dilema fue:

¿Cómo descargar un archivo y almacenarlo en un modelo de django?

En resumen mi caso fue el siguiente:

1. Me conectaba al API de un tercero para obtener cierta información. Yo enviaba un identificador del producto, un código.

2. El api me retornaba campos como: nombre e imagen (una url)

3. Para no realizar consultas sucesivas y aprovechar que la información del producto no cambia con el tiempo decidí crear un modelo para almacenar la información recibida en cada consulta.

::python
   class Producto(models.Model):
       codigo = models.CharField(max_length=20)
       nombre = models.CharField(max_length=20)
       imagen = models.ImageField(upload_to='imagenes', blank=True)

4. En mi aplicación tuve que crear una función que maneje la descarga del archivo y lo registre en el modelo:

::python
from tempfile import NamedTemporaryFile
from django.core import files
import requests
from .models import Producto


def descarga_producto(codigo, nombre, imagen_url):
    p = Producto(codigo=codigo, nombre=nombre)

    request = requests.get(imagen_url, stream=True)
    if request.status_code != requests.codes.ok:
        return None
    lf = NamedTemporaryFile()
    for block in request.iter_content(1024 * 8):
        if not block:
            break
        lf.write(block)
    producto.imagen.save('filename', files.File(lf))
    producto.save()

En resumen lo que hace el código anterior es:

Descarga la imagen con la librería requests, notando que activamos el flag "stream" el cual permite descargar el archivo por partes (en caso sea muy grande para no sobrecargar la memoria)
Conforme va descargando la imagen, la almacenamos en un NamedTemporaryFile que es un archivo temporal que creamos y se almacena en el directorio de archivos temporales que utilicemos ('/tmp' generalmente)
Al terminar la descarga, le asignamos un nombre al archivo, lo grabamos y eso es todo.

Nota: no estamos validando que el archivo sea efectivamente una imagen.

Referencia

Download a remote image and save it to a Django model

Aplicaciones que utilizo

2018-04-12T00:00:00-05:00

Hay quien me pregunta (1 o 2 personas, pero alguien a fin de cuentas) por las herramientas, aplicaciones o webs que utilizo regularmente, así que para evitarme enumerar todo otra vez escribo un post (en realidad porque me gusta escribir).

Las herramientas/apps/webs que utilizo con frecuencia son:

1. Feedly: es un lector de RSS que permite organizar las fuentes de las noticias y acceder desde un navegador web o alguna de sus apps.

2. Evernote: es una herramienta para crear y organizar notas.

3. Duolingo: Aplicación para aprender idiomas mediante gamificación. En mi caso, para aprender inglés.

4. Google Drive: Para almacenar documentos y editarlos en tiempo real con terceras personas.

5. Twitter: Lo utilizo como fuente de noticias principalmente.

6. Hacker News: Otra fuente de noticias, principalmente relacionadas al mundo de la tecnología.

7. Medium: Es un servicio de publicación de blogs, aunque en mi caso solo lo utilizo para leer.

8. Goodreads: Aquí llevo un registro de libros que voy leyendo asi como obtengo algunas recomendaciones de qué libros Leer

9. Digital Ocean¹: Un proveedor de hosting (VPS) fácil de manejar. Es una buena alternativa frente a Amazon Web Services ya que la interfaz es muy amigable.

10. Namecheap: Plataforma para comprar dominios y certificados SSL.

11 Github y Gitlab: Ambos para almacenar código, aunque últimamente prefiero gitlab, allí todo es "free".

12 Pycharm: El IDE que utlizo para programar en python

El enlace de digital ocean es un enlace referido, lo que implica que ambos obtendremos créditos gratis en caso se registre. ↩

Cómo integrar django y mailgun

2018-04-08T10:26:00-05:00

Mailgun es un servicio que permite enviar emails transaccionales y emails masivos mediante la integración con su API o via SMTP.

Entre las ventajas de mailgun tenemos:

permite monitorizar el estado del envío del email: ¿llegó al destino?, ¿fue rechazado?, entre otros.
permite envíos masivos
tiene integración con webhooks para eventos como: cuando el recipiente abre el mensaje, abre un enlace, sucede un problema al enviar el email entre otros.
permite manejar varios dominios de forma separada para que uno no afecte la reputación de los demás en caso de algún problema de spam

Los pasos para realizar la integración son:

1. Registrar una cuenta en www.mailgun.com notando que cada mes tendremos para enviar hasta 10 000 emails gratuitos.

2. Luego en la opción dominios debemos agregar el dominio que enviará los correos.

Observemos que nos recomiendan usar un subdominio (el detalle se puede revisar en sus preguntas frecuentes).

3. Ahora que tenemos un dominio, debemos realizar algunas validaciones y configuraciones. Para esto, requerimos acceso al panel que gestiona los registros DNS del dominio.

La validación requerida es:

En el caso de digital ocean lo editamos en la sección "Networking":

4. Esperamos un tiempo prudencial (en el caso de digital ocean fueron 3 minutos, pero puede tomar horas según el proveedor) y presionamos el botón para validar los cambios.

5. El último paso es editar la configuración de envío de correos de django. En nuestro settings.py cambiamos los valores a algo como:

::django
EMAIL_HOST = 'smtp.mailgun.org'
EMAIL_HOST_USER = 'postmaster@mailgun.librera.pe'
EMAIL_HOST_PASSWORD = 'not-my-real-password'
DEFAULT_FROM_EMAIL = 'postmaster@mailgun.librera.pe'
EMAIL_PORT = 587
EMAIL_USE_TLS = True

Y listo, eso es todo, ya podemos enviar correos.

Nota: se recomienda que las credenciales esten fuera del archivo settings como en variables de entorno o algún otro método.

En caso se desee integrar características avanzadas de mailgun como webhooks, revisen su documentación, allí hay ejemplos de cómo manejarlo.

Más información

Análisis de legibilidad de textos

2018-02-14T00:00:00-05:00

Al parecer en el inglés existen dos palabras que hacen referencia a la facilidad para leer un texto¹:

legibility: legibilidad tipográfica, que se refiere a la tipografía (aspecto visual del texto)
readability: legibilidad lingüistica, que se refiere a la estructura lingüistica como el número de palabras que se usan y la forma en las que se combinan.

Este artículo trata sobre la fórmula necesaria para calcular la legibilidad lingüistica y su implementación en python².

Medir la legibilidad de textos en español puede ser requerido para:

evaluar la edad necesaria para comprender un texto
calcular qué tan sencillo de entender será para nuestro público objetivo
calcular tiempos de lectura

Algunas de las fórmulas aplicables al español son:

Escala INFLESZ (2008)
Legibilidad µ (2006)
Nivel de perspicuidad - Szigriszt-Pazos (1993)
Nivel de Comprensibilidad - Crawford (1989)
Nivel de comprensibilidad - Gutiérrez de Polini (1972)
Escala de lecturabilidad - Fernández Huerta (1959)

En este caso solo calcularemos la escala INFLESZ³, la cual requiere obtener el índice Flesh-Szigriszt:

Índice FLESCH-SZIGRISZT = 206,835 – (62,3 x S/P ) - P/F

Donde P es el número de palabras del texto, S el número de sílabas y F es el número de frases.

Escala Inflesz:

Puntos	Grado	Tipo de Publicación
< 40	Muy difícil	Universitario, Científico
40 - 55	Algo difícil	Bachillerato, Divulgación, Científico, Prensa especializada
55 - 65	Normal	ESO, Prensa general, Prensa deportiva
65 - 80	Bastante fácil	Educación primaria
> 80	Muy fácil	Educación Primaria, Cómic

Para llegar a lo anterior debemos dividir el problema, por lo cual necesitaremos:

1. el número de palabras de un texto: lo podemos obtener de la siguiente manera:

::python
def count_words(text):
    return len(text.split())

2. el número de sílabas de una palabra: este punto es un tanto más complejo porque requiere utilizar las reglas del español para dividir sílabas, para nuestro caso la referencia es: https://github.com/mabodo/sibilizador

3. el número de frases de un texto: utilizamos una expresión regular para agrupar los separadores como puntos, comas, dos puntos, entre otros. Luego utilizamos el método split de un objeto regex para separar las frases y las contamos.

::python
def count_sentences(text):
    text = text.replace("\n", "")
    sentence_end = re.compile('[.:;!?\)\()]')
    sencences = sentence_end.split(text)
    return len(list(filter(None, sencences)))

Y con esto, ya solo quedaría unir los bloques para lograr el cálculo deseado. Se puede ver el script original en python en github o la versión que empaqueté para pypi.

Más información

Código del paquete en pypi
legible.es: web con información sobre análisis de legibilidad de textos en español
Legibility, Readability, and Comprehension: Making Users Read Your Words: análisis del impacto de la legibilidad en la experiencia de usuario

Diferencia entre readability y legibility ↩
Me baso en el script publicado por Alejandro Muñoz en su blog: legible.es ↩
Inés Barrio, 2007, Legibilidad y salud. Tésis doctoral. pag 289 ↩

Herramientas para extraer texto de archivos PDF

2018-02-12T00:00:00-05:00

Algunos casos de uso en los que se requiera extraer texto de archivos pdf pueden ser:

ejecutar análisis de curriculums vitae (hojas de vida)
para permitir la búsqueda por contenidos en un archivo
obtención de los datos de contacto de empresas desde boletas o facturas de pago
conversión a un formato más amigable para su presentación en la web (html) entre otros

A continuación, 3 herramientas que se pueden utilizar para extraer texto de archivos PDF:

1. PDFMiner (python):

Enlace: pdfminer-six

** Instalación **:

pip install pdfminer.six

** Uso **:

pdf2txt.py archivo.pdf

** Características resaltantes **:

permite escoger el formato de salida: txt, xml, html
selección del rango de páginas a escanear

2. Apache Tika (java):

Apache tika es una herramienta que extrae metadatos y texto desde varios formatos como: doc, ppt, xls, pdf entre otros

** Enlace **: apache-tika

** Instalación y uso **:

Se requiere contar con java instalado, descargar tika y ejecutarlo de forma similar a:

java -jar tika-server.jar

** Características **

reconoce múltiples formatos de entrada
permite escoger el formato de salida: txt, xml, html
extracción de metadata: cantidad de páginas, versión de pdf, extensión del documento, número de páginas entre otros.
cuenta con una herramienta gráfica: tika-app.jar que se puede utilizar para realizar pruebas de forma rápida
existe un wrapper para utilizarlo con python: tika-python

3. pdftotxt (linux)

Herramienta para extraer pdf incluida por defecto en varias distribuciones linux.

** Documentación **: pdftotext

** Uso **

pdftotext documento.pdf

Con lo anterior, se crea el archivo: documento.txt

** Características **

selección del rango de páginas a escanear
es la más sencilla de utilizar ya que viene preinstalada

Comentarios finales

En general, quien me ha brindado mejores resultados para pdf's complejos ha sido apache tika y pdftotext para documentos sencillos.
Si lo que se busca es extraer imágenes de un PDF, en mi caso PDFBox me ha dado buenos resultados también.

Referencia:

Tools for Extracting Data and Text from PDFs - A Review: tools-for-extracting-data

Autodeploy en Gitlab

2017-07-09T00:00:00-05:00

En la industria del software siempre se busca automatizar las tareas repetitivas para dedicarle más tiempo a las que son realmente importantes. Una de estas tareas repetitivas es el llamado deploy.

El deploy¹ consiste en el conjunto de actividades que realizamos para que el software sea usable por el público.

Como ejemplo, listo las tareas que realizo para actualizar un proyecto que tiene html's estáticos:

Publicamos de un nuevo cambio en el repositorio, gitlab para nuestro caso (push)
Nos conectamos al servidor
Actualizamos el código en el servidor (pull)
Copiamos los archivos del proyecto al directorio en que el servidor web (nginx) trabaja.
Visualizamos los cambios en el website mediante el navegador

¿Cómo reducir el trabajo manual?

Encontré una aplicación opensource llamada Git-Auto-Deploy que actua como un pequeño servidor cuya función es escuchar los webhooks² que se lanzan cada vez que publicamos un cambio en el repositorio.

Los pasos a seguir para tenerlo configurado en nuestro servidor son:

1. Crear una llave ssh pública en el servidor: ssh-keygen -t rsa y luego la copiamos cat ~/.ssh/id_rsa.pub

2. Agregamos la clave como deployment key en el panel del repositorio de gitlab:

3. En el servidor en el que se va a realizar el auto-deploy clonamos la aplicación: git clone https://github.com/olipo186/Git-Auto-Deploy.git

4. En el directorio de Git-Auto-Deploy, duplicamos el archivo de configuración de ejemplo: cd GitDeploy; cp config.json.sample config.json

5. Editamos el archivo de configuración, el mio quedó similar a:

{
  "http-port": 8002,
  "log-file": "~/gitautodeploy.log",
  "pid-file": "~/.gitautodeploy.pid",
  "log-level": "INFO",

  "repositories": [
    {
      "url": "git@gitlab.com:test/test.git",
      "branch": "master",
      "remote": "origin",
      "path": "/var/www/test/",
      "deploy": "echo deploying;cp -r /var/www/test/* /var/www/html/.;echo end",
      "secret-token": "my-secret-gitlab-token"
    }
  ]
}

6. Ejecutamos la aplicación en segundo plano: python2.7 GitAutoDeploy.py -d

7. Registramos el webhook en gitlab: Gitlab: Settings : Integrations

8. Esto es todo, ahora cada que realicemos un push, la secuencia de comandos que hayamos registrado se debe ejecutar.

Referencia:

Autodeploy your gitlab projects: autodeploy-gitlab-post

Sofware deployment: [https://en.wikipedia.org/wiki/Software_deployment][https://en.wikipedia.org/wiki/Software_deployment] ↩
Webhooks: [https://es.wikipedia.org/wiki/Webhook][https://es.wikipedia.org/wiki/Webhook] ↩

Optimizando un sitio web - 1ra parte

2017-05-01T00:00:00-05:00

Hace buen tiempo quería escribir sobre este tema, lo usual, de registro para mí y en el blog por si le ayuda a alguien más.

Un sitio web se puede optimizar en múltiples aspectos, pero para comenzar me voy a centrar en el lado del frontend y no sin antes indicar que estoy utilizando recomendaciones de múltiples recursos entre los que destacan Google PageSpeed Insights y Pingdom Website Speed Test y otros websites a los que voy a citar.

¿Por qué optimizar?

Tal vez ganar unos kilobytes o milisegundos por cada recomendación a seguir no parezca mucho pero en su conjunto, importan.

Cuántas veces me ha pasado que abandono un blog porque el tiempo de carga es lento ya sea por que estoy con una red limitada como la del celular o por el peso del propio website.

Y así como me pasa, estudios indican que un visitante tiende a abandonar los sitios que identifica como lentos lo cuál se traduce en menos conversiones.

Entonces, ¿por qué?, diría que para brindar una mejor experiencia al usuario, porque ese usuario, podemos ser nosotros mismos en otro momento.

Claro, hay otras ventajas como un mejor posicionamiento en los buscadores, mejorar las conversiones o tan solo utilizar menos recursos del lado del servidor

Mejoras en el frontend

Minificar HTML, CSS y JS

Los espacios en blanco, saltos de línea y los comentarios pueden ocupar valiosos bytes.

Para removerlos pueden usar herramientas de postprocesamiento incorporadas en el framework o cms utilizado (plugins de wordpress) o con herramientas como gulp, grunt entre otros.

Google web developers: minificar recursos

Optimizar la entrega de webfonts

Al utilizar una 'web font' nos puede pasar que obtengamos:

flash of invisible content: no vemos el texto hasta no descargar la tipografía
flash of unstyled contend: vemos el texto pero este cambia su apariencia cuando al tipografía termina de descargar

Como muchos, recomiendo optimizarlo para el segundo caso, lo que se llama progressive enhancement mediante técnicas de lazy loading.

Existen otras formar de optimizar la entrega de tipografías como reducir el número de las mismas en la web o entregar solo el subconjunto de caracteres que utilizaremos.

Migrar a un stack de 'safe web fonts' o 'system fonts'

ya no estamos en el pasado cuando las tipografías por defecto de los sistemas operativos no eran 'agradables', ahora tenemos algunas opciones dentro de cada S.O. como:

windows: calibri, tahoma, consolas
macOS, iOS: helvetica, san francisco
android: roboto, droid sans
linux: ubuntu, oxygen

entonces, si podemos usar una fuente que viene instalada en el sistema, con la que el usuario está familiarizado y no tiene que descargar ningún extra ¿por qué no?

Habilitar la compresión de recursos

Además de minificar un archivo, también podemos comprimirlo mediante gzip. Esto generalmente se logra agregando unas cuantas líneas a la configuración de nuestro sevidor ya sea apache, nginx u otro.

Optimizar imágenes

Las imágenes se pueden optimizar de diferentes maneras:

mediante herramientas como: mozjpeg, optipng o gifsicle que recodifican la imagen, disminuyen la paleta de colores o una combinación de ambas.
reemplazando la imagen original por otro formato, como puede ser un png por un archivo svg o un png por un jpeg
utilizando webp
reemplazando la imagen por un efecto css

Algunos recursos

Google image optimization
Optimización de archivos PNG
TinyPNG: herramienta online para comprimir jpg y png
Thumbor: servidor de imágenes opensource

Reduce el tiempo de respuesta del servidor

Si bien, esta recomendación brindada por google tiene que ver con el backend, la anoto aquí por si alguien se pregunta el qué es.

Se refiere al tiempo que toma el servidor en procesar nuestra solicitud. Este tiempo puede verse afectado por factores como consultas SQL pesadas, renderizado de html, cálculos complejos entre otros.

Especificar la caché del navegador

Mediante el uso de algunas cabeceras, el navegador nos permite indicarle el tiempo de expiración de un recurso.

Por ejemplo, la siguiente cabecera:

expires:Tue, 09 May 2017 00:07:05 GMT

Quiere decir que el recurso expira en la fecha indicada y hasta entonces no es necesario que el navegador lo vuelva a descargar al visitar nuevamente la página.

Esto se activa desde la configuración del servidor: apache o nginx

Por ejemplo, para agregar recursos estáticos a la cache de nginx podemos agregar algo similar a:

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 7d;
}

Google Leverage Browser Caching

Elimina descargas innecesarias

Un buen ejemplo sería cuando el administrador de un website decide agregar un slide o carrousel con muchas imágenes sin preguntarse siquiera si el visitante se detendrá a revisar cada una de ellas.

Debemos evaluar si los recursos que utilizamos en una web son realmente utilizados, si compensa el costo de la descarga o tal vez podríamos prescindir de algunos.

Google: eliminate downloads

Notas finales

Algunas herramientas que pueden utilizar para medir el estado de un website son:

Como observación final, indico que voy a tratar de mantener este artículo actualizado e iré añadiendo más recomendaciones con el tiempo.

Buenas prácticas para escalar Django

2016-07-16T00:00:00-05:00

Mi resumen de una de las conferencias brindadas en la DjangoCon Europa 2016. Anton Pirker nos introduce en la historia (ficticia) sobre el cómo aparece un problema para escalar un nuevo proyecto con django en la vida real de un desarrollador que no tiene experiencia en la administración de servidores.

Para quien cuente con tiempo, le recomiendo que revise el video original, el cual está al al final de esta entrada (25 minutos). Pero para quien solo tenga unos minutos, aquí va mi resumen.

Anton comienza introduciendo al equipo:

Betty, desarrolladora web con experiencia en django y Marissa con el perfil administrativo.

Luego nos describe el stack actual del proyecto:

como se observa, tenemos nginx como servidor web, gunicorn como servidor python y postgresql como servidor de base de datos.

Se nos muestra que el sitio web, ya en producción, comienza a tener problemas, anda un poco lento. Betty decide investigar y descubre django debug toolbar. Con ello observa lo siguiente:

El sitio web está realizando 1292 querys en un tiempo de 813 ms (relativo, claro, a la pc al ordenador en que se realizan pruebas).

Betty investiga que una de las maneras para reducir el número de querys es mediante select related y prefetch related. Con lo que después de una nueva medición, llega a:

201 querys y 136 ms bajo las mismas condiciones

Este es un primer logro, por lo que decide monitorizar el servidor para saber qué sucede en él.

Escucha sobre New Relic, un servicio de monitorización de servidores con lo que observa las siguientes estadísticas:

server 1: 99.3% cpu, 99.6% disk , 91.6% memory

Con ello decide cambiar a 2 servidores y las nuevas estadísticas son:

server 1: 73.4% cpu , 49.3% disk , 80.8% memory db1 : 58.2% cpu , 54.3% disk , 55.6% memory

Siempre se debe monitorear los servidores para saber qué está pasando.

Betty sigue avanzando, esta vez desea experimentar con la cache, por lo que decide probar memcached. Memcached es un sistema que almacena objetos en memoria para ser accedidos de manera más eficiente.

Entonces, decide colocar un comentario en el html para saber en qué momento se está generando la página y observa algo como lo siguiente:

El problema es que observa que la fecha-hora de generación de las páginas siempre cambia. Esto significa que la cache no está trabajando como debería.

Luego de investigar un poco, concluye que es por las cookies. Por lo que decide removerlas.

Luego, sucede un error. Al parecer todos los usuario observan lo mismo, todos son Gina Caputo:

Entonces, la expresión de Betty, al comprender la causa, es similar a:

Y Marissa, bueno.. ya se imaginarán.

Betty investiga a fondo y después de un tiempo, leyendo sobre cómo funciona la cache, los middlewares de django y demás, logra solucionar el problema.

Despues de un fin de semana tranquilo, aparece otro error. Cada cierto tiempo, los usuarios observan :

y el log indica:

El error es causado porque el servidor de base de datos agota las conexiones. Entonces, decide utilizar pg bouncer, un gestor de conexiones para postgresql. Ahora si, parece que se ha vuelto una experta en bases de datos.

Y por fin tiene tiempo para investigar lo que siempre quiso, procesos asíncronos.

Lee sobre celery. Celery trabaja mediante "workers", los cuales procesan las tareas que están almacenada en una cola(queue) que Django va añadiendo. También aprende que debe utilizar un almacen de base de datos, por lo que investiga sobre redis.

Luego implementa flower, una herramienta para monitorizar celery, con lo que el stack finalmente queda similar a:

y por fin logra el Level 2 como desarroladora:

Con ello finaliza la charla, salvo por algunas preguntas de los espectadores.

Entre mis conclusiones, podría decir que se nos ha mostrado que llevar un proyecto a producción puede ser mucho más complicado de lo esperado. Puede requerir un esfuerzo colosal si no tenemos experiencia manejando servidores.

Pero, como siempre, nadie comienza sabiendo todo y poco a poco, se pueden ir añadiendo componentes según se necesiten.

Adjunto el video original:

Y los slides en slides.com.

Procesos de software y prácticas ágiles I

2015-11-26T00:00:00-05:00

Estoy llevando una especialización en Coursera llamada Software Product Management. A modo de resumen dicha especialización revisa las principales metodologías y prácticas de desarrollo ágil con el fin de que estemos en la capacidad de liderar a un equipo de desarrollo.

Sin mayor preámbulo, adjunto mis apuntes de la primera semana:

Semana 1 - Lección 1: Introducción

Objetivos de un mejor software:

tener el producto correcto
bien hecho
bien administrado

¿cómo conectar objetivos y personas? : por medio de procesos y prácticas

Semana 1 - Lección 1: Procesos y prácticas

Proceso -> organiza el desarrollo de un producto de software en diferentes etapas. comprende desde el inicio de la idea hasta el retiro del producto (de ser necesario).

las fases pueden darse en serie o paralelo, algunas pueden ser:

especificación -> concepción de la idea + listado de requerimientos
diseño e implementación
verificación y validación

Un proceso agrupa varias fases o etapas, las cuales a su vez comprenden un conjunto de actividades. las actividades contienen las tareas.

proceso > fases > actividades > tareas

las tareas pueden depender de otras tareas (implica orden)
un rol es un deber u obligación que una persona toma o desempeña: desarrollador, tester, CEO, cliente o product manager
"work product": diseños, requerimientos, código fuente, casos de test, documentación interna..
una tarea puede dar como resultado o requerir como entrada un "work product"
una tarea requiere recursos para ser completada: dinero, tiempo, tecnología, conocimiento o personal.

Las prácticas son tácticas que el SPM (software product manager) usa para hacer que los procesos se ejecuten fácilmente. Proveen guías en aspectos del desarrollo como : asignar fechas y organizar tareas, prevenir el desperdicio de recursos y monitorear el desarrollo del producto de trabajo. por ejemplo:

planear qué características van en cada lanzamiento
estimar la duración de las tareas
mantener reuniones breves diarias

Las prácticas se reúnen frecuentemente en una metodología.

Una metodología es un conjunto de prácticas. (por ejemplo scrum)

El manifiesto ágil provee una filosofía. Y una metodología ágil provee un conjunto de lineamientos y reglas. Independientemente de las prácticas que uses. Ellas están destinadas a proveer una estructura para lo que involucre el proyecto. Esta estructura puede ayudar a planear efectivamente un proyecto, completar fechas límites, mejorar la comunicación, seguir el progreso y finalmente, entregar un mejor software.

Por ejemplo, en la fase de especificación, tenemos muchas prácticas que describen cómo obtener y expresar requerimientos de los clientes.

Muchas metodologías promueven y facilitan la comunicación abierta entre clientes, SPM y desarrolladores.

Tener una comunicación abierta entre desarrolladores permite un desarrollo eficiente ya que las expectaciones son claras y todos conocen lo que todos están haciendo.

Un planeamiento y documentación efectiva previene que los trabajos sean completados por más de una persona. También previene que los desarrolladores produzcan una característica que tal vez no sea exactamente a lo que el cliente solicita.

Esto ayuda a mantener el proyecto en los tiempos planeados lo que ayuda a su vez a mantenerlo dentro del presupuesto.

Las prácticas y procesos son flexibles. Es posible tomar aspectos de varios procesos y prácticas para crear algo que cumpla todas tus necesidades. También pueden ser mejoradas y desarrolladas a través del tiempo.

Aprendiendo múltiples procesos y prácticas uno será capaz de generar o seleccionar un proceso o un conjunto de prácticas que funcione mejor para tu equipo.

Semana 1 - Lección 2:

Una actividad en ingeniería de software es un grupo de tareas relacionadas en el desarrollo de software. Cada actividad tiene como entrada y salida, productos de trabajo.

Un equipo debe decidir algunos aspectos del desarrollo, como convenciones de código, niveles de documentación, estrategias de testing y la definición de terminado.
Cualquier parte del proyecto que podría ir mal en algún modo sería la entrada para la actividad de gestión de riesgos. La salida es un plan de riesgos que delinea los riesgos potenciales y sus respectivos planes de mitigación.
Los tiempos de desarrollo están basados en estimados de cuánto tiempo tomará completar las tareas. Cuando los estimados están muy lejos, el cronograma se compromete. La entrada es una lista de tareas que necesitan ser completadas. La salida son los cronogramas.
La actividad de asignación de recursos incluye planeamiento y programación del cronograma de recursos de personal. Esto significa descomponer el horario de trabajo y asignar tareas.
Hacer mediciones es otra actividad que envuelve tareas como la definición, cálculo y análisis de métricas. Las métricas son usadas para realizar seguimiento y evaluar el producto y/o proceso. Las métricas pueden medir la densidad de defectos del producto, la velocidad a la que el equipo completa las tareas, el número de funciones completadas.

Algunas de las fases del desarrollo de software pueden ser:

** Fase de especificación **

Corresponde a la identificación de ideas y necesidades: sin una idea no hay producto a desarrollar.

** Fase de implementación **

Verificación y validación

Es donde validamos si el producto hace lo que está destinado a hacer y que cumpla las necesidades del cliente.

Las retrospectivas ayudan a identificar las áreas en las que se pueden mejorar la siguiente vez.

Nota:

El curso incluye material en formato PDF que se puede descargar desde la página de recursos del mismo o desde aquí

Django: Ejemplo de Form + InlineFormset

2015-02-23T00:00:00-05:00

A modo de práctica con los Form + Formset desarrollaré una aplicación para registrar recetas con sus respectivos ingredientes y procedimientos ¹.

El propósito será poder editar todo el detalle de una receta incluidos los ingredientes y procedimiento en la misma pantalla, de modo similar a como se trabaja en el admin de django con los inlines ².

1. MODELS

Necesitaremos 3 modelos: recetas, ingredientes y procedimientos.

::python
# models.py
from django.db import models


class Receta(models.Model):
    titulo = models.CharField(max_length=255)
    descripcion = models.TextField()


class Ingrediente(models.Model):
    receta = models.ForeignKey(Receta)
    descripcion = models.CharField(max_length=255)


class Instruccion(models.Model):
    receta = models.ForeignKey(Receta)
    numero = models.PositiveSmallIntegerField(help_text='Paso número')
    descripcion = models.TextField()

Como se ve, nada complicado para comenzar. El modelo "principal" es el de la receta. Tenemos también a los modelos Ingrediente e Intrucción con sus respectivos Foreign Key.

2. FORM:

Necesitamos un formulario para la receta:

::python
# forms.py
from django import forms
from .models import Receta


class RecetaForm(forms.ModelForm):
    class Meta:
        model = Receta

3. URL's

Necesitamos 3 url's para: el listado de recetas, registro y edición de las mismas.

::python
# urls.py
..
url(r'^$', 'recetas.views.recetas', name='lista'),
url(r'^recetas/registrar/$', 'recetas.views.registro_edicion', name='registrar'),
url(r'^recetas/(?P<receta_id>\d+)/$', 'recetas.views.registro_edicion', name='editar'),

4. VIEWS

Creamos dos vistas, una para listar nuestras recetas y la otra para manejar el registro y edición de las mismas.

Lo "complicado" se ve en la segunda vista:

Obtenemos una instancia de la receta actual en caso de que la estemos editando o creamos una nueva para el caso de un registro.
Inicializamos los dos InlineFormset, uno para los ingredientes y otro para las instrucciones.
En caso de que sea un pedido POST, validamos el formulario y los inlineformset, de ser válidos grabamos los cambios.
En caso de que sea un GET, inicializamos el form y los 2 formsets.

::python
# views.py
from django.shortcuts import render_to_response as render, redirect
from django.template import RequestContext as ctx
from django.forms.models import inlineformset_factory

from .models import Receta, Ingrediente, Instruccion
from .forms import RecetaForm


def recetas(request):
    recetas = Receta.objects.all()

    return render('recetas.html', locals(),
        context_instance=ctx(request))


def registro_edicion(request, receta_id=None):
    if receta_id:
        receta = Receta.objects.get(pk=receta_id)
    else:
        receta = Receta()

    IngredienteFormSet = inlineformset_factory(Receta, Ingrediente, extra=0, can_delete=True)
    InstruccionFormSet = inlineformset_factory(Receta, Instruccion, extra=0, can_delete=True)

    if request.method == 'POST':
        form = RecetaForm(request.POST, instance=receta)
        ingredienteFormset = IngredienteFormSet(request.POST, instance=receta)
        instruccionFormset = InstruccionFormSet(request.POST, instance=receta)

        if form.is_valid() and ingredienteFormset.is_valid() and instruccionFormset.is_valid():
            form.save()
            ingredienteFormset.save()
            instruccionFormset.save()
            return redirect('lista')
    else:
        form = RecetaForm(instance=receta)
        ingredienteFormset = IngredienteFormSet(instance=receta)
        instruccionFormset = InstruccionFormSet(instance=receta)

    return render('registro-edicion.html', locals(),
        context_instance=ctx(request))

5. TEMPLATES

Necesitamos un template para el listado de recetas:

::jinja
{% extends 'base.html' %}

{% block body %}
<h1>Recetas</h1>

<ol>
    {% for receta in recetas %}
        <li>
            <a href="{{ receta.get_absolute_url }}">{{ receta.titulo }}</a>
        </li>
    {% endfor %}
</ol>

<a href="{% url 'registrar' %}">Registrar receta</a>
{% endblock body %}

Observen que hemos añadido un método get_absolute_url al modelo Receta:

::python
    def get_absolute_url(self):
        return reverse('editar', kwargs={'receta_id': self.id})

Y el template para la parte del registro/edición que consta de:

Sección de administración para los formset (por ejemplo un campo lleva la cuenta del número actual de inlines y otro el del número inicial de los mismos)
El formulario de la receta
Los formularios para cada formset
Un template para cada formset que se toma como base para el proceso de "Añadir un nuevo Ingrediente o Instrucción". Nótese que para clonar este template estoy utilizando un poco de jquery.
Código javascript que maneja el proceso de clonación

El template es el que sigue:

::jinja
{% extends 'base.html' %}

{% block body %}
<form method="post" action="#">
    {% csrf_token %}

    {{ ingredienteFormset.management_form }}
    {{ instruccionFormset.management_form }}

    <fieldset class="form ">
        {% for field in form %}
            <div class="form-row">
                <div class="field-box">
                    {{ field.errors }}
                    {{ field.label_tag }}: {{ field }}
                </div>
            </div>
        {% endfor %}
    </fieldset>

    <fieldset>
        <legend>Ingredientes</legend>
        <ul id='formset-ingredientes'>
            {% for form in ingredienteFormset %}
                {{ form.id }}
                <li>
                    {{ form.as_ul }}
                </li>
            {% endfor %}
        </ul>

        <button id='btnIngrediente'>Añadir Ingrediente</button>
    </fieldset>

    <fieldset>
        <legend>Instrucciones</legend>
        <ul id='formset-instrucciones'>
            {% for form in instruccionFormset %}
                {{ form.id }}
                <li>
                    {{ form.as_ul }}
                </li>
            {% endfor %}
        </ul>

        <button id='btnInstruccion'>Añadir Instrucción</button>
    </fieldset>

    <button>Enviar</button>
</form>

<script type='template/ingrediente'>
    {{ ingredienteFormset.empty_form.as_ul }}
</script>

<script type='template/instruccion'>
    {{ instruccionFormset.empty_form.as_ul }}
</script>

<script>
$(function(){

    // Reemplaza todas las coincidencias en vez de solo la primera
    function replaceAll(text, busca, reemplaza){
          while (text.toString().indexOf(busca) != -1)
            text = text.toString().replace(busca, reemplaza);
          return text;
    }

    var $totalIngredientes = $('#id_ingrediente_set-TOTAL_FORMS');

    $('#btnIngrediente').click(function(event) {
        event.preventDefault();
        var total = parseInt($totalIngredientes.val(), 10);
        var clon = $('script[type="template/ingrediente"]').html();
        clon_html = replaceAll(clon, '__prefix__', (total).toString());
        $('#formset-ingredientes').append(clon_html);
        $totalIngredientes.val(total +  1);
    });

    var $totalInstrucciones = $('#id_instruccion_set-TOTAL_FORMS');

    $('#btnInstruccion').click(function(event) {
        event.preventDefault();
        var total = parseInt($totalInstrucciones.val(), 10);
        var clon = $('script[type="template/instruccion"]').html();
        clon_html = replaceAll(clon, '__prefix__', (total).toString());
        $('#formset-instrucciones').append(clon_html);
        $totalInstrucciones.val(total +  1);
    });
})
</script>
{% endblock body %}

Y con ello concluye el proceso.. claro, sin olvidar que hay que ensamblar las partes³.

Por cierto, si bien he utilizado vistas basadas en funciones, sé que es posible realizar lo mismo con las vistas basadas en clases.

* Aunque tengo mis dudas respecto la complejidad del código en ese otro caso.

Referencias

Form with one Formset example

La idea la tomé de este post. ↩
En el admin de django es posible editar un modelo con sus "inline models" mediante los TabularInline y StackedInline. ↩
pero aquello queda de tarea ↩

RiotJS: Tutorial #1

2015-02-22T00:00:00-05:00

Slug: riotjs-tutorial-1 Author: alexander

Ahora que cuento con un tanto de tiempo libre, es momento de revisar algunos frameworks javascript.

Después de analizar las opciones (y vaya que son muchas) comenzaré con RiotJS¹.

RiotJS es un framework javascript minimalista, entre sus características destacadan: el sistema de etiquetas personalidadas, su sencilla sintaxis y su pequeño tamaño.

Nota: Este tutorial es una adaptación de "The react tutorial for riot", el cual a su vez es otra adaptación del tutorial de ReactJS para RiotJS.

El objetivo del tutorial² es construir un sistema de comentarios que podría incluirse en un blog. Las características de este sistema son:

Tiene una vista de todos los comentarios anteriores
Cuenta con un formulario para registrar nuevos comentarios
Se integra con un backend para almacenar los comentarios³

Y como adicionales:

Comentarios optimistas: los comentarios aparecen antes de ser registrados en el backend
Actualizaciones en vivo, es posible ver los comentarios de otras personas en tiempo real.

1. Estructura

Los bloques a considerar para nuestra implementación son:

- CommentBox
    - CommentList
        - Comment
    - CommentForm

Los cuales se refieren al contenedor general, la lista de comentarios, cada comentario propiamente dicho y al formulario.

Como mencionamos, uno de los puntos fuertes de Riot es que nos permite usar etiquetas personalizadas. Para aprovechar esto crearemos un archivo llamado comments.tag y escribiremos lo siguiente en el:

::text
    <comment-box>
      <h1>Comentarios</h1>

      <comment-list comments={ comments } />
      <comment-form />
    </comment-box>

    <comment-form>
      <form>
        <input type="text" name="name">
        <textarea name="message"></textarea>
        <input type="submit" value="Publicar">
      </form>
    </comment-form>

    <comment-list>
      <comment each={ opts.comments } />
    </comment-list>

    <comment>
      <div>
        <h2>Mi nombre</h2>
        <p>Mi comentario</p>
      </div>
    </comment>

Lo anterior representa a los bloques inicialmente descritos:

Nuestro comment-box que tiene un elemento comment-list al cual le está pasando como parámetro la lista de comentarios.
El comment-form que representa al formulario por el que se registran nuevos comentarios
El comment-list que contiene una lista de elementos comment sobre la que va a iterar.
El comment que es el comentario propiamente dicho.

2. Montar los componentes

Ahora que tenemos los componentes, vamos a integrarlos con nuestra web.

Nuestro archivo HTML principal (index.html) debe lucir similar a:

::html
<html>
    <head>
        <title>Sistema de comentarios</title>
        <script src="https://cdn.jsdelivr.net/g/riot@2.0.11"></script>
    </head>

    <body>
        <comment-box></comment-box>

        <script src='comments.js'></script>

        <script>
            riot.mount('comment-box');
        </script>

    </body>
</html>

En el html, hemos incluido nuestro contentenedor general (<comment-box>), el archivo comments.js y un script que monta⁴ nuestra etiqueta <comment-box>.

Observen además que hemos incluido un script comments.js en el documento, este se obtiene al compilar nuestro archivo comments.tag.

Para compilar el archivo .tag tenemos dos opciones:

1. Incluir el archivo compiler.js en el head de nuestra página

2. Compilar en el lado del servidor, para ello necesitamos instalar riot mediante npm:

npm install riot

Con ello tendremos acceso al binario riot, al cual le indicaremos que observe los cambios en los archivos tag en nuestro directorio actual y los compile:

riot -w .

Para comprobar si todo va bien hasta ahora, podríamos levantar un servidor en local:

python -m SimpleHTTPServer

si vamos a 127.0.0.1:8000, veremos que solo se ha cargado el formulario (nota: verificar que no exista ningún error en el inspector de elementos⁵)

En el siguiente paso añadiremos algunas funcionalidades.

3. Incluyendo variables y estados

Otra de las características de riot nos permite enviar variables al tag⁶ que estamos montando.

Editamos el archivo index.html, cambiamos la línea que monta el tag por:

riot.mount('comment-box', {title: 'Comentarios'});

y actualizamos nuestro archivo .tag para que incluya nuestra variable title:

::text
<comment-box>
  <h1>{ opts.title }</h1>

  <comment-list comments={ comments } />
  <comment-form />
</comment-box>

*Las opciones que enviamos a nuestro tag como contexto quedan almacenadas en la variable opts⁷, con lo que el título de nuestra tag será el parámetro que enviamos.

Añadiendo un poco más de código para manejar el registro de nuevos comentarios:

::text
<comment-box>
  <h1>{ opts.title }</h1>

  <comment-list comments={ comments } />
  <comment-form />

  this.comments = []
  add(comment) {
    this.comments.push(comment)
  }
</comment-box>

<comment-form>
  <form onsubmit={ add }>
    <input type="text" name="name">
    <textarea name="message"></textarea>
    <input type="submit" value="Publicar">
  </form>

  add(e) {
    var comment = {
      name: this.name.value,
      message: this.message.value
    }
    this.parent.add(comment)
    e.target.reset()
  }
</comment-form>

<comment-list>
  <comment each={ opts.comments }/>
</comment-list>

<comment>
  <div>
    <h2>{ this.parent.name }</h2>
    <p>{ this.parent.message }</p>
  </div>
</comment>

Hemos creado una función add(e) que maneja el evento onsubmit de nuestro formulario. Esta función captura los valores ingresados, los envía al tag padre (<comment-box>) y resetea⁸ el formulario. Observe que los campos con un atributo name se pueden acceder directamente mediante this.name

En el tag <comment-box> se tiene otra función que inserta el comentario en la lista de comentarios.

También, en nuestra etiqueta comment estamos mostrando los atributos name y message de cada iteración, por medio de los atributos del padre.

Otra opción más "explícita" sería enviando el nombre y mensaje como variables de contexto:

::text
<comment-list>
  <comment each={ opts.comments } name={ this.name } message={ this.message }/>
</comment-list>

<comment>
  <div>
    <h2>{ opts.name }</h2>
    <p>{ opts.message }</p>
  </div>
</comment>

Con lo realizado hasta ahora, podemos volver a abrir nuestro navegador y probar.

4. Carga y persistencia de nuestros comentarios

Lo que sigue es implementar la comunicación de nuestra aplicación con algún backend para que los comentarios registrados queden almacenados. Para el ejemplo, voy a utilizar Parse.

Nos registramos y creamos una nueva aplicación. Luego copiamos los valores del Application ID y el Javascript Key.

En nuestro archivo html debemos insertar el script de parse (para facilidad nuestra, podemos usar el del CDN):

<script src="//www.parsecdn.com/js/parse-1.3.4.min.js"></script>

Luego, debemos inicializar la aplicación:

Parse.initialize("APP_KEY", "JS_KEY");

En nuestra etiqueta comment-box, modificamos el método add para que también registre el comentario en Parse:

::javascript
add(comment) {
  this.comments.push(comment)
  var Comment = Parse.Object.extend("Comment")
  var _comment = new Comment()
  _comment.save(comment)
}

Añadimos también un método load que realizará la carga de comentarios desde Parse:

::javascript
load() {
  var self = this
  var Comment = Parse.Object.extend('Comment')
  var queryComment = new Parse.Query(Comment)

  queryComment.find({
    success: function (results) {
      var tmp_comments = []
      for (var i = 0; i < results.length; i++) {
        tmp_comments.push(results[i].toJSON())
      }

      self.update({'comments': tmp_comments})
    },
    error: function (error) {
      alert("Error: " + error.code + " " + error.message)
    }
  })
}

Nótese que al terminar de recuperar los comentarios, estamos activando manualmente el evento update para que se refresquen los comentarios visibles.

También debemos iniciar nuestro método manualmente al menos una vez this.load().

Luego, para que el sitio refresque los comentarios cada cierto tiempo, podemos añadir:

setInterval(this.load, opts.interval)

Y en nuestra llamada al mount en el index, agregamos el parámetro interval:

riot.mount('comment-box', {title: 'Comments', interval: 2500});

Pueden revisar la versión final del código en este gist.

Como se observa en el resultado final, lo que me sorprende es la poca cantidad de código que se requiere para tener un sistema de comentarios con persistencia en el backend haciendo presente que tampoco se pierde legibilidad en el código.

Referencias:

The react tutorial for riot

El plan original incluye revisar AngularJS y ReactJS también. ↩
El detalle es casi idéntico al tutorial de ReactJS, tan solo difiere en la capacidad para realizar comentarios con markdown. ↩
Como backend estoy utilizando ParseJS ↩
RiotJS llama montar al proceso de incluir nuestras etiquetas personalizadas y su respectiva lógica en el documento HTML. ↩
Me refiero al inspector de elementos de chrome o a su equivalente en firefox. ↩
tag o etiqueta ↩
riot.js mount ↩
Se puede acceder al elemento que origina el evento con e.target. Para más detalle, consultar la documentación: https://muut.com/riotjs/guide/#event-object ↩

Awesome Django

2015-01-24T00:00:00-05:00

Si tuviera que enumerar los motivos por los que utilizo django, serían: python, su filosofía y su comunidad.

En este post plasmo una pequeña recopilación de aplicaciones y proyectos de terceros que me han facilitado el programar con django, esperando que a alguién más le sea de utilidad.

Aunque tal vez me olvide de uno que otro, aquí va mi lista:

1. Django debug toolbar

https://github.com/django-debug-toolbar/django-debug-toolbar

Conjunto de paneles configurables que muestran información que ayuda al proceso de hacer debug del request actual. Algunos de ellos son:

Versiones: para conocer la versión de python, django y otros paquetes utilizados
SQL: muestra la lista de consultas SQL invocadas en el request.
Configuraciones: lista de variables del archivo settings
Templates: plantillas html renderizadas
otros..

2. Django grappelli

https://github.com/sehmaschine/django-grappelli

Es un "tema" para reemplazar a la apariencia por defecto del admin de django. Cuenta además con varias utilidades para hacer el uso del admin más personalizable.

3. Django Filebrowser

https://github.com/sehmaschine/django-filebrowser

Gestor de archivos media para el admin de django. Nota: es del mismo desarrollador de grappelli por lo que se integran perfectamente.

4. Django Admin Honeypot

https://github.com/dmpayton/django-admin-honeypot

Un falso login para el admin de django que notifica a los administradores de intentos de acceso desautorizados.

5. Django Ratelimit

https://github.com/jsocol/django-ratelimit

Decorador que restringe el acceso a determinadas vistas (views) en base a ciertos parámetros como por ejemplo, el número de consultas realizadas por una IP en cierto intervalo.

6. Django Nose

https://github.com/django-nose/django-nose

Todas las bondades de nose para django.

7. Django Extensions

https://github.com/django-extensions/django-extensions

Conjunto de comandos adicionales para la administración del proyecto (manage.py). Entre las utilidades destacan:

shell_plus: shell que auto carga los modelos de nuestra aplicación.
runscript: ejecuta un script en el contexto de nuestro proyecto.
show_urls: muestra la lista de todas las url's.
graph_models: permite visualizar nuestros modelos en un diagrama.

8. Django Celery

http://celery.readthedocs.org/en/latest/index.html

Gestor de colas distribuido.

9. Django RQ

https://github.com/ui/django-rq

Provee integración entre RQ y django. RQ es un gestor de colas que utiliza redis como backend. Su objetivo es ser una alternativa ligera a celery.

10. Django Sentry

https://github.com/getsentry/sentry

Sentry es un proyecto que nos ayuda en las tareas de detección, registro y agrupación de los errores de nuestro proyecto.

11. Python Social Auth

https://github.com/omab/python-social-auth

Aplicación para gestionar la autenticación y registro en diversas plataformas sociales (facebook, twitter, etc).

12. Django Taggit

https://github.com/alex/django-taggit

Sistema de gestión de etiquetas en nuestros modelos.

13. Django Geoposition

https://github.com/philippbosch/django-geoposition

Model field¹ que permite insertar coordenadas geolocalizadas con ayuda de google maps.

14. Django Recaptcha

https://github.com/praekelt/django-recaptcha

Form field¹ para insertar un recaptcha en los formularios.

15. Django Mptt

https://github.com/django-mptt/django-mptt

Utilidades para implementar un modelo que almacena información jerárquica. Por ejemplo, un sistema de categorías anidadas.

16. Django Redis

https://github.com/niwibe/django-redis

Aplicación que permite utilizar redis como un backend de cache.

17. Django Summernote

https://github.com/summernote/django-summernote

Editor [wysiwyg]² para django.

18. Sorl Thumbnail

https://github.com/mariocesar/sorl-thumbnail

Gestor de miniaturas.

19. Django ModelTranslation

https://github.com/deschler/django-modeltranslation

Traduce nuestros modelos utilizando un enfoque similar al del admin (por medio de registros).

20. Restless

https://github.com/toastdriven/restless

Miniframework REST ligero.

21. Django Watchman

https://github.com/mwarkentin/django-watchman

Genera una url para mostrar el estado de algunos backends (cache, database, email).

22. Django Simple Captcha

https://github.com/mbi/django-simple-captcha

Generador de captchas simples.

23. Django uuslug

https://github.com/un33k/django-uuslug

Generador de slug's unicode únicos.

24. Supervisor

https://github.com/Supervisor/supervisor

Sistema de control de procesos para UNIX. Lo he utilizado para monitorizar y reiniciar automáticamente algunos demonios (uwsgi, colas).

25. Fabric

http://www.fabfile.org/

Herramienta de línea de comandos que facilita tanto el despliegue de aplicaciones como las tareas de administración de un sistema.

26. uwsgi

https://uwsgi-docs.readthedocs.org/en/latest/

Servidor de aplicaciones para python (soporta otros lenguajes). Lo utilizo generalmente en conjunto con nginx como servidor web.

27. Pillow

https://github.com/python-pillow/Pillow

Fork de PIL, es una librería de manipulación de imágenes de python.

28. Unidecode

https://github.com/iki/unidecode

Transliteración de texto unicode. Permite representar texto unicode en ASCII.

29. PEP 8

https://github.com/jcrocholl/pep8

Herramienta de checkeo de estilos.

Referencias:

No se me ocurre ninguna traducción adecuada. ↩↩
Lo que ves es lo que obtienes (o al menos esa es la idea) ↩

Dropzone + Django

2014-10-19T00:00:00-05:00

DropzoneJS es una libreria opensource que permite subir archivos mediante la acción "arrastrar y soltar" con la capacidad de mostrar vistas previas de las imágenes.

Para este ejemplo utilicé django 1.7 + Python 2.7, pero no debería existir ningún problema para utilizarlo con otras versiones.

Los pasos que realicé, en resumen son:

1. Descargar el último release y añadirlo a nuestro directorio de archivos static.

2. Creamos el modelo:

::python
class Picture(models.Model):
    imagen = models.ImageField("Imagen", upload_to='imagenes')

3. .. el formulario:

::python
class PictureForm(forms.ModelForm):

    class Meta:
        model = Picture
        fields = ('imagen',)

4. .. la url:

::python
url(r'^upload-picture/$', 'upload_picture', name='upload_picture'),

5. .. el view:

::python
from django.shortcuts import render_to_response as render
from django.template import RequestContext as ctx

from .forms import PictureForm


def upload_picture(request):
    if request.method == 'POST':
        form = PictureForm(request.POST, request.FILES)

        if form.is_valid():
            picture = form.save()
    else:
        form = PictureForm()

    return render("upload_picture.html", locals(), ctx(request))

6. Y por último, el template "upload_picture.html":

::html
{% load static %}

<html>
    <head>
        <link rel="stylesheet" href="{% static 'dropzone/css/dropzone.css' %}">
    </head>

    <body>
        <form action="{% url 'upload_picture' %}" class="dropzone" id="myDropzone" method='POST' enctype="multipart/form-data">
            {% csrf_token %}

            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </form>

        <script src="{% static 'dropzone/dropzone.min.js' %}"></script>
        <script type="text/javascript">
            Dropzone.options.myDropzone = {
                paramName: "imagen", // el nombre de nuestro input
                autoProcessQueue : true,
                parallelUploads: 1,

                init: function() {
                    this.on("success", function(file, responseText) {
                        // evento lanzado al terminar de subir las imágenes en cola
                        console.log(responseText);
                    });
                }
            };
        </script>
    </body>
</html>

Tan sencillo como eso.

Nota: tomé como referencia a este post "DropzoneJs + Django: How to build a file upload"

Archivo .hgignore para Android Studio

2014-05-29T00:00:00-05:00

Ya que no es buen hábito incluir archivos autogenerados en un proyecto, y necesitaba una lista de archivos a ignorar para usar conjuntamente al Android Studio..

Estuve buscando y terminé utilizando el siguiente archivo, el cual obtuve del blog: Digital Assassin

# built application files
glob:*.apk
glob:*.ap_

# files for the dex VM
glob:*.dex

# Java class files
glob:*.class

# generated files
bin/
gen/

# Ignore gradle files
.gradle/
build/

# Local configuration file (sdk path, etc)
local.properties

# Proguard folder generated by Eclipse
proguard/

# Android Studio
.idea/workspace.xml
.idea/tasks.xml
.iws
.DS_Store

# linux
.directory

Servidor en django para Google Cloud Messaging para Android (II)

2014-05-27T00:00:00-05:00

En la primera parte mostré el cómo implementar un servidor en django que interactúe con google cloud messages. En esta segunda parte, queda el implementar un cliente en Android que será quien reciba las notificaciones.

Las instrucciones siguientes, toman como referencia el ejemplo publicado en la documentación.

Paso 3: Implementando el cliente en android

Creamos un nuevo proyecto cuyo nombre de paquete debe ser el que configuramos en el archivo settings.py del proyecto en django. Luego:

1. Añadimos Google Play Services a las dependencias, y en caso de que estemos utilizando graddle, el archivo build.gradle debería terminar con una sección similar a:

dependencies {
  compile "com.google.android.gms:play-services:3.1.+"
}

2. Añadimos los permisos al archivo manifest:

::xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />

<permission android:name="com.alexanderae.demo_gcm.permission.C2D_MESSAGE"
    android:protectionLevel="signature" />
<uses-permission android:name="com.alexanderae.demo_gcm.permission.C2D_MESSAGE" />

Los dos últimos bloques son para prevenir que alguna aplicación ajena a la nuestra registre o reciba los mensajes que van dirigidos a nuestra app.

3. También en el manifest, debemos de añadir un BroadcastReceiver que capturará el evento de "recibir una notificación" y un Servicio que será lanzado por dicho receiver:

<receiver
    android:name=".GcmBroadcastReceiver"
    android:permission="com.google.android.c2dm.permission.SEND" >
    <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <category android:name="com.alexanderae.demo_gcm" />
    </intent-filter>
</receiver>
<service android:name=".GcmIntentService" />

Dentro del bloque application debemos incluir la versión de google play services a utilizar. Para ello, añadimos el siguiente bloque:

::xml
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

4. Creamos una nueva clase que contendrá al receiver que habíamos declarado en el manifest (GcmBroadcastReceiver.java):

::java
public class GcmBroadcastReceiver extends WakefulBroadcastReceiver {
    @Override
    public void onReceive(Context context, Intent intent) {
        // Especificamos el servicio que manejará el evento
        ComponentName comp = new ComponentName(context.getPackageName(),
                GcmIntentService.class.getName());
        // Inicia el servicio, manteniendo al dispositivo despierto.
        startWakefulService(context, (intent.setComponent(comp)));
        setResultCode(Activity.RESULT_OK);
    }
}

5. Creamos el servicio declarado también en el manifest (GcmIntentService.java). Para este ejemplo, nuestra acción a realizar será el lanzar una notificación:

::java
public class GcmIntentService extends IntentService {
    public static final int NOTIFICATION_ID = 1;
    NotificationManager mNotificationManager;
    String TAG = "GcmIntentService";

    public GcmIntentService() {
        super("GcmIntentService");
    }

    @Override
    protected void onHandleIntent(Intent intent) {
        Bundle extras = intent.getExtras();
        GoogleCloudMessaging gcm = GoogleCloudMessaging.getInstance(this);
        // El parámetro intent de getMessageType() debe ser el intent enviado por el
        // BroadcastReceiver.
        String messageType = gcm.getMessageType(intent);

        if (!extras.isEmpty()) {
            /*
             * Filtramos los mensajes basados en el tipo (aparentemente en un futuro cercano, se
             * añadirán tipos de mensajes)
             */
            if (GoogleCloudMessaging.
                    MESSAGE_TYPE_SEND_ERROR.equals(messageType)) {
                sendNotification("Send error: " + extras.toString());
            } else if (GoogleCloudMessaging.
                    MESSAGE_TYPE_DELETED.equals(messageType)) {
                sendNotification("Deleted messages on server: " +
                        extras.toString());
                // Si es un mensaje normal, ejecutamos la acción deseada.
            } else if (GoogleCloudMessaging.
                    MESSAGE_TYPE_MESSAGE.equals(messageType)) {
                // Lanzamos la notificación
                sendNotification("Received: " + extras.toString());
                Log.i(TAG, "Received: " + extras.toString());
            }
        }
        // Liberamos el bloqueo
        GcmBroadcastReceiver.completeWakefulIntent(intent);
    }

    // A modo de ejemplo, lanzamos una notificación al recibir el mensaje..
    // Podemos realizar cualquier otra acción según nuestras necesidades.
    private void sendNotification(String msg) {
        mNotificationManager = (NotificationManager)
                this.getSystemService(Context.NOTIFICATION_SERVICE);

        PendingIntent contentIntent = PendingIntent.getActivity(this, 0,
                new Intent(this, MainActivity.class), 0);

        NotificationCompat.Builder mBuilder =
                new NotificationCompat.Builder(this)
                        .setSmallIcon(R.drawable.ic_launcher)
                        .setContentTitle("Notificación GCM")
                        .setStyle(new NotificationCompat.BigTextStyle()
                                .bigText(msg))
                        .setContentText(msg);

        mBuilder.setContentIntent(contentIntent);
        mNotificationManager.notify(NOTIFICATION_ID, mBuilder.build());
    }
}

6. En nuestro MainActivity:

Agregamos algunas variables y constantes a utilizar:

::java
TextView mDisplay; // debemos añadir un TextView al layout
GoogleCloudMessaging gcm;
Context context;

private final static int PLAY_SERVICES_RESOLUTION_REQUEST = 9000;
String regid; // ID asignado por GCM para el dispositivo
String TAG = "MainActivity";
String SENDER_ID = "160161620856"; // ID del Proyecto obtenido de la consola de desarrolladores
// de Google
String NAMESPACE = "http://192.168.1.35:8001/gcm/"; // URL del servidor GCM (django)

public static final String PROPERTY_REG_ID = "registration_id";
private static final String PROPERTY_APP_VERSION = "appVersion";

En el onCreate verificamos que Google Play Services esté instalado, en caso afirmativo, continuamos recuperando el código de registro, caso contrario, llamamos a la función registerInBackground para crear un nuevo código.

Se nos recomienda que verifiquemos que GPS (Google Play Services) esté instalado en cada llamada al evento onResume:

::java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mDisplay = (TextView) findViewById(R.id.display);

    context = getApplicationContext();

    // Verifica que Google Play Services esté instalado
    if (checkPlayServices()) {
        gcm = GoogleCloudMessaging.getInstance(this);
        regid = getRegistrationId(context);

        if (regid.isEmpty()) {
            registerInBackground();
        }
    } else {
        Log.i(TAG, "No se encontró Google Play Services.");
    }
}

@Override
protected void onResume() {
    super.onResume();
    checkPlayServices();
}

Agregamos las funciones que verifican la instalación de GPS, la que obtiene el código de registro (getRegistrationId + getGCMPreferences) y la que obtiene la versión de la aplicación (getAppVersion):

::java
// Verifica que Google Play Services esté instalado.
private boolean checkPlayServices() {
    int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(this);
    if (resultCode != ConnectionResult.SUCCESS) {
        if (GooglePlayServicesUtil.isUserRecoverableError(resultCode)) {
            GooglePlayServicesUtil.getErrorDialog(resultCode, this,
                    PLAY_SERVICES_RESOLUTION_REQUEST).show();
        } else {
            Log.i(TAG, "Dispositivo no soportado!");
            finish();
        }
        return false;
    }
    return true;
}

// Obtiene el código de registro
private String getRegistrationId(Context context) {
    final SharedPreferences prefs = getGCMPreferences();

    String registrationId = prefs.getString(PROPERTY_REG_ID, "");
    if (registrationId.isEmpty()) {
        Log.i(TAG, "Registro no encontrado");
        return "";
    }
    // Verifica si la aplicación fue actualizada, en cuyo caso, se debe volver a generar
    // un código de registro.
    int registeredVersion = prefs.getInt(PROPERTY_APP_VERSION, Integer.MIN_VALUE);
    int currentVersion = getAppVersion(context);
    if (registeredVersion != currentVersion) {
        Log.i(TAG, "La versión de la aplicación ha cambiado.");
        return "";
    }
    return registrationId;
}

// Obtiene el código de registro desde los SharedPreferences
private SharedPreferences getGCMPreferences() {
    return getSharedPreferences(MainActivity.class.getSimpleName(),
            Context.MODE_PRIVATE);
}

// Obtiene la versión actual de la aplicación
private static int getAppVersion(Context context) {
    try {
        PackageInfo packageInfo = context.getPackageManager()
                .getPackageInfo(context.getPackageName(), 0);
        return packageInfo.versionCode;
    } catch (PackageManager.NameNotFoundException e) {
        throw new RuntimeException("No se encontró el nombre del paquete: " + e);
    }
}

Por último, añadimos el AsyncTask que realiza el registro en GCM (registerInBackground), la función que envía el ID a nuestro servidor (sendRegistrationIdToBackend) y la que almacena el código en los SharedPreferences (storeRegistrationId):

::java
private void registerInBackground() {

    class RegistroGCM extends AsyncTask<Void, Void, String> {

        @Override
        protected String doInBackground(Void... params) {
            String msg;
            try {
                if (gcm == null) {
                    gcm = GoogleCloudMessaging.getInstance(context);
                }
                regid = gcm.register(SENDER_ID);
                msg = "Device registered, registration ID=" + regid;

                // Enviamos el código de registro a nuestro servidor
                sendRegistrationIdToBackend(regid);

                // Almacenamos el código de registro
                storeRegistrationId(context, regid);
            } catch (IOException ex) {
                msg = "Error :" + ex.getMessage();
                // Si hay un error, se debe informar al usuario para que realize
                // una acción adecuada.
            }
            return msg;
        }

        @Override
        protected void onPostExecute(String msg) {
            mDisplay.append(msg + "\n");
        }
    }

    RegistroGCM registro = new RegistroGCM();
    registro.execute();
}


private void sendRegistrationIdToBackend(String regid) {
    String url_registro = NAMESPACE + "registra-usuario?usuario_id=" + regid;

    HttpClient client = new DefaultHttpClient();
    HttpGet get = new HttpGet(url_registro);

    try {
        HttpResponse response = client.execute(get);
        Log.i(TAG, "response: " + response);
    } catch (Exception e) {
        Log.d(TAG, "Error de registro en mi servidor: " + e.getCause() + " || " + e.getMessage());
    }
}

// Almacena el código de registro en los SharedPreferences
private void storeRegistrationId(Context context, String regId) {
    final SharedPreferences prefs = getGCMPreferences();
    int appVersion = getAppVersion(context);
    Log.i(TAG, "Saving regId on app version " + appVersion);
    SharedPreferences.Editor editor = prefs.edit();
    editor.putString(PROPERTY_REG_ID, regId);
    editor.putInt(PROPERTY_APP_VERSION, appVersion);
    editor.commit();
}

Y con ello, ya podríamos realizar las pruebas respectivas desde nuestro servidor en django.

Nota: No he creado un repositorio para este proyecto en android, pero ya que es prácticamente idéntico al de la documentaciñón, se puede consultar el repositorio de google.

Servidor en django para Google Cloud Messaging para Android (I)

2014-05-26T00:00:00-05:00

Google Cloud Messaging, para quien aun tenga dudas, es un servicio de google que nos permite enviar¹ mensajes a los usuarios de nuestra aplicación en Android).

Entre otros, podríamos necesitar esta característica para enviar notificaciones, por ejemplo informar sobre la publicación de nuevas ofertas sobre alguno de nuestros productos o incluso para que el dispositivo ejecute ciertas acciones como enviar un mensaje de texto o informar sobre su posición entre muchas otras opciones.

¿Qué debemos hacer para implementar este servicio?

Obtener un API key mediante la consola de desarrolladores de google.
Implementar un servidor, el cual se encargará de enviar la información a nuestra aplicación en android. Nosotros usaremos django.
Escribir el cliente en android que será quien reciba la información.

Paso 1: Obteniendo un API Key

Abrimos la consola de desarrolladores
Creamos un nuevo proyecto.
Al crear el proyecto, obtendremos un número único. Dicho número será utilizado luego como el ID del servidor que envia el mensaje (GCM Sender ID).
Ingresamos al menú "API's y autenticación", allí se nos listarán las API's de google disponibles. Para nuestro caso, activaremos la que dice "Google Cloud Messaging for Android"
Ingresamos al submenú "Credenciales" de "API's y autenticación".
En el apartado "Acceso a API Pública", clickeamos la opción de "Crear una clave nueva" y escogemos la del tipo "Clave de Servidor".
En el nuevo cuadro de diálogo debemos de ingresar la IP de nuestro servidor, para que el API solo acepte conexiones desde allí. Tal y como nos recomienda google, por motivos de prueba podemos ingresar: 0.0.0.0/0
En la nueva página mostrada debemos de copiar la "Clave de la API" que será la que usaremos para autenticar a nuestro servidor de aplicación.

Paso 2: Implementando el servidor en django

1. En un nuevo proyecto o uno ya existente, creamos una nueva aplicación que será la que contenga al servidor GCM.

2. En el archivo models.py de nuestra aplicación creamos un modelo UsuarioAndroid que almacenará a cada dispositivo registrado, quedando de la siguiente manera:

::python
# -*- coding: utf-8 -*-

from django.db import models

class UsuarioAndroid(models.Model):
    android_id = models.CharField('ID Android', max_length=256)

    class Meta:
        verbose_name = 'Usuario Android'
        verbose_name_plural = 'Usuarios Android'

    def __unicode__(self):
        # Al mostrar el usuario, solo mostraremos los 16 primeros caracteres
        # del código asignado.
        return self.android_id[:16]

3. A modo opcional, registramos el modelo en un archivo admin.py:

::python
from django.contrib import admin
from .models import UsuarioAndroid

admin.site.register(UsuarioAndroid)

4. En el archivo views.py debemos de crear dos vistas, una de ellas será la que nos muestre el formulario por el cual enviaremos los mensajes y la otra será la que nuestra aplicación en android utilizará internamente para registrar un nuevo dispositivo.

También incluyo una función llamada "gcm_envia_mensaje" que envía el mensaje por medio del API de GCM. Se pueden consultar los parámetros en GCM Server: params

::python
# -*- coding: utf-8 -*-
from datetime import datetime
import json

from django.conf import settings
from django.http import HttpResponse
from django.shortcuts import render_to_response as render
from django.template import RequestContext as ctx

import requests

from .models import UsuarioAndroid


def envia_mensaje(request):
    '''
    Vista que muestra un formulario para seleccionar un usuario al que
    enviaremos un mensaje.
    '''
    # listamos los usuarios registrados
    usuarios = UsuarioAndroid.objects.all()

    # en caso de que se suministre un usuario como parametro,
    # enviamos un mensaje.
    usuario = request.GET.get('usuario')

    if usuario:
        gcm_response = gcm_envia_mensaje(usuario)

    return render('envia_mensaje.html', locals(),
        context_instance=ctx(request))


def registra_usuario(request):
    '''
    Registra el android_id de un dispositivo celular.
    '''
    android_id = request.GET.get('usuario_id')
    usuario, status = UsuarioAndroid.objects.get_or_create(
        android_id=android_id)

    return HttpResponse(str(status))


# UTIL

def gcm_envia_mensaje(android_id, mensaje='Hola'):
    '''
    Función que recibe el código de un dispositivo como parámetro y le envia un
    mensaje.
    '''
    try:
        usuario = UsuarioAndroid.objects.get(android_id=android_id)
    except UsuarioAndroid.DoesNotExist:
        return HttpResponse('El usuario no existe')

    URL = 'https://android.googleapis.com/gcm/send'

    # Parámetros a enviar
    data = {
        'registration_ids': [str(usuario.android_id)],
        'restricted_package_name': settings.GCM_PACKAGE,
        'collapse_key': str(datetime.now()),
        'data': {
            'server': 'my-server-name',
            'msg': mensaje
        }
    }

    headers = {
        'Content-Type': 'application/json',
        'Authorization': 'key=' + settings.GCM_API_SERVER_KEY
    }

    # iniciamos el request
    r = requests.post(URL, data=json.dumps(data), headers=headers)

    STATUS_CODES = {
        200: 'Ok',
        400: 'JSON error',
        401: 'Ha fallado la autenticacion',
        500: 'Error',
        501: 'Servidor no disponible'
    }

    status = STATUS_CODES[r.status_code]

    response = {
        'estado': 'error',
        'detalle_de_estado': status,
        'texto': r.text
    }

    if r.status_code == 200:
        response['estado'] = 'ok'

    return response

5. Añadimos el template html de nuestro formulario, en el archivo envia_mensaje.html:

::html
<html>
    <head></head>

    <body>
        <form action="#">
            {% if usuarios %}
                <select name="usuario">
                    {% for u in usuarios %}
                        <option value="{{ u.android_id }}">{{ u }}</option>
                    {% endfor %}
                </select>

                <input type="submit" value='Enviar mensaje'>
            {% else %}
                <span>No hay usuarios registrados</span>
            {% endif %}
        </form>

        {% if gcm_response %}
            <div id="resultado">
                <p>Estado: {{ gcm_response.estado }}</p>
                <p>Detalle del código de estado: {{ gcm_response.detalle_de_estado }}</p>
                <p>Respuesta: {{ gcm_response.texto }}</p>
            </div>
        {% endif %}
    </body>
</html>

6. Por último, en nuestro archivo settings.py, no olvidemos registrar nuestra aplicación en la variable INSTALLED_APPS, asi como añadir las variables de configuración² de nuestro servidor y el nombre de nuestro paquete en Android:

::python
# GCM
GCM_PACKAGE = 'com.alexanderae.demo_gcm'
GCM_API_SERVER_KEY = 'AIzaSyCLK22vGoi6Gz663oIE9kTXZeTYC5lS4ww'

El próximo paso será el implementar nuestra aplicación en android.

Para leer a detalle sobre la implementación de un servidor GCM con django, se puede consultar la documentación.

Pueden consultar el código del proyecto de prueba que realicé en un repositorio en bitbucket.

Nota: Este proyecto tiene como finalidad el mostrar cómo escribir un servidor para GCM desde cero, pero para fines más serios, es posible que se desee utilizar algún proyecto como: django-gcm.

También es posible recibir información desde el dispositivo mediante la misma conexión, pero para este ejemplo solo enviaré la información en un sentido. ↩
Note que en un entorno de producción, las variables de configuración no deben de mostrarse en el archivo settings, sino que debemos utilizar variables de entorno o algún otro método. ↩

Django: procesamiento condicional de vistas

2014-04-19T00:00:00-05:00

¿Qué pasá cuando un cliente en su afán por estar siempre al día, comienza a presionar la tecla de actualizar el navegador repetidas veces ?

Y siendo aún más pesimistas (o tal vez realistas), ¿qué pasa si varios clientes realizan la misma acción una y otra vez posiblemente para ser los primeros en leer una noticia?

Sucedería que nuestro servidor enviaría una y otra vez el mismo contenido, consumiendo ancho de banda, sin importar que nuestra página no tenga contenido nuevo o actualizado.

Etags y Last Modified:

Existen dos maneras de indicarle al cliente que nuestro contenido no ha cambiado:

Etags: Son identificadores asignados al contenido de un recurso solicitado. Se utilizan para descubrir si el contenido en cuestión ha cambiado o no.
Last Modified: Esta cabecera nos brinda la fecha de la última modificación de un recurso, con lo que podriamos realizar un condicional para buscar algun cambio con respecto al contenido que ya disponíamos en caché.

Django y el procesamiento condicional de vistas

Django incorpora algunas herramientas para facilitarnos esta tarea. Estas son:

1. El decorador condition: Recibe dos parámetros opcionales los cuales representan a las funciones de cálculo del etag y el atributo last_modified.

Por ejemplo, para una aplicación del tipo blog, que debe retornar contenido solo si la publicación se ha actualizado (en base al atributo modified):

::python

# models.py

class Publicacion(models.Model):
    modified = models.DateTimeField('Ultima mod.', auto_now=True)
    titulo = models.CharField('Titulo', max_length=120)
    slug = models.CharField('Slug', max_length=160)
    ...

# views.py
...
from django.views.decorators.http import condition

def detalle_last_mod(request, slug):
    ''' Calcula el valor de last_modified '''
    return Publicacion.objects.get(slug=slug).modified


@condition(last_modified_func=detalle_last_mod)
def detalle(request, slug=''):
    ''' Vista que retorna una publicación '''
    p = Publicacion.objects.get(slug=slug)

    return render('publicacion.html', locals(),
                  context_instance=ctx(request))

Para el ejemplo, creé un proyecto de prueba y cargué una publicación en el navegador por primera vez:

Como se puede observar en los headers del request, todo está normal. Pero en el response, hemos obtenido una cabecera que indica la fecha del last-modified.

Entonces, si ejecutamos un nuevo request:

podemos observar que en el request se añadió una cabecera que dice if-modified-since que básicamente se pregunta si la página fue actualizada desde la última fecha que recibimos.

Y debido a que para mi ejemplo, no realicé ninguna modificación, recibimos el estado 304 que es un NOT MODIFIED, así como también el mismo parámetro last-modified.

2. Los decoradores @etag y @last_modified: Similares al método anterior, pero estos se concentran en solo una de las dos funciones (etag o last-modified).

Por ejemplo:

::python
@etag(etag_func)
def detalle(request, slug=''):
    ...

3. Middleware de procesamiento condicional (middleware conditional processing): django incorpora también un middleware que genera etags de manera automática para todas nuestras vistas, considerando que:

Se aplica a todas las vistas
Para calcular el valor del etag, se basa en el response generado por nuestra vista, por lo que si calcular nuestros response son acciones "pesadas", tal vez nos convenga usar uno de los dos primeros métodos antes indicados.
Solo son apropiados para pedidos del tipo GET (no he probado si se refiere a que ignora otros métodos o si es que si nosotros usamos otros métodos, no deberíamos usar este método).

Como siempre, para mayor información, nada como la documentación oficial.

Python: match vs findall vs search

2014-01-26T00:00:00-05:00

En el último par de semanas tuve que desarrollar un sistema web que interactuase con dispositivos GPS ¹.

Uno de los módulos que implementé consistía en una función que tenia que parsear² los SMS recibidos, ya que estos eran el medio por el que el dispositivo retornaba los resultados.

De manera resumida, el proceso que seguía era:

Recibir el SMS
Comprobar si el SMS coincide con alguna de las expresiones regulares almacenadas
Si se encuentra alguna coincidencia, se debe ejecutar algun procedimiento en particular según el tipo de mensaje recibido.

A modo de ejemplo, muestro 2 de las expresiones regulares que utilicé:

^begin ok

^Latitude:(?P[\d.SN]+)([\s]+)Longitude:(?P[\d.WE]+)([\s]+)

La primera es la respuesta entregada al inicializar un dispositivo, mientras que la segunda se corresponde a una versión resumida del formato en el que se nos retorna la posición.

Para saber si uno de los mensajes cumple con algunas de las expresiones regulares podríamos usar los métodos search, match o findall.

Los 3 métodos los podemos usar dentro de una sentencia if para saber si se encuentra o no, una coincidencia. Entonces, si por ejemplo tenemos el siguiente SMS:

Latitude:12.013001S Longitude:077.079241W

podríamos escribir algo como:

::python

import re

regex_BEGIN = re.compile('^begin ok')
regex_POSITION = re.compile('^Latitude:(?P<lat>[\d\.SN]+)([\s]+)Longitude:(?P<lon>[\d\.WE]+)([\s]+)')

msg = 'Latitude:12.013001S Longitude:077.079241W' # mensaje para este ejemplo

if regex_BEGIN.match(msg):
    print 'Dispositivo inicializado'

if regex_POSITION.match(msg):
    print 'Lectura de la posicion'

El código anterior lo podríamos reescribir cambiando el match por un search ³. Entonces, me pregunté cuál de los tres métodos podría ser la diferencia entre los tiempos de ejecución de estos 3 métodos.

Usando timeit para medir tiempos, mi script indicando los tiempos obtenidos debajo de cada sentencia fue:

::python
import timeit

# Primera prueba

setup = '''
import re
s = 'Latitude:12.013001S Longitude:077.079241W'
r = re.compile('^Latitude:(?P<lat>[\d\.SN]+)([\s]+)Longitude:(?P<lon>[\d\.WE]+)')
'''
print timeit.timeit(stmt="r.match(s)", setup=setup, number=1000000)
# 1.20556092262

print timeit.timeit(stmt="r.search(s)", setup=setup, number=1000000)
# 1.18701195717

print timeit.timeit(stmt="r.findall(s)",  setup=setup,  number=1000000)
# 1.58948493004

print '- - -'

# Segunda prueba

setup = '''
import re
s = 'Latitude:12.013001S Longitude:077.079241W'*100
r = re.compile('^Latitude:(?P<lat>[\d\.SN]+)([\s]+)Longitude:(?P<lon>[\d\.WE]+)')
'''

print timeit.timeit(stmt="r.match(s)", setup=setup, number=1000000)
# 1.18745613098

print timeit.timeit(stmt="r.search(s)", setup=setup,  number=1000000)
# 1.19270586967

print timeit.timeit(stmt="r.findall(s)", setup=setup, number=1000000)
# 49.8060359955

print '- - -'

# Tercera prueba

setup = '''
import re
s = 'Latitude'*100
r = re.compile('Latitude')
'''
print timeit.timeit(stmt="r.match(s)", setup=setup, number=1000000)
# 0.517388105392

print timeit.timeit(stmt="r.search(s)", setup=setup, number=1000000)
# 0.369539022446

print timeit.timeit(stmt="r.findall(s)", setup=setup, number=1000000)
# 11.6244080067

Conclusiones

En los 9 casos realicé un millón iteraciones para que la diferencia entre cada método sea notable, por lo que si tan solo tuviera que realizar 1 iteración, posiblemente no habría mucha diferencia entre el método escogido.

Si bien se observan mejores tiempos con los métodos match y search, debido a que hay muchos factores que afectan el tiempo de ejecución, recomendaría que cada uno evaluase el método que mejor se adapte a sus necesidades, aunque como mencioné, posiblemente para casos simples, esto no sería un motivo de preocupación.

Siempre recordando que:

" La optimización prematura es la raíz de todos los males" Donald Knuth

Referencias:

De aquellos que se instalan en vehículos motorizados. ↩
Analizar una cadena de texto para interpretar su contenido. ↩
Inclusive por un findall u algún otro método. ↩

Markdown en django

2013-12-07T10:18:00-05:00

Como ya sabemos, a partir de la versión 1.5 de django, el módulo contrib.markup esta siendo depreciado. Por ello, si buscamos incluir markdown en nuestro proyecto debemos recurrir a paquetes de terceros o crear nuestro propio "template filter" (si deseamos escapar markdown como html), lo cual no es tan complicado.

Lo primero a necesitar es un paquete que convierta markdown a html. De los dos que probé markdown y markdown2 me quedo por el primero porque incluye algunas opciones como output_format.

Inicialmente nuestro template filter puede lucir más o menos así:

::python
from django import template
from django.template.defaultfilters import stringfilter
from markdown import markdown

register = template.Library()


@register.filter(is_safe=True)
@stringfilter
def mrkdwn(txt):
    return markdown(txt)

La función markdown, entre otros, acepta algunos parámetros como:

safe_mode: permite deshabilitar html (a pesar del nombre, no es una garantía de ser un modo seguro)
html_replacement_text: texto a mostrar cuando safe_mode toma el valor de replace
enable_attributes: controla la conversión de atributos html (desactivado cuando safe_mode vale True)

entre otras

Y si el código markdown será ingresado por usuarios no confiables¹, debemos tener en cuenta que podría insertarse código malicioso.

Podríamos mejorar un tanto la primera versión de nuestro filtro:

::python
from django import template
from django.template.defaultfilters import stringfilter
from markdown import markdown

register = template.Library()


@register.filter(is_safe=True)
@stringfilter
def mrkdwn(txt):
    return markdown(txt, safe_mode=True, output_format='html5',
        enable_attributes=False)

Este es el template html con el que hice mis pruebas:

::jinja

{% load my_tags %}

<h1>Test</h1>

{{ 'hola'|mrkdwn }}
<br>
{{ 'áéíóúñ'|mrkdwn }}
<br>
{{ '<b>bold</b>'|mrkdwn }}
<br>
{{ 5|mrkdwn }}
<br>
{{ '**test** <b>otro test</b>'|mrkdwn }}
<br>
{{ '*cursiva<b>bold</b>*'|mrkdwn }}
<br>
{{ '{@onclick=alert("hi")}es en serio?'|mrkdwn }}
<br>

Posiblemente la última versión que utilicé tampoco sea del todo segura, se pueden ver algunas discusiones sobre el tema aquí:

Y como decía Gene Spafford:

El único sistema realmente seguro es aquel que está apagado, confinado en un bloque de hormigón y sellado en una habitación forrada de plomo con guardias armados – y aún así tengo mis dudas.

en un sistema de comentarios por ejemplo ↩

PyFPDF

2013-11-03T00:00:00-05:00

PyFPDF es una librería¹ que genera documentos PDF mediante python. Es un port de FPDF, el cual está escrito en PHP.

Mientras revisaba el código de este paquete (el cual no es muy complicado de entender, al menos en parte) hice un ejemplo en el que se hace uso del:

encabezado y pie de página
propiedades del documento (autor, título)
manejo de tipografías (tamaño de texto y estilos incluidos)
una tabla con contenidos de productos, cantidades y precios (similar a una boleta de compra).
saltos de linea, celdas, imágenes, etc..

En gran parte tomé como referencia el código de ejemplo incluido en las fuentes del paquete, los cuales se pueden encontrar aquí: pyfpdf

El código de mi generador de listas de compra fue el que sigue:

::python
from fpdf import FPDF


class PDF(FPDF):
    def config(self):
        self.set_author('__alexander__<alexander.ayasca.esquives@gmail.com>')
        self.set_title('Django Store: Boleta #1')
        self.alias_nb_pages(alias='pag_total')
        self.add_font('DroidSans', '', 'DroidSans.ttf', uni=True)
        self.add_font('DroidSans', 'B', 'DroidSans-Bold.ttf', uni=True)
        self.add_page()

    def header(self):
        # Encabezado
        self.image('logo.png', 10, 8, 32)  # Logo
        self.set_font('DroidSans', 'B', 15)  # Arial bold 15
        self.cell(80)  # Espacio en blanco de 8cm
        self.cell(40, 10, 'Django Store', 1, 0, 'C')  # Titulo
        self.ln(20)  # Salto de linea

    def footer(self):
        # Pie de pagina
        self.set_y(-15)  # margen inferior de 1.5cm
        self.set_font('DroidSans', '', 8)  # droidSans 8px
        # paginacion
        paginado = u'Pagina {0} de pag_total'.format(self.page_no())
        self.cell(0, 10, paginado, 0, 0, 'C')

    def parse_csv(self, csv_file):
        # Leemos los items del archivo csv y lo retornamos como un generador
        with open(csv_file, 'r') as f:
            for line in f:
                yield line.strip().split(';')  # recortamos los saltos de linea

    def fancy_table(self, header, data):
        # Dibuja la tabla de productos y precios
        # colores, ancho de linea y tipografia
        self.set_fill_color(255, 0, 0)
        self.set_fill_color(62, 255, 175)
        self.set_text_color(64)
        self.set_draw_color(128, 0, 0)
        self.set_line_width(.3)
        self.set_font('', 'B')
        # cabecera de la tabla
        w = [100, 25, 25, 30]
        for i in range(0, len(header)):
            self.cell(w[i], 8, header[i], 1, 0, 'C', 1)
        self.ln()

        #  restauramos el color y la tipografia para el contenido principal
        self.set_fill_color(170, 235, 210)
        self.set_text_color(32)
        self.set_font('')
        #  Data
        fill = 0
        total = 0
        for row in data:
            if len(row) > 3:
                # Solo si tenemos los valores de las 4 columnas en el csv
                self.cell(w[0], 7, row[0], 'LR', 0, 'L', fill)
                self.cell(w[1], 7, row[1], 'LR', 0, 'R', fill)
                self.cell(w[2], 7, '$' + row[2], 'LR', 0, 'R', fill)
                self.cell(w[3], 7, '$' + row[3], 'LR', 0, 'R', fill)
                self.ln()
                fill = not fill
                total = total + float(row[3])

        # pie de pagina de la tabla
        self.set_font('', 'B')
        self.cell(150, 7, 'Total:', 'LR', 0, 'R', fill)
        self.cell(30, 7, '$' + str(total), 'LR', 0, 'R', fill)
        self.ln()
        self.cell(sum(w), 0, '', 'T')  # linea final


if __name__ == '__main__':
    csv_file = 'boleta.csv'
    header = ['Producto', 'Cantidad', 'p x u', 'Subtotal']

    pdf = PDF()
    data = pdf.parse_csv(csv_file)

    pdf.config()

    pdf.fancy_table(header, data)
    pdf.output('boleta_1.pdf', 'F')

Se genera un pdf similar a:

El código anterior, asi como la imagen del logo, tipografías, archivo csv de entrada y el pdf generado se pueden descargar desde aquí.

También, mientras revisaba el código de pyfpdf decidí realizar algunas anotaciones de los métodos que se pueden usar (ya que la documentación no es muy extensa). Y aunque solo tengo una parte terminada, la estoy colocando en esta página.

Mantenida por Mariano Reingart ↩

nginx, uwsgi, django y virtualenv

2013-09-28T10:14:00-05:00

Este es un breve tutorial que indica como configurar django en un servidor de producción por medio de nginx, uwsgi y virtualenv.

En mi caso, seguí estas indicaciones en webfaction sin ningún problema.

nginx: instalación

::sh
mkdir -p ~/{opt,projects,src}
cd ~/src
wget http://nginx.org/download/nginx-1.5.x.tar.gz
tar xf nginx-1.5.x.tar.gz
cd nginx-1.5.x
./configure --prefix=/home/username/opt/nginx  --with-http_ssl_module
make && make install

uwsgi

instalamos uwsgi

    pip install uwsgi

creamos un archivo de prueba:

::python
# test.py
def application(env, start_response):
    start_response('200 OK', [('Content-Type','text/html')])
    return "Hola mundo cruel"

lanzamos uwsgi² indicando el archivo que creamos:

    uwsgi --http :16517 --wsgi-file test.py

y si todo va bien.. podemos continuar

django y virtualenv¹

creamos un entorno virtual, instalamos django y creamos un proyecto de prueba.

    mkvirtualenv django
    pip install django
    cd ~/projects
    # creamos un proyecto de prueba
    django-admin startproject myapp

para que el entorno virtual sea reconocido adecuadamente, editamos el archivo wsgi.py de nuestro proyecto en django para que quede de la siguiente manera:

::python
# wsgi.py
import os
import sys

from site import addsitedir
addsitedir('/home/username/.envs/django_1_5/lib/python2.7/site-packages')

sys.path = ['/home/username/projects/myapp/',
'/home/username/projects/myapp/myapp/'] + sys.path

from django.core.wsgi import get_wsgi_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "settings")

application = get_wsgi_application()

y podemos probar uwsgi con nuestro proyecto en django:

    uwsgi --http :16517  --wsgi-file /home/username/projects/myapp/myapp/wsgi.py

Si todo bien hasta ahora, podemos configurar nginx para que interactue con uwsgi.

    nginx <-> uwsgi <-> django

nginx: configuración

editamos el archivo nginx.conf para que quede similar a:

# nginx.conf
worker_processes  1;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       16517;
        server_name  nginx1.username.webfactional.com;

        location / {
            include uwsgi_params;
            uwsgi_pass unix:///home/username/projects/myapp/myapp.sock;
        }
    }
}

ejecutamos el worker de uwsgi:

    uwsgi --master --workers 1 --wsgi-file /home/username/projects/myapp/myapp/wsgi.py --uwsgi-socket /home/username/projects/myapp/myapp.sock

iniciamos nginx:

    ~/opt/nginx/sbin/nginx

Y con esto concluye lo básico. Si me doy un tiempo, ampliaré esta entrada con lo necesario para que nginx maneje los archivos static y media de nuestro proyecto en django así como también el añadir a un gestor de procesos como supervisor para que maneje los workers de uwsgi.

Información adicional:

Note que estoy usando virtualenvwrapper para administrar el entorno virtual (mkvirtualenv para crear el entorno virtual). ↩
si estamos usando webfaction debimos de haber creado, por medio de su panel, una aplicación personalizada y utilizado el puerto que se nos asigno para la prueba con uwsgi o con nginx (en mi caso el 16517) ↩

Owncloud en webfaction

2013-09-21T11:00:00-05:00

Después de probar owncloud en mi pc, en la cual utilizo chakra linux, intenté subirlo a webfaction, en donde tuve un pequeño problema.

Los pasos que seguí para instalar owncloud en webfaction (incluida la solución a mi problema) fueron:

En el panel de webfaction:
1. Registramos un nuevo dominio: owncloud.midominio.com
2. Registramos una nueva aplicación del tipo: Static/CGI/PHP-5.x
3. Registramos un nuevo website en el que linkeamos el dominio y la aplicación.
4. Creamos una nueva base de datos con su respectivo usuario (solo lo he probado con MySQL)
Accedemos por ssh al servidor:
1. Descargamos owncloud:
  
  wget http://download.owncloud.org/community/owncloud-5.0.x.tar.bz2
2. Extraemos los archivos al directorio de nuestra aplicación: ~/webapps/owncloud
3. Cambiamos los permisos¹ de algunos directorios y archivos:

# permisos de directorios
find ~/webapps/owncloud -type d | xargs setfacl -m u:apache:r-x
find ~/webapps/owncloud -type d | xargs setfacl -m u:nginx:r-x

# permisos de archivos
find ~/webapps/owncloud -type f | xargs setfacl -m u:apache:r--
find ~/webapps/owncloud -type f | xargs setfacl -m u:nginx:r--

Hasta este punto, ya somos capaces de acceder por medio del navegador a la url de nuestra aplicación y comenzar a realizar la configuración (primer usuario, conexión a la base de datos..)

Pero si intentamos loguearnos desde algún cliente de escritorio o en mi caso, con la aplicación en android, obtendremos un error de credenciales.

Por suerte (para mí), este error ya le había sucedido a otra persona², la cual publicó su caso. Al parecer owncloud utiliza mod_rewrite (un módulo de apache) para obtener el usuario y el password de las cabeceras HTTP cuando nos logueamos. Y en webfaction, este mecanismo esta desactivado.

Entonces, lo que hay que hacer es:

Añadir al archivo .htacces de owncloud una regla que redireccione la url inicial a una que contenga los parámetros de login y remover el header de Autorización que ya no usaremos:
```
RewriteCond %{HTTP:Authorization} ^Basic.*
RewriteRule ^(.*) $1?Authorization=%{HTTP:Authorization} [QSA,C]
RequestHeader unset Authorization
```
Luego, para que owncloud sepa que hacer con estos nuevos parámetros, hay que editar el archivo ~/webapps/owncloud/lib/base.php, y en la función init() añadir:

::php

//sett http auth headers for Webfaction workaround
if(isset($_GET['Authorization']) && preg_match('/Basic\s+(.*)$/i', $_GET['Authorization'], $matches))
{
    list($name, $password) = explode(':', base64_decode($matches[1]));
    $_SERVER['PHP_AUTH_USER'] = strip_tags($name);
    $_SERVER['PHP_AUTH_PW'] = strip_tags($password);
}

Y con ello ya estaría todo listo!

Actualización: 23/09/2013

Owncloud necesita ejecutar tareas de fondo periódicamente (como buscar nuevas noticias si se usa la aplicación news), para lo cual se cuenta con 3 opciones: Ajax, webcron y cron.

En mi caso, utilizo cron, el cual para usarse en webfaction necesita que editemos el archivo de cron con el comando crontab -e.

Y añadiendo una entrada del tipo:

    */20  *  *  *  * /usr/local/bin/php54 -f ~/webapps/owncloud/cron.php > $HOME/cron.log 2>&1

con lo que ejecutaremos el cron.php cada 20 minutos y mantendremos un archivo log llamado cron.log.

Nota: es posible que prefiramos usar algun otro editor al que se usa por defecto para manipular el archivo cron. Lo podemos cambiar ajustando la variable EDITOR, por ejemplo: export EDITOR=nano

Visto en los foros de webfaction ↩
Matthias Blaicher publicó la solución en su blog. ↩

Optimización de imágenes: Archivos PNG

2013-07-07T20:00:00-05:00

Archivos PNG

Un problema recurrente al manejar este formato de archivos puede ser el hecho de que ocupen una mayor cantidad de espacio en disco y al ser junto a los archivos JPEG uno de los dos formatos más usados en el entorno web esto se puede traducir en mayor tiempo de carga para nuestros sitios web.

Como tal vez ya sepamos, los PNG son un formato de imágenes que soportan compresión sin pérdidas¹. Para entender el como funciona la optimización de las imágenes en este formato, debemos tomar en cuenta al proceso de compresión.

Compresión:

A modo de resumen, el archivo png se comprime en dos fases:

Filtrado: Una serie de filtros son escogidos para facilitar la compresión en la siguiente fase. Se utiliza un método de filtrado para ayudar a la predicción del color del pixel en base a sus vecinos.
El algoritmo de compresión utilizado en la segunda fase se denomina deflate el cual es el mismo algoritmo utilizado por la libreria zlib.

Para mayor información, consulte la especificación de la norma ISO.

Optimización:

La optimización de los archivos png se puede realizar:

Eliminando los bloques auxiliares de la cabecera, los cuales pueden corresponder a información de los valores gama, el color de fondo, entre otros².
Utilizando una paleta de colores reducida (paleta indexada)
Optimizando los filtros linea a linea
Optimizando la compresión mediante el método deflate.

Herramientas de optimización

De las múltiples posibilidades, decidí probar 3: pngcrush, optipng y pngquant:

PNGCrush

Proyecto opensource que se ejecuta por medio de la línea de comandos. Itera sobre los filtros y los parámetros usados por el método de compresión deflate, realizando la compresión para cada combinación posible y de este modo escoger la mejor alternativa.

Site: pngcrush

Modo de Uso:

    pngcrush -rem allb origen.png pngcrush.png

OptiPNG

Inspirado en base a pngcrush. Diseñado para ser mucho más veloz. A diferencia de pngcrush, optipng realiza las pruebas en memoria y escribe solo el resultado óptimo en el disco.

Site: optipng

Modo de Uso:

    optipng -o 2 origen.png -out optipng.png

PNGQuant

A diferencia de pngcrush y optipng, pngquant reduce el número de colores a utilizar (a 256 o menos). Por lo que si bien podemos lograr un tamaño mucho menor, es posible que se produzca una pérdida en la calidad.

Sitio: pngquant

Modo de Uso:

    pngquant origen.png --ext -pngquant.png

Ejemplo: tinypng.org (optimizador online que usa pngquant)

Comparativa

Comparando resultados para dos capturas de pantalla en formato png (las capturas están alojadas en google drive):

Captura de pantalla del juego need for speed:

Archivo	nfs.png	pngcrush	optipng	pngquant
Peso	2 MB	1.3 MB	1.3 MB	412 KB

Captura de pantalla de la terminal:

Archivo	consola.png	pngcrush	optipng	pngquant
Peso	126.1 KB	105.0 KB	104.3 KB	55.6 KB

Conclusiones

Aunque en la comparativa tan solo se aprecia el espacio en disco final, se debería de tomar en cuenta el tiempo de procesamiento de cada herramienta.
Si bien pngquant obtiene un tamaño considerablemente menor al original, se debe tener cuidado con su uso, ya que trabaja reduciendo la paleta de colores por lo que puede conllevar una pérdida en la calidad. (Para las dos imágenes mostradas el efecto es inapreciable)
Si mantener la calidad original es una prioridad, se recomienda el uso de optipng. Y en caso de que nos podamos permitir el reducir "levemente" la calidad³ podemos considerar el uso de pngquant.

Referencias

optipng: A guide to PNG optimization
debianfacil.wordpress.com: optimizando-y-reduciendo-imagenes-png
Portable Network Graphics
Manpages Ubuntu
manual optipng

Se denomina algoritmo de compresión sin pérdida a cualquier procedimiento de codificación que tenga como objetivo representar cierta cantidad de información utilizando u ocupando un espacio menor, siendo posible una reconstrucción exacta de los datos originales. Véase: lossless data compression ↩
Consulte PNG: Bloques auxiliares ↩
Inapreciable para imágenes con pocos colores(<=256) ↩

Django Apps: uuslug

2013-06-23T23:00:00-05:00

Una de las características de django es el diseño elegante de las urls a diferencia de como otros frameworks o lenguajes puedan manejar este aspecto. Por ejemplo con asp o php podríamos tener¹:

www.test.com/post.asp?u=142

www.test.com/post.php?u=142

Mientras que en django podríamos tener sin problema, urls amigables como:

www.test.com/post/142

Nota: debemos considerar que utilizar id's en nuestras urls no es recomendable:

Hay quien opina que facilita ataques por inyección sql. Aunque en django tenemos ese punto cubierto al utilizar correctamente los querysets.
También hay quienes creen que afecta al SEO. En un artículo de google, nos explican a más detalle el problema en cuestión.
A mi parecer el motivo más importante es por el tema de la usabilidad. Para el usuario las urls sencillas son más fáciles de copiar, recordar y también el encontrar lo que se busca. Tal y como vi en una respuesta de stackoverflow, entre estas dos urls:

www.test.com/page.php?u=85583

www.test.com/solution-to-your-problem.php

un usuario tendería a escoger la segunda url por motivos que resultan obvios.

Entonces después de esta no tan breve introducción.. ¿cómo realizamos esto con django?

Django, en su módulo utils dispone de la función slugify para generar slugs² y en su módulo models tenemos a SlugField para autogenerar un campo de este tipo.

El problema aparece cuando por ejemplo generamos los campos slug en base a el título de una noticia, la cual para el ejemplo se titula: Explosión y pasado cierto tiempo aparece otra noticia llamada del mismo modo.

La función que genera slug's por defecto en django tiene los dos siguientes problemas:

No genera slugs para términos con caracteres no ascii, como lo son las tildes.
No toma en cuenta que el término base pueda aparecer varias veces y al generar el mismo slug puede crearse un conflicto al acceder a la url.

El paquete que utilizo para solventar este inconveniente es django-uuslug

Instalación

Tan sencillo como siempre:

pip install django-uulug

¿Cómo usar?

Para generar un slug cualquiera, podemos usar su propia función slugify:

::python
>>> from uuslug import slugify
>>> slugify('This is a test ---')
    'this-is-a-test'
>>> slugify('explosión')
    'explosion'

Y si deseamos autogener un slug único en un modelo, por ejemplo para el caso de las noticias:

::python

from django.db import models
from uuslug import uuslug

class Noticia(models.Model):
    titulo = models.CharField(max_length=100)
    slug = models.CharField(max_length=200)

    def __unicode__(self):
        return self.titulo

    def save(self, *args, **kwargs):
        self.slug = uuslug(self.titulo, instance=self)
        super(Noticia, self).save(*args, **kwargs)

y con ello, para noticias con el mismo título se añade un número al final del slug para que queden como: noticia, noticia-1, etc.

urls

En nuestras urls tendremos algo como:

::python
url(r'^noticia/(?P<slug>[-\w]+)$', 'views.noticia')

para finalmente el poder utilizar las url's:

noticia/explosion

noticia/explosion-1

Si bien es el comportamiento por defecto, es posible user url's amigables en otros sistemas con alguno que otro hack. En wikipedia podremos revisar un artículo más extenso sobre url's amigables el cual incluye algunos ejemplos. ↩
Un slug es un término periodístico que se refiere a los nombres o etiquetas cortas para algo. ↩

MongoDB: Autenticación y Autorización

2013-06-02T00:00:00-05:00

Una de las buenas prácticas en cuanto al aspecto de la seguridad en mongodb corresponde al requerir autenticación para poder acceder a sus instancias.

MongoDB provee soporte para el manejo de autenticación (uso de credenciales de acceso) y autorización (uso de roles).

Podemos activar la autenticación de dos maneras:

Creando un usuario administrador y luego activamos la autenticación.
Activando la autenticación y creando un administrador

A más detalle:

Creando un usuario administrador y luego activamos la autenticación

Iniciamos mongod¹ (por defecto la autorización está desactivada)

Accedemos a la interfaz interactiva (mongo)

MongoDB shell version: 2.4.3
connecting to: test
>

Cambiamos la base de datos de test a la de administración:
```
> use admin
switched to db admin
```

Creamos un usuario administrador (aquel que cuenta con uno de los dos siguientes roles: userAdmin o userAdminAnyDatabase)

> db.addUser({user:"admin", pwd: "admin", roles: ["userAdminAnyDatabase"]}
... )
{
        "user" : "admin",
        "pwd" : "7c67ef13bbd4cae106d959320af3f704",
        "roles" : [
                "userAdminAnyDatabase"
        ],
        "_id" : ObjectId("51ac0cca34cad99e8cff6092")
}

Con lo anterior, podemos reiniciar mongod con la autenticación activada:
```
mongod --auth
```

A modo de ejemplo, supongamos que disponemos de la base de datos Hospital y deseamos añadir un objeto a la colección pacientes (considerando que hemos activado la autenticación):

    > use Hospital
    switched to db Hospital
    > db.pacientes.insert({"nombre": "alexander", "edad": 23})
    not authorized for insert on Hospital.pacientes

Observamos que no disponemos permisos, asi que primero nos loguearemos en admin, cambiaremos a la bbdd Hospital y crearemos un nuevo usuario para esta otra bbdd:

    > use admin
    switched to db admin
    > db.auth("admin", "admin")
    1
    > use Hospital
    switched to db Hospital
    > db.addUser("doctor", "doctor")
    {
        "user" : "doctor",
        "readOnly" : false,
        "pwd" : "f830c9f104077d9b115e22fd26269824",
        "_id" : ObjectId("51ac13b73d47965438d38b65")
    }
    > db.auth("doctor", "doctor")
    1

Por defecto este usuario tiene permisos de escritura, como observamos aquí:

    > db.pacientes.insert({"nombre": "alexander", "edad": 23})
    > db.pacientes.find()
    { "_id" : ObjectId("51ac13cd3d47965438d38b66"), "nombre" : "alexander", "edad" : 23 }

Note que para añadir usuarios con roles específicos, debemos usar la sintaxis:

    > db.addUser( { user: "<username>", pwd: "<password>",
    ... roles: [ "rol1", "rol2" ] } )

En donde los roles pueden ser: read, readWrite, dbAdmin, userAdmin.. entre otros. Para más información consulte la documentación

¿Y el segundo método?

El segundo método se aprovecha de la excepción localhost: Si no existen usuarios para la base de datos de admin, podemos conectarnos con permisos completos por medio de la interfaz en localhost.

Y una vez accedido al sistema, los pasos para crear usuarios son los que ya se mostraron antes.

mongod es el proceso demonio primario de mongodb, controla las solicitudes de datos, administra formatos de datos y realiza varias tareas de administración. ↩

Supervisor

2013-05-28T00:00:00-05:00

Supervisor es un sistema del tipo cliente/servidor que nos facilita la administración de procesos en sistemas tipo unix.

Consta de 2 componentes:

supervisord: Es quien actua como servidor y se encarga de iniciar los programas asociados, asi como responder a las peticiones de comandos de los clientes y reiniciar subprocesos crasheados o terminados. Utiliza un archivo de configuración el cual por defecto reside en /etc/supervisord.conf
supervisorctl: Es por medio de quien el usuario interactua con supervisord. Con él, es posible obtener el estado, detener o iniciar los subprocesos administrados.

Instalación y uso

Lo instalamos con:

sudo pip install supervisor

Supervisor utiliza un archivo que contiene sus parámetros de configuración, por defecto ubicado en /etc/supervisord.conf. En caso de que no exista o deseemos copiar el archivo por defecto para utilizarlo desde otra ubicación, podemos ejecutar:

echo_supervisord_conf > /etc/supervisord.conf

El archivo de configuración luce similar a:

    [unix_http_server]
    file=/tmp/supervisor.sock   ;

    [supervisord]
    logfile=/tmp/supervisord.log ;
    logfile_maxbytes=50MB        ;
    logfile_backups=10           ;
    loglevel=info                ;
    pidfile=/tmp/supervisord.pid ;

    [supervisorctl]
    serverurl=unix:///tmp/supervisor.sock ;

    [rpcinterface:supervisor]
    supervisor.rpcinterface_factory=supervisor.rpcinterface:make_main_rpcinterface

y, para cada aplicación a controlar debemos añadir una sección [program:program-name], como por ejemplo:

    [program:mongodb]
    directory=/home/username/apps/mongodb-linux-x86_64-2.2.3
    command=/usr/bin/mongod --dbpath /home/username/apps/mongodb-linux-x86_64-2.2.3/data --logpath /home/username/apps/mongodb-linux-x86_64-2.2.3/log/mongodb.log --config /etc/mongodb.conf --logappend --auth
    autorestart=true

El ejemplo anterior añade una entrada de configuración para mongodb, se pueden ver otros ejemplos aquí.

Entonces, podemos iniciar supervisor mediante:

supervisord

y administrar los procesos con supervisorctl, usando mongodb como ejemplo:

Listar: supervisorctl
Iniciar: supervisorctl start mongodb
Detener: supervisorctl stop mongodb
Reiniciar: supervisorctl restart mongodb

En nuestro ejemplo, si iniciamos mongod con supervisor y luego obtenemos su PID (id del proceso)

ps -aux|grep mongod

para poder terminarlo manualmente (asumiendo que su PID sea 2871):

kill 2871

observaremos que debido a que configuramos la entrada [program:] con el valor de autorestart=true, supervisor se encargará de reiniciar nuestro proceso automaticamente (lo podemos comprobar volviendo a realizar un filtro de los procesos activos).

Con lo cual ya tenemos varios excelentes motivos por los que usar esta herramienta.

Algunos buenos artículos sobre supervisor que encontré son:

How to install and configure Supervisord: Instalación y configuración básica
Managing site processes with Supervisord:
Daemon Showdown: Upstart vs. Runit vs. Systemd vs. Circus vs. God: comparativa con otros gestores de procesos

Y no puede faltar, la documentación del proyecto: docs

hghooks

2013-05-19T19:00:00-05:00

¿Qué es un hook?

En mercurial, al parecer también en git, y tal vez en algún otro scv¹ se le denomina hook a una acción programada para lanzarse al ocurrir algún evento en nuestro repositorio. Por ejemplo en mercurial podemos controlar los eventos:

commit: después de terminar un commit
precommit: antes de iniciar un commit
update: después de que un update o merge halla finalizado en el repositorio local.

entre otros ..

hghooks

hghooks es un conjunto de hooks para usar con mercurial. Nos ofrece de los siguientes módulos:

validación de código python por medio de pep8
validación de código python por medio de pyflakes
checkeo de sentencias pdm en python
integración con track

En mi caso, lo utilizo para validar código python según estilos pep8 antes de realizar un commit.

Instalación y Uso:

Instalamos pep8 y hghook
```
sudo easy_install pep8 hghooks
```
En el archivo .hg/hgrc de nuestro repositorio en el que activaremos el hook, añadimos:
```
[hooks]
pretxncommit.pep8 = python:hghooks.code.pep8hook
```
Listo, ahora cada vez que intentemos realizar un commit, se validará si antes nuestro código cumple con los estilos pep8

Nota:

Para ignorar alguna regla de pep8, agregamos unas lineas como la siguientes a nuestro archivo hgrc:

    [pep8]
    ignore = E501 E128

Referencias:

↳ Mercurial: The Definitive Guide: Chapter 10 Handling repository events with hooks

↳ hghooks

Sistema de control de versiones ↩

Integrar flask-admin y flask-login

2013-05-19T15:00:00-05:00

Para quien aun no esté enterado, Flask es un microframework web para python.

Flask cuenta con varias extensiones, de entre las cuales flask-admin nos provee de una interfaz administrativa y flask-login se encarga de manejar un sistema de autenticación para nuestras vistas.

El problema aparece cuando necesitamos que la interfaz de administración incluya un sistema de autenticación (nos referimos a un login). En la documentación de flask-admin nos indican:

By default, administrative interface is visible to everyone, as Flask-Admin does not make any assumptions about authentication system you’re using.

If you want to control who can access administrative views and who can not, derive from the administrative view class and implement is_accessible method.

O dicho de otro modo, flask-admin no incluye ningún sistema de autenticación ni tampoco está restringido a algún paquete en especial para encargarse de esta tarea.

Lo que sí nos indican es que es posible implementar un método is_accessible como sigue:

::python
class MyView(BaseView):
    def is_accessible(self):
        return login.current_user.is_authenticated()

Con ello lograremos que solo los usuarios autenticados puedan acceder a dicha vista admininistrativa, pero aquellos usuarios que no se han logueado obtendrán un error 404.

Lo ideal sería que al no estar logueados, se nos redirigiese hacia la página del login, pero el método anterior se limita a mostrarnos una pantalla de error.

Otra manera de integrar el login y el admin sería utilizando una vista personalizada. Por defecto la vista principal del admin se ve como:

::python
class AdminIndexView(admin.AdminIndexView):
    @admin.base.expose()
    def index(self):
        return self.render(self._template)

Entonces, podríamos editar la vista por defecto para que al no detectar al usuario como logueado, se nos redirija al login:

::python
# admin.py
from flask import redirect, url_for
from flask.ext import admin, login

from views import app


class MyAdminIndexView(admin.AdminIndexView):
    @admin.base.expose()
    def index(self):
        is_auth = login.current_user.is_authenticated()
        if is_auth:
            return self.render(self._template)
        else:
            return redirect(url_for('login'))

admin_ = admin.Admin(app, 'Auth', index_view=MyAdminIndexView())

Y con ello obtendríamos lo esperado.

Notar que nos faltaría encargarnos del acceso a las vistas internas y también del añadir un link para finalizar nuestra sesión.

Jcanvas

2013-05-02T09:10:00-05:00

Jcanvas es un plugin para jquery que nos permite interactuar con el canvas de html5.

Entre sus características principales, resaltan:

API Sencilla que permite el manejo de figuras geométricas, imágenes, máscaras, capas, animaciones..
Funciona en navegadores móbiles y de escritorio (aunque no lo he probado en ningún móbil)
Ligero (~25kB)
OpenSource

Instalación

Se requiere añadir tanto jquery como el propio plugin:

    <script src="jquery.min.js"></script>
    <script src="jcanvas.min.js"></script>

Uso

Se pueden observar 3 ejemplos sencillos aquí.

1. El primer ejemplo nos muestra el como añadir algunas figuras geométricas:

HTML

::html
<canvas id="canvas1" width='480' height='320'></canvas>

Primero asignamos el canvas a una variable. Luego, podemos invocar a los métodos requeridos para dibujar figuras geométricas, como drawArc para arcos indicando las propiedades deseadas mediante un objeto en json. Es posible incluso concatenar los métodos.

::jquery
var $canvas1 = $("#canvas1");

$canvas1.drawArc({
  fillStyle: "rgba(12,12,59,0.6)",
  x: 280, y: 80,
  radius: 25
});

$canvas1.drawArc({
  fillStyle: "black",
  x: 20, y: 72,
  radius: 10
}).drawArc({
  fillStyle: "#285714",
  x: 56, y: 48,
  radius: 18,
  start: 30, end: 280
});

Podemos también, graficar elipses y rectángulos; asi como superponerlos, usar rgba, entre otros.

::jquery
$canvas1.drawEllipse({
  fillStyle: "rgba(108, 96, 256, 0.5)",
  x: 250, y: 190,
  width: 40, height: 90,
  strokeWidth: 2
}).drawEllipse({
  fillStyle: "rgba(36, 144, 54, 0.5)",
  x: 250, y: 190,
  width: 90, height: 40,
  strokeWidth: 2
});

$canvas1.drawRect({
  fillStyle: "#d5d",
  x: 50, y: 50,
  width: 60,
  height: 30,
  fromCenter: false
});

2. En el segundo ejemplo podemos observar el manejo de capas o grupos de las mismas:

Considerando, el alto y ancho del canvas asi como el tamaño de la cuadrícula, la graficamos mediante rectas, las cuales guardamos como capas bajo el mismo grupo.

::jquery
/* canvas 2 */
var $canvas2 = $("#canvas2");
var h = $canvas2.height();
var w = $canvas2.width();
var grid = 50;

// cuadricula
for (var i = 0; i<h; i=i+grid) {
  $canvas2.drawLine({
    layer: true,
    group: 'cuadricula',
    strokeStyle: "#000",
    strokeWidth: 1,
    x1: 0, y1: i,
    x2: w, y2: i
  });
}

for (i = 0; i<w; i=i+grid) {
  $canvas2.drawLine({
    layer: true,
    group: 'cuadricula',
    strokeStyle: "#000",
    strokeWidth: 1,
    x1: i, y1: 0,
    x2: i, y2: h
  });
}

Por medio de un botón, mostramos u ocultamos el grupo de capas.

::jquery
// mostrar/ocultar
var $show_hide_grid = $('#show_hide_grid');
var grid_visible = true;

$show_hide_grid.click(function() {
  if (grid_visible) {
    $show_hide_grid.text('Mostrar cuadricula');
    $canvas2.setLayerGroup("cuadricula", {
      visible: false
    }).drawLayers();
    grid_visible = false;
  }
  else{
   $show_hide_grid.text('Ocultar cuadricula');
    $canvas2.setLayerGroup("cuadricula", {
      visible: true
    }).drawLayers();
    grid_visible = true;
  }
});

3. El tercer ejemplo muestra una esfera rebotando en el 'piso' por medio de una sencilla animación.

Creamos la esfera:

::jquery
var $canvas3 = $("#canvas3");

$canvas3.drawArc({
  layer: true,
  name: 'esfera',
  fillStyle: '#797',
  x: 240, y: 20,
  radius: 10
});

Creamos la animación^1 y la iniciamos. Notar que hemos concatenado 2 animaciones, una para la caida al finalizar se ejecuta la subida. La función es recursiva, por lo que nunca termina.

::jquery
var rebote = function(){
  $canvas3.animateLayer('esfera',
    {x: 240, y:310},
    2000, 'easeInQuad',
    function() {
      $(this).animateLayer("esfera", {
        x: 240, y: 20
      }, 2000, "easeOutQuad", rebote);
    }
  );
  return;
};

/* inicializa */
rebote();

Notas adicionales

Para mayor información se puede visitar la documentación del plugin. Del mismo modo, en su página se cuenta con un sandbox para probar sin romper nada.

Página del proyecto en github.
Sitio de las demos mostradas

Para el efecto de caida y subida se uso el plugin jquery: easing . Usando como referencia esta guía para saber que función usar. ↩

SqlAlchemy: ORM para python - I

2013-04-28T16:27:00-05:00

¿Qué es?

SQLAlchemy es un ORM para python. Incluye soporte para SQLite, MySQL, PostgreSQL, Oracle, MS SQL, entre otros.

¿Qué es un ORM?

Instalación

Si bien podemos usar setuptools (easy_install), recomiendo instalarlo mediante pip.

    pip install sqlalchemy

Para comprobar que se haya realizado la instalación, podemos acceder a la consola interactiva de python y escribir:

::python

>>> import sql_alchemy
>>> sqlalchemy.__version__
0.8.1

más información sobre la instalación aquí.

Ejemplo de uso

Para ilustrar¹ la idea, desarrollaré el modelo de datos para un sistema que se encarga de administrar registros de libros, autores, y etiquetas (o temas, para los libros).

El esquema² del modelo es el siguiente:

Primero, debemos mapear el modelo o esquema de la base de datos por medio de sqlalchemy, para lo cual escribí lo siguiente en un archivo al que llamé models.py:

::python

# -- coding: utf-8 --

from sqlalchemy import (create_engine, Column, Date, Integer, ForeignKey,
    String, Table)
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import relationship

engine = create_engine('sqlite:///libros.db', echo=True)
Base = declarative_base()

# relaciones muchos a muchos
etiqueta_libro = Table('etiqueta_libro', Base.metadata,
    Column('libro_id', Integer, ForeignKey('libro.id')),
    Column('etiqueta_id', Integer, ForeignKey('etiqueta.id'))
)

autor_libro = Table('autor_libro', Base.metadata,
    Column('libro_id', Integer, ForeignKey('libro.id')),
    Column('autor_id', Integer, ForeignKey('autor.id'))
)


class Libro(Base):
    __tablename__ = 'libro'
    id = Column(Integer, primary_key=True)
    titulo = Column(String(120), index=True, nullable=False)
    fecha_publicacion = Column(Date)
    isbn = Column(String(13))
    etiquetas = relationship("Etiqueta", secondary=etiqueta_libro)
    autores = relationship("Autor", secondary=autor_libro)

    def __init__(self, titulo, fecha_publicacion, isbn):
        self.titulo = titulo
        self.fecha_publicacion = fecha_publicacion
        self.isbn = isbn

    def __repr__(self):
        return unicode(self.titulo)


class Etiqueta(Base):
    __tablename__ = 'etiqueta'
    id = Column(Integer, primary_key=True)
    nombre = Column(String(120), nullable=False)

    def __init__(self, nombre):
        self.nombre = nombre


class Autor(Base):
    __tablename__ = 'autor'
    id = Column(Integer, primary_key=True)
    nombre = Column(String(120), nullable=False)

    def __init__(self, nombre):
        self.nombre = nombre

Base.metadata.create_all(engine)

La explicación va mas o menos así:

Importamos los módulos necesarios
Realizamos la conexión a la base de datos, en este caso corresponde a sqlite, por medio de un archivo.
Mapeamos las tablas como clases, utilizando los tipos de datos de sqlalchemy para expresar los diferentes tipos de datos de sqlite: Integer, String, Date..
Añadimos las relaciones entre las tablas: uno a muchos, muchos a muchos..
Al final, usamos la sentencia:
```
Base.metadata.create_all(engine)
```

para que al correr el script, se genere la base de datos.

corremos el script mediante:

    python models.py

Con ello, observaremos que se creó el archivo "libros.db" el cual contiene nuestra base de datos.

El acceso, inserción o modificación de datos, lo podemos realizar de la siguiente manera:

::python

# -- coding: utf-8 --

from datetime import date
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker
from models import Autor, Etiqueta, Libro

# conexion
engine = create_engine('sqlite:///libros.db', echo=True)
# sesion
Session = sessionmaker(bind=engine)
session = Session()

# insertamos autores
autor_1 = Autor('Patrick Rothfuss')
autor_2 = Autor('Fred Saberhagen')

lista_autores = (autor_1, autor_2)
session.add_all(lista_autores)
session.commit()

# insertamos etiquetas
etiqueta_1 = Etiqueta('aventuras')
session.add(etiqueta_1)

# insertamos libros
libro_1 = Libro('El nombre del fuego', date(2009, 5, 30), '978-8401337208')
libro_1.etiquetas.append(etiqueta_1)
libro_1.autores.append(autor_1)


session.add(libro_1)
session.commit()

# realizando una consulta
libro = session.query(Libro).filter(Libro.isbn=='978-8401337208').first()
print libro

# alterando uno de los atributos
libro.titulo = 'El nombre del viento'
session.commit()

print libro

El código anterior, se encuentra comentado, indicando los pasos realizados; como la conexión, inserción o modificación de la información.

El siguiente ejemplo no busca ser un tutorial completo, sino solamente ejemplificar el funcionamiento básico de sqlalchemy. Para información más amplia puede guiarse de la documentación o del siguiente tutorial publicado en dzone ↩
El esquema fue realizado con wwwsqldesigner ↩

Programar backup de Mysql en Windows

2013-04-14T14:45:00-05:00

Tal y como mencioné en la entrada anterior, tuve que instalar django con mysql como base de datos en windows server. Además, se tuvo que usar un script para realizar copias automáticas de la base de datos.

Script

El script, el cual encontré aquí y modifiqué levemente fue:

@echo off
set mySqlPath=C:\wamp\bin\mysql\mysql5.5.x
set dbUser=usuario_backup
set dbPassword="mi_contraseña"
set dbName=mi_base_de_datos
set file=%dbName%_%date:~-4,4%%date:~-7,2%%date:~-10,2%_%time:~0,2%%time:~3,2%%time:~6,2%.sql
set path=C:\%dbName%

echo Running dump for database %dbName% ^> ^%path%\%file%
"%mySqlPath%\bin\mysqldump.exe" -u %dbUser% -p%dbPassword%  %dbName% >"%path%\%file%"
echo Done!

Note que podemos configurar el formato del nombre de salida del archivo (set file) o la ubicación de las copias (set path) a nuestro gusto.

Programando la tarea

Windows cuenta con la utilidad llamada "at" (Task scheduler o Programador de tareas) que será la que se usará:

Podemos listar las tareas con el comando: "at" e insertar la la tarea del siguiente modo:

at 23:30 /every:M,T,W,Th,F,S,Su C:\backup\scripts\mysql-backup.bat

Con lo que lograremos que nuestro script se ejecute todos los días a las 23:30.

Django, MySQL y Apache en Windows Server

2013-04-11T00:00:00-05:00

Hasta hace poco, no había tenido la necesidad de configurar django en un entorno en producción en windows, por suerte para mi, fue un tanto menos complicado de lo esperado. Lo que a mi me tocó usar fue Python 2.7, Django 1.4, WAMP (Apache + MySQL), todo ello en Windows Server. A continuación, un resumen de lo que hice:

1. Instalamos la versión de python requerida (por ejemplo la 2.7.4), la cual podemos obtener de python.org.

2. Instalamos setuptools, una herramienta de gestión de paquetes para python. Lo podemos descargar desde pypi. No olvidar que debemos de escoger la versión adecuada para nuestra versión de python instalada.

3. Añadir al path el directorio de python y sus scripts, por ejemplo:

C:\Python27;C:\Python27\Scripts;..

Podemos comprobar lo realizado hasta aquí, ingresando a la ventana de comandos (cmd):

Al escribir python y presionar enter, se debe de mostrar la consola interactiva de python. Para salir, presione ctrl + z + enter.

Al escribir easy_install se nos debe de comunicar que nos faltó indicar la url o ruta del archivo a instalar.

4. Instalamos pip (otro gestor de paquetes de python) mediante:

easy_install pip

5. Instalamos django y las dependencias de nuestro proyecto por medio de pip, por ejemplo:

pip install "django<=1.4.99"
pip install "django-uuslug"

6. En caso de requerir PIL (Python Imaging Library) en nuestro proyecto, se recomienda utilizar Pillow (un fork de PIL mucho más amigable que su antecesor) como reemplazo. Puede descargar el instalador para windows desde pypi

7. Descargamos e instalamos WAMP Server. Note que se requiere como dependencia a Microsoft Visual C++ 2010 Redistributable (observe que puede descargar la versión x86 o la de 64 bits). Una vez instalado wamp, podemos cargar nuestra base de datos por medio de phpMyAdmin

8. Descargamos e instalamos el conector de python para mysql, lo podemos descargar desde sourceforge. Note que debemos escoger la versión que corresponda a nuestro python instalado.

9. Descargamos nuestro proyecto en django mediante filezilla o cualquier otra herramienta.

10. Configuramos la base de datos en el archivo settings.py. Para comprobar si el proyecto inicia en modo "desarrollo", podemos abrir el cmd y escribir:

python manage.py runserver

Ir a la ruta http://127.0.0.1:8000 y observar si el sitio web se visualiza de forma correcta.

11. Configuramos la ruta para el directorio static con el parámetro:

STATIC_ROOT

recolectamos los archivos static:

python manage.py collectstatic

12. Configuramos el archivo wsgi para que quede similar a:

import os, sys

sys.path = ['C:\proyecto\www', 'C:\Python27\Lib\site-packages'] + sys.path

os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'

import django.core.handlers.wsgi

application = django.core.handlers.wsgi.WSGIHandler()

13. Descargamos el módulo mod_wsgi para apache, el cual permite conectar el mismo con nuestras aplicaciones en python que soporten wsgi. Una vez descargada la versión correspondiente a nuestro python, renombramos el archivo a mod_wsgi.so y lo copiamos a la carpeta modules de nuestro apache, la cual puede tener una ruta similar a:

C:\wamp\bin\apache\apache2.2.22\modules

14. Configuramos apache, por medio del archivo httpd.conf

Añadimos el módulo mod_wsgi

LoadModule wsgi_module modules/mod_wsgi.so

Añadimos el archivo wsgi y la configuración para los directorio static y media:

Alias /media/ "C:\proyecto\www\media\"
Alias /static/ "C:\proyecto_static\"

<Directory C:\proyecto\www\media\>
    Order deny,allow
    Allow from all
</Directory>

<Directory C:\proyecto_static\ >
    Order allow,deny
    Allow from all
</Directory>


WSGIScriptAlias / "C:\proyecto\www\wsgi.py"

WSGIPythonPath "C:\proyecto\www"

<Directory "C:\proyecto\www">
    <Files wsgi.py>
    Order deny,allow
    Allow from all
    </Files>
</Directory>

Reiniciamos apache, y al acceder al localhost deberíamos poder visualizar nuestro proyecto.

Acceso SSH sin password

2013-03-24T12:00:00-05:00

Introducir una contraseña cada vez que necesitamos iniciar una conexión ssh con el servidor, puede ser algo incómodo¹.

Afortunadamente, revisando sobre ello, encontré que es posible acceder mediante un método alternativo: llaves ssh².

Para ello, supongamos que tenemos 2 pc's a las que llamaremos A y B, con los usuarios a y b respectivamente.

Lo que se desea es poder acceder desde la pc A hacia B con el usuario b. Para lo cual seguiremos los siguientes pasos:

En la pc 'A' generamos una llave pública y privada sin la frase de contraseña.

a@A:~> ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/a/.ssh/id_rsa):
Created directory '/home/a/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/a/.ssh/id_rsa.
Your public key has been saved in /home/a/.ssh/id_rsa.pub.
The key fingerprint is:
1a:2b:3c:4d:5e:6f:77:8h:9i:jj:k0:1a:2b:3c:4d:5e a@A

Creamos el directorio ~/.ssh en B, considerando que puede ya existir:
```
a@A:~> ssh b@B mkdir -p .ssh
b@B's password:
```

Añadimos nuestra llave pública creada en A al archivo ssh/authorized_keys en B:

a@A:~> cat .ssh/id_rsa.pub | ssh b@B 'cat >> .ssh/authorized_keys'
b@B's password:

Nota:

Es posible que necesitemos ajustar los permisos del directorio .ssh y el archivo .ssh/authorized_keys.

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_key

Una vez listo lo anterior,podríamos acceder por ssh al servidor B sin necesidad de escribir nuestra contraseña.

Actualización

Un método mucho más simple para copiar nuestra clave ssh al servidor al que accederemos es mediante el comando ssh-copy-id:

    ssh-copy-id -i .ssh/id_rsa.pub user@host

Lo cual resulta mucho más veloz que el método anterior.

Referencias

SSH login without password: linuxproblem.org
ssh - authorized_keys HOWTO: universidad de cambridge
Acceso a máquinas usando ssh sin contraseña: universidad de valencia

en especial cuando la contraseña es una larga cadena de caracteres inmemorizables y son varios los servidores con los que se trabaja. ↩
ssh keys ↩

Memcached

2013-03-19T22:03:00-05:00

Memcached es un sistema distribuido de caché en memoria orientado a objetos.

¿Qué quiere decir?, ¿cuáles son sus características?

distribuido: memcached puede instalarse en varios servidores a la vez que pueden ser configurados para actuar como una sola entidad sin comunicarse entre si.
en memoria: mantiene los fragmentos de información en la memoria RAM
orientado a objetos: almacena los items en pares del tipo clave-valor basándose en tablas hash
Implementado en el servidor y en el cliente: el cliente sabe como enviar items al servidor, cuando no se puede contactar al servidor y como solicitar items del servidor. El servidor sabe como almacenar, retornar o expirar los items según las solicitudes del cliente.

Instalación

Podemos instalarlo mediante el gestor de paquetes de nuestro sistema operativo:

    apt-get install memcached

    pacman -S memcache

    yum install memcached

o compilándolo:

    wget http://memcached.googlecode.com/files/memcached-1.4.x.tar.gz
    tar xfz memcached-1.4.x.tar.gz
    cd memcached-1.4.x/
    ./configure
    make && make install

podemos comprobar la ruta del comando mediante:

    which memcached

lo que nos debería retornal algo así como:

    /usr/local/bin/memcached

y si algo falla, siempre podemos consultar la wiki.

Ejecución

Podemos ejecutar el comando memcached con algunas opciones como:

    memcached -d -p 11211 -m 128 -c 1024 -P $HOME/memcached.pid

donde:

d: permite correr memcached como un demonio
p: indica el puerto, por defecto es 11211
m: cantidad de memoria en MB máxima a usar
c: número máximo de conexiones simultáneas
P: ubicación del archivo en el que se almacenará el PID del proceso, solo es válido cuando se ejecuta como un demonio.

se puede leer el manual, como siempre, por medio de:

    man memcached

Para comprobar que se esté ejecutando, podemos usar telnet, lo que nos devuelve algo como:

    telnet localhost 11211
    Trying 127.0.0.1...
    Connected to localhost.

que indica que se ha conectado a memcached por medio del puerto que especificamos.

Memcached y Systemd

Como adicional, el archivo de configuración y scripts necesarios para administrar memcached mediante systemd.

memcached.config:

    PORT="11211"
    USER="user"
    MAXCONN="512"
    CACHESIZE="32"
    PID="/home/user/.memcached.pid"
    OPTIONS=""

memcached.service:

    [Unit]
    Description=memcached daemon
    After=network.target

    [Service]
    EnvironmentFile=/etc/sysconfig/memcached.config
    ExecStart=/usr/local/bin/memcached -p ${PORT} -u ${USER} -m ${CACHESIZE} -c ${MAXCONN} -P ${PID} $OPTIONS
    ExecStop=/bin/kill -9 'cat ${PID}'; /bin/rm ${PID}

    [Install]
    WantedBy=multi-user.target

con ello, solo tendríamos que ejecutar, según convenga:

    systemctl start memcached
    systemctl stop memcached
    systemctl status memcached

Y con ello, tenemos lista la configuración del servidor de memcached. Lo siguiente es configurar un cliente, y a empezar a usar la caché!

Una Historia de Caché

2013-03-17T12:20:00-05:00

Dos valerosos aventureros, un desarrollador de software y un administrador de sistemas, emprendieron un viaje. Ellos hacen sitios web. Sitios con servidores web y bases de datos. Los usuarios de todo el internet interactuan con los servidores web y les piden que hagan páginas para ellos. Los servidores web consultan a las bases de datos por la información necesaria para construir las páginas. El desarrollador escribe código y el admininistrador añade servidores web y servidores de base de datos.

Un dia, el administrador se dio cuenta de que su base de datos estaba enferma! Vomitando bilis y materia roja por todas partes! El administrador notó que tenía fiebre, una carga promedio del 20%!

El desarrollador le consulta al administrador: "bueno, ¿qué podemos hacer?". El administrador responde: "He oído acerca de una gran herramienta llamada memcached. Realmente ayudó a LiveJournal".

"Esta bien, probémosla" dice el desarrollador.

Nuestro valeroso administrador observa sus servidores web, de los cuales tiene seis. Decide usar tres de ellos para correr el servidor de memcached. El administrador añade un gigabyte de RAM para cada servidor, e inicia el servidor de memcached con un límite de 1GB cada uno. Entonces, consigue tres instancias de memcached, cada una de las cuales puede almacenar hasta 1GB de datos. Entonces el desarrollador y el administrador retroceden un paso y admiran su glorioso memcached!

"¿Ahora qué?" dicen, "no esta haciendo NADA!". Las instancias de memcached no estan interactuando con nada y ciertamente no tienen ningun dato. Y ahora la base de datos tiene una carga del 25%!

Nuestro aventuroso desarrollador coge el manual de la libreria del cliente de pecl/memcached, el cual nuestro valeroso adminitrador ayudó amablemente a instalar sobre los seis servidores web. "No temas", él dice. "Tengo una gran idea!". Él toma las direcciones IP y los números de puertos de las 3 instancias de memcached y las añade a un array en php.

::html-php
$MEMCACHE_SERVERS = array(
    "10.1.1.1", //web1
    "10.1.1.2", //web2
    "10.1.1.3", //web3
);

Entonces el hace un objeto, al cual ingeniósamente llama '$memcache'.

::html-php
$memcache = new Memcache();
foreach($MEMCACHE_SERVERS as $server){
    $memcache->addServer ( $server );
}

Ahora el desarrollador piensa. Él piensa y piensa y piensa. "Lo tengo!", dice. "Hay una sección en la página inicial que corre un SELECT * FROM InmensaTabla WHERE timestamp> lastweek ORDER BY timestamp ASC LIMIT 50000; y esto toma cinco segundos". "POngámoslo en memcached". Entonces él envuelve su código para el SELECT y usa un objeto de memcached. Su código consulta:

Están los resultados de este SELECT en memcached?. Si no lo están, ejecuta la consulta, toma los resultados y AÑÁDELOS a memcached! . Algo como esto:

::html-php
$huge_data_for_front_page = $memcache->get("huge_data_for_front_page");
if($huge_data_for_front_page === false){
    $huge_data_for_front_page = array();
    $sql = "SELECT * FROM hugetable WHERE timestamp > lastweek ORDER BY timestamp ASC LIMIT 50000";
    $res = mysql_query($sql, $mysql_connection);
    while($rec = mysql_fetch_assoc($res)){
        $huge_data_for_frong_page[] = $rec;
    }
    // cache para 10 minutos
    $memcache->set("huge_data_for_front_page", $huge_data_for_front_page, 0, 600);
}

// use $huge_data_for_front_page como desee

El desarrollador escribe código. El administrador transpira. BAM! . La carga de la base de datos ha bajado al 10%. El sitio web está muy rápido ahora. Ahora el administrador desconcertado, se pregunta. "¿Qué DEMONIOS ha pasado?". "He puesto gráficos en los servidores de memcached! He usado cacti, y esto es lo que veo! El tráfico se dirige hacia una de las instancias de memcached, pero hice tres :(". Entonces, el administrador rápidamente aprende el protocolo ascii y realiza el comando telnet hacia el puerto 11211 sobre cada instancia y se pregunta:

¿Hey, 'get huge_data_for_front_page' estas allí?

La primera instancia no responde ...

La segunda instancia no responde ...

La tercera sin embargo, retorna una gran cantidad de datos en su sesión de telnet! Allí están los datos! Solo una de las instancias tiene la clave de la cache que el desarrollador creó.

Intrigado, consulta en la lista de correo. Ellos responden al unísono, "Es un sistema distribuido de caché! Es lo que hace!". Pero ¿qué es lo que significa?. Aún confundido y un poco asustado por su vida, el administrador le consulta al desarrollador si es posible añadir a la caché algunas cosas más. "Veamos que sucede. Somos gente curiosa", dice el administrador.

"Bueno, hay otro query que no es lento, pero se ejecuta 100 veces por segundo. Tal vez nos pueda ayudar", dice el desarrollador. Entonces el envuelve el código como lo hizo antes. Efectivamente, la carga del servidor se reduce a un 8%! .

Entonces el desarrollador escribé más y más código sobre cosas que pueden ser añadidas a la caché. El usa nuevas técnicas. "Encontré esto en la lista de correos y en la sección de preguntas frecuente", dice. La carga de la base de datos baja: 7%, 5% , 3%, 2%, 1%!

"Esta bien", dice el administrador de sistemas, "probemos de nuevo!". Ahora el observa los gráficos. TODAS las instancias de memcached estan corriendo! Todas estan recibiendo pedidos! Esto es genial! Todas son usadas!

Entonces nuevamente, el toma las llaves que el desarrollador usó y las observa en los servidores de memcached. 'get this_key' 'get that_key'. Pero cada vez que el lo hace, solo la encuentra sobre una de las instancias! . Ahora ¿POR QUÉ debería suceder esto? piensa él. Y pasa toda la noche intrigado. Qué tonto! ¿No deseas que todas las llaves esten en todas las instancias?

"Pero, espera", el piensa, "Le otorgué a cada instancia de memcached 1 gigabyte de memoria, eso significa, que en total, puedo tener en caché hasta TRES gigabytes de mi base de datos, en vez de solo UNA!". "Esto es grandioso!", piensa. "Esto me ahorrará una tonelada de dinero". Brad Fitzpatrick te amo! .

"Pero .., el siguiente problema es otra cosa que me desconcierta, este servidor web que tengo aquí y esta corriendo una instancia de memcached es viejo, esta enfermo y necesita ser actualizado. Pero para hacerlo, tengo que apagarlo! ¿Qué le pasará a mi pobre cluster de memcached?. Averigüémoslo" dice él, y apaga el servidor. Ahora observa sus gráficos. "Oh, no, la carga de la bbdd, ha subido. Ya no es de 1%, es del 2%, pero aun es tolerable". Todas las demás instancias aún reciben tráfico. Entonces devolvamos el servidor de vuelta, y pongamos a memcached de vuelta al trabajo. Después de unos minutos, la carga de la bbdd vuelve nuevamente a bajar al 1%, donde debería estar".

"La caché se restauró a si misma! Ahora lo entiendo. Si no está disponible, solo significa que algunas de mis peticiones se perdieron. Pero no es suficiente como para matarme. Eso es muy dulce".

Entonces el desarrollador de software y el administrador de sistemas continuaron construyendo sitios web. Ellos continuaron usando la caché. Cuando tienen dudas consultan la lista de correos o leen las preguntas frecuentes nuevamente. Ellos observan sus gráficos. Y todos vivieronn felices para siempre.

Autor: Dormando via IRC. Editado por Brian Moon. Edición adicional por Emufarmers.

Esta historia ha sido ilustrada por el comic online TOBlender.com

Encontré esta historia mientras revisaba la wiki de memcached. Me gustó tanto que me animé a realizar la traducción anterior, la cual por cierto tal vez no sea fiel a la original, pero hice mi mejor intento!

PEP 8 - Guía de Estilo para Python

2013-03-03T17:56:00-05:00

Desde que empezamos¹ a escribir código y conforme progresamos, adquirimos ciertas pautas que definen la manera en que expresamos nuestras ideas en el lenguaje que manejemos, ya sea javascript, python, html u otro. Esto define nuestro estilo, y toma en cuenta la manera en la que indentamos², definimos nombres de variables y funciones, el proceso de realizar o no comentarios de codigo entre otros.

¿Por qué es importante adoptar un estilo?

Por muchos motivos:

Es probable que el código deba ser mantenido, ya sea por nosotros u otras personas:

En caso de que seamos nosotros los responsables, no recordaremos por siempre que hacia tal o cual función o para que implementamos alguna clase. El solo hecho de añadir comentarios, mantener un orden de los métodos, clases y funciones, indentar y lo más importante: el haber sido consistentes puede ayudar en gran medida.

Al trabajar en equipo esto se hace mucho más notorio. Si todos los miembros siguen unas líneas generales, aunque no se conozca con exactitud el "que hace" de algún bloque de código, al seguir un estilo el proyecto se hace legible y permite que el "dolor" al revisarlo sea menor.

¿Qué sucede cuando tienes que revisar código ajeno y observas inconsistencias en el estilo del código?

Puede que tengas que revisar el archivo operaciones.py y te encuentres con algo como:

::python
def suma(a,b):
  a=int(a) #convierto la variable 'a' a entero
  b = int(b) #convierto la variable 'b' a entero
  return   (a+ b)

def resta( c , d):
    c = int(c)
    d = int(d)
    return c-d

def multiplica(e,f):
    return ( int( e ) * int( f ) )

aunque podría haber sido peor³, a primera vista me parecería que el que escribiera algo así, es inconsistente.

¿Era necesario incluir los comentarios?
Mientras en la función suma se indentó con 2 espacios, en las funciones siguientes se usaron.
El espaciado entre variables y operadores tambien cambia según avanzamos.
Inclusive la forma en la que definimos a las funciones, tanto para suma y resta, convertimos las variables a enteros en una línea aparte; pero para la multiplicación, lo hicimos todo en una sola ĺínea.

¿Por donde comenzar?

Como siempre, no tenemos que inventar algún estándar para nuestro grupo de trabajo o para nosotros mismos⁴, es muy probable que ya exista alguna convención para nuestro lenguaje preferido y tan solo debamos de revisarla y adoptarla⁵, por ejemplo:

CSS: guia de estilos para css de github
HTML - CSS: guia de estilos para html y css de google
Javascript: guia de estilos para javascript de jquery
Ruby: guia de estilos para ruby

PEP 8

En python existe lo que se llaman PEP's o Python Enhancement Proposals⁶, una de las cuales, PEP 8⁷ está dedicada a la recopilación de los estándares seguidos por los desarrolladores de python a la hora de escribir código python para la librería estandar.

Entre las convenciones principales, tenemos:

Usar 4 espacios para indentar
Es posible usar solo tabulaciones u ocho espacios para código antiguo que haya sido escrito así. Por ningún motivo se han de mezclar espacios y tabulaciones.
Limitar los tamaños de línea a 79 caracteres como máximo, si bien se puede continuar líneas largas con el símbolo '\', es recomendable el uso de paréntesis, por ejemplo en vez de:

::python
def __init__(self, first, second, third, fourth, fifth, sixth):
    output = first + second + third + fourth \
        + fifth + sixth

podríamos hacer uso de los paréntesis:

::python
def __init__(self, first, second, third, fourth, fifth, sixth):
    output = (first + second + third + fourth
        + fifth + sixth)

Se deben separ las funciones de nivel superior y las clases con dos líneas en blanco, mientras que los métodos dentro de clases los podemos separar con una sola línea. También se pueden usar líneas en blanco dentro de las funciones para separ bloques que guardan cierta correlación lógica.
Las sentencias de import deben de estar generalmente separadas una en cada línea, por ejemplo:

::python
Incorrecto: import os, sys
Correcto:   import os
            import sys
Se permite: from urllib2 import urlopen, Request

Las sentencias import deben de estar siempre en la parte superior del archivo agrupadas de la siguiente manera:
- Libreria estándar
- Librerías de terceros
- import's de la aplicación local
Usar espacios alrededor de los operadores aritméticos
No usar espacios alrededor del signo igual cuando se encuentre en un listado de argumentos de una función:

::python
Incorrecto: def suma(a = 0, b = 0):
Correcto:   def suma(a=0, b=0):

Los comentarios que contradicen al código son peores que cuando no existen comentarios!
No se deben de realizar comentarios obvios
No se deben comparar booleanos mediante ==:

::python
Incorrecto: if valido == True:
                pass
Correcto:   if valido:
                pass

Pueden observar la lista completa en las referencias y como adicional:

¿Por qué el estilo de Programación importa?: un artículo en inglés de smashing magazine.
Code Like a Pythonista: Presentación en la que se dan varios tips para programar en python, incluidos algunos ya vistos en el PEP8.

Y no digo: 'desde que aprendimos', porque el aprendizaje es continuo y nunca terminamos de aprender. ↩
considerando que indenten. ↩
algún extremista (nótese que no me refiero a mí) podría recomendar el enviar a la hoguera al que escribio aquello. ↩
aunque se puede hacer si le dedicamos el esfuerzo necesario. ↩
lo que no significa que sigamos la convención con los ojos cerrados y sin dudar, lo correcto sería extraer las partes que creamos convenientes y aplicarlas. Aunque si estamos iniciando, lo recomendable es seguir las normas y con la experiencia, opinar si debemos o no seguirlas. ↩
son documentos que proveen información a la comunidad de python o describen nuevas carácterísticas de python, su proceso de desarrollo o su entorno. más información aquí. Y un listado alternativo de los peps aquí ↩
pep8 en inglés y una versión traducida al español por Raúl González Duque. ↩

Limpiar o resetear formularios en JS

2013-02-28T00:00:00-05:00

Fragmentos de código para limpiar o resetear formularios en JS. Note que "limpiar" borrará todo el contenido del formulario mientras que "resetear" restaurará los valores iniciales.

Reset form

Para resetear formularios existe un método de los forms:

::javascript
document.getElementById("test-form").reset();

Clear form

Para limpiar formularios en cambio, tenemos que escribir nuestra propia función, como por ejemplo¹:

::javascript
function clearForm(oForm) {

  var elements = oForm.elements;

  oForm.reset();

  for(i=0; i<elements.length; i++) {

    field_type = elements[i].type.toLowerCase();

    switch(field_type) {
      case "text":
      case "email":
      case "password":
      case "textarea":
      case "hidden":
        elements[i].value = "";
        break;

      case "radio":
      case "checkbox":
          if (elements[i].checked) {
            elements[i].checked = false;
        }
        break;

      case "select-one":
      case "select-multi":
        elements[i].selectedIndex = -1;
        break;

      default:
        break;
    }
  }
}

y la llamamos mediante:

::javascript
clearForm(form);

demo

A modo de ejemplo, puede visitar el siguiente link.

El código se puede visualizar en el directorio 'clear-reset-form' del repo

Visto en: javascript-coder.com ↩

Posición absoluta y Relativa de un click en javascript

2013-02-24T00:00:00-05:00

Mientras intentaba desarrollar un plugin para jquery tuve un inconveniente, el cómo hacer para obtener la posición relativa de un evento click hacia su contenedor.

Realizando algunas búsquedas en google y leyendo los diversos artículos pude obtener una idea del cómo estaba el panorama. Por ejemplo, revisando el tutorial de jquery que versa sobre el cálculo de la posición del mouse podemos destacar algunos puntos:

pageX¹ y pageY son dos propiedades de todos los eventos javascript que nos indican la posición absoluta del puntero respecto a la esquina izquierda de todo documento (no solo de la parte visible de la página).
Para realizar el cálculo de la posición relativa de un click nos muestran el siguiente ejemplo:

::jquery
$("#special").click(function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    $('#status2').html(x +', '+ y);
});

lo que consiste en el cálculo de la posición absoluta del click menos la posición absoluta del contenedor.

stackoverflow

En mi búsqueda del como poder realizar esto, di con algunos enfoques interesantes en stackoverflow:

Por ejemplo, había quien recomendaba realizar un cálculo iterativo de las distancias relativas de cada contenedor con su padre:

::jquery
function absolutePos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

Note que offsetLeft² calcula la distancia del elemento actual en relación a su contenedor o padre.

Y también quien sugería una mejora introduciendo los valores del margin, padding y border:

::javascript
function getNumericStyleProperty(style, prop){
  return parseInt(style.getPropertyValue(prop),10) ;
}

function element_position(e) {
    var x = 0, y = 0;
    var inner = true ;
    do {
        x += e.offsetLeft;
        y += e.offsetTop;
        var style = getComputedStyle(e,null) ;
        var borderTop = getNumericStyleProperty(style,"border-top-width") ;
        var borderLeft = getNumericStyleProperty(style,"border-left-width") ;
        y += borderTop ;
        x += borderLeft ;
        if (inner){
            var paddingTop = getNumericStyleProperty(style,"padding-top") ;
            var paddingLeft = getNumericStyleProperty(style,"padding-left") ;
            y += paddingTop ;
            x += paddingLeft ;

            var marginTop = getNumericStyleProperty(style,"margin-top") ;
            var marginLeft = getNumericStyleProperty(style,"margin-left") ;
            y += marginTop ;
            x += marginLeft ;
        }
        inner = false ;
    } while (e = e.offsetParent);
    return { x: x, y: y };
}

Y por último, la solución a mi problema. Al parecer existen un par de propiedades de los eventos que indican la posición relativa al contenedor en el que fueron realizados: offsetX³ y offsetY. Por lo que para nuestros propósitos, bastaría con algo como:

::jquery
$('selector').click(function(ev){
    x = ev.offsetX;
    y = ev.offsetY;
}

y todo parecería perfecto .. exceptuando por un 'insignificante' problema, offsetX no está definido⁴ en Firefox. Pero menos mal que si revisamos en stackoverflow nuevamente, podremos encontrar alguna solución, como por ejemplo:

::jquery
if(ev.offsetX == undefined){ // para firefox
    x = ev.pageX - $(this).offset().left;
    y = ev.pageY - $(this).offset().top;
}
else{ // chrome
    x = ev.offsetX;
    y = ev.offsetY;
}

demo

A modo de ejemplo, armé una demo en la que se trata de dibujar un punto de 2x2 en la posición en la que se realiza un click tal y como muestra la siguiente captura:

Notas:

En el ejemplo se comparan el método encontrado en la documentación de jquery así como la solución que utilicé, imprimiendo ambos resultados en la consola.
Observando que si bien en chrome ambos cálculos coinciden, en firefox hay una diferencia de 4px posiblemente al margin que le di al body (requeriría un mayor análisis).
Para dibujar el punto solo se utilizó la solución que expuse como final.

Código en bitbucket del ejemplo: demo (el directorio es: posicion-relativa-de-un-click)

Mozilla developers: pageX ↩
Mozilla developers: offsetLeft ↩
Especificación de la propiedad: offsetX ↩
reporte del bug en bugzilla ↩

Jquery StickyBox

2013-02-17T00:00:00-05:00

Plugin para jquery que genera bloques flotantes que siguen al usuario cuando se desplaza la página. Utiliza posicionamiento absoluto para reajustar la posición en base a los estilos css iniciales.

Por ejemplo, se podría usar en los siguientes casos:

Para realizar carritos de compras que muestran información de la compra actual
En caso de querer añadir botones sociales (facebook, twitter..)
Para generar menús flotantes

Requerimientos e Instalación

El plugin requiere tanto de jquery como de jquery easing.

Los scripts js requeridos son:

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='js/stickysidebar.jquery.min.js'></script>

Por ejemplo, el código html para un carrito de compras flotante podría ser:

    <aside id="sidebar">
      <div id="basket">
        <h3>Carrito de compras</h3>
        <p id="items" class='zero-items'>0</p>
      </div>
    </aside>

E inicializaríamos el plugin mediante:

::jquery
$("#sidebar").stickySidebar({
    timer: 200,
    easing: "easeInOutQuad",
    padding: 50
});

En su sitio web podremos ver con un poco de más de detalle los parámetros disponibles y un par de ejemplos del mismo.

A modo de práctica yo repliqué el primero de sus ejemplos (carrito de compras) con algunos detalles adicionales, el cual puede verse aquí.

Código en github del plugin: sticky-sidebar-jquery-plugin

Código en bitbucket de la demo que realizé: demo (el directorio es: sticky-sidebar-jquery-plugin)

Piu Avanti

2013-02-03T00:00:00-05:00

Pedro Bonifacio Palacios, poeta argentino conocido por varios pseudónimos siendo Almafuerte con el cual destacó. A mi parecer, sus cinco sonetos Avanti! son su mejor obra, de entre los cuales prefiero el segundo que es:

Piu Avanti

No te des por vencido, ni aun vencido, no te sientas esclavo, ni aun esclavo; trémulo de pavor, piénsate bravo, y arremete feroz, ya mal herido.

Ten el tesón del clavo enmohecido que ya viejo y ruin, vuelve a ser clavo; no la cobarde estupidez del pavo que amaina su plumaje al primer ruido.

Procede como Dios que nunca llora; o como Lucifer, que nunca reza; o como el robledal, cuya grandeza necesita del agua y no la implora...

Que muerda y vocifere vengadora, ya rodando en el polvo, tu cabeza!

Los demás poemas los podemos leer aquí ↩

Django Apps: admin_honeypot

2013-01-27T22:50:00-05:00

En django, por defecto se acostumbra a usar la url /admin/ como medio de acceso a la interfaz de administración. Sucede que hay quien conociendo esto intenta acceder a dicha url probando algunos usuarios/claves comunes, inclusive por medio de un ataque fuerza bruta con alguna herramienta.

Una medida sencilla con la que podremos filtrar algunos intentos no autorizados de acceso es cambiando esta url por defecto de /admin/ a alguna otra por ejemplo a /mi_nuevo_admin/¹.

Pero tal vez aún así queremos saber si alguien intentó acceder a la url por defecto. Allí es donde django-admin-honeypot nos puede ayudar.

Esta aplicación mantiene la url por defecto (/admin) así como la nueva activas. Y en caso de que alguien intente acceder a la url equivocada, nos enviará una notificación por email advirtiendonos del suceso.

Instalación

Requerimos instalar el paquete, lo podemos realizar por medio del clásico pip:
```
pip install django-admin-honeypot
```
Añadido admin_honeypot a nuestra lista de aplicaciones instaladas:

::python
INSTALLED_APPS = (
    ...

    'admin_honeypot',

    ...
)

Actualizamos nuestras url's (urls.py):

::python
urlpatterns = patterns(''
    ...
    url(r'^admin/', include('admin_honeypot.urls')),
    url(r'^mi_nuevo_admin/', include(admin.site.urls)),
    ...
)

Notas adicionales

Podemos ajustar la variable ADMIN_HONEYPOT_EMAIL_ADMINS a True para permitir que la aplicación envíe un email a los administradores del sitio cada vez que se produzca un error de acceso a la falsa url. (Por defecto está en False)
Los intentos de acceso errados son almacenados en la base de datos, siendo los permisos de eliminación de los mismos negados a todos los usuarios². Esto impide que cualquier usuario 'no autorizado' borre sus huellas.

Si bien solo esta aplicación nos ayuda con parte del problema, es posible que debamos buscar otros complementos/alternativas para mejorar la seguridad del sistema.

Note que esto no nos sería de mucha utilidad si tenemos la variable debug como True mientras estamos en producción. ↩
Why can’t I delete login attempts from the Django admin? ↩

Django Apps: South

2013-01-25T18:50:00-05:00

Se me ha dado por iniciar una revisión de algunas de las aplicaciones que uso en conjunto con django, lo que me permitirá de algún modo no solo el transmitir conocimiento, sino también afianzar lo que sé, ya que para redactar los artículos deberé de leer un tanto de la documentación (a modo de repaso).

Iniciaré con south, una aplicación que nos permite realizar migraciones de datos en nuestros proyectos/aplicaciones.

¿Qué es una migración?

Se refiere al cambio del esquema de la base de datos de una versión a otra. Por ejemplo:

El añadir un nuevo modelo(tabla) a nuestra aplicación.
El añadir o remover un campo de nuestro modelo.
El cambiar uno de los atributos de alguna tabla por ejemplo de null=False a null=True
Como nos indican en la documentación, para south una migración incluye el crear el esquema inicial de nuestra base de datos.

¿Por qué debo usar south?

south puede leer automáticamente los cambios que hemos realizado en nuestra base de datos y crear con un simple comando ingresado la migración necesaria. (en caso de conflictos, requerirá intervención del usuario por medio de algún mensaje)
Al igual que el ORM de Django, es independiente del motor de base de datos a usar, esto quiere decir que no obtendremos problemas si usamos sqlite, mysql o postgresql. A la fecha¹, el soporte para Microsoft SQL Server y Oracle estan en fase beta y alfa respectivamente.
Permite manejar cada aplicación de manera independiente, es decir, podemos escoger que aplicaciones serán manejadas por south y cuales lo serán por medio del ya conocido 'syncdb'.
South esta diseñado para detectar y advertirnos sobre conflictos introducidos por algún colaborador del proyecto mediante el sistema de control de versiones.

Instalación

Existen muchas maneras de instalar south, por medio de easy_install, pip, clonando la última versión del repositorio en mercurial, alguno de los paquetes descargables que nos otorgan o tal vez mediante el gestor de paquetes de nuestra distribución linux preferida (en el caso de que se incluyese south allí).

Mi método preferido² es por medio de pip ya que lo uso en conjunto con los entornos virtuales de virtualenv. Entonces por medio de pip, lo instalamos por medio de la siguiente instrucción:

pip install south

Y para nuestro proyecto en django añadimos 'south', a la relación de aplicaciones instaladas (INSTALLED_APPS).

Tutorial

En la documentación de south podemos encontrar un tutorial muy detallado sobre el uso de south, a continuación, un muy breve resumen:

Un nuevo proyecto en django con south

Por ejemplo, supongamos que estamos desarrollando un nuevo proyecto al que llamaremos ingeniosamente southTest con la aplicación testapp, la cual está enfocada a la administración de libros de una biblioteca.

Uno de los modelos de nuestra aplicación es el modelo libro, que contiene el título y el autor ambos como campos de texto.

Lo primero a realizar es crear la primera migración de nuestra aplicación, lo cual podemos realizar con el comando
```
./manage.py schemamigration testapp --initial
```
Con esto se debe de haber creado un directorio en nuestra aplicación conteniendo la migración inicial, tal y como se muestra en la siguiente imagen:

Antes de realizar la migración debemos de sincronizar la base de datos. Debido a que existe una migración para la aplicación 'testapp', el comando syncdb creará solo las tablas que están fuera de nuestra aplicación y nos indicará también cuales son las aplicaciones que estan o no administradas por south.

y tal como nos indica. ejecutamos la orden:

    ./manage.py migrate

con lo que se crea la única tabla de nuestro aplicación, la cual podemos observar desde el admin de django (en caso de haber registrado nuestro modelo)

Después de ingresar algunos libros, nos piden que la aplicación también deba de ser capaz de registrar los capítulos por cada libro, por lo que añadimos el modelo correspondiente:

creamos la migración con una variación del comando que usamos por primera vez y ejecutamos la migración:

    ./manage.py schemamigration testapp --auto
    ./manage.py migrate

a partir de este momento, cada nuevo cambio en el esquema de nuestra aplicación requerirá generalmente la ejecución de los dos comandos anteriores.

Con esto doy por terminado³ este exageradamente pequeño tutorial, que lo que pretende es mostrar el uso de los comandos básicos de south, y que generalmente son los únicos que usaremos (espero realizar en algún momento una segunda parte con un uso más complejo de south).

South Database API ↩
pip junto a easy_install son los métodos recomendados de instalación. ↩
Repositorio en bitbucket del proyecto de ejemplo ↩

Resetear password de PostgreSQL

2013-01-12T10:27:00-05:00

Recurrentemente he necesitado cambiar la contraseña del usuario 'postgres' del postgresql, por lo cual incluyo aquí una nota¹ para mi mismo y para a quien esto le pueda ayudar:

Pasos:

Abrimos una terminal y accedemos como usuario postgres:
```
sudo su postgres
```
Ejecutamos psql para acceder a la terminal interactiva de postgresql:
```
psql
```
Ahora escribimos esta sentencia SQL que nos permitirá asignar una nueva contraseña al usuario postgres:

alter user postgres with password 'nueva_contraseña';
Salimos de psql con:
```
\q
```
Cerramos nuestra sesión como postgres:
```
exit
```

y listo, contraseña cambiada.

Visto en el blog de Johan Hernandez ↩

Twitter Bootstrap vs Foundation 3

2013-01-01T11:47:00-05:00

Artículo desactualizado

Hace ya un buen tiempo que llevo usando bootstrap para maquetar uno que otro sitio, sobre todo por la facilidad que te otorga el tener una base sobre la que comenzar. Recientemente¹ he probado Foundation, sobre todo porque siempre es bueno conocer las alternativas. Y a pesar de que tan solo lo he usado un par de de días, podría decir que en algunos aspectos puede ser mucho más conveniente, que el usar bootstrap.

Si bien podría realizar aquí una comparativa de las bondades (a mi parecer) de cada uno de estos proyectos, ¿por qué repetir lo que ya esta hecho? (DRY²)

Lo que sí haré, será enumerar algunos buenos artículos sobre la comparación entre estos frameworks e incluir algun breve comentario.

Responsive CSS Framework Comparison: Aquí, por medio de varias tablas comparativas, se nos muestran diversos aspectos de Foundation(v2, v3), Bootstrap v2 y Skeleton. Resulta excelente para visualizar varios aspectos técnicos de cada uno de los dos.
Why I Use Foundation Over Bootstrap: Muestra el punto de vista del autor respecto al por qué usa Foundation en vez de Bootstrap. Y al final se nos recuerda, que ambos frameworks no son excluyentes, sino que podemos coger lo mejor de cada uno y construir nuestra propia quimera.
Foundation vs Bootstrap:Round 1: Otro punto de vista que concluye con el uso de Foundation para el caso de que gustemos tener un mayor control sobre la interfaz y Bootstrap para cuando deseemos tener un set de elementos gráficos predefinidos y no esperemos realizar grandes cambios a los mismos.
UI Cage Match: Bootstrap 2.2.1 vs. Foundation 3.2: Una última comparativa, muy reciente por cierto (22/12/2012). El autor realiza incluso una maqueta y la construye por medio de cada una de estas herramientas. Nos muestra las diferencias generales entre los elementos UI, complementos js y la cuadrícula.

En mi caso, prefiero Foundation por el facil manejo que me da sobre la cuadrícula, porque las clases me parecen más intuitivas y me da un mayor control sobre los estilos (lo cual a mi parecer es excelente).

Tal vez cuando desarrolle una mayor cantidad de sitios con Foundation pueda dar una más completa opinion, después de todo ambos frameworks son muy buenos y todo depende de nuestras necesidades, y como dicen:

'No hay herramienta mala, sino herramienta en malas manos'

Para el diseño de este sitio ↩
Principio 'Don't repeat yourself' ↩

Configurando Pelican en webfaction

2012-12-25T15:38:00-05:00

Ya que este sitio se encuentra alojado en webfaction y es generado gracias a Pelican, me pareció que debía de realizar una breve explicación de los pasos que seguí para configurarlo.

Por la naturaleza del contenido, la aplicación que necesitamos crear debe ser del tipo estática. En webfaction podemos crear aplicaciones estáticas, entre las que tenemos 2 clases principalmente:

Static/CGI/PHP: permiten interpretar scripts CGI y aplicaciones PHP.
Static only: sirve exclusivamente archivos estáticos lo que se traduce en un menor consumo de memoria¹.

Para nuestro caso, nos bastará con la del tipo static only

Una vez creada la aplicación, debemos de configurar nuestro sitio para generar los archivos respectivos en el directorio asignado, el cual estará ubicado por ejemplo en: $HOME/webapps/static_app

Pelican maneja los parámetros de producción de nuestro proyecto en el archivo llamado 'publishconf.py'. Para lo anterior, debemos de incluir la siguiente linea:

OUTPUT_PATH = '/home/<nombre_de_usuario>/webapps/static_app'

donde static_app corresponde a nuestra aplicación estática creada.

despues de configurar nuestra aplicación³ podemos ejecutar el comando:

make publish

que colectará los archivos generados en el directorio indicado.

Aunque muy posiblemente exista alguna otra mejor manera, de momento es la que uso; y por lo que veo, a diferencia de configurar algún otro tipo de aplicación² en webfaction, configurar pelican resulta exageradamente sencillo.

Ahora lo que sigue, al menos para mí, será el aprender a usar fabric para automatizar la tarea de publicar entradas.

http://docs.webfaction.com/software/static.html ↩
como django, que incluye creación de una base de datos, de la aplicación django propiamente dicha y la que maneja los static y media. ↩
he asumido que se tiene un entorno (posiblemente con virtualenv) en el que hemos instalado la pelican y los requerimientos adicionales de nuestra aplicación. ↩

Hola Mundo ..

2012-12-24T00:00:00-05:00

Hola mundo .. nuevamente ..

Desde siempre me agradó escribir, asi que en algún momento inicié un blog, el cual estuvo alojado en blogger. El contenido fue variado: soluciones a problemas que aparecían en mi pc, apuntes sobre cosas nuevas aprendidas sobre Python o Linux, alguna que otra anotación para no olvidar .. entre otros.

Ahora el blog estará en webfaction, y será generado mediante pelican, un fantástico generador de sitios estáticos el cual conocí por medio del blog de Joe di castro, los cuales recomiendo por cierto.

Aunque pelican tiene una utilidad que permite importar entradas de blogger, decidí que 'empezaría de cero', aunque claro tal vez copie alguna que otra entrada del sitio anterior que considere de utilidad. Si bien trataré de ser constante en las publicaciones .. uno nunca sabe.

Para terminar .. con esta publicación, un poco de código¹ (solo porque me gusta el cómo se ve coloreado):

::python
import lifetime

for each_day in lifetime.days():
    carpe_diem()

Visto en el manual de markdown de Joe. ↩