mirror of
https://github.com/almet/notmyidea.git
synced 2025-04-29 03:52:38 +02:00
102 lines
No EOL
10 KiB
XML
102 lines
No EOL
10 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<feed xmlns="http://www.w3.org/2005/Atom"><title>Carnets en ligne - tech</title><link href="https://blog.notmyidea.org/" rel="alternate"></link><link href="https://blog.notmyidea.org/feeds/tech.atom.xml" rel="self"></link><id>https://blog.notmyidea.org/</id><updated>2018-02-25T00:00:00+01:00</updated><entry><title>Webnotes</title><link href="https://blog.notmyidea.org/webnotes.html" rel="alternate"></link><published>2018-02-25T00:00:00+01:00</published><updated>2018-02-25T00:00:00+01:00</updated><author><name></name></author><id>tag:blog.notmyidea.org,2018-02-25:/webnotes.html</id><summary type="html"><p>Quand je navigue en ligne, j'aime bien prendre des notes sur ce que je lis. C'est utile pour les retrouver plus tard. Il existe quelques outils pour ce genre de cas, mais j'ai vraiment eu du mal à trouver un outil qui faisais ce que je voulais, de la manière …</p></summary><content type="html"><p>Quand je navigue en ligne, j'aime bien prendre des notes sur ce que je lis. C'est utile pour les retrouver plus tard. Il existe quelques outils pour ce genre de cas, mais j'ai vraiment eu du mal à trouver un outil qui faisais ce que je voulais, de la manière que je voulais, c'est à dire:</p>
|
|
<ul>
|
|
<li>enregistrer une sélection de texte ainsi que son contexte: heure, site web.</li>
|
|
<li>fonctionner sur Firefox;</li>
|
|
<li>stocker mes notes à un endroit que je contrôle (ce sont mes données, après tout !)</li>
|
|
<li>rester en dehors de mon chemin: je suis en train de lire, pas en train d'organiser mes notes.</li>
|
|
<li>automatiquement partager les notes sur une page web.</li>
|
|
</ul>
|
|
<p>J'ai donc pris un peu de temps pour fabriquer mon outil de prises de notes, que j'ai baptisé « Webnotes ». C'est <a href="https://addons.mozilla.org/en-US/firefox/addon/wwebnotes/">une extension Firefox</a>, qui se configure assez simplement, et qui stocke les données dans une instance de <a href="http://kinto-storage.org/">Kinto</a>.</p>
|
|
<p><img src="https://github.com/almet/webnotes/blob/master/webnotes.gif?raw=true" /></p>
|
|
<p>C'est aussi simple que sélectionner du texte, faire « clic droit » puis « save as webnote », entrer un tag et le tour est joué !</p>
|
|
<p>Mes notes sont disponibles <a href="https://notes.notmyidea.org">sur notes.notmyidea.org</a>, et voici <a href="https://github.com/almet/webnotes">le lien vers les sources</a>, si ça vous intéresse de regarder comment ça fonctionne !</p></content><category term="tech"></category></entry><entry><title>Comment est-ce que vous générez vos formulaires ?</title><link href="https://blog.notmyidea.org/comment-est-ce-que-vous-generez-vos-formulaires.html" rel="alternate"></link><published>2016-05-31T00:00:00+02:00</published><updated>2016-05-31T00:00:00+02:00</updated><author><name></name></author><id>tag:blog.notmyidea.org,2016-05-31:/comment-est-ce-que-vous-generez-vos-formulaires.html</id><summary type="html"><p>TL; DR: Je viens à peine de <em>releaser</em> la première version d'un service de génération de formulaires.
|
|
Allez jeter un coup d'œil sur <a href="https://www.fourmilieres.net">https://www.fourmilieres.net</a></p>
|
|
<p><em>En février 2012, je parlais ici <a href="https://blog.notmyidea.org/carto-forms.html">d'un service de génération de formulaires</a>.
|
|
Depuis, pas mal d'eau à coulé sous les ponts, on est …</em></p></summary><content type="html"><p>TL; DR: Je viens à peine de <em>releaser</em> la première version d'un service de génération de formulaires.
|
|
Allez jeter un coup d'œil sur <a href="https://www.fourmilieres.net">https://www.fourmilieres.net</a></p>
|
|
<p><em>En février 2012, je parlais ici <a href="https://blog.notmyidea.org/carto-forms.html">d'un service de génération de formulaires</a>.
|
|
Depuis, pas mal d'eau à coulé sous les ponts, on est passé par pas mal d'étapes pour
|
|
finalement arriver à une première version de ce service de génération de
|
|
formulaires (à la </em>google forms<em>).</em></p>
|
|
<p>En tant qu'organisateurs d'évènements (petits et gros), je me retrouve souvent
|
|
dans une situation ou je dois créer des formulaires pour recueillir des
|
|
informations. Actuellement, la meilleure solution disponible est <em>Google Forms</em>,
|
|
mais celle ci à plusieurs problèmes, à commencer par le fait que le code n'est
|
|
pas libre et que les données sont stockées chez Google.</p>
|
|
<p>La plupart du temps, le besoin est assez simple: je veux spécifier quelques
|
|
questions, et donner un lien à mes amis pour qu'ils puissent y répondre.
|
|
Je reviens ensuite plus tard pour voir la liste des réponses apportées.</p>
|
|
<p><img alt="Capture de l'interface de création du formulaire" src="{filename}/static/formbuilder-build.png"></p>
|
|
<h2>Fonctionnalités</h2>
|
|
<p>Il existe pas mal de solutions techniques qui essayent de répondre à la même
|
|
problématique, mais la plupart d'entre elles sont assez souvent compliquées,
|
|
nécessitent de se créer un compte, et/ou ne vous laisse pas la main libre sur
|
|
les données générées, voire le code est assez difficile à faire évoluer ou à
|
|
déployer.</p>
|
|
<p>Je voulais donc quelque chose de simple à utiliser <em>et</em> pour les créateurs de
|
|
formulaires <em>et</em> pour les utilisateurs finaux. Pas de chichis, juste quelques
|
|
vues, et des URLs à sauvegarder une fois l'opération terminée.</p>
|
|
<p><img alt="Capture de l'écran avec les URLs générées" src="{filename}/static/formbuilder-created.png">
|
|
<img alt="Capture d'écran d'un exemple de formulaire" src="{filename}/static/formbuilder-form.png"></p>
|
|
<h3>Pas de compte</h3>
|
|
<p>Vous n'avez pas besoin d'avoir un compte sur le site pour commencer à l'utiliser.
|
|
Vous créez simplement un nouveau formulaire puis envoyez le lien à vos amis pour
|
|
qu'eux puissent à leur tour le remplir.</p>
|
|
<p><img alt="Capture de la page d'accueil, ou aucun compte n'est requis" src="{filename}/static/formbuilder-welcome.png"></p>
|
|
<h3>Gardez la main sur vos données</h3>
|
|
<p>Une fois que vous avez récupéré les réponses à vos questions, vous pouvez
|
|
récupérer les données sur votre machines dans un fichier <code>.csv</code>.</p>
|
|
<p><img alt="Capture de la page de resultats, il est possible de télécharger en CSV." src="{filename}/static/formbuilder-results.png"></p>
|
|
<h3>API</h3>
|
|
<p>L'ensemble des données sont en fait stockées dans <a href="https://kinto.readthedocs.org">Kinto</a>
|
|
qui est interrogeable très facilement en HTTP. Ce qui fait qu'il est très facile de
|
|
réutiliser les formulaires que vous avez construits (ou leurs réponses) depuis
|
|
d'autres outils.</p>
|
|
<h3>Auto-hébergeable</h3>
|
|
<p>Un des objectifs de ce projet est de vous redonner la main sur vos données.
|
|
Bien sur, vous pouvez utiliser l'instance qui est mise à votre disposition sur
|
|
<a href="https://www.fourmilieres.net">wwww.fourmilieres.net</a>, mais vous pouvez
|
|
également l'héberger vous même très
|
|
simplement, et vous êtes d'ailleurs fortement encouragés à le faire ! Notre
|
|
objectif n'est pas de stocker l'ensemble des formulaires du monde, mais de
|
|
(re)donner le contrôle aux utilisateurs !</p>
|
|
<h2>On commence petit…</h2>
|
|
<p>Cette <em>release</em> n'est (bien sur) pas parfaite, et il reste encore pas mal de
|
|
travail sur cet outil, mais je pense qu'il s'agit d'une base de travail
|
|
intéressante pour un futur où Google n'a pas la main sur toutes nos données.</p>
|
|
<p>La liste des champs supportés est pour l'instant assez faible (Texte court,
|
|
Texte long, Oui/Non, choix dans une liste) mais elle à vocation à s'étendre, en
|
|
fonction des besoins de chacun.</p>
|
|
<p>J'ai d'ailleurs créé <a href="https://www.fourmilieres.net/#/form/cfd878264cec4ed2">un formulaire pour que vous puissiez me faire part de vos
|
|
retours</a>, n'hésitez pas !</p>
|
|
<h2>Et, euh, comment ça marche ?</h2>
|
|
<p>Le <em>formbuilder</em>, comme j'aime l'appeler se compose en fin de compte de deux
|
|
parties distinctes:</p>
|
|
<ul>
|
|
<li><a href="https://kinto.readthedocs.org">Kinto</a>, un service qui stocke
|
|
des données coté serveur et qui les expose via des <strong>APIs HTTP</strong></li>
|
|
<li><a href="https://github.com/kinto/formbuilder">Le formbuilder</a>, une application
|
|
JavaScript qui ne tourne que coté client (dans votre navigateur) qui permet
|
|
de construire les formulaires et d'envoyer les données sur les <em>APIs</em> coté
|
|
serveur.</li>
|
|
</ul>
|
|
<p>Au niveau de la <em>stack</em> technique, le <strong>formbuilder</strong> est codé en ReactJS. Un
|
|
des points techniques intéressants du projet est qu'il génère en fin de compte du
|
|
<a href="http://jsonschema.net/">JSON Schema</a>, un format de validation de données <em>JSON</em>.</p>
|
|
<p>Donc, reprenons! Vous arrivez sur la page d'accueil puis cliquez sur
|
|
"Create a new form", puis vous vous retrouvez face à une interface ou vous pouvez
|
|
ajouter des champs de formulaire. Une fois ce travail effectué, vous appuyez sur
|
|
"Create the form".</p>
|
|
<ul>
|
|
<li>Le JSON Schema est alors envoyé au serveur Kinto, qui l'utilisera pour valider
|
|
les données qu'il recevra par la suite.</li>
|
|
<li>Ce JSON Schema sera aussi utilisé lors de l'affichage du formulaire aux
|
|
personnes qui le remplissent.</li>
|
|
<li>Un jeton d'accès est généré et ajouté à l'URL, il s'agit de l'identifiant du
|
|
formulaire.</li>
|
|
<li>Un second jeton d'accès administrateur et généré, il vous faut le garder de
|
|
coté pour avoir accès aux réponses.</li>
|
|
</ul>
|
|
<p>Bref, en espérant que ça vous serve ! Un petit pas dans la direction des données
|
|
rendues à leurs utilisateurs !</p></content><category term="tech"></category></entry></feed> |