Add a forum extension to Jumplyn

Introduction :

Jumplyn est la communauté de coaching numérique des projets étudiants du département Télécom de l’INSA de Lyon. Plus de 231 projets sont présents sur la plateforme menés par 928 membres.

Problématique :

Jumplyn ne dispose pas de forum permettant d’échanger les idées et les expériences entre les membres de la communauté, l’idée est d’ajouter cette option, mais comment ? un forum intégré sera peu consulté, les utilisateurs préfèrent des bases plus riches en informations telle que stackoverflow, reddit et Hacker News. Etant donnée que Jumplyn dispose déjà d’un web crawler qui explore le net et collecte les ressources en relation avec un projet donné, l’idée est de donner plus de liberté aux utilisateurs en leurs donnant la possibilité de sauvegarder les topics qui leurs semblent utiles. Cela est fait à base d’une extension chrome.

Solution :

Architecture :

L’architecture de notre solution se compose de deux parties, une partie front-end qui est l’extension chrome, une deuxième back-end intégré au serveur jumplyn.

* Coté navigateur :

Google permet au développeur d’ajouter des fonctionnalités sous forme d’extension chrome.

Manifest.json définit les principaux configurations de notre extension

{
  "manifest_version": 2,
  "background": {
    "page": "popup.html"
    },
  "name": "AWA Forum",
  "description": "This extension will add forum topic's to your project",
  "version": "1.0",
"browser_action": {
   "default_icon": "icone.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab",
   "tabs",
   "https://*/",
   "http://*/",
   "cookies"
   ],
  "icons" : { "16": "icone.png", "24": "icone.png", "32": "icone.png", "64": "icone.png" }
}

popup.html est la page principale de notre extension, elle dispose d’un bouton add-topic qui lance le script test.js, ce dernier récupère le lien vers cette page web ainsi que le titre de la page.

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    
    link.addEventListener('click', function() {
        chrome.tabs.getSelected(null,function(tab) {
        var link = tab.url;
        
        var title = tab.title;
        document.write(title);
        sendToServer(link,title);
});
    });
});

les données récupérées sont postées sur l’api /forum

function sendToServer(link,title){
    var url = "http://localhost:3000/forum";
    var json = "";
    json = json + '{"URL":' + '"'+ link +'"'+',"title":' + '"'+     title + '"}';
    var xhr = new XMLHttpRequest();
    xhr.open("PSOT",url,true);
    xhr.setRequestHeader("Content-type","application/json");
    xhr.send(json);
 }

* coté serveur :

Les données reçues sur /forum sont ajoutées au document mongodb du projet qui correspond à l’utilisateur connecté.

En conclusion

Cette extension est un bon moyen d’ajout des liens externes, les utilisateurs ont la liberté de choisir les sources en lien avec leurs projets.