Projet
Votre chronologie Google
Visualisation et exportation des données de lieux visités à partir de fichiers Google Timeline JSON.
Démonstration
Genèse du projet
Créer une feuille de temps basé sur les données de Google Timeline
Punchtime est une application web conçue pour analyser les données de Google Timeline et afficher les lieux visités ainsi que le temps passé à chaque endroit.
Initialement pensé comme un outil pour suivre les heures de travail via un système de “punch”, il m’a plutôt offert un excellent défi de programmation.
Alors que Google Timeline ne permet plus d’exporter ces fichiers, cette application est maintenant désuète. Pour pouvoir tester les fonctionnalités de Punchtime des fichiers JSON de test sont mis à votre disposition.
Punchtime n’a pas vocation à être un produit fini, mais il met en valeur mes compétences en développement d’application web.
Objectifs
- Permettre l’analyse des fichiers JSON exportés depuis Google Timeline
- Afficher les lieux visités et le temps passé à chaque endroit
- Offrir une interface simple pour visualiser ses déplacements
- Simuler un système de “punch” horaire basé sur la géolocalisation
Technologies utilisées
Développé en JavaScript et PHP, le projet combine frontend et backend pour une expérience fluide :
- JavaScript pour l’affichage dynamique des données via
fetch() - PHP pour le traitement des fichiers JSON côté serveur
- Structure orientée objet pour une meilleure modularité du code
- Interface web légère en HTML/CSS
Défis rencontrés
L’un des défis majeurs a été de comprendre la structure complexe des fichiers JSON de Google Timeline.
Solutions apportées
- Création de scripts pour extraire les données pertinentes (lieux, durées)
- Mise en place d’un système de visualisation sans rechargement manuel
- Adaptation du projet suite à l’arrêt de l’exportation des fichiers par Google : ajout de fichiers de test pour démonstration
Ce que j’ai appris
Ce projet m’a permis de renforcer mes compétences en développement web full-stack, en particulier dans la gestion de fichiers et l’interprétation de données géospatiales. J’ai eu à bien comprendre l’objet Date() de JavaScript et j’ai appris le fonctionnement du framework JsPDF.
Historique
Une feuille de temps sur mesure
C’est en travaillant dans une boutique de vélos que m’est venue cette idée. Je n’arrivais pas à me discipliner pour écrire mes heures de travail. J’ai donc décidé de me faciliter la tâche. Comme j’ai toujours mon téléphone avec moi et que j’ai activé l’historique des déplacements sur Google Maps, j’ai pensé que cela pourrait être utile.
Le code
JavaScript et PHP
Punchtime intègre JavaScript et PHP pour gérer le téléversement et l’analyse des fichiers JSON de façon dynamique. Grâce à JS, les données sont affichées et mises à jour sans rechargement manuel via fetch(). PHP assure la gestion des fichiers et leur traitement backend.
jsPDF
Punchtime utilise jsPDF pour générer des fichiers PDF contenant les données analysées. JavaScript formate les informations récupérées, puis jsPDF les transforme en un document prêt à être sauvegardé ou partagé. Une fois le fichier PDF généré, PHP prend en charge son exportation, permettant aux utilisateurs de le télécharger directement via le navigateur.
Fonctionnalités
- Téléversement automatique des fichiers de test grâce au bouton “Commencer ici“
- Analyse des lieux visités et du temps passé sur chaque emplacement
- Affichage détaillé des résultats (date, heure, durée de visite)
- Exportation en PDF du résumé des visites