Un bon de commande gratuit avec un récapitulatif par mail

illustration de l'article

Récemment, j’ai proposé à une association de moderniser leur manière de réaliser leur commande groupée : fin des formulaires papiers à remplir et à déposer dans une boîte aux lettres pour passer à la dématérialisation.

L’objectif est d’obtenir, à la fin, un fichier de type excel avec l’ensemble des éléments à commander afin de le fournir au commerçant, tout en ayant un coût nul.

En plus de ce fichier, contenant l’ensemble de la commande, je souhaiterais envoyer un récapitulatif à la personne ainsi que le montant de sa commande afin de limiter les erreurs de paiement (qui se fera toujours par chèque).

Faire un formulaire en ligne, je sais faire

Faire un formulaire gratuit, avec google forms, c’est très facile : je peux faire rapidement un bon de commande avec des tableaux et des boutons radios.

Formulaire

Forms peut également envoyer un e-mail avec le récapitulatif des réponses, c’est parti.

Pour le formulaire, je choisis :

  • Champ texte pour le nom
  • Grille à choix multiples pour les produits :
    • en ligne, le nom du produit. Le nom est suffixé par le prix, séparé par un - (10 chocolats - 5.3€)
    • en colonne la quantité de 0 à 9, pour limiter les problèmes de saisie

C’est bien mais je ne peux pas personnaliser le contenu du récapitulatif ou calculer le montant de la commande.

Ce qui existe

En fouillant, on trouve plusieurs extensions pour google forms permettant de gérer des bons de commande, certains directement avec paiement en ligne. Malheureusement, ces extensions sont lourdes à utiliser, peu intuitives et surtout…payantes.

En dehors de google forms, un bon de commande gratuit avec une réponse personnalisée, impossible à trouver.

Il n’y aurait donc pas de solution ?
5element

En fait si : avec google scripts, il est possible de personnaliser l’usage de l’ensemble des outils de la suite google.

Qu’est ce que google script

Dans tous les outils de la suite google, il est possible de développer ses propres scripts pour étendre les capacités des outils originaux. Ces scripts sont écrits en Javascript et exploitent la puissante API de google :

  • Déclencheurs de fonction sur des événements
  • Manipulation des fichiers du drive
  • Accès à toutes les API google : accéder à l’agenda, à la boîte email, aux services google maps, translate…

Pour accéder aux scripts, cliquer sur les 3 points verticaux -> éditeur de scripts

Editer un script

L’écran qui s’affiche est celui de l’éditeur de fonction. A partir de cet écran, vous pouvez éxecuter une fonction et consulter toutes les exécutions. L’éditeur propose la coloration syntaxique et l’autocomplétion. Même sans typescript, il devine les types et propose les bonnes méthodes.

Sur la gauche, vous avez accès au paramétrage des déclencheurs, à la liste des executions…

Ecran google script

Il est temps de coder

L’algorithme que j’ai en tête est le suivant :

  1. Lorsque l’utilisateur valide le formulaire, une fonction est appelée
  2. On récupère le contenu de sa commande
  3. On récupère le prix des articles
  4. On calcule le prix total
  5. On prépare le contenu du mail qui liste la commande
  6. On envoie le mail

La documentation nous explique comment manipuler un formulaire :

let form = FormApp.openById('mon_identifiant_de_form'); // Ouvre un formulaire à partir de l'id
let lastResponse = form.getResponses()[form.getResponses().length-1];   // Dernière reponse

Pour trouver votre id, il est dans l’url du formulaire : Id formulaire

A partir de la réponse, on peut ensuite parcourir l’ensemble des questions avec :

  • le nom de la question
getItem().getTitle() 
  • le type de question
getItem().getType() 

Une enum permet de tester facilement le type de question : type question

  • les différentes réponses et leur valeur
getItem().asGridItem().getRows()

Calcul du montant

Attention : il n’y a pas de champ commentaire permettant d’enrichir le formulaire. Si l’on souhaite des infos supplémentaires, il faut les extraire du formulaire. Pour ma part, je l’extrais directement du titre de la réponse en respectant toujours le même format : ‘Produit ABC - 25€’.

const cost = parseFloat(title.split(' - ')[1].replace('€',''));

Pour calculer le coût de la commande, on va parcourir les questions de type GRID et faire le calcul :

function computeTotalAmount(lastResponse){
  let total = 0;
  lastResponse.getItemResponses().forEach(ir=>{ // Parcours de toutes les questions
    if(ir.getItem().getType() == FormApp.ItemType.GRID){    // getItem renvoie le détail de la question
      let costs = ir.getItem().asGridItem().getRows().map(value=>parseFloat(value.split(' - ')[1].replace('€','')))
      ir.getResponse().forEach((val,pos)=>total+=costs[pos]*val)    // Calcul à partir des réponses à la question
    }
  })
  return total.toFixed(2);  // On garde deux décimales au prix
}

Envoi d’un email

Le mail est envoyé à partir de la boîte de du compte de l’utilisateur. L’avantage est que chaque mail envoyé se retrouve dans les messages envoyés : une sorte d’accusé qu’un mail a bien été envoyé.

La documentation détaille plusieurs méthodes dont une pour envoyer du HTML et personnaliser le mail comme le nom de l’expéditeur, le noReply :

const messageHtml = `Un message avec mise en forme.<br/> Montant <b>${total}€</b> à l'ordre de <b>moi</b>.`
 + `<br/>Vous pouvez modifier votre commande avec <a href="${lastResponse.getEditResponseUrl()}">ce lien</a>. <br/>${formatRecap(recap)}.<br/><br/>L'équipe Talan Labs.<br/><a href="https://blog.talanlabs.com/">Notre blog</a>`
MailApp.sendEmail(lastResponse.getRespondentEmail(),'Confirmation de commande',message,{name:'Mon nom',noReply:true,htmlBody:messageHtml})

Vous le voyez, il est également possible d’obtenir le lien de modification du formulaire, permettant de corriger sa commande.

Cet exemple donnera :
exemple mail

Mise en place du déclencheur

La dernière étape consiste à connecter notre formulaire à notre script avec un déclencheur. L’ajout d’un déclencheur se fait dans le menu de gauche “Déclencheurs -> Ajouter un déclencheur”.

Vous devez ensuite choisir la fonction à appeler et le type de déclencheur (ouverture formulaire, envoi formulaire, horaire…) Dans mon exemple, j’ai choisi le déclencheur formulaire / lors de l’envoi du formulaire.

declencheur

Un schéma pour résumer

schema

Pour aller plus loin

Ce n’est parce qu’on développe un script qui devrait peu évoluer qu’il faut oublier les bases :

  • Pensez à bien découper votre code avec des fonctions testables facilement (les plus pures possibles)
  • Faites en sorte de pouvoir tester votre script sans avoir besoin de remplir le formulaire, par exemple en exécutant la fonction toujours sur la dernière ligne
  • On peut imaginer modifier le fichier excel généré pour indiquer le prix final, s’il a été modifié…

Date

Auteur

Avatar Jonathan BARANZINI

Jonathan BARANZINI

Développeur

Tags

#Javascript #Google Forms