100 Días de Código en Python — Día 53: Proyecto final de scraping — de la web a la hoja de cálculo

📝 Contenido original del curso#

Hoy se repasa todo lo del bloque de scraping (Días 45 a 52). La profesora se inspiró en una publicación del subreddit r/Python donde alguien preguntaba si otras personas habían automatizado su trabajo por completo. Muchos respondieron que sí, sobre todo en trabajos de entrada de datos: pasar información de un formato a otro (de un papel, un PDF o un sitio web a una hoja de cálculo).

El encargo: un cliente quiere una lista de apartamentos en alquiler en San Francisco que cuesten hasta 3000 dólares al mes y tengan al menos una habitación. Zillow ya permite filtrar así, pero los sitios reales cambian su HTML, sus clases y sus ventanas emergentes, así que el curso creó un clon estable de Zillow con esa búsqueda ya aplicada: https://appbrewery.github.io/Zillow-Clone/.

El plan:

1. Con Beautiful Soup, obtener de cada anuncio el precio, la dirección y el enlace.
2. Con Selenium, llenar un Formulario de Google por cada anuncio.
3. Desde el formulario, generar una hoja de cálculo de Google con todas las respuestas y entregársela al cliente.

Como es un proyecto final, "no va a haber mucha orientación": hay que perseverar y resolver los problemas por cuenta propia.

Prerequisitos: Beautiful Soup y requests (Días 45 a 47), Selenium con formularios (Días 48 y 49), listas y zip() (Días 4 y 26), métodos de cadenas (Día 2).

📖 Automatizar un trabajo: ¿y la honestidad? (adaptación)#

En el video se sugiere que alguien podría automatizar el 70 % de un trabajo remoto y seguir cobrando el sueldo completo sin contarlo. Vale la pena discutirlo en clase:

• Automatizar tu trabajo es una habilidad valiosa: te hace más productivo y reduce errores.
• Ocultarlo a tu empleador puede violar tu contrato (por ejemplo, si prohíbe usar herramientas no autorizadas o compartir datos con servicios externos) y te priva de lo mejor: que te reconozcan y te asignen trabajo más interesante.
• Una buena práctica profesional es proponer la automatización, mostrar cuánto tiempo ahorra y documentarla.

📝 Ejercicio original del curso#

El curso recuerda que, a medida que avanza, los retos se parecen más al trabajo real: "Como desarrollador, pasarás la mayor parte del tiempo averiguando cómo hacer las cosas con Google y Stack Overflow".

Configura tu Formulario de Google

1. Ve a https://docs.google.com/forms/ y crea un formulario.
2. Agrega 3 preguntas de respuesta corta (dirección, precio por mes, enlace).
3. Pulsa Enviar y copia el enlace del formulario: lo usará tu programa.

Explora el clon de Zillow

4. Abre https://appbrewery.github.io/Zillow-Clone/ y estudia su estructura.

Requisitos de Beautiful Soup

• Con BeautifulSoup y Requests, raspar todos los anuncios del clon.
• Crear una lista de enlaces.
• Crear una lista de precios, limpia: debe quedar "$1,234" y no "$1,234+ /mo".
• Crear una lista de direcciones, limpia: sin saltos de línea, sin el símbolo | y sin espacios sobrantes.

Requisitos de Selenium

• Llenar el formulario una vez por cada anuncio con su precio, dirección y enlace.
• Al terminar, en la pestaña Respuestas, pulsar el ícono de Hojas de cálculo para crear una hoja con todas las respuestas.

🎯 Objetivo: una hoja de cálculo con la dirección, el precio y el enlace de cada propiedad.

🔍 Antes de programar#

• ¿Qué información tenemos? Una página HTML con 44 tarjetas de anuncios.
• ¿Qué necesitamos obtener? Tres listas del mismo largo, alineadas: el elemento i de cada lista corresponde al mismo anuncio.
• ¿Qué proceso se hace? Descargar → analizar → extraer → limpiar → enviar uno por uno.
• ¿Qué resultado esperamos? 44 respuestas en el formulario y una hoja con 44 filas.
• ¿Qué condiciones hay? El precio y la dirección deben quedar limpios; hay que esperar a que el formulario cargue antes de escribir.

Divide el proyecto en dos programas independientes que se comunican por un archivo: primero raspar.py produce anuncios.csv; luego llenar_formulario.py lo lee. Así puedes probar la parte de Selenium sin volver a descargar, y revisar los datos antes de enviarlos.

🎯 Objetivo de aprendizaje#

Localizar en el HTML el contenedor de cada anuncio y extraer tres datos alineados.

📝 Pistas originales del curso#

• Pista 1: envía tu User-Agent y los idiomas aceptados en una cabecera, como en el proyecto de Amazon del Día 47.
• Si te quedas atascado con la limpieza y Beautiful Soup, hay una solución parcial (primera parte del proyecto) y una solución completa (Beautiful Soup + Selenium).

📖 Explicación conceptual#

Paso 1 — Inspecciona una tarjeta. En Chrome, clic derecho sobre un precio → Inspeccionar. Sube por el árbol hasta el elemento que contiene todo el anuncio. Anota:

• dónde está el enlace (<a href="...">),
• dónde está el precio (un <span>),
• dónde está la dirección (una etiqueta <address>).

En el clon, esos elementos tienen además un atributo data-test (verificado): property-card-link, property-card-price y property-card-addr. Los atributos data-test los ponen los desarrolladores para las pruebas automáticas, así que suelen ser más estables que las clases.

Paso 2 — Extrae:

import requests
from bs4 import BeautifulSoup

URL_ZILLOW = "https://appbrewery.github.io/Zillow-Clone/"
CABECERAS = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
    "Accept-Language": "es-CO,es;q=0.9",
}

respuesta = requests.get(URL_ZILLOW, headers=CABECERAS, timeout=30)
respuesta.raise_for_status()
sopa = BeautifulSoup(respuesta.text, "html.parser")

enlaces = [a.get("href") for a in sopa.select('[data-test="property-card-link"]')]
precios_crudos = [span.get_text() for span in sopa.select('[data-test="property-card-price"]')]
direcciones_crudas = [d.get_text() for d in sopa.select('[data-test="property-card-addr"]')]

print(len(enlaces), len(precios_crudos), len(direcciones_crudas))   # 88 44 44  ← ¡sorpresa!

• select() usa selectores CSS (Día 45). [data-test="..."] selecciona por atributo.
• raise_for_status() detiene el programa con un error claro si la página no respondió 200.
• La última línea es una prueba, y aquí cumple su función: hay 88 enlaces para 44 anuncios. Al inspeccionar una tarjeta se ve por qué (verificado): cada anuncio tiene dos enlaces con el mismo href, uno en la foto y otro en el texto. Sin esa prueba, zip() emparejaría el enlace repetido del anuncio 1 con el precio del anuncio 2, y todo quedaría desalineado sin ningún mensaje de error.

Dos formas de corregirlo:

# a) Un selector más específico: solo el enlace que está en el área de texto de la tarjeta
enlaces = [a.get("href") for a in sopa.select(".StyledPropertyCardDataWrapper a")]   # 44

# b) Quitar repetidos conservando el orden (dict.fromkeys mantiene el primer orden de aparición)
enlaces = list(dict.fromkeys(a.get("href") for a in sopa.select('[data-test="property-card-link"]')))   # 44

La opción (b) funciona aquí porque no hay dos anuncios con el mismo enlace (verificado), pero depende de esa suposición. La alternativa siguiente evita el problema de raíz.

🛠️ Nota técnica (verificado): el clon está alojado en GitHub Pages y responde igual sin cabeceras. La pista 1 es un buen hábito (Zillow real sí bloquea peticiones sin User-Agent), pero no es la causa si tu código falla aquí.

Alternativa: recorrer tarjeta por tarjeta. En lugar de tres listas separadas, puedes buscar las tarjetas y, dentro de cada una, sus tres datos. Es más seguro: si un anuncio no tuviera precio, sabrías cuál es, en lugar de que todas las listas se "corran" una posición.

anuncios = []
for tarjeta in sopa.select('[data-test="property-card"]'):   # 44 tarjetas (verificado)
    enlace = tarjeta.select_one('[data-test="property-card-link"]')   # select_one toma solo el primero de los dos
    precio = tarjeta.select_one('[data-test="property-card-price"]')
    direccion = tarjeta.select_one('[data-test="property-card-addr"]')
    if enlace and precio and direccion:
        anuncios.append({"enlace": enlace.get("href"), "precio": precio.get_text(), "direccion": direccion.get_text()})

⚠️ Errores frecuentes#

🎯 Objetivo de aprendizaje#

Diseñar funciones de limpieza que conviertan texto desordenado en datos uniformes, y probarlas con casos reales.

📝 Pistas originales del curso#

• Pista 2: las direcciones pueden ser muy desordenadas. Una forma de limpiarlas es con .replace() y .strip() para quitar saltos de línea, espacios y el símbolo |.
• Pista 3: los anuncios de una propiedad tienen precios como $1,234/mo o $1,234+/mo; los de varias propiedades incluyen las habitaciones: $1,234+ 1bd. Hay que limpiar ambos.

📖 Lo que realmente hay en el clon (verificado)#

Al revisar los 44 precios aparecen más formatos que los de la pista 3:

Y en las direcciones:

'\n                                  Parkmerced | 3711 19th Ave, San Francisco, CA\n\n                                '

Lección: las pistas describen algunos casos; los datos reales siempre traen sorpresas. Por eso se revisan todos los valores, no solo los primeros.

📖 Funciones de limpieza#

def limpiar_precio(texto):
    """'$2,895+/mo' -> '$2,895'   |   '$2,809+ 1 bd' -> '$2,809'"""
    return texto.replace("/mo", "").split("+")[0].strip()


def limpiar_direccion(texto):
    """Quita el '|', los saltos de línea y los espacios repetidos."""
    return " ".join(texto.replace("|", "").split())

Cómo funciona limpiar_precio: quita /mo; luego parte el texto en el + y se queda con la primera parte (todo lo que venía después, como 1 bd, se descarta); strip() quita espacios sobrantes.

Cómo funciona limpiar_direccion: split() sin argumentos corta en cualquier cantidad de espacios, tabulaciones o saltos de línea y descarta los vacíos; " ".join(...) lo vuelve a unir con un espacio. Es más robusto que encadenar varios replace("\n", "").

Pruébalas antes de usarlas:

assert limpiar_precio("$2,895+/mo") == "$2,895"
assert limpiar_precio("$2,450/mo") == "$2,450"
assert limpiar_precio("$2,798+ 1bd") == "$2,798"
assert limpiar_precio("$2,809+ 1 bd") == "$2,809"
assert limpiar_direccion("\n   Parkmerced | 3711 19th Ave, San Francisco, CA\n\n ") == "Parkmerced 3711 19th Ave, San Francisco, CA"
print("Todas las pruebas pasaron")

🛠️ Nota técnica: con estas funciones, "$1914+ 1 bd" queda como "$1914", sin coma. El curso pide el formato "$1,234". Para uniformar todos los precios conviene convertirlos a número y volver a darles formato (Reto 2).

📖 Mirar los datos antes de entregarlos (adaptación)#

Con los precios como números (verificado): mínimo 1745, máximo 2999, promedio ≈ 2633 dólares. Todos cumplen el tope de 3000. Pero hay una sorpresa: el primer anuncio es "747 Geary Street… Oakland, CA", que no está en San Francisco. Un buen analista de datos lo reporta al cliente en lugar de entregarlo en silencio.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: imprime los formatos distintos de precio que existen (pista: los últimos 4 caracteres de cada precio en un set).
• 🟡 Reto 2 — Ampliación: escribe precio_a_numero(texto) que devuelva un int y formatear_precio(n) que devuelva "$1,914" con f"${n:,}". Úsalas para que todos los precios queden uniformes.
• 🟠 Reto 3 — Desafío: agrega una columna habitaciones con el número de habitaciones cuando aparezca (1bd o 1 bd) y "?" cuando no.
• 🔴 Reto 4 — Pensamiento computacional: el cliente pidió "San Francisco". Diseña una regla para marcar los anuncios dudosos (por ejemplo, los que no contienen "San Francisco"), pruébala y explica en un párrafo por qué marcar es mejor que borrar sin avisar.

🎯 Objetivo de aprendizaje#

Repetir un proceso de entrada de datos en un formulario web, una vez por registro, con esperas y verificación.

📖 Explicación conceptual#

El ciclo: para cada anuncio → abrir el formulario → esperar a que carguen los campos → escribir los tres datos → pulsar Enviar → esperar la confirmación.

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

URL_FORMULARIO = "https://docs.google.com/forms/d/e/TU_FORMULARIO/viewform"

driver = webdriver.Chrome()
espera = WebDriverWait(driver, 10)

for direccion, precio, enlace in zip(direcciones, precios, enlaces):
    driver.get(URL_FORMULARIO)
    campos = espera.until(
        EC.presence_of_all_elements_located((By.XPATH, '//input[@type="text"]'))
    )
    campos[0].send_keys(direccion)
    campos[1].send_keys(precio)
    campos[2].send_keys(enlace)

    driver.find_element(By.XPATH, '//div[@role="button"]//span[text()="Enviar"]').click()
    espera.until(EC.url_contains("formResponse"))   # la página de "Se registró tu respuesta"
    time.sleep(1)

driver.quit()

Qué hace cada parte:

• zip() recorre las tres listas en paralelo: en cada vuelta toma el elemento i de cada una.
• En los Formularios de Google los campos de respuesta corta son <input type="text">, en el mismo orden que las preguntas.
• El botón Enviar no es un <button>, sino un div con role="button". Su texto depende del idioma de la cuenta ("Enviar" o "Submit").
• url_contains("formResponse") confirma que el envío llegó antes de pasar al siguiente anuncio.

🛠️ Nota técnica: Google cambia el HTML de sus formularios de vez en cuando; por eso es mejor seleccionar por tipo (@type="text") y por rol y texto (@role="button") que por clases como whsOnd zHQkBf. Si tu cuenta está en inglés, cambia "Enviar" por "Submit".

🛠️ Nota técnica: si el formulario está configurado para "Restringir a usuarios de tu organización" o para recopilar correos verificados, exige iniciar sesión, y el Chrome que abre Selenium no tiene tu sesión. Para este proyecto, desactiva esas opciones en Configuración → Respuestas.

🏫 Alternativa para el aula: formulario local#

Si no hay cuentas de Google, usa el formulario inscripcion.html del Día 48 (o crea uno con tres campos <input> con id propios). Guarda las respuestas con un pequeño script, o simplemente verifica con Selenium que se llenaron. El Día 54 aprenderás a crear con Flask un servidor que reciba formularios de verdad.

⚠️ Errores frecuentes#

Problema#

Un cliente necesita una lista de apartamentos que cumplan sus condiciones, con dirección, precio y enlace, en una hoja de cálculo que pueda filtrar.

Contexto#

Es un trabajo real de entrada de datos: tomar información de un sitio web y pasarla a otro formato. Hacerlo a mano con 44 anuncios toma más de una hora y se cometen errores de copia.

Objetivo#

Un programa que raspe el clon de Zillow, limpie los datos y llene un formulario por anuncio, del que se genera la hoja de cálculo final.

Requisitos funcionales#

1. Listas de enlaces, precios y direcciones del mismo largo (44).
2. Precios con el formato "$1,234"; direcciones sin |, saltos de línea ni espacios sobrantes.
3. Un envío del formulario por anuncio, con verificación de que llegó.
4. Una hoja de cálculo con todas las respuestas.

Restricciones técnicas#

• Beautiful Soup para raspar; Selenium solo para el formulario (como pide el curso).
• Funciones de limpieza probadas con assert.
• Esperas con condiciones; nada de enviar a ciegas.

Planificación#

1. Comprender el encargo del cliente. 2. Entradas: la URL del clon y la del formulario. 3. Procesos: raspar → limpiar → guardar en CSV → enviar. 4. Salidas: anuncios.csv y la hoja de Google. 5. Dividir en dos programas. 6. Diseñar las funciones de limpieza con los casos de la tabla de la sección 3. 7. Implementar. 8. Probar. 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1: raspar.py imprime el número de enlaces, precios y direcciones.
• Versión 2: limpieza con funciones y pruebas assert.
• Versión 3: guardar anuncios.csv con el módulo csv o con pandas (Día 25).
• Versión 4: llenar_formulario.py envía solo los 3 primeros anuncios para probar.
• Versión final: envío de todos, verificación del número de respuestas y creación de la hoja.

Pruebas#

🧪 Prueba y depuración#

precios = [p.get_text().replace("+/mo", "") for p in sopa.select('[data-test="property-card-price"]')]
direcciones = [d.get_text().strip() for d in sopa.select("address")]
for i in range(len(precios)):
    driver.get(URL_FORMULARIO)
    campos = driver.find_elements(By.XPATH, '//input[@type="text"]')
    campos[0].send_keys(direcciones[i])
    campos[1].send_keys(precios[i])
    campos[2].send_keys(enlaces[i])
    driver.find_element(By.XPATH, '//span[text()="Enviar"]').click()

Encuentra cuatro problemas: la limpieza del precio no cubre /mo sin + ni los formatos con bd; strip() no quita el | ni los espacios internos; se buscan los campos sin esperar a que carguen; no se verifica que el envío terminó antes de abrir el siguiente formulario.

⭐ Extensión del proyecto#

• Ordenar los anuncios por precio antes de enviarlos.
• Enviar al cliente un correo (servidor local, Día 47) con el enlace a la hoja y un resumen: cuántos anuncios, precio mínimo, máximo y promedio.
• Reemplazar Selenium por pandas para escribir directamente un anuncios.xlsx y comparar: ¿qué ventaja tiene cada camino?

Situación#

Al comenzar el año, las familias de un curso quieren saber dónde comprar más barata la lista de útiles. La personera estudiantil propone publicar una comparación.

Requisitos#

1. Crea tú mismo (en HTML, Días 41 a 44) dos o tres páginas de "papelerías" ficticias, cada una con una tabla o tarjetas de productos con formatos de precio distintos (por ejemplo, $ 3.500, 3500 COP, $3,500 c/u).
2. Un programa que raspe las páginas locales, limpie los precios a enteros y los una en un solo CSV con columnas producto, papeleria, precio.
3. Para cada producto de una lista de útiles (lista_utiles.txt), la papelería más barata y el costo total de la lista en cada papelería.
4. Un formulario (de Google o local) donde el programa registre el resultado final, una fila por papelería.

Decisiones que debes tomar (y justificar)#

• En Colombia, 3.500 usa el punto como separador de miles. ¿Cómo lo distingues de un decimal?
• ¿Qué haces si un producto no está en una papelería?
• ¿Cómo haces coincidir "Cuaderno 100 hojas" con "cuaderno cuadriculado 100h"?

Casos de prueba#

• limpiar_cop("$ 3.500"), limpiar_cop("3500 COP") y limpiar_cop("$3,500 c/u") devuelven 3500.
• Un producto que falta en una papelería no rompe el total: se reporta como "no disponible".

Conceptuales#

1. ¿Por qué el curso usa un clon de Zillow en lugar del sitio real?
2. ¿Qué ventaja tienen los atributos data-test como selectores?
3. ¿Por qué es peligroso trabajar con tres listas separadas si un anuncio no tiene precio?
4. ¿Por qué conviene separar el raspado y el llenado del formulario en dos programas?
5. ¿Qué hace zip() cuando las listas tienen distinto largo?

Análisis de código#

texto = "\n   Parkmerced | 3711 19th Ave, San Francisco, CA\n\n  "
print(repr(texto.strip()))
print(repr(texto.replace("|", "").strip()))
print(repr(" ".join(texto.replace("|", "").split())))

¿Qué imprime cada línea? ¿Cuál cumple el requisito del curso?

Predicción#

for p in ["$2,450/mo", "$2,895+/mo", "$2,798+ 1bd", "$1914+ 1 bd"]:
    print(p.replace("/mo", "").split("+")[0].strip())

Depuración#

precios_numeros = [int(p) for p in ["$2,450", "$2,895"]]

¿Qué error aparece y cómo lo corriges?

Modificación#

Cambia limpiar_precio para que devuelva None si el texto no empieza por $, y ajusta el programa para que esos anuncios se reporten y no se envíen.

Creación#

Escribe una función resumen(precios) que reciba la lista de precios como enteros y devuelva un diccionario con el mínimo, el máximo, el promedio (redondeado) y la cantidad de anuncios por debajo de 2500.