Guías Técnicas

Generador de Códigos de Barras con Python, Flask y Bootstrap 5

  Cómo Crear un Archivo .exe desde un Script de Python

En este proyecto, crearemos una aplicación web con Python y Flask que permita generar códigos de barras a partir de un valor ingresado por el usuario, utilizando el framework de diseño web Bootstrap 5.

1. Configurar el Entorno de Desarrollo

Asegúrate de tener Python 3 instalado en tu sistema. Luego, crea un entorno virtual y actívalo para aislar las dependencias del proyecto. Si necesitas un repaso sobre cómo funcionan los entornos virtuales en Python, consulta este post completo sobre entornos virtuales en Python.:

bash 
python -m venv venv
source venv/bin/activate

Instala las dependencias necesarias:

bash 
pip install flask python-barcode Pillow

2. Crear la Estructura del Proyecto

Crea los siguientes archivos y carpetas en tu proyecto:

bash 
barcode_generator/
├── app.py
├── templates/
│   └── index.html

app.py contendrá el código de la aplicación Flask. templates/index.html será la plantilla HTML para la página web.

3. Implementar la Lógica de la Aplicación

Abre app.py y agrega el siguiente código:

python 
from flask import Flask, render_template, request, send_file
import barcode
from barcode.writer import ImageWriter
from io import BytesIO

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
  if request.method == 'POST':
      barcode_value = request.form['barcode_value']
      barcode_type = 'code128'
      
      # Generar el código de barras
      bar = barcode.get(barcode_type, barcode_value, writer=ImageWriter())
      file_obj = BytesIO()
      bar.write(file_obj)
      
      # Retrocede el puntero al inicio del archivo para que se lea desde el comienzo
      file_obj.seek(0)
      
      return send_file(
          file_obj,
          mimetype='image/png',
          as_attachment=True,
          download_name=f'{barcode_value}.png'  # Cambiado a download_name
      )
  
  return render_template('index.html')

if __name__ == '__main__':
  app.run(debug=True, port=5000)

Este código es el mismo que en la guía anterior.

4. Crear la Plantilla HTML

Crea el archivo templates/index.html con el siguiente contenido:

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Generador de Código de Barras</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
</head>
<body>
  <div class="container my-5">
    <h1 class="text-center mb-4">Generador de Código de Barras con Python</h1>

    <div class="container vh-50 d-flex justify-content-center align-items-center">
      <div class="row align-items-center">
        <div class="col-md-12">
          <form method="POST" action="{{ url_for('index') }}" class="d-flex flex-column align-items-center">
            <div class="mb-3 w-100">
              <label for="barcode_value" class="form-label">Ingresa el valor del código de barras:</label>
              <input type="text" class="form-control" id="barcode_value" name="barcode_value" required />
            </div>
            <button type="submit" class="btn btn-primary">Generar Código de Barras</button>
          </form>
        </div>
      </div>
    </div>

    {% if request.method == 'POST' %}
      <div class="mt-4 d-flex justify-content-center">
        <img src="data:image/png;base64,{{ image_data }}" alt="Código de barras" class="img-fluid" />
      </div>
    {% endif %}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

En esta versión, hemos utilizado las clases de Bootstrap 5 para dar estilo a la página sin necesidad de escribir CSS adicional.

5. Ejecutar la Aplicación

Finalmente, ejecuta la aplicación Flask con uno de los siguientes comandos:

bash 
python app.py
# o 
flask run
  Cómo Crear un Archivo .exe desde un Script de Python

Ahora puedes acceder a la aplicación en http://localhost:5000/. Ingresa un valor para el código de barras, haz clic en “Generar Código de Barras” y verás que la imagen se genera y se descarga automáticamente.

Si tienes alguna duda, puedes revisar el proyecto en el siguiente Repositorio.