Inicio / Casos reales de principio a fin

Una aplicación móvil de principio a fin

Un scaffold, la estructura inicial generada automáticamente para una aplicación, una navegación entre pantallas, una llamada de red y una corrección de los tipos señalados como error pueden encadenarse en una sola sesión de trabajo, con una vista previa que se actualiza en tu propio teléfono con cada modificación.

Un scaffold, la estructura inicial generada automáticamente para una aplicación, una navegación entre varias pantallas, una llamada de red hacia un servicio y una corrección de los tipos señalados como error pueden encadenarse en una sola sesión de trabajo, con una vista previa que se actualiza en tu propio teléfono con cada modificación del código.

El recorrido en cinco etapas

El scaffold coloca primero la estructura: carpetas, pantallas vacías, archivo de configuración. Viene después la navegación, el vínculo entre esas pantallas, un botón en la primera que abre la segunda. La llamada de red sigue: una pantalla solicita datos a un servicio y los muestra en cuanto llegan. Las correcciones de tipos llegan por lo general solas en esta etapa: el sistema de tipos señala un campo esperado y ausente, o un valor textual usado donde se requiere un número, y cada señal se corrige antes de pasar a la siguiente. La última etapa no es realmente una: es la verificación, en cada etapa anterior, sobre la vista previa real mostrada en el teléfono.

Mantener la vista previa abierta

La diferencia entre una sesión productiva y una sesión que se descarrila se reduce a una sola elección: abrir la vista previa desde la primera pantalla y dejarla visible durante todo el recorrido, en lugar de codificar varias etapas y verificar una sola vez al final. Un error visto inmediatamente después de introducirlo se corrige en unos segundos, porque la única modificación reciente responsable es evidente. El mismo error, descubierto después de otras cinco modificaciones, obliga a buscar cuál de las cinco lo causó.

El ejemplo de abajo fabrica sus propios datos, una pantalla de productos que no llama a ningún servicio real, para ilustrar lo que la vista previa debe mostrar en esta etapa del recorrido.

// Pantalla Productos, datos fabricados localmente para este ejemplo
const produits = [
  { id: 1, nom: "Funda", prix: 12 },
  { id: 2, nom: "Soporte", prix: 18 },
  { id: 3, nom: "Cable", prix: 9 }
];

function chargerProduits() {
  return produits;
}

console.log(chargerProduits().length, "productos cargados");

Tres productos cargados, mostrados inmediatamente en la pantalla de vista previa antes incluso de conectar un servicio de red real. Una vez verificada esa misma pantalla con datos fabricados, sustituir la función por una llamada de red real se convierte en una corrección aislada, no en una nueva etapa a ciegas.

El gesto que se repite

Este recorrido, scaffold, navegación, llamada de red, corrección de tipos, verificación continua, se repite en cada nueva pantalla de una aplicación. La tercera vez que se repite de forma idéntica merece un tratamiento distinto, el que describe automatizar la propia práctica, pila y skill: transformar un gesto repetido en un comando con nombre en lugar de volver a escribirlo una cuarta vez.