Transcription
1. Introduction: Bonjour, et bienvenue sur ce schéma de
cours et estimation Like a P with
Glot and row point IO Je suis David Armen Daris. Je suis responsable de l'ingénierie
et architecte logiciel, et j'ai passé des années
à lancer des projets où le plus dur
n'était pas le travail lui-même Il s'agissait de mettre tout le
monde d'accord sur ce que nous étions en train de
construire et sur le temps que cela prendrait. Je suis également le fondateur
et le directeur technique de Delta Witz, une société de conseil en logiciels axée
sur l'excellence en ingénierie Dans ce cours, vous allez
apprendre à utiliser le
caillot et à dessiner des E/S ensemble pour passer d'un canevas vierge à un
schéma d'architecture complet en quelques minutes, puis à transformer cette
architecture en un graphique GAT avec des
estimations et des dépendances réelles Nous aborderons quatre points. Configuration de
l'intégration de Clots MCP avec Draw IO, Clot est invité à
générer et à affiner des diagrammes d'
architecture, décomposer votre architecture
en tâches et en
phases et à générer et valider Ce cours est conçu pour les chefs de projet et les responsables de
l'ingénierie. Toute personne ayant besoin de communiquer clairement sur des systèmes
complexes et de
faire des estimations crédibles. Vous n'avez pas besoin d'expérience en matière de
codage, d'un compte Clot et de Ratio, qui sont
tous deux gratuits
pour démarrer S'il vous est déjà arrivé de commencer un tableau blanc
au début d'un projet, sans savoir par où commencer, ce cours est fait pour vous. Nous allons régler ce problème et nous
vous verrons dans la première leçon.
2. Comment Claude travaille avec Draw.io ?: Dans mon entreprise Delta Wt, nous avons un client qui
a besoin d'une application Web de trading. Nous allons donc utiliser ce scénario
comme scénario pratique. Le problème est énoncé ainsi. Une chaîne de magasins a besoin
d'une application Web dans laquelle les clients apportent des appareils usagés, le personnel les évalue et le système gère les
prix et les stocks Nous avons donc quatre composantes ici. Nous avons un frontend
où se trouvent le portail
client et le tableau de bord
du personnel Nous avons les
services principaux, l'authentification, moteur d'
évaluation, la gestion des
stocks, puis nous avons
la couche de base de données, qui comprend des magasins
persistants
pour les enregistrements des appareils, les prix
et les utilisateurs, et nous avons des intégrations
externes telles qu'une passerelle de paiement ou
un service de notification Quelle est donc l'ancienne méthode par rapport à
la nouvelle ? Chaque heure passée à
schématiser ou à
estimer manuellement à partir de Gut Fill est
une heure non consacrée à la construction Aujourd'hui, nous disposons du cloud et d'autres outils d'intelligence artificielle
pour créer plus rapidement. Alors pourquoi ne pas utiliser ces outils d'IA pour créer des
diagrammes et estimer plus rapidement ? Voici donc ce qui change
avec ce flux de travail. Dans l'ancienne méthode, nous avions le diagramme
manuel Hours of Dragon Drop. La
nouvelle méthode consiste simplement demander et le diagramme
est rendu en quelques minutes. Dans l'ancienne méthode, nous
avons des estimations basées uniquement sur notre
intuition et notre
expérience passée. De la nouvelle façon, les diagrammes de Gantt sont dérivés de composants d'
architecture réels Dans l'ancienne méthode, nous travaillions tout lorsque
l'architecture change, mais d'une nouvelle manière,
nous pouvons itérer instantanément avec Glut via une invite de
suivi Alors Clot parle,
dessine Dio nativement. Nous avons le MCP, qui signifie
Model Context Protocol, qui est le pont
qui permet à un caillot écrire directement dans
votre dessin Dio Canvas Vous n'avez pas besoin de
copier-coller ni de manuel à partir d'un étain,
car le caillot génère Il peut donc écrire une structure, dessiner du XML instantanément, puis
donner vie à ce diagramme. Il vous suffit de
décrire ce
dont vous avez besoin dans un langage simple, puis de l'
affiner avec Bond. Chaque itération prend quelques secondes, ce qui vous permet de rester dans
la boucle créative Claude s'occupe du balisage
et de la partie difficile. J'espère qu'il vous plaira.
Rendez-vous dans la prochaine leçon.
3. Activer le MCP de Draw.io: OK, nous
allons maintenant activer le connecteur Draw AO MCP C'est donc très, très simple. Une fois que vous êtes dans l'application de bureau
Clot, rendez-vous ici et
cliquez sur paramètres. Ensuite, vous passez aux connecteurs, et je l'ai
déjà configuré. Mais laissez-moi le retirer
et le faire à partir de zéro. Cliquez simplement sur ce bouton
appelé Custom Connector. Vous pouvez le nommer
comme vous le souhaitez, puis vous devez saisir
l'URL du serveur MCP distant Et c'est celui-ci HTTPs
mcpw point IO slash MCP. Cela permettra donc à Clot d'accéder
au MCP DRO et d'exécuter des actions Nous ajoutons donc ceci,
et voilà. C'est la seule chose que
vous devez faire pour activer le MCP à partir d'IO
4. Inviter Claude à réaliser le diagramme d'architecture: Maintenant que
le MCP est activé, nous allons
commencer par la première étape La première étape consiste à demander à
caillot un schéma du système. Nous allons donc décrire le système commercial
en langage clair, et clot générera un schéma d'architecture en couches
directement dans votre Canvas Conseil de pro. Soyez précis
en ce qui concerne les couches, les acteurs et les flux de données. Plus vous fournissez de
détails structurels, plus
le résultat est précis. Nous pouvons donc voir cela comme
une série d'étapes. La première étape consiste
à rédiger une invite. Nous allons
décrire le système, les composants, les
utilisateurs, les flux de données. Nous allons être aussi
précis que possible. Cloud
générera ensuite le diagramme, puis nous pourrons l'affiner. Passons donc au Cloud
et allons-y ici. Et juste par souci d'ordre, nous allons créer
un nouveau projet. Ce projet
s'appellera Trading Web App. Qu'est-ce que vous essayez de réaliser ? Un schéma d'architecture et un diagramme de
Gant pour un échange sur le Web. OK, super. Ici, vous pouvez éventuellement ajouter des instructions sur la façon dont
vous souhaitez que l'IA se comporte. Vous pouvez ajouter des fichiers pour
mettre plus de contexte, mais nous n'avons pas besoin de
trop de contexte. Nous allons le
faire à partir de zéro. Je vais donc écrire l'invite ici. Je dois concevoir un schéma d'
architecture système pour un Webo de commerce de détail Veuillez créer une couche, créez un diagramme d'
architecture de couche dans Drawdo avec ce Les
acteurs seront donc le client, qui est un acteur externe, le personnel du magasin, qui
est un acteur interne. Ce sont donc les personnes qui
utilisent notre application Web, n'est-ce pas ? Et les couches. Quelles
sont les couches ? Eh bien, nous allons
avoir une interface, un portail client, un tableau de bord pour
le personnel. Oh, je vais arrêter ça. Je n'ai pas encore terminé. Ensuite, nous allons
avoir une passerelle API. Ce qui sera
un point d'entrée unique pour tous les clients. Nous allons avoir
des services dorsaux, le service AT, le moteur d'évaluation,
le service d'inventaire. Nous allons
avoir une couche de données. Donc, POSCRS, nous allons avoir
la base de données POSCRS skull, le cache de lecture
au cas où nous en aurions besoin des Donc probablement une
passerelle de paiement, nous en voulons une, et un service de notification, par
exemple un e-mail ou un SMS. Les données suivantes montrent que nous voulons que le client accède
au portail client, à la passerelle API, au moteur d'évaluation et à la passerelle de
paiement Que voulons-nous
montrer d'autre au personnel, en accédant au tableau de bord du personnel, qui mène à la passerelle API, qui mène au service
d'inventaire. Le service OT se situe entre la passerelle API
et tous les services AACN Couleur pour différencier
chaque couche et chaque groupe dans les services. À l'intérieur d'un conteneur étiqueté services
internes. Donc, cette invite également, vous pouvez utiliser l'aide de l'IA
pour générer cette invite. Si vous avez plus d'informations, eh bien, vous les
mettez ici. Si vous ne savez pas encore quelles sont les choses dont
vous aurez besoin, vous pouvez utiliser l'IA. Comme il s'agit d'un cas d'utilisation
très,
très générique j'ai également utilisé l'IA pour générer
cette invite. OK. Supprimons maintenant
cela et vous pouvez voir maintenant que
Claude
souhaite déjà créer le
diagramme à partir de Draw Dot IO. Vous pouvez voir qu'il
essaie déjà de créer le XML dont je parlais. Cliquons sur toujours autoriser. Comme vous pouvez le constater, Claude est
déjà en train de créer le diagramme. Nous avons donc maintenant un schéma
interactif dans lequel nous avons les acteurs, le client externe, le personnel du magasin,
qui est un interne. Les deux passent donc par cette couche
frontale où se trouvent portail client
et le tableau de bord du personnel, et tous ces éléments envoient
des demandes à la couche de passerelle API où nous
avons le
point d'entrée unique pour tous les clients. Dans ce cas, les clients
seront donc l'application Web pour le portail client et
l' application Web pour
le tableau de bord du
personnel. Le back-end, eh bien, nous avons les services internes, qui sont les services hors service. Il peut donc s'agir de JWT, JSON Lap token ou de O of 2.0, nous avons le moteur d'évaluation qui donne les prix commerciaux, et nous avons le service
d'inventaire, qui est utile pour
la gestion des stocks Et vous pouvez également voir une couche de données, qui a Posgrs comme base
de données principale, et un cache de lecture pour
les sessions ou tout
autre type de Et
comme vous pouvez le constater, ce moteur d'évaluation est connecté
à la passerelle de paiement. Il peut s'agir d'une rayure ou
d'un arbre cérébral. Cela dépend des processeurs de paiement disponibles dans votre pays, et le
service d'inventaire est connecté,
désolé, au service de
notification. Comme vous pouvez le constater, les flèches
sont un peu embrouillées. Mais vous avez la possibilité d'
accéder à Open indo point IO. Vous ouvrez donc l'encre et vous pourrez ici
modifier ce schéma manuellement. heure actuelle, les diagrammes
présentent ces problèmes lorsque les flèches présentent
spécifiquement des problèmes où vous devez
les déplacer manuellement, mais c'est après avoir effectué
l'itération Je vous recommande donc
d'abord de faire l'itération, puis de déplacer toutes ces flèches
pour qu'elles ne
se chevauchent pas ou peut-être que ces éléments soient plus beaux, vous savez Tous ces détails peuvent donc
être effectués après l'itération. C'est exactement ce que
nous allons faire ensuite, la phase affinée.
5. Affiner l'architecture: D'accord, nous pouvons donc affiner maintenant
sans recommencer. Chaque demande de suivi
applique un changement de focus, vous n'avez
donc pas besoin de
recommencer à zéro. Quelques exemples au niveau d'un composant, d'un
service de détection des fraudes entre le moteur d'évaluation et
la passerelle de paiement. Nous pouvons également dire
réorganiser la structure, regrouper les
services principaux dans un conteneur VPC, et
nous pouvons également dire : «
Hey, appliquez un style,
utilisez des icônes AWS pour
la Une invite signifie
un changement de point de vue. Il s'agit de la meilleure pratique. Veillez donc à ce que
les instructions soient limitées afin produire des résultats plus propres et
plus prévisibles Allons coaguler, et
faisons-en une. Ajoutez un
service de détection des fraudes entre le moteur d'évaluation
et la passerelle de paiement Passons donc à un système de
détection des fraudes entre le
moteur d'évaluation et de quoi s'agit-il ? La passerelle de paiement et
la passerelle de paiement. OK. Voyons ce que va faire
le caillot. Le caillot va donc
créer un nouveau diagramme. C'est donc l'une des
limites actuelles du MCP. Il ne sera pas mis à jour. Il ne possède pas de schéma de
mise à jour. Il dispose d'un diagramme de création. Nous pouvons également être sûrs si nous allons dans les paramètres, peut-être celui-ci. Ici, vous pouvez voir
dans les connecteurs qu'il a créé des diagrammes
et des formes de recherche. Ce sont donc les deux seules
choses que le PCN fournit. Voilà donc les outils
dont dispose le PCN. Il n'y a donc pas de
diagramme de mise à jour ou de suppression de diagramme. Je vais créer un nouveau
schéma à partir de zéro. C'est pourquoi je vous ai dit dans
la dernière leçon que, d'accord, réorganisez les flèches et toutes
ces choses une fois que vous êtes sûr
de la structure finale Dans ce cas, nous
avons donc maintenant le score de risque
de détection des fraudes. OK. Et oui, c'est
un peu foiré. Mais encore une fois, vous pouvez l'
ouvrir dans Dryo et vous pouvez le déplacer pour
l'architecture finale C'est la seule
chose qui va te
prendre du temps. C'est la seule tâche qui
prend beaucoup de temps : s'
assurer que ces
flèches
ne se chevauchent pas, s'
assurer que ces
flèches car à l'heure
actuelle, l'entreprise fait de son mieux pour réunir tous les
diagrammes au même endroit. C'est pourquoi les
flèches se chevauchent. Et peut-être aussi les blocs. OK, le service de
détection des fraudes a donc été ajouté dans le conteneur
des services internes avec trois nouvelles connexions. Le moteur d'évaluation utilisé pour la détection des
fraudes vérification des
risques de la transaction est noté avant toute tentative de
paiement. La détection des fraudes vers la passerelle de paiement étiquetée
approuvée n'est annulée que si le contrôle des risques est réussi et
la détection des fraudes auprès du service de notification (
alerte TRO) déclenche une alerte par e-mail ou SMS lorsqu'une
transaction est signalée OK. Il indique également que la détection des fraudes s'aggrave après
les lectures, ce qui est typique des recherches rapides des listes de blogs
, des limites de taux et l'historique
récent des transactions
lors de la notation des risques C'est ainsi que nous procédons à l'itération. J'espère qu'il vous plaira.
Essayez de faire de même. Mais par exemple,
reconnaître la structure ou appliquer un style et
voir quels sont les résultats. Mais gardez toujours à l'esprit un changement
rapide, un changement d'objectif.
6. Extracting the task list: Maintenant que vous avez votre schéma d'
architecture, nous allons demander
à Claude de lire l'architecture. Vous ne cataloguez donc pas l'
architecture manuellement, vous demandez à Cloud de le faire. Une simple invite transformera votre schéma
fini en liste de tâches
structurelles prête
à être intégrée dans le Gent. Alors, quelle est la question posée par le bridge ? Cela signifie que, sur la base du schéma
d'architecture, suffit de construire, d'identifier tous les composants clés et de les
regrouper en phases de construction. Pour chaque phase, listez
la tâche principale et indiquez les tâches
bloquées par d'autres. Il produira donc l'inventaire des
composants. Ainsi, chaque service et
module figurant dans le schéma comportera
une répartition des tâches par phase au cours de laquelle
vous aurez la découverte, la conception, la construction,
le Q, le lancement. Nous allons voir si
Cloud est capable de le faire. Et nous allons avoir
ces flux de dépendance, dont les tâches peuvent démarrer
jusqu'à ce que les autres soient terminées. Conseil de pro, cette sortie devient l'entrée directe de votre invite Gant de la quatrième
leçon, aucun formatage n'est
donc nécessaire. Mais une chose à garder
à l'esprit est que lorsque nous collons
cette invite dans Clot,
Clot essaie de créer
le diagramme dans Mais je pense que DrawIO
n'est pas l'outil pour le faire. Dans Lasson 4, nous allons donc comparer
à un autre outil, qui s'appelle Mermaid Mais j'ai déjà copié et
collé cette invite ici, et vous pouvez voir qu'elle essaie de
créer le diagramme lui-même. La première phase, la phase deux, la phase
trois, la phase quatre, et la première
phase concerne la configuration,
la passerelle
API de service de Poscres , puis nous avons
les services de base, les intégrations
et le C'est donc ce qu'il a généré
parce qu'il s'est dit
: « Hé, je faisais des diagrammes ». Nous voulons probablement
un autre diagramme, qui est un diagramme de Gant, n'est-ce pas ? Mais ce que nous
voulons vraiment pour la quatrième leçon, c'est que si vous êtes d'accord avec
ce tableau, alors allez-y. Tu peux t'en servir. Mais ce que
je veux utiliser, c'est la phase un, la phase deux, la phase trois
et la phase quatre. Nous allons donc utiliser une autre
invite afin de le générer avec un format spécifié afin de l'adapter à Mermaid
7. Créer le diagramme de Gantt: Excellent travail jusqu'à présent. Nous avons maintenant un diagramme de
Gantt de base, mais nous voulons l'améliorer Nous allons donc demander à
Clot un diagramme de Gantt, mais spécifique Nous allons donc prendre
la liste des
tâches de structure produite par le caillot
au cours de la dernière leçon, et nous allons
l'intégrer directement Clot utilisera donc le diagramme de Gantt
Mermaid JS avec dépendances de
durée et un
séquençage déjà intégrés L'exemple d'invite que vous pouvez utiliser utilise la
répartition des phases et des tâches que vous venez de me donner, crée un graphique GAN au format
Mermaid JS, suppose un
calendrier de dix semaines et montre toutes les dépendances entre les tâches OK. Après cela,
nous allons afficher le code que le caillot
va générer pour nous, et c'est le code Mermid Nous pouvons donc l'intégrer à Mermaid Live ou à tout
autre outil compatible, puis nous pouvons le
peaufiner au fur
et à mesure de l'évolution du champ d'application Voici donc les étapes renvoyer la sortie des caillots,
récupérer le code mermid
et afficher ce code Passons donc à la coagulation et
collons cette invite. Je vais donc simplement le copier
et le coller ici. Comme vous pouvez le constater, il
essaie toujours de
créer un diagramme d'E/S de dessin. Il est donc obsédé par le fait de faire
des choses dans Draw Dot IO. Mais je vais le dire, donne-moi plutôt
le code de la sirène. Voyons donc si
Claude le fait mieux maintenant. Oh, d'accord. Copions donc ceci. Et allons voir Mermaid
et mettons-le ici en code. Nous avons donc actuellement
une erreur de syntaxe. Si vous avez un compte,
vous pouvez créer ce rapport AI. Mais allons copier
cette erreur et la
coller à nouveau sur le tissu. Parce que ce que je pense,
c'est que ce n'est pas le cas, il y a cette réduction. Alors revenons en arrière, copiez le code. En fait, je voulais juste
le code. Alors voilà. Voici le diagramme de Gantt, mais c'est mieux, non ? Développons-le donc. Et voyons si le
Postgres est toujours configuré, qu'il est prêt à être configuré et que
le service OT
est Cela va commencer
le 26 avril, non ? Et il peut s'agir de tâches
indépendantes. Ensuite, vous pouvez utiliser le squelette
d'API Gateway, et vous pouvez exécuter le moteur d'
évaluation et le
service d'inventaire en parallèle. Mais après avoir créé
le moteur d'évaluation, vous pouvez créer le portail client. Une fois que vous avez le service
d'inventaire, vous pouvez créer le tableau de bord du personnel. Et oui, vous pouvez faire en parallèle le service de
notification. Parallèlement au portail client, vous pouvez effectuer le service de
détection des fraudes, et après le service de
détection des fraudes, vous pouvez créer la passerelle de paiement. Parallèlement au portail
client et
à la détection des fraudes, vous pouvez vous assurer tout protéger
grâce
à l'authentification, et parallèlement à
la passerelle de paiement, vous pouvez ajuster les règles de
fraude. Ensuite, une fois que vous
avez tout fait ici, vous pouvez effectuer des tests
de flux de bout en bout. Et en fin de compte, vous pouvez effectuer les tests de charge
et la mise à l'échelle. Et vous pouvez voir ici
que vous avez les dates. Elle a lieu du
26 avril au 7 juin. Il s'agit donc d'un plan de développement de dix
semaines pour cette
application Web de commerce de détail. Donc c'est génial. De toute évidence, vous
devez vérifier cela. L'IA n'est qu'un copilote. Vous avez déjà vu qu'il comportait des erreurs. C'
était en train de me donner ça. J'ai essayé de le rendre
, avec Markdown. Mais cela a échoué. Eh bien,
cela n'a pas échoué. C'est juste que ça ne s'affiche pas aussi bien que dans le Merman That
Live Editor Alors je le dis, Hey is the error. Donnez-moi simplement le code, gros, et nous le
rendrons nous-mêmes. Il a quand même essayé
de créer le diagramme. Il a quand même essayé d'
appeler cet outil. Donc oui. Nous venons de lui dire
: « Hé, donne-moi le code
Mermaid That Jazz J'ai essayé de
le rendre dans le markdown, puis de me donner le code Et avec ce code,
nous avons pu
afficher le diagramme de Gantt Alors c'est tout. J'
espère qu'il vous plaira. À voir la prochaine leçon.
8. Challenge the result: Une fois que vous avez le diagramme de Gantt, n'oubliez pas qu'il ne s'agit
que d'une estimation de la capacité de l'
IA à commettre des erreurs Un diagramme de Gantt de Claude
n'est qu'un
point de départ, pas un évangile Utilisez cette liste de contrôle pour la tester sous pression avant de la
partager avec les parties prenantes Voie critique.
La séquence de tâches
bloquantes conduit-elle
logiquement au lancement ? Donc, si nous voyons le schéma, oui, cela a beaucoup de sens. Par exemple, le
test de charge est terminé. Il est donc tout à fait logique
que les tests de charge, par
exemple, passent
avant tout le reste. C'est tout à fait logique. Dépendances, aucune tâche ne commence avant que son prédécesseur ne
soit terminé. Vous pouvez voir, par exemple, portail
client s'en prend
au moteur d'évaluation. Est-ce que cela a du sens pour toi ? Eh bien, cela peut avoir du sens pour
vous en fonction de l'équipe. Par exemple, votre ingénieur
frontal peut commencer cela
dès le début du projet,
et il peut commencer à se moquer des données afin de réaliser des avancées Donc, en fait, si vous
voulez être très efficace, vous n'avez pas besoin que le moteur d'
évaluation soit terminé avant
le portail client. bord des clients et du personnel, elles peuvent être effectuées avant la fin de chaque service
vacan Mais encore une fois, cela
dépend de la taille de votre équipe. Si vous n'avez qu'une seule personne
qui travaille sur ce projet, alors probablement, oui,
cela a plus de sens. C'est donc le quatrième point, les hypothèses, la taille de l'équipe et la disponibilité sont
énoncées, et non implicites. Peut-être que si nous disions à Claude : « Hé, nous avons un ingénieur final, nous avons un ingénieur frontal, alors ce tableau
aura probablement changé pour
tenir compte de cela, mais il partait du principe que nous n'avons
probablement qu'une seule
personne, je ne sais pas. Durée de la mémoire tampon, une mémoire tampon explicite est incluse avant le jalon de
lancement. Donc oui, il faut tenir
compte des bugs qui se produisent. Beaucoup de choses peuvent mal tourner. Vous n'avez peut-être pas accès
à l'infrastructure. Beaucoup de choses peuvent
se produire dans n'importe quel projet, il faut
donc
en tenir compte. Conseil de pro : utilisez
le diagramme de Gantt pour remettre en question hypothèses et pas
simplement pour les documenter.
9. Conclusion: Nous arrivons à la
fin de ce cours. Pour le projet de classe, vous devez choisir n'importe quelle idée, utiliser le cloud et dessiner cette E/S
pour produire deux livrables Ils doivent être entièrement
générés avec le Cloud et dessiner cet IO MCP. Le premier livrable
sera un diagramme d'architecture,
comportant au moins trois couches et
une intégration externe et commençant par un graphique comportant
au moins trois phases avec dépendance et le résultat sous forme point de
mermaid js et rendu dans un visualiseur Mermaid tel
que Mermaid Alors, que peux-tu faire maintenant ? Vous avez créé un flux de travail
qui compresse heures de planification en
une seule session thématique. Vous pouvez désormais créer des diagrammes rapidement. Vous pouvez transformer une description
verbale en minutes sous forme de diagramme structuré. Vous pouvez facilement itérer, affiner l'architecture à l'
aide d'instructions,
sans aucune retouche par glisser-déposer Vous pouvez planifier de bout en bout, passer de l'architecture à la tâche en passant par le Gant, graphique en une seule session et rendre ces
estimations visibles Vous pouvez ainsi faire ressortir des hypothèses afin que toute l'équipe
puisse les remettre en question. Étape suivante, appliquez
ce flux de travail au lancement de
votre prochain projet réel avant la
session de tableau blanc, et non après celle-ci J'espère que ce cours vous plaira, et nous nous verrons
lors du prochain cours. Au revoir
David Armendariz
