Création de l'application Node

Avant de pouvoir créer le dorsal (back end) de l'application de gestion de tâches (Todo), vous devez créer une application Node. Pour ce faire, créez le répertoire nodebackend/ et naviguez-y. Ensuite, exécutez la commande suivante pour initialiser l'application Node :

$ npm init

Après avoir exécuté cette commande, suivez l'invite, qui est mise en évidence dans la Figure 11.30.

Figure 11.30 Cette invite apparaît lorsque l'application Node est initialisée. (source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

Une fois l'initialisation de l'application Node terminée, un fichier package.json est généré, comme le montre le code suivant.

{
  "name": "nodebackend",
  "version": "1.0.0",
  "description": "Todo Web application with Bootstrap, ReactJS and NodeJS",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "bootstrap",
    "reactjs",
    "nodejs",
    "express",
    "mongodb",
    "rest",
    "api"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.1",
    "cors": "^2.8.5",
    "express": "^4.17.2",
    "mongoose": "^6.1.9"
  }
}

Mise en place du serveur web Express

Une fois l'application Node initialisée, l'étape suivante consiste à mettre en place le serveur web (web server) Express. Pour ce faire, utilisez la commande suivante pour installer Express, Mongoose (Mongoose est une bibliothèque pour MongoDB utilisée pour interagir avec MongoDB en facilitant la modélisation des données en tant qu'objets), et d'autres paquets dépendants dans le répertoire nodebackend/ :

$ npm install express mongoose body-parser cors –save

Ensuite, créez le serveur web Express en vous rendant dans le répertoire nodebackend/, créez le fichier server.js et ajoutez le code suivant.

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

var corsOptions = {
  origin: "http://localhost:8081"
};

app.use(cors(corsOptions));

// parse requests of content-type - application/json
app.use(bodyParser.json());

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// routes
app.get("/", (req, res) => {
  res.json({ message: "Welcome to the Todo Web App." });
});

require("./routes/todo.routes.js")(app);

// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

Une fois que vous utilisez le code pour importer Express, vous pouvez construire les API REST. Le paquet body-parser est utilisé pour créer et analyser l'objet de requête. Le paquet cors est utilisé comme intergiciel (middleware) pour Express qui active CORS. Le serveur web Express fonctionnera sur le port 8080 comme port par défaut. Utilisez la commande suivante pour démarrer le serveur :

$ node server.js

Dans un navigateur, naviguez vers http://localhost:8080/. La page suivante, illustrée dans la Figure 11.31, s'affiche.

Figure 11.31 Une fois le serveur web Express démarré, cette page devrait apparaître à l'adresse http://localhost:8080/. (rendu dans Node; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

Configuration de la base de données MongoDB et de Mongoose

Après la création du serveur web Express, l'étape suivante consiste à configurer la base de données MongoDB et Mongoose. Pour ce faire, dans le répertoire nodebackend/, créez le répertoire config/. Ensuite, dans le répertoire config/, créez le fichier db.config.js et ajoutez le code suivant. Cela spécifie l'URL de connexion à la base de données MongoDB.

module.exports = {
    url: "mongodb://localhost:27017/todo_db"
  };

Une fois l'URL de connexion MongoDB configurée, l'étape suivante consiste à ajouter du code pour se connecter à la base de données en utilisant Mongoose. Pour ce faire, dans le répertoire nodebackend/, créez le répertoire models/. Dans le répertoire models/, créez le fichier index.js et ajoutez ce qui suit.

const dbConfig = require("../config/db.config.js");

const mongoose = require("mongoose");
mongoose.Promise = global.Promise;

const db = {};
db.mongoose = mongoose;
db.url = dbConfig.url;
db.todos = require("./todo.model.js")(mongoose);

module.exports = db;

Ensuite, le fichier nodebackend/server.js doit être mis à jour pour permettre au serveur web Express d'établir une connexion avec MongoDB. Le code correspondant est présenté dans l'extrait suivant.

const db = require("./models");
db.mongoose.connect(db.url, {
  useNewUrlParser: true
}).then(() => {
  console.log("Connected to the database successfully!")
}).catch(err => {
  console.log("Cannot connect to the database: " , err);
  process.exit();
});

Une fois le code de connexion à la base de données terminé, l'étape suivante consiste à créer le modèle Mongoose. Pour ce faire, dans le répertoire nodebackend/models/, créez le fichier todo.model.js et ajoutez le code suivant. Ce code définit un schéma Mongoose pour le modèle todos, ce qui entraîne la création d'une collection todos dans la base de données MongoDB.

module.exports = mongoose => {
  var schema = mongoose.Schema({
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: false,
    },
    created: {
      type: String,
      default: Date.now(),
      required: true,
    },
    due_date: {
      type: String,
      required: true,
    },
    category: {
      type: String,
      required: true,
    },
  });

  schema.method("toJSON", function() {
    const { __v, _id, ...object } = this.toObject();
    object.id = _id;
    return object;
  });
  const Todos = mongoose.model("todos", schema);
  return Todos;
};

Création de l'application React

Pour créer l'application React, la première étape consiste à exécuter la commande suivante. Cela doit être fait dans un répertoire qui est extérieur et séparé du répertoire nodebackend/.

$ npx create-react-app reactfrontend

Une fois la commande exécutée, elle générera les fichiers de l'application React dans le répertoire reactfrontend/, comme le montre la Figure 11.32.

Figure 11.32 Ceci montre les fichiers de l'application React dans le répertoire reactfrontend/. (rendu dans React par Meta Open Source; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

L'étape suivante consiste à naviguer dans le répertoire reactfrontend/ et à lancer l'application React pour confirmer que l'application frontale (front end) React a été créée avec succès. À ce stade, cette application ne se connecte pas au dorsal (back end) Node, elle lance donc une page React par défaut. Exécutez la commande, qui lancera automatiquement une page de navigateur vers http://localhost:3000.

$ npm start

Vous verrez ce qui suit, comme illustré dans la Figure 11.33.

Figure 11.33 Lorsque l'application frontale React est créée avec succès, cette page se lance à l'adresse http://localhost:3000. (source : React par Meta Open Source)

Installation de Bootstrap et d'autres dépendances

L'étape suivante consiste à installer les paquets pour Bootstrap et reactstrap, qui sont nécessaires pour utiliser Bootstrap dans une application React. Pour ce faire, dans le répertoire reactfrontend/, exécutez les commandes suivantes :

$ npm install [email protected] [email protected] --legacy-peer-deps
$ npm install react-bootstrap

Ensuite, importez le fichier CSS de Bootstrap4 dans l'application React. Pour ce faire, ouvrez reactfrontend/src/index.js et ajoutez l'importation Bootstrap suivante.

import  React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Création des composants React

L'étape suivante consiste à créer les composants React. L'interface utilisateur de React est rendue à partir du composant reactfrontend/src/App.js. Le fichier reactfrontend/src/App.js est généré lors de la création de l'application React. C'est le composant principal de l'application React, et tous les autres composants sont ajoutés au composant reactfrontend/src/App.js. Quelques importations sont ajoutées au fichier reactfrontend/src/App.js, comme le montre le code suivant. Cela inclut une importation pour App.css. Des règles CSS personnalisées sont ajoutées à reactfrontend/src/App.css.

//import logo from './logo.svg';
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 comparer avec l'application web Django dans 11.2 Exemple de WAD adaptative avec Bootstrap et Django, des règles CSS personnalisées ont été ajoutées au fichier style.css dans le répertoire static/, comme décrit dans Création des modèles.

Ensuite, examinez le code suivant, qui montre que App est un composant de classe qui étend la classe Component de React. Toutes les données d'état sont ajoutées à la variable this.state dans le constructeur.

class  App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todoChecked: false,
      todoList: [],
      categories: [],
      description: "",
      modal: false,
      activeItem: {
        title: "",
        description: "",
        completed: false,
      },
    };
  }

L'extrait de code suivant montre que chaque composant de classe doit inclure une render() fonction. Cette fonction renvoie les composants qui construisent l'interface utilisateur pour l'application web de gestion de tâches (Todo).

render () {
    return(
      <main>
        <Nav />
        <div className="container mt-5 pl-3">
          <h1>Todo List</h1>
          <Form>
            <div className="inputContainer">
                <FormGroup>
                  <Label htmlFor="description">Description</Label>
                  <Input type="text" id="description" name="description"
                      placeholder="Description"
                      value={this.state.description}
                      />
                </FormGroup>
            </div>
            <div className="inputContainer half last">
                <FormGroup>
                  <Label htmlFor="category">Category</Label>
                  <Input id="category" className="taskCategory" type="select" name="category_select"
                    value={this.state.contactType}
                    >
                    <option className="disabled" value="">Choose a category</option>
                    <option>Work</option>
                    <option>Personal</option>
                  </Input>
                </FormGroup>
            </div>
            <div className="inputContainer half last right">
              <FormGroup>
                  <Label htmlFor="description">Due Date</Label>
                  <Input type="text" id="description" name="description"
                      placeholder="Due Date (mm/dd/yyyy)"
                      value={this.state.description}
                      />
                </FormGroup>
            </div>
            <div className="row">
                <Button
                  className="taskAdd"
                  name="taskAdd" type="submit"
                >
                  Edit
                </Button>
                <Button
                  className="taskDelete ml-1"
                  name="taskDelete"
                  type="submit"
                  onclick="$('input#sublist').click();"
                >
                  Delete
                </Button>
            </div>
          </Form>
          <ul className="taskList">{this.renderItems()}</ul>
        </div>
      </main>
    )
  }