Introduction

Le but de cette page est de vous faire réaliser une application composée

  • d’une API REST permettant d’accéder à des données simples : un ensemble de personnes auxquelles on associe un avatar. Vous trouverez ici une archive contenant l’ensemble des avatars.
  • une application web qui accède à l’API REST pour afficher les données, les supprimer, les modifier ou les filtrer.

Le serveur

Vous devez créer deux versions du serveur, l’une en version array et l’autre en version database. avec PostgreSQL.

L’arborescence de votre serveur doit être la suivante :

[server]
    |-- [data]
    |      |--[img]
    |      |--array.js
    |      |--db.sql
    |-- package.json
    |-- router.js
    |-- server.js
  • Le répertoire data/img contient les images des avatars qui vous sont fournis

  • Le fichier data/array.js contient un tableau avec les données sur les personnes et des fonctions permettant l’accès aux données, leurs modifications, etc. Pour chaque personne, on doit disposer des informations suivantes :

    • un id unique
    • un prénom
    • un nom
    • un score
    • une couleur
    • un avatar (ici, le nom de l’un des fichiers fournis)
  • Le fichier data/db.sql contient les commandes de création des tables personne et avatar et l’insertion de leurs données de base. Si vous testez plusieurs bases de données différentes, vous devrez créer plusieurs fichiers db.sql différents.

  • Le fichier server.js contient les commandes de lancement du serveur, ainsi que le lancement des fonctionnalités communes aux différentes versions du routeur.

  • Le fichier router.js définit le routage, c’est à dire la définiton des différents endpoints utiles à votre application. Vous devrez définir plusieurs fichiers router.js (avec des noms différents bien entendu) selon la version de votre serveur.

V1 : array

Créez un serveur REST dont les données sont stockées dans un tableau et permettant de :

  • Accéder à l’ensemble des personnes
  • Accéder aux personnes dont le score est supérieur ou égal à une valeur donnée
  • Accéder à une personne à partir de son id
  • Ajouter une nouvelle personne
  • Supprimer une personne
  • Modifier une personne

V2 : database

Créez une deuxième version de votre serveur, en stockant cette fois-ci vos données dans une base de données PostgreSQL.

Le client

Crez une application React.js qui accède au serveur REST et qui permet :

  • D’afficher les personnes avec leur avatar.
  • D’afficher les personnes dont le score est supérieur ou égal à une certaine valeur.
  • De créer un formulaire modal pour ajouter une nouvelle personne (avec choix d’un avatar ou affectation au hasard).
  • De créer un formulaire modal contenant les données d’une personne et permettant de modifier ces données.
  • De supprimer une personne.