Cours 1 Généralités sur le développement web PDF

16/10/2024 Que veut-on dire par « Technologies de la programmation Web »? Faculté de génie électrique et informatique M2 : SI? CPI  Les technol...

16/10/2024 Que veut-on dire par « Technologies de la programmation Web »? Faculté de génie électrique et informatique M2 : SI? CPI  Les technologies de programmation web évoluent constamment, et il existe un large Département d’informatique Année : 2024/2025 Module : Technologies de la programmation Web éventail d'outils et de technologies utilisés pour développer des applications web. Technologies traditionnelles : Technologies de la programmation Web 1. HTML (HyperText Markup Language) : Langage de balisage utilisé pour structurer le contenu et la présentation des pages web. Pré requis : 2. CSS (Cascading Style Sheets) : Utilisé pour styliser et mettre en forme les éléments HTML en  HTML définissant le style, la mise en page et l'apparence des pages web.  CSS 3. JavaScript : Langage de programmation côté client (et côté serveur) qui permet d'ajouter de  JavaScript l'interactivité et de la dynamique aux pages web. Responsable du module : Mme Bousnina Lila Technologies modernes : Technologies traditionnelles (suite) : 1. React : Bibliothèque JavaScript pour la création d'interfaces utilisateur interactives et dynamiques. 4. PHP : Langage de script côté serveur couramment utilisé pour créer des applications web 2. Angular : Framework JavaScript développé par Google pour créer des applications web monopage dynamiques. (SPA) complexes. 5. ASP.NET : Framework de développement web de Microsoft utilisé pour créer des applications 3. Vue.js : Framework JavaScript progressif pour la création d'interfaces utilisateur interactives. web robustes et évolutives. 4. Node.js : Plateforme JavaScript côté serveur basée sur le moteur V8 de Google, permettant d'exécuter du 6. Java : Langage de programmation couramment utilisé avec des frameworks tels que Servlets et code JavaScript côté serveur. JSP pour le développement web côté serveur. 5. Express.js : Framework Node.js pour la création d'applications web côté serveur. 7. Ruby on Rails : Framework Ruby pour le développement rapide d'applications web. 6. Sass (Syntactically Awesome Stylesheets) : Extension de CSS qui ajoute des fonctionnalités comme les 8. Python : Langage de programmation polyvalent souvent utilisé dans le développement web avec variables, les mixins et les boucles. 7. Webpack : est un outil puissant pour les développeurs qui travaillent sur des applications web complexes, des frameworks comme Django et Flask. leur permettant de gérer efficacement le code, d'améliorer la performance et de faciliter le flux de 9. SQL (Structured Query Language) : Langage utilisé pour interagir avec les bases de données travail, couramment utilisé dans les frameworks front-end. relationnelles.  16/10/2024 Motivation : Technologies modernes (suite) : Développeur web, salaire selon le niveau d’expérience 8. GraphQL : est un langage de requêtes et un environnement d'exécution côté serveur pour les API qui Entre 35 000 € et 60 000 € brut par an, soit entre 2 900 € et 5 000 € bruts par mois. s'attache à fournir aux clients uniquement les données qu'ils ont demandées, et rien de plus. 9. Docker : Plateforme de conteneurisation qui facilite le déploiement et la gestion des applications. Les Développeur front end : conteneurs sont des environnements légers et isolés qui embarquent toutes les dépendances nécessaires à  Débutant : entre 35 000 € et 47 000 € bruts par an. une application (bibliothèques, configurations, etc.) pour qu'elle puisse fonctionner de manière cohérente  Confirmé (3 à 6 ans d’expérience) : entre 48 000 € et 60 000 € bruts par an. sur n'importe quel système.  Senior : plus de 60 000 € bruts par an. 10. MongoDB : Base de données NoSQL populaire utilisée pour stocker des données sous forme de Développeur web back end : documents JSON. 11. Firebase : Plateforme de développement d'applications mobiles et web de Google, offrant divers  Débutant (1 à 3 ans) : entre 40 000 € et 47 000 € bruts par an ; services tels que l'authentification, la base de données en temps réel, le stockage, etc.  Confirmé (3 à 6 ans) : entre 48 000 € et 60 000 € bruts par an ;  Senior (+ 6 ans) : + 60 000 € bruts par an. Full stack salaire : le mieux rémunéré Le salaire d’un développeur freelance  Débutant : entre 38 000 € et 42 000 € bruts par an, soit entre 3 100 € et 3 500 €  Junior perçoit environ 300 € par jour, tandis qu’un développeur freelance senior peut bruts par mois. Entre 1 à 3 ans d’expérience, il est toujours considéré comme toucher jusqu’à 550 € ou plus par jour. junior. Toutefois, son salaire évolue entre 42 000 € et 50 000 € bruts par an.  Après plus de 3 ans d’expérience, le salaire d’un développeur full stack est entre 50 Développeur web, Pourquoi exercer ce métier ? 000 € et 65 000 € bruts par an (soit entre 4 100 € et 5 400 € bruts par mois).  Au-delà de 6 ans d’expérience et avec toutes les connaissances et compétences qu’il  Pénurie en développement web  le salaire du développement web est très attractif. possède, son salaire brut annuel devient supérieur à 65 000 € (et varie selon le  L’évolution constante des technologies  apprendre tous les jours. budget de son entreprise.  Le télétravail se démocratise.  16/10/2024 Le développement web Faculté de génie électrique et informatique M2 Département d’informatique Année : 2023/2024 Module : Technologies de la programmation Web  Le développement web correspond à l’ensemble des tâches liées à la création et la gestion d’un site web. Généralités sur le  Cela peut inclure la conception et le codage du site, la création et la gestion du contenu, la maintenance, etc. développement web  Les tests constituent également une partie importante du développement d’un site car ils permettent de s’assurer que ce dernier fonctionne correctement et que tout le contenu est exact et à jour.  La mission principale d’un développeur web consiste à créer des sites web visuellement attrayants, accessibles et optimisés pour les moteurs de recherche. Responsable du module : Mme Bousnina Lila 9 Le front end développeur : travaille sur ce que l’internaute voit Un expert UX (eXpérience Utilisateur) :  Le développeur front end a pour mission de programmer l’ensemble des éléments visibles par les Est un professionnel spécialisé dans la conception et l'amélioration de l'expérience utilisateurs/visiteurs d’un site web ou d’une application mobile. globale que les utilisateurs ont lorsqu'ils interagissent avec un produit, un service ou un  Il s’occupe donc de l’interface graphique et de l’ergonomie. système.  Son objectif est d’offrir aux utilisateurs une expérience satisfaisante. L'objectif principal d'un expert UX est d'optimiser la satisfaction, l'efficacité, la  Il crée et met en place les éléments graphiques qui leur permettront de se retrouver sur facilité d'utilisation et la valeur globale que les utilisateurs tirent de leur expérience. l’interface et de la prendre facilement en main.  Ce programmeur intervient aussi bien sur la mise en page que sur les boutons, les menus Les experts UX peuvent travailler dans divers domaines tels que les applications déroulants, les formulaires ou les liens internes. mobiles, les sites web, les logiciels, les produits matériels, les systèmes embarqués et  Son travail comprend également la gestion du responsive design, des animations et des plus encore. interactions. Ils jouent un rôle crucial dans la réussite d'un produit en veillant à ce qu'il réponde aux  En outre, le développeur front end collabore étroitement avec au moins un webdesigner et besoins et aux désirs des utilisateurs de manière efficace, agréable et intuitive. idéalement un expert ux.  16/10/2024 Les frameworks et bibliothèques front end Les langages utilisés en front end : Pour améliorer leur efficacité, les développeurs front end se reposent sur les frameworks. Ce Les langages front end principaux sont : sont des squelettes de code pré-écrit dans lesquels ils introduisent du codage spécifique au  HTML : ce langage permet de créer et d’organiser le contenu web de manière claire domaine pour aller plus vite. Parmi les frameworks front end les plus utilisés, nous avons : (polices, couleurs, etc.) ;  Bootstrap ;  CSS : il complète les fonctions du HTML et organise la présentation des pages ;  React.JS.  Javascript : il sert à insérer des éléments interactifs tels que les menus déroulants et les  Angular JS ; formulaires contacts pour dynamiser les pages. Les programmeurs se servent aussi des bibliothèques ; il s’agit de paquets de code pré-écrit qu’ils peuvent insérer dans leur propre code. jQuery et LESS sont les bibliothèques front end. Le back end développeur : travaille sur ce que l’internaute ne voit pas Les langages de programmation utilisés en back end  Le développeur web back end s’occupe de la mise en place de l’application web.  PHP : c’est un langage de script côté serveur utilisé dans le développement web ;  Il devra dans cette optique concevoir toutes les fonctionnalités qui permettront au site  Java : c’est un langage de programmation, il peut être exécuté sur toutes les de fournir les informations demandées à l’utilisateur. plateformes compatibles avec ce type de langage ;  Son travail inclut également les éléments suivants :  Python : c’est un langage puissant, complet et très démocratisé. Il est idéal pour  La communication entre les serveurs et les applications par le biais d’interfaces de l’écriture de scripts et le développement d’applications sur la plupart des programmation d’applications (API) ; plateformes ;  La logique back-end ;  C++ : il est très utilisé pour la programmation concurrentielle.  La conformité aux politiques d’accessibilité et de sécurité.  16/10/2024 Fonctionnement du web Les frameworks et bibliothèques back end Pour les mêmes raisons de coût, rapidité et rentabilité que le développeur front end, le développeur back end utilise aussi des frameworks. Parmi les plus populaires, on peut citer :  NodeJs; Environnement d’exécution Javascript  Laravel; framework PHP  Symfony ; framework Python  Django ;  Ruby on Rails ; framework Rail, Langage Ruby Fonctionnement du web : liens entre le back end et le front end (2) Fonctionnement du web : liens entre le back end et le front end (3)  Pour relier le backend (côté serveur) et le frontend (côté client) d'une application web, vous avez plusieurs options en fonction des technologies que vous utilisez : 1. Intégration directe : Parfois, le frontend est directement intégré dans le backend, notamment dans les applications monolithiques. Dans ce cas, le backend génère le HTML, les vues et les templates directement et les envoie au navigateur. Cependant, cette approche n'est pas aussi évolutive ou modulaire que l'utilisation d'une API.  16/10/2024 Fonctionnement du web : comment séparer le back end du front end ? Fonctionnement du web : liens entre le back end et le front end  Casser les liens 4 et 5,  Et mettant en place une couche intermédiaire : l’api Fonctionnement du web : liens entre le back end et le front end Fonctionnement du web : liens entre le back end et le front end 2. Utilisation d’API :  16/10/2024 Fonctionnement du web : liens entre le back end et le front end C'est quoi une API ?  L’API cache ce qui se passe en back end, le front end (l’application qui va  Une API (Application Programming Interface) est un ensemble de règles, protocoles et interagir ou consommer cette api et non pas un utilisateur comme pour l’interface outils qui permettent à différents logiciels ou applications de communiquer entre eux, utilisateur) ne sait rien de ce qui se passe en back end, il ne voit que l’API. en offrant une interface aux développeurs.  API Web : Les API Web permettent la communication entre des applications via Internet. Elles sont souvent basées sur des protocoles comme HTTP et peuvent retourner des données dans différents formats, tels que JSON (JavaScript Object Notation) ou XML (eXtensible Markup Language). API REST : Utiliser une API REST est l'une des méthodes les plus courantes pour relier 3. Bibliothèques et frameworks : De nombreux frameworks frontend, tels que le back end et le front end. Dans ce scénario, le back end expose des points de React, Angular, ou Vue.js, intègrent des fonctionnalités pour faciliter la terminaison (end points) via HTTP, généralement en utilisant des méthodes telles que communication avec le backend, telles qu'Axios (pour les requêtes HTTP) ou des GET, POST, PUT et DELETE pour permettre au front end d'envoyer des requêtes et de fonctions natives comme fetch() en JavaScript pour interagir avec le backend. recevoir des réponses au format JSON ou XML. Le front end peut ensuite consommer ces données pour afficher le contenu de l'application.  16/10/2024 Exemple d’API HTTP : JSONPlaceholder est un service en ligne REST gratuit que vous pouvez utiliser pour Les requêtes HTTP tester votre code et vos prototypes. https://jsonplaceholder.typicode.com/  L’interaction entre le frontend et le backend des sites web est rendue possible par les requêtes HTTP.  Elles sont utilisées pour demander des ressources telles que des pages web, des images, des fichiers, des données JSON ( à des API) Interface de JSONPlaceholder Les routes ou les points de terminaison Outils de test et d’interaction d'API : Les ressources fournis par (end points) fournis par  Avant d’utiliser JavaScript pour interagir avec les API HTTP, on doit comprendre le JSONPlaceholder JSONPlaceholder fonctionnement des requêtes HTTP à travers des outils (API client). Les plus populaires que vous pouvez utiliser sont : 1.Postman : Postman est un outil très populaire pour tester les API. Il vous permet de créer, envoyer et gérer des requêtes HTTP, ainsi que de collecter et 1.Insomnia : Insomnia est un autre client RESTful d'organiser des réponses. Postman offre qui facilite la création et le test de requêtes HTTP. Il également des fonctionnalités de test dispose de fonctionnalités de gestion de automatisé et de documentation d'API. l'environnement et de génération de code.  16/10/2024 Interface de Postman : Structure générale d’une requête HTTP Exemple 1: Exemple 2:  16/10/2024 Le contenu d'une requête HTTP Le contenu d'une requête HTTP (2) 2. Champ d'en-tête de la requête (HEADERS) 1. URL (Uniform Resource Locator) :  Les lignes de champs d’en-tête permettent de préciser la demande qui a été initiée par Une URL est utilisée pour spécifier l'emplacement de la ressource sur le serveur. Une URL typique comprend le protocole (http:// ou https://), le nom de domaine (par exemple, la ligne de requête en donnant des indications supplémentaires. Ces précisions sont www.example.com), le chemin de l'URL (PATH PARAMS), et éventuellement des paramètres définis sous format JSON (key: value) de requête (QUERY PARAMS).  Ces lignes de code permettent notamment de donner des informations sur le :  Type de navigateur utilisé (Chrome, Firefox, etc.) par exemple : User-Agent: Mozilla/5.0 Exemple d'URL : https://www.example.com/page1?param1=value1&param2=value2 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) protocole nom de domaine QUERY PARAMS Chrome/80.0.3987.132 Safari/537.36  Le type de contenu accepté par exemple : Accept-Charset: utf-8, https://jsonplaceholder.typicode.com/posts/1  Les informations d'authentification (token), etc…par exemple : Authorization :Bearer PATH PARAMS  Date et heure de la demande par exemple : Date: Mon, 9 March 2020 09:02:22 GMT Le contenu d'une requête HTTP (4) Le contenu d'une requête HTTP (3) PUT (Mise à jour complète) : PATCH (Mise à jour partielle) : Méthodes HTTP (ou type de requête) : 3. Corps de la requête : Certaines méthodes HTTP, comme POST et PUT, incluent un Les requêtes HTTP utilisent différentes méthodes pour spécifier l'action que le client souhaite corps de requête. Ce corps peut contenir des données au format JSON, XML, ou d'autres effectuer sur une ressource, les plus utilisées sont GET POST PUT PATCH DELETE. formats, en fonction de l'application. Les opérations CRUD : Nous pouvons faire usage de ces différentes méthodes HTTP pour demander des données. Nous pouvons créer, lire, mettre à jour et supprimer (Create Read Update Delete ou CRUD) des données sur les serveurs en utilisant des verbes HTTP dédiés comme POST, GET, PUT/PATCH et DELETE. Dans les TPs, vous apprendrez les différentes façons de faire des requêtes HTTP à des serveurs distants et d’effectuer des opérations CRUD en JavaScript.  16/10/2024 Le contenu d'une réponse HTTP Codes de statut HTTP :  Une réponse HTTP comprend plusieurs éléments, qui fournissent des informations sur  Les réponses renvoyées par le serveur sont généralement associées à des codes d’état. le résultat de la requête effectuée par le client. Les éléments clés d'une réponse HTTP  Le code de statut est un nombre à trois chiffres.  Ces codes nous aident à comprendre ce que le serveur essaie de dire lorsqu’il reçoit une requête. sont les suivants :  Ligne de statut HTTP : La première ligne d'une réponse HTTP contient le code de Voici quelques-uns d’entre eux (les plus courants) et leur signification : statut HTTP, suivi d'une brève description. Par exemple, "HTTP/1.1 200 OK" 100-199 : dénote une réponse informative. signifie que la requête a été réussie, tandis que "HTTP/1.1 404 Not Found" indique 200-299 : dénote une requête réussie. que la ressource demandée n'a pas été trouvée.  200 OK : La requête a réussi, et la réponse contient les données demandées.  201 Created : La requête a réussi, et une nouvelle ressource a été créée.  204 No Content : La requête a réussi, mais la réponse ne contient pas de corps. Code de statut HTTP (2) : En-têtes de réponse : 300-399 : dénote une redirection.  Les en-têtes de réponse fournissent des informations supplémentaires sur la réponse et sa 400-499 : dénote une erreur du client. gestion.  400 Bad Request : La requête du client est mal formulée ou invalide.  Ils peuvent inclure des détails sur le serveur, le type de contenu renvoyé, les cookies, la date de  401 Unauthorized : L'accès à la ressource est refusé en raison d'un manque la réponse, les informations de sécurité, etc. d'authentification. Par exemple :  403 Forbidden : L'accès à la ressource est refusé pour des raisons autres que  Content-Type : Indique le type de contenu du corps de la réponse (par exemple, l'authentification. application/json ou text/html).  404 Not Found : La ressource demandée n'a pas été trouvée.  Server : Indique le serveur web utilisé. 500-599 : indique une erreur du serveur.  Date : La date et l'heure à laquelle la réponse a été générée.  500 Internal Server Error : Une erreur interne du serveur s'est produite.  Set-Cookie : Définit des cookies pour être stockés sur le client.  16/10/2024 Dans ce cours,  On a expliqué : Corps de la réponse :  Le fonctionnement du web,  Le corps de la réponse contient les données réelles renvoyées par le serveur.  Les APIs,  Le contenu peut être de différents types, tels que HTML, JSON, XML, texte brut,  La structure des requêtes et réponses HTTP, ou même des données binaires (comme des images ou des fichiers).  On a testé des requêtes HTTP sur l’API JSONPlaceholder en utilisant Postman.  La structure et le contenu du corps dépendent de la requête initiale et de la logique du serveur. Dans les TPs, vous apprendrez plus comment faire des requêtes HTTP sur JSONPlaceholder en utilisant Postman ? Dans le cours prochain, on verra comment effectuer des requêtes HTTP en utilisant JavaScript ?