Paul
 Le Flem

ESP Automobiles - site catalogue

Un catalogue toujours à jour

Mockup du portfolio de Agathe Verasdonck

LE CLIENT

ESP Automobiles est un concessionnaire automobiles, spécialisé dans la vente de véhicules premium, neuf ou occasion. Ils assurent une prestation de qualité, en inspectant eux-mêmes chaque véhicule mis en vente, et proposent une garantie minimale de 6 mois.

CAHIER DES CHARGES

L'entreprise possédait déjà un site viellissant pour la vente de ces véhicules. Cependant, celui-ci ne générait pas assez de traffic à cause de son look has-been. Ils ont donc choisit de faire appel à BH Internet pour en faire la refonte. C'est un site catalogue administrable. Les fonctionnalités demandés sont les suivantes : créer un back-office permettant la gestion des véhicules affichés sur la page d'accueil, un formulaire de contact pour faire reprendre un véhicule, et l'intégration de l'API de l'argus, pour lister les véhicules de l'entreprise.

Technologies utilisées

  • Symfony 5.4
  • PHP 7.4
  • MySQL
  • Javascript
  • API Argus

Conditions de travail

  • Réalisé à partir d'une maquette
  • Travail sur 2 mois
  • En entreprise
  • Travail seul

Rôle

  • Conception technique
  • Développement

Conception du front end

J'ai été chargé du développement de ce site. J'ai donc fait le choix de commencer par développer le front-end, ce qui permet au client d'avoir une vision sur le produit final plus rapidement dans le développement du projet.

J'ai utilisé la bibliothèque Bootstrap pour m'aider dans la conception, notamment pour faciliter la transition au format mobile.

Récupération du fichier XML depuis le serveur FTP

Récupération du fichier XML depuis le serveur FTP

Intégration de l'API Argus

L'API Argus est une API "legacy", développé sous le standard SOAP. Elle fournit un serveur FTP ou récupérer un fichier XML comme endpoint.

Le problème avec ce genre d'API, c'est qu'il est impossible de récupérer uniquement une partie des données. Pour recherche un véhicule, il est nécessaire de parcourir le fichier à sa recherche, notamment avec la fonction xpath, qui permet de filtrer du XML de manière basique.

Pour tenter d'optimiser le fonctionnement, j'ai pris l'initiative de faire une copie du fichier XML localement sur le serveur. Au chargement de la page, le service VehiculeList est appelé, il a pour rôle de retourner la liste des véhicules à afficher. Il vérifie la dernière mise à jour du fichier, stoqué en base de données. Si elle date de plus de deux heures, le service fait alors appel à l'API pour récupérer le fichier à jours. Une durée de deux heures à été choisit pour avoir un bon compromis entre la performance du site, et la nécessité de tenir les véhicules à jour (vendus ou ajoutés).

Un avantage important d'effectuer une copie locale du fichier, c'est que si l'API cesse de fonctionner, le site n'aura pas de problème, et pourra toujours lister les véhicules de l'ancienne version du fichier, en attendant que l'API soit à nouveau disponible.

Système de filtre

Il à été demandé d'ajouter au site un système de filtre sur le site, car le nombre de véhicules était important. Les critères suivant on été retenus pour le filtre :

  • État (neuf / occasion)
  • Marque
  • Modèle
  • Énergie (essence / diesel / électrique)
  • Boite (manuelle / automatique)
  • Budget (min / max)

L'implémentation des filtres fut plus compliqué qu'habituellement, du fait que les véhicules ne proviennent pas de la base de données mais d'un fichier XML. J'ai donc utilisé les fonctions native de PHP simplexml pour convertir le fichier en un object StdClass (classe générique de PHP), puis utilise un service qui permet de boucler sur les véhicules, et détermine leurs correspondance aux filtres.

Système de filtre

Système de filtre

Conception du back-office

Les back-office doit permettre la gestion des véhicules "à la une", ainsi que ceux présents dans le slider de la page d'accueil.

J'ai choisis de proposer la même interface coté administrateur que coté utilisateur, premièrement pour éviter de devoir développer un deuxième module similaire et également permettre de mieux visualiser ce à quoi ressemble le front-end.

Les véhicules n'étant pas stoqués en base de donnée, j'ai créé une unique table, regroupant les véhicules du slider et à la une, différenciés par un boolean.