How to Make a Kid Feel Like a Hacker With the Twilio CLI

Summer school just ended which means – school’s out, scream and shout! Kids are enjoying … Read more How to Make a Kid Feel Like a Hacker With the Twilio CLI

Summer school just ended which means – school’s out, scream and shout! Kids are enjoying their remaining weeks of summer before starting back again.

Oh how I miss being a kid with forced breaks and recess time. Recently I visited an elementary school during their summer session and felt the nostalgia of being an innocent kid. Life was so simple when the main concern was having enough time to be cool and not get caught passing notes across the classroom! Since I grew up in a low-income community, I decided to give back and show the classrooms a fun presentation on what it’s like to work in the tech industry and write code!

With the help of Twilio and the command line, I was able to show the elementary school students how to feel like a hacker by typing some lyrics on the computer, pressing a few buttons, and sending a text message across the classroom without having to pick up the phone. How’s that for being sneaky during class and upgrading the note-passing game?

blink 182 bored and note passing in school

In this post, you’ll be using TwiML and the Twilio CLI to call a phone number and deliver a message from a computer to a mobile device within seconds.

Tutorial requirements

Set up the Twilio CLI environment

This is where I should put the disclaimer – “Don’t try this at home without your parents’ help!” or at least, a rad older sibling. Kids should be able to feel like hackers without messing up their devices!

If this is your first time installing the Twilio CLI, check out the Twilio CLI quickstart page for instructions on how to install it on your machine.

For developers using a Mac, it’s very convenient and fast to install the CLI using Homebrew, so make sure you check out how to install Homebrew on your machine if you don’t have it already. Then, you can run the command brew tap twilio/brew && brew install twilio to install the Twilio CLI.

For Windows developers, make sure you install npm first, as you will need it to install the CLI with the command npm install twilio-cli -g.

Once you have the Twilio CLI installed, type twilio login to log in to your account. You’ll need your Account SID and Auth Token from the Twilio Console to login.

Create a TwiML Bin

TwiML Bins work well with Twilio Functions because they help you explore the magic and accessibility of working with Twilio. By using Twilio’s Markup Language (TwiML), you save yourself the hassle of having to write complex code or connect your own web server in order to execute a simple call.

If you haven’t done so already, search for and purchase a Twilio phone number from the console. Make sure that the phone number you choose is set to the same country or region of your personal number to avoid international fees when you pick up calls from the number.

On the Twilio Console, click on the (…) icon and scroll down to the Runtime section. Select TwiML Bins. Click on the red (+) sign to create a new TwiML Bin.

Give the TwiML Bin a friendly name such as “coolmessage”. In the next step, you’ll populate the TwiML text box with the script for the voice recording that you will hear when you call the number.

Before you move on further, take some time to meet Alice. Alice is a talented friend of Twilio, known as a text-to-speech (TTS) engine that converts text into a human-sounding voice. Thus, Alice is the perfect way to deliver the cool message. Alice is capable of speaking in 26 total dialects and offers the voice of a man or a woman.

Believe it or not, this was the hardest part for me. What’s cool to kids nowadays? Luckily I am sort-of hip because I watched High School Musical: The Musical: The Series on Disney+ to know about Olivia Rodrigo’s music – which has to be the rave as of lately, right?

So for my “coolmessage”, I let Alice speak in their default voice and recite some lines from Olivia Rodrigo’s “The Rose Song”. However, feel free to change the XML to whatever message seems radical to you. Let the kid write some message or copy and paste the following XML into the text box, replacing anything already inside, and click the Create button at the bottom of the page:

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say voice="alice" language="en-US">
      So, I am done livin' my life just for you
      You watched me wither and now you watch me bloom
      You're hidin' in the dark but I'm reachin' for the sun, woo-ooh
  </Say>
</Response>

You should be able to see the properties of your TwiML bin at the top of the page. Leave this page open as you’ll need to use the TwiML URL in the next section.

TwiML bin with response in Alice's voice with lyrics in the text

Test out hacker skills with Twilio

Take a moment to test out the TwiML bin by making a call to your personal phone number. To do this, run the following command from your command line, taking care to replace the placeholder values with your own. Take the URL from the TwiML Bin page and set that as the value for the url line.

Replace the from value with your Twilio phone number in E.164 format such as “+19140201400”. For the time being, use your personal phone number in E.164 format for the to value so that the call is directed to your device.

twilio api:core:calls:create --from <YOUR_TWILIO_NUMBER> --to <YOUR_PHONE_NUMBER> --url <YOUR_TWIML_BIN_URL>

In addition, you can also run a cURL command if you prefer. Replace the values accordingly to execute the call successfully:

curl -X POST 
    --data-urlencode "Url=<YOUR_TWIML_BIN_URL>" 
    --data-urlencode "To=<YOUR_PHONE_NUMBER>" 
    --data-urlencode "From=<YOUR_TWILIO_NUMBER>" 
    "https://api.twilio.com/2010-04-01/Accounts/<YOUR_ACCOUNT_SID>/Calls" 
    -u "<YOUR_ACCOUNT_SID>:<YOUR_AUTH_TOKEN>"

gif of Olivia Rodrigo standing with flames in the background from good 4 u music video

Wow, Olivia Rodrigo really snapped with that message! This is the kind of energy we all need in our lives.

Is Alice’s voice not fitting enough to send the message? No worries, as I mentioned earlier, Alice is capable of speaking 26 different dialects and can change to a man or a woman.

Let’s experiment with the TwiML voices in the next section.

Change Alice’s TwiML Voice

Go back to the coolmessage TwiML Bin on the Twilio Console. Look at the documentation for TwiML Voices to see all of the dialects you can choose from.

Let’s make Alice sound more like a woman by specifying her voice to woman. Replace the TwiML Bin with the following XML:

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say voice="woman" language="en-US">
      So, I am done livin' my life just for you
      You watched me wither and now you watch me bloom
      You're hidin' in the dark but I'm reachin' for the sun, woo-ooh
  </Say>
</Response>

Click the Save button at the bottom and rerun the commands above to execute the call.

Send the cool message over SMS

If you feel like going the extra mile to impress classrooms even more, consider sending a text message along with the phone call! Run the following command from your command line and expect the song lyrics in your text message inbox:

twilio api:core:messages:create 
  --from "<YOUR_TWILIO_NUMBER>" 
  --to "<YOUR_PHONE_NUMBER>" 
  --body "You watched me wither and now you watch me bloom."

Wait a minute…then check your phone!

Who said telling a computer how to pass notes for you during class can’t be cool?

gif of Olivia Rodrigo saying Absolutely love that!

What’s next for making hacker magic with the Twilio CLI?

A kid’s first line of code doesn’t have to be “Hello World” – it can be as fun as writing cool messages or catchy lyrics!

Needless to say, the students at summer school were very surprised to receive the phone call from a robotic voice such as Alice, even though they watched all the live coding happen in front of them. It was such a heartwarming and sweet experience, and I hope that developers can make friendly technologies such as the Twilio CLI so that kids can see how coding can be a pretty neat activity!

There’s so much you can accomplish with the Twilio CLI to help you build fast and test the power of Twilio. Check out the examples on the docs to learn more about quick commands you can use on the Twilio CLI.

Now that you know the basics of making a call with Twilio CLI, you can try to expand on the project by sending a poem to a list of contacts. In fact, do I smell a prank

Here are some other cool projects you can explore:

Let me know how you’re showing kids or younger siblings how awesome code is by reaching out over email!

Diane Phan is a Developer for technical content on the Twilio Voices team. She loves to help beginner programmers get started on creative projects that involve fun pop culture references. She can be reached at dphan [at] twilio.com or LinkedIn.


Source: Twilio JavaScript



Leave a Reply

Your email address will not be published. Required fields are marked *