DEV Community

Cover image for ๐Ÿ‘‰ Emoji translations with the ๐Ÿ“ž Twilio API for ๐Ÿ’ฌ WhatsApp and Node.js
Phil Nash for Twilio

Posted on • Originally published at twilio.com

๐Ÿ‘‰ Emoji translations with the ๐Ÿ“ž Twilio API for ๐Ÿ’ฌ WhatsApp and Node.js

I ๐Ÿ’– emojis, so when I heard about the new Twilio API for WhatsApp I wanted to build something emojiriffic. Inspired by Monica Dinculescuโ€™s to_emoji Twitter bot and emoji translator I decided to build a WhatsApp text-to-emoji translator. You can try it out now by sending your message to our WhatsApp number +441745472072.

An example of sending a message to the app we're going to build. The WhatsApp number responds with the message translated to emoji.

Hereโ€™s how you too can build this app.

๐Ÿ›  Tools

I decided to build this project using Node.js, following in the footsteps of Monicaโ€™s projects. WhatsApp messages via Twilio result in webhooks, much the same as receiving an SMS message to a Twilio number, so if youโ€™ve built a Twilio SMS application before this will be familiar. For ease of deploying this, Iโ€™m going to build this as a Twilio Function.

If you want to follow along with building the emoji translator youโ€™ll need:

And thatโ€™s all. Letโ€™s get building!

๐Ÿ— Building the app

First up, letโ€™s take a look at the what powers Monicaโ€™s apps.

Powering both of them is the moji-translate module, which in turn uses the emojilib keyword library by Mu-An Chiou. To use moji-translate in a Twilio Function we need to install it.

In the Twilio console, head into the Runtime section to configure your Functions. In the dependencies section add version 1.0.8 of moji-translate. Save the config and weโ€™re ready to build the function.

Add moji-translate and the version 1.0.8 to the dependencies section, then save.

Add a new Function from the management page and choose the โ€œHello SMSโ€ template, as responding to an incoming WhatsApp message uses the same TwiML as responding to an incoming SMS message. Give your Function a name and a path.

Give your function a name and a path.

The code should look like this so far:

exports.handler = function(context, event, callback) {
  let twiml = new Twilio.twiml.MessagingResponse();
  twiml.message("Hello World");
  callback(null, twiml);
};
Enter fullscreen mode Exit fullscreen mode

To build our emoji translator we will first need to grab the body of the incoming message from the event object. We can then pass it through the moji-translate module and return it in the TwiML in the place of โ€œHello Worldโ€ in the above example.

exports.handler = function(context, event, callback) {
  const { translate } = require('moji-translate');
  const incomingBody = event.Body;
  const translatedBody = translate(incomingBody);

  const response = new Twilio.twiml.MessagingResponse();
  response.message(translatedBody);

  callback(null, response);
};
Enter fullscreen mode Exit fullscreen mode

Save the Function and it will automatically deploy. Copy the URL as we will need it to configure the WhatsApp channel.

Open the WhatsApp sandbox, find the field for when a message comes in and paste in the Function URL. Save the channel and prepare to test!

๐Ÿ“ฑ Testing the app

Open up WhatsApp on your phone, send a message to the sandbox number and youโ€™ll receive a response with your message translated to emoji.

Or in emoji:

๐Ÿ‘ ๐Ÿ†™ WhatsApp ๐Ÿ”› your ๐Ÿคณ, send a ๐Ÿ’ฌ to the sandbox ๐Ÿ’ฏ and youโ€™ll receive a response with your ๐Ÿ’ฌ translated to emoji.

A screen shot of the original and translated message.

If you get a message back saying your number is not associated with the sandbox channel, make sure you follow the instructions to connect your number to the sandbox.

If you want to try the app out without connecting to the sandbox, send your message to our WhatsApp number +441745472072. You can start a conversation by scanning this QR code with your phone too.

Scan this QR code and start translating your text to emoji over WhatsApp.

๐Ÿ‘ž Next steps

Emoji translation via WhatsApp is possible with only a few lines of code when you have the right tools to hand. In this post weโ€™ve seen how you can build, deploy and scale an application using Node.js and Twilio Functions, with all the emoji power supplied by moji-translate. This is just the start though, you can build on this to create more interactive applications with Twilio, WhatsApp, and the other channels available through the Twilio messaging API.

Now we have the WhatsApp sandbox to play with, what other apps are you looking forward to creating? Get in touch in the ๐Ÿ’ฌ comments below, ๐Ÿ“ง email me at philnash@twilio.com or send me your favourite emoji on ๐Ÿฆ Twitter at @philnash.


๐Ÿ‘‰ Emoji translations with the ๐Ÿ“ž Twilio API for ๐Ÿ’ฌ WhatsApp and Node.js was originally published on the Twilio blog on August 1st, 2018.

Top comments (8)

Collapse
 
rokkoo profile image
Alfonso

Good post mate! It is very useful, but a question.
If I use my personal phone number to do the tests, is it safe? I read WhatsApp sometimes prohibit accounts, to make spam.

Ty again for this post ๐Ÿ˜Š

Collapse
 
philnash profile image
Phil Nash

As long as you follow the WhatsApp terms of service, particularly the parts under "Acceptable use of our services" then I'm sure you won't get banned for spam.

I've been sending messages to the WhatsApp sandbox as part of the Twilio API to test my application and had no problem.

Collapse
 
philnash profile image
Phil Nash

That's interesting! I didn't know there was a list like that of all the emoji kept up to date from the consortium. Looks like a hassle to parse!

I imagine that the manually built mapping allows more expressive keywords to be added to the JSON, rather than trying to determine them from the short description. That's definitely a trade off between ease of maintenance and keyword accuracy.

I didn't know emoninja existed though. I'm excited that it does as I'll be able to use it in my Ruby projects when I need emojis too. Thanks!

Collapse
 
adityamitra profile image
Aditya Mitra

How do you listen for incoming messages in a local node setup?

Collapse
 
philnash profile image
Phil Nash

In a local Node setup you'll need to set up a web application to receive the incoming messages. And then tunnel to that local application using something like ngrok.

Check out this tutorial that shows how to receive SMS in Node. The process for SMS and WhatsApp messages is the same.

Collapse
 
jajoosam profile image
Samarth Jajoo

Made a bot ๐Ÿค–

Collapse
 
philnash profile image
Phil Nash

I love it! What's the Glitch project? Would love to take a look at how you did it.

Collapse
 
jajoosam profile image
Samarth Jajoo