Transcrições
1. Apresentação: Olá, bem-vindo a este diagrama do
curso e estime Like a P with
Glot e row dot IO Eu sou David Armen Daris. Sou líder de engenharia
e arquiteta de software, e passei anos
executando projetos iniciais em que a parte mais difícil não
era o trabalho
em Estava fazendo com que todos se
alinhassem sobre o que realmente
estávamos construindo e
quanto tempo isso levaria Também sou fundador
e CTO da Delta Witz, uma consultoria de software focada
na excelência em engenharia Nesta aula, você
aprenderá a usar clot e o draw IO juntos para passar de uma tela em branco a
um diagrama de arquitetura completo em minutos
e, em seguida, transformar essa
arquitetura em um gráfico GAT com
estimativas e dependências reais Abordaremos quatro coisas. Configurando a
integração do Clots MCP com o Draw IO, solicitando que o Clot gere e refine diagramas de
arquitetura, dividindo sua arquitetura
em tarefas e
fases e gerando e validando fases e gerando e Essa aula foi criada para gerentes de
projeto e líderes
de engenharia. Qualquer pessoa que precise comunicar sistemas
complexos de forma clara e
fazer estimativas confiáveis Você não precisa de nenhuma experiência em
codificação, uma conta Clot e do Ratio, ambos gratuitos
para começar Se você já começou uma placa de espelho em branco
no início de um projeto, sem saber por onde começar, esta aula é para você. Vamos corrigir isso e nos
vemos na primeira aula.
2. Como Claude trabalha com o Draw.io?: Na minha empresa Delta Wt, temos um cliente que
precisa de um aplicativo web de negociação. Então, vamos usar isso
como cenário prático. O problema é declarado assim. Uma rede de varejo precisa de
um aplicativo web em que os clientes tragam dispositivos usados, a equipe os
avalie e o sistema gerencie os
preços e o estoque Então, temos quatro componentes aqui. Temos um frontend
onde temos o portal do cliente e
o painel da equipe Temos os
serviços de back-end, a autenticação, mecanismo de
avaliação, o gerenciamento de
inventário
e, em seguida, temos
a camada de banco de dados, que consiste em armazenamentos
persistentes para registros de dispositivos, preços e usuários, e temos integrações
externas como um gateway de pagamento ou
um Então, qual é a maneira antiga versus a nova maneira
de fazer as coisas? Cada hora gasta diagramando ou
estimando
manualmente a partir do Gut fill é
uma hora não gasta construindo Hoje, temos a nuvem e outras ferramentas de IA
para criar com mais rapidez. Então, por que não usar essas ferramentas de IA para também
diagramar e estimar com mais rapidez? Então, aqui está o que muda
com esse fluxo de trabalho. Da maneira antiga, temos o diagrama
manual Hours of dragon drop, da
nova forma que acabamos solicitar e o diagrama
é renderizado em minutos. À moda antiga,
temos estimativas apenas com base na
intuição e na
experiência passada. Da nova forma, os gráficos de Gantt são derivados de componentes reais da
arquitetura Do jeito antigo, trabalhamos em tudo quando a
arquitetura muda, mas de uma nova forma,
podemos iterar com Glut instantaneamente por meio de um prompt de
acompanhamento Então, o coágulo fala e
desenha Dio de forma nativa. Temos MCP, que significa protocolo de contexto
de modelo, que é a ponte que permite
que o coágulo
grave diretamente no
seu desenho Dio Canvas Você não precisa
copiar e colar e
nenhum manual de uma lata
porque o coágulo gera Assim, ele pode escrever uma estrutura, desenhar XML instantaneamente e, em seguida, dar vida a esse diagrama. Você só precisa
descrever o que
precisa em linguagem simples e depois
refinar com Bond Cada iteração leva alguns segundos, então você pode se manter
no ciclo criativo Claude lida com a marcação
e a parte difícil. Espero que você goste. Nos
vemos na próxima aula.
3. Como ativar o MCP do Draw.io io: Ok, agora
vamos habilitar o conector Draw AO MCP. Então isso é muito, muito fácil. Quando estiver no aplicativo
clot para desktop, acesse
aqui e
clique nas configurações Então você vai para os conectores, e eu
já tenho isso configurado Mas deixe-me removê-lo
e fazer do zero. Basta clicar neste botão
chamado Custom Connector. Você pode nomear isso como
quiser
e, em seguida, colocar a URL
do servidor MCP remoto E é esse
HTTPs mcpw dot IO slash MCP. Portanto, isso permitirá que o Clot acesse o MCP DRO e execute ações Então, adicionamos isso,
e aí está. Essa é a única coisa
que você precisa fazer para habilitar o MCP do IO
4. Como motivar Claude para o diagrama de arquitetura: Agora que temos
o MCP ativado, vamos começar
com a primeira etapa A primeira etapa é solicitar ao
coágulo um diagrama do sistema. Então, vamos descrever o sistema de negociação
em linguagem simples, e o clot gerará um diagrama de arquitetura em camadas
diretamente em seu Dica profissional. Seja específico
sobre as camadas, os atores e os fluxos de dados. Quanto mais
detalhes estruturais você fornecer, mais precisa será a saída. Então, podemos ver isso como
uma série de etapas. A primeira etapa é
escrever um prompt. Vamos
descrever o sistema, os componentes, os
usuários, os fluxos de dados. Seremos o mais
precisos possível. Em seguida, o Cloud
gerará o diagrama
e, em seguida, poderemos refiná-lo Então, vamos para a nuvem
e vamos aqui. E só por uma questão de ordem, vamos criar
um novo projeto. Este projeto será
chamado de Trading Web App. O que você está tentando alcançar? Um diagrama de arquitetura e um gráfico de
subsídio ou uma negociação na web. Ok, ótimo. Então, aqui, você pode, opcionalmente adicionar instruções sobre como
deseja que a IA se comporte Você pode adicionar arquivos para
contextualizar mais, mas não precisamos de
muito contexto. Vamos fazer
isso do zero. Então, vou escrever o prompt aqui. Preciso criar um diagrama de
arquitetura de sistema para um Webo comercial de varejo Crie uma camada, crie um diagrama de
arquitetura de camadas no drawdo com o seguinte Então, atores, os atores
serão o cliente, que é um ator externo, a equipe da loja, que
é um ator interno. Então, essas são as pessoas que
usam nosso aplicativo web, certo? E as camadas. Quais
são as camadas? Bem,
teremos um front-end, o portal do cliente,
o painel da equipe. Oh, eu vou parar com isso. Eu ainda não terminei. Em segundo lugar,
teremos um gateway de API. Que será
um único ponto de entrada para todos os clientes. Teremos
alguns serviços de back-end, o serviço AT, o mecanismo de avaliação, o serviço de inventário Vamos
ter uma camada de dados. Então POSCRS, teremos o banco de dados de crânios PosCRS,
o cache de leitura, caso
precisemos de um e integrações externas. Então, provavelmente, um
gateway de pagamento, queremos um, e algum serviço de notificação, por exemplo, e-mail ou SMS. Os dados seguem para mostrar que queremos que o cliente acesse
o portal do cliente, acesse o gateway da API, acesse o mecanismo de avaliação
e acesse o gateway de
pagamento O que mais queremos mostrar
à equipe,
acessando o painel da equipe, que vai para o API Gateway, que vai para o serviço de
inventário. O serviço de OT fica entre o gateway da API
e todos os serviços da AACN Cor para diferenciar
cada camada e grupo nos serviços Dentro de um contêiner rotulado como serviços
internos. Portanto, nesse prompt,
você também pode usar a ajuda da IA
para gerar esse prompt. Se você tiver mais informações, coloque essas
informações aqui. Se você ainda não sabe quais são as coisas de que
precisará, pode usar a ajuda da IA. Como esse é um caso de uso
muito, muito genérico
, também usei a IA para gerar
esse prompt. OK. Então, agora vamos remover
isso e você pode ver agora que
Claude já está querendo criar o
diagrama a partir do draw dot IO Você pode ver que ele já está
tentando criar aquele XML que eu estava mencionando Vamos clicar em sempre permitir. Como você pode ver, Claude
já está criando o diagrama. Agora temos um diagrama
interativo em que temos os atores, o cliente externo, a equipe da loja,
que é interna. Então, ambos passam por essa camada de
front-end, onde temos o portal do cliente
e o painel da equipe, e todos eles
fazem solicitações para
a camada de gateway de API, onde
temos o único
ponto de entrada para todos os clientes. Portanto, os clientes, nesse caso, serão o aplicativo web para o portal do cliente e o aplicativo web para o painel da
equipe. No back-end, bem, temos os serviços internos, que são os serviços externos. Portanto, pode ser JWT, token
JSON Lap ou O de 2.0, temos o mecanismo de avaliação que fornece os preços comerciais
e temos o serviço de
inventário, que é útil para
o E você também pode ver a camada de dados, que tem
o Posgrs como banco de dados principal, e um cache de leitura para as sessões ou qualquer
outro tipo de E esse mecanismo de avaliação, como você pode ver, está conectado
ao gateway de pagamento Pode ser listrado ou pode
ser uma árvore cerebral. Isso depende, bem, dos processadores de pagamento que você tem disponíveis em seu país e do
serviço de inventário está conectado, desculpe pelo serviço de
notificação. Como você pode ver, as flechas
estão um pouco bagunçadas. Mas você tem a opção de
ir para Open indo dot IO. Então você abre a tinta e aqui você poderá
editar esse diagrama manualmente. No momento, os diagramas
têm esses problemas em que as setas têm especificamente esses problemas em que você
precisa movê-las manualmente, mas isso é depois de
fazer a iteração Então, eu recomendo que você primeiro faça
a iteração
e, em seguida, você pode mover todas essas setas
para que elas não se sobreponham ou talvez essas coisas aparência melhor,
você Portanto, todos esses detalhes podem
ser feitos após a iteração. Isso é exatamente o que
faremos a seguir, a fase refinada.
5. Refinando a arquitetura: Ok, então podemos refinar agora
sem começar de novo. Cada solicitação de acompanhamento
aplica uma mudança de foco, para que você não precise
reconstruir do zero Alguns exemplos em um componente, em um
serviço de detecção de fraudes entre o mecanismo de avaliação e
o gateway de pagamento Também podemos dizer que
reorganize a estrutura, agrupe os
serviços de back-end dentro um contêiner VPC e também
podemos dizer:
Ei, aplique alguns estilos,
use alguns ícones da AWS para Um aviso significa
uma mudança de foco. Essa é a melhor prática. Portanto, mantenha o escopo dos prompts para
que eles possam produzir resultados
mais limpos e previsíveis Vamos coagular, e vamos realmente
fazer um desses Adicione um
serviço de detecção de fraudes entre o mecanismo de avaliação
e o gateway de pagamento Então, vamos usar um sistema de
detecção de fraudes entre o
mecanismo de avaliação e o que era? O gateway de pagamento e
o gateway de pagamento. OK. Vamos ver o que o coágulo
vai fazer. Então, o coágulo
criará um novo diagrama. Portanto, essa é uma das
limitações atuais do MCP. Não vai ser atualizado. Ele não tem um diagrama de
atualização. Ele tem um diagrama de criação. Também podemos ter certeza se acessarmos as configurações, talvez esta. Aqui, você pode ver
nos conectores que ele criou diagramas
e formas de pesquisa Então, essas são as duas únicas
coisas que o NCP fornece. Então, essas são as ferramentas
que o NCP tem. Portanto, não há diagrama de atualização ou
diagrama de exclusão. Vou criar um novo
diagrama do zero. É por isso que eu lhe disse
na última lição
que, ok, reorganize
as setas e todas
essas coisas quando tiver
certeza da essas coisas quando tiver
certeza da Portanto, neste caso,
temos agora a pontuação de risco
de detecção de fraudes. OK. E sim, isso é
um pouco confuso. Mas, novamente, você pode
abrir isso no Dryo e movê-lo para
a arquitetura final Essa é a única
coisa que vai te
levar algum tempo. Essa é a única tarefa
demorada, garantir que essas
setas basicamente não se sobreponham, porque no
momento ela está tentando fazer o possível para ter todo o
diagrama
em um só É por isso que as
setas se sobrepõem. E talvez os blocos também. Ok, então o serviço
de detecção de fraudes foi adicionado ao contêiner de
serviços interno com três novas conexões. O mecanismo de avaliação para a detecção de
fraudes, rotulado como verificação
de risco da transação é pontuado antes de qualquer tentativa
de pagamento A detecção de fraude no gateway de pagamento rotulado como
aprovado só é eliminada se a verificação de risco for aprovada e
a detecção de fraudes do serviço de notificação TRO aciona um
alerta por e-mail ou
SMS quando uma SMS quando uma OK. E também diz que a detecção de fraudes ocorre
a partir de leituras, o que é típico para pesquisas rápidas
de listas de blogs, limites de
taxas e histórico
recente de transações
durante a pontuação de risco Então é assim que iteramos. Espero que você goste.
Tente fazer o mesmo. Mas, por exemplo,
reconhecer a estrutura ou aplicar um estilo e
ver quais são os resultados Mas tenha sempre em mente um
aviso, uma mudança de foco.
6. Extraindo a lista de tarefas: Agora que você tem seu diagrama de
arquitetura, vamos pedir a Claude
que leia a arquitetura Então você não cataloga a
arquitetura manualmente, você pede que a Cloud faça isso. Um prompt transformará seu diagrama
finalizado em uma lista de tarefas
estruturais pronta
para caber no Gent. Então, qual é o prompt da ponte? Está dizendo que, com base no diagrama de
arquitetura, nós apenas construímos, identificamos todos os principais componentes e os
agrupamos em fases de construção. Para cada fase, liste
a tarefa principal e determine quais tarefas estão
bloqueadas por outras. Portanto, ele produzirá o inventário de
componentes. Portanto,
cada serviço e
módulo do diagrama terá uma divisão de tarefas em que
você terá a descoberta, o design, a construção,
o Q, o lançamento. Vamos ver se o
Cloud é capaz de fazer isso. E teremos esse fluxo de dependência, cuja tarefa pode começar
até que outras sejam Então, dica profissional, essa saída se torna a entrada direta para o prompt de Gant da
aula quatro,
portanto, nenhuma formatação é necessária Mas uma coisa a ter
em mente é que quando
colamos quando copiamos e colamos
esse prompt no clot, tentará criar
o diagrama no Mas acho que o DrawIO
não é a ferramenta para fazer isso. Então, na quarta lição, vamos compará-la com outra ferramenta, chamada sereia Mas eu já copiei e
colei esse prompt aqui, e você pode ver que ele está tentando
fazer o diagrama em si Uma, fase dois, fase
três, fase quatro, e a fase um
tem configuração Poscres, configuração
pronta, gateway de
API de serviço
e, em seguida, temos
os serviços principais, as integrações
e
o fortalecimento Então isso é o que ele gerou
porque pensou:
Ei, eu estava fazendo diagramas Provavelmente queremos
outro diagrama, que é um gráfico de Gant, certo? Mas o que realmente
queremos para a lição quatro, quero dizer, se você está de acordo com
este gráfico, então vá em frente. Você pode usá-lo. Mas o que
eu quero usar é isso, a fase um, a fase dois, a fase três
e a fase quatro. Então, vamos usar outro
prompt para gerar isso com um formato
especificado para ajustá-lo ao sereia
7. Criando o gráfico de Gantt: Ótimo trabalho até agora. Agora, temos um diagrama básico do gráfico de
Gantt, mas queremos melhorá-lo Então, vamos solicitar ao
Clot um gráfico de Gantt,
mas específico para mas específico Então, vamos pegar
a lista de tarefas de estrutura que o coágulo produziu
na última lição e vamos
encaixá-la diretamente Portanto, o Clot usará o gráfico
Mermaid JS Gantt com dependências de
duração Portanto, o exemplo de prompt que você pode usar
é usar o
detalhamento de fases e tarefas que você acabou de me fornecer, criar um gráfico GAN no formato
Mermaid JS, assumir um
cronograma de dez semanas e mostrar todas as dependências OK. Então, depois de
fazermos isso, renderizaremos o código que o clot
gerará para nós, que é o código Mermid Assim, podemos colocar isso no Mermaid Live ou em qualquer
outra ferramenta compatível
e, em seguida, podemos
ajustar à medida que o escopo Então, essas são as etapas devolver a saída dos coágulos, obter o código mermid
e renderizar esse código Então, vamos ao coágulo e
vamos colar esse prompt. Então, vou apenas copiar
isso e colar aqui. Então, como você pode ver, ele ainda
está tentando criar um diagrama de E/S de desenho. Portanto, ele está obcecado em fazer
coisas no draw dot IO. Mas eu vou dizer, me dê o código
da sereia em vez disso. Então, vamos ver se agora
Claude faz melhor. Oh, tudo bem. Então, vamos copiar isso. E vamos até Mermaid
e colocá-la aqui em código. Então, agora temos
um erro de sintaxe. Se você tiver uma conta,
poderá fazer esse relatório de IA. Mas vamos copiar
esse erro e colá-lo de volta no pano. Porque o que eu acho
é que não funcionou, tem essa redução. Então, vamos voltar e copiar o código. Na verdade, eu só queria
o código. Então aqui está. Aqui está o gráfico de Gantt, mas isso é melhor, certo Então, vamos expandi-lo. E vamos ver se o
Postgres ainda está configurado,
a configuração pronta e
o serviço OT Isso vai começar
em 26 de abril, certo? E isso pode ser
uma tarefa independente. Depois, você pode usar o esqueleto do
API Gateway e executar o mecanismo de
avaliação e o
serviço de inventário em paralelo Mas depois de fazer
o mecanismo de avaliação, você pode criar o portal do cliente Depois de ter o serviço de
inventário, você pode fazer o painel da equipe. E sim, você pode fazer em paralelo o serviço de
notificação. Paralelamente ao portal do cliente, você pode fazer o serviço de
detecção de fraudes
e, após o serviço
de detecção de fraudes, você pode fazer o gateway de pagamento. E, paralelamente
ao portal
do cliente e à detecção de fraudes, você pode
garantir que tudo seja
protegido com autenticação
e, paralelamente
ao gateway de pagamento, você pode ajustar as regras de
fraude. E depois de
fazer tudo aqui, você pode fazer o teste de fluxo de ponta
a ponta. E, finalmente, você pode fazer o teste de carga
e o dimensionamento. E você pode ver aqui
que você tem as datas. Vai de
26 de abril a 7 de junho. Portanto, este é um plano de construção de dez
semanas para este
aplicativo web de comércio varejista. Então isso é ótimo. Obviamente, você tem
que verificar isso. A IA é apenas um copiloto. Você já viu que ele cometeu alguns erros.
Estava me dando isso. Eu tentei renderizar
isso, com markdown. Mas falhou. Bem,
não falhou. Só que não aparece
tão bem quanto no Merman
that Live Editor Então eu digo, Ei, é o erro. Apenas me dê o código, basicamente, e nós mesmos o
renderizaremos. Ele ainda tentou fazer
o diagrama de criação. Ainda tentou
chamar essa ferramenta. Então, sim. Acabamos de dizer, Ei, me dê aquele
código de jazz para a sereia Tentei renderizar
isso no markdown e depois me deu o código E com esse código,
conseguimos
renderizar o gráfico de Gantt. Então é isso.
Espero que você goste. Estou vendo a próxima lição.
8. Desafie o resultado.: Depois de ter o gráfico de Gantt, lembre-se de que essa é apenas uma estimativa de que a
IA pode cometer erros Um gráfico de Gantt de Claude é
apenas um
ponto de partida, não um Use essa lista de verificação para testá-la
sob pressão antes de
compartilhá-la com as partes interessadas Caminho crítico.
A sequência de tarefas de
bloqueio leva
logicamente ao lançamento Então, se virmos o diagrama, sim, faz muito sentido. Por exemplo, o
teste de carga está no final. Portanto, faz muito sentido
que o teste de carga, por exemplo, ocorra
antes de tudo. Isso faz muito sentido. Dependências, nenhuma tarefa é iniciada antes que sua antecessora
seja concluída Você pode ver, por exemplo, portal
do cliente segue
o mecanismo de avaliação Isso faz sentido para você? Bem, pode fazer sentido para
você, dependendo da equipe. Por exemplo, seu engenheiro de
front-end pode começar isso
desde o início do projeto e começar a simular dados para fazer avanços Então, na verdade, se você
quiser ser muito eficiente, não precisa que o mecanismo de
avaliação seja concluído antes
do portal do cliente Painel de controle de clientes e funcionários, eles podem ser feitos antes que cada serviço
vago seja concluído Mas, novamente, isso
depende do tamanho da sua equipe. Se você tem apenas uma pessoa
trabalhando neste projeto, provavelmente, sim,
isso faz mais sentido. Então esse é o quarto ponto aqui, as suposições
da equipe, o tamanho e a
disponibilidade da equipe são
declarados, não Talvez se disséssemos a Claude: Ei, temos um engenheiro final , temos um engenheiro de front-end, então provavelmente esse gráfico terá mudado para
levar em conta isso, mas presumiu que provavelmente só temos uma
pessoa, eu não sei Tempo de buffer, o buffer explícito é incluído antes do Então, sim, você tem que levar
em conta que os bugs acontecem. Muitas coisas podem dar errado. Talvez você não tenha acesso
à infraestrutura. Muitas coisas podem
acontecer em qualquer projeto, então você deve levar
isso em consideração. Então, dica profissional: use o gráfico de Gantt para desafiar suposições e não apenas
documentá-las
9. Conclusão: Estamos chegando ao
final deste curso. Para o projeto de classe, você precisa escolher qualquer ideia, usar a nuvem e desenhar esse IO
para produzir dois resultados Eles precisam ser
gerados inteiramente com o Cloud e desenhar esse IO MCP. O primeiro resultado
será um diagrama de arquitetura, terá pelo menos três camadas e
uma integração externa e uma integração externa e iniciará o gráfico com
pelo menos três fases com dependência e a saída como
mermaid dot js e renderizado em
um visualizador Mermaid como mermaid dot um visualizador Mermaid como mermaid Então, o que você pode fazer agora? Você criou um fluxo de trabalho
que comprime horas de planejamento em
uma única sessão de foco Agora você pode diagramar rapidamente. Você pode transformar uma descrição
verbal em minutos de diagrama estruturado. Você pode iterar com facilidade, refinar a arquitetura
com instruções, sem precisar arrastar e soltar Você pode planejar de ponta a ponta, ir da arquitetura
à barra de tarefas até o Gant, traçar gráficos em apenas uma sessão e tornar essas
estimativas visíveis Assim, você pode apresentar suposições para que toda a equipe
possa desafiá-las Na próxima etapa, aplique
esse fluxo de trabalho ao próximo
lançamento real do
seu projeto antes da
sessão do quadro branco, Espero que você goste deste curso e nos veremos
no próximo curso. Tchau.
David Armendariz
