Song

Button

Smash Mouth liked this project and my use of their song "All Star" so much, they retweeted it and called me a #TechStar.

My project and I were both discussed on the Stack Overflow podcast (episode #126).

Song Button was created in a workshop about Azure Functions, Twilio, and Flic, run by Chloe Condon at Microsoft Reactor in Manhattan. When a user presses their Flic button, it sends a lyric text or musical call to the intended recipient. This project has been endorsed by Smash Mouth, Twilio, and Flic.

WHAT

Sends songs and lyrics at the click of a button!

WHERE

Microsoft Reactor

WHEN

August 2019

Note: the text message says: "someBODY once told me" and the caller ID says "Smash Mouth"

My Role

I coded and developed this project!

Project Goals

This idea came from an exploration of Azure Functions and Twilio to make a localized app that would run on my phone, triggered by a button click. I used Chloe Condon's Ambivert Fake Boyfriend tutorial (for a much more in-depth step-by-step guide, go check it out!).  The result is a friendly musical spam bot! When users click their Flic button, their friends (or enemies) will receive text messages with lyrics or phone calls that play whole songs. 

How It Works

To get this thing working, there are four things I needed: an Azure account, a Twilio account, your cellphone, and a Flic button. The last one is optional but it makes the whole project more fun (and deploying it becomes sneakier and easier). While Azure and Twilio both have premium accounts, they both offer long-term, full-fledged free trials that make it simple for anyone to dive right in.

First, I built an empty Azure Function. An Azure Function is a Microsoft tool for server-less computing. This makes it quicker for rapid application deployment. I used the NodeJS stack because JavaScript is a familiar language for me. Since I was going to be hooking my function up to Twilio and Flic, I chose the "Webhook + API" option. This allowed me to call my function whenever I put in an HTTP request.

Second, I headed on over to Twilio to grab a phone number that could send SMS messages and make calls. This number is in charge of sending everything out-going. Twilio provided an AUTH TOKEN and ACCOUNT SID (basically, the username and password for your unique Twilio number) for me to put in my Azure Function, officially setting my Twilio number as the "sender". This number remained static throughout the whole process (I changed the "receiver" number around many times - usually testing with my personal digits, but occasionally testing with a friend's cellphone just for fun).

Heading back over to my Azure Function, I actually wrote the code necessary for sending text messages and linked it up with my Twilio account. Then I did it again to send phone calls. Again, if you want specifics on the code I wrote, please check out THIS GitHub tutorial.

Finally, it was time to add the assets. On the Twilio end, I uploaded my music I wanted to play when a user picks up (obviously, I picked "All Star" by Smash Mouth). It's VERY important to note that your music file has to be in an .mp3 format or it will not work. You will just get a very long, sad message from a robot telling you that there's an error somewhere. Additionally, in your assets, you can program your phone call to say something (think the automated calls you got when it was a snow day back in grade school). This differs from adding text message assets. When writing the contents of a text for this app to send, you do it in the JavaScript in your Azure Function as opposed to in Twilio itself.

Once that was done, I tested everything out. When I ran my Azure Function on my computer, I got both calls and text messages. Using my computer was annoying, though. I wanted to deploy it from my pocket. This is where Flic came in. Flic is a bluetooth button that you can connect to your phone to do cool things like home automation. I used it to connect to the Webhook I made earlier with my Azure Function. Every time I pressed the button, the Flic button made the HTTP request to my JavaScript code, triggering my Azure Function to call Twilio, triggering Twilio to call or text my cellphone (as can be seen in the video above!).

To break it down in tl;dr format:

  1. Press Button

  2. Button calls on my Azure Function (which is where I instruct everything how to run)

  3. Azure Function calls on my Twilio code and assets (which is where I store all the information I need to make the call or send the text)

  4. Twilio sends a text/call to the recipient phone from my unique Twilio account number

Future Improvements

I'm planning on working with Flic and Twilio to turn this into an app - sending songs to your friends with the click of a button! First immediate steps will be masking all Twilio numbers so "receivers" can't call back, making the whole thing more anonymous.

Exploring and Creating
  • White LinkedIn Icon
  • White Instagram Icon
  • White Twitter Icon
  • White YouTube Icon
  • Medium Link

© 2020 by Kalila Shapiro

Note: The Blogger icon links to Medium.

KALILA

SHAPIRO