Skip to content

DEV III

Jump to bottom
PasRP-Theo edited this page May 7, 2025 · 15 revisions

Frontend

🔹 Frontend

Le Frontend représente la partie visible d’un site ou d’une application web, avec laquelle les utilisateurs interagissent. Il comprend le HTML, le CSS et le JavaScript.

🔹 CMS, CRM et ERP

  • CMS (Content Management System) : Permet de gérer facilement le contenu d’un site web (ex : WordPress).
  • CRM (Customer Relationship Management) : Sert à gérer la relation client (ex : Salesforce).
  • ERP (Enterprise Resource Planning) : Outil de gestion intégré des processus d’une entreprise (ex : SAP).

🔹 Préprocesseur CSS

Un préprocesseur CSS est un outil qui étend les fonctionnalités du CSS en permettant l'utilisation de variables, de fonctions, de conditions, etc.
Exemple : Sass, Less.

🔹 Framework CSS

Un framework CSS est une bibliothèque qui facilite la création de mises en page et de styles standardisés.
Exemples : Bootstrap, Tailwind CSS.

🔹 Framework JavaScript

Un framework JS fournit une structure et des outils pour développer plus efficacement des applications web.
Exemples : React, Vue.js, Angular.

🔹 React : DOM Virtuel & Flux/Redux

  • DOM Virtuel : Représentation en mémoire du DOM réel. React utilise cette version virtuelle pour effectuer des mises à jour optimisées.
  • Flux/Redux : Architectures de gestion d’état global. Elles permettent de centraliser et de contrôler les données d’une application React.

🔹 CDN (Content Delivery Network)

Un CDN est un réseau de serveurs répartis géographiquement qui permet de distribuer rapidement des fichiers statiques (CSS, JS, images, etc.) à l'utilisateur.
Il améliore les performances et la disponibilité d’un site.

Résumé - Notions Backend

🔹 Qu’est-ce que le Backend ?

Le Backend est la partie invisible d’un site ou d’une application web. Il gère la logique, les bases de données, les requêtes serveurs, la sécurité et la communication avec le frontend.

🔹 Framework vs Librairie

  • Framework : Fournit une structure complète avec des règles à suivre. Il impose un cadre (ex : Laravel, Django, Express).
  • Librairie : Outil spécifique pour résoudre un problème donné. On l’utilise librement dans le code (ex : jQuery, Lodash).

🔹 Technologies utilisées en Backend

Quelques langages et outils courants :

  • Langages : PHP, Python, Java, JavaScript (Node.js), Ruby, Go.
  • Bases de données : MySQL, PostgreSQL, MongoDB.
  • Serveurs : Apache, Nginx.
  • APIs : REST, GraphQL.

🔹 Gestionnaire de paquet

Un gestionnaire de paquet permet d’installer, de mettre à jour et de gérer les dépendances d’un projet.
Exemples :

  • npm pour Node.js
  • pip pour Python
  • composer pour PHP

🔹 Choix technologique

Choisir une technologie dépend de plusieurs critères :

  • Objectifs du projet
  • Compétences de l’équipe
  • Écosystème et documentation
  • Scalabilité, performance, sécurité
  • Communauté et support

🔹 Stack

Une stack est un ensemble de technologies utilisées ensemble pour développer une application.
Exemples :

  • LAMP : Linux, Apache, MySQL, PHP
  • MERN : MongoDB, Express, React, Node.js
  • Django + PostgreSQL

Résumé - Bases de données

🔹 Opérations CRUD

Les opérations de base sur les données sont regroupées sous l’acronyme CRUD :

  • Create : Ajouter une donnée
  • Read : Lire une donnée
  • Update : Modifier une donnée
  • Delete : Supprimer une donnée

🔹 Schéma Entité-Association

Un schéma Entité-Association (E-A) est un modèle conceptuel qui permet de représenter les entités (objets) d’un système et leurs relations.
Utilisé pour concevoir une base de données relationnelle avant sa mise en œuvre.

🔹 SGBD relationnels

Les Systèmes de Gestion de Base de Données relationnels (SGBDR) utilisent des tables avec des relations (liens entre données).
Exemples : MySQL, PostgreSQL, SQLite, Oracle.

🔹 NoSQL et scalabilité

Les bases NoSQL sont conçues pour gérer de grands volumes de données, souvent non structurées ou semi-structurées.
Caractéristiques :

  • Pas de schéma strict
  • Scalabilité horizontale (ajout de serveurs)
  • Performances élevées pour des cas spécifiques

🔹 Types de SGBD NoSQL

  • Clé-valeur (ex : Redis)
  • Colonnes (ex : Cassandra)
  • Documents (ex : MongoDB)
  • Graphes (ex : Neo4j)

🔹 ORM et ODM

  • ORM (Object-Relational Mapping) : Outil qui fait le lien entre une base relationnelle et des objets dans le code (ex : Sequelize avec Node.js & PostgreSQL).
  • ODM (Object-Document Mapping) : Similaire à l’ORM, mais pour les bases NoSQL (ex : Mongoose avec MongoDB).

🔹 Migrations (Base de données)

Les migrations sont des scripts permettant de versionner et de gérer les modifications de structure de la base de données dans le temps (création/modification de tables, colonnes, etc.).
Elles assurent la synchronisation entre le code et la base de données.

Résumé - Notions sur les API

🔹 À quoi sert une API ?

Une API (Application Programming Interface) permet à deux systèmes logiciels de communiquer entre eux.
Elle expose des fonctionnalités ou des données via des points d’accès (endpoints).

🔹 Types d'API

  • REST : Le plus courant, basé sur le protocole HTTP et les méthodes standards (GET, POST, PUT, DELETE).
  • GraphQL : Permet aux clients de spécifier précisément les données qu’ils veulent.
  • SOAP : Plus ancien, basé sur XML et utilisé surtout dans des environnements d’entreprise.

🔹 Principes REST

  • Utilisation des méthodes HTTP : GET (lire), POST (créer), PUT/PATCH (modifier), DELETE (supprimer).
  • Utilisation de statuts HTTP pour indiquer le résultat (ex : 200, 201, 404, 500).
  • Structure des endpoints claire et hiérarchique (ex : /users/123/posts).
  • Architecture stateless (chaque requête est indépendante).

🔹 Routage dans une API

Le routage permet d’associer des URL à des fonctions ou des contrôleurs qui gèrent les requêtes.
Chaque route utilise une méthode HTTP et peut renvoyer une réponse en JSON, XML, etc.

🔹 Middlewares

Un middleware est une fonction qui s’exécute entre la réception d’une requête et l’envoi de la réponse.
Exemples :

  • Authentification
  • Logger (journalisation)
  • Validation des données
  • Gestion des erreurs

🔹 Gestion des erreurs dans une API

Une API bien conçue doit :

  • Gérer les erreurs côté serveur
  • Retourner des codes d’erreur explicites (ex : 400, 401, 403, 500)
  • Fournir un message clair dans la réponse (message, error, etc.)

🔹 Documentation d’API

La documentation permet aux développeurs de comprendre comment utiliser l’API :

  • Décrire les endpoints disponibles
  • Expliquer les paramètres, réponses, erreurs
  • Fournir des exemples de requêtes

🔹 Introduction à Swagger

Swagger est un outil qui permet de :

  • Documenter automatiquement une API REST
  • Générer une interface utilisateur pour tester les endpoints
  • Créer un fichier standardisé (OpenAPI) pour décrire l’API

Résumé - UX / UI & Design Web

🔹 UX vs UI

  • UX (User Experience) : L’expérience vécue par l’utilisateur lors de l’utilisation d’un produit ou service.
  • UI (User Interface) : L’interface graphique avec laquelle l’utilisateur interagit (boutons, menus, couleurs…).

🔹 Principes fondamentaux de l’UX

  • Comprendre les besoins utilisateurs
  • Créer des parcours intuitifs et accessibles
  • Réduire la friction et les efforts cognitifs
  • Tester et itérer régulièrement

🔹 Heuristiques de Nielsen

10 règles pour améliorer l’utilisabilité, dont :

  • Visibilité de l’état du système
  • Liberté et contrôle utilisateur
  • Cohérence et standards
  • Prévention des erreurs
  • Reconnaissance plutôt que mémorisation

🔹 Loi de Hick

Plus il y a d’options, plus la prise de décision est lente.
➡️ Moins d’options = navigation plus rapide.

🔹 UX Honeycomb (de Morville)

Les qualités d’une bonne expérience utilisateur :

  • Useful (utile)
  • Usable (utilisable)
  • Desirable (désirable)
  • Findable (facile à trouver)
  • Accessible (accessible à tous)
  • Credible (crédible)

🔹 Principes fondamentaux de l’UI

  • Hiérarchie visuelle
  • Contraste
  • Alignement
  • Cohérence
  • Feedback visuel (hover, clic…)

🔹 @media print

Permet de modifier le style pour l’impression :

@media print { body { background: white; color: black; } }

🔹 @media queries

Permettent d’adapter le style d’un site selon la taille de l’écran (responsive design) :

@media (max-width: 768px) { .menu { display: none; } }

🔹 CRAP (Design)

Acronyme pour 4 grands principes fondamentaux du design visuel :

  • Contrast : Distinguer les éléments importants
  • Repetition : Réutiliser les mêmes éléments pour la cohérence
  • Alignment : Bien aligner les éléments pour une lecture claire
  • Proximity : Regrouper les éléments liés ensemble

🔹 Outils de prototypage

Outils couramment utilisés pour créer des maquettes et prototypes interactifs :

  • Figma
  • Adobe XD

🔹 Décomposer une maquette en composants

Étapes pour transformer une maquette en composants réutilisables :

  • Identifier les éléments récurrents (ex : boutons, cartes, en-têtes…)
  • Isoler chaque composant avec ses propres styles et fonctionnalités
  • Structurer l’interface selon une approche design system pour assurer la cohérence globale

Résumé - Testing

🔹 Qu’est-ce que le testing ?

Le testing est l’ensemble des pratiques qui visent à vérifier que le code fonctionne comme prévu et à éviter les régressions lors des évolutions d’un projet.

🔹 Pyramid Testing

Le Pyramid Testing est une stratégie qui recommande d’écrire :

  • Beaucoup de tests unitaires
  • Moins de tests d’intégration
  • Peu de tests End-to-End

👉 Cela optimise la rapidité, la fiabilité et le coût du testing.

🔹 Types de tests

Il existe une grande variété de tests, chacun ayant un objectif précis :

  • Tests unitaires
  • Tests d’intégration
  • Tests fonctionnels
  • Tests End-to-End (E2E)
  • Tests de performance
  • Tests de sécurité
  • Tests exploratoires
  • Tests manuels / automatisés

🔹 Boîte noire vs Boîte blanche

  • Boîte noire : Test sans connaissance du code source. On vérifie uniquement les entrées/sorties.
  • Boîte blanche : Test avec connaissance du code interne (structure, logique…).

🔹 Tests unitaires

Les tests unitaires valident le bon fonctionnement d’une unité isolée de code (fonction, méthode…).

🔹 Tests d’intégration

Les tests d’intégration vérifient que plusieurs composants interagissent correctement entre eux.

🔹 Doublures de test

Outils simulant des parties du code dans un test :

  • Mock : Simule un objet avec des comportements spécifiques.
  • Stub : Fournit des réponses prédéfinies.
  • Spy : Enregistre l’utilisation faite d’une fonction (appel, arguments…).
  • Fake : Remplace une dépendance par une version simple mais fonctionnelle.

🔹 Tests End-to-End (E2E)

Les tests End-to-End simulent un scénario utilisateur complet du début à la fin (ex : remplir un formulaire, valider une commande…).
👉 Utilisés pour tester toute l'application, de l’interface utilisateur jusqu’à la base de données.

🔹 TDD & BDD

  • TDD (Test-Driven Development) : On écrit d’abord les tests, puis le code pour les faire passer.
  • BDD (Behavior-Driven Development) : Variante centrée sur le comportement attendu, souvent en langage naturel (ex : Given / When / Then).

🔹 Outils de test

Quelques outils et concepts utiles :

  • Matchers : Fonctions pour vérifier les valeurs attendues (ex : expect(value).toBe(42))
  • Jest : Framework de test pour JavaScript
  • Mocha/Chai : Outils pour les tests unitaires JS
  • Sinon.js : Pour les mocks, stubs et spies
  • Cypress / Playwright : Pour les tests E2E

🔹 Code coverage

La couverture de code mesure la part du code qui est exécutée par les tests.
👉 Plus le pourcentage est élevé, plus les tests couvrent le projet, mais cela ne garantit pas une qualité suffisante.

Voici un résumé clair et synthétique de la partie "Processus de déploiement" :

🛠️ Le processus de déploiement

  • Mise à disposition d’une application sur un serveur pour qu’elle soit accessible aux utilisateurs (via navigateur, mobile…).

  • Se fait en plusieurs étapes : développement → tests → packaging → staging → production.

🌍 Les environnements

  1. Développement & test : pour les développeurs, base de données limitée.

  2. Acceptance : version stable pour que les analystes/client testent.

  3. Simulation (Staging) : copie presque exacte de la production.

  4. Production : version finale, à manipuler avec prudence.

🚀 Stratégies de déploiement

  • Même serveur : Frontend + API ensemble → simple, mais limité.

  • Serveurs séparés : meilleure performance et scalabilité, mais complexité CORS.

  • Cloud : AWS, Azure, GCP → scalable, sécurisé, nécessite compétences.

  • Conteneurisation : via Docker ou Kubernetes → portabilité et cohérence.

🖥️ Types de serveurs

Critère Dédié Partagé VPS Cloud
Ressources Exclusives Partagées Virtualisées Élastiques
Contrôle Total Limité Élevé Variable
Sécurité Très bonne Moyenne Bonne Élevée (dépend du provider)
Coût Élevé Faible Moyen Variable selon usage
Scalabilité Limitée Faible Flexible Excellente

🔐 Variables d’environnement

  • Stockent des informations sensibles : mots de passe, clés API, etc.

  • Ne jamais mettre ces infos dans le code ou GitHub.

  • Exemple fichier .env :

    DB_HOST=localhost
DB_USER=api_user
DB_PASS=securepassword

🐳 Déploiement avec Docker

  1. Créer un Dockerfile.

  2. Construire l’image (docker build).

  3. Tester localement (docker run).

  4. Pousser sur DockerHub (docker push).

  5. Sur le VPS : docker pull puis docker run.

🔁 Déploiement avec SCP (Angular)

  1. Build de l’application (npm run build --prod → dossier dist).

  2. Transfert via scp :

    scp -r ./dist/my-app-name/* user@ip:/var/www/html

  3. Doit être hébergé sur un serveur web (ex. Nginx).

📌 En résumé

  • Le déploiement, c’est plus qu’un simple upload : c’est un processus structuré.

  • Il faut choisir la bonne stratégie, le bon environnement et le bon outil.

  • Docker et SCP sont deux solutions courantes selon le type d’application.

Voici un résumé structuré du contenu des diapositives concernant GitHub Actions et DevOps :

Développement Informatique III - Concepts DevOps via GitHub Actions

  1. Introduction à DevOps :

    • DevOps vise à améliorer la collaboration entre les équipes de développement et d'opérations.
    • Objectifs : accélérer les déploiements, améliorer la fiabilité, et augmenter la rapidité de réponse aux changements.

  2. Principes fondamentaux de DevOps :

    • Automatisation des processus de tests, déploiement, et surveillance.
    • Intégration Continue (CI) : Automatisation de l'intégration du code et des tests à chaque modification.
    • Déploiement Continu (CD) : Automatisation du déploiement pour des livraisons rapides et fiables.
    • Surveillance continue des performances et réponse rapide aux incidents.

  3. GitHub Actions :

    • Automatisation des workflows directement dans GitHub.
    • Workflows : Séquences de tâches définies dans des fichiers YAML.
    • Actions : Tâches individuelles qui composent un workflow.
    • Runners : Serveurs qui exécutent les workflows.
    • Événements : Déclencheurs comme les pushs, pull requests, etc.

  4. Workflows GitHub Actions :

    • Workflow de base : Déclenchement sur chaque push ou pull request avec des actions comme l'installation de Node.js, l'exécution de tests, etc.
    • Workflow de tests : Exécution de tests unitaires et d'intégration de manière automatisée.
    • Workflow de déploiement : Automatisation du déploiement lors d'un push sur la branche main, y compris l'installation des dépendances et le déploiement sur un serveur de production.
    • Workflow de monitoring : Vérification régulière de la santé de l'application, création d'une issue en cas d'échec.
    • Workflow de sécurité : Exécution de scans de sécurité (ex. OWASP ZAP) à chaque push pour détecter les vulnérabilités.

  5. Résumé :

    • Récapitulation des concepts DevOps et des différents workflows GitHub Actions.

Voici un résumé structuré du contenu des diapositives concernant GitHub Actions et DevOps :

Développement Informatique III - Concepts DevOps via GitHub Actions

  1. Introduction à DevOps :

    • DevOps vise à améliorer la collaboration entre les équipes de développement et d'opérations.
    • Objectifs : accélérer les déploiements, améliorer la fiabilité, et augmenter la rapidité de réponse aux changements.

  2. Principes fondamentaux de DevOps :

    • Automatisation des processus de tests, déploiement, et surveillance.
    • Intégration Continue (CI) : Automatisation de l'intégration du code et des tests à chaque modification.
    • Déploiement Continu (CD) : Automatisation du déploiement pour des livraisons rapides et fiables.
    • Surveillance continue des performances et réponse rapide aux incidents.

  3. GitHub Actions :

    • Automatisation des workflows directement dans GitHub.
    • Workflows : Séquences de tâches définies dans des fichiers YAML.
    • Actions : Tâches individuelles qui composent un workflow.
    • Runners : Serveurs qui exécutent les workflows.
    • Événements : Déclencheurs comme les pushs, pull requests, etc.

  4. Workflows GitHub Actions :

    • Workflow de base : Déclenchement sur chaque push ou pull request avec des actions comme l'installation de Node.js, l'exécution de tests, etc.
    • Workflow de tests : Exécution de tests unitaires et d'intégration de manière automatisée.
    • Workflow de déploiement : Automatisation du déploiement lors d'un push sur la branche main, y compris l'installation des dépendances et le déploiement sur un serveur de production.
    • Workflow de monitoring : Vérification régulière de la santé de l'application, création d'une issue en cas d'échec.
    • Workflow de sécurité : Exécution de scans de sécurité (ex. OWASP ZAP) à chaque push pour détecter les vulnérabilités.

  5. Résumé :

    • Récapitulation des concepts DevOps et des différents workflows GitHub Actions.

Voici un résumé des concepts clés abordés :

  1. Authentification HTTP Basic : Un mécanisme simple d'authentification via un nom d'utilisateur et un mot de passe encodé en Base64. Peu sécurisé, à utiliser uniquement avec HTTPS.

  2. Authentification HTTP Digest : Plus sécurisé que Basic, utilise des hachages pour transmettre les informations d'identification, ce qui empêche l'envoi de mots de passe en clair.

  3. Authentification basée sur les sessions : Couramment utilisée dans les applications web pour maintenir l'état de l'utilisateur via un identifiant de session.

  4. Authentification basée sur les jetons : Souvent utilisée pour les API et applications modernes (comme les SPA). Les jetons (comme JWT) sont envoyés avec chaque requête et permettent une authentification stateless.

  5. JWT (JSON Web Token) : Un standard pour l'authentification basé sur des tokens contenant des informations (encodées en Base64 URL-safe). Ils comprennent un en-tête, un payload et une signature.

  6. OAuth et OpenID Connect : OAuth gère l'autorisation, tandis qu'OpenID Connect ajoute la gestion de l'identité. Ces protocoles sont souvent utilisés ensemble pour des systèmes sécurisés d'authentification et d'autorisation.

  7. Jeton Opaque : Un type de jeton dont le contenu est inintelligible pour le client, et les données sont stockées côté serveur.

Voici un résumé des concepts clés de cette présentation sur les mesures de sécurité en développement informatique :

  1. Injections SQL :

    • Les attaques par injection SQL visent à manipuler des requêtes SQL via des entrées utilisateur pour accéder à des données non autorisées.
    • Pour se protéger, il faut utiliser des requêtes paramétrées et valider les entrées côté frontend.

  2. Renforcement de la sécurité des sessions :

    • La protection des informations sensibles repose sur des cookies sécurisés :

      • HttpOnly : Empêche l'accès aux cookies via JavaScript.
      • Secure : Assure que les cookies sont envoyés uniquement sur HTTPS.
      • SameSite : Contrôle l'envoi des cookies lors de requêtes inter-sites pour prévenir les attaques CSRF.

  3. Cross-Site Scripting (XSS) :

    • Les attaquants injectent des scripts JavaScript malveillants pour voler des informations.

    • Trois types :

      • Reflected XSS : Script exécuté immédiatement via une URL manipulée.
      • Stored XSS : Le script malveillant est stocké sur le serveur et exécuté plus tard.
      • DOM-based XSS : Exploite les manipulations du DOM dans le navigateur.

    • La protection passe par la validation, l'échappement des entrées et l'utilisation de méthodes sécurisées pour manipuler le DOM.

  4. Cross-Site Request Forgery (CSRF) :

    • Une attaque où un utilisateur authentifié est forcé d'exécuter des actions non désirées sur une application.
    • La protection inclut l'utilisation de tokens anti-CSRF, la vérification des en-têtes "Referer" et "Origin", et l'utilisation de l'attribut SameSite pour les cookies.

  5. Autres bonnes pratiques de sécurité :

    • Contrôles d'accès aux ressources via .htaccess, restreindre l'accès aux dossiers, forcer la redirection HTTP vers HTTPS, et appliquer des principes de contrôle d'accès basés sur des rôles (RBAC, ABAC).

Enfin, il est important d'appliquer ces mesures de sécurité dans tous les projets web pour garantir la protection des utilisateurs et des données. Le cours sur l'optimisation des performances web aborde plusieurs stratégies techniques pour améliorer la vitesse de chargement des sites et ainsi l'expérience utilisateur. Voici un résumé des principaux concepts :

  1. Intérêt de l'optimisation :

    • Elle est cruciale pour le SEO, l'expérience utilisateur, l'économie de ressources et la réduction du taux de rebond (Bounce Rate).

  2. Minification :

    • Consiste à supprimer les espaces, commentaires et autres caractères inutiles dans les fichiers pour réduire leur taille.

  3. Hébergement :

    • La performance dépend du type de stockage (SSD recommandé), de la RAM et de la bande passante fournie par le serveur.

  4. Images :

    • Il est important d'optimiser la taille, la qualité et le format des images (JPEG, PNG, GIF, WebP) pour améliorer le temps de chargement. Utiliser le lazy loading pour charger les images uniquement lorsque l'utilisateur en a besoin.

  5. Asynchrone et Scripts :

    • Charger certaines ressources de manière asynchrone pour ne pas ralentir le rendu initial de la page.

  6. Compression Gzip :

    • Cette technique permet de compresser des fichiers comme HTML, CSS et JavaScript jusqu'à 90% pour réduire le poids des fichiers et accélérer les transferts.

  7. Pre-fectching, Pre-loading, Pre-rendering :

    • Ces techniques permettent de précharger ou de pré-rendre des ressources pour améliorer la vitesse de réponse du site. Cela inclut la pré-résolution des DNS ou le pré-chargement de fichiers CSS et autres ressources.

  8. KPI (Key Performance Indicators) :

    • Des mesures comme le taux de rebond, le First Byte, le First Contentful Paint, et d'autres indicateurs clés permettent de mesurer l'efficacité des optimisations.

  9. Outils :

    • Plusieurs outils de test de performance sont mentionnés : Google PageSpeed Insights, Webpagetest, Locust.io (pour tester la charge) et Request Map Generator pour visualiser les requêtes d'une page.

En conclusion, l'optimisation des performances web ne se limite pas à quelques techniques mais englobe une série de stratégies qui peuvent avoir un impact significatif sur la rapidité du site, l'expérience utilisateur et l'empreinte carbone numérique.

Clone this wiki locally