# Atelier Application Web Nicolas Scherman développeur Fullstack chez [Smart-side](https://www.smart-side.com/en/) ---- # Points d'attention - téléphone - chat GPT --- # Projet Créer une application web de A à Z ---- # Organisation #### groupe de 4 personnes #### Sujet libre ---- # Notation **Organisation**: `4 points` **Commun** : `8 Points` **Backend** : `5 points` **Frontend** : `4 points` **DevOps** : `6 points` ---- Modification des points au cas par cas --- # gestionnaire de fichier Git ---- ## Plateforme de gestion de code source basé sur git - gitLab - gitHub - Bitbucket - Gitea ---- ## Création d'un repository en local `git init` ---- ## Cycle de vie  ---- ## Connaître l'état de la copie locale `git status` ---- ## Ajouter un fichier au système de version `git add <nom_du_fichier>` ---- ### En mode interactif pour ajouter seulement ceux souhaités `git add -i` ---- ### En mode interactif pour ajouter seulement les sous-parties `git add -p` ---- ### Annuler les modifications locales `git checkout -- <nom_du_fichier>` `git restore <nom_du_fichier>` ---- ### Annuler les modifications déjà ajoutées `git reset HEAD -- <nom_du_fichier>` `git restore --staged <nom_du_fichier>` ---- ### Créer une branche à partir de la branche courante `git checkout -b <nom_de_la_branche>` `git switch --create <nom_de_la_branche>` ---- ### Changer de branche `git checkout <nom_de_la_branche>` `git switch <nom_de_la_branche>` ---- ### Mettre de côté ses modifications `git stash` ### Les récupérer `git stash pop` ---- ### Valider localement ses modifications `git commit -m "commentaire de votre commit` ---- ### Pousser ses modifications sur le serveur `git push` ----  ---- ### récupérer les modifications sur le serveur `git pull` ---- ## gitflow  --- # Méthodologie ---- ## Etat de l'art du génie logiciel  ---- ### Choissez une méthodologie et appliquez ses principes cycle V, scrum, kanban etc Cahier des charges - user story ---- ## Cycle en V  ---- ## Scrum  ---- ## Kanban  ---- ### Cadrage et périmètre `Pourquoi et dans quelle mesure faisons nous ce produit/projet ?` ---- ### Expression fonctionnelle du besoin `Quelles sont toutes les règles que le produit/projet doit respecter ?` ---- ### Délais et parties prenantes `À qui et quand rendre compte ?` --- # Qualité du code ---- # manifeste du Software craftmanship ---- Pas seulement des logiciels opérationnels, mais aussi des logiciels bien conçus. ---- Pas seulement l'adaptation aux changements, mais aussi l'ajout constant de valeur. ---- Pas seulement les individus et leurs interactions, mais aussi une communauté professionnelle. ---- Pas seulement la collaboration avec les clients, mais aussi des partenariats productifs. ---- # Symptome d'un code 'sale' ---- ### Manque d'évolution Complexité accidentelle Effet de bord plus importants ---- ### Dépendences Impossible d'utiliser le code déjà existant ailleurs ---- ### Autre Opacité générale du code phase de compréhension plus importante ---- ### KISS Keep It Simple, Stupide ---- ### YAGNI You Ain’t Gonna Need It ---- ### The Boy Scout Rule Laisser le code plus propre qu’à l’arrivé. ---- ### Le nommage On passe 70 % du temps à lire du code et non à en écrire ---- ### DRY Don't repeat yourself ---- ### Les commentaires ``` //if it is a person of legal age and American if (person.age > 21 && person.nationality == AMERICAN) { ... } ``` ---- ### Peut devenir : ``` if(person.isLegalAgeAndAmerican()) { ... } ``` ---- SLA ---- SRP --- # Tests ## FAST ---- ### Fast les tests doivent être rapide pour être lancés régulièrement. ---- ### Independent Pour connaître exactement quel élément pose problème. ---- ### Repeatable Eviter les dépendances implicites pour pouvoir se fier aux tests. ---- ### Self-validating Le résultat doit être visible consultable immédiatement. ---- ### Timely les tests doivent couvrir les différentes possibilités du logiciel. ---- ## Test Driven Development  ---- ## Fake it until you make it ``` public void testMultiplyTwoNumber() { int result = multiply(4, 5); assertEquals(20, result); } ``` ---- ## Code opérationnel ``` public int multiply(int i, int j) { return 20; } ``` ---- ## Triangulation ``` public void testMultiplyTwoNumber_otherCase() { int result = multiply(6, 7); assertEquals(42, result); } ``` ---- ## Code opérationnel ``` public int multiply(int i, int j) { if(i*j == 20) { return 20; } return 42; } ``` ---- ## Obvious implementation ``` public void testMultiplyTwoNumber_otherCase2() { int result = multiply(8, 9); assertEquals(72, result); } ``` ---- ## Code opérationnel ``` public int multiply(int i, int j) { return i * j; } ``` --- # Backend - **4 requêtes** : `2 points` - **1 Architecture** : `3 points` --- # Architectures ---- ## Monolithique ## Model Vue Controller ## N-tiers ---- ## 4Requêtes HTTP - GET - UPDATE - DELETE - PUT --- # Frontend - **4 pages distinctes** : `2 points` - **Responsive design** : `2 points` --- # DevOps - **Continuous integration** : `2 points` - **Continuous deployement** : `2 points` - **Git workflow** : `2 points` ---- ## Continuous integration github Actions, gitlabCI, jenkins ---- ## Continuous deployement Docker, Ansible, Terraform ---- Docker vs Virtual machine  ---- ## Pourquoi docker ?  ---- ## Avantages : - Déployer rapidement. - Gérer des microservices. - Tester des applications dans des environnements isolés à moindre coûts. ---- ## Et les VM ? - tester une application sur - différentes versions d'un OS. - différents OS. - Environnements multi-systèmes. ---- ### La bibliothèque [docker hub](https://hub.docker.com/) ---- ### Télécharger une image `docker pull nginx` ---- ## Lancer un docker `docker run nginx` #### le port ? `docker run 8010:80 nginx` #### en arrière plan ? `docker -d nginx` #### avec un nom ? `docker --name my-name nginx` #### du stockage ? `docker run -v /my/folder/ nginx` ---- ### voir les conteneurs lancés `docker ps` ---- ### Créer sa propre image `docker build` ---- ### Gérer de multiples containers avec Docker compose  docker-compose up --- # Typage statique ---- ### types primitifs number, string, boolean ### types complexes Tableaux, enum, lists ---- ## Erreurs courantes - Mismatched types - NullPointerExceptions ---- ## avantages - Détection en temps réel via l'IDE - Colaboration - Documentation