Projet 7 - Groupomania

Afin de valider le 7éme projet de ma formation chez Openclassrooms, j’ai réalisé le backend et le frontend d’un réseau social inter-entreprise pour les employés de Groupomania.

Le but de cet outil est de faciliter les interactions entre collègues pour ainsi améliorer l’ambiance et la productivité de l’entreprise. En effet, le département RH de Groupomania a laissé libre cours à son imagination pour les fonctionnalités du réseau et a imaginé plusieurs briques pour favoriser les échanges entre collègues.

Dans un premier temps, la fonctionnalité principale de l’application sera : les employés peuvent écrire et/ou partager des articles avec les collègues sur des sujets qui les intéressent.

Concernant la partie frontend, j’ai carte blanche pour le webdesign. Je dois juste reprendre le logo de la société et la développer avec un framework de JavaScript. Je choisi de monter en compétence sur React.js.
Pour la partie backend, le serveur API sera développé en Node.js et express. On communiquera du back vers la base de données grâce à Sequelize. La base de donnée sera en SQL.

Évidemment l’ensemble des données de connexion seront sécurisées.

Il faudra également gérer l’ensemble des fonctionnalités ci-dessous :

  • La connexion et la déconnexion des utilisateurs à l’application. Egalement, la session de l’utilisateur devra persister pendant toute la durée de sa connexion.
  • Le développement du front tout en respectant les standards de WCAG.
  • La création et la suppression des comptes utilisateurs.
  • L’ajout de publication et de commentaire rattaché à UNE seule publication.
  • La suppression d’une publication ou d’un commentaire uniquement si c’est l’auteur ou l’administrateur qui le supprime.
  • Un utilisateur Admin aura TOUS les droits sur l’application en cas de problème.

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 gérer les posts (=publications). Ainsi l’utilisateur sera en mesure d’ajouter/ supprimer / modifier et consulter un post.

CRUD - routes pour les posts

Voici les routes nécessaires pour l’inscription et la connexion à l’application pour chaque utilisateur.
L’utilisateur aura aussi la possibilité de modifier ou carrément supprimer son compte.
Enfin pour les besoins de l’application on pourra récupérer l’ensemble des informations de l’utilisateur au moment de sa connexion.

CRUD - routes pour les utilisateurs

Modèle de données

Voici le modèle de données Sequelize créé côté backend pour les publications / post :

Modèle Sequelize des posts

Page d'Accueil

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

  • Un composant react est créé pour la publication d’un nouveau post. Il doit prendre en compte l’image du post si l’utilisateur décide d’en ajouter une.
  • En développement web ceci revient à faire une requête HTTP de type POST pour ajouter à la base de données les informations du nouveau post (selon le modèle des posts préalablement établi côté back).
  • Un autre composant va s’occuper d’afficher l’ensemble des posts présents dans la base de données.
  • En développement web et en react.js on va utiliser .map pour gérer la liste des posts à afficher côté front.
Page d'accueil - site Groupomania

Page Mon Compte

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

  • Affichage de l’ensemble des informations de l’utilisateur sur cette page.
  • En développement web ceci revient à récupérer les informations stockées dans un composant. Celui-ci est récupérer grâce à un UseEffect qui le rend accessible dans toute l’application. Initialement, on récupère les données utilisateurs dans le compostant grâce à une requête de type GET.
  • L’utilisateur a la possibilité de modifier sa photo de profil ou sa description.
  • En langage web, on va mettre en place une route de type PUT:id côté API.
  • L’utilisateur a la possibilité de supprimer son compte.
  • En langage web, on va d’abord vérifier que l’utilisateur est bien le propriétaire du compte et qu’il est bien authentifié. Puis on utilise un requête de type DELETE:id.
Page Mon Compte

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 publications.
  • 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.  
  • Avec Sequelize, on va mettre l’argument unique à true dans le modèle de l’utilisateur pour le champ email.
    unique: {
                    args: true,
                    msg: « L’adresse mail est déjà utilisée. »
                },
Page de connexion Groupomania - Créer un compte
Page de connexion Groupomania - Identifiez-vous

Site en vidéo

Découvrez en vidéo le réseau inter-entreprise de Groupomania ! 

Soutenance

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

Mes réalisations

Venez découvrir mes autres réalisations…