App de gastos hormiga en el AWS Free Tier Workshop paso a paso

Módulo 5: Tu página y tu teléfono

Tiempo estimado: 12 min

Lo que vas a construir

Dos conexiones. Primero tu página, que ya está publicada desde el módulo 2, aprende cuál es tu API. Después un Atajo en la pantalla de bloqueo de tu teléfono te pide cuánto gastaste, en qué y de qué categoría, y lo manda a esa misma API. Si registrar un gasto toma 5 segundos, ya no hay excusa.

Módulo 5: tu página lee la API y tu teléfono manda el POST

Parte 1: conecta tu página con tu API (4 min)

La URL de la API cambia por persona. web/config.js guarda tu API_URL y web/app.js la importa. Git ignora ese archivo para que no lo subas por accidente, así que lo agregamos a propósito, sabiendo que solo trae la URL pública de tu API.

Te toca: prepara la configuración y súbela a GitHub

# escribe web/config.js con la URL de tu API
npm run preparar-pagina

# config.js está ignorado; este comando lo agrega a propósito
git add -f web/config.js
git commit -m "Publica mi página de gastos"
git push origin main

Abre Amplify otra vez. Vas a ver un build nuevo. Cuando termine en verde, abre tu página: ahí está el café del módulo 4, con el total por categoría.

¿Por qué git add -f?

-f es de "force": agrega un archivo que .gitignore ignora. Lo usamos solo para web/config.js, después de ver que trae únicamente la URL de tu API.

La página sigue diciendo que no apunta a una API

Amplify todavía no termina el build, o el push no llegó. Espera a que el último build esté en verde y recarga con Ctrl+Shift+R.

Parte 2: tu Atajo (8 min)

Lo que necesita tu Atajo

Te toca: saca la URL de tu API y tu API key

npm run datos mostrar-key

Déjalos a la vista, porque los vas a escribir en el teléfono.

El Atajo tiene que mandar esto:

Qué Valor
URL <tu ApiUrl>/gastos
Método POST
Header x-api-key tu API key
Header x-origen atajo
Body (JSON) monto (número), descripcion (texto), categoria (texto)

iPhone: Atajos

Te toca: arma el Atajo en tu iPhone

Nota: si tu app Atajos es reciente, al crear uno nuevo te ofrece una IA que lo arma por ti. Pégale la tabla de arriba y deja que lo haga.

  1. Abre Atajos y crea uno nuevo. Llámalo "Gasto hormiga".
  2. Agrega Pedir entrada con el tipo Número y la pregunta "¿Cuánto?".
  3. Agrega Pedir entrada con el tipo Texto y la pregunta "¿En qué?".
  4. Agrega Elegir de menú con las opciones cafes, snacks, transporte, suscripciones y otros. En cada opción pon Texto con el mismo nombre, para que el menú regrese la categoría.
  5. Agrega Obtener contenido de URL:
    • URL: tu ApiUrl seguida de /gastos;
    • Método: POST;
    • Encabezados: x-api-key con tu key y x-origen con atajo;
    • Cuerpo de la solicitud: JSON, con monto (Número) apuntando a la primera respuesta, descripcion (Texto) a la segunda y categoria (Texto) al resultado del menú.
  6. Agrega Mostrar notificación con el texto "Registrado".
  7. Agrégalo a tu pantalla de bloqueo como widget.
El Atajo dice que la respuesta fue {"message":"Forbidden"}

La API key no llegó o está mal escrita. El encabezado tiene que llamarse exactamente x-api-key, sin espacios al final.

La respuesta dice "categoria tiene que ser cafes, snacks..."

El menú está regresando otra cosa, por ejemplo la opción con emoji. Cada opción del menú debe traer un Texto con la categoría tal cual.

Android: HTTP Shortcuts

Nota: este shortcut es bastante distinto al del iPhone. Si te atoras, registra los gastos con el script de abajo y sigue adelante.

Te toca: arma el shortcut en tu Android

  1. Instala HTTP Shortcuts desde la Play Store.
  2. Crea un shortcut nuevo de tipo Regular Shortcut.
  3. Método POST y URL <tu ApiUrl>/gastos.
  4. En Request Headers agrega x-api-key y x-origen: atajo.
  5. En Request Body elige Custom Text con tipo application/json:
{
  "monto": {{monto}},
  "descripcion": "{{descripcion}}",
  "categoria": "{{categoria}}"
}
  1. Crea las variables monto (número), descripcion (texto) y categoria (selección con las cinco categorías), marcadas para que te las pregunte al ejecutar.
  2. Agrega el shortcut a tu pantalla de inicio.

Sin teléfono: el script

Haz lo mismo desde la terminal. El cuarto dato es el origen, atajo, para que el gasto cuente en el checkpoint:

npm run probar 28 "galleta del súper" snacks atajo

Registra 3 gastos

Te toca: registra tres gastos

Desde la pantalla de bloqueo (o con el script). Lo que te hayas comprado hoy cuenta. Después recarga tu página y mira cómo suben el total y la lista.

Usa gastos chicos o inventados: tu página es pública, así que no pongas nada financiero o personal que no le enseñarías al vecino.

Verifícalo tú en la consola

Abre DynamoDB > Explore items y busca tus tres gastos. El atributo origen dice atajo.

Tu página es pública

Mándale el link de tu página a la persona de al lado. Sin pedirle ninguna key, va a ver tus gastos, porque el GET /gastos sigue abierto. Mientras no agregues Cognito, tus gastos son públicos.

Checkpoint ✅

Te toca: corre el checkpoint con la URL de Amplify

npm run verify 5 https://main.<tu-app-id>.amplifyapp.com

Revisa que tu página responda, que config.js apunte a tu API y que haya al menos un gasto con origen igual a atajo.

Para saber más

Tu API key vive en tu teléfono

Si alguien toma tu teléfono desbloqueado, o le pasas el Atajo, se lleva tu key. Con ella puede registrar gastos en tu tabla, aunque no pasar del límite del usage plan.

Si crees que otra persona la tiene, corre npm run rotar-key. Antes pausa npm run sync con Ctrl+C para no iniciar dos deploys a la vez, y después pon la key nueva en tu Atajo. La vieja deja de funcionar cuando termina el deploy.

Si te atoraste

Si tu Atajo no funciona, registra los gastos con el script y sigue adelante: el resto del workshop funciona igual. Si falla config.js, corre npm run preparar-pagina otra vez y repite el commit y el push.