CAW1 2019 Projet de Dylan FAYANT et Marylie LIMOUSIN : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Liens pratiques)
 
(30 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 8 : Ligne 8 :
 
}}
 
}}
  
'''Pitoupi''' est une application WEB de mise en relation consacrée à la reproduction des animaux.
+
'''Pitoupi''' est une application WEB de mise en relation consacrée à la reproduction des animaux.  
  
Elle a été developpée dans le cadre d'un projet de développement d'application web en deuxième année d'apprentissage à l'ENSIMAG, par Dylan FAYANT et Marylie LIMOUSIN.
+
L'application a été développée dans le cadre d'un projet de développement d'application web en deuxième année d'apprentissage à l'ENSIMAG, par Dylan FAYANT et Marylie LIMOUSIN.
  
 
= Présentation du projet =
 
= Présentation du projet =
 
== Description ==
 
== Description ==
  
== Objectifs ==
+
'''Pitoupi''' est une application WEB permermettant de mettre en relation des maîtres désireux de faire reproduire leurs animaux. Les maîtres peuvent ajouter tous leurs animaux (espèce, race, âge, photo, description, sexe), sélectionner les animaux qui les intéressent pour la reproduction par un système de like/dislike, et voir la fiche d'animaux compatibles si les maîtres de ces derniers ont aussi validé leur animal. Pitoupi dispose d'un système de météo pour que les utilisateurs puisse savoir quel temps il fait dans le ville (afin de sortir ou non leurs animaux).
  
!!! WORK IN PROGRESS !!!
+
== Screencast ==
 +
Vidéo de présentation des fonctionnalités de l'application Pitoupi : '''[https://www.youtube.com/watch?v=cRNEhVUCV98&feature=youtu.be Youtube]'''
  
[ ] Différents rôles : visiteur, utilisateur et administrateur <br>
+
== Objectifs ==
[ ] Fonctionne sur plusieurs plateformes (ordinateur, mobile) <br>
+
 
[ ] Mise en place de jeux de tests unitaires <br>
+
[V] Gestion des utilisateurs et des comptes (création de compte, connexion, déconnexion) <br>
[ ] Mise en place de jeux de tests fonctionnels <br>
+
[V] Ajouter, voir, modifier, supprimer un animal <br>
[ ] <br>
+
[V] Rechercher des Ani'Matchs pour un animal <br>
[ ] S'inscrire, se connecter, se déconnecter <br>
+
[±] Consulter les Ani'Matchs d'un animal et contacter le propriétaire ('''manque le contact des propriétaires''') <br>
 +
[x] Proposer une interface d'administration pour valider ou non les animaux et pour ajouter des espèces et des races ('''nous n'avons pas eu le temps''')
  
 
= Modélisation =  
 
= Modélisation =  
 
== Cas d'usage ==
 
== Cas d'usage ==
 
+
[[Fichier:UseCase_(1).png]]
 
== Modèle de données ==
 
== Modèle de données ==
 +
[[Fichier:ModeleBDD.png]]
  
== Architecture ==  
+
== Balsamiq ==
 +
Afin de modéliser le visuel de nos pages, nous avons utilisé Balsamiq :
 +
[[Fichier:Pitoupi_Balsamiq.pdf]]
 +
 
 +
= Architecture =
 +
 
 +
== API ==
 +
 
 +
{| class="wikitable alternance center"
 +
|+ Tableau récapitulatif
 +
|-
 +
| scope="col" | Routes
 +
! scope="col" | GET
 +
! scope="col" | POST
 +
! scope="col" | PUT
 +
! scope="col" | DELETE
 +
|-
 +
! scope="row" | /compte
 +
| Renvoie la liste des comptes utilisateurs <br>CR 200
 +
| Crée un compte utilisateur<br>CR 200
 +
| -
 +
| -
 +
|-
 +
! scope="row" | /compte/email
 +
| -
 +
| Retourne un compte associé à l'adresse <adresse_mail> passée dans le body sous format JSON <br>CR 200
 +
| -
 +
| -
 +
|-
 +
! scope="row" | /compte/<id>
 +
| Retourne un compte associé à l'identifiant <id> <br>CR 200
 +
| Ajoute l'animal <animalId> passé dans le body sous format JSON au compte <id> passé dans l'URL <br>CR 200
 +
| Modifie le compte associé à l'identifiant <id> <br>CR 200
 +
| Supprime le compte associé à l'identifiant <id> <br>CR 200
 +
|-
 +
! scope="row" | /compte/<id>/check_password
 +
| -
 +
| Vérifie si le mot de passe <mot_de_passe> passé dans le body sous format JSON correspond à celui du compte <id> passé dans l'URL <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" |
 +
|
 +
|
 +
|
 +
|
 +
|-
 +
| ! scope="row" | <b>/animal</b>
 +
| Renvoie la liste des animaux <br>CR 200
 +
| Crée un animal <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/animal/<id></b>
 +
| Retourne un animal associé à l'identifiant <id> <br>CR 200
 +
| Défini la race <raceId> passée dans le body sous format JSON à l'animal <id> passé dans l'URL <br>CR 200
 +
| Modifie l'animal associé à l'identifiant <id> <br>CR 200
 +
| Supprime l'animal associé à l'identifiant <id> <br>CR 200
 +
|-
 +
| ! scope="row" | <b>/animal/<id>/matchsSucces</b>
 +
| Retourne la liste des ID des animaux qui ont marché avec l'animal <id> passé dans l'URL <br>CR 200
 +
| -
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/animal/<id>/toMatch</b>
 +
| Retourne la liste des ID des animaux avec qui l'animal <id> passé dans l'URL doit (ou non) matcher <br>CR 200
 +
| -
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" |
 +
|
 +
|
 +
|
 +
|
 +
|-
 +
| ! scope="row" | <b>/match</b>
 +
| Renvoie la liste des matchs <br>CR 200
 +
| Crée un match <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/match/makeMatch</b>
 +
| Crée (ou modifie) un match entre l'animal <animal_matcheur> passé dans le body sous format JSON et l'animal <animal_matche> passé dans le body sous format JSON. Si c'est un like il faut mettre la variable <match> passée dans le body sous format JSON à "true" sinon à "false" <br>CR 200
 +
| Crée un match <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/match/<id></b>
 +
| Retourne un match associé à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| -
 +
| Modifie l'animal associé à l'identifiant <id> passé dans l'URL
 +
| Supprime l'animal associé à l'identifiant <id> passé dans l'URL
 +
|-
 +
| ! scope="row" |
 +
|
 +
|
 +
|
 +
|
 +
|-
 +
| ! scope="row" | <b>/race</b>
 +
| Renvoie la liste des races <br>CR 200
 +
| Crée une race <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/race/<id></b>
 +
| Retourne une race associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| Modifie la race associée à l'identifiant <id> passé dans l'URL pour y mettre l'espèce <especeId> passée dans le body sous le format JSON <br>CR 200
 +
| Modifie la race associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| Supprime la race associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
|-
 +
| ! scope="row" |
 +
|
 +
|
 +
|
 +
|
 +
|-
 +
| ! scope="row" | <b>/espece</b>
 +
| Renvoie la liste des espèces <br>CR 200
 +
| Crée une espèce <br>CR 200
 +
| -
 +
| -
 +
|-
 +
| ! scope="row" | <b>/espece/<id></b>
 +
| Retourne une espèce associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| -
 +
| Modifie la espèce associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| Supprime la espèce associée à l'identifiant <id> passé dans l'URL <br>CR 200
 +
|-
 +
| ! scope="row" | <b>/espece/<id>/races</b>
 +
| Retourne les races associées à l'espèce correspondant à l'identifiant <id> passé dans l'URL <br>CR 200
 +
| -
 +
| -
 +
| -
 +
|-
 +
|}
  
 
= Choix techniques =
 
= Choix techniques =
 +
 +
== Back-end ==
 +
Le back-end a été réalisé avec la technologie '''[https://nodejs.org/en/ Node.js]''' (version 10.16.0) et le framework '''[https://expressjs.com Express]''' (version 4.17.11).<br>
 +
Nous avons souhaité utiliser ces technologies car elles nous étaient inconnues. De plus nous voulions effectuer tout notre projet en Javascript afin de voir quelle était la plus-value des outils disponibles dans cet écosystème grandissant.
 +
 +
== Front-end == 
 +
Le front-end a été réalisé avec la technologie '''[https://angular.io Angular]''' (version 7.2.15) et le framework '''[https://getbootstrap.com Bootstrap]''' (version 4.3.1).<br>
 +
Nous voulions découvrir la technologie Angular tout en profitant de nos connaissances en Bootstrap pour approfondir notre maîtrise du Framework. De plus Bootstrap bénéficie d'une large communauté capable de nous aider en cas de bloquage.
 +
 +
== Tests ==
 +
Les tests front-end ont été réalisé à partir de Selenium ('''script .side présent à la racine du GitLab''').
 +
 +
Les tests back-end ont, quant à eux, été réalisé à partir de Chai et de Chai HTTP ('''répertoire : /backend/tests''')
 +
 +
== Docker ==
 +
Pour notre infrastructure nous avons décidé d'utiliser les outils Docker et Docker Compose. Docker Compose est utilisé pour automatiser le déploiement et le chaînage de plusieurs containers Dockers.<br>
 +
Notre infrastructure est composée comme suit : <br>
 +
- '''/''' : la racine contient le fichier docker-compose.yml qui contient les règles de lancement de nos trois containers principaux (Frontend, Backend et Test Backend). <br>
 +
- '''/frontend''' : le dossier Frontend contient notre projet Angular ainsi que le Dockerfile pour lancer le container dédié au Frontend. <br>
 +
- '''/backend''' : le dossier Backend contient notre projet Express ainsi que le Dockerfile pour lancer le container dédié au Backend. <br>
 +
- '''/backend/tests/''' : le dossier Tests contient tous nos tests baskets liés au projet Express. <br>
 +
<br>
 +
Pour lancer le projet général il faut installer docker et docker-compose, se placer à la racine et taper la commande '''docker-compose up''' <br>
 +
Pour lancer les tests backend il faut arrêter le projet '''docker-compose down''' (le backend de test utilise le même port que le backend normal) et lancer la commande '''docker-compose up express-test'''
 +
 +
== API utilisée ==
 +
Nous avons décidés d'utiliser l'API météo '''[https://openweathermap.org OpenWeatherMap]''' présente sur notre page '''mes-animaux''' de notre site. Elle nous permet d'afficher la météo chez les propriétaires des animaux en fonction du code postal qu'ils ont entré à l'inscription.
 +
 +
== Liens pratiques ==
 +
'''[http://37.187.101.226 http://37.187.101.226/]''' : lien du site en marche sur notre serveur de développement <br>
 +
'''[https://gitlab.ensimag.fr/fayantd/pitoupi https://gitlab.ensimag.fr/fayantd/pitoupi]''' : lien du projet Gitlab

Version actuelle en date du 10 juin 2019 à 11:02

Image: 200 pixels
Titre du projet Pitoupi
Cadre Projet Web 2AA 2019
Page principale CAW1_Demonstration_Realisation

Équipe Dylan FAYANT, Marylie LIMOUSIN
Encadrants Sébastien Viardot


Pitoupi est une application WEB de mise en relation consacrée à la reproduction des animaux.

L'application a été développée dans le cadre d'un projet de développement d'application web en deuxième année d'apprentissage à l'ENSIMAG, par Dylan FAYANT et Marylie LIMOUSIN.

Présentation du projet

Description

Pitoupi est une application WEB permermettant de mettre en relation des maîtres désireux de faire reproduire leurs animaux. Les maîtres peuvent ajouter tous leurs animaux (espèce, race, âge, photo, description, sexe), sélectionner les animaux qui les intéressent pour la reproduction par un système de like/dislike, et voir la fiche d'animaux compatibles si les maîtres de ces derniers ont aussi validé leur animal. Pitoupi dispose d'un système de météo pour que les utilisateurs puisse savoir quel temps il fait dans le ville (afin de sortir ou non leurs animaux).

Screencast

Vidéo de présentation des fonctionnalités de l'application Pitoupi : Youtube

Objectifs

[V] Gestion des utilisateurs et des comptes (création de compte, connexion, déconnexion)
[V] Ajouter, voir, modifier, supprimer un animal
[V] Rechercher des Ani'Matchs pour un animal
[±] Consulter les Ani'Matchs d'un animal et contacter le propriétaire (manque le contact des propriétaires)
[x] Proposer une interface d'administration pour valider ou non les animaux et pour ajouter des espèces et des races (nous n'avons pas eu le temps)

Modélisation

Cas d'usage

UseCase (1).png

Modèle de données

ModeleBDD.png

Balsamiq

Afin de modéliser le visuel de nos pages, nous avons utilisé Balsamiq : Fichier:Pitoupi Balsamiq.pdf

Architecture

API

Tableau récapitulatif
Routes GET POST PUT DELETE
/compte Renvoie la liste des comptes utilisateurs
CR 200
Crée un compte utilisateur
CR 200
- -
/compte/email - Retourne un compte associé à l'adresse <adresse_mail> passée dans le body sous format JSON
CR 200
- -
/compte/<id> Retourne un compte associé à l'identifiant <id>
CR 200
Ajoute l'animal <animalId> passé dans le body sous format JSON au compte <id> passé dans l'URL
CR 200
Modifie le compte associé à l'identifiant <id>
CR 200
Supprime le compte associé à l'identifiant <id>
CR 200
/compte/<id>/check_password - Vérifie si le mot de passe <mot_de_passe> passé dans le body sous format JSON correspond à celui du compte <id> passé dans l'URL
CR 200
- -
/animal Renvoie la liste des animaux
CR 200
Crée un animal
CR 200
- -
/animal/<id> Retourne un animal associé à l'identifiant <id>
CR 200
Défini la race <raceId> passée dans le body sous format JSON à l'animal <id> passé dans l'URL
CR 200
Modifie l'animal associé à l'identifiant <id>
CR 200
Supprime l'animal associé à l'identifiant <id>
CR 200
/animal/<id>/matchsSucces Retourne la liste des ID des animaux qui ont marché avec l'animal <id> passé dans l'URL
CR 200
- - -
/animal/<id>/toMatch Retourne la liste des ID des animaux avec qui l'animal <id> passé dans l'URL doit (ou non) matcher
CR 200
- - -
/match Renvoie la liste des matchs
CR 200
Crée un match
CR 200
- -
/match/makeMatch Crée (ou modifie) un match entre l'animal <animal_matcheur> passé dans le body sous format JSON et l'animal <animal_matche> passé dans le body sous format JSON. Si c'est un like il faut mettre la variable <match> passée dans le body sous format JSON à "true" sinon à "false"
CR 200
Crée un match
CR 200
- -
/match/<id> Retourne un match associé à l'identifiant <id> passé dans l'URL
CR 200
- Modifie l'animal associé à l'identifiant <id> passé dans l'URL Supprime l'animal associé à l'identifiant <id> passé dans l'URL
/race Renvoie la liste des races
CR 200
Crée une race
CR 200
- -
/race/<id> Retourne une race associée à l'identifiant <id> passé dans l'URL
CR 200
Modifie la race associée à l'identifiant <id> passé dans l'URL pour y mettre l'espèce <especeId> passée dans le body sous le format JSON
CR 200
Modifie la race associée à l'identifiant <id> passé dans l'URL
CR 200
Supprime la race associée à l'identifiant <id> passé dans l'URL
CR 200
/espece Renvoie la liste des espèces
CR 200
Crée une espèce
CR 200
- -
/espece/<id> Retourne une espèce associée à l'identifiant <id> passé dans l'URL
CR 200
- Modifie la espèce associée à l'identifiant <id> passé dans l'URL
CR 200
Supprime la espèce associée à l'identifiant <id> passé dans l'URL
CR 200
/espece/<id>/races Retourne les races associées à l'espèce correspondant à l'identifiant <id> passé dans l'URL
CR 200
- - -

Choix techniques

Back-end

Le back-end a été réalisé avec la technologie Node.js (version 10.16.0) et le framework Express (version 4.17.11).
Nous avons souhaité utiliser ces technologies car elles nous étaient inconnues. De plus nous voulions effectuer tout notre projet en Javascript afin de voir quelle était la plus-value des outils disponibles dans cet écosystème grandissant.

Front-end

Le front-end a été réalisé avec la technologie Angular (version 7.2.15) et le framework Bootstrap (version 4.3.1).
Nous voulions découvrir la technologie Angular tout en profitant de nos connaissances en Bootstrap pour approfondir notre maîtrise du Framework. De plus Bootstrap bénéficie d'une large communauté capable de nous aider en cas de bloquage.

Tests

Les tests front-end ont été réalisé à partir de Selenium (script .side présent à la racine du GitLab).

Les tests back-end ont, quant à eux, été réalisé à partir de Chai et de Chai HTTP (répertoire : /backend/tests)

Docker

Pour notre infrastructure nous avons décidé d'utiliser les outils Docker et Docker Compose. Docker Compose est utilisé pour automatiser le déploiement et le chaînage de plusieurs containers Dockers.
Notre infrastructure est composée comme suit :
- / : la racine contient le fichier docker-compose.yml qui contient les règles de lancement de nos trois containers principaux (Frontend, Backend et Test Backend).
- /frontend : le dossier Frontend contient notre projet Angular ainsi que le Dockerfile pour lancer le container dédié au Frontend.
- /backend : le dossier Backend contient notre projet Express ainsi que le Dockerfile pour lancer le container dédié au Backend.
- /backend/tests/ : le dossier Tests contient tous nos tests baskets liés au projet Express.

Pour lancer le projet général il faut installer docker et docker-compose, se placer à la racine et taper la commande docker-compose up
Pour lancer les tests backend il faut arrêter le projet docker-compose down (le backend de test utilise le même port que le backend normal) et lancer la commande docker-compose up express-test

API utilisée

Nous avons décidés d'utiliser l'API météo OpenWeatherMap présente sur notre page mes-animaux de notre site. Elle nous permet d'afficher la météo chez les propriétaires des animaux en fonction du code postal qu'ils ont entré à l'inscription.

Liens pratiques

http://37.187.101.226/ : lien du site en marche sur notre serveur de développement
https://gitlab.ensimag.fr/fayantd/pitoupi : lien du projet Gitlab