Résumé

Résumé

11.1 Architectures des applications web modernes

  • Le Web est défini par phases, chacune caractérisée par son usage principal — le Web 1.0 pour la lecture de contenu, le Web 2.0 pour l'interaction sociale, et le Web 3.0 comme un Web ouvert, décentralisé et de confiance.
  • Les architectures web traditionnelles rendaient les pages web sur le serveur, chaque requête client entraînant l'envoi d'une nouvelle page HTML du serveur au navigateur. Le motif modèle-vue-contrôleur (MVC) était souvent utilisé pour le développement côté serveur.
  • Les applications web adaptatives s'affichent efficacement dans un navigateur, quels que soient l'écran ou l'orientation de l'appareil de l'utilisateur.
  • Les applications monopages (SPA) chargent une seule page web dans le navigateur, manipulent l'interface utilisateur et récupèrent les données via des API. Cela se fait souvent avec JavaScript effectuant des appels AJAX vers des API REST.
  • Les applications mobiles natives sont conçues pour fonctionner sur un appareil spécifique. Elles ont l'avantage des performances et de l'accès aux données et aux fonctionnalités de l'appareil, mais souffrent d'un manque de support multiplateforme.
  • Le Web 3.0 est la prochaine phase du Web. Les technologies qui seront nécessaires pour le supporter incluront probablement les technologies de registres distribués et l'IA.
  • Les futures architectures web verront probablement une combinaison de modèles architecturaux Web 2.0 et 3.0 pour supporter efficacement la décentralisation, l'ouverture, la confiance, le coût et les performances. Cette approche hybride résout certains problèmes sans toutefois atteindre pleinement les objectifs du Web 3.0.

11.2 Exemple de WAD adaptatif avec Bootstrap et Django

  • Bootstrap est un cadriciel d'application web adaptatif à code source ouvert, et Django est un cadriciel de développement d'applications web basé sur Python. Les deux cadriciels sont très populaires en raison de leur facilité d'utilisation.
  • Pour construire l'application Todo, vous devez installer Python, PIP, Django, Django REST Framework, Bootstrap et jQuery.
  • Les étapes pour construire l'application Todo sont d'installer et de configurer un environnement de programmation local pour Python 3, de télécharger et d'installer Python 3.9.4, et d'ajouter Python et son sous-dossier Scripts à vos données d'environnement de chemin.
  • La première étape pour construire une application web Django est de créer un projet Django.
  • Une fois le projet Django terminé et configuré avec succès, l'étape suivante consiste à créer l'application Todo et à l'enregistrer dans le projet Django.
  • Après l'enregistrement et l'installation de l'application web Todo, l'étape suivante consiste à créer les modèles pour Category et TodoList.
  • Une fois les modèles Category et TodoList créés, l'étape suivante consiste à créer les sérialiseurs, la vue, les routeurs, l'interface utilisateur et les gabarits.

11.3 Exemple de WAD adaptatif avec Bootstrap/React et Node

  • React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur.
  • Node est un environnement d'exécution JavaScript qui fournit aux développeurs les outils pour développer des applications web, ainsi que des serveurs, des scripts et des outils en ligne de commande.
  • Lors de la création d'une application web Todo utilisant React et Node, React sert de frontal, gérant l'interface utilisateur, ainsi que l'obtention et la définition des données via des requêtes HTTP utilisant Axios. Node sert de dorsal, utilisant une API REST construite avec ExpressJS et l'ODM MongooseJS pour interagir avec une base de données MongoDB.
  • Pour construire l'application Todo en utilisant Bootstrap, React et Node, vous avez besoin de React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9 et Axios v0.21.0.
  • Les étapes pour créer une application web Todo en utilisant Bootstrap, React et Node comprennent :
    • créer le dorsal Node
    • créer l'application Node
    • configurer le serveur web Express
    • configurer la base de données MongoDB et Mongoose
    • construire le contrôleur
    • configurer l'API REST
    • créer le frontal React
    • créer l'application React
    • installer Bootstrap et les autres dépendances
    • créer les composants React
    • connecter le frontal React au dorsal Node

11.4 Exemple de WAD adaptatif avec Bootstrap/React et Django

  • L'application web Todo peut être mise à jour en utilisant Bootstrap avec React et Django.
  • Pour cette version de l'application web Todo, React sert de frontal gérant l'interface utilisateur pour obtenir et définir les données via des requêtes HTTP. Django sert de dorsal.
  • Pour construire l'application Todo en utilisant Bootstrap avec React et Django, vous avez besoin de Python v3.9.4, PIP v21.3.1, Django v4.0.1, Django REST Framework v3.13.1, Bootstrap v4.5.0, Django-cors-headers v3.11.0, React v17.0.2 et Axios v0.21.0.
  • L'application React utilise Axios pour récupérer les données en effectuant des requêtes vers un point d'accès donné.
  • Un proxy vers l'application Django aide à acheminer les requêtes API de l'application React vers http://localhost:8000, où l'application Django recevra et traitera les requêtes.

11.5 Exemple de WAD natif avec React Native et Node ou Django

  • Une application Todo pour appareils mobiles peut être développée en utilisant React Native et Node.
  • React Native est un cadriciel JavaScript à code source ouvert utilisé pour construire des interfaces utilisateur et des applications natives pour appareils mobiles.
  • Pour construire une application Todo pour appareils mobiles, React Native sert de frontal gérant l'interface utilisateur et obtenant et définissant les données via des requêtes HTTP. Node sert de dorsal qui utilise l'API construite avec le Django REST Framework dans 11.2 Exemple de WAD adaptatif avec Bootstrap et Django.
  • La construction de l'application mobile Todo en utilisant React Native et Node nécessite React Native v0.67, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9 et Axios v0.21.0.

11.6 Exemple d'application Web 2.0/Web 3.0 de chaîne de blocs Ethereum

  • Une simple application Todo peut être créée en utilisant React avec le Web 3.0, alimentée par des contrats intelligents Ethereum sur la chaîne de blocs.
  • La chaîne de blocs Ethereum crée un réseau pair-à-pair sécurisé grâce à l'utilisation de contrats intelligents, qui sont des accords numériques sécurisés permettant aux utilisateurs de transacter directement entre eux via le Web.
  • La construction de l'application Web 3.0 de chaîne de blocs Ethereum Todo nécessite React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, Web 3.js v1.2.2, Truffle v5.0.2, Solidity v0.8.11 et Ganache.
  • Le cadriciel Truffle, qui est une suite d'outils populaire pour développer des contrats intelligents, peut être utilisé pour développer le contrat intelligent Ethereum.
  • Le cadriciel Truffle peut être implémenté en utilisant Solidity, qui est un langage de haut niveau, orienté objet, axé sur l'implémentation de contrats intelligents.