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 International – Global Reach, Local Experience

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.

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

Basic Voice

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’.
Call your Twilio number.
What happened?

<?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 command paying particular attention to the ‘voice’ attribute.

Try changing the voice for your app.
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.
Call your Twilio number.
What happened?

LANGAUGE ATTRIBUTE

Once you’ve successfully changed the voice, try changing the language.
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.
Call your Twilio number.
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.

Change (or add) the phone record in the phone book array in your source code.
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.
Call your Twilio number.
What happened?

<?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>

TwiML Voice Request Variables

Gathering Input

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

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.
Call your Twilio number.
What happened?

<?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 "\n";

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

TwiML Gather Documentation

Navigating a Tree

Now let’s navigate a simple voice menu.

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.
Call your Twilio number.
What happened?
How could you improve the user’s experience?


    
        Welcome to Interactive Design for the Developing World, Spring 2015.
        For the course description, press 1.
        For the course location and meeting time, press 2.
        To leave a message for the instructor, press 3.         
    
    
    Sorry, I didn't get your response.
    ./class-menu.xml

/* class-menu-processor.php */

<?php 

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

echo ''; 
echo '';
 
switch($selection){
    case 1:
        echo "For many in the United States...";
    break;
 
    case 2:
        echo "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.";
     break;
 
    case 3:
        echo "215-264-2459";
    break;
 
    default:
        echo "I didn't understand your selection../class-menu.xml";
    break;
}
 
echo '';
?>

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 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

Page 42 in the Freedom Fone User & Advocacy Guide
class-menu.xml flow example
Alexa Skills Kit Voice Design Best Practices
Pages 31-41 in Freedom Fone User & Advocacy Guide

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 займ на карту онлайн