Programa · 24 horas · 3 días
Día 3
Entregar
Hoy se construye lo que falta, y se deja listo para enseñarlo.
Cómo se mira un proyecto
Ocho cosas que hacen creíble un piloto
Estas cuatro se quedan abiertas todo el día
M0 Que vuelva a funcionar
La dirección pública, guardando de verdad.
En la vista previa guardaba. En la dirección pública, no.
No se rompió nada. Falta mover una cosa de lugar y dar un permiso.
¿A cuántos les pasó exactamente eso?
H0 La llave se quedó en la computadora de quien la creó
El código, y la llave al lado
Aquí siempre funcionó
Solo el código
La llave nunca se subió
Se construye con lo que hay en el repositorio
Sin llave: no conecta con nada
Conecta, igual que en la vista previa
y volver a desplegar H0 Dónde se pone, para que la app publicada sí la tenga
H0 Y Firebase tiene su propia lista de quién puede tocarle la puerta
Dominios autorizados
localhostde fábricasu-proyecto.firebaseapp.comde fábricasu-proyecto.web.appde fábricasu-app.vercel.applo agregan ustedes
Alguien abre su dirección
https://su-app.vercel.app No está en la lista. Firebase no contesta.
Está en la lista. Firebase contesta.
H0 Qué se puede ver, y qué no debería verse nunca
Se ve, y está bien
La configuración de Firebase.
Viaja en el navegador a propósito: sin ella la página no sabe con qué proyecto hablar.
Lo que protege los datos son las reglas, no esconderla.
No debe quedar a la vista
La llave de Gemini, y cualquier contraseña.
Si el llamado lo hace el navegador, la llave queda a la vista aunque esté en una variable.
Un piloto aguanta con la llave restringida. Con usuarios de verdad, el llamado lo tiene que hacer un servidor.
H0 Su dirección pública, guardando de verdad
Parámetros de la tarea
La llave donde va, el dominio autorizado, y las reglas revisadas. Se comprueba desde el teléfono de alguien de otro equipo.
H0 ¿Qué creen que significa esto?
H1 Un error no es un muro. Son tres datos.
TypeError: Cannot read properties of null (reading 'value')
en index.html, línea 84
1 · qué tipo de error
Te dice de qué familia es. Con eso ya sabes por dónde empezar
2 · dónde
Archivo y línea. El problema tiene domicilio
3 · qué pasó
La frase en inglés. Pégala tal cual, no la traduzcas
H1 Cómo pedir ayuda, de lo simple a lo pesado
H2 Las tres partes, sobre el error que acaban de arreglar
Parámetros de la tarea
- Vuelvan al error de hace rato, el de la dirección pública.
- Léanlo otra vez y señalen las tres partes.
- Escriban en una línea qué lo causaba.
- Guarden captura del antes y del después.
H3 Y cuando se rompa en vivo, delante de alguien:
H4 Falta una cosa: dónde van a entregar todo esto
¿Qué les tendría que pedir ese formulario?
M1 Y antes de escribir el prompt, lo mismo de siempre
Una frase que dice para quién es y para qué sirve, antes de abrir nada.
Cuando[situación], quiero[lograr qué], para poder[resultado].
- Cuando pasa esto, quiero lograr aquello, para poder tal cosa
- Sale de un problema que ya les pasa, no de una idea bonita
- Todo lo que sigue cuelga de ella
Todo lo que podría hacer, repartido, y un renglón que dice hasta dónde llega esta vez.
Esta vez llega hasta[hasta dónde].
Esta vez no:[lo que se queda fuera].
- La lista cruda primero, un verbo por renglón
- Repartida en debe, debería, podría y esta vez no
- El «esta vez no» escrito, que es el que ahorra semanas
Qué se guarda y con qué reglas. Tres entidades como mucho.
Entidad:[de qué se guardan varios]
Campos:[qué se guarda de cada uno]
Reglas:[obligatorio, catálogo, fecha]
- Entidad, luego campos, luego reglas
- Catálogo cerrado en vez de texto libre
- Los campos del formulario y el modelo de datos son lo mismo
El backlog podado y ordenado, con el esqueleto que camina de primero.
Que el sistema[haga qué]
Se comprueba cuando[qué veo en la pantalla]
- Entre quince y veinticinco, priorizados
- Entrada clara, salida clara, y cómo se comprueba
- Nada de «mejorar el formulario»
Contexto, un solo ticket, y el criterio de terminado. Uno a la vez.
Contexto:[qué construimos y qué no]
Pedido:[un ticket, el de arriba]
Criterio:[qué veo cuando esté]
- El encabezado del proyecto, pegado arriba
- Una cosa pedida, y comprobada antes de pedir la siguiente
- «Todavía no hagas lo demás» también es parte del prompt
Guardarlo, publicarlo, y comprobarlo donde se usa de verdad.
Repositorio → dirección pública → base de datos
Comprobado cuando[aparece en la base, capturado desde un teléfono]
- Repositorio, dirección pública, base de datos
- La llave en Vercel y el dominio autorizado en Firebase
- Capturar desde un teléfono, no desde la vista previa
M1 Y ahora sí, los mismos ocho pasos, aquí enfrente
M1 Y ya que hablamos de llaves: ¿dónde viven exactamente?
Qué es un archivo .env, y por qué existe
Sin .env
La llave escrita dentro del código.
Viaja con el proyecto a donde vaya, y queda a la vista de quien abra el repositorio.
Cambiarla obliga a buscarla por todos lados.
Con .env
La llave en un archivo aparte, y el código la llama por su nombre.
Ese archivo se queda en su computadora y en Vercel, cada uno con el suyo.
Un archivo de texto, un renglón por llave.
H2 Y el .gitignore, que es la lista de lo que no sube
Su carpeta, en su computadora
-
index.htmlla página no sube -
src/el código que escribieron no sube -
package.jsonla lista de piezas que usa no sube -
.gitignorela lista de lo que no sube no sube -
.env.locallas llaves no sube -
node_modules/las piezas ya bajadas, miles de archivos no sube
Lo que llega a GitHub
index.htmlla páginasrc/el código que escribieronpackage.jsonla lista de piezas que usa.gitignorela lista de lo que no sube
Y por eso Vercel construyó sin la llave.
H2 Cuatro riesgos, y el prompt que arregla cada uno
Cualquiera que tenga la dirección de su aplicación puede leer y escribir en la base. Así viene de fábrica.
Cada campo que guardan de una persona real es una responsabilidad de su institución, no del taller.
Un formulario público sin validar acepta campos vacíos, correos falsos y textos de diez mil caracteres.
El repositorio es público. Lo que esté en un archivo, está publicado.
Mi base de datos está abierta: cualquiera con la dirección puede leer y escribir. Cámbiala para que solo se pueda leer y escribir desde mi aplicación y con la sesión iniciada. Dime en español qué cambiaste y cómo compruebo desde afuera que ya no se puede entrar.
Revisa los campos de mi formulario y dime cuáles son datos personales. De cada uno, pregúntame para qué lo necesito. Quita los que la herramienta no usa, y dime cuáles obligan a avisarle a la persona que los estoy guardando.
Valida lo que llega del formulario antes de guardarlo: los campos obligatorios no pueden ir vacíos, el correo tiene que tener forma de correo, y ningún campo puede recibir un texto larguísimo. Si algo está mal, muestra un mensaje claro y no guardes nada.
Revisa mi proyecto y dime si hay alguna clave, contraseña o token guardado en los archivos. Dime cuáles son públicas a propósito y cuáles no deberían estar ahí, y qué hago con esas.
H2 Su proyecto, revisado por dentro
Parámetros de la tarea
- Abran su .gitignore y busquen el renglón que dice .env.
- Abran su .env.local y vean qué llaves tienen.
- Péguenle al agente el prompt de las claves y lean lo que conteste.
- Si encuentra alguna llave dentro del código, pídanle que la mueva.
H2 Correrlo en su computadora
Node, Git y un editor: que el proyecto deje de vivir solo en una pestaña.
Hasta ahora le pidieron cosas a un chat. Esto es lo que sigue cuando el proyecto crece.
Once herramientas, y la pregunta es cuál abro yo
Solo navegador · no se instala nada
Se instalan · ven todo el proyecto
F5 Y en qué orden se suben, que es la pregunta de verdad
AI Studio construye, GitHub guarda, Vercel publica. Cero instalaciones.
Una cuenta de Google y otra de GitHub. Nada más.
Gratis
Se queda corto cuando el proyecto crece y el chat pierde de vista el conjunto.
El mismo proyecto, corriendo en su computadora, con un agente que ve todos los archivos a la vez.
Instalar Node, Git y el editor. Cuenta personal de Google.
Gratis, con cuota de tareas que se renueva cada semana
Es el escalón de hoy: aquí dejan de depender de una pestaña abierta.
El editor que usan los equipos de software, con el agente adentro. Mismo Node, mismo Git.
Lo mismo que el anterior. Lo que cambia es la herramienta, no el camino.
Capa gratis con pocas peticiones. El plan de trabajo son 20 dólares al mes
Cuando ya son varios tocando el mismo proyecto y hace falta orden.
El modelo trabajando en la terminal sobre el proyecto entero, no sobre un archivo. Claude Code es el de Anthropic; OpenCode es el abierto, y a ese uno le pone el modelo que quiera.
Una suscripción o una llave del modelo, y saber leer lo que propone antes de aceptarlo.
Claude Code viene con la suscripción de 20 dólares del chat. OpenCode es gratis: se paga solo el modelo
Cambios que tocan muchos archivos a la vez, y trabajo sostenido.
F5 Qué es Node, que es lo que faltaba nombrar
El navegador
Ejecuta el JavaScript de una página ya construida.
Es lo que hace que un botón responda cuando le pican.
Lo tienen desde siempre y nunca lo instalaron.
Node, en su computadora
El mismo motor, fuera del navegador.
Sirve para construir el proyecto y para servirlo mientras trabajan en él.
Esto sí hay que instalarlo, y es lo primero.
F5 Dónde se bajan las tres, y en qué orden
nodejs.org El botón grande que dice LTS. Va primero porque los otros lo dan por hecho 2 · Git git-scm.com Reconoce su sistema solo. En Mac casi siempre ya está 3 · El editor antigravity.google Descargar, y entrar con su cuenta personal de Google F5 Y el editor, que es lo único que sí hay que escoger
F5 Y antes de escribir nada: qué es la terminal
proyecto
index.html
src
package.json
1<main>
2 <h1>Seguimiento</h1>
3</main>
TERMINAL
~/proyecto$
v24.9.0
Un editor de código es esto: los archivos a la izquierda, el archivo abierto a la derecha.
La terminal no es otro programa. Se abre desde el menú, y aparece abajo, en la misma ventana.
Ese signo quiere decir que es su turno. Lo que va después lo escriben ustedes.
Se escribe, se da Enter, y la computadora contesta en el renglón de abajo.
Y a la izquierda dice en qué carpeta están parados. Ese dato es el que más problemas evita.
F5 Por qué GitHub pide una llave y no una contraseña
Lo que uno esperaría
Escribir usuario y contraseña, como en cualquier sitio.
GitHub dejó de aceptarlo para bajar y subir proyectos, desde agosto de 2021.
Y aunque lo aceptara, habría que escribirla cada vez.
Lo que de verdad pasa
Se da de alta una llave, una sola vez.
De ahí en adelante, cuando su computadora toca la puerta, GitHub la reconoce sola.
No se vuelve a escribir nada nunca.
F5 Y dónde se escriben estos comandos, en cada máquina
| Sistema | Lo más fácil | Y si prefieren fuera del editor |
|---|---|---|
| Windows | La terminal del editor, la de hace un momento | PowerShell, buscándolo en Inicio. O Git Bash, que viene con Git |
| Mac | La terminal del editor, la misma | La app Terminal: Cmd y espacio, escribir Terminal |
F5 La llave, que es el trámite de una sola vez
$ssh-keygen -t ed25519 -C "tu@correo.com"
Enter file in which to save the key:
Enter passphrase (empty for no passphrase):
Your identification has been saved in ~/.ssh/id_ed25519
Your public key has been saved in ~/.ssh/id_ed25519.pub
$cat ~/.ssh/id_ed25519.pub | clip
# en Mac: pbcopy < ~/.ssh/id_ed25519.pub
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI... tu@correo.com
$ssh -T git@github.com
The authenticity of host 'github.com' can't be established.
Are you sure you want to continue connecting? yes
Hi rmsy! You've successfully authenticated, but GitHub does not
provide shell access.
$
github.com
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI... tu@correo.com
Enter tres veces y listo. Se crean dos archivos, y ahí está todo el asunto.
El que termina en .pub es el que se reparte. El otro no sale de su computadora nunca.
Queda en el portapapeles. Empieza con ssh-ed25519 y termina con su correo.
Si lo que copiaron no empieza con ssh-ed25519, copiaron el archivo equivocado.
Un título cualquiera que les recuerde qué computadora es, pegar la llave, y Add SSH key.
El título es para ustedes. Si mañana cambian de computadora, sabrán cuál borrar.
La primera vez pregunta si confían en GitHub. Se contesta yes, con esas tres letras.
Ese saludo con su nombre es la prueba. Sin él, no sigan: no va a clonar.
F5 Y de ahí a tenerlo corriendo, son cinco renglones
$git clone git@github.com:usuario/proyecto.git
Cloning into 'proyecto'...
remote: Enumerating objects: 214, done.
Receiving objects: 100% (214/214), 1.2 MiB
Resolving deltas: 100% (98/98), done.
$cd proyecto
~/proyecto $
$npm install
added 312 packages in 47s
found 0 vulnerabilities
$GEMINI_API_KEY=AIzaSy...
# se escribe dentro de un archivo llamado .env.local,
# en la raíz del proyecto
$npm run dev
VITE v6.0.1 ready in 412 ms
➜ Local: http://localhost:5173/
➜ press h + enter to show help
$
Esa dirección se copia del botón verde Code del repositorio, pestaña SSH.
Se baja una carpeta con su proyecto dentro, ahí donde estén parados.
Ahora la terminal está parada dentro de su proyecto, y por eso cambió lo que dice a la izquierda.
El error número uno del salón es escribir lo que sigue en la carpeta equivocada.
Baja a una carpeta llamada node_modules todo lo que su proyecto usa por dentro.
Tarda, se hace una sola vez, y esa carpeta no se sube al repositorio.
La misma llave de esta mañana. Tercer lugar donde vive: la vista previa, Vercel, y aquí.
Ese archivo no se sube al repositorio, y está bien que no se suba.
Abren esa dirección en su navegador y ahí está su proyecto, corriendo en su computadora.
La terminal se queda abierta mientras corre. Se apaga con Ctrl+C.
F5 Y esa dirección rara, localhost, qué es
F5 Y cuando truene, que va a tronar
| Lo que dice la pantalla | Qué pasó | Qué hacer |
|---|---|---|
node no se reconoce | La terminal se abrió antes de instalar Node | Cerrarla y volver a abrirla |
Permission denied (publickey) | GitHub no conoce su llave | Revisar que pegaron la que termina en .pub |
no such file: package.json | Están fuera de la carpeta del proyecto | cd a la carpeta, y otra vez |
Port 5173 is in use | Ya lo tenían corriendo en otra terminal | Usar el puerto que ofrece, o cerrar la otra |
F5 Su proyecto, corriendo en su computadora
Parámetros de la tarea
- Comprobar: node -v y git -v. Si contestan un número, ya está.
- La llave: generarla, copiar la que termina en .pub, darla de alta, y probar con ssh -T.
- Clonar su repositorio y entrar a la carpeta.
- npm install, la llave en .env.local, y npm run dev.
- Abrir localhost y cambiar un título para verlo recargarse solo.
F5 Y de aquí en adelante, esto es lo que van a abrir.
El martes
Una idea en una pestaña
Ayer
Un repositorio, una dirección y una base de datos
Ahora
El proyecto corriendo en su propia computadora
F5 Construir
El tiempo largo del día: su herramienta, hasta donde alcance.
Que funcione en su pantalla no es que esté listo
Ya guarda otra vez. Ahora es cuestión de hasta dónde la llevan.
¿Qué pasaría si mañana lo usa alguien que no estuvo aquí?
I2 Cuatro cosas y ya se puede entregar
I2 Un README de verdad, completo, en cinco líneas
# Seguimiento de egresados
Registra egresados y su estatus de contacto para el programa de vinculación.
Cómo se usa: se entra a la liga, se llena el formulario, y la lista de abajo se filtra por estatus.
Quién lo mantiene: Ana Ruiz, vinculación. ana@ejemplo.mx
Ojo: la base se pausa sola si nadie la usa una semana.
I2 Y ahora que se vea bien, con la fórmula de siempre
Actúa como crítico de experiencia de usuario. Evalúa esta pantalla para alguien que la ve por primera vez. Sé específico en lo que fallaría.
J1 Su herramienta, hasta donde alcance
Parámetros de la tarea
- Las cuatro cosas, en ese orden. El README al final, cuando ya sepan qué describen.
- Suban la captura, pidan la crítica, y apliquen dos cambios. Uno de flujo y uno de aspecto.
- Y si les sobra tiempo: el siguiente ticket de su backlog.
- Antes de cerrar: registren su proyecto en la plataforma de la mañana.
J1 Presentar
Cinco minutos que decidan si alguien lo adopta.
Lo construyeron, lo dejaron presentable y lo empaquetaron. Falta lo más difícil: contarlo en cinco minutos.
Cinco minutos, cinco tiempos, y el reloj marcado
| Tiempo | Cuánto | Qué va aquí |
|---|---|---|
| La frase | 20 seg | Qué hacen, en una línea, antes de abrir nada |
| El problema | 40 seg | Con números: cuántos, cada cuándo, y qué cuesta hoy |
| La demo | 3 min | La dirección pública y el flujo completo. Capturar, la lista, el número |
| Lo que ya pasó | 30 seg | El dato que hoy existe y antes no |
| La pedida | 30 seg | Qué necesitan, de quién, y para cuándo |
L1 Y así se oye, dicho de verdad
Somos vinculación. Hicimos una herramienta que contesta en un segundo cuántos egresados siguen contactables.
Hoy esa respuesta tarda dos días.
De pie y sin abrir nada. Es la única frase que hay que llevar memorizada.
340 egresados. Cuatro coordinaciones. Ninguna lista compartida.
Cada semestre alguien revisa correos y mensajes a mano para armar el reporte, y cuando lo entrega ya cambió.
Nadie sabe hoy a cuántos podemos localizar.
Un dato por frase, y ni un adjetivo. Los números hacen el trabajo.
Esto ya está en línea. Capturo un egresado como lo haría la coordinadora.
Guardado. Aparece abajo, en la lista.
Filtro generación 2023: 47 contactables de 112.
El flujo completo en la dirección pública. Se narra lo que se ve, no cómo está hecho.
Capturamos 112 esta semana, entre tres personas, sin capacitación.
Ese 47 es la primera vez que ese número existe en la institución.
El número se queda en pantalla mientras se dice. Es la prueba, no el adorno.
Queremos correr un piloto de un mes con ingeniería.
Necesitamos dos cosas: que las cuatro coordinaciones capturen aquí, y que dirección diga que este es el registro bueno.
Algo concreto, a alguien concreto. Se pide, se calla, y se espera la respuesta.
L1 Lo que hunde una demo
Lo que la hunde
Empezar explicando cómo lo construyeron.
Enseñar el código.
Pedir disculpas por lo que falta.
Depender de que la red aguante.
Lo que la salva
Empezar por a quién le duele.
Enseñar la pantalla, funcionando.
Nombrar el alcance como decisión, no como falta.
Tener capturas por si la red falla.
L1 Y el elevator pitch: dos minutos y sin pantalla
Aquí no hay demo, ni proyector, ni enlace. Es contar la idea de pie, en un pasillo, y que le quede clara a alguien que no estuvo.
L2 Y así suena, de corrido y sin respirar de más
Las cuatro coordinaciones de vinculación arman a mano, cada semestre, el reporte de qué egresados siguen contactables. Les toma dos días y llega tarde.
Hicimos una herramienta donde se captura una vez y el número está siempre. Hoy son 47 contactables de 112 en la generación 2023, y antes ese dato no existía.
No es una idea: está en línea y se lo puedo mandar ahora mismo para que lo abra en su teléfono. Lo hicimos nosotros, sin saber programar, en tres días.
L2 Escriban su guion, con los tiempos al margen
Parámetros de la tarea
Los cinco minutos, partidos en tres, con lo que va a decir cada quien.
L1 Y su elevator pitch, sin pantalla
Parámetros de la tarea
Las tres preguntas, contestadas. Sin adjetivos y sin enseñar nada.
L2 Suban su entrega
Parámetros de la tarea
Su dirección pública y el elevator pitch que acaban de escribir.
L2b Ensayo con reloj, en serio
Consigna
Cada equipo corre demo y pitch completos, al menos una vez, con el cronómetro a la vista y alguien de otro equipo escuchando.
L3 Capstone
Presentar delante de gente que no vio cómo lo construyeron.
Y con esto se mira a los que están presentando
L4 Cómo va a correr
L4 Capstone
Consigna
Siete minutos por equipo. Demo en vivo, pitch, y dos de preguntas.
L4 El martes no habían escrito una línea de código.
Hoy tienen un problema validado, una herramienta funcionando en una dirección pública, un catálogo, un portafolio y una demo ensayada.
Y saben cuándo no confiar en lo que les responde.
L4 Antes de irse: la evaluación del curso
Parámetros de la tarea
Ábranla ahora, desde donde están viendo esta presentación.
L5