Merge branch 'master' of ssh://ssh.hesge.ch:10572/nicolas.paschoud/2019_tp2

documentation/Hyperdrive.md

+# 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
+
+L'interraction entre les API se présente sous cette forme.
+
+![hyperdrive](/Users/klaus/Documents/Web/Back/2019_tp2/documentation/hyperdrive.png)
+
+- 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*.
+
+Voici comment se présente notre architecture
+
+<img src="./architecture.png" height="1000px">
+
+Nous avons plusieurs dossier principaux :
+
+- /
+
+  A la racine se trouve les fichiers principaux de l'API :
+
+  - hyperdrive-rest.js
+
+    Il s'agit du fichier contenant le traitement pour chacune des routes
+
+  - sql-request.js
+
+    Ce fichier permet de faire des requêtes SQL vers la base de données.
+
+- front/
+
+  Ce dossier contient tout le frontend de l'application
+
+## 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
+
+## 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 : 
+
+```json
+{
+	"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.
+
+```json
+{
+  "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.
+
+```json
+{
+  "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 :
+
+```json
+{
+  "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.
\ No newline at end of file

projet/front/element-style.js

@@ -37,7 +37,6 @@ lng: 6.1459
 login: "a"
 paths: "/a"
 */
-    console.log(infos);
     el.innerHTML = `
         <p>File name : ${infos.file_name}</p>
         <p>Path : ${infos.paths}</p>

projet/hyperdrive-rest.js

@@ -363,8 +363,8 @@ app.get('/download/:file_id', (req, res) => {
 })
 
 /**
- * This function return the content of a new path
- * param 
+ * This function return the content of a path
+ * param path : Path of the folder we want to show
  */
 app.get('/change-path*', (req, res) => {
     let path = req.params['0'].split("/");
@@ -373,7 +373,7 @@ app.get('/change-path*', (req, res) => {
     let tok = req.params['0'].split("/").pop();
     let name = verify_token(tok);
     if (name) {
-        let content = sql.changeDirectory(name, path,
+        sql.changeDirectory(name, path,
         (content) => {
             res.send(content);
         });
@@ -418,6 +418,9 @@ app.get('/get-info', (req, res) => {
     }
 });
 
+/**
+ * 
+ */
 app.get('/show-shared-file', (req, res) => {
     let token = req.query["token"];
     let name = verify_token(token);

projet/sql-request.js

@@ -226,7 +226,10 @@ function createPath(path, user, callback) {
 function getInfo(file_id, login, callback){
     const q = `SELECT * FROM Files WHERE file_id='${file_id}';`;
     con.query(q, (err, resp) => {
-        if (err) return callback(false, err);
+        if (err) {
+            console.log(err);
+            return callback(false, err);
+        }
         return callback(resp, resp);
     });
 }