🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Copia, Pega y Funciona】¡Crea una App Web con Python para Leer y Mostrar Datos CSV!

¡Imprescindible para principiantes en programación! En este artículo, te explicaremos de la manera más detallada posible cómo crear una sencilla aplicación web que lee un archivo CSV usando Python y muestra su contenido en una tabla en el navegador. No necesitas conocimientos especializados. Simplemente copia y pega el código que te proporcionamos y tendrás una aplicación funcionando en tu ordenador. ¡Experimenta por ti mismo la emoción de ver que "funciona"!

Introducción: Hace solo unos meses, yo estaba en tu misma situación

¡Hola! Soy el autor de este artículo y, hace solo unos meses, era un completo novato que no sabía absolutamente nada de programación. Me frustraba con cada error y estuve a punto de rendirme muchas veces, pensando: "Quizás esto no es para mí...".

Pero, a base de prueba y error y con la ayuda de la IA (Inteligencia Artificial) como mi compañera, poco a poco empecé a entender el código. Sin darme cuenta, en un mes y medio, había lanzado dos sitios web por mi cuenta (buyonjapan.com, copicode.com).

Este artículo es exactamente lo que me hubiera gustado leer en aquel entonces. Lo he escrito desde la perspectiva de un principiante, compartiendo los obstáculos con los que me encontré y cómo los superé. Evitaré la jerga técnica tanto como sea posible y, cuando la use, la explicaré de forma sencilla para que puedas seguirme sin problemas.

PASO 1: Prepara el entorno de desarrollo

Primero, vamos a prepararnos para crear la aplicación. Piensa en esto como el paso de "reunir los ingredientes y utensilios" en la cocina. No es nada complicado, así que vamos a verlo paso a paso.

1. Preparación de Python y Flask

Esta aplicación se crea con un lenguaje de programación llamado Python y una herramienta llamada Flask (que, en términos técnicos, es un "framework web").

Flask es como una caja mágica que hace que crear aplicaciones web con Python sea increíblemente fácil. Lo primero es instalar Flask en tu ordenador.

Abre la "Terminal" en tu ordenador (o el "Símbolo del sistema" o "PowerShell" en Windows), copia y pega el siguiente comando y ejecútalo.

pip install Flask

*No te preocupes si te preguntas "¿qué es pip?". Solo recuerda que es un comando que viene con Python para añadir herramientas (librerías) útiles.

2. Preparación de la carpeta de trabajo y los archivos

A continuación, vamos a crear un lugar (una carpeta) para guardar los planos y materiales de nuestra aplicación. Crea una nueva carpeta llamada "csv_app" en el lugar que prefieras de tu ordenador.

Luego, crea los siguientes tres elementos dentro de esa carpeta "csv_app".

  • app.py: El archivo de Python que define la lógica principal de la aplicación.
  • data.csv: El archivo CSV que contiene los datos que quieres mostrar en el navegador.
  • Una carpeta llamada templates
    • Dentro de esta carpeta, crea index.html. Este archivo define la apariencia de la página que se muestra en el navegador.

La estructura de tu carpeta debería ser así:

csv_app/
├── app.py
├── data.csv
└── templates/
    └── index.html

【Punto clave】Debes colocar el archivo HTML dentro de una carpeta llamada "templates". Esta es una regla de Flask; es una convención para decirle a Flask: "Oye, los archivos de diseño de la página están aquí". Si usas un nombre diferente, obtendrás un error, así que ten cuidado.

PASO 2: Prepara los datos a mostrar (data.csv)

A continuación, vamos a preparar los datos CSV para nuestra aplicación. Copia y pega el siguiente contenido en el archivo data.csv que creaste y guárdalo.

Para este ejemplo, usaremos una lista de miembros simple.

ID,Nombre,CorreoElectronico,FechaDeRegistro
1,Maria Garcia,maria.garcia@example.com,2024-05-01
2,Javier Rodriguez,javier.rodriguez@example.com,2024-05-15
3,Sofia Martinez,sofia.martinez@example.com,2024-06-03
4,Carlos Hernandez,carlos.hernandez@example.com,2024-06-21
5,Ana Lopez,ana.lopez@example.com,2024-07-10

Un punto a tener en cuenta: la codificación de caracteres

Cuando guardes el archivo, te recomendamos que establezcas la codificación de caracteres en "UTF-8". Es como una regla universal para que los ordenadores entiendan los caracteres. Usarla evita el fenómeno del "texto corrupto", donde el texto puede aparecer como "???".

Cuando era principiante, pasé horas luchando con este problema de la codificación... Si tu aplicación no funciona correctamente y ves texto ilegible, lo primero que debes comprobar es la codificación de este archivo CSV.

PASO 3: Escribe el programa Python para ejecutar el servidor (app.py)

¡Ahora vamos con el programa principal! Copia y pega todo el código de abajo en tu archivo app.py. Explicaré qué significa cada parte en detalle después del bloque de código.

# Importar las herramientas (librerías) necesarias
from flask import Flask, render_template
import csv

# Crear la instancia principal de la aplicación Flask
app = Flask(__name__)

# Definir el proceso para cuando se accede a una URL específica
@app.route('/')
def index():
    # Prepararse para abrir y leer el archivo CSV
    # Especificar encoding='utf-8' para evitar texto corrupto
    with open('data.csv', 'r', encoding='utf-8') as file:
        # Usar el lector del módulo csv para leer los datos separados por comas
        csv_reader = csv.reader(file)
        
        # Leer primero la primera línea (el encabezado)
        header = next(csv_reader)
        
        # Leer las filas de datos restantes en una lista
        data = [row for row in csv_reader]

    # Pasar los datos al HTML y generar la página
    return render_template('index.html', header=header, data=data)

# Si este archivo se ejecuta directamente, iniciar el servidor web
if __name__ == '__main__':
    # Establecer debug=True es conveniente, ya que el servidor se reiniciará automáticamente cuando modifiques el código
    app.run(debug=True)

Explicación del código (un resumen rápido)

  • from flask import ..., import csv
    Esto es como un hechizo para habilitar las útiles cajas de herramientas llamadas "Flask" y "csv" que vamos a usar.
  • app = Flask(__name__)
    Esto crea el cuerpo principal de la aplicación Flask. Es una convención estándar, así que por ahora, acéptalo como "así es como se escribe".
  • @app.route('/')
    Es como una hoja de instrucciones que dice: "Cuando llegue una solicitud a la página principal del sitio web ('/'), ejecuta la función que está justo debajo (index())".
  • def index():
    Este es el proceso real que se ejecuta cuando se accede a la página principal.
    • with open(...): Abre el archivo CSV. La parte encoding='utf-8' es un punto clave para evitar texto corrupto. Usar with es conveniente porque cierra automáticamente el archivo una vez finalizado el proceso.
    • csv.reader(file): Esta es una función que toma el archivo CSV abierto y lo divide por comas, facilitando su manejo por parte de Python.
    • header = next(csv_reader): Toma la primera línea del archivo CSV (ID, Nombre, ...) y la almacena como el "encabezado".
    • data = [row for row in csv_reader]: Toma todas las filas de datos restantes y las almacena en una lista (una colección de datos) llamada "data".
  • return render_template(...)
    Esta es la parte más crucial. Es una orden a Flask que dice: "¡Por favor, crea una página web usando el archivo de diseño llamado index.html! Y ya que estás, te paso la información de header y data que acabo de leer, ¡así que úsala también!"
  • if __name__ == '__main__': ...
    Esta es una frase estándar para iniciar el servidor web de desarrollo cuando este archivo de Python se ejecuta directamente.

Puede parecer un montón de conjuros al principio, ¡pero estarás bien una vez que entiendas el simple flujo de "leer el archivo" y "pasarlo al HTML"!

PASO 4: Crea el diseño de visualización (HTML) (templates/index.html)

A continuación, crearemos el archivo HTML que actuará como el "contenedor" para mostrar los datos pasados desde Python. Copia y pega el siguiente código en el archivo index.html dentro de tu carpeta templates.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visor de Datos CSV</title>
    <!-- Estilos simples para el modo oscuro -->
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        th, td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">Lista de Datos CSV</h1>

    <!-- Mostrar la tabla si existen datos -->
    {% if data %}
    <table>
        <thead>
            <tr>
                <!-- Mostrar el encabezado pasado desde Python -->
                {% for col in header %}
                    <th>{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            <!-- Mostrar los datos pasados desde Python fila por fila -->
            {% for row in data %}
            <tr>
                {% for cell in row %}
                    <td>{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>No hay datos para mostrar.</p>
    {% endif %}

</body>
</html>

Símbolos especiales en el HTML: {% ... %} y {{ ... }}

Puede que notes algunos símbolos poco familiares en este código HTML, como {% ... %} y {{ ... }}. Esta es la sintaxis de Jinja2, el motor de plantillas que utiliza Flask.

  • {% for ... %} ... {% endfor %}
    Cumple la misma función que un "bucle for" en Python. Significa: "Repite el HTML que hay aquí por cada dato pasado desde Python". Esto te permite generar automáticamente 5 filas de tabla si tienes 5 filas de datos, o 100 si tienes 100.
  • {{ ... }}
    Es un marcador de posición para mostrar el "contenido" de una variable pasada desde Python. {{ col }} muestra el nombre de la columna del encabezado, y {{ cell }} muestra el contenido de cada celda de datos.

Al separar Python (procesamiento de datos) de HTML (presentación) de esta manera, tu código se vuelve más fácil de gestionar y es más sencillo construir aplicaciones más complejas. Este es uno de los mayores beneficios de usar un framework como Flask.

PASO 5: ¡Vamos a ejecutar la aplicación!

Muy bien, ¡todos los preparativos están listos! Finalmente es hora de ejecutar la aplicación.

Abre de nuevo tu terminal (o Símbolo del sistema) y usa el comando cd para navegar a la carpeta "csv_app" que creaste antes.

Luego, ejecuta el siguiente comando:

python app.py

Después de ejecutar el comando, deberías ver un mensaje como este en tu terminal:

 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

Si ves un mensaje como "Running on http://127.0.0.1:5000", ¡has tenido éxito! Un servidor web se está ejecutando en tu ordenador.

Abre tu navegador web (como Google Chrome) y copia y pega la siguiente URL en la barra de direcciones:

http://127.0.0.1:5000

¿Qué tal se ve? ¡El contenido de data.csv debería mostrarse ahora en una tabla ordenada en tu navegador! Esta es la aplicación web que has construido con Python. ¡Felicidades! 🎉

【Sección Extra】¡Haciéndolo aún más fácil con Pandas!

El método actual funciona perfectamente, pero Python tiene una librería increíblemente potente para el análisis de datos llamada Pandas. Usarla hace que leer archivos CSV y convertirlos a HTML sea aún más sencillo.

Si te interesa, no dudes en probar esto.

1. Instalando Pandas

Primero, instalemos Pandas. En tu terminal (después de detener el servidor con Ctrl+C), ejecuta este comando:

pip install pandas

2. Modificando app.py

Reescribe app.py de la siguiente manera. ¿Puedes ver cuánto más corta se ha vuelto la parte de la lectura del CSV?

from flask import Flask, render_template
import pandas as pd # importar pandas como pd

app = Flask(__name__)

@app.route('/')
def index():
    # Leer el archivo CSV usando Pandas (¡solo una línea!)
    df = pd.read_csv('data.csv', encoding='utf-8')
    
    # Convertir el DataFrame a una etiqueta de tabla HTML (¡también una línea!)
    # Puedes especificar clases de CSS con el atributo classes, eliminar el borde con border=0, etc.
    html_table = df.to_html(classes='data-table', index=False, border=0)
    
    # Pasar los datos de la tabla al HTML para generar la página
    return render_template('index_pandas.html', table=html_table)

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

3. Creando index_pandas.html

Como Pandas genera todo el HTML de la tabla, el archivo HTML en sí también se vuelve más simple. Crea un nuevo archivo llamado index_pandas.html en tu carpeta templates y pega el siguiente código.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visor de Datos CSV (Versión Pandas)</title>
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        /* Aplicar estilos al nombre de la clase especificado en to_html */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        .data-table th, .data-table td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        .data-table thead th { /* Estilos de la fila de encabezado */
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">Lista de Datos CSV (Versión Pandas)</h1>

    <!-- Mostrar la tabla HTML pasada desde Python(Pandas) tal cual -->
    {{ table|safe }}

</body>
</html>

La parte clave es {{ table|safe }}. El código HTML generado por Pandas incluye etiquetas como <table>, por lo que añadimos el filtro |safe para decirle a Flask: "Este es HTML seguro, así que por favor, renderízalo tal cual".

Si ejecutas python app.py de nuevo y accedes a la página, debería mostrarse una tabla similar. ¡El código es mucho más limpio y se ha abierto la puerta a una manipulación de datos más avanzada!

Conclusión: Un pequeño "¡Lo logré!" se convierte en un gran paso adelante

En este artículo, creamos una sencilla aplicación web para mostrar datos CSV en un navegador usando Python y Flask. ¿Pudiste experimentar la sensación de "copiar, pegar y que funcione"?

Aprender a programar es como escalar una montaña enorme. Si apuntas a la cima desde el principio, te desanimarás por la pendiente. Pero si vas superando pequeñas metas una a una, como "Primero, lleguemos al campamento base" o "Después, a esa colina con la vista bonita", podrás avanzar firmemente hacia la cima.

Me sentiría muy feliz si el pequeño éxito de "¡El código que escribí (o pegué) hizo que una aplicación web funcionara!" que has experimentado en este artículo te da la confianza para dar tu siguiente paso.

A partir de aquí, intenta hacer tus propias modificaciones, como "Añadamos una función de búsqueda" o "Hagamos que los datos se puedan editar". No pasa nada si te encuentras con errores; son parte del proceso de aprendizaje. Disfruta de la diversión de construir tu propia aplicación única mientras pides ayuda a la IA o buscas los mensajes de error en internet.

Extra: El código fuente HTML completo y funcional (Resultado del navegador)

Como referencia, aquí tienes el código fuente HTML real que se genera en el navegador web cuando ejecutas la primera aplicación que creamos (la versión con la librería estándar). Puede ser útil para hacerte una idea de cómo el programa de Python crea dinámicamente este HTML basándose en el contenido del archivo CSV.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visor de Datos CSV</title>
    <!-- Estilos simples para el modo oscuro -->
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        th, td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">Lista de Datos CSV</h1>

    <!-- Mostrar la tabla si existen datos -->
    
    <table>
        <thead>
            <tr>
                <!-- Mostrar el encabezado pasado desde Python -->
                
                    <th>ID</th>
                
                    <th>Nombre</th>
                
                    <th>CorreoElectronico</th>
                
                    <th>FechaDeRegistro</th>
                
            </tr>
        </thead>
        <tbody>
            <!-- Mostrar los datos pasados desde Python fila por fila -->
            
            <tr>
                
                    <td>1</td>
                
                    <td>Maria Garcia</td>
                
                    <td>maria.garcia@example.com</td>
                
                    <td>2024-05-01</td>
                
            </tr>
            
            <tr>
                
                    <td>2</td>
                
                    <td>Javier Rodriguez</td>
                
                    <td>javier.rodriguez@example.com</td>
                
                    <td>2024-05-15</td>
                
            </tr>
            
            <tr>
                
                    <td>3</td>
                
                    <td>Sofia Martinez</td>
                
                    <td>sofia.martinez@example.com</td>
                
                    <td>2024-06-03</td>
                
            </tr>
            
            <tr>
                
                    <td>4</td>
                
                    <td>Carlos Hernandez</td>
                
                    <td>carlos.hernandez@example.com</td>
                
                    <td>2024-06-21</td>
                
            </tr>
            
            <tr>
                
                    <td>5</td>
                
                    <td>Ana Lopez</td>
                
                    <td>ana.lopez@example.com</td>
                
                    <td>2024-07-10</td>
                
            </tr>
            
        </tbody>
    </table>
    

</body>
</html>