Créez un chatbot WhatsApp, pas une application

Il y a longtemps, j'ai créé une application Web pour une entreprise (plus de 200 000 employés). Les commentaires sur l'application Web m'ont incité à faire une expérience. Que se passerait-il si je devais créer un chatbot WhatsApp pour résoudre le cas d'utilisation spécifique, au lieu d'une application Web ? Les gens aimeraient-ils mieux ? Serait-ce plus utile ?

Mais l'histoire est bien plus vaste que cela. Les chatbots ont tellement de potentiel ! Dans ce didacticiel sur le chatbot WhatsApp, je voulais partager mon parcours d'apprentissage, les meilleures pratiques que j'ai découvertes et mes prédictions sur la question de l'application contre le chatbot. Et au-delà : les chatbots remplaceront-ils un jour toutes les applications traditionnelles ?

L'entreprise pour laquelle je travaillais avait un bureau pour environ 2 000 employés au cœur du centre-ville de Tel-Aviv. L'espace de stationnement est très limité, donc les gens se garent dans des espaces intentionnellement conçus pour le double stationnement, où une voiture en bloque une autre. Dans chaque place de stationnement double, le premier conducteur se gare à l'intérieur et le second à l'extérieur.

D'un tableau blanc à une application Web

Avant qu'il y ait une application, il y avait un grand tableau. Tous les conducteurs ont indiqué où ils se garaient, ainsi que leurs noms et numéros de téléphone. Avant de quitter le bureau, un chauffeur devait vérifier si quelqu'un bloquait sa voiture. Si tel était le cas, ils devraient appeler l'autre conducteur et espérer qu'ils n'étaient pas au milieu d'une réunion afin qu'ils puissent aller déplacer leur voiture à l'écart.

Pour améliorer le processus, j'ai créé une application Web.

C'était simple. Pas de back-end. Pas d'hébergement de serveur. Aucune maintenance de la base de données. Pas même un cadre d'interface utilisateur. Pas de webpack et pas de bundles JS du tout ! Juste du JavaScript vanille.

Il a été hébergé en utilisant l'hébergement de page statique gratuit de GitHub. La base de données était FireBase, nous avions donc un support en temps réel et un support JSON, et nous n'avions pas besoin d'un back-end.

L'interface utilisateur était simple. Les utilisateurs verraient toutes les places de stationnement et cliqueraient sur une place vide pour remplir leurs coordonnées. S'ils étaient déjà parqués, cela prendrait les données du stockage local du navigateur. S'ils cliquaient sur un créneau enregistré, ils verraient les coordonnées pertinentes et pourraient choisir d'appeler le conducteur.

Il fonctionnait très bien depuis près d'un an. Moins d'une journée de développement a aidé et fait gagner du temps à de nombreuses personnes - un bon investissement.

De l'application Web au chatbot

Un jour, Facebook a annoncé qu'il allait publier une API pour WhatsApp. Le lendemain, mon frère a acheté un Amazon Echo, avec Alexa. À cette époque, j'ai également commencé à voir Google Assistant partout.

J'ai commencé à penser que peut-être que le monde se dirigeait vers les chatbots, alors je devrais expérimenter. Les utilisateurs préféreraient-ils utiliser des chatbots ? Aurais-je besoin de moins de soutien ? Introduirait-il de nouvelles méta-fonctionnalités simplement en tirant parti d'une infrastructure différente ?

J'ai reçu des commentaires sur l'application Web habituelle, et je pensais que cela pourrait résoudre le problème si je devais créer un chatbot WhatsApp :

• L'application ne fonctionnait pas bien sur certains anciens téléphones mobiles.
• Cela ne fonctionnait pas sous terre (où se trouve le parking - il n'y a pas de bon signal mobile là-bas).
• Les conducteurs souhaitaient envoyer des messages aux bloqueurs au lieu d'ouvrir le numéroteur téléphonique.
• Les conducteurs voulaient recevoir des notifications push si quelqu'un les bloquait, au lieu d'ouvrir l'application Web à chaque fois avant de partir.

Il est important de rappeler que les développeurs de plateformes de chat comme Telegram ou WhatsApp ont travaillé jour et nuit pendant des années pour assurer la stabilité de leurs applications. En utilisant leurs ressources et en ne développant qu'un petit moteur pour répondre aux questions, cela laisserait le dur labeur de la maintenabilité aux développeurs de plateformes de chat. Tout ce que j'avais à faire était de découvrir comment créer un chatbot WhatsApp.

Immédiatement après avoir commencé à développer le nouveau chatbot d'assistance au stationnement, j'ai réalisé à quel point l'idée était fantastique. C'était tellement facile et rapide d'ajouter de nouvelles fonctionnalités, et je n'ai même pas eu besoin de faire des tests de bout en bout.

Pas de signal? Aucun problème.

Tweeter

De plus, je n'avais plus besoin d'un processus CI/CD compliqué. S'il fonctionne dans un émulateur de chat, il fonctionnera partout. Pas de .apk , pas de Xcode, pas d'App Store, ni de Google Play. Le chatbot a pu envoyer des messages aux utilisateurs sans que j'aie besoin d'enregistrer des appareils, d'utiliser PubSub ou des services similaires pour les notifications push ou d'enregistrer des jetons d'utilisateur. Pas besoin de système d'authentification - j'utilisais le numéro de téléphone de l'utilisateur comme identification.

Pas de signal? Aucun problème. Je n'ai pas eu besoin d'ajouter une prise en charge hors ligne à l'aide de fichiers manifestes : WhatsApp me l'a donnée prête à l'emploi. Le message sortirait assez tôt, lorsque l'utilisateur irait à un niveau supérieur où le wifi était meilleur.

Puis j'ai réalisé que chaque fois qu'une plateforme de chat introduirait une nouvelle fonctionnalité, mon application en bénéficierait immédiatement. Wow, c'est un très bon investissement. (Pour être juste, il y a aussi le risque que de nouvelles fonctionnalités limitent les fonctionnalités ou créent des changements de rupture qui nécessitent plus d'efforts de développement, alors réfléchissez bien avant de mettre en œuvre des tâches critiques pour l'entreprise).

Rédaction d'assistant de stationnement , un prototype de chatbot WhatsApp

Pour créer un chatbot WhatsApp, le premier défi consiste à faire parvenir les messages de WhatsApp à votre programme. La solution la plus simple que j'ai trouvée consiste à utiliser un numéro de téléphone Twilio partagé. C'est juste pour le développement - lors du passage à la production, les développeurs voudront utiliser un numéro de téléphone dédié.

Les numéros gratuits de Twilio sont chacun partagés entre de nombreux utilisateurs de Twilio. Pour différencier les utilisateurs finaux d'une application de ceux des applications des autres utilisateurs de Twilio, les utilisateurs finaux doivent envoyer un message prédéfini au chatbot.

Après qu'un utilisateur a envoyé un message spécial au numéro partagé, tous les messages de son numéro seront dirigés vers votre compte Twilio et vos webhooks. C'est pourquoi un numéro dédié est nécessaire en production. Il n'y a aucune garantie qu'un utilisateur donné ne voudra utiliser qu'une seule application sur un numéro partagé donné.

Envoi de messages WhatsApp

Sur le "tableau de bord SMS programmable" de Twilio, il y a un lien "WhatsApp Beta" dans la barre de navigation de gauche :

En cliquant dessus, les développeurs verront une page avec l'option "Sandbox".

Pour associer des utilisateurs, ils devront envoyer un message spécial au numéro fourni par Twilio. Une fois que les utilisateurs ont fait cela, nous pouvons commencer à leur envoyer des messages et traiter leurs messages via Twilio.

Voici un exemple d'envoi d'un message à l'aide de cURL :

 curl 'https://api.twilio.com/2010-04-01/Accounts/{user_account}/Messages.json' -X POST \ --data-urlencode 'To=whatsapp:+{to_phone_number}' \ --data-urlencode 'From=whatsapp:+{from_phone_number}' \ --data-urlencode 'Body={escaped_message_body}' \ -u {user_account}:user_token

Il s'agit d'un simple SMS. Mais vous pouvez également joindre des médias (images, etc.) à vos messages. Voici un exemple Node.js :

 function sendWhatsApp(to, body, media) { const auth = "twilio_clientid:twilio_api" const sendURL = "https://api.twilio.com/2010-04-01/Accounts/{account_id}/Messages.json" const res = await fetch(sendURL, { headers: { Authorization: "Basic " + Buffer.from(auth).toString("base64"), }, method: "POST", body: objToFORM( JSONRemoveUndefined({ To: "whatsapp:+972" + to.replace(/-/g, "").replace(/^0/, ""), From: "whatsapp:+18454069614", Body: body, MediaUrl: media, }), ), }) } function objToFORM(obj) { const params = new URLSearchParams() for (var a in obj) { params.append(a, obj[a]) } return params } function JSONRemoveUndefined(obj) { return JSON.parse(JSON.stringify(obj)) }

Ça y est : nous pouvons maintenant commencer à envoyer des messages aux clients ! Mais il est important de se rappeler les deux limitations techniques les plus cruciales des messages WhatsApp :

1. Lorsque le bot reçoit un message, vous pouvez envoyer une réponse par SMS gratuitement. Plus que cela coûte de l'argent.
2. Le bot peut envoyer des messages aux utilisateurs uniquement pendant la fenêtre de 24 heures commençant lorsqu'il reçoit un message d'un utilisateur. En dehors de cette fenêtre, le bot ne peut envoyer que des messages utilisant des modèles approuvés, comme nous le verrons plus tard.

Recevoir des messages WhatsApp

L'envoi de messages était assez facile, mais la réception et le traitement des messages sont encore plus faciles.

Sur la page "sandbox" de Twilio, les développeurs peuvent définir où Twilio doit envoyer les messages qu'il reçoit au numéro WhatsApp partagé. Au cours du développement, des services tels que Ngrok ou Serveo peuvent fournir des URL publiques qui acheminent vers les machines de développement locales.

Les messages Twilio WhatsApp ressemblent à ceci :

 { "NumMedia": "0", "SmsSid": "{sms_id}", "SmsStatus": "received", "Body": "Example Message from user", "To": "whatsapp:+{phone_number}", "NumSegments": "1", "MessageSid": "{message_sid}", "AccountSid": "{account_sid}", "From": "whatsapp:+{phone_number}", "ApiVersion": "2010-04-01" }

C'est tout ce dont nous avons besoin. Nous pouvons utiliser n'importe quel langage de programmation pour obtenir ce message, l'analyser et essayer de comprendre ce que les utilisateurs demandent. Cela entraînera probablement des opérations CRUD sur une base de données, après quoi le bot peut fournir les informations appropriées (ou message de réussite/échec) à l'utilisateur dans sa réponse. Ce sont les bases de la création d'un chatbot WhatsApp.

Modèles de messages

Comme mentionné, les chatbots peuvent envoyer des messages de style libre uniquement aux utilisateurs qui interagissent « actuellement » avec eux, c'est-à-dire pendant la fenêtre de 24 heures. Mais si vous souhaitez envoyer des messages à de nouveaux utilisateurs ou en dehors de la fenêtre, vous devez utiliser des modèles de message pré-approuvés. C'est pour éviter les spams.

Dans mon cas d'utilisation, je voulais mettre à jour les pilotes lorsque quelqu'un les bloquait, même s'ils n'utilisaient pas le chatbot. Dans Twilio, cliquez sur "expéditeur" et "configurer".

Voici le modèle que j'ai choisi :

 {{1}} is blocking your exit from the parking lot. I will notify you when they leave.

Plusieurs jours plus tard, Facebook a approuvé mon modèle et j'ai pu commencer à envoyer ces messages à tous ceux qui avaient WhatsApp, pas seulement aux conducteurs qui avaient envoyé un message au chatbot.

L'envoi d'un message à partir d'un modèle est exactement comme l'envoi d'un message normal, en utilisant la même API. WhatsApp voit automatiquement qu'il correspond à un modèle et approuve le message.

Pas seulement pour l'assistant de stationnement

Cette stratégie est excitante pour moi quand j'imagine une boutique en ligne : Peut-être qu'un jour les gens pourront acheter n'importe quoi en utilisant des chatbots. Ce serait aussi simple que d'envoyer des messages WhatsApp et de joindre des images. Imaginez si les utilisateurs pouvaient joindre de l'argent réel à chaque message WhatsApp. Ce serait très simple d'acheter des choses. Les utilisateurs pourraient facilement acheter n'importe quoi en parlant avec le chatbot d'un fournisseur.

Imaginez un chatbot qui remplace Waze ou Google Maps. Vous lui envoyez un message texte de votre destination. La plate-forme de chatbot suit votre position et le chatbot vous envoie un message enregistré qui joue automatiquement avec la direction parlée en temps réel de la navigation.

Ce n'est pas de la fantaisie. WhatsApp prend actuellement en charge le partage de position en temps réel. Tout ce dont ils ont besoin est l'option de lecture automatique des messages reçus, et le tour est joué.

Pensez à un chatbot Waze ou à un chatbot de taxi au lieu des applications Gett ou Uber. Vous envoyez un message disant où vous êtes, puis le taxi arrive et vous payez avec WhatsApp. Si simple.

Certains lecteurs peuvent penser : « Les utilisateurs ne préfèrent-ils pas les interfaces graphiques, et pas seulement la saisie ? Je pense que les plates-formes de chatbot donneront au propriétaire du chatbot la possibilité d'envoyer des boutons, des images et des boîtes HTML pures lors de la conversion. Facebook prend déjà en charge Webview pour Messenger. Les utilisateurs n'ont pas besoin d'installer quoi que ce soit, ils utilisent simplement leur application de messagerie instantanée préférée.

Ces avantages expliquent pourquoi les développeurs cherchent à créer des chatbots WhatsApp pour gérer des tâches importantes, comme donner des réponses instantanées faisant autorité sur la pandémie de coronavirus, pour aider à freiner la propagation de la désinformation.

TL;DR : 7 conclusions sur la migration des applications Web vers les chatbots

En résumé:

• Souvent, le développement d'un chatbot peut réduire considérablement le temps de développement, car il n'est pas nécessaire de concevoir et de planifier une interface utilisateur graphique. (Cela dit, cela vaut la peine d'examiner les subtilités de la conception UX du chatbot avant de commencer, pour apprendre des erreurs des autres.)
• Il est beaucoup plus facile d'ajouter de nouvelles fonctionnalités aux chatbots. Les développeurs n'ont pas besoin de reconcevoir ou de modifier les éléments actuels. Le chatbot doit juste commencer à comprendre le nouveau type de message.
• Les chatbots sont beaucoup plus accessibles par défaut aux personnes ayant des besoins particuliers.
• Pas besoin de personnaliser une solution multiplateforme. La plateforme de chatbot le fait déjà.
• Les utilisateurs font beaucoup plus confiance aux chatbots pour partager des informations. Vous n'avez pas besoin de demander la permission ou d'afficher des avertissements - par exemple, l'utilisateur peut simplement choisir une image dans sa galerie et l'envoyer à votre chatbot - la permission d'accéder à la galerie d'images est déjà donnée à la plateforme de chat.
• Les plateformes de chat facilitent la gestion des notifications push. Les notifications push sont ce qui fait la différence entre les applications que les utilisateurs oublient et les applications avec lesquelles les utilisateurs interagissent régulièrement.
• Les plateformes de chat gèrent pour vous le passage entre les conditions hors ligne et en ligne.

Comment créer un chatbot WhatsApp : conseils de séparation et meilleures pratiques

Les mérites d'écrire un chatbot sont assez clairs. Les développeurs qui sont prêts à en créer un sont invités à commencer petit, avec un chatbot qui comprend un message. Et le gère bien.

Les chatbots doivent s'en tenir à des messages courts. Les gens ne lisent pas les longs messages. Lorsque vous avez quelque chose d'important à envoyer qui ne peut pas être exprimé de manière concise, il est préférable de diviser les messages en plusieurs petits messages.

Les chatbots avec de la personnalité sont mieux reçus. Même un minimum de "parler humain" va loin par rapport à une approche de "formalité de message système": "Je mettrai à jour la carte de stationnement pour vous", au lieu de "La base de données a été mise à jour". Un chatbot doit laisser à l'utilisateur le sentiment qu'il s'agit d'une machine au service de l'utilisateur, plutôt que d'une boîte noire effectuant des opérations techniques qu'il n'est peut-être pas en mesure de comprendre.

Ce tutoriel de chatbot WhatsApp n'est pas entré dans les détails de l'analyse des messages en langage naturel que les utilisateurs enverront aux chatbots. Mais les aspirants fournisseurs de services de développement de chatbot sont invités à consulter le code source du bot WhatsApp Parking Assistant (en particulier hackparkDialogFlow.ts , qui accepte les demandes de l'utilisateur en tant qu'actions) pour avoir une idée du fonctionnement de cet aspect.

Pour un article plus approfondi sur la façon de détecter différents types de messages utilisateur, tout en suivant l'approche d'injection de dépendances pour la programmation, consultez le didacticiel de chatbot TypeScript de Toptal.

Bonne chance avec votre propre développement de chatbot WhatsApp !