1Amped

Introducción

Antes de que un ingeniero construya una placa de circuito físico, lo cual implica soldar componentes reales y conlleva tiempo y dinero, crea una versión digital en SPICE (Simulation Program with Integrated Circuit Emphasis). SPICE es el software estándar de la industria que se utiliza para probar y analizar circuitos electrónicos virtualmente. El software utiliza modelos matemáticos complejos para predecir con precisión cómo se comportará la electricidad en ese diseño.

Cómo funciona:

• Entrada: Dibuja el esquema del circuito (conectando resistencias, condensadores, chips y otros componentes).
• Procesamiento: SPICE calcula la física (utilizando leyes como la Ley de Ohm) para cada componente.
• Salida: Produce gráficos que muestran exactamente lo que están haciendo el voltaje y la corriente en cualquier momento.

Permite a los ingenieros detectar errores, optimizar el rendimiento y realizar pruebas de estrés en los diseños (como comprobar qué ocurre cuando la temperatura sube demasiado) sin dañar componentes costosos.

Sin embargo, estas herramientas estándar de la industria suelen ser notoriamente complejas, presentando a los estudiantes datos abstractos en lugar de información intuitiva. Pueden resultar abrumadoras, especialmente para principiantes. Nuestro cliente, 1Amped, se propuso cambiar esto mediante la creación de un simulador web accesible que acorta la brecha entre la teoría y la comprensión práctica.

Desafío

1Amped se puso en contacto con nosotros con una visión ambiciosa: transformar la forma en que se enseña y se practica la ingeniería eléctrica. Querían crear un simulador de circuitos interactivo basado en la web que combinara la potencia profesional del software de ingeniería estándar de la industria con la naturaleza visual e intuitiva de las plataformas de aprendizaje educativo.

1Amped buscaba una solución que proporcionara a universidades, centros de enseñanza superior y aficionados un laboratorio virtual seguro donde pudieran experimentar sin consecuencias, transformando la física compleja, desde fórmulas intimidantes hasta experiencias visuales interactivas.

Sin embargo, pasar de un concepto de alto nivel a un producto de software funcional requiere más que buenas ideas. 1Amped recurrió a nosotros por nuestra amplia experiencia en el desarrollo integral de productos y el análisis de negocios. Querían, en primer lugar, analizar a fondo el concepto, identificar los riesgos y trazar una estrategia clara para su lanzamiento al mercado.

Nuestro compromiso inicial comenzó con una rigurosa fase de descubrimiento. 1Amped necesitaba una estrategia detallada antes de escribir una sola línea de código para garantizar que el producto fuera viable, escalable y competitivo. Nuestro alcance incluyó:

• Ingeniería de requisitos: Creación de un documento de especificación de requisitos completo, que incluya historias de usuario, definiciones de alcance y evaluaciones de riesgos.
• Prototipado UX/UI: Entrega de bocetos y wireframes iniciales para visualizar la interfaz. Tuvimos que diseñar una interfaz UX/UI lo suficientemente intuitiva para que un principiante pudiera arrastrar y soltar componentes sin sentirse abrumado, pero a la vez lo suficientemente potente como para admitir diseños esquemáticos complejos, menús contextuales y atajos de teclado para usuarios avanzados.
• Arquitectura del sistema: Diseñar una arquitectura técnica segura y escalable, y seleccionar el conjunto de tecnologías adecuado. Necesitábamos diseñar la arquitectura de la base de datos y la lógica de back-end hoy para que soportaran roles de usuario complejos, jerarquías de permisos y funciones de gestión de contenido en el futuro, evitando así tener que reescribir todo el sistema cuando el cliente estuviera listo para escalar.

Solución

Para abordar la complejidad de la visión de 1Amped, llevamos a cabo una fase de análisis estructurada. Creamos un plan de desarrollo concreto, asegurándonos de que cada decisión técnica estuviera alineada con los objetivos comerciales y las necesidades de los usuarios.

Especificación de requisitos

Nuestro primer paso fue centralizar todo el conocimiento del proyecto. Utilizamos Confluence para crear y compartir un documento de especificación de requisitos completo. Este documento sirvió como fuente principal de información para el proyecto, detallando la visión y la misión del producto, los objetivos específicos que buscábamos alcanzar y una lista completa de requisitos funcionales desglosados ​​en historias de usuario.

También proporcionamos una definición clara del alcance para describir exactamente qué se incluiría (y qué se excluiría) para evitar que el alcance se desvíe, junto con una evaluación de riesgos para identificar posibles problemas con antelación.

Una parte fundamental de esta fase fue nuestro exhaustivo análisis comparativo. Sabíamos que para crear un producto superior, teníamos que comprender el panorama.

• Análisis de la brecha competitiva: Seleccionamos a los 8 competidores más fuertes y analizamos sus ventajas y desventajas. Examinamos factores como la curva de aprendizaje, el nivel de mantenimiento (como el desarrollo esporádico o regular) y si ofrecían un modelo freemium y en qué consistía exactamente, entre otras consideraciones.
• Análisis detallado de las funcionalidades: Examinamos sus capacidades de simulación, como por ejemplo si ofrecían funciones avanzadas como análisis de ruido o simulaciones de Montecarlo, o si se limitaban a las funciones básicas.
• Interactividad: Evaluamos la experiencia del usuario. Por ejemplo, observamos que, si bien algunos competidores obligan a los usuarios a escribir circuitos en formatos de texto complejos (modo consola), una interfaz gráfica es muy superior. También buscamos elementos interactivos, como interruptores que los usuarios puedan pulsar para abrir o cerrar, o LED que se iluminen.

Diseño UX/UI

Nuestra filosofía de diseño consistió en combinar la precisión de las herramientas de ingeniería profesionales con la interacción de una aplicación creativa moderna. El diseño de la interfaz de usuario (UX/UI) se inspiró en las elegantes y sobrias interfaces de programas como Adobe Photoshop y Altium Designer. Creamos una estética estrictamente profesional, pero accesible para los estudiantes.

Para evitar la sobrecarga cognitiva, establecimos una lógica espacial clara e intuitiva. La pantalla está dividida en tres zonas distintas:

• Paleta de componentes a la izquierda (lo que necesito)
• Espacio de trabajo activo en el centro (donde construyo)
• Paneles de contexto a la derecha (lo que haré a continuación)

Esta estructura guía de forma natural la mirada del usuario a través del flujo de trabajo de ingeniería, asegurando que las herramientas estén siempre en el lugar correcto. Utilizamos la limpia familia tipográfica Inter para reducir la fatiga visual durante largas sesiones de estudio.

Gestionamos la complejidad de las múltiples vistas con un sistema modular y flexible. Los usuarios pueden alternar entre las pestañas Esquema y Resultados para centrarse en el diseño del circuito o en el análisis gráfico. Los paneles son plegables, redimensionables y móviles. Los ingenieros experimentados pueden despejar la pantalla para maximizar el espacio de trabajo. Los estudiantes pueden mantener abierto el Panel del Curso para seguir las instrucciones paso a paso junto a su simulación en tiempo real.

Finalmente, optimizamos nuestro flujo de trabajo para maximizar la velocidad y el crecimiento futuro. Complementamos nuestro proceso de diseño con inteligencia artificial para prototipar rápidamente múltiples escenarios de interfaz, lo que nos permitió descartar rápidamente las opciones menos viables y centrarnos en las soluciones que realmente funcionaban para el usuario. Además, nos aseguramos de que la arquitectura de la interfaz fuera escalable, reservando capacidad para futuras funcionalidades como el diseño de placas de circuito impreso (PCB) y vistas 3D, evitando así costosos rediseños posteriores.

Creamos y organizamos todo en Figma para mantener la coherencia visual del diseño. Esto facilita que todos revisen los diseños hoy mismo y garantiza que los desarrolladores tengan exactamente lo que necesitan cuando llegue el momento de programar.

Diseño arquitectónico

Para respaldar la visión de 1Amped de un simulador de navegador de nivel profesional, diseñamos un modelo de arquitectura escalable de cuatro niveles basado en Microsoft Azure. Propusimos desacoplar el sistema en capas lógicas:

• Interfaz de usuario responsiva con React.js
• Backend .NET 8.0 para lógica de negocio
• Capa de simulación dedicada basada en Python que utiliza NGSpice para cálculos complejos y Azure SQL para el almacenamiento seguro de datos

Esta separación se diseñó para que los cálculos matemáticos complejos de simulación nunca ralentizaran la experiencia del usuario.

Para la infraestructura, seleccionamos Azure Kubernetes Service (AKS) para garantizar una alta elasticidad. Nuestro diseño incluye configuraciones de autoescalado que agregan automáticamente recursos de servidor durante los picos de tráfico y los reducen durante las horas de menor actividad para ahorrar costos.

Para evitar que el navegador se congele durante simulaciones intensivas, especificamos el uso de procesamiento asíncrono con colas de mensajes, lo que permite desacoplar eficazmente los cálculos complejos de las interacciones en tiempo real.

La seguridad y la integridad de los datos fueron fundamentales en nuestra planificación arquitectónica. Definimos un marco de seguridad que utiliza OAuth 2.0 y JSON Web Token (JWT) para un control de acceso seguro basado en roles, protegiendo los datos de los usuarios mediante cifrado HTTPS. Para garantizar la resiliencia de los datos, diseñamos una estrategia de copia de seguridad georredundante. Este plan incluye registros de transacciones guardados periódicamente, lo que asegura que, incluso en caso de una interrupción regional, los datos de 1Amped permanezcan seguros y recuperables.

Finalmente, definimos una sólida estrategia de CI/CD para garantizar la fiabilidad futura. Recomendamos una estrategia de despliegue azul/verde, que permite lanzar nuevas funcionalidades o correcciones de errores sin interrupciones. Además de la automatización básica, definimos un riguroso proceso para la calidad y seguridad del código, incorporando análisis estático y escaneo de dependencias para detectar vulnerabilidades de forma temprana. Esta hoja de ruta proporciona al futuro equipo de desarrollo un camino claro para implementar actualizaciones con confianza, asegurando la estabilidad de la plataforma para los usuarios las 24 horas del día.