Banco de 20 Retos de Live Coding — Unidad 3

Cómo resolverlo en VS Code

1. Abre tu URL de producción en /registro/ y crea usuario_demo (contraseña de 8+ caracteres que no sea solo números).
2. Al registrarte entras directo: muestra el mensaje verde y la tabla vacía «Todavía no hay servicios.»
3. Da clic en + Nuevo servicio, crea «Prueba demo» y muestra que aparece en la tabla.
4. Da clic en Cerrar sesión (mensaje «Sesión cerrada correctamente.») y entra con tu cuenta de siempre en /login/.
5. Muestra tu listado: «Prueba demo» no aparece.
6. En VS Code: Ctrl + P → escribe views.py → Enter. Señala la línea del filter y explica el WHERE.

Cómo resolverlo en VS Code

1. En tu listado pasa el mouse sobre Editar y lee el número en la esquina inferior del navegador (ej. /servicios/7/editar/).
2. En la barra de direcciones cambia ese número por el que te dicte el docente (ej. /servicios/3/editar/) y presiona Enter.
3. Muestra el Not Found (en local con DEBUG=True dice «No Servicio matches the given query»).
4. En VS Code: Ctrl + P → escribe views.py → Enter. Con Ctrl + F busca get_object_or_404 y señala propietario=request.user.
5. Repite con /servicios/3/eliminar/: mismo candado, mismo 404.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe forms.py → Enter.
2. Debajo de clean_precio escribe clean_titulo con 4 espacios de sangría (dentro de la clase, al mismo nivel que class Meta).
3. No agregues import: ValidationError ya está importado arriba desde la Semana 5.
4. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
5. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Escribe «Web» → error rojo; escribe «Web pro» → se guarda.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe urls.py → Enter. Elige el de core (la carpeta se ve a la derecha del nombre).
2. Cambia solo 'registro/' por 'crear-cuenta/'.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/login/ en el navegador. Da clic en «Regístrate»: abre /crear-cuenta/. Prueba /registro/ para mostrar el 404.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Pega la vista acerca al final.
2. En el Explorador de VS Code, clic derecho sobre core/templates/core → Nuevo archivo → acerca.html, y escribe la plantilla.
3. En VS Code: Ctrl + P → escribe urls.py → Enter. (el de core) y agrega el path antes del ].
4. Guarda los 3 archivos (Ctrl + K y luego S guarda todos).
5. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/acerca/ en el navegador. Ábrelo también en una ventana de incógnito (Ctrl + Shift + N) para mostrar que no pide login.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Con Ctrl + F busca def acerca.
2. Escribe @login_required en la línea de arriba, pegado al margen (sin sangría). El import ya existe.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. Abre una ventana de incógnito (Ctrl + Shift + N) y ve a http://127.0.0.1:8000/acerca/.
5. Lee en voz alta la dirección resultante: /login/?next=/acerca/.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Pega detalle_servicio al final.
2. Crea core/templates/core/servicio_detalle.html (clic derecho en la carpeta → Nuevo archivo).
3. En VS Code: Ctrl + P → escribe urls.py → Enter. (el de core) y agrega la ruta debajo de servicios/nuevo/.
4. Guarda todo y corre python manage.py runserver en la terminal de VS Code.
5. Abre /servicios/<tu id>/ y luego el id de otra cuenta para mostrar el 404.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe servicios.html → Enter.
2. Con Ctrl + F busca servicio.titulo y envuélvelo en el <a>.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/ en el navegador. Da clic en un título.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Busca def crear_servicio.
2. Cambia solo el return redirect(...) de dentro del if form.is_valid():.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Guarda uno y mira la dirección final.

Cómo resolverlo en VS Code

1. Lee la página amarilla de error: Reverse for 'logout' not found y la línea marcada de base.html.
2. Explica: la plantilla pide una ruta con name='logout' que ya no existe en urls.py.
3. En VS Code: Ctrl + P → escribe urls.py → Enter. (el de core) y vuelve a escribir el path de logout.
4. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
5. Recarga F5 la página: el listado y la barra «Cerrar sesión» regresan.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Busca def crear_servicio.
2. Entre nuevo.save() y el return redirect agrega la línea de messages.success (misma sangría).
3. No agregues import: from django.contrib import messages ya está desde la Semana 6.
4. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece). En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Crea uno y luego recarga F5.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe servicios.html → Enter.
2. Debajo del <h1> agrega el <p> con los filtros.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/ en el navegador. Entra con dos cuentas: cada una ve su propio número.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe servicios.html → Enter.
2. Agrega el <th> después de «Precio» en el <thead>.
3. Agrega el <td> después de la celda del precio, dentro del {% for %}.
4. Cambia colspan="3" por colspan="4" en el {% empty %}.
5. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece). En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/ en el navegador.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Busca def servicios.
2. Al final de la línea del filter(...) agrega .order_by('-creado_en').
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Crea uno y comprueba que queda primero.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. Busca def servicios.
2. Pon el cursor en la línea @login_required y presiona Ctrl + } (o Ctrl + /) para comentarla. Guarda.
3. Abre una ventana de incógnito (Ctrl + Shift + N) en http://127.0.0.1:8000/servicios/ y lee el error.
4. Descomenta con el mismo atajo, guarda y recarga: ahora te manda a /login/?next=/servicios/.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe servicio_form.html → Enter.
2. Corta la línea {% csrf_token %} con Ctrl + X y guarda.
3. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Llena el formulario y da Guardar: sale el 403.
4. Pega de nuevo la línea con Ctrl + V, guarda, recarga F5 la página del formulario y guarda: ahora sí funciona.
5. Opcional: Ctrl + U en el navegador para ver el <input type="hidden" name="csrfmiddlewaretoken">.

Cómo resolverlo en VS Code

1. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/admin/ en el navegador. Entra con tu superusuario.
2. Ve a Usuarios → usuario_a.
3. Señala el campo Contraseña: algoritmo, iteraciones, sal y hash (Django oculta parte con asteriscos).
4. Explica que no hay forma de leer la original; el botón del admin solo permite cambiarla.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe base.html → Enter.
2. Dentro del {% if user.is_authenticated %}, arriba del «Hola», agrega el <a>.
3. Guarda con Ctrl + S (el punto blanco de la pestaña desaparece).
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/nuevo/ en el navegador. Cierra sesión y mira que el enlace desaparece.

Cómo resolverlo en VS Code

1. En VS Code: Ctrl + P → escribe views.py → Enter. En eliminar_servicio, entre delete() y el redirect, agrega messages.warning.
2. En VS Code: Ctrl + P → escribe base.html → Enter. Reemplaza el bloque {% for message in messages %} por el de abajo.
3. Guarda los 2 archivos.
4. En la terminal de VS Code (con (venv)): python manage.py runserver y abre http://127.0.0.1:8000/servicios/ en el navegador. Elimina uno y crea otro para comparar colores.

Cómo resolverlo en VS Code

1. Abre la terminal de VS Code (Ctrl + ñ) y corre los comandos de abajo, uno por uno.
2. En Render abre tu Web Service → Events: aparece un deploy nuevo con tu mensaje de commit.
3. En Logs espera Your service is live 🎉.
4. Abre tu URL pública, inicia sesión y prueba el cambio.
5. Si el login responde 403 CSRF verification failed: Environment → revisa CSRF_TRUSTED_ORIGINS con https:// → Save, rebuild, and deploy.

# confirma que tu proyecto apunta a tu repo u3s6-…
$ git remote -v
# lista lo que cambiaste: NO debe aparecer .env
$ git status
# agrega los cambios al siguiente commit
$ git add .
# crea el commit con un mensaje que explica el cambio
$ git commit -m "U3: live coding en vivo"
# sube a GitHub; Render detecta el push y redespliega solo
$ git push