Configurar un entorno de desarrollo en Angular para una prueba técnica requiere seguir un flujo claro: clonar el repositorio, instalar dependencias y validar que las pruebas automatizadas corran. El laboratorio MyDevApp te reta a construir una aplicación de gestión de tareas y dejar en verde 20 pruebas end to end escritas con Playwright.

¿Qué es el laboratorio MyDevApp y qué vas a construir?

MyDevApp es una aplicación para gestionar las tareas del día a día, esas que a veces olvidamos. La maqueta inicial trae HTML y estilos base, pero no funciona: no crea tareas, no edita, no elimina. Tu trabajo es darle vida con Angular.

El proyecto vive en el GitHub de Platzi bajo el nombre Laboratorio MyDevApp Angular y está pensado para poner a prueba tu manejo del framework, tu lectura de pruebas automatizadas y tu capacidad para resolver requerimientos a partir de una especificación técnica [0:14].

¿Qué es MyDevApp? Es una aplicación en Angular para gestionar tareas diarias. Viene con maqueta y estilos, pero sin funcionalidad. Tu reto es implementarla.

¿Cómo hago el fork y clono el repositorio en mi máquina?

El flujo recomendado arranca con un fork hacia tu cuenta personal de GitHub. Así tienes tu propio espacio para versionar la solución sin afectar el repositorio original [1:09].

Estos son los pasos concretos:

• Entra al repositorio del laboratorio y haz clic en Fork.
• Asigna el nombre que prefieras, por ejemplo Solution, y confirma con Create fork.
• Copia la URL del repositorio recién creado y ejecuta git clone en la carpeta de tu preferencia.
• Ingresa a la carpeta del proyecto desde la terminal.

Una vez dentro, instalas dependencias con npm install. Este comando descarga todos los paquetes que Angular y el proyecto necesitan para compilar y ejecutarse [2:14].

¿Cómo verifico que el entorno de desarrollo de Angular funciona?

Después de instalar dependencias, levantas el servidor local con ng serve. Este es el comando típico para activar el modo de desarrollo de Angular y, por defecto, expone la aplicación en el puerto 4200 [2:34].

Al abrir esa dirección en el navegador verás la maqueta inicial. Y aquí viene lo interesante: la interfaz se ve, pero ningún botón hace lo que promete. Esa es la señal de que el entorno está listo y de que el siguiente paso es construir la lógica.

¿Para qué sirve ng serve? Es el comando de Angular que compila el proyecto y levanta un servidor de desarrollo en el puerto 4200 con recarga automática.

¿Cómo configuro y ejecuto las pruebas end to end con Playwright?

La parte que valida tu trabajo son las pruebas de integración. El proyecto usa Playwright como motor para correr pruebas end to end, configurado sobre Chromium [3:30].

Necesitas dos comandos en orden:

1. npm run e2e:install: instala los requerimientos que Playwright necesita la primera vez. Si nunca lo has corrido, puede tardar unos minutos.
2. npm run e2e: ejecuta ng build para compilar la aplicación, levanta un servidor con http-server y lanza la suite de pruebas.

La primera vez que corras la suite vas a ver casi todo en rojo, y eso es esperado. El reporte mostrará 19 pruebas falladas de un total de 20 porque la funcionalidad todavía no existe [4:39]. Tu objetivo es que todas pasen a verde.

¿Qué hace cada comando del flujo de pruebas?

Entender qué hace cada pieza te ayuda a depurar cuando algo falle:

• ng build: compila la aplicación Angular en archivos estáticos optimizados.
• http-server: sirve esos archivos compilados para que Playwright los consuma como si fuera producción.
• Playwright: simula un navegador real, hace clic, escribe y verifica que la interfaz responda como dicta la prueba.

Este flujo te da un ambiente lo más parecido posible a cómo un usuario final interactuaría con MyDevApp.

¿Por qué fallan las pruebas la primera vez que corro el laboratorio?

Las pruebas fallan porque la maqueta inicial no implementa ninguna funcionalidad. Crear, editar y eliminar tareas son comportamientos que tú debes programar siguiendo lo que cada prueba espera [4:11].

Esto convierte al laboratorio en un ejercicio de TDD inverso: las pruebas ya están escritas, y tú reconstruyes el código de la aplicación hasta que cada aserción se cumpla. Es una forma directa de medir comprensión de Angular, manejo de componentes, servicios y estado.

Con el setup terminado, ya tienes el fork, las dependencias instaladas, el servidor de desarrollo activo y la suite end to end corriendo. ¿Qué funcionalidad de MyDevApp crees que vas a abordar primero? Cuéntame en los comentarios.