May 22, 2015

Your resume looks impeccable. Surely, human resources will be wowed by your impressive job history, stellar education and your tireless volunteer efforts to find Manhattan residents parking spaces. So far so good—and then your voice print blows any chances you had. For some reason your cute, Minnie Mouse voice isn’t a match for the job. […]

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 21, 2015

The morning of the second day of Signal, attendees were left wondering what they did with their carnival hats, and if the Coney Island for coders they experienced the night before was all just a fever dream.

Developers toyed with Lego kits, dropped rings from drones, and manned Arduino powered catapults. Equipped with hackpacks, each ba$h participant vied for coveted prizes: Star Wars memorabilia, adorable stuffed animals, and most of all – the glory of saying you won at a code carnival. Read the recap here and watch the video below.

 

Supporting The Developer Economy: Renewing TwilioFund

twiliofund

After yesterday’s series of launches, Jeff Lawson announced the relaunch of TwilioFund. The $50 million investment fund, backed by the support of Bessemer Venture Partners, DFJ and Redpoint Ventures, is focused on attracting new developers and businesses to build on Twilio’s platform, and encouraging current Twilio companies to innovate further on Twilio’s platform.

We’re truly excited to meet new companies who are leading the charge into the future of communications technology. Apply here.

Getting In the Mind of A Software Person

4Y6A3879

The second day of Signal was jam packed with talks on the Equip, Learn and Insight tracks, covering everything from building one-click deploy features, to scaling social polling for the President of the United States’ State of the Union, to learning how to use WebRTC in your business.

In the Builders Panel talk Harper Reed, Eric Ries, Jessica McKellar, and Justin Kan shared why and how they build software. From Harper’s experience building a technologically savvy campaign as CTO for Obama’s re-election bid, to Eric Ries experience building a movement of lean startup entrepreneurs, all the panelists shared their take on what makes a builder.

Talking To They Might Be Giants

announcementJeff Lawson capped off the night interviewing John Linnell and John Flansburg of the legendary rock group – They Might Be Giants. Over the past 23 years, John and John have built a devoted fanbase and proved nothing but ingenious in finding new ways to connect with their fans.

Jeff talked with the band about the power of communication leading to the success of their once tape machine powered Dial-A-Song, and announced that the new Dial-A-Song is powered by Twilio!

Closing Words

Signal is a wholly unique experience. The whole time I’ve been a part of the Twilio team, I’ve never experienced anything like it, or more accurately, never had such incredible experiences with a great crew of people. Meeting the entrepreneurs and brilliant people you write blog posts about face to face is not only rewarding, it’s inspiring. Signal was colored by the people that attended. In some cases (like the LED up chandelier) they literally colored the conference via SMS. But, most importantly they colored the conference with their enthusiasm and ingenuity.

This closes up the first ever Signal, and opens up a whole new chapter in Twilio and the developer community. We are deeply grateful for the work developers do using Twilio and humbled by the response of the community at Signal.

Until next year, onward and upward!

Twilio Signal Day Two Recap: Breaking Down $bash, Bringing On The Builders and They Might Be Giants

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 20, 2015

$bash got started with a bark.

Dressed in full carnival barker / ring leader regalia, Rob Spectre ushered in hundreds of Signal attendees into the carnival for coders.

4Y6A3708Some hit the cotton candy stand, some ran to throw baseballs at old telecom hardware, and some tried to solve FizzBuzz, a classic coding challenge, as fast as possible. $bash attendees hopped from booth to booth to try and earn tickets, redeemable for prizes like Star Wars action figures, tiny drones, and more.

Each booth took a classic spin on a carnival game. Instead of playing ring toss, you pilot a drone and try to drop a ring onto bottles below. Instead of testing your aim in a watergun battle, you test your skills in a code challenge battle to advance your battleship forward in a code race.

The night was an absolute blast. Thanks to the coders, cotton candy eaters, and carnival staff that showed up.

 


 

$bash Recap: Coney Island For Coders at #SignalConf

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


We live in a software-defined world that’s changing every day for the better, thanks to the work of developers. Investing in developer ecosystems is essential to fuel those ingenious inventions that let you do anything from crowdsourcing language translation, to building a social polling platform good enough for the President’s State of the Union.

Today we’re happy to announce a renewed investment in the developer ecosystem. With the support of VC investors, Bessemer Venture Partners, DFJ and Redpoint Ventures, we’re announcing the new TwilioFund, a $50 million investment fund focused on attracting new developers and businesses to build on Twilio’s platform, and encouraging current Twilio companies to innovate further on Twilio’s platform. In addition to the cash investment opportunity provided by our VC partners, qualified companies will also have an opportunity to receive generous Twilio credits, marketing support and technical advice on best practices with Twilio.

The first investment from the new TwilioFund went to Speakeasy, who launched a new iPhone App at SIGNAL just yesterday. Speakeasy offers simple, user-friendly conference calling without the need for any PIN codes. Powered by Twilio, Speakeasy’s iPhone app and web client to are set to transform today’s out-of-touch conference call technology into an engaging, shared mobile experience where businesses communicate more productively with customers and colleagues.

We’re incredibly excited to launch the new TwilioFund and can’t wait to meet the companies leading the charge into an era defined by software-embedded, contextual communications.

Learn more about previous TwilioFund winners here: Wedgies, Babelverse, and TalkDesk.

We will be accepting applications in the coming weeks. To get more information, please click here.

https://www.twilio.com/fund

Announcing The New TwilioFund: Investing $50 Million In The Future of Communications

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Preparing For Signal, and Lessons From The LEGO Movie

This morning, I arrived at Fort Mason early. Prepped my SD cards, blog posts, double checked the launch schedule for our product announcements. I was prepped for Signal, but not prepared for the impact of Signal.

I wasn’t prepared for roar of applause when Jeffiel compared bygone-era communications technology providers to Lord Business, the star villain of the LEGO Movie. The audience was firmly on the side of the Master Builder, the hero of the movie. Master Builder’s quest is to empower everyone and anyone to build any LEGO creation in the LEGO kingdom. It’s a similar principle Twilio is fighting for in the world of software powered communications.

A New World of Software

Software is fundamentally changing the way we interact with the world. Developers are driving that change. Today, at Signal, CEO Jeff Lawson revealed some of the stats that underscore that fact. With each commit, request, and phone call – you’re changing the world using communications technology.

  • 700,000 developers use Twilio
  • 641 million people have interacted with Twilio
  • 22 billion API requests logged
  • 1 in 5 people in the world has interacted with Twilio

Giving You The Communications Tools You Need In A Software World

The momentum of the developer network is growing and growing. We want propel that growth by giving you the tools you need to be successful whether you’re an independent programmer, or an enterprise systems engineer.
Today, we launched Copilot, a newly revamped <Conference> offering, Alphanumeric SenderID, new numbers in 6 countries, Video updates, and a suite of IP messaging products including IP chat.

Copilot

blogcopilot

Clear the runway, and make some room for your new copilot. Copilot helps you do everything from streamlining message routing and delivery, to enabling you to send out SMS to multiple numbers with the press of a button.

Using Copilot, you can pick from a number pool (a designated group of phone numbers), and decide what you want your copilot to do.

  • GeoMatch lets you automatically use the number in your number pool that matches the country of your recipient.
  • Sticky Sender ensures that end users continue to see the same phone number every time they receive a message from you.
  • Reroute knows when carriers are unable to accept SMS from short codes and enables a default to a long code when necessary.
  • Scaler allows you to reach large audiences by leveraging multiple numbers when sending out SMS.

Alphanumeric SenderID

senderidblog

You only get one shot to make a good first impression. Alphanumeric SenderID lets you make a personal first impression with your customers by allowing you to send SMS from a name, instead of a number. This gives you the freedom to brand your texts, and gives your customers the personal touch they want.

Authy Announces Authy One Touch and Authy For Apple Watch

authy-onetouch_social-asset

Authy is making two factor authentication even easier with One Touch. One Touch allows you to authenticate your website, or app with a simple one touch yes or no response.  Authy for Apple Watch is available for all users who upgrade to the Authy app version 18.

This new powerful feature allows iPhone users to authenticate into sites from their watch – without having to take out and unlock their phone.

New Numbers in 6 Countries

Screen Shot 2015-05-19 at 5.30.45 PM

Your business is expanding worldwide. We want to give you the coverage and reach that you need to keep expanding your business. Today, we announced new SMS capabilities in Chile, Czech Republic, Denmark, France, Hungary, and Israel. You can start using those numbers today.

Video

video_blog-asset

Since we launched Video last month, we’ve had thousands of developers ask for access to beta. It’s a powerful medium, that has myriad use cases whether you’re in tech, finance, health care or education. Today, we invited every single Signal attendee to take video for a spin in beta and unveiled a new Video pricing model that makes it not only possible, but affordable to embed video in every single app.

Conference

blogglobalconf

Today, we unveiled two new ways to conference. Introducing Global Conference and Epic Conference. Using Global Conference you can embed audio globally, while still maintaining high fidelity audio. To reduce latency, we route your media packets to Twilio’s closest point of presence between you and your participant.

Speaking of participants, invite all of them to your Epic Conference. Using Epic Conference, there’s no limit of participants you can have. Using Epic Conference, you can build apps that can handle hundreds or even thousands of global participants.

IP Messaging

Twilio IP Messaging allows developers to embed advanced person-to-person chat in mobile apps, SaaS products, and websites. Instant messaging is a tremendously useful tool, but without context it fall short. Twilio IP Chat is designed to give you an embedded, contextual experience that’s both intuitive and immediate.

Using IP Messaging you can streamline interactions between customer and call center agent, reduce communication time with your team of developers, and have access to all your chat data whenever you need it.  Apply here for early access.

Onward and Upward

We are continuously amazed by the work, the vigor, and the ingenuity of the developer community. The growth of the community is only matched by genius of the apps you build, the companies create, and the work you do everyday. We consider it a privilege and a pleasure to be the communications platform you chose, and we’re excited to see what you build next.

Stay tuned to the blog for more announcements and updates, and keep an eye on #signalconf.

Onward!

Twilio Signal Day One Recap: Ushering In The Developer Era, and The Tools You Need In It

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 19, 2015

Today, at SIGNAL we announced Twilio IP Messaging. Twilio IP Messaging allows developers to embed advanced person-to-person chat in mobile apps, SaaS products, and websites.

So many conversations start with an instant message. It works for doing everything from gathering friends for a night out, to collaborating with coworkers on the latest project. Now, chat can be an embedded and contextual experience in any software application.

With Twilio IP Messaging, developers can rely on Twilio for all their communications. Our suite of offerings now includes voice, video, and messaging for carrier-based services, like PSTN and SMS, as well as IP-based services that embedded directly into the app.

Keeping Chat Contextual

Embedded chat provides a better user experience because it maintains context that’s critical to the conversation.

If several people are using an app together, and want to communicate about it, what do they do? One option is for them to leave the app and then use a separate, siloed messaging solution, but using standalone messaging fragments that communal experience.

At best, users have to copy and paste information between applications to share their experience with the group. At worst, they forget about the app altogether because they are distracted by the loss of context.

Embedded messaging allows users to chat in-app, about the content they care about, in the moment they care about it. Interactions can take place in real time, or asynchronously, so that users can also consume chat messages at a time when they are most likely to want to receive them – when they are in-app.

Linking conversations to the situation in which they arise provides a richer experience than stand-alone chat. Embedded messaging gains additional layer of context when it is tightly integrated with the application itself with access to underlying data. Building a chat interface on top of the IP Messaging APIs unlocks new user experiences that were previously out of reach.

For example, imagine being on a webpage shopping for a pair of headphones. You are talking with a sales agent using an embedded chat box, and you drag and drop the headphones into the box. On the other end, instead of receiving a simple image file, the agent receives a rich data object. The object contains not only an image of the headphones, but also a SKU, inventory numbers, specials offers, and list of products that would likely compliment the headphones. The agent can now better serve you by sharing customized product recommendations and discounts.

Reliable Cloud Infrastructure

Although embedded chat offers a richer experience, building a custom messaging infrastructure is a challenging proposition. First, you have to build an evented publish and subscribe (pub/sub) system in order to send and receive messages. Building pub/sub systems is simple, but doing so at scale with a system that can handle a high traffic load and maintain speedy responsiveness is difficult. Additionally, developers need to build and maintain storage systems in order to provide message persistence. With IP Messaging, Twilio provides a resilient cloud infrastructure so that messages are delivered reliably and securely. Your data is available whenever you need it, across user accounts and devices.

Realtime Communications (RTC) SDKs

Along with Twilio Video, IP Messaging is part of Twilio’s RTC SDKs.This set of iOS, Android, JavaScript, and C++ SDKs work seamlessly together to provide modular access to communications functionality. The IP Messaging SDK provides functionality designed for advanced chat such as typing indicator, message read status, and topic search. Video and IP Messaging can be used together, or independently, to embed rich realtime communication features into any application.
To learn more and get on the waitlist for early access, visit https://www.twilio.com/ip-messaging

Announcing IP Messaging: APIs for Embedding Advanced Chat

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


If a picture is worth a thousand words, what is a video worth? A million? More? That’s the question we’ll look for developers like you to answer with Twilio Video, which we’ve released in a limited beta at Signal. Twilio Video makes it easy for you to connect your users by capturing every wave, groan, and belly laugh in a high-quality, peer-to-peer video conversation built on top of standard technologies like WebRTC.

But Twilio Video is about much more than providing the server-side infrastructure you’d need and drastically reducing the amount of code to write video applications with WebRTC. Twilio’s new SDKs enable cross-platform video conversations between web and native mobile clients (iOS and Android targeted initially), and cross-platform use of APIs like WebRTC’s data channel, which allows you to send arbitrary data between clients (think chat/IP messaging or screen sharing). You will also have server-side control over conversations with a rich REST API, allowing you to to intelligently manage the client-side experience from your back end code when necessary.

Twilio’s mission is to empower developers to change the way the world communicates forever, and we feel this technology is a critical step along that path. We are excited beyond words to see what you’ll build with Twilio Video.

In this tutorial, we’ll show you how to get started with Twilio Video in desktop web browsers that support WebRTC (recent Chrome and Firefox builds should do the trick). We’ll show you the server-side code you’ll need to write to power video (spoiler alert, it’s not much) and many of the JavaScript APIs you’ll have available to build a communication experience in the browser. Sound like a plan? Then let’s get cracking!

What You’ll Need

  • Twilio Account and Access to the Video Beta Program (All Signal Attendees!)
  • Node.js installed on your system for the required back-end components (we’re using Node.js in this example, but Twilio’s helper libraries are available in C#, Java, Ruby, PHP, and Python also)
  • A WebRTC enabled browser – the latest Chrome and Firefox releases should do nicely

What You’ll Build

  • A basic video calling application with two parties in the browser
  • A backend to handle generating capability tokens using your Twilio account
  • View completed source on GitHub

Run It Now!

Want to skip right to playing with the example app? We’ve got you covered:

If you’d like to learn how it all works, follow along below as we break it down step-by-step. Let’s begin in the browser, where we’ll create a basic video calling application interface.

Building the Video Calling Interface

Most of the fireworks for Twilio Video will be launched in the browser, so let’s start here! We’ll begin by creating a single HTML page that will become our video chat application. This page will be served by your web application as-is, and with a little bit of JavaScript and CSS will form 100% of the UI for this example.

In the static asset directory of our application, we have a file called “index.html”. We need two chunks of UI to power our application – one to allow the user to enter a name (which will allow other users to video call them using that name), and another chunk to either accept or initiate an outbound video call.

Here’s the markup we need to allow the user to enter their name.

<div id="startDiv">
    <p>Enter Your Name Here:</p>
    <input id="my-name" 
        placeholder="your name"/>
    <button id="start">Let's Do This!</button>
</div>

And here’s the markup for the actual video call UI, which is initially hidden.

<div id="callDiv" style="display:none;">
    <div id="me"></div>
    <div id="you"></div>
    <div>
        <input id="other-name" placeholder="other person's name"/>
        <button id="call">Video Call This Person</button>
    </div>
</div>

Twilio’s JavaScript SDK will handle inserting HTML 5 video elements into the divs we’re targeting – #me for your local video feed, and #you for the remote participant.

All together, the markup (plus a tiny bit of CSS) for the UI looks like this.

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with Twilio Video</title>
    <style type="text/css">
    #me, #you { display:inline-block; }
    </style>
</head>
<body>
    <h1>Getting Started with Twilio Video</h1>

    <!-- Begin by specifying a name for your endpoint -->
    <div id="startDiv">
        <p>Enter Your Name Here:</p>
        <input id="my-name" 
            placeholder="your name"/>
        <button id="start">Let's Do This!</button>
    </div>

    <!-- Here's the call UI -->
    <div id="callDiv" style="display:none;">
        <div id="me"></div>
        <div id="you"></div>
        <div>
            <input id="other-name" placeholder="other person's name"/>
            <button id="call">Video Call This Person</button>
        </div>
    </div>

</body>
</html>

Now, we’re ready to write the JavaScript code that will power the video conversation.

Starting the Conversation

The next component you’ll need is the Twilio JavaScript SDK. This file must be loaded from a CDN managed by Twilio. The WebRTC APIs that our tools are built on are evolving rapidly, and loading the JS SDK from our CDN ensures you always have code that is compatible with the latest revisions.

We include the JS SDK using a script tag beneath our UI markup but above the

</body>
tag, like so:

<script src="https://www.twilio.com/blog//media.twiliocdn.com/sdk/conversations/v0.7/js/releases/0.7.1.b1-7238b35/twilio-conversations-loader.min.js"></script>

Next, we include a version of jQuery from a CDN to make our event handling and DOM manipulation a little easier:

<script src="https://www.twilio.com/blog//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Next, we’ll create a script tag that will contain some actual code to drive our UI. The first thing we need to do is allow the user to specify what name they will be reachable at by other users. This name is the unique address for an object we call an “Endpoint” in the API. An Endpoint is a person or entity that can be involved in a “Conversation”, which is a shared communication channel between multiple Endpoints. An Endpoint could be a browser based client like the one we’re building, an old-school telephone on the PSTN, or an iPad application running Twilio’s iOS SDK.

To allow the user to specify their unique name, we provided a text field and a button in a basic form-like interface in our markup. We begin by attaching an event handler to the button click like so.

// Initialize endpoint
$('#start').on('click', function() {
    // this is the code we’ll see next
});

When the button is clicked, we need to create an Endpoint with the name the user entered. To do that, we’ll need to use the “Twilio.Endpoint” constructor along with a secure access token which will allow our browser-based client to communicate with Twilio. This value we’ll actually need to generate on the server rather than in the browser, so we’ll fetch the token via an Ajax request. We’ll check out that server code in a bit, but for now just understand that it’s generating a one-time use token, for a client with our unique name, to allow our browser to communicate with Twilio.

Here’s the initialization code all together.

// Initialize endpoint
$('#start').on('click', function() {
    // First, grab the SAT token from the server
    $.getJSON('/token', {
        name: $('#my-name').val()
    }, function(data) {
        console.log('Token response:');
        console.log(data);

        // Create the endpoint, and then initialize the main calling app
        var endpoint = new Twilio.Endpoint(data.token);
        $('#startDiv').hide();
        $('#callDiv').show();
        init(endpoint);
    });
});

At the end of the click handler, we pass the Endpoint we created to an “init” function that will set up the actual video calling UI. Let’s see how that works next.

Reach Out And Video Call Someone

After creating our endpoint, we need to configure it to accept incoming video calls, as well as initiate outbound calls to any other user we choose. That process begins in the “init” function we used a moment ago – let’s look at the key steps of that function.

The first order of business is to register an event listener for incoming calls via the “invite” event.

endpoint.on('invite', function(invitation) {
    invitation.accept().then(showConversation);
});

This event handler is passed an “Invitation” object, which in this case we will immediately accept (you could reject it as well). The “accept” function executes an async process to connect your browser to another client, and will notify you when that process is done using a promise. When the conversation is established, we pass in a function called “showConversation”, which will handle rendering the conversation video feeds in our UI. We’ll check out how that works in just a bit.

The next thing we need to do to initialize our calling UI is attach event handlers to handle the user initiating a call themselves.

// Start a conversation
$('#call').on('click', function() {
    endpoint.createConversation($('#other-name').val())
        .then(showConversation);
});

When the #call button is clicked, we create a new Conversation between our endpoint and another endpoint with the name the user entered into the #other-name input box. Just like accepting a call, we specify a “showConversation” as a callback when our browser is connected to the person we are trying to call.

Finally, we need to tell our endpoint to start listening for inbound calls:

endpoint.listen();

“listen” returns a promise as well, but for brevity we are omitting a callback function to handle it. Everything will work on the first try always, right? Right?

All together, the init function looks like this:

// Initialize video calling app with my endpoint
function init(endpoint) {
    console.log('Endpoint Created:');
    console.log(endpoint);

    // Automatically accept any incoming calls
    endpoint.on('invite', function(invitation) {
        invitation.accept().then(showConversation);
    });

    // Start an outbound conversation
    $('#call').on('click', function() {
        endpoint.createConversation($('#other-name').val())
            .then(showConversation);
    });

    // Listen for incoming calls
    endpoint.listen();
}

Now our app is all set to both make and receive calls. The next thing we need to do is actually show the video feeds associated with the call, which happens in the “showConversation” function which we’ll show next.

Video Killed the… Um… I Can’t Think of a Good “Radio Star” Pun

The “showConversation” function has two jobs – attach the local media stream (the input from your own web cam) and the remote stream (the video feed coming from the other person) to elements in the UI. This is done using functions called “attach”, which take a selector string for an element, to which it will append a video tag with the feeds.

Here’s what that looks like:

// Show a conversation (inbound or outbound)
function showConversation(conversation) {
    // Attach to DOM
    conversation.localMedia.attach('#me');

    // Listen for participants
    conversation.on('participantConnected', function(participant) {
        participant.media.attach('#you');
    });
}

Now, all together, our front end code (in a single HTML file) looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with Twilio Video</title>
    <style type="text/css">
    #me, #you { display:inline-block; }
    </style>
</head>
<body>
    <h1>Getting Started with Twilio Video</h1>

    <!-- Begin by specifying a name for your endpoint -->
    <div id="startDiv">
        <p>Enter Your Name Here:</p>
        <input id="my-name" 
            placeholder="your name"/>
        <button id="start">Let's Do This!</button>
    </div>

    <!-- Here's the call UI -->
    <div id="callDiv" style="display:none;">
        <div id="me"></div>
        <div id="you"></div>
        <div>
            <input id="other-name" placeholder="other person's name"/>
            <button id="call">Video Call This Person</button>
        </div>
    </div>

    <!-- Release the JavaScripts -->
    <script src="https://www.twilio.com/blog//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.twilio.com/blog//media.twiliocdn.com/sdk/conversations/v0.7/js/releases/0.7.1.b1-7238b35/twilio-conversations-loader.min.js"></script>
    <script>
    // Initialize endpoint
    $('#start').on('click', function() {
        // First, grab the SAT token from the server
        $.getJSON('/token', {
            name: $('#my-name').val()
        }, function(data) {
            console.log('Token response:');
            console.log(data);

            // Create the endpoint, and then initialize the main calling app
            var endpoint = new Twilio.Endpoint(data.token);
            $('#startDiv').hide();
            $('#callDiv').show();
            init(endpoint);
        });
    });

    // Initialize video calling app with my endpoint
    function init(endpoint) {
        console.log('Endpoint Created:');
        console.log(endpoint);

        // Automatically accept any incoming calls
        endpoint.on('invite', function(invitation) {
            invitation.accept().then(showConversation);
        });

        // Start an outbound conversation
        $('#call').on('click', function() {
            endpoint.createConversation($('#other-name').val())
                .then(showConversation);
        });

        // Listen for incoming calls
        endpoint.listen();
    }

    // Show a conversation (inbound or outbound)
    function showConversation(conversation) {
        // Attach to DOM
        conversation.localMedia.attach('#me');

        // Listen for participants
        conversation.on('participantConnected', function(participant) {
            participant.media.attach('#you');
        });
    }
    </script>
</body>
</html>

That’s it for the front end – but remember that token we had to fetch from our server via Ajax? Well, it’s not going to generate itself, so let’s hop into our server code to see what we need to do to generate this token.

Our Express Webapp

In this example, our back end application is a simple Node.js web application using the popular Express web framework. Our usage of it is fairly minimal – we create an HTTP server and use Express to handle incoming requests to it. We also use the built-in Express middleware for serving static assets (HTML, CSS, JavaScript) from the “public” folder of our app. That will handle sending “index.html” to the browser when a user visits the root URL of the app.

We define only a single route, that will be requested via Ajax from the browser. This route generates the access token we’ll need to allow our browser-based code to talk to Twilio. It also initializes our application by using the Twilio REST API to generate a secure keypair which we use to sign the access token we send to the browser.

Here’s our server code all in one shot:

var http = require('http');
var path = require('path');
var express = require('express');
var token = require('./token');

// Create Express app and HTTP Server, serve up static HTML/CSS/etc from the
// public directory
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
var server = http.createServer(app);

// Generate a JWT token to use with the video SDK
app.get('/token', function(request, response) {
    // Generate a token for the name requested, with both "listen" and "invite"
    // permissions (the default set of permissions)
    response.send({
        token: token.generateToken(request.query.name)
    });
});

// Initialize the app
token.initialize(function(err) {
    // If there was an error during init, log it and fail
    if (err) return console.error(err);

    // Otherwise start up the app server
    var port = process.env.PORT || 3000;
    server.listen(port, function() {
        console.log('Express server now listening on *:' + port);
    });
});

Most of the token generation logic is found in the “token.js” module, which exports two functions. The “initialize” function fetches the keys that we use to sign our token. The “generateToken” function generates the secure string token we send to the browser.

Our call to “initialize” happens only once on startup, after which the module-level

SIGNING_KEY_SID
and
SIGNING_KEY_SECRET
variables are populated. We’ll need these values to mint our token. We won’t dive into this code right now – eventually you will be able to create and save these values in the account portal, which is probably going to be easier than using the REST API to create them.

Where we will spend some time is in the code that generates the access token we send to the browser. Ultimately, this code will return a JSON Web Token (JWT), serialized as a string that we’ll include with our response on the “/token” route. Let’s take a look at the code we need to write to make this happen.

First, we’ll need to create a new access token, which is a helper object that will help us build our JWT. To this constructor, you’ll pass in the signing key SID from our “initialize” function (SIGNING_KEY_SID) and your Twilio Account SID (found on your dashboard).

var token = new twilio.AccessToken(
    // Sid for the signing key we generated on init
    SIGNING_KEY_SID,
    // your regular account SID
    process.env.TWILIO_ACCOUNT_SID
);

Next, we’ll need to configure the token we generate to have a unique Endpoint name, and have permission to both accept and send conversation invites:

token.addEndpointGrant(name);

We also need to grant our browser-based client the ability to create NAT traversal tokens to assist in connecting browsers peer-to-peer:

var resUrl = 'https://api.twilio.com/2010-04-01/Accounts/%s/Tokens.json';
var grantUrl = util.format(resUrl, process.env.TWILIO_ACCOUNT_SID);
token.addGrant(grantUrl);

Finally, we sign and generate a string representation the token:

return token.toJwt(SIGNING_KEY_SECRET);

All together, the generateToken function looks like this:

// Helper function to generate an access token to enable a client to use Twilio 
// Video in the browser. Grants limited permissions to use
// Twilio back end services for NAT traversal and general "endpoint" services
// like listening for inbound calls and initiating outbound calls.
exports.generateToken = function(name) {
    var token = new twilio.AccessToken(
        // Sid for the signing key we generated on init
        SIGNING_KEY_SID,
        // your regular account SID
        process.env.TWILIO_ACCOUNT_SID
    );

    // Add the capabilities for conversation endpoints to this token, including
    // it's unique name. We'll use the default permission set of "listen" and 
    // "invite"
    token.addEndpointGrant(name);

    // Authorize the client to use Twilio's NAT traversal service - for that,
    // it will need access to the "Tokens" resource
    var resUrl = 'https://api.twilio.com/2010-04-01/Accounts/%s/Tokens.json';
    var grantUrl = util.format(resUrl, process.env.TWILIO_ACCOUNT_SID);
    token.addGrant(grantUrl);

    // Generate a JWT token string that will be sent to the browser and used
    // by the Conversations SDK
    return token.toJwt(SIGNING_KEY_SECRET);
};

And that’s it! Now you’re ready to start making and receiving video calls in the browser.

Wrapping Up

Video is the first step on a longer journey to open up scalable IP communications to every developer in every application. Using video, you’ll be able to connect your users in rich conversations where more emotion and meaning are sent over the wire than what could be accomplished in a voice-only call.

In a short time, you’ll be able to create cross-platform interactions of this kind, connecting iOS, Android, and web apps seamlessly using the same infrastructure. We can’t wait to see what you build! Please hit us up at help@twilio.com with any questions, and we’d love to help you out.

Getting Started with Twilio Video

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Today at SIGNAL, we made the beta of Twilio Video available to all attendees, and announced a fundamentally different pricing model for Video. It is designed to put video in every single app. Twilio Video costs two orders of magnitude less than the per-user and per-minute pricing models prevalent in the industry.

Since we announced video a few weeks ago, we’ve had over a thousand developers request early access to the beta. We’ve seen all sorts of use cases, from healthcare to education to real estate to finance and more. The breadth of use cases has been really interesting, and is exactly what we expected – the demand for embedding video into applications is massive. It’s not limited to particular niches or verticals – everyone and their dog wants video.

That’s what we had in mind when we set about pricing video. We built the infrastructure to be massively scalable, and we wanted the pricing to be low enough to fulfil on that promise of scalable, and enable video to be a feature everywhere. Every. Single. App.

Some other players in this market have already put out pricing models which we don’t feel work.

Some pricing models approach from carrier-owned providers approach it as if it is carrier-style telecom. They charge cents per minute. It might make the pricing model simple, but even at the slightest glimpse of scale, it’s way too expensive.

Others approach it as SaaS, with packages based on number of users per month. The “Enterprise” package is for those with 1,250 users. Nothing about 1,250 screams enterprise to us. The problem here is you have to make a number of assumptions in that sort of pricing model. How often do the users sign in, how much do they interact with the API, etc. Typically the SaaS providers deals with that uncertainty by loading it with caveats. “Fair usage restrictions apply”. Either you break their estimate and you get charged extra, or you don’t use as much as they budgeted for, and they of course pocket the difference.

The common theme here is that these people are approaching communications as if it’s a niche. But if you believe as we do that software communications is the future, the model should be different. We built Twilio Video to scale globally and be resilient at every level. And we priced it in a dramatically different way, pricing it more like infrastructure as a service than software as a service.

Twilio Video is priced based on the infrastructure you need to use to run video in your applications. There are three core variables (which also match our costs of running the service):

  • Endpoints connected: Specifically the peak number of endpoints connected, per hour. Think of this as registration – if your endpoint is registered and able to receive a call, it is a connected endpoint.
  • Conversation Participants: Every participant of a conversation is counted, so a conversation with four participants counts as four, as does two conversations each with two participants. The duration of the call does not matter.
  • API Transactions: Each API interaction counts, such as a call from the SDK to initiate a conversation, a REST API call to manipulate a conversation, or an event notification webhook to notify your server of a change to a conversation.

 

Each one of these things is priced at $0.0001. One hundredth of a penny. In addition there is a low per GB charge for network traversal if you use it, as already advertised. This is drastically different pricing – this is infrastructure pricing.

We’ve modelled all sorts of different use cases on this pricing model, and Twilio Video is considerably lower than other options. Somewhere from 1/10th to 1/100th of the cost of any other service.

Here are a few examples:

Let’s say you wanted to do 1hr per day of HD video:

  • The service offered by carrier-owned vendors would cost you $7.20 per month
  • Services offered from SaaS-style vendors would cost you $1.60 per month
  • Twilio would cost you twelve cents. Twelve. $0.12 per month

If you are running a call center doing six hours a day:

  • Carrier model: $28.80 per month
  • SaaS model: $1.60 per month
  • Twilio: $0.21 per month

If you’re doing 24x7x30 HD video:

  • Carrier model: $172.80
  • SaaS model: $26.72
  • Twilio $2.73

No matter what your use case is, no matter what your approach is, Twilio’s pricing approach makes it possible to integrate video everywhere.

This is still Day One in the migration of all communications from their legacy in hardware to the future embedded in software. The future experiences of communications have not even been built yet, but Twilio Video provides the foundation for building them at scale, everywhere.

Twilio Video at SIGNAL: Pricing to Support Video in Every Application

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Today at SIGNAL, team Twilio unveiled Global and Epic Conference, featuring an entirely new cloud mixing technology. Now, developers can easily embed global audio conferences in their software apps with hundreds, and even thousands of participants.

Conferencing technology prevalent in the market today is meant to be used as a standalone service and designed for local scale. Twilio introduced conferencing as a composable API for developers in 2009. That’s how Twilio customers have turned  conferencing into a seamless interaction within collaboration and call center software. With the new cloud mixing technology, conferences can now be both embedded in software apps and can scale globally.

Twilio Conference lets you develop with a full set of advanced features such as start and stop logic, recording, moderator call controls, international dial-in numbers, multilingual text-to-speech, dial-out, and REST API status queries. Participants can connect via mobile, landline and VoIP.

You now have three ways to use Twilio Conference:

  1. Basic Conference API: For conferences of up to 40 participants, Basic Conference supports the entire suite of advanced features and hosts all calls in the US.
  2. New Global Conference API: Built with Twilio’s patented Global Low Latency (GLL) technology, Global Conference delivers high quality audio anywhere in the world with support for up to 250 participants.
  3. New Epic Conference API (Beta): The affectionately named, Epic Conference, removes the limits on the number of participants so that your web or mobile app can handle corporate earnings calls, all-hands meetings, political field communications, whatever you throw at it.

Global Conference

“You go…. No you go… No… Wait… What?”

Maybe it was a tense negotiation where your brilliant counterpoint was misheard or a hilarious joke that was met with utter silence. Conference calls, especially those that are global, can be infuriating. Most of the time, this is a symptom of simple physics. A conference call where all the participants are in, say, Singapore have their audio routed back through a media mixer halfway across the world, thus adding 100s of milliseconds of latency. Awkward pauses, crosstalk and dodgy audio are inevitable.

Using Twilio’s GLL technology, conference calls stay local. For the first time, call setup and media mixing have been separated. That’s how conference call media automatically is hosted through the closest of dozens of data centers located across six major geographic regions. Dedicated media mixing infrastructure in every geographic region ensures that real-time communication traffic avoids long intercontinental routes and multiple hops.

The result is excellent call quality with fewer dropped packets, low jitter, and no annoying crosstalk. Global conference also increases the number of participants that can join a call to 250, a more than 5X improvement over Basic Conference.

Pricing is determined for each conference call depending on where it’s hosted.

  • US (East) – $0.0020 / participant per min
  • Europe (Dublin) – $0.0030 /participant per min
  • Japan (Tokyo) – $0.0040 /participant per min
  • Asia Pacific (Singapore) – $0.0040 /participant per min
  • Australia (Sydney) – $0.0040 /participant per min
  • South America (Sao Paulo) – $0.0050 /participant per min

 

Epic Conference

“Sorry, you’ve reached the maximum number of conference participants. Good bye.”

Whether you’re hosting a call for company shareholders or rallying the base of a political campaign you risk a financial and reputation hit when you start dropping callers. Building conferences of this size into your app simply hasn’t been possible in the past unless you built out the entire infrastructure on your own.

Say hello to Epic Conference and never worry about hitting a ceiling again. Built on the same cloud infrastructure as Global Conference, Epic Conference lets you build apps that handle hundreds or even thousands of global participants.

Twilio can achieve such large conferences because it can use multiple media mixers together. You effectively get a virtual mixer in each region that can be scaled to accommodate any conference capacity.

Epic Conference is now in private beta with pricing to be announced soon. To request early access, please visit www.twilio.com/voice/conference/request-early-access.

Get Started

All conference types continue to use the <Dial> verb’s <Conference> noun detailed here. Global Conference is enabled by default for all new Twilio accounts and you can simply go into the Twilio Console to switch between products for either an account or subaccount.

Learn more about conference at www.twilio.com/voice/conference.

We can’t wait to see what you build.

 

Introducing Global and Epic Conference

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Before your customers read your message, they see the number you used to send that message. You only get one shot to make a good first impression with a customer. Using a local, familiar sender ID to send your SMS & MMS helps you set the tone for how your audience receives your content.

We want to help you make a good first impression. That’s why we’re excited to announce two new capabilities from Twilio: new mobile numbers in six countries and Alphanumeric Sender ID.

Introducing New Mobile Numbers In Chile, Czech Republic, Denmark, France, Hungary, and Israel

Over the last few years, we’ve made a habit out of adding new global numbers to our phone number inventory. Today at Signal, we’re expanding on that in a big way by adding new mobile phone numbers in six new countries.

That means you now have Twilio Phone Numbers in nearly 50 countries and mobile phone numbers in 24 countries – offering you an easy way to send messages with a local feel and make a solid first impression. You can learn more about pricing and capability in the chart below.

pricingtable

Note that France* mobile numbers, per local country regulations, are restricted to person-to-person, 2-way messaging use cases such as anonymous communication. (Learn more here). That said, if you plan to send one-way, marketing or notification messages to end users in France, you can use Alphanumeric Sender ID.

Alphanumeric Sender ID in 145 countries

Alphanumeric Sender ID lets you send SMS messages with the company or brand name as the sender, instead of sending from a phone number. Using a name instead of a phone number is the norm in many countries outside of the United States. It is also a surefire way to ensure that your customers recognize you as the sender.

To use Alphanumeric Sender ID capability, set the From parameter in the Twilio SMS API as a name instead of a number. From there, your users will see your business name in their messaging inbox when you send SMS. This familiarity increases read rates and improves your brand presence.

Note that there are some key best practices to keep in mind when using Alphanumeric Sender ID, including which countries you can send to (145 countries as of today) and how to manage opt in/opt out given that Alphanumeric cannot accept incoming messages. (Learn more here). Make sure to read up on those before embarking with branded message sending.

Alphanumeric Sender ID is available today, in addition to the mobile numbers in six countries. We’ve altered our beta program such that any Twilio customer automatically has access to any beta number we launch. That means — no application or form submission is necessary to start using these numbers.  You can purchase them just like you would any other number, but these numbers will have a notation that marks them as Beta.

They are ready to go whenever you are, and will be in your account portal. Happy (global) sending!

7 New Ways to Make a Great First Impression in 145 Countries: Announcing Six New International Phone Numbers and Alphanumeric Sender ID

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


One of the most commonly asked questions we get from messaging customers is “How can I best scale my Twilio application?” It’s a complex question, because scale refers to a lot of different aspects. There’s the challenge of sending high traffic: “How do I reach large audiences via SMS?” to deliverability: “What happens if a message doesn’t go through?” to global expansion: “I’m going expand into Germany, how do I ensure my app uses a German number to deliver those messages?”. Writing additional software logic used to be the answer to all these questions. And while effective, writing software takes time to build and maintain. So today, that answer changes, and it’s a lot more simple.

Use Messaging Copilot.

Copilot, launching today in private beta, does exactly what an airplane copilot does — it makes things run smoothly. Copilot offers Twilio customers a global routing and delivery system that they can count on, without requiring ongoing attention – or engineering resources. Copilot’s power stems from its ability to automatically select the best number to send a message based on delivery goals you select.
Companies like iCracked are already counting on Copilot to power their business. “Messaging Copilot will be a huge time saver and stress-reliever for us,” says Martin Amps, CIO of iCracked Inc. “We were planning to build a lot of this routing functionality out, and now we can just flip a switch and know it will work. That’s the ideal.” But before we get into the nitty gritty of how you can leverage this new tool for your app, let’s dig into how it works.

How Does Copilot Work?

Copilot consists of two components: a number pool (a group of Twilio Phone Numbers you designate) and delivery options.

Number Pool

A number pool is a designated group of your phone numbers that you choose to deliver messages for your application. You can add existing numbers from your inventory, or you can buy new numbers from Twilio’s global inventory. Copilot will only send from the numbers you’ve added to your pool.

Delivery Options

Once your numbers are in your pool, you can click a series of checkboxes to mark your delivery preferences. These delivery options will apply to your number pool. What you see listed below (Geo-Match, Sticky Sender, Scaler, and Reroute) are the delivery features that you’ll find in your dashboard today at launch.

After your number pool and delivery preferences are selected — you’re ready to send messages. Simply insert the SID associated with the number pool and delivery options (called the Application SID) in the From parameter, and your application will intelligently route your messages. No coding or maintenance needed.

Copilot Delivery Features

There are three key delivery features ready for your use today, with another on the way before we make this product generally available. Here are the features:

Geo-Match: Create a familiar experience with local numbers in different countries

Using a number that is local, or familiar, to your end recipient is a key part of making a good first impression – and to getting your recipient to open your message. Geo-Match will automatically use the number in your number pool that matches the country of your recipient.

Sticky Sender: Enable your customers to associate your business with one number

Users are more likely to to open messages that come from phone numbers they recognize. Sticky Sender ensures that end users continue to see the same phone number every time they receive a message from you.

Scaler: Reach large audiences by leveraging many numbers to send messages

Activate Scaler to intelligently distribute your traffic across multiple numbers; this enables businesses to successfully deliver SMS & MMS to many people.

Reroute (coming soon): Automatically use standard numbers to augment short code message delivery

Reroute knows when carriers are unable to accept SMS from short codes. If enabled, Messaging Copilot will automatically default to a long code when needed.

How Do I Get Started?

If you’d like to join us in our private beta, let us know here. We’re looking forward to hearing feedback from our early Copilot users so that we can continue to refine the existing functionality and add new features you most want to see.

Here’s to a future of headache-free scaling — we can’t wait to see what you build with all the extra time on your hands.

Introducing Messaging Copilot: Your Localization and Routing Expert

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 16, 2015

Amazon’s personal assistant, Echo, will take your order now. Available to Prime members, Echo can reorder shoppers’ products, advise if they are no long available and speak confirmation codes before completing orders. Echo allows users to make purchases only if they  qualify for Prime. However, if a product doesn’t qualify for Prime or is out […]

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 14, 2015

Signal is almost upon us. That means that in just a few days we’ll be handing out hackpacks to every attendee of the conference. The hackpack contains a littleBits-powered Adafruit NeoPixel 8×8 LED Panel that can be programmed to display whatever you can fit onto its display. If you haven’t already read it, check out our recent post detailing what hardware is in the hackpack and instructions on how to build your own hacks.

Adafruit provides a set of libraries that make it easier to hack on its LED products and developers have used them to create a variety of creative hacks including Christmas tree ornaments and animated sprites. While these libraries streamline the development process a bit they don’t come with a lot of documentation, so they can be challenging to figure out at first. Even though the core concepts of using the Adafruit aren’t too difficult to grok we want to make this learning process less stressful for you so that you can get to building your own hacks once you have the hackpack.

What You’ll Need

  • Hackpack: If you want to build your own hackpack, follow this wonderful guide. While you can get everything yourself, it’s easier (and a lot more fun) to come join us at Signal. Use the promo code Swag75 for $75 off of your ticket price.
  • Arduino IDE: allows us to write code and upload it to our Arduino
  • Adafruit_GFX Library: Base library for programming Adafruit LED pixels
  • Adafruit_NeoPixel Library: This library builds on the Adafruit_GFX library to add abstractions that make it easier to change the color and brightness of multiple LEDs arranged in a strip at the same time.
  • Adafruit_NeoMatrix Library: This library builds upon Adafruit_NeoPixel to create two-dimensional displays using NeoPixels and allows us to access the pixel positions in a grid arrangement.

What We’re Building

We’re going to create a looping name tag animation that includes a Twilio logo and some scrolling text to let everyone at the conference know your Twitter handle. In the process we’ll learn how the Adafruit_GFX, Adafruit_NeoPixel and Adafruit_NeoMatrix libraries can be used to power your own creations. The animation loop will repeat the following pattern:

  1. Fade entire screen in from off to white
  2. Color wipe (which means to set each pixel sequentially) to red
  3. Create a Twilio logo by crossfading individual pixels from red to white
  4. Fill the screen to red
  5. Scroll our Twitter handle in white text on the red background
  6. Color wipe the screen back to off

When done it’ll look like this:

Setting Up the Environment

To get started on our name tag hack we’ll need to connect the littleBits Arduino module to our computer. If you are assembling the hardware yourself check out our intro post for instructions. Plug the Arduino module into your computer via USB and connect the battery power module to the Arduino. Flip the power switch to “on” and a red light will appear indicating the power is flowing to the Arduino:

hackpack5

Next, open up the Arduino IDE. Before we can do anything we need to specify which board we are using and which port it is connected to. Our littleBits Arduino module is based on the Arduino Leonardo so select Tools -> Board and pick Arduino Leonardo:

Screenshot 2015-05-05 09.41.16

Now go to Tools -> Serial Port and select the port that is identified as an Arduino Leonardo board:

Screenshot 2015-05-05 09.41.27

The next step is to install the Adafruit libraries that will help us program the LEDs. Click the following links to download each library:

Unzip each library, remove the “-master” from the name of the folder and move them to the Arduino libraries folder. Restart the Arduino IDE to load the libraries.

Jacking Into The Matrix

Now that we have the Adafruit libraries installed we can create a new sketch using File->New and import the libraries at the top of the file:

#include <Adafruit_NeoPixel.h>
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>

Next we define the pin that our NeoPixel panel is plugged into:

#define PIN 1

Next we’ll initialize our 8×8 matrix using the NeoMatrix library according to the documentation:

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(8, 8, PIN,
  NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_GRB            + NEO_KHZ800);

The first two arguments represent the width and height of the matrix and the third is the pin we defined above. The fourth argument is very important. It defines where the first pixel in the matrix is located and whether the matrix is arranged in rows or columns. As wired, the first physical pixel in the matrix (0,0) is the pixel at the top left of the panel when the panel is viewed such that the words on the front can be read.

NeoMatrix 0,0

But because you can physically orient the Adafruit display any way you want, when we initialize it we need to tell it which pixel we want to set as the logical first pixel.  We do that by adding NEO_MATRIX_TOP to NEO_MATRIX_LEFT.

The next method parameter  indicates that we want the matrix to be arranged in horizontal lines (or rows) and that each row proceeds in the same direction which is called progressive.

The final method parameter specifies the type of LEDs that are used in the matrix. Our Adafruit NeoMatrix uses LEDs wired for GRB data order with an 800 KHz datastream.

The following image shows how our matrix is set up after initializing it:

neomatrix

When our application starts up on the Arduino we will initialize the matrix and configure its pixel brightness, text color and text wrapping options:

void setup() {
  matrix.begin();
  matrix.setBrightness(30);
  matrix.setTextColor( matrix.Color(255, 255, 255) );
  matrix.setTextWrap(false);
}

The matrix is now set up and ready for us to build our name tag. Before we can do that we need to go over the basic building blocks we’ll use for the hack.

Building Blocks for NeoMatrix Programming

In order to build our name tag application we first look at which Adafruit_NeoMatrix library API’s we’ll use to control the pixels in our matrix and how adding a few abstractions over those API’s can simplify the code in our app.

The most basic operation we can perform on the matrix using the Adafruit_NeoMatrix library is setting the color of an individual pixel. To do this we call matrix.drawPixel(x, y, Adafruit_NeoMatrix::Color) passing in the x and y coordinates of the pixel as well as an Adafruit_NeoMatrix::Color value. Adafruit_NeoMatrix::Color is a wrapper around a uint16_t value that is created as follows:

// RGB values from 0-255
Color(uint8_t r, uint8_t g, uint8_t b);

Unfortunately, once created, it’s not very easy to get the RGB values back out of an Adafruit_NeoMatrix::Color, which, as you’ll see later in the post, we’ll want to do that in order to perform actions like color fades.  To solve that problem we’ll make a struct for RGB values. This will make code we write later more manageable since we will have a way to pass RGB values as a single unit and be able to both set and get the individual RGB values on it.

To add the struct click on the triangle at the end of the tab row in the Arduino IDE and select New Tab. When prompted, name the file RGB.h and add this code to it:

struct RGB {
  byte r;
  byte g;
  byte b;
};

// Define some colors we'll use frequently
RGB white = { 255, 255, 255 };
RGB red = { 255, 0, 0 };
RGB off = { 0, 0, 0 };

At the top of your sketch we’ll include the RGB.h file:

#include "RGB.h"

Now to test our struct we can set the top-left LED to red using this code:

// You can put this code in loop()
matrix.drawPixel(0, 0, matrix.Color(red.r, red.g, red.b)); 
matrix.show();

The call to matrix.show() is very important. Any changes you make by calling drawPixel(x, y, c) or other functions that manipulate pixels are only made in RAM. We need to flush these changes out to the LEDs by calling matrix.show().

Now that it’s a bit easier to manage a color we can loop through each pixel sequentially and set it to a color creating what is known as a color wipe. Let’s define a reusable function that performs a color wipe in our sketch:

// Fill the pixels one after the other with a color
void colorWipe(RGB color, uint8_t wait) {
  for(uint16_t row=0; row < 8; row++) {
    for(uint16_t column=0; column < 8; column++) {
      matrix.drawPixel(column, row, matrix.Color(color.r, color.g, color.b));
      matrix.show();
      delay(wait);
    }
  }
}

To test it out, add the following code to loop():

// Color wipe the screen with red with 50ms delay between each pixel update
colorWipe(red, 50);

Changing the color of pixels one at a time is fun, but what if we want to change them all at the same time?  The Adafruit_NeoMatrix library allows us to fill the entire matrix with a particular color or to turn all of the pixels off using the fillScreen(c) method:

// Fill the screen with white pixels
matrix.fillScreen(matrix.Color(white.r, white.g, white.b));

// Turn all pixels off
matrix.fillScreen(0);

For a little more flair what if we want to crossfade between two colors? This is not something that is built into the Adafruit libraries but it is possible with a little bit of math. What we need to do is, given values for a starting RGB color and ending RGB color, break up the transition between each into equal steps. The more steps we take to get from the starting RGB value to the ending RGB value the smoother the fade will be.

For example if we we wanted to fade the red value of an RGB color, the basic math is as follows:

new red value = starting red value + ((difference between ending red value and starting red value) * current step) / total steps

Changing all three color values within a loop and then calling the drawPixel method lets us create a reusable function that crossfades the color of an individual LED:

// Fade pixel (x, y) from startColor to endColor
void fadePixel(int x, int y, RGB startColor, RGB endColor, int steps, int wait) {
  for(int i = 0; i <= steps; i++) 
  {
     int newR = startColor.r + (endColor.r - startColor.r) * i / steps;
     int newG = startColor.g + (endColor.g - startColor.g) * i / steps;
     int newB = startColor.b + (endColor.b - startColor.b) * i / steps;
     
     matrix.drawPixel(x, y, matrix.Color(newR, newG, newB));
     matrix.show();
     delay(wait);
  }
}

If we replace the drawPixel call with a fillScreen we can crossfade the entire screen between two colors:

// Crossfade entire screen from startColor to endColor
void crossFade(RGB startColor, RGB endColor, int steps, int wait) {
  for(int i = 0; i <= steps; i++)
  {
     int newR = startColor.r + (endColor.r - startColor.r) * i / steps;
     int newG = startColor.g + (endColor.g - startColor.g) * i / steps;
     int newB = startColor.b + (endColor.b - startColor.b) * i / steps;
     
     matrix.fillScreen(matrix.Color(newR, newG, newB));
     matrix.show();
     delay(wait);
  }
}

Using the fadePixel function we created above you can use the following code to draw a Twilio logo that fades in pixel by pixel:

void drawLogo() {
  // This 8x8 array represents the LED matrix pixels. 
  // A value of 1 means we’ll fade the pixel to white
  int logo[8][8] = {  
   {0, 0, 0, 0, 0, 0, 0, 0},
   {0, 1, 1, 0, 0, 1, 1, 0},
   {0, 1, 1, 0, 0, 1, 1, 0},
   {0, 0, 0, 0, 0, 0, 0, 0},
   {0, 0, 0, 0, 0, 0, 0, 0},
   {0, 1, 1, 0, 0, 1, 1, 0},
   {0, 1, 1, 0, 0, 1, 1, 0},
   {0, 0, 0, 0, 0, 0, 0, 0}
  };
   
  for(int row = 0; row < 8; row++) {
    for(int column = 0; column < 8; column++) {
     if(logo[row][column] == 1) {
       fadePixel(column, row, red, white, 120, 0);
     }
   }
  }
}

One final thing the Adafruit_NeoMatrix library helps us with is scrolling text. A call to matrix.print will generate a pixel representation of the string passed to it. Manipulating what part of the string is being displayed on the matrix is accomplished by calling matrix.setCursor. By moving the cursor and redrawing the string over the course of a loop we can scroll text on the matrix.

Using those two methods it’s easy to create a function that scrolls text, for example my Twitter handle, from left to right across the panel:

void scrollText(String textToDisplay) {
  int x = matrix.width();
  
  // Account for 6 pixel wide characters plus a space
  int pixelsInText = textToDisplay.length() * 7;
  
  matrix.setCursor(x, 0);
  matrix.print(textToDisplay);
  matrix.show();
  
  while(x > (matrix.width() - pixelsInText)) {
    matrix.fillScreen(matrix.Color(red.r, red.g, red.b));
    matrix.setCursor(--x, 0);
    matrix.print(textToDisplay);
    matrix.show();
    delay(150);
  }
}

These building blocks are all we need to create our name tag so let’s put the hack together.

Piecing It Together

We’ll start our name tag app by adding inside of the Arduino loop() function so make sure to remove any test code you may have added earlier. First we’ll fade in from off to a full white screen followed by  a one second delay:

void loop() {
  crossFade(off, white, 50, 5);
  delay(1000);
}

Next we’ll perform a color wipe to set all of the LEDs to red sequentially followed by another one second delay:

void loop() {
  crossFade(off, white, 50, 5);
  delay(1000);

  colorWipe(red, 50);
  delay(1000);
}

With our matrix set to red we’ll now draw the Twilio logo and wait two seconds this time for dramatic effect:

void loop() {
  crossFade(off, white, 50, 5);
  delay(1000);

  colorWipe(red, 50);
  delay(1000);

  drawLogo();
  delay(2000);
}

Now we’ll fill the screen back to red and scroll our Twitter handle a few times:

void loop() {
  crossFade(off, white, 50, 5);
  delay(1000);

  colorWipe(red, 50);
  delay(1000);

  drawLogo();
  delay(2000);

  matrix.fillScreen(matrix.Color(red.r, red.g, red.b));
  matrix.show();
  String twitterHandle = "@brentschooley";
  scrollText(twitterHandle);
  scrollText(twitterHandle);
  delay(500);
}

Finally, for a flashy finish we’ll crossfade from white to red and then immediately from white to off:

void loop() {
  crossFade(off, white, 50, 5);
  delay(1000);

  colorWipe(red, 50);
  delay(1000);

  drawLogo();
  delay(2000);

  matrix.fillScreen(matrix.Color(red.r, red.g, red.b));
  matrix.show();
  String twitterHandle = "@brentschooley";
  scrollText(twitterHandle);
  scrollText(twitterHandle);
  delay(500);

  crossFade(red, white, 120, 5);
  crossFade(white, off, 120, 5);
  delay(1000);
}

Here’s what the final product looks like:

Show Me Your Hackpack

Amazing!  We just built a looping name tag for our hackpack. If you followed along and built your own hackpack name tag, I want to see it! Send me an email or a tweet with pictures or videos of your scrolling Twitter handle or other hackpack hacks and I’ll share them with the Twilio community. Or better yet, come hang out with me at Signal and I’ll help you build your own Hackpack hack whether its this simple name tag, a more complex sprite animation or even responding to incoming text messages to your Twilio phone number.

 

Light Up Your Hackpack With the Adafruit NeoMatrix Library

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Today we’re excited to announce Call Progress Events, a new feature that enables you to build advanced outbound dialing applications and gives you the ability to have granular call control. You no longer need to maintain complex application state because Call Progress Events uses webhooks to instantly notify you of what’s happening during an outbound call and alert you when it progresses through key events, such as Initiated, Ringing, Answered and Completed.

Until now we provided notifications for the major call status changes: when a call was initiated and when a call completed. But as our customers’ call center, outbound dialing and call tracking solutions scaled we saw the need for providing granular call metadata to power call analytics systems and rules-based call distribution systems.

Webhooks for Key Events

Call Progress Events are enabled by using the new

StatusCallbackEvent
TwiML parameter which will trigger a webhook to be sent on every call-state change:
initiated
,
ringing
,
answered
and
completed
. The new
StatusCallbackEvent
TwiML parameter is available in the API and for the <Number>, <Client>, and <Sip> nouns on <Dial>.

Call Progress Events Blog Post

For example, if we wanted to make a call from 866-567-1234 to 415-555-1212, and receive notifications for every event we can specify the

StatusCallbackEvent
parameter in our API request:

$ curl -XPOST https://api.twilio.com/2010-04-01/Accounts/AC5ef8732a3c49700934481addd5ce1659/Calls.json \
-d "Url=https://demo.twilio.com/docs/voice.xml" \
-d "Method=GET" \
-d "From=%2B18665671234" \
-d "To=%2B14155551212" \
-d "StatusCallback=https://www.myapp.com/events" \
-d "StatusCallbackMethod=POST" \
-d "StatusCallbackEvent=initiated" \
-d "StatusCallbackEvent=ringing" \
-d "StatusCallbackEvent=answered" \
-d "StatusCallbackEvent=completed" \
-u 'AC5ef8732a3c49700934481addd5ce1659:{AuthToken}'

 Track Calls Status for Call Analytics Systems

After enabling Call Progress Events, you can track the current status of your outbound calls instead of having to poll the API to check the status of a call and maintain complex application state. With this you could build analytics systems to understand the lifecycle of your calls and and predict the best time to call your customers.

 

Flexible Call Control for Rule-Based Distribution

You can also set rules in your application based on these events such specifying all calls to customers should only ring a maximum of 10 seconds. If customers can’t be reached in 10 seconds, you should redirect agents to talk to the next customer. To implement this, you could specify Call Progress Events webhooks to be sent on the

initiated
,
ringing
and
answered
events for your call to the customer. After you receive the
ringing
event, set a timer that either expires after 10 seconds or gets canceled when you receive the
answered
event.

Let’s say we now have Agent Alice on the line but you’ve noticed via your webhooks that the call to Customer Bob has been ringing for 10 seconds.

customer1

Your application will now redirect Agent Alice’s call to the next customer. In the parameters sent with every event webhook you will not only get the call status, you’ll also get the Call Sid and Parent Call Sid (if applicable) which are needed to redirect calls. We’ll get the Parent Call Sid to redirect Agent Alice’s call:

POST PARAMETERS
To: +14151234444
Called: +14151234444
SequenceNumber: 0
AccountSid: AC5ef8732a3c49700934481addd5ce1659
Timestamp: Tue, 12 May 2015 17:52:22 +0000
ApiVersion: 2010-04-01
ParentCallSid: CA81bd32324f804bbd23e7bb3ba40f99b4
Direction: outbound-dial
From: +18883331234
Caller: +18883331234
CallStatus: initiated
CallSid: CAe2c8fb40d516f4f5c4d6b6f0c5aa1f6e
CallbackSource: call-progress-events

And we’ll use this Call Sid in the POST to the API that redirects Agent Alice’s call leg to connect with the next customer:

$ curl -XPOST https://api.twilio.com/2010-04-01/Accounts/AC5ef8732a3c49700934481addd5ce1659/Calls/CA81bd32324f804bbd23e7bb3ba40f99b4.json \
-d "Url=https://www.myapp.com/newcall" \
-d "Method=POST" \
-u 'AC5ef8732a3c49700934481addd5ce1659:{AuthToken}'

The next customer picks up the phone quickly and Agent Alice is able to help them out!

customer2

This is just one use case for flexible call leg control but the possibilities are endless. You can control any call leg and redirect it to new TwiML with just one POST to the API.

Pricing

Call Progress Events is pay-as-you-go, so you’re only charged for what you use, regardless of how much that fluctuates. Pricing is just $0.0001 per event, which is a penny per 100 events.

We think Call Progress Events will help you build applications that efficiently connect your customers and agents and let you focus on your business rather than maintaining application state. Learn more about Call Progress Events in our API and TwiML docs for <Number>, <Client>, and <Sip>. We can’t wait to see what you build.

Introducing Call Progress Events – Flexibly Track and Control your Outbound Calls

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 13, 2015

A mangled motorcycle gave the Greytruck CEO, Eric Xavier the opening he needed to dive into entrepreneurship. One of Eric’s riding buddies missed out on a ride when he forgot to take a lock off the wheel of his motorcycle before riding. When he took off on the bike, he was launched off it, injuring himself and mangling the bike. Eric and his brother saw a problem and founded a company to solve it, RoadLok. They sold locks built on to the brakes of the motorcycle, eliminating the need for a freestanding lock, and eliminating the risk of forgetting to take your lock off. After selling the company, Eric switched his focus from solving mechanical problems, to tackling technical ones. He saw another opportunity to jump on: third party logistics. With Twilio’s API in his toolbelt and a wealth of entrepreneurial experience behind him, he founded Greytruck.

Greytruck is a third party logistics company that helps their clients do anything from alerting them via SMS when their warehouse is running low on a certain product, to giving fire stations information on their response time. SMS is a critical component of the several apps they offer clients. When clients need data fast, Greytruck relies on Twilio SMS to send them that information.

Greytruck has an army little robots they call “robits” that give their clients insight to critical data. The robits monitor databases and trigger and SMS based on a rule. For example, one of Greytruck’s clients is a fire chief in Washington who relies on Greytruck to deliver him stats on the fire house’s average response time, the number of fires responded to, how many calls they’ve gotten that week, etc. Using Greytruck, the chief gets a text via Twilio SMS containing all of that data, scraped by Greytruck’s robits.

“It blows my mind because [Twilio] is such an easy integration. When you’re talking to someone who doesn’t work with a database, but relies on the data and you can tell them to send a text to get an answer from a database, it’s like anthropomorphizing a database that they previously didn’t have insight into,” says Eric.

Eric took anthropomorphizing databases one step further for the fire chief in Washington. When Eric looked at Greytruck’s Twilio logs, he saw that the fire chief typically responded to each text he got from Greytruck with a “thanks” or “great.” Eric built what he refers to as a “crude version of Siri” to respond back to the fire chief’s reply with texts like “No problem!” or “You’re welcome.”

A simple text via Twilio gives Greytruck’s users insight and understanding of a once intangible resource – their database.  With Twilio SMS, Eric is hoping to show more of Greytruck’s users how to make the most out of their data, and even have a conversation with it.

Greytruck Makes Databases Friendly, Instantly Accessible Via Twilio SMS

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 12, 2015

In the first part of our Choose Your Own Adventure Presentations Wizard Mode tutorial we set up the necessary code for separating authorized wizards from non-wizards. However, logging in and out of an application isn’t very magical. It’s time to write write some new spells in Wizards Only mode to allow us to deftly manipulate our presentations.

Even Wizards Need Web Forms

The Wizards Only mode interface we’re creating throughout this post will grant us the ability to see which presentations are available as well as create and edit metadata, such as whether a presentation is visible or invisible to non-wizards.

image05
Time to get coding and create for our Wizards Only mode.

What We’ll Need

If you followed along with part 1 of this series then you’ve already set up all of the dependencies and the database connections we’ll need for this part of the tutorial.

If you haven’t read part 1 yet, that’s okay. Here’s a quick recap of what we used to build the application so far.

  • PostgreSQL for persistent storage. We used PostgreSQL in part 1 and will expand our usage in this post.
  • The psycopg2 Python driver to connect to PostgreSQL. Psycopg2 will continue to drive the connect between our web application and the database.
  • Flask-login for authentication. In this post we’ll use Flask-login to protect Wizard Only pages.
  • Flask-WTF for web form handling. We’re creating a bunch of new pages in this post so we’ll use Flask-WTF extensively in the following sections.

You can get caught up with us by working through the code in part 1 or just clone the CYOA Presentations repository tutorial-step-4 tag stage. Here are the commands to execute if you’re going for the latter option

git clone git@github.com:makaimc/choose-your-own-adventure-presentations
cd choose-your-own-adventure-presentations
git checkout -b tutorial tags/tutorial-step-4

If you need help setting up your virtualenv and environment variables for the project, there are detailed steps and explanations for each variable shown in part 1 of this tutorial. Note that if you make a typo somewhere along the way in this post, you can compare your version with the tutorial-step-5 tag.

A New Wizards’ Landing Page

The landing page we created in part 1 is just a stub that’s not worthy of wizards who access our application.

image00
To make the Wizards Only mode functional we’ll build a new landing page that lists every presentation we’ve created through this user interface.

Start by opening cyoa/views.py and delete the placeholder wizard_landing function.

@app.route('/wizard/presentations/')
@login_required
def wizard_landing():
    return render_template('wizard/presentations.html')

Next, replace what we just deleted in views.py by creating a new file named cyoa/wizard_views.py and populating it with the following code.

from flask import render_template, redirect, url_for
from flask.ext.login import login_required

from . import app, db

@app.route('/wizard/presentations/')
@login_required
def wizard_list_presentations():
    presentations = []
    return render_template('wizard/presentations.html',
                           presentations=presentations)

@app.route('/wizard/presentation/', methods=['GET', 'POST'])
@login_required
def wizard_new_presentation():
    pass

@app.route('/wizard/presentation/<int:id>/', methods=['GET', 'POST'])
@login_required
def wizard_edit_presentation(id):
    pass

@app.route('/wizard/presentation/<int:pres_id>/decisions/')
@login_required
def wizard_list_presentation_decisions(pres_id):
    pass

@app.route('/wizard/presentation/<int:pres_id>/decision/',
           methods=['GET', 'POST'])
@login_required
def wizard_new_decision(pres_id):
    pass

@app.route('/wizard/presentation/<int:presentation_id>/decision/'
           '<int:decision_id>/', methods=['GET', 'POST'])
@login_required
def wizard_edit_decision(presentation_id, decision_id):
	pass

@app.route('/wizard/presentation/<int:pres_id>/decision/'
           '<int:decision_id>/delete/')
@login_required
def wizard_delete_decision(pres_id, decision_id):
    pass

With the exception of the wizard_list_presentations function, every function above with the pass keyword in its body is just a stub for now. We’ll flesh out those functions with code throughout the remainder of this post and also later in part 3 of the tutorial. For now we need them stubbed because otherwise the url_for function in our redirects and templates will not be able to look up the appropriate URL paths.

Go back to the cyoa/views.py file. Edit the return redirect line shown below so it calls the new wizard_list_presentations function instead of wizard_landing.

@app.route('/wizard/', methods=['GET', 'POST'])
def sign_in():
    form = LoginForm()
    if form.validate_on_submit():
        wizard = Wizard.query.filter_by(wizard_name=
                                        form.wizard_name.data).first()
        if wizard is not None and wizard.verify_password(form.password.data):
            login_user(wizard)
            return redirect(url_for('wizard_list_presentations'))
    return render_template('wizard/sign_in.html', form=form, no_nav=True)

Our Flask application needs to access the new wizard_views.py functions. Add this single line to the end of the cyoa/__init__.py file to make that happen:

from . import wizard_views

The templates for our new landing page don’t exist yet, so let’s create them now. Create a new file cyoa/templates/nav.html and insert the HTML template markup below.

<div class="container">
  <div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="{{ url_for('wizard_list_presentations') }}">Wizards Only</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li><a href="{{ url_for('wizard_list_presentations') }}">Presentations</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="{{ url_for('sign_out') }}">Sign out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

The above template file is a navigation bar that will be included on logged in Wizard Only pages. You’ll see the template tag {% include "nav.html" %} in every template that needs to display the navigation bar at the top of the webpage.

Next up we need to modify the temporary markup in the landing page template file so it displays the presentations we will create through the Wizards Only user interface. Replace the temporary code found in cyoa/templates/wizard/presentations.html with the following HTML template markup.

{% extends "base.html" %}

{% block nav %}
    {% include "nav.html" %}
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-10">
            <h1>Presentations</h1>
            {% if not presentations %}
                No presentations found. 
                <a href="{{ url_for('wizard_new_presentation') }}">Create your first one</a>.
            {% else %}
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Is Visible?</th>
                            <th>Web browser voting?</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for p in presentations %}
                        <tr>
                            <td><a href="{{ url_for('wizard_edit_presentation', id=p.id) }}">{{ p.name }}</a></td>
                            <td>{{ p.is_visible }}</td>
                            <td><a href="{{ url_for('wizard_list_presentation_decisions', pres_id=p.id) }}">Manage choices</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
                <div class="btn-top-margin">
                    <a href="{{ url_for('wizard_new_presentation') }}"
                       class="btn btn-primary">New Presentation</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

In the above markup we check the presentations object passed into the template to determine if one or more presentations exist. If not, Flask renders the template with a “No presentations found.” message and a link to create the first presentation. If one or more presentation objects do exist, a table is rendered with the name of the presentation, whether it’s visible to non-wizard users and whether or not we’ve enabled web browser voting (which we will code in part 3).

Time to test out the current state of our application to make sure it’s working properly. Make sure your virtualenv is activated and environment variables are set as we established in part 1 of the tutorial. From the base directory of our project, start the dev server with the python manage.py runserver command.

(cyoa)$ python manage.py runserver
 * Running on http://0.0.0.0:5001/
 * Restarting with stat

If your development server does not start up properly, make sure you’ve executed pip install -r requirements.txt to have all the dependencies the server requires. Occasionally there are issues installing the required gevent library the first time the dependencies are obtained via pip.

Open http://localhost:5001/wizard/ in your web browser. You should see the unchanged Wizards Only sign in page. Log in with your existing Wizard credentials created in part 1. The suggested credentials for part 1 were “gandalf” for the wizard name and “thegrey” for the password.

When you get into the application, the presentations.html template combined with our existing base.html and new nav.html will create a new landing screen that looks like this:

image03

However, we haven’t written any code to power the “Create your first one” link and “New Presentation” buttons yet. If we click on the “New Presentation” button, we’ll get a ValueError like we see in the screenshot below because that view does not return a response.

image07
Let’s handle creating and editing presentations next.

Creating and Modifying Presentation Metadata

We built a page to display all presentations to logged in Wizards, but there’s currently no way to add or edit presentation metadata. Why are we using the term “metadata” instead of just saying “presentations”? This Wizards Only user interface is only used to create and edit the presentations’ information in the application, not the presentation files themselves. In other words, we’re modifying the presentation metadata, not the HTML markup within the presentations. As we’ll see later in the post, our application will use the metadata to look in the cyoa/templates/presentations folder for a filename associated with a visible presentation.

Open up cyoa/models.py and append the following code at the end of the file.

class Presentation(db.Model):
    """
        Contains data regarding a single presentation.
    """
    __tablename__ = 'presentations'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), unique=True)
    slug = db.Column(db.String(128), unique=True)
    filename = db.Column(db.String(256))
    is_visible = db.Column(db.Boolean, default=False)
    
    def __repr__(self):
        return '' % self.name

The above Presentation class is a SQLAlchemy database model. Just like with our Wizard model, this model maps a Python object to the database table presentations and allows our application to create, read, update and delete rows in the database for that table.

We also need a new form to handle the creating and editing of presentation metadata. We’ll store this form in the cyoa/forms.py file.

class PresentationForm(Form):
    name = StringField('Presentation name', validators=[Required(),
                                                        Length(1, 60)])
    filename = StringField('File name', validators=[Required(),
                                                    Length(1, 255)])
    slug = StringField('URL slug', validators=[Required(),
                                               Length(1, 255)])
    is_visible = BooleanField()

Now we need to tie together our new Presentation database model and PresentationForm form. In the cyoa/wizard_views.py, remove the pass keyword from the listed functions and replace it with the highlighted code. What we’re adding below are two imports for the Presentation and PresentationFrom classes we just wrote. Now that we have presentations in the database, we can query for existing presentations in the wizard_list_presentations function. In the wizard_new_presentation and wizard_edit_presentation functions, we’re using the PresentationForm class to create and modify Presentation objects through the application’s web forms.

from . import app, db
from .models import Presentation
from .forms import PresentationForm 

@app.route('/wizard/presentations/')
@login_required
def wizard_list_presentations():
    presentations = Presentation.query.all()
    return render_template('wizard/presentations.html',
                           presentations=presentations)

@app.route('/wizard/presentation/', methods=['GET', 'POST'])
@login_required
def wizard_new_presentation():
    form = PresentationForm()
    if form.validate_on_submit():
        presentation = Presentation()
        form.populate_obj(presentation)
        db.session.add(presentation)
        db.session.commit()
        return redirect(url_for('wizard_list_presentations'))
    return render_template('wizard/presentation.html', form=form, is_new=True)

@app.route('/wizard/presentation//', methods=['GET', 'POST'])
@login_required
def wizard_edit_presentation(id):
    presentation = Presentation.query.get_or_404(id)
    form = PresentationForm(obj=presentation)
    if form.validate_on_submit():
        form.populate_obj(presentation)
        db.session.merge(presentation)
        db.session.commit()
        db.session.refresh(presentation)
    return render_template('wizard/presentation.html', form=form,
                           presentation=presentation)

In the above code, make sure you’ve changed the first line within the wizard_list_presentations function from presentations = [] to presentations = Presentation.query.all(). That modification to the code allows us to pass in every presentation found in the database into the render_template function instead of an empty list.

Create a new file named cyoa/templates/wizard/presentation.html. There’s already a presentations.html with an ‘s’ at the end, but this filename refers to a singular presentation. Add the following HTML template within the new file:

{% extends "base.html" %}

{% block nav %}
    {% include "nav.html" %}
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6">
            {% from "partials/_formhelpers.html" import render_field %}
            {% if is_new %}
            <form action="{{ url_for('wizard_new_presentation') }}" 
                  method="post">
            {% else %} 
            <form action="{{ url_for('wizard_edit_presentation', id=presentation.id) }}" method="post">
            {% endif %}
                <div>
                    {{ form.csrf_token }}
                    {{ render_field(form.name) }}
                    {{ render_field(form.filename) }}
                    {{ render_field(form.slug) }}
                    <dt class="admin-field">
                        {{ form.is_visible.label }}
                        {{ form.is_visible }}
                    </dt>
                </div>
                <div>
                <input type="submit" class="btn btn-success btn-top-margin" 
                       value="Save Presentation"></input>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

Let’s give our upgraded code another spin. First, since we created a new database table we need to sync our models.py code with the database tables. Run the following manage.py command at the command line from within the project’s base directory.

(cyoa)$ python manage.py syncdb

Now the tables in PostgreSQL match our updated models.py code. Bring up the application with the runserver command.

(cyoa)$ python manage.py runserver

Point your web browser to http://localhost:5001/wizard/. You should again see the unchanged Wizards Only sign in page.

image06

Use your wizard credentials to sign in. At the presentations landing screen after signing in, click the “New Presentation” button.

image01

Create a presentation for the default template that’s included with the project. Enter “Choose Your Own Adventure Default Template” as the presentation name, “cyoa.html” for the file name, “cyoa” for the URL slug and check the “Is Visible” box. Press the “Save Presentation” button and we’ll be taken back to the presentations list screen where our new presentation is listed.

image02

We can edit existing presentations by clicking on the links within the Name column. Now we’ll use this presentation information to display visible presentations to users not logged into the application.

Listing Available Presentations

There have been a slew of code changes in this blog post, but let’s get one more in before we wrap up that’ll be useful to presentation viewers. We’re going to create a page that lists all presentations that are visible to non-wizard users so you can send out a URL to anyone that wants to bring up the slides on their own.

In addition, our presentation retrieval function will look for presentation files only in the cyoa/templates/presentations/ folder. The presentations can still be accessed from the same URL as before, but it’s easier to remember where presentation files are located when there’s a single folder for them.

Start by deleting the following code in cyoa/views.py as we will not need it any longer.

@app.route('//', methods=['GET'])
def landing(presentation_name):
    try:
        return render_template(presentation_name + '.html')
    except TemplateNotFound:
        abort(404)

In its place, insert the following code.

@app.route('/', methods=['GET'])
def list_public_presentations():
    presentations = Presentation.query.filter_by(is_visible=True)
    return render_template('list_presentations.html',
                           presentations=presentations)

@app.route('//', methods=['GET'])
def presentation(slug):
    presentation = Presentation.query.filter_by(is_visible=True,
                                                slug=slug).first()
    if presentation:
        return render_template('/presentations/' + presentation.filename)
    abort(404)

The first function we wrote, list_public_presentations, performs a PostgreSQL database query through SQLAlchemy for all presentations with the is_visible field set to True then passes the results to the template renderer. The second function, presentation, only renders the presentation if the URL slug matches an existing presentation and for that presentation the is_visible field is True. Otherwise an HTTP 404 status code is returned.

One more step in cyoa/views.py. Add the following line as a new import to the top of the file so that our new code can use the Presentation database model for the queries in the functions we just wrote:

from .models import Wizard

from . import app, redis_db, socketio, login_manager
from .models import Presentation

client = TwilioRestClient()

Finally create a new list template for the presentations. Call this file cyoa/templates/list_presentations.html.

{% extends "base.html" %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-10">
            <h1>Available presentations</h1>
                {% for p in presentations %}
                    <p><a href="{{ url_for('presentation', slug=p.slug) }}">{{ p.name }}</a></p>
                {% else %}
                    No public presentations found. 
                {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

We need to move our cyoa.html default template into the cyoa/templates/presentations/ folder because our list_public_presentations function now looks in that folder instead of the cyoa/templates/ folder. Create a new directory within cyoa/templates called presentations:

mkdir cyoa/templates/presentations/

Now go to the cyoa/templates/ directory and run the following move command.

mv cyoa.html presentations/

Be sure to store your new presentations within the cyoa/templates/presentations/ folder from now on.

Check out the simple listing of presentations available to the audience. Go to http://localhost:5001 and you’ll see the list of visible presentations.

image04

All Prepared for Part Three!

We now have a working Wizards Only set of screens for managing our presentations. If you want all the code to this point in the tutorial series, you can grab it from the tutorial-step-5 on GitHub.

There’s a big elephant in the room though with our current application. Each presentation has a checkbox to enable websockets-based voting to complement SMS voting. However, we haven’t coded the ability for presentation watchers to vote via web browsers just yet. In part three of this series, we’ll conclude by adding that new voting functionality so that our Choose Your Own Adventure Presentations project is complete.

Let me know what new Choose Your Own Adventure presentation stories you come up with or open a pull request to improve the code base. Contact me via:

  • Email: makai@twilio.com
  • GitHub: Follow makaimc for repository updates
  • Twitter: @mattmakai

Choose Your Own Adventure Presentations: Wizard Mode Part 2 of 3

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


There’s a good reason guide dogs have “don’t pet me, I’m working” printed on their harnesses. They may be adorable, but they’re working dogs first and foremost. Guide dogs offer blind men and women tremendously valuable services from navigation, to security, to companionship. The National Association of Guide Dog Users, a division of the National Federation of the Blind, gives blind people the access, training and information they need to be successful with their guide dog.

The National Association of Guide Dog Users (NAGDU) uses Twilio to power one of the most powerful resources they offer their members – their hotline. It provides members with instant access to critical information on the American with Disabilities Act and their rights to take their guide dogs on planes, in restaurants etc. If they need any more help, the NAGDU has a team of volunteers ready and waiting to answer any questions members might have.

Getting Back Flexibility: NAGDU Switches To Twilio

NAGDU president Marion Gwizdala started the hotline to answer common questions members had when getting accustomed to their guide dog. But their first service provider it hard for Marion to keep that hotline up and running. It was costly and brittle. Updating the hotline’s critical pre-recorded messages and announcements was a hassle. Marion had to contact his service provider, give them the audio, pay them to change the audio prompts and then wait weeks for the change to go ship. Worse, the audio quality of the hotline was less than stellar, a big sticking point for NAGDU members.

Marion contacted developer and NAGDU member Aaron Cannon to see if he had any ideas on how they could improve the hotline, and get rid of their current provide. Aaron already had a plan. He told Marion about Twilio, the pricing, and the flexibility. Marion still was skeptical. He asked Aaron “Are you sure they’re not going to change their pricing structure in six months?” Aaron was sure, and quickly got to work switching there hotline over to Twilio and joined Twilio.org

Tapping Untapped Potential: Revamping Audio Quality and Hotline Features

“My concern was not only the price but rather the flexibility, of lack thereof, to change the messages and update the messages and to do a lot more with the hotline. I saw some untapped potential,” said Cannon. “We got it all done very quickly. We’re very pleased,” he added.

When NAGDU switched to Twilio, they got to work on three primary areas of concern they had with their previous provider: audio fidelity, flexibility, and call recording.

NAGDU re-recorded all their voice prompts in a studio, confident that Twilio would deliver the level of audio fidelity their members expected. They also built a feature for NAGDU hotline volunteers that allows them to login to the hotline remotely, from their personal phone, and set hours in which they will accept hotline calls forwarded to their personal phone. However, the most valuable asset NAGDU added is call recording.

Using Twilio <Record> To Track Down Illegal Denial Of Service

When NAGDU members have an issue with denial of service in a restaurant because they have a guide dog with them, that’s not only a problem, it’s illegal. NAGDU President Marion Gwizdala heard stories time and time again about restaurants denying service, and later claiming the denial never happened.

Using Twilio, NAGDU gives members the option to call the hotline and be transferred to a volunteer while the call is being recorded. The NAGDU member who is having the issue can easily hand the phone to the restaurant owner, who will be on record with the volunteer. With this record, the NAGDU is well equipped with the evidence they need to get restaurants to respect the rights and of blind people.

NAGDU is currently working on iOS apps that integrate with the hotline as well as assembling a record of state specific regulations for guide dogs. Marion is confident they’ll be able to move fast now that they’re using Twilio.

The National Association Of Guide Dog Users Chooses Twilio To Power Their Hotline, Track Down Illegal Denial Of Service Issues

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


May 11, 2015

The Internet has been all abuzz with the news we announced last week. Here’s a comprehensive list of the coverage so far:

(Last updated 5/12/2015 5:30pm EST)

Cisco Snags Tropo Communications Development Platform
TechCrunch – ‎May 7, 2015‎

“When you think of Cisco, it’s easy to pigeon-hole them as a networking equipment company, but Cisco also has a communications and collaboration side that includes WebEx. Today, it announced its intent to buy Tropo, a Twilio-like communications platform” …

Cisco buys Tropo, eyes collaboration platform as a service
ZDNet – ‎May 7, 2015‎

“Cisco on Thursday said it will acquire Tropo, a company that provides a cloud application programming interface platform. The acquisition of privately-held Tropo gives Cisco a key component to offer what the networking giant calls a collaboration” …

Realtime communications startup Tropo acquired by networking giant Cisco
NewEurope – May 7, 2015

“Networking giant Cisco has announced the acquisition of realtime communications startup Tropo, which previously made headlines as providing the basis for collaboration platform Slack.” …

Cisco to Snap Up Tropo
Multichannel News – May 7, 2015‎

“Helping people connect, engage and innovate on any device, Cisco and Tropo will provide a collaboration platform-as-a-service, which allows our customers and developers to create and sell new communications services with minimal development effort,” …

Cisco buys Tropo to bolster collaboration portfolio
TechRadar – ‎May 8, 2015‎

“Cisco has announced that it will acquire Tropo, a relatively unknown company which specializes in Cloud APIs for voice and text applications. The deal will allow the networking giant to offer communication features without the need to buy and install its” …

Cisco snaps up cloud API platform firm Tropo; eyes CPaaS
Firstpost – ‎May 8, 2015‎

“Cisco has announced its intent to acquire Tropo, a privately-held company that provides cloud API platform. The acquisition will allow Cisco to provide a “collaboration platform-as-a-service” (CPaaS) — which will allow customers and developers to create and” …

Cisco bolsters its developer ecosystem with Tropo cloud buy
V3.co.uk – ‎May 8, 2015‎

“Cisco has revealed plans to acquire Tropo, a cloud platform provider that gives developers an easy way to embed communications into applications. The deal will give Cisco access to a platform with over 200,000 developers, expanding the reach of the firm’s” …

ciscotropoCisco Systems, Inc. (CSCO) To Acquire Tropo Communications Platform
Bidness ETC – ‎May 8, 2015‎

“Cisco Systems, Inc. (NASDAQ:CSCO) announced plans to acquire communications development platform Tropo on May 7, according to TechCrunch. Tropo is similar to cloud communications company Twilio, “a communications platform for adding telephony”, …

Cisco acquires cloud comms platform provider Tropo
SiliconANGLE (blog) – ‎May 7, 2015‎

“Founded in 2009, Tropo offers a cloud based API platform that makes it simple to add phone and SMS applications into existing website and applications. Although smaller than its main competitor Twilio Inc., the platform is said to have over 200,000″ …

Cisco Buys Tropo for Cloud-based App Embedded Communications
The VAR Guy – ‎May 7, 2015‎

“Terms of the deal, which is expected to close in Cisco’s FQ4 2015, were not disclosed. Once the transaction is finalized, Tropo’s team will be folded into Cisco’s Collaboration Technology Group headed by Rowan Trollope, Cisco senior vice president and” …

Cisco Set to Acquire Tropo for Cloud API Tech
EnterpriseNetworkingPlanet – ‎May 7, 2015‎

“Cisco today announced its intention to acquire privately-held IT vendor Tropo. Financial terms of the deal are not being publicly disclosed. Cisco expects the deal to close in the fourth quarter of fiscal year 2015.”

Trollope on Tropo: ‘A Platform Play’
No Jitter – ‎May 7, 2015‎

“Cisco announced this morning its intent to acquire cloud API platform provider Tropo, which is seen as a strategic move to boost development of UC-based, communications-enabled applications. Zeus Kerravala, founder and principal analyst with ZK” …

Cisco to Acquire Tropo
I4U News – ‎May 8, 2015‎

“Tropo is a communications company and Cisco is looking to use its messaging and telephony services in other apps. Now we all know that these days APIs are making things easier for a developer so that they could add a range of functionality to apps very” …

Cisco Buys Real Time Communication API Specialist Tropo
PCC Mobile Broadband – ‎May 8, 2015‎

“Cisco, Thursday announced the company will acquire Tropo, a privately held company providing a cloud API platform that makes it simple for customers and developers to embed real-time communications within their applications. The Tropo team will join the” …

Cisco to CPaaS Providers: Game On!
No Jitter – ‎May 7, 2015‎

“Cisco announced this morning its intent to acquire cloud API platform provider Tropo. Together, Cisco and Tropo will provide a collaboration platform-as-a-service (CPaaS) aimed at letting enterprise and partner developers communications-enable” …

Cisco wants to help you add voice calling, SMS to your apps
FierceCIO – ‎May 8, 2015‎

“Cisco announced today that it plans to buy Tropo, the Twilio competitor that makes it easy to drop voice calling and SMS functionality into apps. Cisco said the combined companies will deliver a “collaboration platform as a service.” The acquisition could be” …

Cisco to Acquire Tropo for Phone/SMS APIs
Converge Network Digest (blog) – ‎May 7, 2015‎

“Cisco and Tropo will provide a collaboration platform-as-a-service, which allows customers and developers to create and sell new communications services with minimal development effort. Tropo makes it simple to build phone and SMS applications.”

Cisco to buy Cloud API specialist
Computer Business Review – ‎May 8, 2015‎

“Hilton Romanski, SVP, business development, Cisco, wrote on the company blog: “Tropo’s robust APIs and its 200K+-strong developer network gives Cisco the ability to extend the power of its collaboration technologies to third-party applications and” …

Wow! Cisco To Acquire Tropo’s Communications Application Platform
Disruptive Telephony – May 7, 2015
“Over the years since leaving Voxeo, I’ve written about Tropo from time to time and continued to watch its progress. I’ve continued to be very impressed by what they’ve done over the years. They’ve truly made it easy for people to create powerful applications using simple programming languages…”

Cisco just entered the WebRTC PaaS Game by Acquiring Tropo
Bloggeek.me – May 8,2015
“Why Tropo and no one else?  If Cisco is serious about developers and APIs, the it should have acquired one of the communication API platform vendors instead of building its own…”

 

The post Cisco to Acquire Tropo – Press Coverage appeared first on Tropo.

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Appery.io lets you build powerful mobile apps in no time using intuitive visual tools. Using Twilio, you can easily integrate the Twilio API with Appery.io’s cloud-based rapid development environment with integrated back-end services and get sending SMS fast.

In this tutorial, Appery.io CTO Max Katz shows you how to build a mobile app from the ground up that uses the Twilio SMS API to send texts.

What you need to get started

Before you start, you’ll need Twilio and Appery.io accounts. Use the links below to register for free accounts.

What we’re going to build

You are going to build a mobile web and hybrid mobile app that allows you to send SMS messages using the Twilio API. The app is going to have one page from which you can send the SMS message and will look like this:

appery1

 

Building the SMS app

Building an app in Appery.io is no different than using any other tool. You are going to create a new app, design the UI, connect to the Twilio API, test and then deploy the app.

Creating A New App

Let’s start by creating a new app.

  1. Once you are inside the platform, click the Create new app button. For app name, enter: SmsApp and click the Create button.
  2. From the Project view, click on Pages > startSreen. The device screen will open. The page should look like this:

Appery2

You just created a brand new mobile app. That was easy, right?

Next we are going to build the app UI.

Creating app UI

With Appery.io visual editor, building the app UI is fast as well.

  1. Click the header, and in Properties view, change the Text property to: App
  2. From the Palette, drag and drop the Input component onto the device screen. This is where the user will enter the telephone number to which the the SMS message will be sent. Let’s make a few other updates to this field.
    1. In Properties view, delete the value in Text property and for Placeholder enter: Telephone.
    2. For Type, select tel value. When running the app on a mobile device, you will get a numeric keyboard for entering the telephone.
  3. Next add the Textarea component below the Text property. This input will be used to enter the actual message.
    1. Delete the value from Text property and instead set Placeholder to: Message.
  4. We need one more component, and that’s the Button. Drag and drop the Button component and position it below the Textarea.
  5. Change the Text property to Send Message. Your page should look like this:

Appery3

That was fast, right? You are now ready to test the UI.

Testing the UI

Click the Test button in the toolbar to launch the app in the browser.

You can also quickly test the app on your device. Go back to the Test menu and click the down arrow to see the options. Check the Public option. You can scan the QR code shown in the Test window or the same QR code is available from the browser test page.

Adding new UI theme

The default (jQuery Mobile) theme has a number of swatches you can select. Simply select the page name in breadcrumbs and select a new Swatch property value.

It is also very easy to add a new theme to your app. Let’s add a theme that’s based on Google’s Material Design.

  1. From Create New select From plug-in.
  2. In Mobile category, check Material Design UI Theme.
  3. Click Import selected plug-ins.
  4. You are going to be prompted: “Would you like to set the plug-in page as the start page for the app?” Keep the default value of: keep current and click Apply settings
  5. Now that the Theme plug-in was added to the app, you need to set it as the active theme. Go to Open Project > App settings > General.
  6. For Theme, set material-design. You can also set a Swatch but you can also do this directly from the page. For example, setting the Swatch to A, your page should look like this:

appery4

You can also test the again in the browser to see the new theme.

Now that you have the app UI, the next step is to connect to the Twilio REST API.

Using REST APIs in Appery.io

Using any REST API service in Appery.io app involves the following general steps:

  • Defining the REST API service
    • Defining request parameters
    • Defining response parameters
  • Testing the service
  • Adding the service to a page
  • Binding the service to the page

Connecting to the Twilio Message API

Let’s start connecting to Twilio. The information you will need for the service is available here: https://www.twilio.com/user/account/developer-tools/api-explorer/message-create. The curl command section looks like this:

appery5

  1. Select Create new > Service.
  2. For Name enter: SendSms.
  3. Keep the REST type and click Create Service. The service will be created and the service editor will open.
  4. For URL enter: https://api.twilio.com/2010-04-01/Accounts/<AccountSid>/Messages.json
  5. For Method select POST.
  6. For Request Content Type select x-www-form-urlencoded.
  7. You also need to create and use a proxy. Click New Channel and for name enter: TwilioProxy. Click Create to create the proxy.
  8. You also need to configure the proxy, go to https://appery.io/proxy/ and click open for the proxy that was just created.
  9. In the proxy settings, check Use old proxy implementation (slower). At a later step we will show you how to switch to using the new implementation.
  10. There is just one more thing you need to do and that’s add the AccountSid and access token to the URL.
    1. Looking at the curl command, copy the two numbers after -u option. You might need to click to show the Auth Token, see the note above.
    2. Go back to the Settings tab and copy the value right between https:// and api.twilio.com/ It should look like this: https://AccountSid:AuthToken@api.twilio.com/2010-04-01/Accounts/AC3526fbeedXXXXXX1ffe481b89e0fbcc7/Messages.json
    3. Then also add the sign @ between the AuthToken and api.twilio.com (as shown above)
    4. See a note on security at end of this section.
  11. Go back to the App Builder and open Request tab.
  12. Define the following three parameters:
    1. To
    2. From
    3. Body
  13. The From is your Twilio number. Go back to https://www.twilio.com/user/account/developer-tools/api-explorer/message-create and find your Twilio number in the curl command then set it as the default value.

You are ready to test the service

A quick note security: It’s not very secure to keep the AccountSid and AuthToken in the client and both values can be easily accessed. At a later step we will move them to the server so they are not available in the app (client). For now, this simplifies testing.

Testing the service and creating the response

With the URL and request parameters defined you can now test the service.

  1. Go to the Test tab.
  2. Enter a telephone number for the To value. If you have the Twilio trial plan you will only be able to send the message to your Twilio verified number.
  3. Enter any message in Body.
  4. The From value should already be set to your Twilio number.
  5. Click the Test button to test the service. You should see a response from Twilio in JSON format:
    appery6With the service tested, you can automatically create the service response from the JSON returned.
  1. Click Import as Response.
  2. Go to Response to see the response that was automatically generated.

We got a working service that talks to Twilio. Next we are going to add the service to the page.

Adding and binding the service to the page

  1. Open startScreen and click the Data tab (on the left side).
  2. For Add datasource, select Service > SendSms, click Add.
  3. Rename the instance name from restservice1 to send_sms:

appery7

  1. Now you need to pass data from the page to the service. That’s done in Before send event (or input mapping). Click Mapping to open the mapping editor.
  2. Click Expand all on both sides. The left side is the page and the right side is the service.
  3. Using drag and drop create the following mappings:appery8
    You are taking the telephone value and the message value and mapping them to the service. The From value is set to your Twilio number by default.
  4. Click Save and return to save the mapping.

The Twilio service returns a lot of data when the message is sent, but we don’t need it at this point so we are not going to map anything from the service back to the page. If you had to map something you would do it with a Success event.

  1. Switch back to the Design tab. The last step is to invoke the service.
  2. Select the button and click the Events tab.
  3. For Action, select Invoke service > send_sms and click Save.

You are done with the app. It’s time to test again.

Testing the Completed App

Click the Test button from the toolbar again to launch the app in the browser. Enter a telephone number (if you have the Twilio trial plan you should use the Twilio verified number), enter a message, and then click the send button.

appery9

Building a PhoneGap for iOS, Android or Windows Phone

It is very simple to build and test the app in the browser. It is just as simple to package the app as PhoneGap which will allow you to publish the app to the app store and install it on the device.

To export the app, just click the Export option and select the platform:

appery10

Adding security to your app

One more thing you need to do is add an extra layer of security to the app. You want to hide the Twilio AccountSid and Auth Token values from the client. If these values are stored in the client, someone could gain access to them. You want to keep on the server.

An Appery.io app has the option to keep sensitive data in the database. Let’s see how to do that.

  1. From the App Builder click Database from the menu
  2. To create a new database click Create new database button. For name enter: TwilioDB and click Create. A new database will be created and opened
  3. Next you need to create a new collection. Click Create new collection. For collection name enter Secrets.
  4. Next you need to create two columns. To create a new column click +Col.
    1. Name the first column: key
    2. Name the second column: value
  5. Next you need to insert the AccountSid into the database. Click +Row. For key column enter: AccountSid_db and for value the actual AccountSid value.
  6. Same steps for inserting the Auth Token into the database. Click +Row. For key column enter: AuthToken_db and for value the actual AuthToken value. The database should look like this:appery11Now this sensitive data is stored in the database. Next you are going to delete the values from the app (client) and reference the values in the database (server).

Next you need to configure the secure proxy.

  1. Go to https://appery.io/proxy/. You should see the proxy you created earlier. Open the proxy.
  2. Select Use proxy + store sensitive (private) data in database.  
  3. You will see drop downs that we need to point to the database you just created.
    1. For Database select TwilioDB
    2. For Collection select Secrets
    3. For Key column select key
    4. For Value column select value
      You just configured this proxy to use this database.

The last thing is to update the actual app.

  1. In the App Builder, open Services > SendSms service
  2. Update the service URL to: https://{AccountSid}:{AuthToken}@api.twilio.com/2010-04-01/Accounts/{AccountSid}/Messages.json
  3. Open Request tab and then Query String tab
  4. Create two parameters and set their values:
    1. Name: AccountSid, Value: {AccountSid_db}
    2. Name: AuthToken, Value: {AuthToken_db}

As you set the proxy to be a secure proxy and linked to a database, the AccountSid and Auth Token values will now be kept on the server. When a call is made to Twilio API, the values will be substituted on the server

Summary

Creating mobile apps with Twilio and Appery.io is fast and simple. Twilio’s API can be quickly integrated, tested and secured when building a mobile app in Apppery.io. Appery.io visual tools allow building enterprise apps with messaging capabilites very fast.

In addition to this hands on tutorial, Apppery.io also provides an out-of-the-box plugin for Twilio Messaging API. To add a plugin to your app select Create new > From plug-in:

appery12
Once the plugin is imported you only need to set the AccountSid and AuthToken values. The plugin allows sending an SMS message, view a list of all messages and view details for each message.

Learn more about Appery.io here

 

Build Fast, Build Visually: Appery.io Shows You How To Send Twilio SMS From Your Mobile App

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


You may know what it’s like to use the Twilio API. You may even know a Twilio employee or three. But what’s it really like to BE a Twilion?

For me, it’s been an intense couple of months. I relocated my family from Texas to California for this new role at Twilio, so this wasn’t a decision to make lightly. I had to believe in the company’s people and the company’s product. While I’m still learning about both, I continue to find them equally intriguing and downright impressive. In fact, it’s one of the most tightly knit groups of people I’ve ever seen.

And I also learned that because of the massive growth and hiring, no one’s Twilio experience is quite the same as anyone else’s. From engineering to sales, marketing and operations, each team has its own culture. We all have the same perks and many of the same traditions. But it’s the culture of learning, building and doing something differently to empower developers, that creates the experience.

Which leads us to #twiliolife.

 

Do a bit of searching on the social interwebs and you’ll find story after story about events, employees, offices, challenges, owls and Wednesday nights. But the relationships go so much deeper.

  • You’ll see a place where employees are recognized for their ingenuity and creativity during app demos.
  • A place where coworkers support a friend in need, by giving up both funds and follicles for a worthy cause.
  • If you look closely, you’ll see a place where the word ‘family’ has a universal meaning regardless of your background or orientation.

That’s where my job comes in. I’m here to help Twilions tell our story in our words and continue sharing them across the Twilio Life channels. You can follow along and contribute by using the #twiliolife hashtag on these networks:

@TwilioLife on Instagram

 

@TwilioLife on Twitter

@TwilioLife on Twitter

 

@TwilioLife on Facebook

@TwilioLife on Facebook

Each week will feature a different employee story and profile picture to help represent the #twiliolife culture. It’s not for everyone. It’s for empowering builders and DOers. We all got here in different ways and for different reasons. But it’s what we do together that makes us Twilions.

We’re hiring. Search all open Twilio jobs.

What’s it Like to be a Twilion?

Bookmark this post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google


Last updated: May 24, 2015 08:01 AM All times are UTC.
Powered by: Planet

Speech Connection and Logos are Trademark of Nu Echo Inc. Copyright 2006-2008.