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
Category: tech

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](http://jsonschema.net/), 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 !
