1. Introduction

La course à pied est généralement un sport solitaire. Le seul adversaire est soi-même. L’aspect compétitif avec d’autres adversaires n’est donc pas là. C’est pour cela que l’idée m’est venu de créer un site web qui calcule les données de la course de l’utilisateur puis va les comparer avec les statistiques d’autres utilisateurs utilisant la page web

L’objectif de ce projet est donc de créer un site web, en utilisant les langages HTML, CSS, PHP, JAVASCRIPT et MYSQL et W3C Geolocation API sur javascript, sur lequel l’utilisateur peut créer un compte. A chaque course de l’utilisateur le programme calcule des variables(la distance parcourue et le temps effectué) pour avoir des données précises. Ces données serviront à faire un classement entre les différents utilisateurs à la fin de chaque semaine. Les enjeux de ce projet sont de créer une base de données pour les informations de l’utilisateur et de ses données de courses, gérer ces bases de données et créer un programme qui calcule la distance et le temps pour chaque course des utilisateurs.

Ce que je pourrais tirer de ce projet serait la capacité à gérer des bases de données MySQL et d’ apprendre et comprendre l’utilisation des fonctions de l’API geolocation sur javascript pour récupérer les informations sur la position d’une machine. Ce projet me permettra également de me familiariser avec les langages HTML et CSS pour créer une page web.

2. Matériel et méthodes

2.1 Matériel

Un ordinateur muni des logiciels suivant : - HTML (langage de balisage) -CSS (langage de description) -php (langage de programmation) -JavaScript(langage de programmation avec W3C Geolocation API) -MySQL (système de gestion de bases de données relationnelles)

2.2 Méthode

2.2.1 La création de l'utilisateur

Tout d'abord il faudra concevoir une page de connexion et une page de création de compte pour que le programme reconnaisse chaque utilisateur comme des personnes différentes. Pour ce faire, il faudra tout d’abord créer une table sur une base de données MySQL dans laquelle il se trouvera une colonne id qui créera, à l’aide d’un programme, un nombre qui sera propre à chaque utilisateur. Pour créer l’unicité de l'id de l'utilisateur, il faudra programmer une fonction qui affichera des nombres aléatoires et les associera avec le nom des utilisateurs. Ci - dessous se trouve la fonction des nombres aléatoires : la fonction pour créer un nouvel utilisateur dans la table : function random_num($length) {

  $text = "";
  if($length < 5)
  {
      $length = 5;
  }

  $len = rand(4,$length);

  for ($i=0; $i < $len; $i++) {

      $text .= rand(0,9);
  }

  return $text;

la fonction pour créer un nouvel utilisateur dans la table :

$user_id = random_num(20);

          $query = "INSERT into users (user_id,name,password) values ($user_id,$name,$password)";
          mysqli_query($con, $query);
          header("location: login.php");
          die;

La page de signup, qui est conçue avec HTML, CSS et php utilisera cette fonction et les données que l’utilisateur écrit sur la page pour créer un nouvel utilisateur dans la base de données. Ensuite la page login vérifiera les données qui sont écrites par l’utilisateur et les comparera à celles de la base de données et ensuite affichera la page principal si les données sont justes ou bien affichera un message d’erreur.

2.2.2 Programme de la course

Le programme sur la page principal consistera en deux boutons HTML “Start” et “Stop” qui lanceront et stopperont à la fois un chronomètre hh:mm:ss et enregistrera la position de la machine à chaque que celle-ci bouge. Tout d’abord, pour concevoir le timer, il faudra utiliser le langage JavaScript. Pour la fonction du chronomètre, on n’utilise pas le temps, mais des additions d’une unité à chaque seconde. C’est à dire que quand le bouton Start est activé la fonction va ajouter une unité aux secondes toutes les secondes jusqu’à que les secondes sont égales à 60 ce qui va ajouter une unité au minutes et ainsi de suite jusqu’à l’activation du bouton Stop, qui va stopper le processus : function timerCycle() {

              if (stoptime == false) {
                  sec = parseInt(sec);
                  min = parseInt(min);
                  hr = parseInt(hr);

                  sec = sec + 1;
                 

                  if (sec == 60) {
                      min = min + 1;
                      sec = 0;
                  }
                  if (min == 60) {
                      hr = hr + 1;
                      min = 0;
                      sec = 0;
                  }

setTimeout("timerCycle()", 1000); Ensuite pour le programme qui va calculer la distance parcourue par l’utilisateur il faudra utiliser la fonction de la Geolocation API Geolocation.watchPosition(). Cette fonction identifiera les coordonnées de la longitude et de la latitudes de la machine à chaque fois que celle-ci se déplace. Toutefois le problème avec cette fonction c’est qu’elle calcule seulement la longitude et la latitude de la machine et non pas la distance qu’elle parcourt. C’est pour cela qu’il est indispensable d’utiliser la formule de haversine, qui permet de calculer la distance la plus courte, à la surface de la terre, entre deux points dont on connaît seulement leur longitude et leur latitude. Dans un programme javascript elle se présente comme ceci : const R = 6371e3; // metres const φ1 = lat1 * Math.PI/180; // φ, λ in radians const φ2 = lat2 * Math.PI/180; const Δφ = (lat2-lat1) * Math.PI/180; const Δλ = (lon2-lon1) * Math.PI/180;

const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +

         Math.cos(φ1) * Math.cos(φ2) *
         Math.sin(Δλ/2) * Math.sin(Δλ/2);

const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

const d = R * c; // in metres Source : http://www.movable-type.co.uk/scripts/latlong.html

Cette formule permettra ainsi de calculer la distance de tous les points dont les coordonnées ont été récupérées par Geolocation.watchPosition(), et donc de calculer la distance totale de la machine utilisée par l’utilisateur. En résumé, en activant le bouton start sur la page principal l’utilisateur va enclencher un programme qui va lancer un chronomètre et un autre programme qui calcule la distance qu’il parcourt.

Finalement il faudra récupérer les données de chaque course et les associer à l’utilisateur précis dans la base de données, puis créer un fonction qui déterminera lequel des utilisateurs aura couru la plus longue distance et aura le meilleur temps par kilomètre chaque semaine sur une page web dont le lien se trouve sur la page principal.

3. Résultats

La création de comptes pour les utilisateurs dans la base de données et l'identification de l'utilisateur sur la page web est réussi. Le programme pour calculer la distance et le temps marche, toutefois il n'y a pas de fonction pour collecter ces données les ajouter à la base de données et de comparer ces données avec d'autres utilisateurs.

IMG_5441.heic Tableau 1 : Table de données avec les informations de chaque utilisateurs.

IMG_5439.HEIC Figure 1 : Page web où l'utilisateur s'identifie.

IMG_5438.heic Figure 2 : Principal où se trouve les boutons html "start" et "stop" et un chronomètre est affiché.

4. Discussion

Le but de ce projet était de créer un site web qui calcule la distance et le temps de la course d’un utilisateur, comme la plupart des apps de fitness, et d’ensuite les comparer avec d’autres utilisateurs. J’ai réussi à créer un site qui est capable, à l’aide d’une base de données, d’enregistrer de nouveaux utilisateurs et d’ensuite les identifier. J’ai aussi réussi à écrire un programme qui calcule le temps et la distance de la course de l’utilisateur. Toutefois le but du projet n’est pas complètement atteint car je n’ai pas réussi à écrire un programme qui collecte les données de courses de l’utilisateur et les comparent avec celles des autres utilisateurs. Cela est dû à plusieurs raisons, Premièrement la raison la plus évidente est ma mauvaise gestion du temps. Je n’avais pas pris en compte qu' avec les examens qui approchent, mon temps disponible était plus court, et donc je devais m’y prendre beaucoup plus tôt pour démarrer le processus de ce projet. Deuxièmement, le temps pour comprendre les notions requises à la création du projet était négligé de ma part. J’ai passé beaucoup plus de temps à me familiariser avec les différents langages de programmation et les bases de données, que ce que j’avais prévu initialement. Troisièmement, j'ai passé un temps non-négligeable à essayer de trouver les erreurs de mon code, les potentielles fautes de syntaxe, et de chercher pourquoi le programme ne marchait pas, ce qui de temps à autre devient décourageant. Finalement mes connaissances faibles dans la gestion des bases de données et la manière dont on lie différentes tables ensembles est aussi une des raisons pour laquelle une partie du projet est inachevée. Ce que je pourrais tirer de très important de ce projet et ce qui me manquait initialement à la création de ce projet est le fait de planifier le projet. C’est à dire qu'au lieu d’y aller par tâtonnement, comme je l’ai fait durant ce projet, il faudrait plutôt ordonnée ses recherches, pour être sûr de connaître toute les notions nécessaires à la création du projet, et d’ensuite visualiser approximativement le projet avec ses difficultés et son ampleur. Cette réflexion sur le projet avant même de le commencer est ce qui, selon moi, ne m’a pas permis de finir complètement ce projet dans les temps. Toutefois avec ce projet j’ai acquis beaucoup de connaissance sur la manière dont on crée un table dans une base de données, aussi sur la manière dont on localise un machine et calcule sa distance et la création de fonctions php et JavaScript et leurs insertion dans une page HTML.

5. Conclusion

Le but de ce projet était de concevoir une plateforme sur le web sur lequel différents utilisateurs peuvent calculer le temps et la distance de leur course et d’ensuite comparer leurs données avec les autres utilisateurs. L’objectif était donc de créer et gérer des bases de données pour les informations des utilisateurs et de leurs données de courses et de créer un programme qui calcule le parcours par la machine utilisée par l’utilisateur et le temps mis pour chaque course. Le problème que j’ai eu dans ce projet était le fait de trouver un moyen de collecter les données de chaque course d’un utilisateur et de comparer celles-ci avec les données des autres utilisateurs. Le problème réside donc dans ma connaissance de la gestion des données et donc pour terminer ce projet il me faudrait approfondir mes connaissances en la matière. Ensuite du point de vue des améliorations du travail déjà achevé, la page principale reste à être améliorée. Tout d’abord si l’utilisateur veut, après avoir fini une course, recommencer une nouvelle, il doit recharger la page, ce qui n’est pas la manière la plus optimale de procéder. Il faudrait donc ajouter un bouton “reset” qui aura comme fonction de mettre à zéro les données dans le but de recommencer une nouvelle course. La page principale manque aussi d’éléments affichés sur la page que l’utilisateur pourrait regarder en direct (par exemple un map qui affiche la position de la machine, ou bien le temps par kilomètre qu’il prend etc…).

Références

https://developer.mozilla.org/fr/docs/Web/API/Geolocation_API https://developer.ibm.com/tutorials/cl-track-time-on-projects-with-ibm-cloud-2/ https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1 http://www.movable-type.co.uk/scripts/latlong.html https://www.w3schools.com/howto/howto_css_center_button.asp https://dev.to/gspteck/create-a-stopwatch-in-javascript-2mak https://stackoverflow.com/questions/45808844/adding-start-stop-reset-button-for-timer https://www.codingame.com/playgrounds/3799/html-geolocation https://developers.google.com/maps/documentation/javascript/geometry https://console.cloud.google.com https://www.mindk.com/blog/build-a-geolocation-app/ https://www.youtube.com/watch?v=wxbQP1LMZsw https://www.youtube.com/watch?v=WYufSGgaCZ8&t=1068s https://www.youtube.com/watch?v=4SkIpVRyn_w