![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904269/logoV2.png)
TEAM OPOSSUM
G. LACHAUD, N. MENEUX, A. OBERTELLI, V. OSTERTAG, A. VERVAET
Mercredi 13 juin 2017
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Plan de la soutenance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904337/plan.png)
Introduction
Démonstration
Front End / Autres fonctionnalités
Back End
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Pour aller plus loin
INTRODUCTION
Qui sont les Opossums ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554820/Question_Block.png)
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554863/9518.jpg)
(dans l'ordre alphabétique)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904564/9205.jpg)
Guillaume LACHAUD
Nicolas MENEUX
Grand admirateur de LaTeX et des .svg
L'Opossum qui fait définitivement pas du M
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554881/8185.jpg)
Alexandra OBERTELLI
Son Bescherelle est sa bible
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554864/9589.jpg)
Qui sont les Opossums ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554820/Question_Block.png)
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Arthur VERVAET
Opossum ayant escaladé le plus grand des arbres
(dans l'ordre alphabétique)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554866/9533.jpg)
Victor OSTERTAG
Aime en faire trop sur les slides
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904630/Icon-mystery-shopping-417x417-1-.png)
ISEPReact... C'est quoi ?
(Rappel du sujet)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554821/53423.png)
Un site web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904635/b354bc4707224bd3d15b9ae36eca70c0-male-student-cartoon-by-vexels.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904637/686ab100dddd65fc0ea71e7bb4c3db6f-lady-teacher-cartoon-by-vexels.png)
Améliorer la communication
Prof
Elève
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/2927193/loupe.png)
Sous le contrôle de l'administration
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904673/2000px-Current_event_clock_3D.svg.png)
DEMONSTRATION
(10 minutes)
FRONT END
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904842/HTML5_CSS_JavaScript.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904975/getbootstrap-card.png)
chart.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904982/jquery-ui.png)
jquery-ui
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904985/momentjs_0.png)
moment.js
bootstrap-datepicker
JQCloud
notifyjs
emojis.css
icheck-bootstrap.css
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3718050/Custom-Coding__1_.png)
Principe général
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904975/getbootstrap-card.png)
CSS externe
(emojis, checkbox, ...)
Notre CSS
(ex : code couleur ISEP)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905379/heart_PNG687.png)
Le coeur du
design du site
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3718050/Custom-Coding__1_.png)
Principe général
Bouton / Formulaire
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905316/dedo.png)
Modification du DOM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3801904/work-icon-informatique-musique-cinma-2.png)
Traitement de la demande dans le back
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905330/rsz_1green-check-mark-png.png)
Vérification des erreurs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905334/52453.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904982/jquery-ui.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904985/momentjs_0.png)
Autres fonctionnalités
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
- LDAP
- Modification du module
- Dossiers commentaires / questionnaires
- QCM avec ou sans
- Commentaire supprimé chez élève pas chez prof ou inverse
- Snake
BACK END
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905438/spring-boot-project-logo.png)
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Spring Boot
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905445/spring.jpg)
Partie Back
Partie Front
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905454/thymeleaf.png)
Thymeleaf
Fragments
Éléments ajoutés à la création de la BDD
Controller
Model
Repository
Service
Configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905459/Lock.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905461/Java_avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905461/Java_avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905463/37218.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905463/37218.png)
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3718050/Custom-Coding__1_.png)
Principe général
Controller
@RequestMapping(path="/urlAChoisir")
Méthodes
@PostMapping / @RequestMapping / @GetMapping (path="/urlSuite")
(url final = /urlAChoisir/urlSuite)
return @ResponseBody / Vue (avec des attributs utilisables) / ...
Appels / Actions sur la BDD
Remplissage des variables / Génération du retour
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Models
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905463/37218.png)
User
Module
Questionnaire
Question
Answer
Commentaire
Conversation
CommentaireLive
Folder
Template
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Models
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905463/37218.png)
Chaque modèle possède différents arguments et différentes méthodes
(soit dans le modèle, soit dans un service associé)
Construction de la BDD grâce à cela, automatiquement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905516/construction-icon-19.png)
POUR ALLER PLUS LOIN
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Ce que nous aurions voulu faire en plus
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905528/28083.png)
WebSocket pour le live
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905537/server_PNG8.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905538/Computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905541/handshake.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905542/Wiki_clean.png)
Cleaner certaines parties du code
Variables en null dans la BDD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905543/notification_error.png)
ISEPReact | Opossums
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3554730/tavi_opossum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3904315/ISEP_logo.png)
Ce que nous aurions voulu faire en plus
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905528/28083.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905546/1454878052_business-calendar-2-logotip.png)
Questionnaires périodiques
![](https://s3.amazonaws.com/media-p.slid.es/uploads/520869/images/3905548/email-marketing-icon-email-icon-1.png)
Emails
MERCI !
ISEPReact
By isvoli
ISEPReact
Présentation du site ISEPReact
- 794