Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Développement Front-End 1. Structure des fichiers : D’abord, on a créé le proje

Développement Front-End 1. Structure des fichiers : D’abord, on a créé le projet React avec Typescript avec la commande « npx create-react-app -- template typescript ». Afin d’organiser ses fichiers selon une logique qui est définie et claire pour toute votre équipe, on a abordé comme structure une architecture composée de trois dossiers principaux : components, scenes et Hooks.  Dans le dossier components, il y aura des dossiers ou chacun définit un composant réutilisable de l’application. Par exemple : un dossier navbar qui comporte un fichier Typescript et un fichier de style.  Dans le dossier Hooks, on met nos Hooks crées pour optimiser le temps de recherche et d'implémentation d'un nouveau Hooks dans votre projet. Par exemple le Hook useFetch () :  Dans le dossier scenes qui comporte les vues du projet, chaque scène est un assemblage de composants qui forme une page de l’application. Par exemple la scène Home qui présente la page d’accueil de notre application web. 2. Mise en place des composants : Après avoir discuté la conception de l’application web avec nos clients, on a fixé les différents pages qui seront présentes dans l’application. Et donc on a déterminé les différents composants React qu’on a besoin pour nos pages : 3. Description des pages de l’application :  La page d’accueil : Il s’agit de la première page conçue pour l’utilisateur de notre application. Elle comporte les principaux composants d’une interface : Navbar, Body, Sidebar et Footer. Elle présente des rubriques permettant la connexion, l’inscription ainsi qu’une barre de recherche. Pour la Sidebar, il comporte différents liens de navigation : Ainsi des rubriques pour débuter avec nos services de rejoint des communautés ou évènements. Et enfin, le Footer :  Page d’inscription : La procédure d’inscription est divisé en deux étapes, d’abord l’utilisateur doit entrer ses informations ensuite il doit choisir ses domaines d’intérêts qui vont lui aider à trouver les communautés et les évènements correspondants. o Le formulaire d’inscription qui offre à l’utilisateur le choix d’inscription soit avec ses informations personnelles soit avec son compte Google ou Facebook. Pour les coordonnées, on a met les champs obligatoires Prénom et Nom, adresse E- mail, le mot de passe et son confirmation. o Le formulaire d’intérêts est construit selon un composant maquettage qui permet à l’utilisateur de saisir une liste de ses intérêts :  Page de connexion : Pour cette page, l’utilisateur doit effectuer la connexion en saisissant les informations de son compte (Adresse E-mail et mot de passe). Ainsi il peut se connecter par ses comptes Google ou Facebook. Pour retourner à l’étape précédente Pour finaliser la procédure d’inscription  Page de communautés publiques : Après que l’utilisateur est connecté, il se redirige vers la page affichant les différentes communautés publiques présentes sur l’application. Ou il peut choisir une communauté pour la consulter et la rejoindre. Page des informations d’une communauté : C’est la page qui est affiché si l’utilisateur veut rejoindre une communauté. Les informations détaillées de la communauté sont affichés à l’utilisateur, s’il est intéressé il peut rejoindre la communauté en suivant les étapes nécessaires : D’abord il y a deux cas :  Si l’utilisateur a déjà un compte il peut se connecter puis remplir le formulaire présenté par l’application pour récupérer ses informations personnelles. Se connecter Une Pop-up s’affiche pour se connecter Joindre la communauté Puis l’utilisateur remplit le formulaire d’inscription à la communauté  Si l’utilisateur n’a pas encore de compte, avant la connexion il doit créer un compte en replissant le formulaire d’inscription et en saisissant les intérêts, deux Pop-up successives pour ceux-ci sont afficher. S’inscrire  Page de communauté : Si l’utilisateur veut consulter une communauté après la rejoindre. Il se redirige vers la page de la communauté : Cette page est flexible, chaque type d’utilisateur (Membre, Organisateur ou Co-organisateur) a des fonctionnalités et des services différents. a) Cas d’un organisateur :  Eh haut de la page, on trouve des informations concernant la communauté : Nom, image, nombre de membres de la communauté, type de l’utilisateur (Organisateur), Description…. L’organisateur peut modifier ou supprimer la communauté.  Après une barre de navigation est présente, il permet de naviguer entre différents fonctionnalités de la communauté (cette Navbar est adapté pour chaque type d’utilisateur) o Evènement : il affiche des cartes présentant les informations des différents évènements de la communauté. L’utilisateur peut filtrer par date ou par intérêts Et sortir par Une barre de recherche est présente, ainsi qu’un bouton pour que l’organisateur puisse ajouter des nouveaux évènements à la communauté : Une Pop-up s’affiche pour remplir les informations du nouvel évènement. o Membres : Se rediriger vers la page de l’évènement ou il peut effectuer les modifications. Cette partie liste les différents membres de la communauté. L’organisateur peut désigner ou retirer un co-organisateur ou supprimer un membre. o Calendrier : Affiche le calendrier des évènements de la communauté. Cette rubrique est commune pour tout type d’utilisateur (Organisateur, Co-organisateur et Membre). Type de l’utilisateur au sein de la communauté L’organisateur peut envoyer un lien d’invitation via E-mail à une personne externe o Règles : Il va contenir les différentes règles à suivre pour la communauté. Cette rubrique est commune pour tout type d’utilisateur (Organisateur, Co-organisateur et Membre). o Demandes : Il liste les différentes demandes reçues d’intégration de la communauté. L’organisateur peut consulter chaque profil et puis rejeter ou accepter la demande. o Forum : C’est un forum ont les membres de ma communauté peuvent discuter entre eux. b) Cas d’un Co-organisateur : Pour l’évènement, l’organisateur et le co-organisateur ont les mêmes fonctionnalités seulement que le co-organisateur ne peut pas ajouter un nouvel évènement, et ne peut pas consulter la liste des membres de la communauté. o Parcours : Il affiche le parcours d’évènements auxquels l’utilisateur a participé. c) Cas d’un membre : Le membre diffère du co-organisateur dans une seule partie, c’est la partie évènement ou le membre peut participer à un évènement. o Page d’évènements : En haut de la page, il y a les informations concernant l’évènement : Intérêt, organisateur, image, lieu, … Ainsi pour un membre il peut donner un Rating concernant l’évènement. En bas il y a la barre de navigation qui permet à l’utilisateur de naviguer entre les fonctionnalités de la page évènement. Et cela se diffère d’un type d’utilisateur à un autre : a) Organisateur et Co-organisateur : o Participants : Il liste les différents participants à l’évènement : L’organisateur peut supprimer un Membre : o Album : Est la même pour tout utilisateur, il liste les différents photos ajoutés par les gens qui ont assistés à l’évènement. Le détail de la photo Chaque utilisateur peut ajouter une nouvelle photo en la joindre depuis son ordinateur : o Fichiers : L’organisateur peut envoyer un lien d’invitation à l’évènement via E-mail à une personne externe Nombre de participants Il affiche les différents fichiers ajoutés par l’organisateur ou le co-organisateur de l’évènement qui concerne le déroulement ou l’annonce de l’évènement Soit des fichiers PDF ou Image. o Forum : C’est forum ou tous les utilisateurs peuvent discuter entre eux. b) Membre : Le membre peut naviguer sur les 3 rubriques Forum, Album et Fichiers Seul l’organisateur et le co- organisateur qui peuvent ajouter des fichiers Et pour les fichiers, il ne peut pas ajouter de nouveaux fichiers. Page Profil : D’abord si l’utilisateur est connecté la barre de navigation de l’application change : Il y aura deux boutons, un pour lister les notifications reçues, et l’autre pour afficher le profil ou pour se déconnecter. Le profil contient tous les informations concernant un utilisateur. Une partie qui affiche la photo, le nom, la localisation et la date de création de compte de l’utilisateur, l’autre partie contient les communautés dont il fait partie, ses intérêts et son parcours d’évènements. uploads/s1/ developpement-front.pdf