CAW1 2014 Projet d'Alice Grange, de Lei Guo et de Yann Laforest

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet Auto'matic
Cadre Application web

Équipe Alice Grangé Lei Guo Yann Laforest
Encadrants Sebastien Viardot
LogoAutoMatic.png

Présentation générale

Dans le cadre du projet pour le module "Construction d'applications WEB", nous nous sommes mis d'accord sur un même thème: le covoiturage. Les objectifs sont multiples comme notamment se familiariser avec différentes technologies web, différents langages, appréhender les différentes contraintes pour l'authentification, l'affichage version mobile,etc. Pour atteindre ses objectifs, nous avons du nous organiser, nous fixer des objectifs temps tout en se répartissant les tâches au mieux.

Qu'est-ce qu'Auto'Matic ?

Tout d'abord, rappelons ce qu'est le covoiturage. Celui-ci permet de réaliser un trajet commun avec une ou plusieurs personnes "covoitureuses". Dans un souci d'écologie et d'économie, il garantit des avantages individuels (partager les frais de déplacement, échanger avec de nouvelles personnes,etc.) mais aussi collectifs(réduire les embouteillages, la pollution et les accidents).

Cette application propose d'aider à planifier, organiser le covoiturage en mettant en relation conducteurs et passagers covoiturés.

Pour qui ?

Ce site internet s'adresse à toutes les personnes souhaitant voyager à l'intérieur du territoire Français (hors DOM TOM) grâce au covoiturage.

Pour quoi faire ?

Graĉe à Auto'Matic, vous pourrez rechercher votre parcours parmi ceux proposés par nos covoitureurs. D'autre part, vous aurez la possibilité en devenant Premium d'accéder à plus de fonctionnalités comme:

  • Proposer un parcours
  • S’enregistrer sur un parcours en tant que passager
  • Mais aussi...

  • Se désinscrire
  • Supprimer un parcours
  • Réactiver un parcours


Auto'Matic côté technique

Cahier des charges

  • Utilisation du framework Java Play
  • Utilisation d'un gestionnaire de versions Git
  • Utilisation de Semantic UI
  • Utilisation d'un Web Service (Map + Ville)
  • Gestion de différents profils : membre, public, administrateur
  • Version mobile de l'application

Cas d'utilisation

Toutes ces fonctionnalités ont été développées de façon itérative (selon une priorité établie initialement).
DiagrammeCasUtilisation3.JPG

Quelques diagrammes de séquence

Pour les fonctionnalités que l'on a jugé les plus utilisées potentiellement:
Média:CasUtilisationRechercherUnTrajet.JPG
Média:CasUtilisationReserverUnTrajet.JPG
Média:CasUtiliationSeDesinscrireDunTrajet.JPG

Diagramme de classes

DiagrammeDeClasses.png

Nos choix

Dans un premier temps, nous avons choisi Play car nous avions tous de meilleures connaissances en JAVA. Ensuite, pour ce qui est du choix de Semantic UI, l'un de nous avait déjà utilisé Semantic et pouvait donc nous guider.

Nous avons décidé de proposer à nos utilisateurs :

  • la recherche de parcours à partir du nom de la ville ou du code postal
  • l'affichage du parcours sur une carte Google avec le point de départ et d'arrivée
  • la vérification de la saisie des villes (via un web service) réalisée lors de la création d'un parcours afin de ne pas conserver des villes non utilisées ou incorrectes
  • la réservation d'un ou plusieurs trajets seulement à partir du lendemain

D'autre part, afin d'être cohérent, nous avons choisi de ne pas proposer la fonctionnalité "Modifier les informations du parcours" car le ou les membres qui s'y inscrivent ne seraient pas informés de ce changement. Nous laissons également la possibilité à nos membres de revenir en arrière et de reproposer les trajets auparavant créés et supprimés.
Les utilisateurs non authentifiés peuvent consulter tous les trajets proposés sur notre site mais ne peuvent en aucun cas réserver une place sur un des trajets. Pour le faire, celui-ci devra s'inscrire ou s'authentifier.

Auto'Matic côté graphique

Maquette simplifiée

Fichier:MaquetteProjetWeb.pdf

Nous avons opté pour une structure de site simple mais logique.
Côté public, un menu demeure tout au long de la navigation en haut de la page pour guider l'utilisateur. S'il est inscrit sur notre site ou s'il souhaite s'inscrire, il peut également accéder à ces fonctionnalités à tout moment.
Côté privé, pour ne pas "perdre" l'utilisateur, nous avons choisi de rajouter des fonctionnalités "Premium" dans le deuxième menu gauche. Il peut de cette façon parcourir le site comme un utilisateur anonyme mais dispose d'un "PLUS" à l'aide de ce sous-menu.

Comment se repérer dans Auto'Matic ?

D'un point de vue visuel, nous avons choisi de mettre en valeur chaque onglet avec une couleur différente rappelée dans le contour de la page principale de contenu.

Menu haut

MenuHautTous.png
Onglet Accueil
Description du site et des fonctionnalités offertes aux utilisateurs

Onglet Conduire
Formulaire permettant la soumission d'un trajet en tant que conducteur

Onglet Se faire conduire
Recherche d'un ou plusieurs trajets à partir d'une ville ou d'un code postal pour le lieu de départ et d'arrivée
Si l'utilisateur a trouvé un trajet qui lui correspond, il peut:
> réserver ce trajet s'il y a encore une place disponible
> consulter ce trajet

Onglet Qui sommes-nous ?
Description de l'équipe en charge du développement de l'application

Onglet Contact
Affichage des informations concernant AutoVollant

Menu gauche

MenuGaucheMembre.png
Onglet Mon profil
Visualisation et/ou modification de ses informations personnelles

Onglet Mes Parcours
Visualisation de la totalité de ses trajets effectués ou à effectuer parmi ceux réservés et proposés aux membre du site
Si l'utilisateur a déjà plusieurs parcours, il peut :
> annuler un trajet proposé (créé au préalable)
> réactiver un trajet proposé (annulé au préalable)
> se désinscrire d'un trajet (réservé au préalable)
> consulter un trajet (réservé ou créé au préalable)

Onglet Admin Espace[Administrateur]
Accès à toutes les données stockées

Onglet Déconnexion
Fermeture de son compte jusqu'à la prochaine connexion

Guide d'utilisation

  • Visualiser le fonctionnement de l'application

Fichier:AutoMatic screencast 2.mp4

  • Utiliser l'application

Fichier:AutoMatic AGrange LGuo YLaforest.tar.gz

  1. Installer Play Framework
  2. Télécharger et décompresser les sources du projet AutoMatic_AGrange_LGuo_YLaforest.tar.gz
  3. Lancer une console dans le répertoire décompressé et taper `play run`
  4. (Re)Initialiser la base de données via l’adresse http://localhost:9000/initbase
  5. Voici la liste des utilisateurs existants:

    • alice@gmail.com /123456 (Membre et Administrateur)
    • lei@gmail.com /123456 (Membre et Administrateur)
    • yann@gmail.com / 123456 (Membre)
    • sebastien.viardot@grenoble-inp.fr / 123456 (Administrateur)
  6. Se rendre à l'adresse http://localhost:9000 pour naviguer sur le site
  • Tester l'application
  1. Lancer une console dans le répertoire décompressé et taper `play test`
  2. Executer les différents tests via l'adresse http://localhost:9000/@tests

(Application testée en priorité sur les navigateurs “Google Chrome” et “Mozilla Firefox”)

Autres