100 Días de Código en Python — Día 62: Proyecto "Coffee & Wifi" — Flask, WTForms, Bootstrap y CSV

📝 Contenido original del curso#

"Como en un proyecto real con un cliente", el frontend ya está hecho: tu trabajo es el backend. El objetivo del día es sentirte cómodo con Flask-WTF, Bootstrap-Flask, las clases de Bootstrap y repasar el manejo de CSV. (Si quieres más práctica de HTML y Bootstrap, puedes construir todo desde cero.)

El sitio, Coffee & Wifi, reúne cafeterías de Londres con buen café, wifi y enchufes para trabajar con el portátil.

Sobre cómo aprender: "El aprendizaje ocurre cuando te atascas y resuelves tus problemas". La profesora recomienda dedicar al menos una hora antes de mirar la solución; si llevas media hora atascado en el paso 1, "toma un descanso, sal a caminar, come algo y vuelve al código". Y recuerda: "hay varias formas de hacer lo mismo; la solución de ejemplo no es la única".

Prerequisitos: Bootstrap (Día 58), herencia de plantillas, Flask-WTF, validadores y Bootstrap-Flask (Día 61), CSV (Día 25), bucles en Jinja (Día 57).

📝 Ejercicio original del curso#

1. Descarga y descomprime los archivos de inicio.
2. Ábrelos en PyCharm y acepta crear el entorno virtual e instalar requirements.txt. Si hay subrayados rojos: File → Reload All from Disk.
3. Si no te lo ofrece, crea el entorno a mano (Add Local Interpreter, sin "inherit global site-packages").
4. Si aún faltan paquetes: python -m pip install -r requirements.txt (Windows) o pip3 install -r requirements.txt (macOS).
5. Explora el proyecto: hay un archivo .csv con datos de algunas cafeterías de Londres.

🔍 Antes de programar#

Antes de escribir una línea, lee el proyecto como si fuera de otra persona:

• ¿Qué rutas existen ya en main.py? ¿Cuáles faltan?
• ¿Qué plantillas hay y cuál hereda de cuál?
• Abre el CSV con un editor de texto (no solo con Excel): ¿cuáles son las columnas?, ¿qué separador usa?, ¿hay emojis o símbolos?, ¿termina con un salto de línea?
• ¿Qué variables espera cada plantilla (cafes, form…)?

📝 Ejercicio original del curso: los requisitos#

1. Portada con estilo: la página de inicio debe usar css/styles.css. Pista: agrega a base.html los bloques de la plantilla de inicio de Bootstrap-Flask y enlaza la hoja de estilos.
2. Ruta /cafes: debe renderizar cafes.html con una tabla de Bootstrap con todos los datos de cafe-data.csv. Pista: la ruta envía un objeto cafes; ponlo dentro de un <p> para ver cómo es.
3. Enlace al mapa: la URL de la ubicación debe mostrarse como un <a> con el texto "Maps Link", no como el enlace completo. Pista: todos los enlaces de ubicación empiezan por "http".
4. El botón "Show Me!" de la portada lleva a cafes.html.
5. Ruta secreta /add: no tiene botón, pero "quien la conozca" puede entrar; renderiza add.html.
6. En add.html, un formulario con WTForms y render_form con todos los campos de la demostración.
7. El campo de la ubicación debe validar que sea una URL. (El curso enlaza cómo desactivar la validación del navegador.)
8. Al enviar el formulario con éxito, los datos se agregan al final de cafe-data.csv, separados por comas como las demás líneas.
9. Todos los enlaces de navegación deben funcionar.

📖 Guía de razonamiento por requisito (adaptación, sin la solución completa)#

Requisito 2 — leer y mostrar el CSV. El patrón para leer un CSV como lista de filas:

import csv

with open("cafe-data.csv", newline="", encoding="utf-8") as archivo:
    lector = csv.reader(archivo, delimiter=",")
    filas = list(lector)          # la fila 0 son los encabezados

En la plantilla, dos ciclos anidados: uno por fila y, dentro, uno por celda. Para separar los encabezados puedes usar filas[0] y filas[1:], o loop.first de Jinja.

Requisito 3 — el enlace. Dentro del ciclo de celdas:

{% if celda[0:4] == "http" %}
    <td><a href="{{ celda }}">Maps Link</a></td>
{% else %}
    <td>{{ celda }}</td>
{% endif %}

Jinja permite rebanadas ([0:4]) igual que Python. También sirve celda.startswith("http").

Requisito 6 — el formulario. Una clase CafeForm(FlaskForm) con un campo por columna del CSV. Para las calificaciones (café, wifi, enchufes) es mejor un SelectField con las opciones fijas que un campo de texto libre: así nadie escribe algo que rompa el formato.

Requisito 7 — validar la URL (verificado con WTForms 3.2):

Requisito 8 — agregar al CSV. Hazlo con el módulo csv, no uniendo textos con comas (sección 3).

⚠️ Errores frecuentes#

🎯 Objetivo de aprendizaje#

Leer y escribir un CSV de forma que funcione con acentos, emojis y comas dentro de los datos, en cualquier sistema operativo.

📖 Problema 1: la codificación en Windows (verificado)#

En Windows, open() sin encoding usa la codificación regional (cp1252), no UTF-8. Resultado al leer un CSV guardado en UTF-8:

Regla: siempre encoding="utf-8" al leer y al escribir. En Mac y Linux el error no aparece, por eso un programa "que funciona en mi computador" falla en el del compañero.

📖 Problema 2: el salto de línea final (verificado)#

Si el archivo no termina con un salto de línea y agregas "\nNuevo,...", y luego otra fila con csv.writer (que pone el salto al final de cada fila, no al principio), el resultado es:

Cafe,Location
Lighthaus,https://a
Otro,https://b"Café, con coma",https://c      ← dos registros en una línea

Regla: agrega filas siempre con csv.writer y asegúrate de que el archivo termine en salto de línea (ábrelo en un editor y revisa la última línea). Una forma robusta:

import csv

def agregar_fila(ruta, fila):
    with open(ruta, "a", newline="", encoding="utf-8") as archivo:
        csv.writer(archivo).writerow(fila)

newline="" evita que en Windows aparezcan líneas en blanco entre filas.

📖 Problema 3: comas dentro de los datos#

",".join(["Café, con coma", "https://c"]) produce Café, con coma,https://c: tres columnas en vez de dos. csv.writer lo resuelve poniendo comillas: "Café, con coma",https://c (verificado).

📖 Alternativas#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: reescribe la lectura con csv.DictReader y muestra la tabla usando los nombres de las columnas.
• 🟡 Reto 2: en /cafes, agrega un filtro por la URL: /cafes?wifi=5 muestra solo las cafeterías con wifi máximo (request.args, Día 60).
• 🟠 Reto 3: antes de agregar un café, comprueba que no exista ya uno con el mismo nombre (sin distinguir mayúsculas) y muestra un error en el formulario.
• 🔴 Reto 4 — Pensamiento computacional: ¿qué pasa si dos personas envían el formulario al mismo tiempo? Investiga qué es una "condición de carrera" y explica por qué una base de datos (Día 63) lo maneja mejor que un CSV.

Problema#

Quien trabaja o estudia con portátil necesita saber qué cafeterías tienen buen café, wifi estable y enchufes. La información está en un CSV que nadie puede consultar cómodamente ni ampliar.

Contexto#

En tu ciudad también pasa: bibliotecas públicas, cafés y parques con wifi. Un sitio colaborativo permite que la comunidad comparta esa información.

Objetivo#

Completar el backend de Coffee & Wifi según los 9 requisitos del curso.

Requisitos funcionales#

Los 9 requisitos de la sección 2.

Restricciones técnicas#

• Plantillas que heredan de base.html con Bootstrap-Flask.
• Formulario con Flask-WTF, render_form y el validador URL().
• Lectura y escritura del CSV con el módulo csv, newline="" y encoding="utf-8".
• Enlaces internos con url_for.

Planificación#

1. Comprender (sección 1). 2. Entradas: el CSV y el formulario. 3. Procesos: leer → mostrar; validar → agregar. 4. Salidas: tabla y CSV actualizado. 5. Dividir en los 9 requisitos. 6. Diseñar la clase CafeForm a partir de las columnas del CSV. 7. Implementar. 8. Probar. 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1: portada con estilos (requisito 1) y botón "Show Me!" (requisito 4).
• Versión 2: /cafes mostrando {{ cafes }} en un <p> para entender los datos.
• Versión 3: tabla de Bootstrap con ciclos anidados y "Maps Link" (requisitos 2 y 3).
• Versión 4: /add con el formulario y la validación de URL (requisitos 5 a 7).
• Versión final: guardar en el CSV, redirigir a /cafes y revisar la navegación (requisitos 8 y 9).

Pruebas#

🧪 Prueba y depuración#

@app.route("/add")
def add_cafe():
    form = CafeForm()
    if form.validate_on_submit():
        with open("cafe-data.csv", "a") as f:
            f.write(f"{form.cafe.data},{form.location.data},{form.coffee_rating.data}")
        return redirect(url_for("cafes"))
    return render_template("add.html", form=form)

Encuentra cuatro problemas: la ruta no acepta POST; falta encoding="utf-8"; se escribe sin salto de línea (el siguiente café quedará pegado); y unir con comas rompe los nombres que contienen comas (usa csv.writer).

⭐ Extensión del proyecto#

• Ordenar la tabla por la calificación del wifi (en Python, con sorted y key).
• Mostrar las calificaciones como insignias de Bootstrap (badge) con colores según el valor.
• Una página /cafes/<int:indice> con el detalle de un café y el mapa incrustado.

Situación#

Muchos estudiantes no tienen buen Internet en casa. El grupo quiere recopilar, con ayuda de la comunidad, los lugares del barrio donde se puede estudiar: bibliotecas, casas de la cultura, parques con wifi, cafés.

Requisitos#

1. lugares.csv con: nombre, tipo (biblioteca, parque, café, otro), dirección aproximada, enlace al mapa, horario, wifi gratuito (sí/no), enchufes (sí/no), costo (gratis, consumo mínimo) y fecha de registro.
2. /lugares con una tabla de Bootstrap y filtros por tipo y por "wifi gratuito" (request.args).
3. /proponer con Flask-WTF: SelectField para el tipo y los sí/no, URL() para el mapa, validación del horario con Regexp (por ejemplo, 8:00-18:00).
4. Las propuestas nuevas se guardan en pendientes.csv, no en lugares.csv: una ruta /revisar (sin enlace público) permite al docente aprobarlas.

Decisiones que debes tomar (y justificar)#

• ¿Por qué separar las propuestas pendientes de las aprobadas?
• ¿Qué información no debe publicarse (por ejemplo, la dirección exacta de una casa)?

Casos de prueba#

• Filtro /lugares?tipo=biblioteca&wifi=si → solo bibliotecas con wifi gratuito.
• Horario ocho a seis → error de formato.
• Una propuesta aprobada pasa de pendientes.csv a lugares.csv y desaparece de la lista de pendientes.

Conceptuales#

1. ¿Por qué el curso dice que este proyecto se parece al trabajo con un cliente real?
2. ¿Por qué /add no tiene un botón visible? ¿Eso la hace segura?
3. ¿Qué hace newline="" al abrir un CSV? ¿Y encoding="utf-8"?
4. ¿Por qué csv.writer es mejor que unir los datos con comas?
5. ¿Por qué URL() rechaza maps.google.com?

Análisis de código#

{% for fila in cafes %}
  <tr>
  {% for celda in fila %}
    {% if loop.first %}<th>{{ celda }}</th>{% else %}<td>{{ celda }}</td>{% endif %}
  {% endfor %}
  </tr>
{% endfor %}

¿Qué celdas salen como <th>? ¿Es lo que querías para los encabezados?

Predicción#

import csv, io
salida = io.StringIO()
csv.writer(salida).writerow(["Café Juan, Centro", "https://x.co", "☕☕☕"])
print(salida.getvalue())

Depuración#

Un compañero dice: "En mi Mac la tabla se ve bien, pero en el computador del colegio salen símbolos raros". ¿Cuál es la causa más probable y cómo la corriges?

Modificación#

Cambia /cafes para que la tabla muestre solo las cafeterías con enchufes en todas las mesas (o el valor máximo de la columna de enchufes).

Creación#

Escribe una función leer_csv_como_diccionarios(ruta) que devuelva una lista de diccionarios, y úsala para mostrar en una plantilla una tarjeta de Bootstrap por fila.