Fonctionnement de l'application - Sskiizens/DevSecOps GitHub Wiki

//

Attention, le but de cette partie n'est pas d'entrer dans les détails de chaque ligne de code et d'expliquer ce qu'elles font. Le but est ici que vous appréhendiez le fonctionnement globale de l'application, et que vous aillez une compréhension de la techniques derrière certaines fonctionnalité. Vous ne comprendrez certainement pas tout, le développement étant un métier extrêmement complexe (je ne suis d'ailleurs pas dev je fais cela pour m'amuser sur mon temps libre). Allez fouiller dans les fichiers que j'indique, faites des modifications dans le code pour voir les effets que cela produit et vous pourrez ainsi vous approprier cette application.

//

Nous allons maintenant faire une démonstration de l'application avec des explications sur sur ce qui se passe en frontend/backend sur différentes actions type.

Affichage de la page admin

Imaginons que l'on souhaite simplement ouvrir la page admin, qui, nous le rappelons, affiche les images qui ont été ajoutés précédemment et propose d'effectuer différentes actions dessus. On accède à cette page via l'URL 'http://localhost:3000/admin/products' (vous pouvez remplacer localhost par l'IP qui fait tourner l'application, j'utilise localhost pour faire quelque chose de généralisé):

Le design de cette page se situe au niveau de l'appli frontend et plus précisément dans le fichier 'react-crud/src/admin/Products.tsx'. Ce n'est pas le seul fichier, mais on trouvera dedans celui-ci le code HTML des éléments importants de notre page dans une fonction return():

En ce qui concerne l'affichage des images et de leurs caractéristiques, un appel API à lieu pour récupérer l'ensemble des images. L'appel à également lieu dans le fichier 'react-crud/src/admin/Products.tsx', mais cette fois, c’est la petite partie useEffect() qui réalise cet appel:

N'hésitez pas, entrez l'adresse 'http://localhost:8000/api/products' dans votre navigateur et vous verrez que cela vous retourne l'ensemble de vos images et caractéristiques associées. Le reste de la fonction a simplement pour but de les exploiter correctement et notamment au format json. Cet appel API fait bien sur référence à notre appli admin, et si on va voir les logs de cette dernière on verra l'appel avoir lieu:

Modification d'une image

Pour la modification d'image, on reste dans la partie admin. La mise en forme reste donc identique pour ce qui est de la page principale. Imaginons que l'on souhaite modifier son produit, on va donc cliquer sur le bouton 'edit':

Le code de ce bouton dans le fichier 'react-crud/src/admin/Products.tsx' est:

Le fonctionnement est simple, l'activation de ce bouton va nous rediriger vers l'URL, 'https://localhost:3000/admin/products/**id_image**/edit'. Cet URL, comme les autres, est définie dans le fichier 'react-crud/src/App.tsx':

Ce path est associé au fichier 'react-crud/src/admin/ProductsEdit.tsx', qui va donc gérer notre page d'édition d'image qui ressemble à cela:

On voit que l'on a les champs d'un produit image, avec les données actuels de l'image, cela est lié à la récupération des données associés à l'image qui font suite à l'appuie sur le bouton edit, et donc au fichier 'ProductEdit.tsx':

Le code associé à cette affichage est:

On peut ensuite modifier les champs et y mettre ce que l'on veut pour effectuer une modification. Conservons l'image et appelons notre image 'zz'. On clique sur save et on passe donc à la fonction 'submit' du fichier 'ProductsEdit.tsx':

On voit qu'un appel API est fait avec la méthode 'PUT', ce qui indique une modification. On voit également que l'on définit un body qui contiendra nos informations modifiées. Notre appli admin va donc recevoir l'appel API 'PUT' et effectue la modification, on peut voir que l'action a bien eu lieu dans les logs du conteneur backend de l'appli admin:

Mais il faut maintenant synchroniser la modification avec l'appli Main. C'est ici que rabbitMQ intervient. On va utiliser une sorte de tunnel entre nos 2 applis et l'on va déclencher un triggers pour l'appli opposé avec un nom particulier pour lui indiquer ce qu'elle doit faire, par exemple pour update:

L'appel rabbitmq se fait au niveau de la fonction publish et on voit qu'elle envoie un paramêtre -'product_updated'_. Pour le trigger direction le fichier 'admin/products/producer.py'. Les fichiers producer des applis servent à produire les triggers et les fichiers consumer à les recevoir. Ici on peut voir l'URL unique de notre pika et la connexion qui est établi. La méthode publish va ensuite transmettre la requête reçu dans l'appli Admin, à l'appli Main et avce tous ses composants (header, body...):

Maintenant direction l'appli Main pour voir comment le trigger est reçu. On va aller chercher le fichier 'main/consumer.py' qui on le rappelle va être la réception de l'appel fait précédemment. Ici idem on se connect au tunnel avec notre addresse rabbitMQ comme fait précédemment, mais on va cette fois recevoir l'appel fait et effectuer des actions en fonction du 'content_type'. Comme ici on a envoyé un 'product_updated', la fonction suivante va être activé:

On voit que les données sont récupérées et traités dans la BDD de l'appli admin. Pour s'assurer que c'est bien le cas, il suffit de regarder les logs de l'appli Main et on voit le log de la modification:

Le 'Product Updated' nous confirme que l'action à bien eu lieu. Les logs qui précédent servent pricniaplement pour le debug mais proviennent tous du fichier 'consumer.py' avec notamment les informations de la requête sur la seconde ligne.

On peut maintenant vérifier si la modification à eu lieu sur la page Admin:

Et sur la page Main:

//

Normalement cela devrait suffire à comprendre le reste de l'application. L'ensemble des fonctions, appels API, triggers rabbitMQ ou autre sont basés sur un principe similaire. N'hésitez pas à faire des tests ou autre pour comprendre le fonctionnement de votre application.

//