Crear mensajes con Emojis en Django

Crear mensajes con Emojis en Django
Escrito 3 years ago

Después de la entrada Miles de iconos para tu página web donde veíamos distintas opciones para añadir iconos y emoijs a nuestro sitio web. Hoy vamos a realizar un ejemplo de una aplicación para Django, que permitirá crear, guardar y mostrar mensajes personalizados con los emojis del proyecto twemoji-awesome

La aplicación será sencilla. Constará de una única página en la que se mostrarán los mensajes ya creados, además de un formulario para crear nuevos mensajes con emojis. Añado una captura de como queda la aplicación:

captura djangoemojis

Creando la app.

Lo primero es instalar y configurar nuestro entorno virtual y Django. Lo siguiente será crear una nueva aplicación que vamos a llamar djangoemojis. Para ello escribimos en consola el siguiente comando.

Crear aplicación para Django
1
$ python manage.py startapp djangoemojis

Este comando nos crea en el directorio actual, una estructura con los archivos básicos para crear una aplicación en Django.

El siguiente punto es descargarnos el archivo twemoji-awesome.css del repositorio github y log guardamos dentro de nuestra aplicación, en la siguiente ruta static/djangoemojis/twemoji-awesome.css. Este archivo contiene clases css que muestran los emojis de Twitter. Podéis encontrar más información de como funciona en la entrada Miles de iconos para tu página web.

Ahora abrimos al archivo model.py de nuestra aplicación. Aquí será donde crearemos el modelo para la base de datos que guardará los mensajes escrito por los usuarios.

archivo model.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
from django.db import models
from django.utils.html import escape


# lista de emojis. La clave es el nombre del emoji en el mensaje. El valor es el nombre de la clase css
# Visita http://www.emoji-cheat-sheet.com/ para ver todo los emojis disponibles.
EMOJIS = {
'heart': 'heart',
'sparkles': 'sparkles',
'hatching_chick': 'hatching-chick',
'smile': 'smile',
'hushed': 'hushed',
'angry': 'angry',
'zzz': 'zzz',
'poop': 'poop',
'dancer': 'dancer',
'alien': 'alien'
}

def transform_message(text):
# Función que transforma el código `:emoji-name:` en código html con el emoji seleccionado.

# Escapamos los caracteres html del texto. Para poder utilizar el texto con seguridad en las plantillas.
text = escape(text)

# Transformamos los saltos de lineas en etiquetas <br>
text = text.replace('\r\n', '<br>').replace('\n', '<br>').replace('\r', '<br>')

# Accedemos al diccionario EMOJIS y reemplazamos las coincidencias del texto por el código html.
for name, classname in EMOJIS.items():
text = text.replace(':%s:' % name, '<span class="twa twa-lg twa-%s"></span>' % classname)

return text


class Message(models.Model):
"""
Modelo para los mensajes que vamos a crear.
"""

class Meta:
# Nombre del modelo
verbose_name = 'Mensaje'
# Nombre del modelo en plural.
verbose_name_plural = 'Mensajes'

# Cadena con el author del mensaje.
author = models.CharField(max_length=40)
# Texto del mensaje sin transformar. Se utilizará si se quieren hacer modificaciones en el mensaje.
message = models.TextField()
# Texto del mensaje ya transformado. Será el que se muestre al público.
message_parsed = models.TextField()
# Fecha de la creación del mensaje
created = models.DateTimeField(auto_now_add=True)

def __str__(self):
return self.message[:100]

def save(self, *args, **kwargs):
# Antes de guardar el mensaje en la BD.
# Se transforma el texto del mensaje y se guarda en `self.messaged_parsed`

self.message_parsed = transform_message(self.message)
super(Message, self).save(*args, **kwargs)

Analizando el archivo tenemos:

  • Primero tenemos la variable global EMOJIS, que es un diccionario con los emojis que vamos a utilizar.

    • Las claves en el diccionario son los nombres que le daremos a los emoji en el texto del mensaje. El formato en el texto para añadir un emoji será :nombre_emoji:.

    • Los valores del diccionario son los nombre de la clase css para mostrar el emoji en el archivo twemoji-awesome.css.

  • transform_message(text) es la función que transformará el texto de nuestro mensaje, añadiéndole el código html necesario para mostrar los emojis. Esta función transforma el texto en 3 pasos.

    1. Escapa el posible código html que tenga el texto.

    2. Transforma los saltos de linea en etiquetas <br>.

    3. Busca en el texto la cadena :nombre_emoji: y lo transforma en el código css necesario para mostrar el emoji.

  • La clase Message es el modelo para la base de datos. Esta consta de 4 campos. 2 de ellos serán rellenado por los usuarios y otros 2 se crearán de forma automática:

    • author: Es una simple cadena de texto con el autor del mensaje.

    • message: Es el campo de texto donde se guardará el mensaje original escrito por el usuario.

    • message_parsed: Este campo contiene el mensaje original pero con el código html necesario para mostrar los emojis.

    • created: Es el campo que guarda la fecha en la que se creo el mensaje. Gracias al parámetro auto_now_add=True, Django rellenará este campo con la fecha del instante en que se crea el mensaje, de forma automática. Por lo que no es necesario que sea rellenado por el usuario ni desde otra parte del código.

    • save(): Esta es una función especial de los modelos en Django -Más información-. Se invoca cada vez que se guarda un nuevo mensaje. En este caso, lo que hacemos es reescribirla para que antes de guardar el mensaje en la base de datos rellene el campo self.message_parsed, utilizando la función transform_message() y el campo que guarda el texto del mensaje self.message.

El siguiente es el archivo forms.py que guarda el formulario para crear el mensaje.

forms.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
from django import forms
from djangoemojis.models import Message


class MessageForm(forms.ModelForm):
""" Formulario basado en el modelo Message. Será el que los usuarios utilicen para insertar su mensaje.
"""

class Meta:
# Nombre del modelo.
model = Message
# Campos del modelo que vamos a mostrar en el formulario.
fields = ('author', 'message')
# Etiqueta `label` para esos campos.
labels = {
'author': 'Autor',
'message': 'Mensaje'
}

Es un formulario modelForm de Django para el modelo Message. No tiene nada especial. Los 2 campos del modelo author y message serán rellenados por el usuario.

En el archivo views.py crearemos la vista necesaria para mostrar los mensajes y el formulario.

views.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
from django.shortcuts import render, redirect
from djangoemojis.models import Message, EMOJIS
from djangoemojis.forms import MessageForm


def index_view(request):
""" Vista del índice de la aplicación. """

# Extraemos todos los mensajes.
messages = Message.objects.all().order_by('-created')
# Extremos los emojis del diccionario `EMOJIS` para mostrarlos en la plantilla.
emojis = [{'classname': cln, 'name': name} for name, cln in EMOJIS.items()]

# Comprobamos si el usuario ha enviado el formulario.
if request.method == 'POST':
# Pasamos los datos del formulario almacenados en `request.POST`, al formulario `MessageForm`
form = MessageForm(request.POST)
# Se comprueba si los datos del formulario son válidos.
if form.is_valid():
# Guardamos los datos del formulario y redireccionamos al índice.
form.save()
return redirect('djangoemojis:index')

else:
# El usuario no ha enviado el formulario. Creamos uno nuevo.
form = MessageForm()

return render(request, 'djangoemojis/index.html', {'form': form, 'messages': messages, 'emojis': emojis})

Este archivo contiene una única view index_view, que será la encargada de mostrar la única página de la aplicación. En ella aparecen 3 variables interesantes, que serán las que se pasen a la plantilla.

  • La variable messages que es una lista con todo los mensajes almacenados en la base de datos, ordenados en orden decreciente según su fecha de creación.

  • La variable emojis, que contiene los emojis disponibles, almacenados en la variable global EMOJIS. Esta variable se utiliza para mostrar en la plantilla todo los emojis que hay disponibles. Así el usuario podrá hacer clic en ellos y añadirlos directamente al texto del mensaje. Esto ser hará con javascript, dentro de la plantilla.

  • La variable form. Esta variable contiene el formulario que se usa para crear los mensajes. Se trata de la misma manera que cualquier otro formulario.

Ya solo queda la plantilla, que hemos llamado djangoemojis/index.html

djangoemojis/index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twemoji Awesome</title>
<link rel="stylesheet" type="text/css" href="{% static 'djangoemojis/twemoji-awesome.css' %}"/>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<style type="text/css">
/* Aquí iran los estilos para nuestra página */
</style>

<script type="text/javascript">
/*
Devuelve un array de 3 valores con el texto del textarea.
@return [string, string, string]
- 1º celda: Texto del textarea hasta el cursor o hasta el principio de la selección.
- 2º celda: Texto del textarea seleccionado. Si no hay nada seleccionado entonces es una cadena vacía.
- 3º celda: Texto del textarea después del cursor hasta el final o despúes de la selección hasta el final.
*/
function getSelectedText(textarea){
var text = textarea.val(),
start = textarea.prop('selectionStart'),
end = textarea.prop('selectionEnd');

return [
text.substr(0, start),
start != end? text.substr(start, end-start): '',
text.substr(end)
];
}

$(document).on('ready', function(){
var textarea = $('#id_message');

$('#twemoji_list span').on('click', function(){
var text = getSelectedText(textarea);
textarea.val(text[0] + ':' + $(this).data('name') + ':' + text[2]);
})
});
</script>

</head>
<body>
<h1>Twemoji awesome</h1>
<p>
Ejemplo de insertar emojis en un texto con Django
</p>
<div class="container">
<div>
<h2>Mensajes</h2>
<ul class="messages">
{% for msg in messages %}
<li>
<p>
{{ msg.message_parsed|safe }}
<div>
Escrito por {{ msg.author }} hace {{ msg.created|timesince }}
</div>
</p>
</li>
{% endfor %}
</ul>
</div>
<div>
<h2>Escribe un nuevo mensaje</h2>
<p>Haz clic en un emoji, si quieres añadirlo al texto</p>
<div id="twemoji_list">
{% for emoji in emojis %}
<span class="twa twa-lg twa-{{ emoji.classname }}" data-name="{{ emoji.name }}"></span>
{% endfor %}
</div>
<form action="{% url 'djangoemojis:index' %}" method="post" id="new_message">
{% csrf_token %}
<ul>
{{ form.as_ul }}
</ul>
<button type="submit">Enviar</button>
</form>
</div>
</div>
<div style="text-align:center;padding-top: 20px;">
Más información en <a href="http://buhoprogramador.com">Búho programador</a><br>
Gracias a <a href="http://ellekasai.github.io/twemoji-awesome/">twemoji-awesome</a> por proporcionar el archivo css necesario.
</div>
</body>
</html>

La plantilla muestra los mensajes de la variable messages que le hemos pasado en la view. El texto del mensaje se añade en la linea {{ msg.message_parsed|safe }}. El filtro safe. nos asegura que el código html que hemos añadido con la función transform_message no sea escapado por Django. También añadimos el formulario y por último una sección donde mostrar los emojis que el usuario puede utilizar.

Añadimos algo de código javascript y jquery para que cuando el usuario haga clic sobre uno de los emojis de la sección, se añada un texto en el textarea con el nombre del emoji.

En el archivo urls.py de nuestra aplicación añadimos los siguiente.

urls.py
1
2
3
4
5
6
7
from django.conf.urls import url

import djangoemojis.views as views

urlpatterns = [
url(r'^$', views.index_view, name='index')
]

Y la aplicación ya está creada. Para añadirla a nuestro proyecto solo tenemos que modificar la variable INSTALLED_APPS del archivo settings.py y añadir la nueva aplicación que hemos creado djangoemojis. Y en el archivo urls.py hay que incluir las urls de nuestra aplicación.

archivos urls.py principal de nuestra aplicación.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import djangoemojis.urls as urls_djangoemojis
from django.contrib import admin


urlpatterns = [
url(r'^admin/', admin.site.urls),
# Incluimos un acceso a las urls de nuestra aplicación.
# namespace debe ser `djangoemojis` para que la función url de la plantilla funcionen correctamente
url(r'^djangoemojis', include(urls_djangoemojis, namespace='djangoemojis'))
]

Esta aplicación solo es un ejemplo de como añadir emojis a el texto de los mensajes o comentarios de nuestra aplicación web. No tiene un uso real, pero os puede orientar y podéis adaptarla a vuestro propio proyecto para hacer algo similar.

Por último os dejo un enlace a Github donde os podréis descargar la aplicación completa.

Comentarios