Skip to content
Snippets Groups Projects
Select Git revision
  • dd7ac99bda5c47cd1bf882d37bb2818280e7dc43
  • master default protected
2 results

Hyperdrive.md

Blame
  • Forked from Développement Web Avancé / 2019_TP2
    45 commits ahead of the upstream repository.
    Nicolas Paschoud's avatar
    nicolas.paschoud authored
    dd7ac99b
    History

    Hyperdrive

    Une introduction

    Dans le cadre du cours de Développement Web Avancé, nous avons du réaliser un projet web. Durant ce projet, nous avons du créer une API REST afin d'offrir un accès aux données. Ce projet a été réalisé en Javascript en utilisant Node JS.

    L'application

    Le projet que nous avons choisi de réaliser est un drive. Pour des besoins personnels, nous avons jugé ce projet pertinent et l'avons donc réalisé. Le but est donc de permettre à un utilisateur de s'enregistrer et de stocker des fichiers sur la plateforme. Il a aussi la possibilité de les organiser en créant des dossiers. Il a aussi la possibilité de les partager avec d'autre utilisateurs du service. Nous avons créer une interface simple découpée en quatre partie :

    • Une zone de menu pour se connecter, se déconnecter et créer des dossiers / importer des fichiers.
    • La zone de contenu du drive ou sont affichés tous les dossiers et fichiers de l'utilisateur.
    • Une zone d'information sur le fichier (nom, son propriétaire, la date d'upload, l'adresse d'upload)
    • Une zone de contenu affichants tous les fichiers que les autres utilisateurs partagent avec lui.

    L'utilisateur a la possibilité de s'inscrire ainsi que de se connecter au service. Lors de sa connexion, il reçoit un token lui permettant d'accéder à l'API. Lors de sa déconnexion, le token est détruit. Pour créer un dossier, il lui suffit de se mettre à un endroit spécifique et de cliquer sur le bouton "New File" après avoir renseigné le nom du dossier à créer.

    Pour permettre la géolocalisation des fichiers, nous avons utilisé 2 API publiques qui sont :

    • https://ip-api.com/ Cette API nous permet de récupérer les informations de localisation d'une adresse IP. Nous pouvons grâce à celle-ci, récupérer les latitude et longitude que nous stockons dans la base de données.
    • http://bot.whatismyipaddress.com Cette API permet de récupérer l'adresse ip de l'ordinateur courant. Nous l'utilisons exclusivement pour la raisons suivantes. Nous travaillons en local, et n'avons pas déployé de serveur public. Nous ne pouvons donc pas récupérer l'adresse du client qui fait une requête sur l'API car il s'agit d'une adresse privée. Il est cependant facile de modifier cette partie du code pour utiliser l'adresse du client au cas ou nous voudrions rendre notre API public.

    Installation

    Avant de faire fonctionner le site, assurez vous d'avoir la plateforme Node JS d'installée. Installer ensuite les packages nécessaire au fonctionnement du site en vous rendant à la racine du projet et en executant la commande suivante : npm install

    Pour démarrer le site il faut réaliser ces 2 étapes :

    • Se rendre dans le dossier db se trouvant dans la hiérarchie du projet et taper la commande docker-compose up -d. Assurez-vous que le port 3306 est libre pour permettre au service MySQL de démarrer correctement.
    • Se rendre dans le projet ou se trouve le fichier hyperdrive-rest.js et taper la commande node hyperdrive-rest.js. après vous être assurer que le port 8080 n'est pas utilisé par un autre service. Le site est accessible à l'adress de votre ordinateur sur le port 8080.

    Répartition

    Fleury Noé :

    • Upload / Download des fichiers
      • Localisation de ceux-ci à l'upload
    • JWT
    • Partage des fichiers

    Paschoud Nicolas :

    • Base de donnée
      • Requêtes SQL (sql-request.js)
    • Affichage de l'arborescence dans le drive
    • Affichage des informations du fichier
    • Création d'un dossier

    Architecture

    Notre architecture se présente sous cette forme.

    hyperdrive

    • Le bloc Client fais des appels à l'API hyperdrive qui lui réponds avec les données que le client souhaite. Le client les traites et les affiches à sa guise.
    • L'API Hyperdrive réponds à des requêtes des clients. Il ne fait appel qu'en cas de besoin aux API whatismyipaddress et ip-api.
    • L'API ip-api est appelée par hyperdrive seulement lorsque le client upload un fichier. Cet appel permet de retourner l'addresse de la personne en fonction de son IP. Les latitudes et longitudes sont stockée par l'hyperdrive dans le bloc SQL
    • Le bloc whatismyipaddress n'est util que dans le cadre du développement. Cette API nous sert à récupérer notre IP pour ensuite faire un appel à ip-api.

    Technologies

    Pour la réalisation de ce projet, nous avons utilisé la plateform Node JS pour la réalisation de notre API REST. Nous avons aussi réaliser une base de données relationnelle MySQL qui se trouve dans un container. Tout notre projet a été réaliser en Javascript en utilisant les modules Node JS suivant :

    • Express
    • MySQL
    • Crypto-js
    • http

    - Une représentation graphique de l’architecture - Les informations sur les technologies utilisées - Documentation des routes de l’API (adresse, méthode, paramètre, retours, etc.) - Toute informations utile à la compréhension de votre projet et au travail réalisé

    Routes

    /

    La route principale retourne la page principale du site (index.html)

    /login

    Cette route permet de créer un token pour l'utilisateur si il est inscrit au site

    Paramètre :

    • pseudo : Pseudo de l'utilisateur
    • password : Mot de passe de l'utilisateur

    Retour :

    Le retour de cette route est un objet JSON formé de cette manière :

    {
    	"route": "/login",
    	"resCode": 0,
    	"signedToken": jwt.signedToken,
    	"comment": `Password for user '${ user }' true.`
    }

    /logout

    Logout permet de supprimer un token lorsqu'un utilisateur se deconnecte.

    Param :

    • Token : Token de l'utilisateur a déconnecter

    /register

    Cette route permet d'inscrire un utilisateur au service de l'hyperdrive

    Paramètres :

    • pseudo : Pseudo du nouvel utilisateur
    • password : Mot de passe du nouvel utilisateur

    /share/:file_id/:to_user

    Cette route permet de partager un fichier avec un utilisateur

    Paramètres :

    • token : Il s'agit du token de l'utilisateur qui souhaite partage un fichier
    • file_id : Il s'agit de l'id du fichier à partager
    • to_user : Il s'agit de la personne à qui on souhaite partager le fichier

    /upload

    Cette fonction permet d'uploader un fichier dans un path.

    Paramètre :

    • token : Token d'authentification de l'utilisateur.
    • file_name : Il s'agit du nom du fichier.

    /download/:file_id

    Cette fonction permet de télécharger un fichier.

    Paramètre :

    • file_id : Id du fichier que l'on souhaite télécharger.
    • token : Token d'authentification de l'utilisateur.

    /change-path*

    Cette fonction permet d'afficher le contenu d'un dossier.

    Paramètres :

    • token : Token d'authentification de l'utilisateur.
    • path : Il s'agit du dossier dont le contenu doit être affiché.

    Retour :

    Cette route retour un tableau d'objet JSON. Chaque object est soit un dossier, soit un fichier

    Voici l'exemple d'un objet fichier. Cet objet se trouve dans un tableau.

    {
      "paths": "/a",
      "login": "a",
      "parent": null,
      "file_id": "ab",
      "file_name": "deux"
    }

    Voici l'exemple d'un objet dossier. Cet objet se trouve dans un tableau.

    {
      "paths": "/a/coucou",
      "login": "a",
      "parent": "/a",
      "file_id": null,
      "file_name": null
    }

    Un dossier possède un parent, car il se trouve dans un dossier. Dans le cas du dossier, le champ path indique la ou se trouve le fichier ainsi que son nom. Le dernier élément est le nom, tandis que tout ce qui se trouve avant est la ou est stocké le fichier.

    A l'inverse, un fichier se trouve dans un dossier, il a donc un path. Il est certe enfant d'un dossier, mais la seule information de ou il se trouve nous suffit.

    /create-path*

    Cette fonction permet de créer un dossier à un endroit spécifique.

    Paramètres :

    • token : Token d'authentification de l'utilisateur.
    • path : Il s'agit du nouveau dossier à créer.

    /get-info

    La route get-info nous permet de récupérer les informations d'un fichier.

    Paramètres :

    • file_id : Id du fichier dont on souhaite avoir les informations.
    • token : Il s'agit du token d'authentification.

    /show-shared-file

    Cette route permet de récupérer tous les fichiers partagé avec un utilisateur.

    Paramètres :

    • token : Le token nous permet de récupérer l'id de l'utilisateur.

    Retour :

    La réponse est un tableau d'objet JSON. Chaque objet contient ces informations :

    {
      "login": "b", // La personne qui a cherché le fichier
      "file_id": "abcd", // Id du fichier
      "file_name": "un" // Nom du fichier
    }

    Conclusion

    Lors du développement de ce drive, nous avons pu utiliser des technologies nouvelles ainsi qu'un manière intéressante de dévelloper. La programmation asynchrone fut difficile à prendre en main, mais nous y somme arrivé. Le développement de ce drive fut fort interessant et captivant, nous avons pris beaucoup de plaisir. Le temps nous a malheureusement manqué pour nous permettre de faire quelque chose qui nous satisfait à 100%.

    Nous vous proposons quand même une version intéressante et bien aboutit. Certaines fonctionnalités prévue au début on été revue et même parfois supprimées car leur présence ne faisait aucun sens.