CAW1 2017 Projet de Lucas BUFFO, Théo DEPRESLE, Aurélien LAVIRON : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Modèle de la base de donnée)
 
(2 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 5 : Ligne 5 :
 
  |encadrants=[mailto:sebastien.viardot@grenoble-inp.fr Sebastien Viardot]}}
 
  |encadrants=[mailto:sebastien.viardot@grenoble-inp.fr Sebastien Viardot]}}
  
= Présentation du projet =  
+
= Présentation du projet =
 +
 
 +
Application : [https://drive.google.com/open?id=0BxUk6rE2r1kHUlQ1RWhVZ2MxVmc Screen Cast !]
  
Application : 
 
 
Git : https://tpth.dev-bs.com/gitlab/ensimag/KYMap
 
Git : https://tpth.dev-bs.com/gitlab/ensimag/KYMap
  
Ligne 13 : Ligne 14 :
 
== Contexte général ==
 
== Contexte général ==
  
Cette application a pour but de visualiser et de partager si on le souhaite ses destinations de voyage. Vous pourrez saisir vos voyages et leurs différentes étapes. Par la suite vous pourrez retrouver vos trajets et visualiser les différents pays visités et obtenir différentes statistiques pour narguer vos collègues.  
+
Cette application a pour but de visualiser et de partager si on le souhaite ses destinations de voyage. Vous pourrez saisir vos voyages et leurs différentes étapes. Par la suite vous pourrez retrouver vos trajets et visualiser les différents pays visités et obtenir différentes statistiques pour narguer vos collègues.
 
Puisque c'est pas gentil d'être méchant, vous pourrez notez vos trips pour éviter à Michel d'aller passer 3 semaines humides au fond de la creuse.
 
Puisque c'est pas gentil d'être méchant, vous pourrez notez vos trips pour éviter à Michel d'aller passer 3 semaines humides au fond de la creuse.
  
Ligne 23 : Ligne 24 :
 
*** Date
 
*** Date
 
*** Commentaire
 
*** Commentaire
*** Éventuellement un ajout de photos
+
*** Éventuellement un ajout de photos (Pas encore réalisé)
 
** Appréciation générale du voyage
 
** Appréciation générale du voyage
 
* Consultation des voyages sur la carte
 
* Consultation des voyages sur la carte
* Statistiques sur les voyages et l'exploration du monde
+
* Statistiques sur les voyages et l'exploration du monde (Pas encore réalisé)
 
* Gestion de la confidentialité pour chaque voyage
 
* Gestion de la confidentialité pour chaque voyage
** Public : Le voyage sera visible sur votre profil
+
** Public : Le voyage sera visible sur votre profil (Pas encore réalisé)
 
** Privé : Seul vous pourrez le visualiser
 
** Privé : Seul vous pourrez le visualiser
 
** Partagé : Partagez le trajet seulement avec les gens que vous aimez vraiment. Soit avec un lien à envoyer à votre grand mère. Soit en ajoutant vos amis.
 
** Partagé : Partagez le trajet seulement avec les gens que vous aimez vraiment. Soit avec un lien à envoyer à votre grand mère. Soit en ajoutant vos amis.
Ligne 35 : Ligne 36 :
  
 
Le projet est basé sur Django pour la partie Backend.
 
Le projet est basé sur Django pour la partie Backend.
Les API Google Maps pour le frontend.
+
Les API Google Maps pour le frontend :
  
L'infra sera supportée par AWS !
+
* Google Maps Javascript API pour afficher la carte et tracer les trajets. Aussi utilisé pour automatiquement compléter l'input de recherche de lieu lors de la création.
 +
 
 +
* Le Geocoding API pour traduire un lieu en latitude-longitude
 +
 
 +
L'API Google OAuth 2.0 sur Django pour le Backend
 +
 
 +
* Google OAuth 2.0 permet de s'authentifier avec son compte google plus.
  
 
Bootstrap 4 (en version alpha #JouerAvecLeFeu) : https://v4-alpha.getbootstrap.com
 
Bootstrap 4 (en version alpha #JouerAvecLeFeu) : https://v4-alpha.getbootstrap.com
 +
 
Font-awesome : http://fontawesome.io/
 
Font-awesome : http://fontawesome.io/
 +
 
Django : http://www.django-fr.org/
 
Django : http://www.django-fr.org/
 +
 
Jquery : https://jquery.com/
 
Jquery : https://jquery.com/
  
Ligne 50 : Ligne 60 :
  
 
L'ensemble des trajet étant propre à chaque utilisateur, celui-ci doit se connecter.
 
L'ensemble des trajet étant propre à chaque utilisateur, celui-ci doit se connecter.
Il doit donc saisir un login et un mot de passe.
+
Il doit donc saisir un login et un mot de passe ou passer par la connexion Google plus.
  
  
Ligne 72 : Ligne 82 :
  
  
* Ville ou position visitée (Appel à l'API Google Maps pour obtenir une auto complétion)  
+
* Ville ou position visitée (Appel à l'API Google Maps pour obtenir une auto complétion)
 
* Date de la visite (Possible de choisir une plage)
 
* Date de la visite (Possible de choisir une plage)
 
* Accessoirement : Commentaire
 
* Accessoirement : Commentaire
Ligne 83 : Ligne 93 :
 
L'utilisateur à la possibilité de créer un groupe avec ses amis pour partager ses voyages.
 
L'utilisateur à la possibilité de créer un groupe avec ses amis pour partager ses voyages.
 
Il devra choisir :
 
Il devra choisir :
 
  
 
* Un nom
 
* Un nom
Ligne 90 : Ligne 99 :
 
= Modèle de la base de donnée =
 
= Modèle de la base de donnée =
  
Nous avons choisis un modèle simple pour notre base de donnée.  
+
Nous avons choisis un modèle simple pour notre base de donnée.
 +
 
 
Les classes principales définissent les voyages et les étapes
 
Les classes principales définissent les voyages et les étapes
  
Ligne 96 : Ligne 106 :
  
 
= Mettre en place l'environnement de test =
 
= Mettre en place l'environnement de test =
 +
Pour faire tourner les tests sur le repository Gitlab, nous avons mis en place une image docker avec tout le nécessaire pour faire tourner les tests (django, selenium et leurs dépendances). Or, selenium nécessite une interface graphique, nous n'avons pas réussi à le configurer sur le serveur. Nous avons donc déssactivé par défaut les tests sélénium, que nous testions chez nous en local.
  
 +
Nous avons donc deux types de tests : les tests Django, qui test l'API, le modèle et la partie login. Nous avons aussi des tests Sélénium pour tester les vues.
 +
 +
== Utilisation de l'API Google OAuth 2.0 ==
 +
 +
Pour gérer l'utilisation d'un web service, nous avons choisi d'utiliser le service d'authentification de Google OAuth 2.0.
 +
Un bouton est disponible sur la page principale de l'application. Si l'utilisateur n'est pas déjà inscrit dans notre base, nous l'inscrivons automatiquement avec les informations associés à son compte (email, nom, prénom). Sinon l'utilisateur est automatiquement connecté. Dans les deux cas, la connexion se fait de manière transparente pour l'utilisateur.
 +
 +
== Utilisation d'AWS ==
 +
 +
Dans le cadre du partenariat entre Amazon web Services et l'ENSIMAG nous avons pu
 +
d'une formation sur les solutions clouds d'Amazon.
 +
 +
Ce projet tombait à pic pour expérimenter la plateforme d'AWS et ses solutions
 +
de virtualisations et de bases de données.
 +
 +
=== RDS : Base de donnée ===
 +
 +
Pour disposer d'une base de données communes pendant nos dévellopements nous avons
 +
mis en place une base de donnée PostgreSQL sur le service RDS d'Amazon.
 +
 +
La base est éligible à l'opération "Free Tier" d'AWS, vous disposer pendant un
 +
an de 750 H/mois pour utiliser gratuitement une base RDS.
 +
 +
La configuration de cette base de donnée est trés simple à l'aide de la console AWS.
 +
Nous avons du modifier le port par défault vers le port 8080 afin de pouvoir y
 +
accéder à travers les pare-feux de RENATER..
 +
 +
=== EBS : Déploiement de code ===
 +
 +
Nous avons voulu déployer notre application dans le cloud, pour cela, il existe
 +
un service clefs en main, Elastic Beanstalk. Cet outils combine intelligement les
 +
différents outils disponible sur AWS (S3 pour le stockage des fichiers,
 +
EC2 pour les machines virtuelles).
 +
 +
Une instance (t1.micro, également éligible au "Free Tier") installé par défaut,
 +
avec python et un serveur apache va héberger notre site au travers d'une application
 +
WSGI. Pour que tout fonctionne correctement, il faut spécifier à Amazon
 +
les dépendances de notre projet.
 +
 +
Ceci ce passe à deux niveaux :
 +
- Le fichier `/requirements.txt` qui contient toutes les dépendances python.
 +
- Le dossier `/.ebextensions/` qui va contenir les dépendances et les paramètres à configurer dans la VM.
 +
 +
On peut ensuite déployer le code soit via navigateur avec un zip, soit via l'outils en ligne de commande d'AWS.
 +
 +
= Processus d'installation =
 +
 +
== Installer Python 3 ==
 +
sudo apt-get install python3
  
 
== Outils à installer ==
 
== Outils à installer ==
 +
Installer les dépendances listées dans le fichier requirements.txt.
 +
 +
Elles peuvent être installé automatiquement avec sudo pip install -r requirements.txt.
 +
 +
== Base de donnée à initialiser ==
 +
 +
* python3 manage.py makemigrations
 +
* python3 manage.py migrate
 +
* python3 manage.py loaddata fixtures.json
 +
 +
== Lancer le serveur ==
 +
python3 manage.py runserver
 +
 +
Accéder à l'application avec 127.0.0.1:8000 avec les logins :
 +
 +
* admin / admin1234
 +
* lavirona / admin1234
 +
 +
== Lancer les tests ==
 +
python3 manage.py test

Version actuelle en date du 5 juin 2017 à 15:40

Project schedule.png
Titre du projet KYMap
Cadre CAW1 Demonstration Realisation

Équipe Lucas BUFFO Théo DEPRESLE Aurélien LAVIRON
Encadrants Sebastien Viardot


Présentation du projet

Application : Screen Cast !

Git : https://tpth.dev-bs.com/gitlab/ensimag/KYMap


Contexte général

Cette application a pour but de visualiser et de partager si on le souhaite ses destinations de voyage. Vous pourrez saisir vos voyages et leurs différentes étapes. Par la suite vous pourrez retrouver vos trajets et visualiser les différents pays visités et obtenir différentes statistiques pour narguer vos collègues. Puisque c'est pas gentil d'être méchant, vous pourrez notez vos trips pour éviter à Michel d'aller passer 3 semaines humides au fond de la creuse.

Cahier des charges

  • Saisie d'un voyage réalisé
    • Différentes étapes
      • Emplacement
      • Date
      • Commentaire
      • Éventuellement un ajout de photos (Pas encore réalisé)
    • Appréciation générale du voyage
  • Consultation des voyages sur la carte
  • Statistiques sur les voyages et l'exploration du monde (Pas encore réalisé)
  • Gestion de la confidentialité pour chaque voyage
    • Public : Le voyage sera visible sur votre profil (Pas encore réalisé)
    • Privé : Seul vous pourrez le visualiser
    • Partagé : Partagez le trajet seulement avec les gens que vous aimez vraiment. Soit avec un lien à envoyer à votre grand mère. Soit en ajoutant vos amis.

Technologies

Le projet est basé sur Django pour la partie Backend. Les API Google Maps pour le frontend :

  • Google Maps Javascript API pour afficher la carte et tracer les trajets. Aussi utilisé pour automatiquement compléter l'input de recherche de lieu lors de la création.
  • Le Geocoding API pour traduire un lieu en latitude-longitude

L'API Google OAuth 2.0 sur Django pour le Backend

  • Google OAuth 2.0 permet de s'authentifier avec son compte google plus.

Bootstrap 4 (en version alpha #JouerAvecLeFeu) : https://v4-alpha.getbootstrap.com

Font-awesome : http://fontawesome.io/

Django : http://www.django-fr.org/

Jquery : https://jquery.com/

Cas d'utilisations

Connexion

L'ensemble des trajet étant propre à chaque utilisateur, celui-ci doit se connecter. Il doit donc saisir un login et un mot de passe ou passer par la connexion Google plus.


Ajout d'un voyage

L'utilisateur va créer un voyage en spécifiant :


  • Les dates de début et de fin
  • Les participants à ce voyage
  • Le niveau de confidentialité
  • Accessoirement : un commentaire le concernant.


Une fois le voyage créé, l'utilisateur va ajouter des étapes.


Ajout d'une étape

Pour chaque trajet l'utilisateur va saisir plusieurs étapes. Il devra saisir les informations suivantes:


  • Ville ou position visitée (Appel à l'API Google Maps pour obtenir une auto complétion)
  • Date de la visite (Possible de choisir une plage)
  • Accessoirement : Commentaire
  • Accessoirement : Photos


Création d'un groupe

L'utilisateur à la possibilité de créer un groupe avec ses amis pour partager ses voyages. Il devra choisir :

  • Un nom
  • La liste d'amis

Modèle de la base de donnée

Nous avons choisis un modèle simple pour notre base de donnée.

Les classes principales définissent les voyages et les étapes

Uml KYMap.png

Mettre en place l'environnement de test

Pour faire tourner les tests sur le repository Gitlab, nous avons mis en place une image docker avec tout le nécessaire pour faire tourner les tests (django, selenium et leurs dépendances). Or, selenium nécessite une interface graphique, nous n'avons pas réussi à le configurer sur le serveur. Nous avons donc déssactivé par défaut les tests sélénium, que nous testions chez nous en local.

Nous avons donc deux types de tests : les tests Django, qui test l'API, le modèle et la partie login. Nous avons aussi des tests Sélénium pour tester les vues.

Utilisation de l'API Google OAuth 2.0

Pour gérer l'utilisation d'un web service, nous avons choisi d'utiliser le service d'authentification de Google OAuth 2.0. Un bouton est disponible sur la page principale de l'application. Si l'utilisateur n'est pas déjà inscrit dans notre base, nous l'inscrivons automatiquement avec les informations associés à son compte (email, nom, prénom). Sinon l'utilisateur est automatiquement connecté. Dans les deux cas, la connexion se fait de manière transparente pour l'utilisateur.

Utilisation d'AWS

Dans le cadre du partenariat entre Amazon web Services et l'ENSIMAG nous avons pu d'une formation sur les solutions clouds d'Amazon.

Ce projet tombait à pic pour expérimenter la plateforme d'AWS et ses solutions de virtualisations et de bases de données.

RDS : Base de donnée

Pour disposer d'une base de données communes pendant nos dévellopements nous avons mis en place une base de donnée PostgreSQL sur le service RDS d'Amazon.

La base est éligible à l'opération "Free Tier" d'AWS, vous disposer pendant un an de 750 H/mois pour utiliser gratuitement une base RDS.

La configuration de cette base de donnée est trés simple à l'aide de la console AWS. Nous avons du modifier le port par défault vers le port 8080 afin de pouvoir y accéder à travers les pare-feux de RENATER..

EBS : Déploiement de code

Nous avons voulu déployer notre application dans le cloud, pour cela, il existe un service clefs en main, Elastic Beanstalk. Cet outils combine intelligement les différents outils disponible sur AWS (S3 pour le stockage des fichiers, EC2 pour les machines virtuelles).

Une instance (t1.micro, également éligible au "Free Tier") installé par défaut, avec python et un serveur apache va héberger notre site au travers d'une application WSGI. Pour que tout fonctionne correctement, il faut spécifier à Amazon les dépendances de notre projet.

Ceci ce passe à deux niveaux : - Le fichier `/requirements.txt` qui contient toutes les dépendances python. - Le dossier `/.ebextensions/` qui va contenir les dépendances et les paramètres à configurer dans la VM.

On peut ensuite déployer le code soit via navigateur avec un zip, soit via l'outils en ligne de commande d'AWS.

Processus d'installation

Installer Python 3

sudo apt-get install python3

Outils à installer

Installer les dépendances listées dans le fichier requirements.txt.

Elles peuvent être installé automatiquement avec sudo pip install -r requirements.txt.

Base de donnée à initialiser

  • python3 manage.py makemigrations
  • python3 manage.py migrate
  • python3 manage.py loaddata fixtures.json

Lancer le serveur

python3 manage.py runserver

Accéder à l'application avec 127.0.0.1:8000 avec les logins :

  • admin / admin1234
  • lavirona / admin1234

Lancer les tests

python3 manage.py test