Journal Import NetVibes dans Pétrolette

Posté par  (site Web personnel) . Licence CC By‑SA.
Étiquettes :
21
28
fév.
2021

Sommaire

Devlog

Dans ce journal, nous verrons comment Pétrolette est maintenant capable d'importer le fichier OPML d'export de NetVibes.

Rappel

Pétrolette est une page d'accueil de lecture d'actualités, libre. Elle est immédiatement utilisable sans inscription avec la même URL dans le navigateur du bureau ou celui d'un appareil mobile.

Emacs / Pétrolette

OPML

La structure du fichier est un peu étrange :

  <?xml version="1.0" encoding="UTF-8"?>
  <opml version="1.0">
  <head>
  <title>UserName</title>
  <type>Private</type>
  <creationDate>2021-02-05 06:56:35</creationDate>
  </head>
  <body>
  <outline title="Tab1" cols="4" layout="4-0">
  <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="562.5" col="1"/>
  <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="1562.5" col="1"/>
  </outline>
  <outline title="Blogs" cols="4" layout="4-0">
  <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="500" col="1"/>
  <outline title="15ISSD" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="5000" col="1"/>
  <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="7000" col="1"/>
  </outline>
  <outline title="Tab2" cols="3" layout="3-0">
   <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="125" col="1"/>
   <outline title="FeedTitle" xmlUrl="https://www.example.com/rss" htmlUrl="https://www.example.com/rss" type="rss" row="250" col="1"/>
  </outline>
 </body>
</opml>

Redondances

On peut se demander à quoi sert l'attribut "cols" de chaque tab, puisque les flux eux-mêmes ont un paramètre "col" pour indiquer où ils se trouvent dans le tab..?

Chez nous, c'est plus simple:

[
  {"name":"news",
   "columns": [
     [
       {"url":"https://www.sciencemag.org/rss/weekly_news_email.xml","type":"photo","limit": 1,"status":"off"},
       {"url":"http://rss.sciam.com/ScientificAmerican-Global","type":"mixed","limit": 6,"status":"on"}
     ],
     [
       {"url":"https://www.reddit.com/r/worldnews.rss","type":"mixed","limit": 6,"status":"off"},
       {"url":"https://www.npr.org/rss/rss.php?id=1001","type":"mixed","limit": 4,"status":"on"}
     ],
     [
       {"url":"http://explainxkcd.com/rss.xml","type":"photo","limit": 4,"status":"on"},
       {"url":"http://xkcd.com/rss.xml","type":"photo","limit": 2,"status":"on"}
     ],
     [
       {"url":"https://www.ignant.com/category/architecture/feed/","type":"photo","limit": 6,"status":"on"}
     ]
   ]
  },
  {"name":"tek",
   "columns": [
     [
       {"url":"http://feeds.bbci.co.uk/news/technology/rss.xml","type":"mixed","limit": 6,"status":"on"},
       {"url":"http://feeds.feedburner.com/hackaday/LgoM/","type":"mixed","limit": 8,"status":"on"},

       {"url":"https://hackernoon.com/feed","type":"mixed","limit": 8,"status":"off"}
     ],
     [
       {"url":"https://hacks.mozilla.org/feed/","type":"mixed","limit": 4,"status":"on"},
       {"url":"http://feeds.arstechnica.com/arstechnica/index","type":"mixed","limit": 6,"status":"on"}
     ]
   ]
  }
]

XMLtoJSON

Apres avoir parsé le XML, on se retrouve avec ça:

[
  {
    "name": "Tab1",
    "cols": "2",
    "columns": [
      {
        "col": "1",
        "url": "http://example.com/rss"
      },
      {
        "col": "1",
        "url": "http://example.com/rss"
      },
      {
        "col": "2",
        "url": "http://example.com/rss"
      }
    ]
  },
  {
    "name": "Tab2",
    "cols": "3",
    "columns": [
      {
        "col": "1",
        "url": "http://example.com/rss"
      },
      {
        "col": "1",
        "url": "http://example.com/rss"
      },
      {
        "col": "3",
        "url": "http://example.com/rss"
      }
    ]
  }
]

Objets et tableaux

Il nous faut donc simplifier tout ça, mais on ne peut pas itérer sur les feeds, puisqu'il ne sont pas rangés dans un container "tab"…

    var xml2json = new PTL.util.XMLtoJSON(),
        objson = xml2json.fromStr(xml),
        dbparsed = JSON.stringify(objson),
        all = objson.opml.body.outline,
        allTabs = [];
    var totalNbOfFeed = 0;
    for (var nbOfTabs in all) {
      var tabs = all[nbOfTabs],
          feeds = tabs.outline;
      for (var key in tabs.outline[0]) {
        var tab = tabs[key],
            thisTab = {},
            thisTabFeeds = [],
            thisColFeeds = [];
        for (var nbOfFeeds in feeds) {
          var thisFeed = {};
          totalNbOfFeed++;
          thisFeed.status = "on";
          thisFeed.limit = 6;
          thisFeed.type = "mixed";
          thisFeed.url = feeds[nbOfFeeds]["@attributes"].xmlUrl;
          thisIndex = Number(feeds[nbOfFeeds]["@attributes"].col) - 1;
          if (!thisColFeeds[thisIndex]) thisColFeeds[thisIndex] = []; // C'est là que ça se passe
          thisColFeeds[thisIndex].push(thisFeed);
        }
        thisTabFeeds.push(thisColFeeds);
        thisTab.columns = thisColFeeds;
        thisTab.name = tab.title;
      }
      allTabs.push(thisTab);
    }
    PTL.util.console(PTL.tr('Found %1 groups containing %2 feeds', nbGroups, nbFeeds), 'success');

À la première occurrence du champ "col" on initialise un tableau qui va recevoir tous les flux (feeds) qui ont le même paramètre, qu'on met dans l'objet thisTab.columns, qu'on met dans le tableau allTabs.

On ajoute des valeurs par défaut à la volée: status (feed dé/plié), limit (le nombre d'articles), et type (texte, photo, mixed).

Donc au moment de l'import on teste

  • Si le fichier est du json valide ;
  • si ce fichier est un fichier prétrolette (on loope sur tous les tabs, qui doivent tous avoir un param. "columns") ;
  • Ou si au contraire, c'est du XML (xml.startsWith('<?xml version="1.0" encoding="UTF-8"?>'))
  • Sinon erreur

Notification discrète

Pour avertir l'utilisateur autrement qu'avec un méchant dialog, j'ai bricolé un petit systeme de notification non intrusive:

    $('#notify').fadeIn('fast', 'linear', function() {
      setTimeout(function() {
        $notify.fadeOut('slow');}, 5000);
    });

Navigation au clavier

Ah oui, j'oubliais ; Pétrolette est depuis le début navigable au clavier, mais il fallait mettre le focus sur un onglet, c'est maintenant le cas au démarrage:

$('#tabs').find('li[tabindex="0"]:first-child').focus();

RERO

Voilà :) Prochaine épisode : Le scrolling infini dans les flux.

Si vous voulez que Pétrolette importe un autre type de fichier de flux, merci de l'attacher à un ticket.

  • # C'est chouette

    Posté par  (site Web personnel) . Évalué à 5 (+3/-0).

    Salut,

    Je ne connais pas Netvibes, c'est quelque chose comme Petrolette ? C'est sympa de te voir relancer la communication autour, est-ce que tu as une idée du nombre d'utilisateurs de l’application ?.

    J'ai vu les changements revenir dans l'application depuis quelques temps (mises à jour des CSS etc), ça fait plaisir de voir que tu t'as retrouvé un peu de motivation pour t'y remettre !

    • [^] # Re: C'est chouette

      Posté par  (site Web personnel) . Évalué à 2 (+0/-0).

      Je ne connais pas Netvibes, c'est quelque chose comme Petrolette ?

      ;)

      une idée du nombre d'utilisateurs de l’application ?

      De l'appli non aucune, mais du serveur de "test" oui, maintenant que je fais des logs / stats : entre 300 et 900 visites uniques / jour. Bunch o' freeloaders ;) NB : Je ne logge pas les acces à la route "/feed" donc je sais pas quels feeds lit telle IP, d'ailleurs je m'en fous.

      ça fait plaisir de voir que tu t'as retrouvé un peu de motivation pour t'y remettre !

      C'est vrai que je n'ai rien fait dessus entre début 2019 et fin 2020, où je me suis contenté de l'utiliser, et comme ça marche bien… :) là j'ai envie que ça bouge, d'ailleurs j'y retourne, car j'ai un truc sur le feu.

  • # Je connaissais pas Pétrolette...

    Posté par  . Évalué à 2 (+1/-0).

    … et c’est chouette !

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n’en sommes pas responsables.