Want to make creations as awesome as this one?

Transcript

Projet de fin de formation

Présenté par Erwann Martin

École O'clock Promo Wonderland 2020

Sommaire

Prèsentation

Contexte du projet

Conception et codage

Éléments significatif de l'application

Jeu d'essai

Exemple de recherche

Conclusion

Présentation

Mon parcour

Ma vie professionnelle

Mes premieres lignes de codes

Présentation

La formation

5 mois de formation

- 3 mois de socle

- 1 mois de spé React

- 1 mois de projet

Contexte du projet

Présentation du projet

Comment nous est venu l'idée ?

A qui s'adresse l'application ?

A quel besoin a-t-on chercher a repondre ?

Contexte du projet

Notre équipe

Jennifer Chaul

Product manager

Back-end

Brice Correia

Scrum Master

Back-end

Khaled Abdelhak

Lead developer

Front-end

Erwann Martin

Git master

Front-end

Cédric Trouvé

Technical lead

Front-end

Contexte du projet

Environement de travail et outils utilisés

Contexte du projet

Technologies utilisées

Conception et codage

Conception

MVP

Cahier des charges

  • Page d'accueil avec accès aux détails d'événements et possibilité de choisir son département
  • Inscription/connexion
  • Dashboard avec les événements sauvegardé et créé
  • Espace commentaire pour communiquer sur l'événement.

Wireframes

Version desktop non-connecté

Wireframes

Version desktop connecté

Wireframes

Version mobile non-connecté

MCD

Users Story

  • En tant que guest/user, je peux voir les derniers évènements créés.
  • En tant que guest/user, je peux voir le détail des évènements
  • En tant que guest, je peux me créer un compte.
  • En tant que user, je peux me connecter à mon compte.
  • En tant que user, je peux modifier mon profil.
  • En tant que user, je peux créer/modifier/supprimer un évènement.
  • En tant que user, je peux participer à un évènement.
  • En tant que user, je peux interagir avec le créateur d'évènements.
  • En tant que user, je peux consulter mon dashboard.
  • En tant que user, je peux valider la participation d'un joueur.
  • En tant que user, je peux répondre aux interrogations des participants.

  • En tant qu'admin, je veux pouvoir me connecter à l'interface d'admin du site.
  • En tant qu'admin, je peux supprimer/modifier un user.
  • En tant qu'admin, je peux supprimer/modifier un évènement.
  • En tant qu'admin, je peux ajouter/modifier/supprimer un jeu.
  • En tant qu'admin, je peux ajouter/modifier/supprimer une catégorie.

FrontOffice :

BackOffice :

Code Front-end

Map/index.jsx

action/event.jsx

Récupération du département

Création d'une action

Click sur un departement

Code Front-end

reducers/event.js

Mise à jour de l'état de l'application

État initial de l'application

Click sur un departement

Code Front-end

Mise a jour des événements

action/event.jsx

Middleware/api.js

HomeGrid/index.jsx

Appel de la fonction getEventByArea avec en argument le state mis à jour plus tôt

Envoi de la requête vers la route api par le middleware

Appel de la fonction saveEventByArea avec en argument le résultat de la requête

Mise a jour des événements

Code Front-end

Mise à jour du state

Affichage

reducers/event.js

action/event.jsx

HomeGrid/index.jsx

Code Back-end

Route api à qui l'on a envoyé une requête plus tôt

src/Controller/Api/V1/EventController.php

Utilisation de la méthode findBy de Doctrine

packages/security.yaml

Controlle d'accès de l'utilisateur en fonction de son rôle

Code Back-end

Extrait de l'entité Event

src/Entity/Event.php

Code Back-end

Extrait du repository Event

src/Repository/EventRepository.php

Circulation de la donnée

Click sur la carte

Mise à jour du state avec le numéro de département choisi

Récupération du numéro de département dans le state

Requête à l'api dans le middleware

Réponse de la base de données au controller

Envoi des données obtenu au front avec un code http

Mise à jour du state avec les données obtenu par l'api

Récupération des données dans le state

Affichage des événements grâce a une boucle

Vérificaton des droits d'accès de l'utilisateur

Envoi de la requête à la base de données

Éléments les plus significatif de l'application

Carte intéractive

Formulaire de connection

Dashboard

Détails d'événements

Espace commentaire

Ajout d'un événement

Une petite démo ?

Jeu d'essai

Données en entrée

L'utilisateur choisi un département (ici l'Oise)

Jeu d'essai

Données attendues

Dans la liste des événements, il ne doit apparaître que les événements dans l'Oise

Jeu d'essai

Données obtenues

Dans la liste des événements, il y a bien que les événements dans l'Oise qui apparaissent

Et dans la console, on peut voir dans chaque objet que l'attribut area contient 60. (donc l'Oise)

Exemple de recherche en anglais

make an oblique div with css

Source : stackoverflow.com

clip-path

Source : developer.mozilla.org

clip-path polygon explanation

Source : dev.to

Conclusion

Synthèse

Satisfaction

Difficultées rencontrées

Évolutions envisagées

M

e

r

c

i

!