diff --git a/content/static/formbuilder-build.png b/content/static/formbuilder-build.png new file mode 100644 index 0000000..f1ba7c9 Binary files /dev/null and b/content/static/formbuilder-build.png differ diff --git a/content/static/formbuilder-created.png b/content/static/formbuilder-created.png new file mode 100644 index 0000000..e5f1779 Binary files /dev/null and b/content/static/formbuilder-created.png differ diff --git a/content/static/formbuilder-form.png b/content/static/formbuilder-form.png new file mode 100644 index 0000000..1c14c89 Binary files /dev/null and b/content/static/formbuilder-form.png differ diff --git a/content/static/formbuilder-results.png b/content/static/formbuilder-results.png new file mode 100644 index 0000000..d243eee Binary files /dev/null and b/content/static/formbuilder-results.png differ diff --git a/content/static/formbuilder-welcome.png b/content/static/formbuilder-welcome.png new file mode 100644 index 0000000..0335ec5 Binary files /dev/null and b/content/static/formbuilder-welcome.png differ diff --git a/content/tech/2015-06-formbuilder.md b/content/tech/2015-06-formbuilder.md new file mode 100644 index 0000000..730692e --- /dev/null +++ b/content/tech/2015-06-formbuilder.md @@ -0,0 +1,118 @@ +Title: Comment est-ce que vous générez vos formulaires ? +Headline: Présentation d'une solution pour gérer vos formulaires en gardant la main sur les données générées +Date: 2016-05-31 +Status: draft + +TL; DR: Je viens à peine de *releaser* la première version d'un service de génération de formulaires. +Allez jeter un coup d'œil sur [https://www.fourmilieres.net](https://www.fourmilieres.net) + +*En février 2012, je parlais ici [d'un service de génération de formulaires](https://blog.notmyidea.org/carto-forms.html). +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 *google forms*).* + +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 *Google Forms*, +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. + +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. + +![Capture de l'interface de création du formulaire]({filename}/static/formbuilder-build.png) + +## Fonctionnalités + +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. + +Je voulais donc quelque chose de simple à utiliser *et* pour les créateurs de +formulaires *et* pour les utilisateurs finaux. Pas de chichis, juste quelques +vues, et des URLs à sauvegarder une fois l'opération terminée. + +![Capture de l'écran avec les URLs générées]({filename}/static/formbuilder-created.png) +![Capture d'écran d'un exemple de formulaire]({filename}/static/formbuilder-form.png) + +### Pas de compte + +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. + +![Capture de la page d'accueil, ou aucun compte n'est requis]({filename}/static/formbuilder-welcome.png) + +### Gardez la main sur vos données + +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 `.csv`. + +![Capture de la page de resultats, il est possible de télécharger en CSV.]({filename}/static/formbuilder-results.png) + +### API + +L'ensemble des données sont en fait stockées dans [Kinto](https://kinto.readthedocs.org) +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. + +### Auto-hébergeable + +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 +[wwww.fourmilieres.net](https://www.fourmilieres.net), 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 ! + +## On commence petit… + +Cette *release* 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. + +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. + +J'ai d'ailleurs créé [un formulaire pour que vous puissiez me faire part de vos +retours](https://www.fourmilieres.net/#/form/cfd878264cec4ed2), n'hésitez pas ! + +## Et, euh, comment ça marche ? + +Le *formbuilder*, comme j'aime l'appeler se compose en fin de compte de deux +parties distinctes: + +- [Kinto](https://kinto.readthedocs.org), un service qui stocke + des données coté serveur et qui les expose via des **APIs HTTP** +- [Le formbuilder](https://github.com/kinto/formbuilder), 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 *APIs* coté + serveur. + +Au niveau de la *stack* technique, le **formbuilder** est codé en ReactJS. Un +des points techniques intéressants du projet est qu'il génère en fin de compte du +[JSON Schema](https://github.com/spiral-project/formbuilder), un format de +validation de données *JSON*. + +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". + +- Le JSON Schema est alors envoyé au serveur Kinto, qui l'utilisera pour valider + les données qu'il recevra par la suite. +- Ce JSON Schema sera aussi utilisé lors de l'affichage du formulaire aux + personnes qui le remplissent. +- Un jeton d'accès est généré et ajouté à l'URL, il s'agit de l'identifiant du + formulaire. +- 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. + +Bref, en espérant que ça vous serve ! Un petit pas dans la direction des données +rendues à leurs utilisateurs !