In my Redial class, we learned about the dark arts of telephony in an age of digital, packets, and VOIP. Once we learned the basics of operating in an Asterisk telephony server environment, we moved on to how to write scripts in Ruby, bash, whatever to interact with Asterisk during a phonecall. We set up our own Rackspace servers loaded up with Asterisk and used our professor’s script to install needed software on its Ubuntu instance. I’ve saved that script to add extra stuff when I’m setting up a new Ubuntu server from scratch. Ubuntu basic literacy is now attained.
That part was fun enough, but it started to get interesting when our badass professor, Chris Kairalla, published some code to Github for interacting with a web front-end in JavaScript by using socket.io, node.js, and a Ruby-Asterisk Gateway Interface script interfacing with calls placed to Asterisk. That’s when the realm of ideas greatly opened up. Real-time interaction with the phone dialpad to control a screen, an Arduino, robots, electric switches, whatever. And with the explosion of JavaScript and Node.js, it couldn’t have come at a better time.
Here are the class notes: http://www.itp-redial.com/class/
And the Github repo: https://github.com/itp-redial/
I set out with confidence, knowing I could use Professor Kairalla’s brilliant tinyphone code, which provided the framework to facilitate an incoming call into a caller object that one could manipulate in the web page DOM.
My idea was to build a bar or restaurant menu displayed on screens around a bar which would let customers place orders by just pressing digits on their phone, instead of waiting on waitstaff or having a gimmicky touchscreen or table screen. The orders would be tied to someone’s phone number so paying for bills wouldn’t require the awkward splitting up of the bill, and customers would be able to use a very personal device to them, their own cellphone, to control interaction in the bar/restaurant. Orders could be processed quickly, verified afterwards, and immediately incorporated into a database which could provide business intelligence in the form of statistics on food orders, frequencies, favorites for each customer, etc. All in a scalable, modular framework such as Node.js + Express.
Previous blog documentation: post #1.
Demo video:
Click here to view the embedded video.
Screenshots of some functionality:
Initially I figured I’d follow advice and build out the API first. For that, I’d need an admin dashboard to perform CRUD operations to build up the menu. I’m pretty tired of having to build out AJAX and menus to add, remove, edit, etc. so I’ve started building a Node.js app with all that stuff built-in, including JSON operations and other common usage events so I don’t have to keep testing it. Anyway, I got my menu add functions working so I quickly started adding all my favorite Stellas, Dark & Stormies, Mojitos, etc.
Then I spent most of my development time building an interface that could only use the dialpad numbers 1-9, 0, *, and #. Because I was fairly ill-versed with JavaScript still, I actually ended up refactoring my interface about three or four times, each time becoming more and more modular, using JavaScript objects which contained each “menu” (i.e. a beer menu that would point to each individual beer’s screen, which would pass to another object that would fill out a screen to let you order the beer) pushed into an interface that had no more than 8-9 choices. Then the screen would have to have text displayed large enough to read, yet still accomodate perhaps 3-4 simultaneous callers at once.
var menuFoodObj = {
name : "Food/Drinks Menu",
upMenu : "Main",
currentMenu : "Food",
id : "",
p : ["", "Beer", "Wine", "Liquor", "Non-Alcoholic Drinks", "Water", "Burger", "Specials", "Chips & Salsa"],
pClick : ["", "Beer", "Wine", "Liquor", "Other", "Water", "Burger", "Specials", "Chips"]
}
By the end of the refactoring though, I had a really nice (but still a little soupy) interface of JavaScript objects being pushed into the DOM by jQuery. I learned OO JavaScript pretty well although I didn’t understand fully how to create new objects and then properly make methods for objects (I was declaring new functions within objects). Since I did most of the development and testing just using the web browser and mouseclicks, I was happy when all my refactoring allowed me to easily map a phone’s keypresses to the interface interactions using jQuery’s .triggerHandler event. My code is still quite soupy though, and I think I’m about ready to learn backbone.js for injecting data from models into a static template — it would have been perfect for this type of project where the layout remains mostly the same but the data changes frequently. I’m happy, though, that it was easy for me to instantiate new user objects (e.g. user[1] = new User();) for the 4 users that Hermes currently supports.
I actually ran into a weird problem after I’d hooked in caller keypresses, which I thought at first was within the DOM. Keypresses from my softphone (I used Zoiper to connect via SIP) were happening twice and I thought the click event handler was being called twice in the DOM. This did not occur on normal phone calls over, say, a cellphone. Further inspection saw two keypresses coming across in Asterisk:
<SIP/general_sip-000000ae>AGI Rx << WAIT FOR DIGIT -1 <SIP/general_sip-000000ae>AGI Tx >> 200 result=50 <SIP/general_sip-000000ae>AGI Tx >> 200 result=50Prof. Kairalla found that we were actually picking up feedback on my laptop from the call being made over the software. Once we muted my laptop, the audio wasn’t being sent to the Asterisk server, which had been detecting the extra audio as what it assumed was an extra keypress.
I added an option to check news headlines from Google News’ API, which has been deprecated so will probably disappear soon? The other bad thing about this was that you can’t really link to the body of an article since 1) Google News just provides the link and the source’s weak abstract and 2) news sources are so proprietary about people stealing their content. APIs always leave a bad taste in my mouth because they’re hamstrung from the outset. Anyway, there’s a definite art to creating headlines, as I learned in my previous job covering the news cycle, and most headlines are expertly packed with relevant info, enough for you to get an idea of things just at a glance.
I also added features for sending drinks/orders to another table, to facilitate social interaction within the bar. Trivia can be played as well, though it wasn’t built into a central system where scores are kept. Right now it just tests a user’s response against the correct answer and then generates a random question. Another feature added was to flirt with other tables and send them messages.
I used Flowroute, which was super easy to set up in my sip.conf and extensions.conf for Asterisk, using Flowroute’s web-based cheatsheets for config settings unique to my account. Very nice set-up screens there.
emailjs and Twilio
To process orders (when someone wishes to buy a beer, but he hasn’t received it yet) and tabs (for delivered food/drinks), I took advantage of node.js’s awesome modules and found emailjs, which lets you package up a JS object and send it as an email via SMTP to, say, gmail. So when a customer places an order in Hermes, the order is sent via email to the company for later verification. Easy, piece of cake. Can be used with any SMTP server you have an account on and that has permissions.
Then Prof. Kairalla mentioned that it would be great if a customer received a text message thanking them after they close their tab. So I bought a phone number on Twilio ($1/mo) and used the Twilio SMS API to package up another JS object with the tab details, and then have it again email the company but also text msg the caller with his closed tab details. I actually had some problems with this and didn’t like the available Node.js modules (because they didn’t include examples for SMS), but luckily I found Dustin McQuay’s godsend blog post in which he posts some easy node.js code as a sendSMS() function, which I used to get my Twilio SMSs working. I then had further problems but I found out I had pasted in the wrong Twilio auth token, so once I re-checked that, it then worked! I feel as though the auth token changed because I funded my Twilio account, changing it from a free account to a paid one, and changing the token. I assume? Anyway, too much time wasted on that…
I also got a fraud alert from my credit card after trying to fund my Twilio. Apparently they get a lot of fraudulent credit card funds, which makes sense since I’m pretty sure telephony and stuff related to it are havens for people trying to commit fraud, fake identities, and game systems. But my credit card company cleared my purchase and I was fine within minutes. Just thought it was worth mentioning.
Conclusion
I demo’d this in class and had 4 people call in. They quickly broke it, but it was mostly the display of each person’s menu on the page. That’s an easy UI fix. I also found that I would need to make each person’s number more clearly visible so he’d know which interface he’d be working on. But I felt like people were very quickly navigating through the menus and would learn it fairly quickly once they figured out it was just using a phone dialpad. One thing that broke the demo was that the bottom bar (telling you how to use ‘*’, ’0′, and ‘#’) got pushed down so people couldn’t see it. Big problem there!
This app works hand in hand, I think, with my other app, Karaoke Flow. I would love to create products to make the bar/restaurant/club/concert/dance party/rave/big gathering experience more enjoyable for people looking to have a kickass time and more profitable for the businesses providing it to them.
And I’m blown away with what is possible now with socket.io and Node.js. All these projects I’ve wanted to do, like a web-based MUD to hook into Galapag.us, real-time chat, real-time flowing data, it’s now possible. Love it. And Redial…what a great class. It’s recaptured the mystique of phones before they went smartphone, the weirdness and coolness of the phonebooth which has become a portal in pop culture (Doctor Who, The Matrix, Danger Mouse), and the fun of messing with somewhat quirky and buggy technology after it’s fallen out of vogue. And to see how easy it is to set up a Vonage-like system!
