Mise à jour de l'application web Todo avec Bootstrap, React et Django

Dans cette section, l'application web Todo implémentée s'appuiera sur l'application Django couverte dans 11.2 Exemple d'application web distribuée (WAD) adaptative avec Bootstrap et Django, ainsi que sur l'application React explorée dans 11.3 Exemple d'application web distribuée (WAD) adaptative avec Bootstrap/React et Node. Pour cette version de l'application web Todo, React sert de frontal pour gérer l'interface utilisateur afin d'obtenir et de définir des données via des requêtes HTTP. Django sert de dorsal.

Prérequis

Pour créer cette version de l'application Todo, 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. Pour commencer, suivez les étapes suivantes :

• Activez l'environnement virtuel (venv) utilisé dans la section 11A.2 :
  $ cd py394venv
  Windows : $ source ./Scripts/activate
  macOS : $ source ./bin/activate
• Installez Django Cors Headers dans l'environnement de programmation local
  $ pip install django-cors-headers==3.11.0 ]

Extension du dorsal Django pour prendre en charge le frontal React

Pour créer une application web Todo utilisant React comme frontal pour le dorsal Django, le projet Django (Django project) nécessite quelques configurations. Ouvrez TodoApp/settings.py et ajoutez 'corsheaders' à INSTALLED_APPS comme dans le code suivant.

INSTALLED _APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'todo',
]

En configurant le projet Django avec CORS, l'application Django sera autorisée à accepter des requêtes effectuées depuis le navigateur provenant d'autres origines. Pour ajouter CORS, ajoutez le middleware CORS à MIDDLEWARE, comme indiqué dans le code suivant.

MIDDLEWARE  = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

Après avoir terminé cette étape, faites défiler jusqu'à la fin du fichier settings.py et ajoutez la variable suivante.

# ajoutez la liste blanche CORS pour localhost:3000 puisque le frontal React sera servi sur le port 3000
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

Connexion du frontal React au dorsal Django

Ensuite, l'application React doit être configurée pour pouvoir effectuer des requêtes vers les points d'accès API de l'application Django. L'application React utilise Axios pour récupérer des données en effectuant des requêtes vers un point d'accès donné. Pour installer Axios, exécutez la commande suivante dans le répertoire reactfrontend/ :

$ npm install [email protected]

Ensuite, ajoutez un proxy à l'application Django. Le proxy aidera à acheminer les requêtes API de l'application React vers http://localhost:8000, où l'application Django recevra et traitera les requêtes. Pour ajouter le proxy, ouvrez le fichier reactfrontend/package.json et ajoutez le code suivant.

{ 
  "name": "reactfrontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {

Après avoir terminé cette étape, ouvrez le fichier reactfrontend/src/App.js et importez Axios, comme indiqué dans le code suivant.

import './App.css';
import React, { Component } from "react";
import Modal from "./components/Modal";
import Nav from "./components/NavComponent";
import axios from "axios";
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';

Pour mettre à jour le fichier reactfrontend/src/App.js, ajoutez le code suivant. La handleSubmit() utilisera Axios pour effectuer des requêtes vers les points d'accès API de Django afin de créer et de supprimer des éléments de tâche (todo).

handleSubmit = (item) => {
  this.toggle();

  if (item.id) {
    axios
      .put(`/api/todos/${item.id}/`, item)
      .then((res) => this.refreshList());
    return;
  }
  axios
    .post("/api/todos/", item)
    .then((res) => this.refreshList());
};

handleDelete = (item) => {
  axios
    .delete(`/api/todos/${item.id}/`)
    .then((res) => this.refreshList());
};

Une fois ces étapes terminées, démarrez le serveur Django, puis démarrez l'application React, en utilisant les commandes suivantes, respectivement.

$ python manage.py runserver
$ npm start

Pour accéder à l'API REST de Django, naviguez vers http://localhost:8000/api/. Ceci est similaire aux étapes complétées dans 11.2 Exemple d'application web distribuée (WAD) adaptative avec Bootstrap et Django. Cliquez sur le chemin d'accès de l'API des catégories pour saisir deux catégories, comme illustré à la Figure 11.35.

Figure 11.35 Après avoir navigué vers http://localhost:8000/api/ et suivi les instructions fournies, cette page apparaîtra pour permettre l'accès à l'API REST de Django. (rendu en React par Meta à code source ouvert ; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

Lorsque l'application React démarre, une page de navigateur se lancera automatiquement pour naviguer vers http://localhost:3000 et l'interface utilisateur devrait s'afficher. La Figure 11.36 montre la page sur laquelle créer un élément de tâche (todo).

Figure 11.36 Après le démarrage de l'application React, cette interface utilisateur apparaîtra. (rendu en React par Meta à code source ouvert ; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

À ce stade, revoyez l'API REST de Django. La Figure 11.37 montre que l'élément de tâche (todo) devrait être accessible via le chemin d'accès de l'API des tâches (todos).

Figure 11.37 Une fois l'application web Todo mise à jour à l'aide de Bootstrap avec Django et React, cette page devrait apparaître pour permettre aux utilisateurs de créer une liste de tâches (Todo List). (rendu avec Bootstrap sous licence MIT, copyright 2018 Twitter ; avec Django, une marque déposée de la Django Software Foundation ; et React par Meta à code source ouvert ; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)