Archives Wild Code School
React - L'Odyssey d'Homer

040 - Enregistrement de compte en base

Quête 5 sur 11

Le serveur NodeJs ne stocke aucune donnée, aucun état, en tant que tel. Il est dit stateless. C'est un point important. Concrètement, un serveur NodeJs doit pouvoir être arrêté, ou tomber (crash) et redémarrer à chaud, sans impact pour l'application (hors perte de service potentiel). La base de données quant à elle est statefull, elle n'est pas interchangeable. C'est un composant crucial car elle porte généralement la valeur du site internet, à ce titre elle doit être sanctuarisée (dupliqué, backupé, dumpé, etc..).

Objectifs

  • L'objectif de cette quête est d'insérer en base de données un objet correspondant à ce qui est généré dans notre formulaire React :
json
{
  email: "[mon@email.com](mailto:mon@email.com)",
  password: "monPassw0rd",
  name: "James",
  lastname: "Bond"
}

Création d'une base mySQL

L'importance du type de base de données dépend de votre utilisation et de vos moyens financiers. Les plus grosses bases sont Oracle d'Oracle et SQL Server de Microsoft. Une base de données qui est très présente car open source et puissante est Postgresql. Ici nous allons considérer mySQL qui est la plus utilisée dans le web.

Si tu es sur Ubuntu tu peux installer via :

sudo apt-get install mysql

Tu peux stop/start/restart mysql avec l'aide de l'outils serviced'ubuntu.

sudo service mysql stop
sudo service mysql start
sudo service mysql restart
↗

Installation du connecteur mySQL

Une fois mySQL installé sur votre machine, vous devez installer le connecteur mysql pour Nodejs.

npm install --save mysql
↗
mysql pour nodejs
github.com

Configuration de la table users

Tout d'abord, il est important que tous fichiers de configuration de la base, ainsi que toutes les données d'initialisation doivent être stocké dans des fichiers .sql dans le repository GitHub. Créer un dossier /back/sql où l'on créera les fichiers SQL.

Le fichier init.sql:

sql
CREATE TABLE users 
( 
    id INTEGER PRIMARY KEY AUTO_INCREMENT, 
    email VARCHAR(90) UNIQUE, 
    password VARCHAR(90), 
    name VARCHAR(90), 
    lastname VARCHAR(90) 
);

Attention de bien mettre une condition d'unicité sur l'email car un compte ne peut posséder qu'un seul et unique email.

Exécuter ce script dans mySQL. Toutes méthodes est bonne, jette un oeil dans la source.

↗
execute mysql script file
dev.mysql.com

Création d'un helper database

La base de données va sans doute être requêtée à plusieurs endroit dans l'application. C'est pourquoi il peut être judicieux de configurer à un endroit la configuration du connecteur.

Dans un dossier /back/helpers, tu y créeras un fichier db.js :

javascript
const mysql      = require('mysql');
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'me',
  password : 'secret',
  database : 'my_db'
});
module.exports  =  connection;

en remplaçant par vos propres données de configuration.

Dorénavant, le connecteur de la base de données sera accessible dans n'importe quel fichier via :

javascript
const connection = require('./helpers/db.js');
↗
mysql pour nodejs
github.com

Retour dans /routes/auth/auth.js

Tu dois avoir quelque part :

javascript
router.post('/signup', function(req, res, next) {
    res.send('I am in POST signup');
});

C'est ici que tu vas implémenter l'insertion en base !

Si tu as bien suivi, nous allons fournir en entrée du POST l'objet du formulaire :

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

il sera accessible via req.body.

Il va falloir insérer cette donnée dans mySQL avec la requête :

sql
INSERT INTO users (email, password, name, lastname) VALUES (?,?,?,?)

où les points ? correspondent aux différents champs de req.body : req.body.email, req.body.password, ...

Vous pouvez jeter un oeil sur cette autre façon de faire. La documentation donne l'exemple suivant qui peut vous inspirer :) :

javascript
const post  = {id: 1, title: 'Hello MySQL'};
connection.query('INSERT INTO posts SET ?', post, function (error, results, fields) {
  if (error) throw error;
  // Neat!
});
↗
mysql pour nodejs
github.com

Implémentation des réponses

Pour le moment nous souhaitons uniquement savoir si la requête a fonctionné (code 200) ou non (code 500)

javascript
if(error) {
  res.sendStatus(500);
} else {
  res.sendStatus(200);
}
↗
http error codes
fr.wikipedia.org

Test de POST /auth/signup

A l'aide de Postman, tu vas créer une requête POST qui pointe sur l'url http://localhost:3000/auth/signup. Tu vas devoir rajouter dans le body

A l'exécution, tu dois récupérer le code 200 ou 500. Dans le cas du code 200, si tu vérifies en base, l'objet a été inséré end.

!! Si vous relancez la requête une seconde fois, vous devriez avoir le code 500 !! cela va de soit si vous avez compris tout ce que vous avez fait jusqu'ici :)

↗
mysql pour nodejs
github.com

Challenge

Show me your property

  • Ajouter des utilisateurs en base de données au travers de la route /auth/signup

Critères de validation

  • Observer la donnée en base