Unhosted

Aventures Unhosted

Une traduction approximative du Journal de bord officiel du No Cookie Crew

d’après Unhosted Adventures
by Michiel B. de Jong

8. Collecte et organisation de vos données

En tant que membre du No Cookie Crew, vous allez utiliser des applications web Unhosted pour tout les choses pour lesquelles vous utilisez actuellement des applications web hébergées. Aucune de ces applications Unhosted ne va stocker vos données utilisateur, pour la simple bonne raison qu’elles n’ont pas de serveur backend pour ça. Vous allez devoir stocker vos données vous-même.

La collecte et l’organisation de vos propres données va vous demandez somme toute un peu de travail, cette somme de travail peut varier en fonction de la manière dont vous allez vouloir vous organiser. En général, ce travail a été fait par les développeurs et les administrateurs système des applications web hébergées que vous avez utilisées. Votre tâche principale va donc consister plutôt à “ranger votre chambre”, à l’image d’un enfant regroupant ces jouets dans les différents étagères de sa chambre.

Collectez vos données depuis vos propres sauvegardes

Nous aimons parfois prétendre que la génération Chromebook est déjà là, et que toutes nos données sont dans le nuage. En réalité, visiblement, beaucoup de nos données sont encore sur le disque dur de notre portable, sur des disques durs externes, des clés USB, et sur les DVD que nous avons créés au fil des ans.

La première étape pour rendre ces données utilisables depuis des applications web Unhosted est de toutes les regrouper dans un seul endroit. Au moment ou j’ai commencé à le faire, j’ai réalisé que j’avais grossièrement quatre types de données, voici la manière dont j’ai raisonner pour organiser mes dossiers :

La plupart du travail consiste à l’élagage du sans cesse croissant dossier des Travaux en cours : déterminer quels sont les fichiers et les dossiers pouvant être supprimés en toute sécurité (ou déplacée vers le “dossier old/”), archiver tous les fichiers source des travaux que j’ai publiés, et faire le choix des souvenirs à garder et de ceux qui au final sont un peu les mêmes.

Ma liste de tâches et mon calendrier ont évidemment rejoint mon dossier “Travaux en cours”, mais la seule chose qui n’y trouve pas vraiment sa place est le carnet d’adresses. Il est à la fois une part de mon dossier de travail, de mes productions et de mes souvenirs. Je l’utilise quotidiennement, mais un certains nombre de contacts correspond au passé, et je les garde seulement dans le cas où, un jour, je souhaite les réutiliser pour un nouveau projet, et bien évidemment tout carnet d’adresses recèle également une valeur nostalgique.

Certaines choses sur votre serveur Web indépendant, le reste sur votre serveur FreedomBox

Dans un premier temps, l’idée était de mettre la totalité de ces différents types de données sur un seul compte RemoteStorage. Idée qui s’est rapidement heurtée à trois problèmes :

Tout d’abord, après avoir numérisé tous mes DVD de sauvegardes, et même après la suppression de tous les dossiers en double, j’avais une somme de données d’environ 40 Gigas, et mon serveur ne dispose que de 7 Go d’espace disque. Évidemment, il est toujours possible d’obtenir un serveur plus volumineux, mais cette solution ne semble pas être une dépense pertinente, surtout pour les fichiers de la Médiathèque.

Ensuite, je suis souvent dans des lieux où la bande passante est limitée, et même si je voulais télécharger 40 Gigs sur mon serveur distant, ce serait tout de même un beau gaspillage de ressources et tout ça juste pour tenter de diffuser de la musique pour quelques heures.

Enfin, même si je veux envoyer mes photos dans un endroit à partir duquel je pourrais les partager avec des amis, beaucoup de celles-ci sont dans des formats qui occupent plusieurs méga-octets, et généralement les photos que l’on partage en ligne seraient plutôt autour des 50 Ko pour de bonnes performances de navigation. Donc, même si je télécharge toutes mes photos sur mon serveur Web indépendant, je voudrais les télécharger dans leur version “optimisée pour le web”, et non dans leur volumineuse version originale.

Après quelques discussions avec Basti et François, j’ai conclu que la présence d’un serveur de stockage distant n’est pas suffisant pour couvrir tous les cas d’utilisation : vous allez en avoir besoin de deux. Le “serveur web indépendant”, devrait toujours être allumé, avec un nom de domaine public, et le “serveur FreedomBox” devrait être à votre domicile.

Sur votre serveur Web indépendant, vous ne devriez stocker qu’une copie de l’ensemble de vos données de travail, en y ajoutant probablement une version de taille réduite de certaines de vos productions et de vos souvenirs. Sur votre serveur FreedomBox il vous suffit de tout stocker.

Cela signifie que, au préalable, vous allez sans doute avoir besoin de prendre manuellement en charge la “gestion de versions” de certaines de vos données, et de réfléchir à deux fois avant de téléverser quelque chose sur votre serveur Web indépendant. À un moment donné, nous allons probablement chercher à construire des applications de publication qui pourront se connecter aux deux comptes et prendre en charge cela, mais pour l’instant, puisque nous avons un accès webshell aux deux serveurs, nous pouvons le faire avec une simple commande scp.

FreedomBox et la clé-RemoteStorage

Évoquer le fait de disposer d’un serveur de données chez soi permet d’aborder le travail que Markus et moi avons réalisé en combinant la FreedomBox avec RemoteStorage. Notre idée était de scinder la FreedomBox dans le “plug” serveur actuel et dans une clé USB connectée à celui-ci, pour le stockage de données. Les deux raisons à une telle redistribution de l’appareil sont qu’il indique clairement à l’utilisateur où sont ses données et comment il peut les copier et les sauvegarder, et qu’il rend le support technique plus facile, puisque l’appareil ne contient pas de données importantes et peut donc facilement être réinitialisé aux réglages d’usine.

Pour permettre à cette FreedomBox de faire tourner également un site Web public, nous vendrions un paquet contenant :

Le chemin est encore long pour rendre ce produit vendable, mais cela ne coûte rien de commencer à expérimenter cet architecture nous-mêmes, c’est pourquoi j’ai acheté une clé USB, l’ai formaté en ext4 avec cryptage, et l’ai monté comme ma clé-RemoteStorage. C’est l’une de ces clés minuscules qui intègre le matériel au sein du connecteur et qui ne dépassent pas, du coup je la laisse branchée à mon ordinateur portable par défaut.

Mettez vos données sur votre serveur RemoteStorage

En guise de prototype FreedomBox, j’ai installé ownCloud sur mon localhost et ai fait pointer un domaine “freedomBox” vers 127.0.0.1 dans mon répertoire /etc/hosts. Pour rendre vos données accessibles via une API RemoteStorage, installez l’un des serveurs RemoteStorage compatibles avec les données personnelles figurant sous la rubrique “héberger votre propre espace de stockage” (“host your own storage”) sur remotestorage.io/get/. Je suis allé ici pour cet ownCloud, car (de manière semblable à php-RemoteStorage) il identifie directement les données dans le système de fichiers (il utilise des attributs étendus pour stocker les “Content-Types”). Cela signifie que vous pouvez simplement importer des données dans votre compte RemoteStorage en les copiant sur votre clé-RemoteStorage. Assurez-vous que votre clé-RemoteStorage est formatée avec un système de fichiers qui supporte les attributs de fichiers étendus.

Exportez vos données depuis Google, Facebook et Twitter

No Cookie Crew - Avertissement n°5 : Vous devrez maintenant vous connecter à ces services, car mis à part Twitter, ils n’offrent pas cette même fonctionnalité au travers de leur API.

Cette partie est assez amusante : Libérons les données ! :) En réalité, il est très facile de télécharger toutes vos données depuis Google. Voilà à quoi cela ressemble :

Google data

Facebook propose un service similaire, même si l’exportation des contacts est assez rudimentaire, mais vous pouvez au moins exporter vos photos :

Facebook data

Et voilà à quoi celui de chez LinkedIn ressemble :

linkedin data

Pour twitter, les tweets sont essentiellement éphémères, il n’y a donc pas réellement d’intérêt à les exporter. Il est plutôt préférable de commencer dès maintenant à sauvegarder une copie de tous vos tweets via sockethub vers votre RemoteStorage. Par contre pour l’export de vos contacts, s’ils ne sont pas trop nombreux, il vous suffit de gratter https://twitter.com/following et https://twitter.com/followers en ouvrant la console web (Ctrl-Maj-K dans Firefox) et de coller :

  var screenNames = [],
    accounts = document.getElementsByClassName('account');
  for(var i=0; i<accounts.length; i++) {
    screenNames.push(
        accounts[i].getAttribute('data-screen-name'));
  }
  alert(screenNames);

Assurez-vous d’abord de faire défiler toute la page pour afficher tous les comptes. Bien entendu, il est aussi possible de passer par l’API (voir épisode 5).

La conversion de vos données au format “web-ready”

Malgré le fait que vous allez probablement vouloir également conserver les originaux, il est pertinent de convertir toutes vos photos dans une “taille-web” de 50Kb. Si vous avez suivi l’épisode 3, vous avez alors un serveur Web indépendant avec un cryptage “bout-à-bout” (TLS), alors vous pouvez en toute sécurité partager des photos avec vos amis en les chargeant sur des des URL non-devinable (“unguessable”). Il est logique dans ce contexte de limiter les 404s, même si cela vous déplait, tant que les URLs sont suffisamment longues, il est assez improbable que qui-que-ce-soit réussisse à les deviner au cours de l’existence de notre planète.

Pour être en mesure de lire votre musique au sein de votre navigateur, vous allez avoir besoin de convertir votre musique et vos fichiers audio dans l’un des format au choix pris en charge par votre navigateur, le .ogg par exemple. Sous Unix, il est possible pour cela d’utiliser l’outil avconv (précédemment connu sous le nom ffmpeg):

    for i in `ls */*/*` ; do
      echo avconv -i $i -acodec libvorbis -aq 60 \
        ~/allmydata/mediaCache/$i.ogg ;
     done | sh

Pour convertir vos vidéos en .ogg, vous pouvez essayer quelque chose comme :

    for i in `ls *.AVI` ; do
      echo avconv -i $i -f ogg \
        ~/allmydata/souvenirs/$i.ogg ;
    done | sh

J’ai eu quelques problèmes avec la qualité du résultat vidéo, et pour certains fichiers le son ne fonctionne pas, mais c’est juste une question de manipulation de votre logiciel de conversion pour trouver les réglages qui vous conviennent.

Jouez votre musique via votre navigateur

Si vous configurez votre serveur RemoteStorage pour diffuser vos fichiers musicaux, assurez-vous de les mettre sous /public/music/ sur votre serveur RemoteStorage, vous pourrez alors utiliser le Unhosted Music Player” de François. Sinon, il vous est également possible d’utiliser l’ URL file:///pour lire votre musique. Dans le dossier contenant les fichiers, il suffit d’ajouter un fichier html qui jouera pour ceux-ci le rôle d’application de liste de lecture :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Yo Skrill, drop it hard (playlist)
  </head>
  <body>
    <h1>Programming
    <audio id="player">
    <ul id="playlist">
  </body>
  <script>
    var songs = [
      '99 problems.ogg',
      'skrillex.ogg',
      'minimal.ogg'
    ];
    var i=0;    
    document.getElementById('player').controls=false;
    
    function go() {
      document.getElementById('player').src=songs[i];
      document.getElementById('player').play();
      var str ='';
      for(var j=0; j<songs.length; j++) {
        if(j==i) {
          str += '<li><strong>'+songs[j]+'</strong>(playing)';
        } else {
          str += '<li>'+songs[j]+'<input type="submit" '
              + 'value="play" onclick="i='+j+'; go();" /></li>';
        }
      }
      document.getElementById('playlist').innerHTML = str;
    }
    
    document.querySelector('audio')
        .addEventListener('pause', function() {
      i = (i+1) % songs.length;
      go();
    }, false);
    go();
  </script>
</html>

Utilisez html pour organiser vos données

N’oubliez-pas, c’est le web. Vous pilotez. Vous pouvez facilement ajouter des pages html similaires à cette application de playlist musicale précèdente, pour pouvoir créer vos propres interfaces d’album photo. Vous pouvez créer des albums photos permettant de mixer vidéos et photos à l’aide de la balise HTML5 <video>, et même ajouter des animations CSS, des graphiques SVG, des effets 3D et des fonctions de navigation interactives pour vos galleries photos et vos albums souvenirs. Vous pouvez même faire des enregistrements sonores de vos vacances et les ajouter à votre prochain “album photo”.

J’ai aussi constaté jusqu’ici qu’il a été beaucoup plus important pour moi d’avoir tous mes contacts importés dans un certain format sur mon serveur RemoteStorage, même si c’est juste un fichier texte sur lequel j’effectue mes recherches à l’aide de Ctrl-F, plutôt que d’avoir une application dédiée à chaque tâche. J’utilise également beaucoup de javascript pour, par exemple, lire directement dans les fichiers csv et les organiser sous formes de feuilles de calculs.

De nombreuses applications que généralement nous présumons être essentiellement sur ordinateur (les feuilles de calcul en sont un bel exemple) deviendront hors sujet dès que vous apprendrez à développer vos propres applications web Unhosted. Et le fait de disposer de la puissance d’Internet au bout de vos doigts, plutôt que d’être mains-et-pieds-liés à l’offre des fournisseurs de logiciels, apporte également un savoureux sentiment de liberté et d’opportunité. Et rend le fait d’être un membre du No Cookie Crew encore bien plus “fun”! :)

Commentaires bienvenus!

Suivant: Envoi et réception de courrier électronique à partir d’applications Web Unhosted