Twilio Voice

Announcements

  • This Week’s Brown Bag Lunch: The Evolution of Television
  • Next Week – User Persona & User Stories
  • In 2 Weeks – site visits to partner organizations

Team Pages

Let’s take a few minutes to complete setting up your team pages.

Now that we’ve got your team pages set up, get together with your team and create the following headings on your page:

Partner

Include which project your team will be partnering with.

Team

List your team members, along with what role each will perform on the team.

Project Concept

Include a link to your team’s project concept document. Be sure to share it as “anyone with the link may view”.

Design Notebooks: Project Concepts

Now that our team pages are set up, let’s go around the room and have each team briefly present their project concept, using their team page as their starting point.

As a group, let’s discuss each project concept.

Voice Menus

SMS is great, but…

  • It only supports 160 characters
  • It assumes the device supports a language you understand well enough
  • And it assumes you can read and write

What languages do the most common devices support?

What countries support local phone numbers for Twilio?

Twilio Voice

In addition to SMS, Twilio supports voice. You can use voice using Twilio’s text-to-speech engine, or use recorded messages. Today we’ll be using the text-to-speech engine.

  1. Download the source code for this week’s examples from the class Github Organization.
  2. Unzip the  repository on your local machine and upload the contents to a new folder in the ‘www’ folder on your TCNJ web account.
  3. Let’s try out the examples one by one.

Basic Voice

  1. After you’ve uploaded the basic-voice.xml file to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Voice request url for your number to point to ‘basic-voice.xml’.
  2. Call your Twilio number.
  3. What happened?
<!-- basic-voice.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say>Hello Twilio!</Say>
</Response>

TwiML Say Documentation

VOICE ATTRIBUTE

Let’ experiment. Take a look at the documentation for the <Say> command paying particular attention to the ‘voice’ attribute.

  1. Try changing the voice for your app.
  2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
  3. Call your Twilio number.
  4. What happened?
LANGAUGE ATTRIBUTE
  1. Once you’ve successfully changed the voice, try changing the language.
  2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
  3. Call your Twilio number.
  4. What happened?

Twilio Voice Request Variables

Similar to our experience last week sending SMS messages, TwiML for Voice also supports a number of request variables we can access. Like last week, we can use this to create a simple phone book so we can recognize callers.

  1. Change (or add) the phone record in the phone book array in your source code.
  2. Re-upload the your file to your TCNJ web account and edit the Voice request url for your number to point to voice-request-vars.php.
  3. Call your Twilio number.
  4. What happened?
<!-- voice-request-vars.php -->
<?php
$from = $_REQUEST["From"];

// make an associative array of senders we know, indexed by phone number
$phonebook = array(
    "+12152642459"=>"Professor Thompson",
);

$name = "étranger";

// if the caller is in our phonebook, then greet them by name
// otherwise, refer to them as étranger
if(isset($phonebook[$_REQUEST['From']])) {
    $name = $phonebook[$_REQUEST['From']];
}
header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
?>
<Response>
    <Say voice="alice" language="fr-FR">Allô <?php echo $name ?>.</Say>
<Response>

TwiML Voice Request Variables

Gathering Input

Now let’s see if we can gather information interactively from the user.

  1. Upload numbergame.xml and checknumber.php to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
 <!-- numbergame.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./checknumber.php" method="get" finishOnKey="*">
        <Say>I'm thinking of a number between 1 and 10, enter the number then press star.</Say>
    </Gather>
</Response>
 /* checknumber.php */
<?php
$number = 5;
$guess = $_REQUEST['Digits'];

header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

if($guess == $number){
    echo "<Response>";
    echo "<Say>Correct. The number was ".$number.". You win!</Say>";
    echo "</Response>";
} else {
    echo "<Response>";
    echo "<Say>Incorrect. Guess again.</Say>";
    echo "<Redirect method="POST">http://yourserver/numbergame.xml</Redirect>";
    echo "</Response>";
}

TwiML Gather Documentation

Navigating a Tree

Now let’s navigate a simple voice menu.

  1. Upload class-menu.xml and class-menu-processor.php to your TCNJ web account and edit the Voice request url for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
  4. How could you improve the user’s experience?
 <!-- class-menu.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./class-menu-processor.php" numDigits="1">
        <Say>Welcome to Interactive Design for the Developing World, Spring 2015.</Say>
        <Say>For the course description, press 1.</Say>
        <Say>For the course location and meeting time, press 2.</Say>
        <Say>To leave a message for the instructor, press 3.</Say>         
    </Gather>
    <!-- Timeout defaults to 5 seconds, if customer doesn't input anything, redirect to prompt and try again. -->
    <Say>Sorry, I didn't get your response.</Say>
    <Redirect>./class-menu.xml</Redirect>
</Response>
/* class-menu-processor.php */
<?php 

$selection = (int) $_REQUEST['Digits'];
header('Content-type: text/xml');

echo '<?xml version="1.0" encoding="UTF-8"?>'; 
echo '<Response>';
 
switch($selection){
    case 1:
        echo "<Say>For many in the United States...</Say>";
    break;
 
    case 2:
        echo "<Say>I M M 470 0 3, meets every Friday morning, 9 30 a m to 12 20 p m, in A I M M 2 26.</Say>";
     break;
 
    case 3:
        echo "<Dial>215-264-2459</Dial>";
    break;
 
    default:
        echo "<Say>I didn't understand your selection.</Say><Redirect>./class-menu.xml</Redirect>";
    break;
}
 
echo '</Response>';
?>

TwiML Redirect Documentation

 Challenges

Twilio SMS or Voice

  • Using this influenza diagnostic decision tree, create a Twilio SMS or Voice Menu app a user can call or text with their symptoms and receive a recommended course of action in return
  • Hint: If using Twilio Voice TwiML, consider using the <redirect> verb

Amazon Echo

Continue working with IFTTT

Try creating a new recipe using SMS, Voice, or another connector from IFTTT.

Cordova

Have a look at this Cordova Sensors Plugin

See if you can install it and get one of the three demo apps working on your phone.

Assignment

Reading

Design Notebooks

VUI (Voice User Interface) Design Principles

  • Create a new slide in your Design Notebooks and label it “Best VUI  Design Practices”
  • Read Page 42 in the Freedom Fone User & Advocacy Guide
  • Review the class-menu.xml voice menu example from class
  • Based on what you read in the Freedom Fone guide, critique the flow for the class-menu.xml voice menu
  • Read Alexa Skills Kit Voice Design Best Practices
  • Compare the voice menu recommendations from Freedom Fone with those from Amazon for the Alexa. How do they compare?
  • Identify a couple of differences and similarities between designing for DTFM (dial tone buttons) and speech recognition (Alexa)

VUI Design Process

  • Create a new slide in your Design Notebook and title it “VUI Design Process”
  • Read pages 31-41 in Freedom Fone User & Advocacy Guide
  • Based on what you’ve done so far in class, and the design process recommendations in the Freedom Fone documentation, write a short paragraph describing what should your team’s next step be in designing your system.

*Submit links to your Design Notebooks in Canvas prior to next week’s class

Leave a Reply

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