Accueil du site
Il y a quelques temps, j’avais voulu réaliser pour mon compte un badge regroupant mes informations, à porter lors des rendez vous web de tout poils. J’étais vite arrivé à la conclusion que mon compte Twitter était l’endroit le plus simple pour envoyer les gens. Je m’étais donc fait ceci à accrocher à mon cou. Pour plus de simplicité j’ai créé ce badge sur la base d’un format photo, afin d’utiliser un bon d’une cinquantaine d’impression gratuite chez je ne sais quel imprimeur de photo en ligne, ce qui me permet de me servir de ce badge comme une carte de visite en en arrachant un de mon laniar.
Après avoir fait un un petit effet avec ce badge lors d’un Twun.ch (une rencontre locale d’utilisateurs de Twitter), j’ai décidé de prendre un peu de temps pour réaliser une application web permettant d’arriver (plus ou moins) au même résultat. J’ai déjà eu quelques testeurs, ce qui m’a permis de trouver (et de résoudre) quelques bugs.
Vous pouvez tester et me dire ce que vous en pensez (bug, idée d’amélioration, …) à l’adresse:
Le résultat devrait ressembler à quelque chose du genre :
À terme cette appli pourra intégrer le site de Twun.ch (si bien sur Salya, la créatrice du site le désire), afin que tous les participants à des rencontre d’utilisateurs de Twitter puissent avoir leurs badges.
Pour tester avant de commencer à lire ce long article :
C’est par ici.
Ne vous inquiétez pas le formulaire est court.
La fonction « Formulaire » de Google Docs est parfaite pour créer des petits sondages rapides.
Mais une limitation nous vient tout de suite à l’esprit. Il n’est possible que de récupérer des information, sans pouvoir répondre à l’internaute automatiquement.
En cherchant un peu on va voir qu’il est tout à fait possible de répondre par e-mail à un internaute ayant rempli notre sondage.
Je souhaite réaliser un formulaire qui fait office de logiciel de devis automatique pour une entreprise de revêtement de sol.
Le client entre lui même les informations de bases, nous lui calculons le tout et lui envoyons par e-mail; tout en stockant ces résultats dans notre document Google Docs.
Pour faire cela nous allons faire un formulaire en deux parties. Un partie sur les informations du client, et une seconde sur sa demande.
Les variables rentrants en compte sont la ville de résidence, la surface de la pièce, le nombre de murs, et la qualité souhaité du revêtement.
La calcul sera le suivant :
Coût de déplacement (ville)
+ (m² x coût de la qualité)
+ (m² x 2 (tarif de la colle))
+ (nombre de découpe (murs) x (0.1 x tarif horaire))
+ (m² x (0.25x tarif horaire))
Nous commençons donc par créer le formulaire. J’imagine que si vous lisez cela, vous savez le faire.
Une fois terminé mon formulaire ressemble à ceci : http://bit.ly/hrrLJG
Si quelqu’un rempli ce formulaire nous aurons un enregistrement des données dans notre feuille de calcul et pas plus.
Attaquons nous maintenant au traitement des valeurs.
Pour cela nous allons allons ouvrir l’éditeur de script : Outils >Scripts > Éditeur de Scripts
Nous allons maintenant créer notre Scripts.
function maFonction(e) {
}
Puis nous allons devoir dire à Google documents de déclencher cette fonction à chaque fois qu’un formulaire est rempli. Pour cela dans l’éditeur de scripts : Déclencheurs > Current script’s triggers… Puis dans notre fonction fixer les listes déroulantes sur From spreadshett & On form submit
Maintenant il nous reste plus qu’à faire faire quelque chose à notre script.
Nous allons dans un premiers temps récupérer les valeurs du formulaire et les assigner à un nom de variable plus simple à travailler :
function maFonction(e) {
var horodateur = e.values[0]; //attention les valeurs commencent par 0
var civilite = e.values[1];
var nom = e.values[2];
var prenom = e.values[3];
var email = e.values[4];
var ville = e.values[5];
var m2 = e.values[6];
var murs = e.values[7];
var qualite = e.values[8];
}
Une fois ces réponses récupérées, travaillons un peu avec.
Commençons par définir le coût de déplacement dans les 4villes ainsi que le coût du mettre carré des différentes qualités de revêtement de sol. Pour cela nous allons passer par la commande switch:
function maFonction(e) {
var horodateur = e.values[0]; //attention les valeurs commencent par 0
var civilite = e.values[1];
var nom = e.values[2];
var prenom = e.values[3];
var email = e.values[4];
var ville = e.values[5];
var m2 = e.values[6];
var murs = e.values[7];
var qualite = e.values[8];
switch(ville){
case "Ville 1" : ctville = 10; //10€ pour se deplacer dans la ville 1
case "Ville 2" : ctville = 15; //15€ pour se deplacer dans la ville 2
case "Ville 3" : ctville = 20; //…
case "Ville 4" : ctville = 25;}
switch(qualite){
case 1 : ctquali = 4; //4€ le m²
case 2 : ctquali = 6; //6€ le m²
case 3 : ctquali = 8; //…
case 4 : ctquali = 10;
case 5 : ctquali = 12;
case 6 : ctquali = 14;
case 7 : ctquali = 16;
case 8 : ctquali = 18;
case 9 : ctquali = 20;
case 10 : ctquali = 22;}
}
Et si l’on souhaitait aller plus loin et rendre ces valeurs changeable facilement à partir de la feuille de calcul ?!
On verra ça dans un article suivant, finissons d’abords ce devis et envoyons le par e-mail pour commencer
On fait vite rapidement le calcul des différents postes :
function maFonction(e) {
var horodateur = e.values[0]; //attention les valeurs commencent par 0
var civilite = e.values[1];
var nom = e.values[2];
var prenom = e.values[3];
var email = e.values[4];
var ville = e.values[5];
var m2 = e.values[6];
var murs = e.values[7];
var qualite = e.values[8];
switch(ville){
case "Ville 1" : ctville = 10; //10€ pour se deplacer dans la ville 1
case "Ville 2" : ctville = 15; //15€ pour se deplacer dans la ville 2
case "Ville 3" : ctville = 20; //…
case "Ville 4" : ctville = 25;}
switch(qualite){
case 1 : ctquali = 4; //4€ le m²
case 2 : ctquali = 6; //6€ le m²
case 3 : ctquali = 8; //…
case 4 : ctquali = 10;
case 5 : ctquali = 12;
case 6 : ctquali = 14;
case 7 : ctquali = 16;
case 8 : ctquali = 18;
case 9 : ctquali = 20;
case 10 : ctquali = 22;}
var ctcolle = 2; //2€ le m²
var cthoraire = 100; //avec 2 gus ca fait bien 100€
var ctmateriel = (m2*ctqualite)+(m2*ctcolle);
var ctmaindoeuvre = (murs*0.1*cthoraire)+(m2*0.25*cthoraire);
var cttotal = ctville+ctmateriel+ctmaindoeuvre;
}
Allez, c’est maintenant que le moment attendu par tous arrive : Envoyons l’e-mail.
La fonction est comme ceci :
sendEmail(destinataire, sujet, corps du message, options avancées(optionnelles)) // Dans les options nous trouvons : // bcc : pour envoyer l'e-mail à d'autre personnes // cc : pour envoyer l'e-mail à d'autre personnes en copie carbone // replyTo : Pour configurer une adresse de réponse différente que l'adresse // d'expédition (qui est par défaut l'adresse du compte Google documents) // name : Pour personnaliser le nom de l'expéditeur // htmlBody : Pour créer un e-mail en HTML
Nous allons donc envoyer un e-mail au format simple et HTML afin de répondre à la personne ayant fait la demande à l’aide du formulaire :
function maFonction(e) {
var horodateur = e.values[0]; //attention les valeurs commence par 0
var civilite = e.values[1];
var nom = e.values[2];
var prenom = e.values[3];
var email = e.values[4];
var ville = e.values[5];
var m2 = e.values[6];
var murs = e.values[7];
var qualite = e.values[8];
switch(ville){
case "Ville 1" : ctville = 10; //10€ pour se deplacer dans la ville 1
case "Ville 2" : ctville = 15; //15€ pour se deplacer dans la ville 2
case "Ville 3" : ctville = 20; //…
case "Ville 4" : ctville = 25;}
switch(qualite){
case "1" : ctquali = 4; //4€ le m²
case "2" : ctquali = 6; //6€ le m²
case "3" : ctquali = 8; //…
case "4" : ctquali = 10;
case "5" : ctquali = 12;
case "6" : ctquali = 14;
case "7" : ctquali = 16;
case "8" : ctquali = 18;
case "9" : ctquali = 20;
case "10" : ctquali = 22;}
var ctcolle = 2; //2€ le m²
var cthoraire = 100; //avec 2 gus ca fait bien 100€
var ctmateriel = (m2*ctquali)+(m2*ctcolle);
var ctmaindoeuvre = (murs*0.1*cthoraire)+(m2*0.25*cthoraire);
var cttotal = ctville+ctmateriel+ctmaindoeuvre;
MailApp.sendEmail(email, "Réponse à votre demande de devis",
//Version non HTML
"Bonjour " + civilite + " " + nom + ";\n\n" +
"Vous trouverez ci desous les éléments en réponses à votre demande :\n\n" +
"Coût de déplacement pour la ville de " + ville + " : " + ctville + "€\n" +
"Coût de la mains d'oeuvre : " + ctmaindoeuvre + "€\n" +
"Coût du materiel : " + ctmateriel + "€\n" +
"Coût total : " + cttotal + "€\n\n" +
"Cordialement",
{name: "Revetement de sol & Co", //Nom de l'expediteur
//Version HTML
htmlBody: "Bonjour " + civilite + " " + nom + ";<br><br>" +
"Vous trouverez ci desous les éléments en réponses à votre demande :<br><br>" +
"Coût de déplacement pour la ville de <b>" + ville + "</b> : <b>" + ctville + "€</b><br>" +
"Coût de la mains d'oeuvre : <b>" + ctmaindoeuvre + "€</b><br>" +
"Coût du materiel : <b>" + ctmateriel + "€</b><br>" +
"Coût total : <b>" + cttotal + "€</b><br><br>" +
"Cordialement <i>(Version Html)</i>"}
);
}
Et voila. Votre formulaire répond seul à l’internaute.
À noter : Google docs vas vous demander quand vous allez sauvegarder votre script si vous l’autoriser bien à utiliser la fonction d’envoi d’e-mail. vous répondrez naturellement oui.
Dans la prochaine version, nous vairons comment rendre les variable éditable simplement à l’aide d’une autre feuille de calcul.
Nous vairons aussi peut être, comment afficher ces résultats automatiquement dans votre feuille de calcul (car ça n’est pas encore le cas !).
PS : Pour accéder au document il suffit de le demander par e-mail ou à l’aide des commentaires si dessous.
En le partageant à tous sans identifiant la partie Scripts n’est pas visible, ce qui ne sert donc à rien.