050 - Première connexion client-serveur

Tu as un client ? Tu as un serveur ? À toi de réaliser une connexion client-serveur. C'est ici que toute la puissance du développement web prend sa source. À partir de l’application React, tu vas accéder à un ensemble de services/données afin d'y apporter de la valeur. Tu vas pouvoir t’authentifier, obtenir des services de blogging, de communautés, ou accéder à des données de géolocalisation, etc.

La principale façon de faire communiquer un client avec un serveur est à l'aide d'une requête AJAX au travers d’une API REST. Une API REST est un standard de communication qui repose sur un chemin - l'URL- et sur le CRUD (Create, Read, Update, Delete) appliqué aux protocoles HTTP qui permet le transfert des requêtes via le réseau. Nous utiliserons les commandes équivalentes (dans le même ordre) : POST, GET, PUT, DELETE. AJAX réalise les requêtes HTTP de manière asynchrone, et récupère le résultat à l'aide d'une callback. L'AJAX possède un double intérêt :

• il permet d'effectuer des requêtes sans bloquer la page internet ⇒ grâce à son côté asynchrone
• il permet de récupérer de l'information sans forcément recharger la page ⇒ on ne recharge que ce qui en a besoin

Objectifs

• L'objectif est de connecter ton application React sur ton backend nodejs.

Pour rappel, React récupère d'un formulaire d'enregistrement la donnée suivante par exemple :

{
  email: "mon@email.com",
  password: "monPassw0rd",
  name: "James",
  lastname: "Bond"
}

et doit l'envoyer sur la route /auth/signup créée à cet effet côté Node.

Configuration préalable

Avant de démarrer l'implémentation de la requête AJAX, tu dois bien configurer le port de tes serveurs. En effet ton backend se lance très certainement sur localhost:3000, et ton application React sur le même hostname et même port. Or il ne peut y avoir qu'un seul et unique serveur répondant sur une unique combinaison.

La première chose est de changer le port du backend (localhost ne peut pas être modifié car tu travailles sur ta machine) et le mettre à 5000. Je te laisse regarder où on change ce paramètre.

La deuxième chose est de modifier les requêtes de l'application React. Tu vas interroger le backend sur le nouveau port 5000 et donc réaliser un POST http://localhost:5000/auth/signup. Cependant si tu as bien compris la finalité, à terme, l'application React et le backend node seront sur le même hostname:port, et donc on s'attend à avoir des requêtes AJAX POST http://localhost:5000/auth/signup plutôt sous une forme dite relative POST /auth/signup. Afin de simuler ce comportement, nous allons créer un proxy qui va faire pointer nos requêtes sur le port 5000. Il faut ajouter dans le package.json de l'application React la ligne:

{
    ...
    proxy: "http://localhost:5000/",
    ...
}

Donc en résumé, l'application React servie sur le port 3000 requêtera le serveur Node sur le port 5000 tout en utilisant les chemins relatifs.

Envoi du formulaire

Dans le composant SignUp de React, tu avais laissé la fonction handleSubmit() sans réelle action. C'est lors de la soumission du formulaire que l'on doit envoyer le résultat au backend Node. Pour cela, nous allons utiliser la commande fetch. Voici le requête AJAX réalisant un POST sur la route /auth/signup :

fetch("/auth/signup",
{
    method:  'POST',
    headers:  new  Headers({
        'Content-Type':  'application/json'
    }),
    body:  JSON.stringify(this.state),
})
.then(res  =>  res.json())
.then(
    res  =>  this.setState({"flash":  res.flash}),
    err  =>  this.setState({"flash":  err.flash})
)

Comme tu peux le voir, un état flash a été rajouté ce qui va permettre d'afficher les messages de retour. Attention à bien le rajouter dans le constructeur.

L'état flashvaut res.flash ou err.flash correspondant au retour du backend. Du coup, tu sais parfaitement où placer le code qui suit :) :

if (error)
    res.status(500).json({ flash:  error.message });
else
    res.status(200).json({ flash:  "User has been signed up !" });

Je te laisse vérifier que le nouvel état est fonctionnel.

Si tu as une erreur ER_BAD_FIELD_ERROR: Unknown column ‘flash’ in ‘field list’, tu peux enlever l'attribut flash du body avec le code suivant :

const {flash, ...newUser} = req.body;

Et tu peux maintenant utiliser la variable newUser.

Challenge

Show me your property

• Ajouter des utilisateurs en base de données au travers du formulaire React
• Avoir le message flash qui apparaît sur la page (là est affiché de l'état du composant)

Critères de validation

• Observer la donnée en base
• Observer le bon message flashen l'occurrence, le message d'erreur lors d'un envoi d'un email déjà en base