mirror of
https://github.com/almet/notmyidea.git
synced 2025-04-28 19:42:37 +02:00
256 lines
No EOL
12 KiB
HTML
256 lines
No EOL
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
|
|
|
<title>Comment est-ce que vous générez vos formulaires ? - Alexis - Carnets en ligne</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<link href="https://blog.notmyidea.org/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Alexis - Carnets en ligne Full Atom Feed" />
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/poole.css"/>
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/syntax.css"/>
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/lanyon.css"/>
|
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/styles.css"/>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
h1 {
|
|
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
|
|
padding: 80px 50px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
text-rendering: optimizeLegibility;
|
|
color: #202020;
|
|
letter-spacing: .1em;
|
|
text-shadow:
|
|
-1px -1px 1px #111,
|
|
2px 2px 1px #eaeaea;
|
|
}
|
|
|
|
#main {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
#main h1 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.post-headline {
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<style>
|
|
#illustration {
|
|
max-width: 800px;
|
|
align: center;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
|
|
styles, `#sidebar-checkbox` for behavior. -->
|
|
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
|
|
<!-- Toggleable sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-item">
|
|
<div class="profile">
|
|
<img src="https://blog.notmyidea.org/theme/img/profile.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-nav-item" href="/">Articles</a>
|
|
|
|
<a class="sidebar-nav-item" href="https://www.vieuxsinge.com">Brasserie du Vieux Singe</a>
|
|
<a class="sidebar-nav-item" href="http://blog.notmyidea.org/pages/about.html">A propos</a>
|
|
<a class="sidebar-nav-item" href="https://twitter.com/ametaireau">Messages courts</a>
|
|
<a class="sidebar-nav-item" href="https://github.com/almet">Code</a>
|
|
</nav>
|
|
</div> <div class="wrap">
|
|
<div class="masthead">
|
|
<div class="container">
|
|
<h3 class="masthead-title">
|
|
<a href="https://blog.notmyidea.org/" title="Home">Alexis - Carnets en ligne</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container content">
|
|
<div id="main" class="posts">
|
|
<h1 class="post-title">Comment est-ce que vous générez vos formulaires ?</h1>
|
|
|
|
<span class="post-date">
|
|
31 mai 2016, dans <a class="no-color" href="category/technologie.html">Technologie</a>
|
|
</span>
|
|
<img id="illustration" class="illustration-Technologie" src="images/forms.jpg" />
|
|
|
|
<div class="post article">
|
|
<h2 class="post-headline">Présentation d'une solution pour gérer vos formulaires en gardant la main sur les données générées</h2>
|
|
<div id="toc_container">
|
|
<div class="toc">
|
|
<ul>
|
|
<li><a href="#fonctionnalites">Fonctionnalités</a><ul>
|
|
<li><a href="#pas-de-compte">Pas de compte</a></li>
|
|
<li><a href="#gardez-la-main-sur-vos-donnees">Gardez la main sur vos données</a></li>
|
|
<li><a href="#api">API</a></li>
|
|
<li><a href="#auto-hebergeable">Auto-hébergeable</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#on-commence-petit">On commence petit…</a></li>
|
|
<li><a href="#et-euh-comment-ca-marche">Et, euh, comment ça marche ?</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<h1>🌟</h1>
|
|
<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 id="fonctionnalites">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 id="pas-de-compte">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 id="gardez-la-main-sur-vos-donnees">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 id="api">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 id="auto-hebergeable">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 id="on-commence-petit">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 id="et-euh-comment-ca-marche">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>
|
|
<em>L'image d'illustration utilisée est un travail de <a href="https://www.flickr.com/photos/kurtfaler/2946570890/in/photolist-5unWSo-nxwHk4-fwjQ1b-Xk5F1e-2nyhfK-Wewupi-qRH2Xe-2XeevA-2nyiGe-VoQgbo-2nyh1z-rgyTKm-aPe8yB-9X8MXQ-5zmZi-Vmx4Qu-9X5V9P-5g5EkR-9erwKR-pfUuMZ-obTwRp-dsPpSz-ckgYNh-9X8Zvf-ASZGaH-7LTmLX-fuJpoW-dabtsC-e32SSu-jV9aSa-5vvCn5-9CAB7c-g6y6sK-8N5tB8-87iko3-dsPqmz-4PAkkC-9X67E8-dYGSEz-9X634n-a2GgEA-98kTPP-a6Lpcf-9X5YMk-jcUL1s-7QJYFF-axhDsE-p9vhA8-fA6GmA-5kZtaV">Kurt Faler</a> proposé sous license CC BY-NC-ND 2.0. Merci !</em>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
|
|
|
|
<script>
|
|
(function(document) {
|
|
var i = 0;
|
|
// snip empty header rows since markdown can't
|
|
var rows = document.querySelectorAll('tr');
|
|
for(i=0; i<rows.length; i++) {
|
|
var ths = rows[i].querySelectorAll('th');
|
|
var rowlen = rows[i].children.length;
|
|
if (ths.length > 0 && ths.length === rowlen) {
|
|
rows[i].remove();
|
|
}
|
|
}
|
|
})(document);
|
|
</script>
|
|
|
|
<script>
|
|
/* Lanyon & Poole are Copyright (c) 2014 Mark Otto. Adapted to Pelican 20141223 and extended a bit by @thomaswilley */
|
|
(function(document) {
|
|
var toggle = document.querySelector('.sidebar-toggle');
|
|
var sidebar = document.querySelector('#sidebar');
|
|
var checkbox = document.querySelector('#sidebar-checkbox');
|
|
document.addEventListener('click', function(e) {
|
|
var target = e.target;
|
|
if(!checkbox.checked ||
|
|
sidebar.contains(target) ||
|
|
(target === checkbox || target === toggle)) return;
|
|
checkbox.checked = false;
|
|
}, false);
|
|
})(document);
|
|
</script>
|
|
<!-- Piwik -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//tracker.notmyidea.org/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', 3]);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<noscript><p><img src="//tracker.notmyidea.org/piwik.php?idsite=3" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Piwik Code -->
|
|
</div>
|
|
</body>
|
|
</html> |