Transcripciones
1. INTRODUCCIÓN: Hola, y bienvenidos a este diagrama de
curso y estimación Como una P con
Glot y punto de fila IO Yo soy David Armen Daris. Soy un líder de ingeniería
y arquitecto de software, y he pasado años
dirigiendo kickofs de proyectos donde la parte difícil no
era el trabajo Fue
alinear a todos sobre lo que realmente
estábamos construyendo y
cuánto tiempo tomará. También soy el fundador
y CTO de Delta Witz, una consultoría de software enfocada
en la excelencia en ingeniería En esta clase,
aprenderás a usar coagular y dibujar IO juntos para pasar de un Canvas en blanco a un
diagrama de arquitectura completo en minutos, y luego convertir esa
arquitectura en un gráfico GAT con
estimaciones y dependencias reales Cubriremos cuatro cosas. Configuración de la
integración de Clot MCP con draw IO incitando a Clot a generar y refinar diagramas de
arquitectura,
dividiendo su arquitectura en tareas y
fases y generando y
validando un gráfico
Gan fases y generando y
validando Esta clase está construida para gerentes de
proyectos y líderes de
ingeniería. Cualquier persona que necesite comunicar sistemas
complejos de manera clara y
hacer estimaciones creíbles. No necesitas ninguna experiencia de
codificación, una cuenta de coágulos y Ratio, ambos son gratuitos
para ser stattered Si alguna vez iniciaste una placa de espejo en blanco
al inicio de un proyecto, sin saber por dónde empezar, esta clase es para ti. Arreglemos eso y nos
vemos en la primera lección.
2. ¿Cómo trabaja Claude con Draw.io?: En mi empresa Delta Wt, tenemos un cliente que
necesita una aplicación web comercial. Entonces vamos a usar esto
como escenario manos a la obra. El problema se plantea así. Una cadena minorista necesita
una aplicación web donde los clientes traigan dispositivos usados, el personal los evalúe y el sistema administre los
precios y el inventario Entonces tenemos cuatro componentes aquí. Contamos con un Frontend
donde tenemos el portal de clientes y
el dashboard del personal Tenemos los
servicios de backend, la autenticación, motor de
evaluación, la gestión de
inventario, y luego tenemos
la capa de base de datos, que consiste en tiendas de
persistencia para registros de dispositivos, precios y usuarios, y tenemos integraciones
externas como una pasarela de pago o
un servicio de notificación Entonces, ¿cuál es la vieja manera versus la nueva forma
de hacer las cosas? Cada hora que se dedica
manualmente a diagramar o estimar a partir del relleno de Gut es
una hora que no se gasta Hoy en día contamos con la nube y otras herramientas de IA
para construir más rápido. Entonces, ¿por qué no usar estas herramientas de IA para también hacer
diagramas y estimar más rápido? Entonces, esto es lo que cambia
con este flujo de trabajo. A la antigua manera, tenemos diagrama
manual Horas de caída de dragón en la
nueva forma que acabamos solicitar y el diagrama
se renderizará en minutos. A la antigua manera, solo
tenemos estimaciones del instinto y de la
experiencia pasada. En la nueva forma el diagrama de Gantt se deriva de componentes de
arquitectura reales A la antigua manera, trabajamos todo cuando la
arquitectura cambia, pero de una manera nueva,
podemos iterar con Glut instantáneamente a través de un prompt de
seguimiento Entonces coágulo habla
dibujar Dio de forma nativa. Tenemos MCP, que significa protocolo
de contexto modelo, que es el puente
que permite coagular escribir directamente a
tu sorteo Dio No necesitas ningún
copiado y
ningún manual de una lata
porque el coágulo genera XML Entonces puede escribir una estructura, dibujar XML instantáneamente, y luego
puede dar vida a este diagrama. Solo necesitas
describir lo que
necesitas en un lenguaje sencillo, y luego puedes
refinar con Bond. Cada iteración toma segundos, por lo que puedes mantenerte en
el bucle creativo Claude maneja el marcado
y la parte difícil. Espero que les guste. Nos
vemos en la siguiente lección.
3. Habilitar el MCP de Draw.io: Bien, entonces ahora
vamos a habilitar el conector MCP AO de extracción Entonces eso es muy, muy fácil. Una vez que estés en la aplicación de escritorio de
coágulo, vas aquí y haces
clic en configuración Entonces vas a los conectores, y
ya tengo esto configurado. Pero déjame quitarlo
y hacerlo desde cero. Simplemente haga clic en este botón
llamado en Custom Connector. Puedes nombrar esto como
quieras, y luego tienes que poner
la URL del servidor MCP remoto Y es este HTTPS
mcpw dot IO slash MCP. Entonces esto permitirá que Clot acceda a la DRO de MCP y ejecute acciones Entonces agregamos esto,
y ahí tienes. Eso es lo único
que debes hacer
para habilitar el MCP desde IO
4. Lo que nos dijo Claude para crear el diagrama de arquitectura: Ahora que tenemos
el MCP habilitado, vamos a comenzar
con el primer paso El primer paso es solicitar
coágulos para un diagrama del sistema. Así que vamos a describir el sistema de comercio
en lenguaje sencillo, y el coágulo generará un diagrama de arquitectura en capas
directamente en su Canvas Pro tip. Sea específico
sobre las capas, los actores y los flujos de datos. Cuanto más
detalle estructural dé, más precisa será la salida. Entonces podemos ver esto como
una serie de pasos. El primer paso es
escribir un prompt. Vamos a
describir el sistema, los componentes, los
usuarios, los flujos de datos. Vamos a ser lo
más precisos posible. Entonces Cloud
generará el diagrama, y luego podremos refinarlo. Entonces vayamos a Cloud
y vayamos aquí. Y sólo por orden, vamos a crear
un nuevo proyecto. Este proyecto se
llamará Trading Web App. ¿Qué estás tratando de lograr? Un diagrama de arquitectura y diagrama de
gant o un comercio en la web. Bien, genial. Entonces aquí, opcionalmente puedes agregar instrucciones sobre cómo
quieres que se comporte la IA. Se pueden agregar archivos para
poner más contexto, pero no necesitamos
demasiado contexto. Vamos a hacer
esto desde cero. Por lo que escribiré aquí el aviso. Necesito diseñar un diagrama de
arquitectura de sistema para un Webo de comercio minorista Por favor, cree una capa, cree un diagrama de
arquitectura de capas en drawdo con lo siguiente Entonces los actores, los actores
van a ser el cliente, que es un actor externo, el personal de la tienda, que
es un actor interno. Entonces estas son las personas que
usan nuestra aplicación web, ¿verdad? Y las capas. ¿Cuáles
son las capas? Bueno, vamos a
tener un front-end, el portal de clientes,
el tablero del personal. Oh, voy a parar esto. Aún no he terminado. Segundo, vamos a
tener una puerta de enlace API. Que va a ser
un único punto de entrada para todos los clientes. Vamos a tener
algunos servicios de back end, el servicio AT, el motor de valoración,
el servicio de inventario. Vamos a
tener una capa de datos. Entonces POSCRS vamos a tener
la base de datos de cráneos POSCRS, la caché de lectura en caso de que necesitemos una Entonces probablemente una
pasarela de pago, queremos una, y algún servicio de notificación, por
ejemplo, correo electrónico o SMS. Datos flolows para mostrar que queremos que el cliente vaya al portal
del cliente, vaya a la puerta de enlace API,
vaya al motor de valoración
y vaya a la pasarela vaya al motor de valoración de
pago Qué más queremos mostrar
al staff, yendo al dashboard del staff, que va a la API Gateway, que va al servicio de
inventario. El servicio OT se encuentra entre la puerta de enlace API
y todos los servicios de AACN Color para diferenciar
cada capa y agrupar de nuevo en servicios. Dentro de un contenedor etiquetado servicios
internos. Entonces este prompt también, puedes usar la ayuda de la IA
para generar este prompt. Si tienes más información, pues, pones esa
información aquí. Si aún no sabes cuáles son las cosas que
vas a necesitar, entonces puedes usar la ayuda de la IA. Como este es un caso de uso
muy, muy genérico, entonces también usé IA para generar
este prompt. Bien. Entonces ahora vamos a eliminar
esto y ya puedes ver ahora mismo que
Claude ya está queriendo crear el
diagrama a partir de draw dot IO. Se puede ver que ya está
tratando de crear ese XML que estaba mencionando. Vamos a hacer clic en permitir siempre. Como puedes ver, Claude
ya está creando el diagrama. Entonces ahora tenemos un diagrama
interactivo donde tenemos a los actores, al cliente externo, personal de
la tienda,
que es un interno. Así que ambos pasan por esta capa de
front-end donde tenemos el portal de clientes
y el panel de personal, y todos estos
hacen solicitudes a la capa de puerta de enlace API donde
tenemos el único
punto de entrada para todos los clientes. Por lo que los clientes, en este caso, serán la aplicación web para el portal de clientes y la aplicación web para el dashboard
del personal. El back end, bueno, tenemos los servicios internos, que son los off service. Entonces puede ser JWT, JSON Lap token u O de 2.0, tenemos el motor de valuación que da el precio comercial, y tenemos el servicio de
inventario, que es útil para
la gestión de stock Y se puede ver también capa de datos, que tiene Posgrs como base
de datos primaria, y una caché de lectura para las sesiones o cualquier
otro tipo de Y este motor de valuación, como puedes ver, está conectado
a la pasarela de pago. Puede ser raya o
puede ser árbol cerebral. Eso depende, bueno, los procesadores de pago que tengas disponibles en tu país, y el
servicio de inventario esté conectado, perdón al servicio de
notificación. Como puedes ver, las flechas
están un poco estropeadas. Pero tienes la opción de
ir a Open indo dot IO. Entonces abres la tinta y aquí podrás
editar este diagrama manualmente. Ahora mismo, los diagramas
tienen estos problemas donde las flechas específicamente tienen estos problemas donde
hay que moverlos manualmente, pero eso es después de
hacer la iteración Entonces te recomiendo primero
que hagas la iteración, y luego puedas mover todas estas flechas
para que no se solapen o tal vez estas cosas estén más guapas, ya sabes Así que todos esos detalles
se pueden hacer después de iterar. Eso es exactamente lo que
vamos a hacer a continuación, la fase refinada.
5. Cómo perfeccionar la arquitectura: Bien, así podemos refinar ahora
sin empezar de nuevo. Cada mensaje de seguimiento
aplica un cambio de enfoque, por lo que no necesita ninguna
reconstrucción desde cero. Algunos ejemplos en un componente, en un
servicio de detección de fraude entre el motor de valoración y
la pasarela de pago. También podemos decir
reorganizar la estructura, agrupar los
servicios de backend dentro un contenedor de VPC, y también
podemos decir,
Hey, aplicar un poco de estilo,
usar algunos iconos de AWS para
la Un mensaje significa
un cambio de enfoque. Esta es la mejor práctica. Así que mantén las indicaciones enfocadas para
que pueda producir resultados
más limpios y predecibles Vayamos a coagular, y en realidad
hagamos uno de estos Agregar un
servicio de detección de fraude entre el motor de valoraciones
y la pasarela de pago Entonces, vamos a un sistema de
detección de fraudes entre el
motor de valuación y el ¿qué era? La pasarela de pago y
la pasarela de pago. Bien. Veamos qué va a hacer
el coágulo. Entonces coágulo va a
crear un nuevo diagrama. Entonces esta es una de las limitaciones en estos
momentos con el MCP. No va a actualizarse. No tiene diagrama de
actualización. Tiene un diagrama de creación. También podemos estar seguros si vamos a ajustes, tal vez este. Aquí, puedes ver
en los conectores que tiene crear diagramas
y buscar formas. Entonces estas son las únicas dos
cosas que proporciona el PNC. Entonces esas son las herramientas
que tiene el PNC. Por lo que no hay
diagrama de actualización o diagrama de eliminación. Voy a crear un nuevo
diagrama desde cero. Por eso te dije en
la última lección que, bien, haz esos reordenamientos de las flechas y todas esas cosas una vez que estés seguro
de la estructura final Entonces en este caso,
tenemos ahora la puntuación de riesgo
de detección de fraude. Bien. Y sí, esto está
un poco desordenado. Pero nuevamente, puedes
abrir esto en Dryo y puedes moverlo para
la arquitectura final Eso es
lo único que te va a llevar algún tiempo. Esa es la única tarea que
consume mucho tiempo, asegurarse de que estas
flechas básicamente no se superpongan porque
ahora mismo está tratando de hacer su mejor esfuerzo tener todo el
diagrama en un solo lugar. Por eso las
flechas se superponen. Y tal vez los bloques también. Bien, entonces el servicio de
detección de fraudes se ha agregado dentro del contenedor de
servicios internos con tres nuevas conexiones. El motor de valoración a la detección de
fraude etiquetado como verificación de
riesgo a la transacción se califica antes de intentar cualquier
pago. La detección de fraude a la pasarela de pago etiquetada
aprobada solo se borra si la verificación de riesgo pasa y
la detección de fraude
al servicio de notificación
alerta TRO activa una alerta por correo electrónico, SMS cuando se marca una
transacción Bien. Y también dice que la detección de fraude
se ulcera a partir de lecturas, lo que es típico de
búsquedas rápidas de listas de blogs, límites de
tasa e historial de transacciones
recientes
durante la puntuación de riesgo Entonces así es como iteramos. Espero que les guste.
Intenta hacer lo mismo. Pero por ejemplo,
reconocer la estructura o aplicar estilo y
ver cuáles son los resultados. Pero siempre tenga en cuenta un
rápido, un cambio de enfoque.
6. Extraer la lista de tareas: Ahora que tienes tu diagrama de
arquitectura, vamos a pedirle
a Claude que lea la arquitectura. Entonces no catalogas la
arquitectura manualmente, pides a Cloud que la haga. Un prompt convertirá su diagrama
terminado en tareas
estructurales lista
para encajar en el Gent. Entonces, ¿cuál es el prompt del puente? Es decir, basado en el diagrama de
arquitectura, solo
construimos identificar todos los componentes clave y
agruparlos en fases de construcción. Para cada fase, enumere
la tarea principal y plana qué tareas están
bloqueadas por otros. Por lo que dará salida al inventario de
componentes. Entonces, cada servicio y
módulo del diagrama, va a tener un desglose de tareas de fase
donde se tiene el descubrimiento, el diseño, la compilación,
la Q, el lanzamiento. Vamos a ver si
Cloud es capaz de hacer eso. Y vamos a tener
estos flujos de dependencia, cuya tarea puede comenzar
hasta que se hagan otras. Entonces pro tip, esta salida se convierte en la entrada directa para su
lección cuatro Gant prompt, por lo que no se necesita formato Pero una cosa a tener
en cuenta es que cuando
pegamos cuando copiamos y pegamos
este prompt en coágulo, Clot intentará crear
el diagrama en Pero creo que DraWio
no es la herramienta para hacer esto. Entonces en Lasson cuatro, vamos
a compararlo con otra herramienta, que se llama sirena Pero ya copié y
pegué ese prompt aquí, y se puede ver que está tratando de
hacer el diagrama en sí Uno, fase dos, fase
tres, fase cuatro, y la fase uno
tiene configuración Poscres, configuración
lista, puerta de enlace
API de servicio, y luego tenemos
los servicios principales, las integraciones
y
el Entonces esto es lo que generó
porque pensó, Oye, yo estaba haciendo diagramas. Probablemente queremos
otro diagrama, que es un diagrama de gant, ¿verdad? Pero lo que realmente
queremos para la Lección cuatro, quiero decir, si estás de acuerdo con
este gráfico, entonces adelante. Se puede utilizar. Pero lo
que quiero usar es ésta, la fase uno, la fase dos, la fase tres,
y la fase cuatro. Entonces vamos a usar otro
prompt para generar esto con un formato
especificado para ajustarlo a sirena.
7. Creación del gráfico de Gantt: Gran trabajo hasta el momento. Ahora, tenemos un diagrama básico de diagrama de
Gantt, pero queremos mejorarlo. Entonces vamos a pedir a
Clot un diagrama de Gantt,
pero específico para pero específico Así que vamos a tomar
la lista de tareas de estructura que el coágulo produjo
en la última lección, y vamos a
encajarlo directamente de nuevo Por lo que Clot utilizará tabla de Gantt de
Mermaid JS con dependencias de
duración y
secuenciación Entonces, el prompt de muestra que puedes usar
es usar el
desglose de fase y tarea que me acabas de dar, crear un gráfico GAN en formato
Mermaid JS, asumir una línea de
tiempo de diez semanas y mostrar todas las dependencias entre tareas Bien. Entonces después de hacer eso, vamos a renderizar el código que el coágulo
va a generar para nosotros, y ese es el código Mermid Así que podemos poner eso en Mermaid Live o en cualquier
otra herramienta compatible, y luego podemos
afinar a medida que evolucione el alcance Entonces esos son los pasos, pasar la salida de los coágulos, obtener el código mermid
y renderizar ese código Entonces vayamos a coagular y
peguemos ese prompt. Entonces voy a copiar
esto y pegarlo aquí. Entonces, como puede ver, todavía
está tratando de
crear un diagrama de E/S de dibujo. Por lo que está obsesionado con hacer
las cosas en draw dot IO. Pero lo diré, dame
el código de la sirena en su lugar. Entonces veamos si ahora
Claude lo hace mejor. Oh, bien. Entonces copiemos esto. Y vamos a Mermaid
y lo pongamos aquí en código. Entonces ahora mismo tenemos
un error de sintaxis. Si tienes una cuenta,
puedes hacer este reporte de IA. Pero vamos a copiar este error y
pegarlo de nuevo a la tela. Porque lo que pienso
es que no lo hizo, tiene esta rebaja. Así que volvamos, copia el código. En realidad solo quería
el código. Entonces aquí está. Aquí está el diagrama de Gantt, pero esto es mejor, Entonces vamos a expandirlo. Y veamos que el
Postgres sigue configurando,
la configuración lista y
el servicio OT Eso va a comenzar
el 26 de abril, ¿verdad? Y esto puede ser tareas
independientes. Entonces puedes ir con el esqueleto de
API Gateway, y puedes hacer el motor de
valoración y el
servicio de inventario en paralelo. Pero luego después de hacer
el motor de valuación, puedes hacer el portal de clientes. Después de tener el servicio de
inventario, puede hacer el tablero del personal. Y si, puedes hacer en paralelo el servicio de
notificaciones. En paralelo al portal del cliente, puede hacer el servicio de
detección de fraude, y después del servicio de
detección de fraude, puede hacer la pasarela de pago. Y en paralelo con el portal de
clientes y
la detección de fraudes, puedes asegurarte proteger todo
con autenticación, y en paralelo con
la pasarela de pago, puedes hacer el ajuste de reglas de
fraude. Y luego después de
hacer todo aquí, puede hacer las pruebas de flujo de extremo
a extremo. Y en última instancia, puedes hacer las pruebas de carga
y el escalado. Y puedes ver aquí
que tienes las fechas. Va desde el
26 de abril hasta el 7 de junio. Entonces este es un plan de construcción de diez
semanas para esta
aplicación web de comercio minorista. Entonces eso es genial. Obviamente, hay que
comprobar esto. La IA es solo un copiloto. Ya viste que
cometió algunos errores. Me
estaba dando esto. Traté de renderizar
esto, con rebajas. Pero falló. Bueno,
no falló. Es solo que no se nota
tan bien como en el Merman
que Live Editor Entonces lo digo, Hey es el error. Sólo dame el código,
básicamente, y lo
renderizamos nosotros mismos. Aún así intentó hacer
el diagrama de creación. Aún así trató de
llamar a esa herramienta. Entonces sí. Lo acabamos de decir, Oye, solo dame el código
Sirena que Jazz. Traté de renderizar
eso en la rebaja, entonces solo dame el código Y con ese código,
pudimos
renderizar el diagrama de Gantt Entonces eso es todo.
Espero que les guste. Viendo la siguiente lección.
8. Desafía el resultado.: Una vez que tengas el diagrama de Gantt, recuerda que esto es solo una estimación de que la
IA puede cometer errores Un diagrama de Gantt de Claude es solo un
punto de partida, no Use esta lista de verificación para
probarla a presión antes de
compartirla con las partes interesadas. Trayectoria crítica. ¿
La secuencia de tareas de
bloqueo lleva
lógicamente al lanzamiento Entonces si vemos el diagrama, sí, tiene mucho sentido. Por ejemplo, la
prueba de carga está al final. Entonces tiene mucho sentido
que las pruebas de carga,
por ejemplo, vayan
antes que todo lo demás. Eso tiene mucho sentido. Dependencias, ninguna tarea comienza antes de que
se complete su predecesor Se puede ver, por ejemplo, portal de
clientes va tras
el motor de valoración. ¿Eso tiene sentido para ti? Bueno, puede tener sentido para
ti dependiendo del equipo. Ejemplo, su ingeniero
front-end puede comenzar esto incluso desde el
inicio del proyecto, y puede comenzar a burlarse los datos para poder avanzar Entonces, en realidad, si
quieres ser muy eficiente, no
necesitas que el motor de
valoración
se complete antes
del portal de clientes. Panel de control de clientes y personal, se
pueden hacer antes de que se complete cada servicio de
vacan Pero nuevamente, eso
depende del tamaño de tu equipo. Si solo tienes una persona
trabajando en este proyecto, entonces probablemente, sí,
esto tiene más sentido. Entonces ese es el cuarto punto aquí, supuestos
del equipo, el tamaño del equipo y indican los supuestos
del equipo, el tamaño del equipo y la
disponibilidad, no implícitos. A lo mejor si le
dijimos a Claude, oye ,
tenemos un ingeniero final , tenemos un ingeniero front-end, entonces probablemente este gráfico entonces probablemente este gráfico
habrá cambiado para
tomar en cuenta eso, pero asumió que probablemente solo tenemos una
persona, no lo sé. Tiempo de búfer, búfer explícito se incluye antes del hito de
lanzamiento. Entonces sí, hay que tener
en cuenta que los bichos suceden. Muchas cosas pueden salir mal. A lo mejor no tienes acceso
a la infraestructura. Muchas cosas podrían
pasar en cualquier proyecto, así que hay
que tomarlo en cuenta. Entonces Pro tip, usa el diagrama de Gantt para desafiar las suposiciones y no
solo documentarlas
9. Conclusión: Estamos llegando al
final de este curso. Para el proyecto de clase, tienes que recoger cualquier idea, usar Cloud y dibujar esa IO
para producir dos entregables Tienen que ser
generados íntegramente con Cloud y dibujar ese IO MCP El primer entregable
será un diagrama de arquitectura, tendrá al menos tres capas y una integración externa y comenzará el gráfico con
al menos tres fases con dependencia y la salida como mermaid dot js y renderizadas en un visor Mermaid como
mermaid dot Live Entonces, ¿qué puedes hacer ahora? Ha creado un flujo de trabajo
que comprime horas de planificación en
una sola sesión de enfoque Ahora puedes hacer un diagrama rápido. Se puede convertir una descripción
verbal en minutos de diagrama estructurado. Puede iterar fácilmente, refinar la arquitectura
con indicaciones, sin retrabajo de arrastrar y soltar Puedes planear de extremo a extremo, ir de la arquitectura a la tarea brr abajo al Gant, graficar en una sola sesión, y puedes hacer visibles estas
estimaciones Para que puedas sacar a la superficie suposiciones para que todo el equipo
pueda desafiarlos. Siguiente paso, aplique
este flujo de trabajo a su próximo
inicio de proyecto real antes la
sesión de pizarra, no después Espero que les guste este curso, y nos veamos
en el siguiente curso. Adiós.
David Armendariz
