Projet 6 - Piquante

Afin de valider le 6éme projet de ma formation chez Openclassrooms, j’ai réalisé le backend d’une application d’évaluation de sauces piquantes. Cette partie est « cachée », l’utilisateur ne la voit jamais. Elle permet pourtant la bonne fonctionnalité de l’application.

L’application s’appelle “Piquante” et permet à ses utilisateurs d’ajouter leurs sauces gastronomiques. Ils peuvent ‘liker’ ou ‘disliker’ les différentes sauces.

La partie backend de ce projet est développée en Node.js et express. Pour la base de données j’utilise MongoDB.

Les enjeux du projet sont les suivants :

  • Ajuster le développement du backend pour qu’il fonctionne parfaitement avec le frontend,
  • Assurer la sécurité des données utilisateurs et de l’application (RGPD  & OWAPS).

Utilisation d'une API REST

En créant la partie backend de ce projet on crée finalement notre propre API. Il s’agit d’une abréviation qui signifie Application Programming Interface (ou interface de programmation d’application, en français). En résumé, il s’agit d’un moyen de communication entre deux logiciels (soit différents composants d’une application, soit deux applications différentes).

Voici les caractéristiques principales d’une API. Elle permet de :

  • Communiquer des données.
  • Communiquer entre les différents composants de l’application et entre l’application et d’autres développeurs. Ceci se fait grâce à l’utilisation de requêtes et de réponses.
  • Donner un moyen d’accès aux données de façon réutilisable et standardisée.
Voici leurs avantages principaux :
  • Les développeurs peuvent utiliser des API publiques et privées.
  • Les API publiques sont utilisables par tous sans restriction.
  • Les API privées sont utilisables seulement par ceux qui ont un accès et y sont autorisés.
Schéma flux entre site / serveur / base de données

Utilisation du CRUD

Le CRUD est la liste des actions de base que vous pouvez effectuer sur une ressource. C’est un acronyme qui signifie Create (créer), Read (lire), Update (mettre à jour), et Delete (supprimer). Bien que le CRUD ne constitue pas vraiment un mécanisme technique en soi, chaque action CRUD est associée à un verbe HTTP.

CRUD - Actions et Verbes associés

Pour ce projet, je dois utiliser tous ces types de requêtes pour les sauces. Ainsi l’utilisateur sera en mesure d’ajouter/ supprimer / modifier et consulter sa sauce.

CRUD - routes pour les sauces

Voici les routes nécessaires pour l’inscription et la connexion à l’application pour chaque utilisateur.

CRUD - routes pour les utilisateurs

Modèle de données

Voici les 2 modèles de données Mongoose à créer côté back :

Modèle Mongoose des sauces
Modèle Mongoose des utilisateurs

Page d'Accueil

Pour la page d’accueil voici les enjeux en terme de fonctionnalités :

  • Afficher les différentes sauces mis en ligne par les utilisateurs en récupérant ces information dans la base de données via l’API,
  • En développement web ceci revient à récupérer les informations avec une requête HTTP de type GET.
Page d'accueil Piquante- site de sauces gastronomiques

Page Produit

Pour la page produit voici les enjeux en terme de fonctionnalités :

  • Affichage de l’ensemble des informations d’une seule sauce sur cette page quand on clic dessus depuis la page d’accueil.
  • En développement web ceci revient à utiliser le paramètre de l’url (dans lequel est présent l’id de la sauce en question et donc son numéro de référence). Le back doit prévoir la réception d’une requête de type GET/:_id (correspondant à une sauce précise).
  • Possibilité de modifier ou supprimer la sauce lorsque l’on est son créateur.
  • En langage web, on va mettre en place une route de type PUT:id et DELETE:id côté API.
  • Possibilité de ‘liker’ ou ‘disliker’ la sauce.
  • En langage web ceci revient à ajouter, dans le modèle Mongoose, +1 dans le nombre de ‘like’ ou ‘dislike’ ET ajouter l’id de l’auteur de l’action dans le tableau des ‘like’ ou ‘dislike’ .
Page 'produit' Orinoco

Page Connexion / Inscription

Pour la page de connexion / inscription voici les enjeux en terme de fonctionnalités :

  • L’utilisateur qui a déjà un compte peut se connecter à l’application pour consulter les sauces.
  • En développement web, on crée un controller côté back. Il va chercher l’email de l’utilisateur dans la base de données et vérifier que le mot de passe associé correspond.
  • Le nouvel utilisateur peut créer un compte avec son adresse mail et son mot de passe.
  • En développement web, l’utilisateur va être ajouter dans la base de données avec un mot de passe masqué grâce au plugin jsonwebtoken.
  • L’adresse email sera UNIQUE pour chaque utilisateur, 2 personnes ne peuvent pas avoir la même adresse email.  
  • En développement web, on va utiliser un plugin d’unicité : mongoose-unique-validator.
Page 'mon panier' Orinoco

Site en vidéo

Découvrez en vidéo du site de sauces gastronomiques, l’application nommée : Piquante !

Pour ce projet je n’ai pas la main sur le design mais uniquement sur la partie API.

Soutenance

Voici les diapositives utilisées lors de mon passage de ce 6éme projet avec Openclassrooms.

Mes réalisations

Venez découvrir mes autres réalisations…