RAPPORT PROJET TUTORÉ :

Temps d'attente en agences OPT-NC

Réalisé par :

Malcolm BERTAINA (L3T7 Informatique)

Morgan CARRE (L2T5 Informatique)

 

Plan

  1. Remerciements
  2. Introduction
  3. Développement
    1. Rencontre & Pitch
    2. Organisation et déploiement sur Streamlit cloud
    3. Tooling, Stack technique : "Hello World" (v0.0)
    4. MVP première version "fonctionnelle" (v0.1)
    5. Historique et auto-refresh (v1.0)
  4. Conclusion

Remerciements

Un grand merci à Adrien Sales pour la proposition de ce projet enrichissant, son suivi constant, ainsi que ses conseils précieux, même en soirée et les week-ends.

Merci également à Michèle Barre et Vinh Faucher pour leur réactivité et leur aide dans la résolution des problèmes liés à l'API des temps d'attente.

Introduction

Projet

Dans le cadre de notre licence en informatique, nous avons eu l’opportunité de réaliser un projet tutoré. Nos professeurs nous ont proposé une liste variée de sujets, chacun présenté par des encadrants extérieurs à l'UNC, issus de différents secteurs et entreprises.

Sélection du sujet

Après avoir étudié les différents sujets, tous très intéressants, nous avons finalement choisi de nous concentrer sur le projet "interface web des temps d’attente en agence OPT", proposé par Adrien Sales de la DSI de l’OPT.

Ce sujet aborde une problématique réelle et nous semblait d’autant plus pertinent qu’il impliquait une stack technique jamais utilisée pour nous, offrant ainsi une excellente opportunité d'apprentissage.

Développement

Le pitch

Rencontre avec les encadrants

  • Date : 18 septembre 2024
  • Rencontre avec Adrien Sales et Michèle Barre
  • Objectif : clarifier le projet et poser les bases

Présentation du projet

  • Pitch détaillé par Adrien Sales
  • Mise en place d’une méthodologie basée sur des milestones et des issues

Une Roadmap/ 3 miletsones

Roadmap établie avec trois objectifs :

Planification

Les versions ont été mises en place avec des deadlines précises

Collaboration

  • GitHub utilisé pour organiser le projet
  • Malcolm Bertaina désigné lead developer

Organisation et déploiement sur Streamlit Cloud

Flow du projet

Déploiement Continu sur Streamlit Cloud

  • Réalisé par Adrien SALES
  • Accès à tous a l'adresse opt-nc-temps-attente.streamlit.app
  • Mises à jour automatiques après chaque merge

Architecture

v0.0

Social preview

Mise en place du social preview pour améliorer le partage sur les réseaux sociaux

Stack

  • Linter Ruff

Portail développeur OPT-NC

Création compte APIGEE, pour la récupération des données via l'API.

v.0.0 "Hello World"

  • Déploiement d'une page "Hello World OPT-NC" avec logos UNC/OPT
  • Création d’une image Docker pour la portabilité
  • Vérification du bon fonctionnement des éléments mis en place
  • Documentation mise à jour pour faciliter la prise en main

MVP (v0.1)

Objectifs de la v0.1

  • Interaction avec l'API OPT pour récupérer les données
  • Sélection d’une agence via liste déroulante
  • Affichage du temps d’attente sous forme de jauge
  • Interface simple et intuitive pour l’utilisateur

Temps attente en texte

Utilisation de deux endpoints :

/communes
/agences?commune=[nom_commune]

Requête avec HTTPIE : 

Affichage :

Temps attente avec jauge

Bibliothèque Poltly pour la méthode plotly_chart()

\text{Si } t \leq 5 \text{ minutes, la jauge est } \textcolor{green}{verte}. \\
\text{Si } 5 < t \leq 10 \text{ minutes, la jauge passe au } \textcolor{orange}{orange}. \\
\text{Si } t > 10 \text{ minutes, la jauge devient } \textcolor{red}{rouge}.

Optimisations et corrections

  • Sécurisation : Clé API placée en variable d'environnement
  • Interface : Logos UNC/OPT déplacés dans la sidebar
  • Fuseau horaire : Ajustement à UTC+11 pour la Nouvelle-Calédonie

Historique et auto-refresh (v1.0)

Refactorisation & Optimisation du Code dans utils.py

  • Centralisation appels API via : 
fetch_communes()
fetch_agences(commune)
  • Caching avec TTL pour minimiser les appels API redondants avec : 
@st.cache_data()
  • Constante de l'auto rafraîchissement définit à 3 minutes :  
INTERVALLE_AUTOREFRESH = 3 * 60 # 3 minutes

Améliorations Fonctionnelles

  • Accès direct via URL : Ajout de l'ID de l'agence dans l’URL pour pré-sélectionner l’agence
fetch_agence_by_id(id_agence)
  • Indicateur visuel pour ouvrir/fermer la barre latérale

Améliorations Fonctionnelles

  • Affichage du nom de l’agence sous la jauge avec un style personnalisé

Améliorations Visuelles

  • Tri alphabétique des communes pour une meilleure lisibilité :
sorted()

Fonctionnalité Principale - Historique des Temps d'Attente

  • Utilisation de l'endpoint
temps-attente-agences/agences/{id}/historique

Renvoie un json contenant tous les temps d’attente de la journée, avec des enregistrements espacés de 2 minutes pour chaque agence sélectionnée.

  • Endpoint renvoyait une erreur.
400 OK
{
  "fault": {
    "faultstring": "OASValidation OAS-Validation with resource \"oas://spec.yaml\": failed with reason: 
      \"[ERROR - String '2024-08-10T12:15:50' is invalid against requested date format(s) [yyyy-MM-dd'T'HH:mm:ssZ, yyyy-MM-dd'T'HH:mm:ss.
      [0-9]{1,12}Z]: [], ERROR - String '2024-08-10T15:15:50' is invalid against requested date format(s) [yyyy-MM-dd'T'HH:mm:ssZ, 
      yyyy-MM-dd'T'HH:mm:ss.[0-9]{1,12}Z]: []]\"",
    "detail": {
      "errorcode": "steps.oasvalidation.Failed"
    }
  }
}

Bug reporting & contournement

Ouverture d'une issue pour signaler le BUG 

Vinh un membre de l'équipe d'Adrien nous a proposé un autre portail pour utiliser l'API, ainsi qu'un moyen de tester l'image.

Nous avons opter pour Rapidapi le temps que le bug soit fixé

Mise a jour de l'environnement

  • Ajout de https://temps-attente-en-agence.p.rapidapi.com/  dans utils.py 
  • Ajout de la clé API associé  dans le .env

Récupération & Visualisation des Données

  • Nouvelle fonction pour récupérer l'historique sous forme de dataframe (Pandas)
fetch_agence_historique(id_agence,debut,fin)
  • Affichage optimisé avec st.altair_chart() en histogramme coloré
\textcolor{green}{\text{ - Vert : } t < 5 \text{ min} \\}
\textcolor{red}{\text{ - Rouge : } t > 10 \text{ min}}
\textcolor{orange}{\text{ - Orange : } 5 \leq t < 10 \text{ min} \\}

Dataviz

Gestion des Fuseaux Horaires

L’API était en UTC, alors que nous avions besoin de UTC+11 (Nouvelle-Calédonie).
Problème corrigé avec un décalage de -11 heures via timedelta

Plage horaire des agences OPT

Affichage d’un message si l’application est consultée hors des horaires d’ouverture (7h45 à 15h30).
Vérification via check_valid_hours() pour informer si les agences sont fermées.

Conclusion

Compétences & Collaboration

  • Consolidation de nos compétences techniques
  • Maîtrise des outils GitHub : branches, pull requests, revues de code
  • Utilisation de HTTPie pour tester et diagnostiquer les endpoints de l'API
  • Résolution rapide des bugs et reporting efficace auprès du tuteur
  • Amélioration de l'API grâce à nos retours sur les bugs rencontrés

Apprentissage & Technologies

  • Découverte du framework Streamlit pour des interfaces web interactives
  • Prise en main de Docker pour la conteneurisation et le déploiement
  • Expérimentation avec Killercoda pour tester des API
  • Conception d'une interface utilisateur originale et fonctionnelle
  • Allier apprentissage technique et travail collaboratif
  • Expérience enrichissante nous préparant à des projets professionnels avec plus de confiance