ZdS Reader

Hello tout le monde

Fan de JS, amateur de Node.js à mes heures perdues, je commence à découvrir node-webkit qui permet de créer des applis desktop à base de JS.

Et ça m'a donné l'idée de créer un lecteur de tutos pour ZdS, pour pouvoir parcourir les tutos hors ligne.

L'idée étant que l'appli récupère la liste des tutos depuis le site Web (pourtant en direct en attendant l'API) pour permettre de les télécharger. L'ensemble des contenus seront donc stockés en local (il faudra voir les contraintes pour les médias externes, comme les images ou les vidéos) pour être parcourus à volonté sans connexion.

Les mises à jours des tutos locaux seront synchronisées dès que la connexion le permettra pour avoir un contenu toujours à jour et l'avancement de la lecture sera enregistré (comme la plupart des readers le permettent).

Dans l'idéal, si cette appli fonctionne bien, ce serait pas mal de créer son pendant pour les auteurs, histoire qu'ils puissent rédiger en local, mais cela demandera aussi pas mal de boulot sur le module d'import et je pense que les développeurs ont bien plus prioritaire pour l'instant…

Je n'ai pas encore trop de concret à vous montrer, je suis encore entrain de créer le prototype. Promis, je vous montre des screenshots dès que j'avance !

Voilà voilà

P.S. : les sources seront bien évidement sur GitHub une fois que le prototype ressemblera à quelque chose

L'idée est intéressante, même s'il existe déjà la possibilité de télécharger un tutoriel en HTML et ePub. Mais le fait de réunir les tutoriels dans une application, c'est une bonne idée. Si tu as moyen de l'exporter vers mobile, ça sera encore plus utile.

Ouais mais l'export implique de gérer les mises à jour manuellement, entre autres.

Pour le mobile, Mode-Webkit ne le permet pas pour l'instant mais je compte bien trouver un moyen de faire fonctionner tout ça avec PhoneGap.

Pour ceux qui veulent commencer à tester, j'ai mis le code actuel sur GitHub : https://github.com/viki53/ZdS-Reader

Pour l'instant l'appli ne fait que récupérer les infos depuis le site et lister les tutos locaux pour afficher des listes.

Vous pouvez activer/désactiver le mode debug, qui permet d'afficher des boutons supplémentaires (accès aux DevTools et rechargement de l'appli pour éviter de relancer à chaque MAJ) et de créer des notifications (ça permet de tester que le module fonctionne et de préparer pour les mises à jour automatiques des tutos locaux qui pourront être notifiées.

Pour l'instant je n'ai testé que sous OS X, mais ça devrait fonctionner sous Linux et Windows sans problème (éventuellement en désactivant le mode debug pour couper les notifications qui nécessitent des plugins spécifiques type Growl).

Un petit aperçu de l'écran principal, qui permet de lister tous les tutoriels — locaux comme distants — et de télécharger un tutoriel (pour l'instant en cliquant sur un tuto distant).

Les boutons en bas à droite sont là uniquement en mode debug : il suffit de désactiver le mode (dans le code ou via la console avec app.debug = false) pour les supprimer.

La lecture du tutoriel est mise en place et j'ai même testé sur le tutoriel Java qui est plutôt conséquent avec 228 fichiers MarkDown à charger et parser (sans compter les images et le manifest.json chargé en premier) : ça met un peu de temps (entre 10 et 20 secondes chez moi) mais ça fonctionne.

Vous remarquerez que le MarkDown propre à ZdS n'est pas encore géré, mais ça devrait suivre.

Pour l'instant il y a déjà un traitement pour remplacer les URL des images (qui sont souvent du type /media/…) afin d'y insérer l'URL de ZdS au début (et donc pouvoir les charger).

Prochaine étape : avoir un cache du résultat MarkDown, pour éviter de charger trop de fichiers et donc gagner en performances.

Étape suivante : améliorer le parsage MarkDown pour mieux coller aux options sur ZdS

Petite update, même s'il ne s'agit pas d'une fonctionnalité ou d'un modification visuelle : les performances de chargement d'un tutoriel ont été largement améliorées. Au final le chargement du tuto Java passe de 10–15 secondes à environ 1 seconde.

J'ai néanmoins un doute sur la réalité étant donné que j'ai un Fusion Drive : les fichiers ont peut-être été déplacés du disque dur à plateau au SSD dans la nuit, ce qui expliquerait une grande partie de l'amélioration.

Je peux tester de chez moi si tu veux.

Tu as un fichier expliquant la procédure d'installation et les software nécessaire ?

Du coup ça fonctionne bien sous Mac OS c'est ça ?

En théorie ça devrait fonctionner partout (Windows, Mac OS, Linux), mais je n'ai testé que sous OS X pour l'instant.

Pour lancer l'appli, il suffit de cloner le repo Git, de télécharger Node-WebKit puis de compiler (c'est un bien grand mot) avec la commande indiquée dans le ReadMe du repo.

Il faudra sans doute installer des softs externes plus tard (notamment pour les notifications sous Linux et Windows), mais j'ai commenté le code relatif à ça pour l'instant (et rien n'est nécessaire sous OS X 10.8+) donc ça devrait aller.

Je ferai des versions exécutables (lançables directement sans bidouille, comme des apps natives) plus tard, une fois le plus gros fait.

Okay, ben je testerais ce soir sous 10.10

Le parsage MarkDown est en cours, même si les regex sont loin d'être mon point fort.

Pour l'instant les touches de clavier ont été ajoutées au parseur classique (showdown) ainsi que les blocs spéciaux, seulement ceux situés dans des blocs de code sont aussi parsés, ce qui donne des résultats loin d'être idéaux…

–––> Repo GitHub

Tu te sers d' une api pour récup les fichier markdown?

J'utilise les liens de téléchargement (en passant le bon id en paramètre) pour récupérer le .tar du tuto, que je décompresse dans un dossier dédié.

Après, à la lecture, je parse tous les fichiers d'un coup pour l'instant, mais je vais refondre tout ça pour y aller par étape : sur certains tutos ça peut demander du temps de tout lire et parser…

Ok;)

Et voilà, toute la navigation a été refaite !

Du coup la lecture d'un tutoriel est beaucoup plus fluide.

Bon, il manque encore un peu de peinture pour que ce soit joli et agréable à lire, mais le principal est là…

As-tu pensé à la lecture des tuto en bêta ?

Si oui comment, si non pourquoi ?

Oui, j'y ai pensé. Mais (il y a forcément un mais) le listing actuel public ne permet pas de voir les tutos en bêta, donc impossible de les avoir dans la liste distante (celle de droite).

Par contre il est tout à fait possible de télécharger l'archive du tuto et de l'extraire dans le dossier data/tutorials/_ID_ (où _ID_ correspond à l'id du tuto) : l'appli regarde automatiquement dans le dossier au lancement. C'est d'ailleurs comme ça que j'avais commencé le développement : avec l'archive de mon propre tuto.

Tu perdras juste quelques infos au passage (tags, miniature…), mais rien d'essentiel.

Et justement moi je pensais à la possibilité d'un bouton d'import direct dans ton appli pour faciliter ça par exemple.

On a une URL pour les tuto en bêta donc pourquoi pas ajouter un bouton qui t'ouvre un champ où tu mets l'url et tu clique sur importer et lors de ta recherche de MAJ des tuto tu regarde si l'url du tuto en bêta fonctionne toujours et si non ben tu mets un avertissement indiquant qu'il y a une mise à jour sur le tuto (il me semble que l'url change lors d'une MAJ d'un tuto en bêta).

Effectivement, ça peut être une idée, j'y avais pas pensé dans ce sens-là !

Pour le coup ça me paraît pas super compliqué, donc tu peux créer une issue sur GitHub (si tu n'as pas de compte, fais-moi signe, je le ferai) et je m'en occuperai dès que possible.

Et l'URL de la beta ne change pas forcément : il peut y avoir un paramètre de version (qui n'est d'ailleurs pas obligatoire : la dernière est prise par défaut), mais j'en fais abstraction pour l'instant (même s'il faudra que je le gère plus tard pour récupérer les MAJ automatiquement).

C'est encore plus simple que je ne pensais (avec le coup du non changement d'url).

Le champs avec le bouton d'import me parait l'idée la plus simple et la méthode d'import derrière est la même que tu as utilisé pour les autres tutos donc je pense que le plus gros du taf doit être fait pour toi mais ça simplifie énormément la vie de l'utilisateur.

Je rajoute l'issue (si je trouve comment faire)

edit : issue créé

Yes, le plus gros est fait. Il faut juste que j'intègre un loader quelque part, qui me servira aussi pour la récupération des tutos distants (système actuel).

Un bouton dans le header à droite, ça devrait le faire.

Pour ajouter une issue : https://github.com/viki53/ZdS-Reader/issues/new