Skip to content

Latest commit

 

History

History
134 lines (89 loc) · 5.14 KB

README.md

File metadata and controls

134 lines (89 loc) · 5.14 KB
Raw

Alset

Projet Technologies et Langages du Web, par Maxime BATTU et Batiste LALOI - CPE Lyon IRC - 2021/2022

Vidéos de démonstration et d'explication

Démonstration de l'application : Démonstration ALSET - CPE Lyon 3IRC

Explications plus détaillées du fonctionnement du site et des technologie/API utilisées : Playlist de 3 vidéos explicatives

Répartition du travail

Batiste LALOI : geocoding, calcul et affichage de l'itinéraire, calcul d'autonomie, déploiement du projet

Maxime BATTU : Affichage de la map, mise en place des clusters de markers, optimisation/revu de code, options de filtrage, style

Commun : Alimentation de l'interface utilisateur, descriptif de l'itinéraire

Technologies utilisées

  • VueJS
  • NodeJS
  • HTML/CSS

Récupération

Dupliquer le dépôt git :

git clone https://github.com/cpe-lyon/groupe-3-alset.git

Setup du projet

⚠ Disclaimer ⚠

Notre projet, utilisant des API, possède un token d'accès qui est gardé secret dans une variable d'envrionnement locale à nos machines. De ce fait, la compilation du projet sera fonctionnel mais pas son utilisation.

Pour l'utiliser et voir le produit final, rendez-vous à cette addresse de déploiement de notre application, hébérgée par le biais d'un dépot clone : Alset

Liste des fonctionnalités :

  • Affichage des bornes de recharge électrique en France

    • Affichage de la carte

      • paramétrer pour ne pas pouvoir aller au delà de la France métropolitaine

    • Clustering des bornes sur une carte

      • 3 niveaux de clustering
        • faible
        • moyen
        • large

    • Informations sur la borne

      • Le nom
      • Son adresse
      • La ville ainsi que le code postal, si ces derniers sont renseignés

    • Par défaut, affichage de toutes les bornes éléctriques présentent en France

  • Options de filtre

    • Selection de la compatibiilité des bornes avec deux véhicules :

      • Véhicule 1 : Tesla Model 3
      • Véhicule 2 : Renault Zoé
      • Mise à jour des bornes de carte avec uniquement celles comptatibles avec le véhicule choisit

    • Paramétrer l'autonomie du véhicule

      • L'autonomie, par défaut, est de 200 km
      • Véhicule 1 : Tesla Model 3, jusqu'à 495 km d'autonomie
      • Véhicule 2 : Renault Zoé, jusqu'à 290 km d'autonomie
      • Si aucun véhicule n'est sélectionné, l'autonomie maximale sera de 500 km

  • Possibilté de rentrer un lieu de départ et d'arrivée dans le menu déroulant en haut de la page

    • Mise en place d'un système d'auto-complétion
    • lieux uniquement présent en France métropolitaine

  • Prise en compte des bornes de recharges en France dans l'itinéraire

    • compatibles avec le véhicule sélectionné
    • si aucun véhicules n'est sélectionné, alors le chemin indiqué sera le plus rapide en utilisant toutes les bornes disponibles en France

  • Affichage des étapes de la route dans le menu déroulant accessible en haut à gauche de la page

    • les routes principales (autoroutes) par lesquelles passées

    • les étapes du trajet

      • Un clique peut être effectué sur chaque étape pour en voir la durée estimée

    • la durée / heure d'arrivée

    • le nombre de km / l'autonomie finale

  • Choix du thème de la carte en haut à droite de la page

    • Choix entre : Clair 💡 / Sombre 🌑
    • Le thème au chargement du site dépend du thème actuelle du naviguateur de l'utilisateur

Listes des modules npm utilisés :

  • Leaflet

    • leaflet.markercluster

      • Gestion des clusters de marqueurs liés aux bornes de charge

    • leaflet-edgebuffer

      • Permet de pré-charger des éléments en dehors de la vue actuelle

    • leaflet-routing-machine

      • Permet de calculer le chemin le plus court entre deux points

  • lodash

    • Permet d'utiliser une méthode pour "debounce" les fonctions et avoir la main sur leurs appels
    • On a notamment utilisé sur l'affichage des autocomplétions d'adresses
      • un nouveau tableau d'adresse prévisionnelle était envoyé toutes les 50ms pour ne pas saturer les envoies entre les components
      • Si on ne mettais pas en place cette méthode là, le tableau aurait été envoyé à chaque fois qu'un caractère aurait été tapé, sur une petite application comme la notre le soucis est moindre mais si on se place à plus grande échelle cela peut devenir plus embettant et créer des problèmes de performances

  • vue-simple-suggest

    • Permet de créer des suggestions de recherche lors de la saisie du départ / arrivée

Liste des API utilisées :

  • MapBox
    • Récupération de la carte
    • Géocoding
  • OpenChargeMap
    • Récupération des stations
    • Récupération des informations sur les stations
  • Google Fonts
    • Récupération des polices

Installer les modules

npm install